body{margin:0}img{max-width:100%}[hidden]{display:none!important}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../f/baloo2_wXKrE3kTpo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../f/baloo2_wXKrE3kTpo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../f/nunito_XRXV3I6Li0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../f/nunito_XRXV3I6Li0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Layout: Clipo's poster scroll with flat type; only the app's own buttons, bubbles and panels are fur. */
:root {
  color-scheme: light;
  --tuerkis: #2fa9a8; --creme: #efe5d2; --rosa: #ecb9b4; --gold: #e0b44f; --pflaume: #3b2b45; --papier: #fff8ec; --schatten: rgba(59, 43, 69, .28);
  --anzeige: "Archivo Black", "Arial Black", Impact, sans-serif; --knopf: "Baloo 2", "Trebuchet MS", sans-serif; --text: "Nunito", "Segoe UI", system-ui, sans-serif;
  --rand: max(16px, env(safe-area-inset-left, 0px)); --rand-r: max(16px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
body { background: var(--creme); color: var(--pflaume); font: 600 18px/1.45 var(--text); overflow-x: hidden; }
h1, h2, h3, p, figure { margin: 0; font-weight: inherit; font-size: inherit; }
.wort { font: 800 var(--g, 7vw)/1.02 var(--knopf); letter-spacing: -.015em; }
.wort > span { display: block; width: max-content; max-width: 100%; }
.zeile-r { margin-left: auto; }
.alt { opacity: .62; }
.pfeil { display: inline-block; width: .8em; height: .8em; vertical-align: -.02em; }
.pfeil.rechts { transform: rotate(-90deg); }

/* App fur: the real button images, nine-sliced. */
.f { border-style: solid; border-width: 22px; border-color: transparent; background: none; border-image-slice: 76 fill; border-image-width: 22px; border-image-repeat: stretch; }
.f-creme { border-image-source: url(fell_creme.webp); }
.f-tuerkis { border-image-source: url(fell_tuerkis.webp); }
.f-gold { border-image-source: url(fell_gold.webp); }
.f-lila { border-image-source: url(fell_lila.webp); }
.f-pink { border-image-source: url(fell_pink.webp); }
.f-gruen { border-image-source: url(fell_gruen.webp); }
.feld, .blase, .spr { border-image-slice: 76; border-image-repeat: round; background: none 0 0 / 100px 64px padding-box; }
.blase.du { background-image: none; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 66px; padding: 0 12px 4px; color: var(--pflaume); font: 800 clamp(16px, 1.4vw, 20px)/1.05 var(--knopf); cursor: pointer; text-decoration: none; transition: transform .12s; -webkit-tap-highlight-color: transparent; white-space: nowrap; }
.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: translate(1px, 2px); color: #fff4b8; text-shadow: 0 0 6px #ff9d2e, 0 0 16px #ff7a1a; }
.knopf:focus-visible, .egon:focus-visible, .zu:focus-visible { outline: 3px solid var(--pflaume); outline-offset: 2px; border-radius: 14px; }
.karte { background: var(--papier); color: var(--pflaume); border-radius: 18px; padding: .9em 1.1em; box-shadow: 5px 7px 0 var(--schatten); }

/* Hero */
.held { background: var(--tuerkis); color: var(--papier); position: relative; overflow: hidden; padding: clamp(18px, 2.4vw, 34px) var(--rand-r) clamp(26px, 3vw, 44px) var(--rand); --g: clamp(46px, 9vw, 164px); min-height: 56vw; display: flex; flex-direction: column; justify-content: space-between; gap: 2vw; }
.kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; z-index: 3; }
.marke { font: 800 clamp(24px, 2.4vw, 34px)/1 var(--knopf); text-shadow: 1px 2px 0 rgba(20, 70, 70, .55); }
.held h1 { position: relative; z-index: 3; pointer-events: none; }
.einzug { margin-left: 1.05em; }
.fern { margin-top: .32em; }
.hund { position: absolute; left: 50%; bottom: 0; width: min(37vw, 700px); margin-left: -18vw; z-index: 2; pointer-events: none; display: block; height: auto; filter: drop-shadow(14px 16px 14px rgba(15, 60, 60, .42)); }

/* Top of the page: flat night headline, the app's buttons in a pill, the diary open right away. */
.nacht { background: #0b0a0d; color: #fff; padding: clamp(14px, 1.6vw, 24px) var(--rand-r) clamp(30px, 4vw, 60px) var(--rand); text-align: center; }
.nacht .kopfzeile { text-align: left; }
.leiste { display: flex; flex-wrap: wrap; justify-content: center; width: fit-content; max-width: 100%; margin: clamp(8px, 1vw, 16px) auto 0; padding: 2px 12px; background: #1b1820; border-radius: 42px; }
.lies { font: 800 min(17vw, 27vh)/1 var(--knopf); margin: clamp(10px, 1.5vw, 24px) 0 clamp(64px, 6.4vw, 104px); white-space: nowrap; }
.lies span { display: inline-block; }
.lesen { width: min(100%, 860px); margin-inline: auto; }
.lesen .heft, .lesen .gefuehle { min-height: 244px; text-align: left; }
.nacht .quelle { color: #c9c3ce; }
.sack { position: fixed; left: 0; top: 0; z-index: 29; display: none; pointer-events: none; will-change: transform; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .22)); }
.sack img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sack .beutel { transform-origin: 64% 10%; }
.huerde { position: fixed; left: 0; top: 0; z-index: 29; border-width: 9px; border-image-width: 9px; pointer-events: none; }

.lies.lang { font-size: min(13vw, 27vh); } .lies.mittel { font-size: min(14.5vw, 27vh); }
.held h2 { position: relative; z-index: 3; pointer-events: none; }
.schwarz { padding-top: clamp(40px, 5vw, 80px); }
.zimmer { display: block; width: min(100%, 720px); height: auto; margin: -2vw auto 0; }
.unter { max-width: 34ch; margin: 18px auto 0; text-align: left; }
.gespraech { background: var(--papier); border-radius: 18px; padding: 14px; min-height: 244px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; text-align: left; color: var(--pflaume); }
.spr { width: fit-content; max-width: 86%; border-width: 20px; border-image-width: 20px; font: 800 clamp(16px, 1.3vw, 19px)/1.25 var(--text); }
.spr.du { align-self: flex-end; color: #06302f; background-image: none; }
@media (max-width: 760px) { .lies, .lies.lang, .lies.mittel { font-size: 21vw; white-space: normal; line-height: .98; } .fern { margin-top: 98vw; } }
.probe { display: flex; flex-wrap: wrap; gap: 0 4px; justify-content: center; margin-top: 8px; }


.leiste { position: relative; z-index: 4; }
.lies.gross { font-size: min(16.5vw, 25vh); line-height: .96; margin-bottom: clamp(108px, 8.4vw, 136px); }
.lies.gross span { display: block; width: fit-content; margin-inline: auto; }
.lies.gross .klein { font-size: .3em; line-height: 1; letter-spacing: .08em; margin-top: .22em; }
body { background: var(--nachtgrund); }
.held, .aussage, .zwei, .schwarz, .fuss { background: linear-gradient(var(--von), var(--flaeche) clamp(150px, 26vh, 280px)); background-color: var(--flaeche); }
.held, .aussage, .zwei, .fuss { padding-top: calc(clamp(110px, 18vh, 200px)); }
.fuss { padding-top: calc(clamp(150px, 19vw, 320px) + clamp(70px, 12vh, 130px)); }
.guckt { top: calc(clamp(18px, 2.4vw, 40px) + clamp(70px, 12vh, 130px)); }
.held { --von: var(--nachtgrund); --flaeche: var(--grund1); color: var(--schrift1); }
.aussage { --von: var(--grund1); --flaeche: var(--grund2); color: var(--schrift2); }
section.nacht.schwarz { --flaeche: var(--nachtgrund); }
.aussage + section.nacht.schwarz { --von: var(--grund2); padding-top: clamp(110px, 18vh, 200px); }
.zwei { --von: var(--nachtgrund); --flaeche: var(--grund3); color: var(--schrift3); }
.zwei + section.nacht.schwarz { --von: var(--grund3); padding-top: clamp(110px, 18vh, 200px); }
.fuss { --von: var(--nachtgrund); --flaeche: var(--grund4); color: var(--schrift4); }
.brett { background: var(--brett); color: #fff; box-shadow: none; }
.marke { text-shadow: none; }
.hund { filter: drop-shadow(10px 12px 14px rgba(11, 10, 13, .3)); }
.griffe i { background: var(--griff); border-color: var(--griffrand); }
@media (max-width: 760px) { .lies.gross { font-size: 18vw; white-space: nowrap; } .fuss { padding-top: calc(58vw + 60px); } .guckt { top: calc(8vw + 60px); } }

/* Claim */
.aussage { padding: clamp(46px, 7vw, 110px) var(--rand-r) clamp(50px, 7vw, 110px) var(--rand); --g: clamp(34px, 8vw, 140px); }
.aussage .letzte { display: flex; align-items: baseline; justify-content: space-between; width: auto; gap: .3em; flex-wrap: wrap; }
.aussage > .karte { max-width: 31ch; margin-top: clamp(24px, 3.4vw, 54px); font-size: clamp(18px, 1.55vw, 22px); }
.kasten { background: var(--tuerkis); color: var(--papier); border-radius: 44px; box-shadow: 9px 11px 0 var(--schatten); max-width: 1500px; margin: clamp(30px, 4vw, 60px) 0 0 auto; width: min(100%, 86vw); padding: clamp(24px, 3.6vw, 60px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 50px); align-items: center; --g: clamp(48px, 10vw, 178px); }
.kasten .karte { margin-top: 1.1em; font-size: clamp(18px, 1.7vw, 24px); max-width: 26ch; }
.feld { border-width: 28px; border-image-width: 28px; padding: 2px; }
.reiter, .reiter2 { display: flex; flex-wrap: wrap; justify-content: center; }
.reiter .knopf, .reiter2 .knopf { flex: 1 1 28%; }
.heft { background: var(--papier); color: var(--pflaume); border-radius: 18px; position: relative; padding: 18px 16px 22px 58px; min-height: 340px; overflow: hidden; background-image: linear-gradient(90deg, transparent 44px, #e98e96 44px, #e98e96 46px, transparent 46px), repeating-linear-gradient(transparent 0 47px, #bfd6e6 47px 48px); }
.heft::before { content: ""; position: absolute; left: 13px; top: 24px; width: 15px; height: calc(100% - 40px); height: calc(round(down, 100% - 55px, 48px) + 15px); background: radial-gradient(circle 7px at 7.5px 7.5px, var(--pflaume) 98%, transparent) 0 0 / 15px 48px repeat-y; }
.heft::after { content: ""; position: absolute; right: 34px; top: 0; width: 18px; height: 40px; background: #d9324f; }
.etikett { display: inline-block; font: 800 16px/1.2 var(--knopf); padding: 5px 11px 3px; border-radius: 4px; margin: 0 8px 12px 0; box-shadow: 1px 2px 2px rgba(59, 43, 69, .22); }
.e1 { background: #ffd35e; transform: rotate(-1.2deg); } .e2 { background: #8fe3c4; transform: rotate(.6deg); } .e3 { background: #c9d7ff; transform: rotate(-.4deg); } .e4 { background: #ffc7e2; transform: rotate(.8deg); }
.satz { font: 800 clamp(18px, 1.4vw, 21px)/48px var(--knopf); }
.quelle { font-size: 13px; margin-top: 8px; text-align: center; }
.gefuehle { min-height: 340px; align-content: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; background: var(--papier); color: var(--pflaume); border-radius: 18px; padding: 14px; }
.wetter { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; font: 800 28px/1 var(--knopf); padding: 6px 6px 10px; }
.tage { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font: 800 15px/1 var(--knopf); margin-top: 8px; }
.tage span { padding: 8px 0; border-radius: 12px; } .tage .jetzt { background: #ffd35e; }
.g small { display: block; font: 600 13px/1.2 var(--text); text-align: center; margin-top: -4px; }
.g .knopf { width: 100%; cursor: default; }
[hidden] { display: none !important; }

/* Clips: original files, never drawn larger than they are. */
.zwei { background: var(--rosa); padding: clamp(44px, 6vw, 96px) var(--rand-r) clamp(52px, 7vw, 110px) var(--rand); --g: clamp(40px, 5.3vw, 92px); }
.zwei .satz2 { font: 800 clamp(28px, 3.8vw, 62px)/1.12 var(--knopf); max-width: 21em; margin-left: auto; text-wrap: balance; margin-bottom: clamp(38px, 6vw, 96px); }
.spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 54px); align-items: start; }
.spalten article { display: grid; gap: clamp(16px, 1.7vw, 26px); min-width: 0; justify-items: start; }
.griffe { position: relative; width: fit-content; max-width: 100%; }
.griffe video { display: block; width: auto; height: auto; max-width: 100%; max-height: 82vh; border-radius: 10px; background: #8fa5a3; }
.griffe i { position: absolute; width: 18px; height: 18px; background: var(--gold); border: 2px solid var(--pflaume); border-radius: 3px; }
.griffe i:nth-of-type(1) { left: -9px; top: -9px; } .griffe i:nth-of-type(2) { right: -9px; top: -9px; }
.griffe i:nth-of-type(3) { left: -9px; bottom: -9px; } .griffe i:nth-of-type(4) { right: -9px; bottom: -9px; }
.tasten { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: clamp(30px, 4vw, 60px); align-items: center; }

/* Footer */
.fuss { padding: clamp(150px, 19vw, 320px) var(--rand-r) clamp(30px, 4vw, 60px) var(--rand); position: relative; }
.guckt { position: absolute; left: 20%; top: clamp(18px, 2.4vw, 40px); width: clamp(190px, 24vw, 410px); height: clamp(150px, 18.5vw, 310px); overflow: hidden; z-index: 1; pointer-events: none; }
.guckt img { width: 100%; height: auto; display: block; }
.brett { position: relative; z-index: 2; background: var(--tuerkis); color: var(--papier); border-radius: 44px; box-shadow: 9px 11px 0 var(--schatten); max-width: 1560px; margin-inline: auto; padding: clamp(26px, 3.6vw, 60px); display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); align-items: end; --g: clamp(35px, 6.6vw, 118px); }
.recht { margin-top: 18px; font: 600 14px/1.4 var(--text); text-align: center; padding-bottom: 8px; }
.recht a { color: inherit; }

/* Living Egolino: small, baked sprite, moved by transform only. */
.egon { position: fixed; left: 0; top: 0; z-index: 30; width: var(--s); height: var(--s); --s: clamp(100px, 7.5vw, 132px); touch-action: none; cursor: grab; will-change: transform; display: none; border: 0; padding: 0; background: none; }
.egon.packt i { filter: drop-shadow(0 10px 6px rgba(0, 0, 0, .3)); }
.egon i { display: block; width: 100%; height: 100%; background-repeat: no-repeat; }
.egon.packt { cursor: grabbing; }
.blase { position: fixed; left: 0; top: 0; z-index: 31; max-width: min(300px, 74vw); pointer-events: none; display: none; font: 800 16px/1.3 var(--text); will-change: transform; }
.blase.du { color: #06302f; }
.dock { position: fixed; z-index: 32; left: 50%; bottom: max(8px, env(safe-area-inset-bottom, 0px)); width: min(620px, calc(100vw - 16px)); transform: translateX(-50%); display: none; align-items: center; flex-wrap: wrap; }
.dock.da { display: flex; }
.dock input { flex: 1 1 200px; min-width: 0; min-height: 66px; font: 800 17px/1.2 var(--text); color: var(--pflaume); outline: 0; padding: 0 8px 4px; }
.dock input::placeholder { color: #6b5a75; }
.dock .senden { min-width: 74px; }
.dock .zu { background: none; border: 0; font: 800 20px/1 var(--knopf); color: var(--pflaume); cursor: pointer; padding: 10px; }
.dock small { flex: 0 1 auto; margin: 0 auto; padding: 3px 10px; font: 800 12px/1 var(--text); color: var(--pflaume); background: rgba(255, 249, 238, .85); border-radius: 8px; }

@media (max-width: 760px) {
  .leiste { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: 100%; scrollbar-width: none; border-radius: 30px; }
  .leiste .knopf { flex: none; }
  .lies { font-size: 25vw; margin-bottom: 76px; }
  .feld { border-width: 14px; border-image-width: 14px; }
  .heft { padding: 14px 8px 18px 52px; }
  .satz { font-size: 16px; line-height: 48px; }
  .held { min-height: 0; --g: 15vw; padding-bottom: 8vw; gap: 5vw; }
  .fern { margin-top: 86vw; }
  .einzug { margin-left: .6em; }
  .hund { width: 88vw; margin-left: -44vw; bottom: auto; top: 62vw; }
  .aussage { --g: 11vw; }
  .aussage .letzte .alt { display: none; }
  .aussage .letzte { justify-content: flex-end; }
  .kasten { grid-template-columns: minmax(0, 1fr); width: 100%; padding: 22px 12px; --g: 21vw; border-radius: 30px; }
  .kasten .karte { max-width: none; }
  .spalten { grid-template-columns: minmax(0, 1fr); }
  .zwei { --g: 13vw; }
  .fuss { padding-top: 58vw; }
  .guckt { left: 10%; top: 8vw; width: 62vw; height: 50vw; }
  .brett { grid-template-columns: minmax(0, 1fr); --g: 10.4vw; }
}

.menue-auf { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .5em; font: 800 clamp(24px, 2.4vw, 34px)/1 var(--knopf); color: #fff; border-radius: 8px; padding: 4px 6px 4px 0; }
.menue-auf:focus-visible, .menue a:focus-visible, .menue-zu:focus-visible, .faq summary:focus-visible, .schreib:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.menue-auf i { display: block; width: 22px; height: 12px; border-block: 2px solid currentColor; }
.menue { position: fixed; inset: 0 auto 0 0; height: 100dvh; max-height: none; width: min(440px, 88vw); margin: 0; border: 0; padding: clamp(24px, 3vw, 40px); padding-left: max(32px, env(safe-area-inset-left, 0px)); background: #f4f2ec; color: #111113; overflow-y: auto; }
.menue[open] { display: flex; flex-direction: column; animation: menueRein .32s cubic-bezier(.2, .8, .2, 1); }
.menue::backdrop { background: rgba(11, 10, 13, .45); animation: menueDunkel .32s ease; }
@keyframes menueRein { from { transform: translateX(-100%); } }
@keyframes menueDunkel { from { opacity: 0; } }
.menue-zu { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; align-self: flex-start; margin: -8px 0 18px -10px; }
.menue-zu svg { width: 24px; height: 24px; }
.menue nav { display: grid; gap: 2px; }
.menue nav a { display: block; color: inherit; text-decoration: none; font: 800 clamp(25px, 3.6vh, 32px)/1.42 var(--knopf); }
.menue nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.sozial { margin: clamp(18px, 3.4vh, 34px) 0 0; display: grid; gap: 4px; font: 600 17px/1.5 var(--text); color: #5d5d60; }
.sozial span::after, .unten span:not(.lz)::after { content: " (bald)"; font-size: .8em; }
html { scroll-behavior: smooth; }
section.zwei { background: linear-gradient(var(--von), var(--flaeche) clamp(150px, 26vh, 280px)); background-color: var(--flaeche); }
.vor { max-width: 34em; margin: clamp(-34px, -2vw, -10px) auto clamp(26px, 3vw, 44px); font: 700 clamp(19px, 1.7vw, 24px)/1.35 var(--text); color: #e9e6e0; text-wrap: balance; }
.gehirn, .guide, .faq, section.innen, section.team { padding-inline: max(var(--rand), 4vw) max(var(--rand-r), 4vw); padding-bottom: clamp(60px, 8vw, 130px); }
.gehirn, .guide, .faq { padding-top: clamp(110px, 18vh, 200px); --g: clamp(40px, 7vw, 118px); background: linear-gradient(var(--von), var(--flaeche) clamp(150px, 26vh, 280px)); background-color: var(--flaeche); }
.gehirn { --von: var(--nachtgrund); --flaeche: var(--grund1); color: var(--schrift1); }
.gehirn + section.innen { --von: var(--grund1); padding-top: clamp(110px, 18vh, 200px); }
.guide { --von: var(--nachtgrund); --flaeche: var(--grund2); color: var(--schrift2); }
.faq { --von: var(--grund2); --flaeche: var(--grund3); color: var(--schrift3); }
.faq + section.team { --von: var(--grund3); padding-top: clamp(110px, 18vh, 200px); }
.dreier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 56px); margin-top: clamp(30px, 4vw, 64px); border-top: 1px solid currentColor; padding-top: clamp(20px, 2vw, 32px); }
.dreier h3, .zellen h3 { font: 800 clamp(26px, 2.5vw, 38px)/1.1 var(--knopf); margin: 0 0 .4em; }
.dreier p, .zellen p { margin: 0; max-width: 32em; font: 600 clamp(17px, 1.3vw, 19px)/1.45 var(--text); }
.saetze { max-width: 720px; margin: 0 auto; text-align: left; font: 600 clamp(18px, 1.5vw, 22px)/1.5 var(--text); }
.saetze p { margin: 0 0 1em; }
.saetze .stark { font: 800 clamp(32px, 4vw, 58px)/1.14 var(--knopf); margin-bottom: .7em; }
.saetze .leise { color: #b9b4bd; margin-bottom: 0; }
.guide-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 40px; margin-bottom: clamp(26px, 3vw, 48px); }
.guide-kopf p { margin: 0; max-width: 24em; font: 600 clamp(17px, 1.3vw, 19px)/1.45 var(--text); }
.zellen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid currentColor; }
.zellen article { position: relative; padding: clamp(24px, 3vw, 46px) clamp(16px, 3vw, 46px) clamp(16px, 2vw, 28px); min-height: 330px; display: flex; flex-direction: column; border-bottom: 1px solid currentColor; }
.zellen article:nth-child(odd) { border-right: 1px solid currentColor; }
.zellen small { display: block; font: 700 14px/1.5 var(--text); opacity: .75; margin-top: .25em; }
.mini { display: block; width: 132px; height: 132px; margin: auto auto 0; flex: none; background-repeat: no-repeat; }
.faq .wort { margin-bottom: clamp(20px, 3vw, 44px); }
.faq details { max-width: 900px; border-top: 1px solid currentColor; }
.faq details:last-child { border-bottom: 1px solid currentColor; }
.faq summary { cursor: pointer; list-style-position: outside; padding: .75em 0 .75em .2em; margin-left: 1em; font: 800 clamp(23px, 2.2vw, 32px)/1.2 var(--knopf); }
.faq details p { margin: 0 0 1.2em 1.2em; max-width: 36em; font: 600 clamp(17px, 1.3vw, 19px)/1.45 var(--text); }
.schreib { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px clamp(24px, 4vw, 70px); align-items: center; max-width: 1000px; margin: 0 auto; padding: clamp(24px, 3vw, 42px); border-radius: 14px; background: #1b1a1e; color: #f4f2ec; text-decoration: none; text-align: left; font: 600 clamp(17px, 1.3vw, 19px)/1.45 var(--text); }
.schreib strong { font: 800 clamp(28px, 2.6vw, 38px)/1.1 var(--knopf); }
.lang-pfeil { width: 48px; height: 24px; transition: transform .2s ease; }
.schreib:hover .lang-pfeil { transform: translateX(6px); }
.recht.unten { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: -8px; }
.recht.unten .lz { width: 26px; }
@media (max-width: 760px) {
  .dreier, .zellen { grid-template-columns: minmax(0, 1fr); }
  .zellen article:nth-child(odd) { border-right: 0; }
  .schreib { grid-template-columns: minmax(0, 1fr); }
  .fern { margin-top: 132vw; }
  .vor { margin-top: 0; }
  .lies.lang.kante { font-size: 15vw; white-space: normal; }
}
.fuss .brett { background: var(--brett); color: #fff; box-shadow: none; }
.held, .aussage, section.zwei, .gehirn, .guide, .faq { padding-top: clamp(140px, 24vh, 270px); }
.menue nav a, .dreier h3, .zellen h3, .faq summary, .schreib strong { }
.saetze .stark { }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .menue[open], .menue::backdrop { animation: none; } }

:root { --anzeige: var(--knopf); --weich: clamp(300px, 46vh, 480px); }
.wort { letter-spacing: 0; }
.spalten .wort, .brett .wort { }
.zwei .satz2 { }
.gehirn .wort, .guide .wort, .faq .wort { }
.griffe i { display: none; }
.reiter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; }
.reiter .knopf { min-width: 0; grid-column: auto !important; }
section[id] { scroll-margin-top: calc(var(--weich) * -.42); }
.alt { opacity: .82; }
.tasten-kopf { margin: clamp(34px, 4.4vw, 66px) 0 0; text-align: center; font: 800 clamp(26px, 2.5vw, 38px)/1.1 var(--knopf); }
.tasten { justify-content: center; margin-top: clamp(10px, 1.2vw, 18px); }
.dock { width: min(860px, calc(100vw - 16px)); padding: 8px 10px 6px; background: rgba(11, 10, 13, .93); border-radius: 22px; }
.dock .zu { color: #f4f2ec; }
.befehle { flex: 0 0 100%; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.befehle::-webkit-scrollbar { display: none; }
.befehle .knopf { flex: none; font-size: 14px; min-height: 0; min-width: 0; padding: 0 3px 2px; margin: 0 1px; border-width: 13px; border-image-width: 13px; }
.lies.gross { margin-bottom: 0; }
.kurz { max-width: 30em; margin: clamp(14px, 1.4vw, 22px) auto clamp(140px, 12vw, 165px); text-align: center; font: 600 clamp(17px, 1.5vw, 22px)/1.35 var(--text); color: #d9d5ce; text-wrap: balance; }
/* Long eased fades: no visible stop, and headlines start where the colour has arrived. */
.held, .aussage, section.zwei, .schwarz, .fuss, .gehirn, .guide, .faq { background: linear-gradient(in oklab, var(--von), color-mix(in oklab, var(--von) 90%, var(--flaeche)) calc(var(--weich) * .12), color-mix(in oklab, var(--von) 62%, var(--flaeche)) calc(var(--weich) * .3), color-mix(in oklab, var(--von) 34%, var(--flaeche)) calc(var(--weich) * .48), color-mix(in oklab, var(--von) 14%, var(--flaeche)) calc(var(--weich) * .66), color-mix(in oklab, var(--von) 4%, var(--flaeche)) calc(var(--weich) * .82), var(--flaeche) var(--weich)); background-color: var(--flaeche); }
.held, .aussage, section.zwei, .gehirn, .guide, .faq { padding-top: calc(var(--weich) * .72); }
.aussage + section.nacht.schwarz, .zwei + section.nacht.schwarz, .gehirn + section.innen, .faq + section.team { padding-top: calc(var(--weich) * .62); }
.hund { margin-left: -14vw; }
section.innen .lies { font-size: min(10.5vw, 24vh); width: fit-content; margin-inline: auto; white-space: nowrap; }
.saetze { text-align: center; }
.schreib { background: none; color: inherit; border-radius: 0; border-block: 1px solid currentColor; padding-inline: 0; }
.ganz { white-space: nowrap; }
.ziel { display: grid; gap: 14px; justify-items: start; }
.ziel .knopf { text-decoration: none; }
@media (max-width: 760px) {
  :root { --weich: 250px; }
  .befehle { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .befehle::-webkit-scrollbar { display: none; }
  .reiter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hund { margin-left: -44vw; top: calc(var(--weich) * .72 + 50vw); }
  .fern { margin-top: 92vw; }
  section.innen .lies, .lies.lang.kante { font-size: 12.5vw; white-space: nowrap; }
}
:root { --nachtgrund: #0b0a0d; --grund1: #5f6c72; --schrift1: #fff8ec; --grund2: #b5bcad; --schrift2: #2a2130; --grund3: #ba8a86; --schrift3: #2a2130; --grund4: #bf9e4e; --schrift4: #2a2130; --brett: #0b0a0d; --griff: #bf9e4e; --griffrand: #2a2130; } .befehle .knopf, .tasten .knopf, [role=tab].knopf, .etikett { filter: saturate(.45) brightness(.97); } .heft::after { background: #a5575c; }

/* The menu button stays on screen while scrolling; the pill keeps it readable over the light sections. */
.menue-auf { position: fixed; top: max(10px, env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px)); z-index: 33; padding: 8px 14px 8px 12px; border-radius: 12px; background: rgba(11, 10, 13, .84); font-size: clamp(20px, 2vw, 28px); }
.kopfzeile { justify-content: flex-end; min-height: 56px; }
.nacht .kopfzeile { padding-left: 150px; }
.kopfzeile .knopf { min-height: 56px; }
.sprache { margin-top: 18px; font: 700 17px/1.5 var(--text); color: inherit; }
.mehr { display: inline-block; margin-top: clamp(22px, 2.4vw, 36px); font: 800 clamp(17px, 1.4vw, 21px)/1.3 var(--text); color: inherit; text-underline-offset: 5px; }
.mehr::after { content: " \2192"; }
.aussage .mehr { display: block; width: fit-content; }
.innen .mehr { display: block; width: fit-content; margin-inline: auto; }
/* Sub pages: same fades and type, less on each screen. */
.band { --weich: clamp(140px, 20vh, 220px); padding: calc(var(--weich) * .72) max(var(--rand-r), 4vw) clamp(44px, 5vw, 80px) max(var(--rand), 4vw); --g: clamp(34px, 5.6vw, 96px); background: linear-gradient(in oklab, var(--von), color-mix(in oklab, var(--von) 90%, var(--flaeche)) calc(var(--weich) * .12), color-mix(in oklab, var(--von) 62%, var(--flaeche)) calc(var(--weich) * .3), color-mix(in oklab, var(--von) 34%, var(--flaeche)) calc(var(--weich) * .48), color-mix(in oklab, var(--von) 14%, var(--flaeche)) calc(var(--weich) * .66), color-mix(in oklab, var(--von) 4%, var(--flaeche)) calc(var(--weich) * .82), var(--flaeche) var(--weich)); background-color: var(--flaeche); }
.band .wort { text-wrap: balance; max-width: 18em; }
.band.faq details p { margin-bottom: 1.2em; }
.titel { font: 800 clamp(42px, 7vw, 116px)/1.04 var(--knopf); width: fit-content; max-width: min(100%, 15em); margin: clamp(120px, 11vw, 160px) auto 0; text-wrap: balance; }
.pfad { margin: 14px 0 clamp(70px, 8vw, 110px); font: 700 15px/1.4 var(--text); color: #c9c3ce; text-align: center; }
.pfad a { color: inherit; }
.unterkopf .kurz { margin-bottom: 0; max-width: 36em; }
.reiter2 .knopf { flex: 1 1 20%; }

.absatz { max-width: 40em; margin-top: clamp(24px, 3vw, 44px); font: 600 clamp(18px, 1.5vw, 22px)/1.5 var(--text); }
.absatz p { margin: 0 0 1em; }
.zweier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clipfeld { display: grid; justify-items: center; gap: clamp(24px, 3vw, 44px); }
.clipfeld .wort { text-align: center; margin-inline: auto; }
.seitenliste { display: grid; gap: 4px; margin-top: clamp(22px, 3vw, 40px); border-top: 1px solid currentColor; padding-top: 16px; }
.seitenliste a { font: 800 clamp(26px, 3vw, 44px)/1.3 var(--knopf); color: inherit; text-underline-offset: 6px; text-decoration-thickness: 1px; width: fit-content; }
.entwurf { margin: 10px auto 0; width: fit-content; padding: 6px 14px; border-radius: 8px; background: #bf9e4e; color: #2a2130; font: 800 15px/1.3 var(--text); }
.hinweis { max-width: 34em; margin: 16px auto 0; text-align: center; font: 600 clamp(16px, 1.3vw, 19px)/1.4 var(--text); color: #d9d5ce; text-wrap: balance; }
section.team .lies { font-size: min(10.5vw, 24vh); width: fit-content; margin-inline: auto; white-space: nowrap; }
.recht.unten a { display: inline-flex; align-items: center; min-height: 32px; }
section[id] { scroll-margin-top: 72px; }
.rs { background: #0b0a0d; color: #f4f2ec; font: 600 18px/1.55 var(--text); }
.rs main { max-width: 680px; margin: 0 auto; padding: clamp(32px, 7vw, 88px) 20px 80px; }
.rs h1 { font: 800 clamp(44px, 9vw, 76px)/1.05 var(--knopf); margin: .3em 0 .6em; }
.rs h2 { font: 800 28px/1.2 var(--knopf); margin: 1.6em 0 .3em; }
.rs p { margin: 0 0 1em; } .rs a { color: inherit; }
@media (max-width: 760px) {
  .zweier { grid-template-columns: minmax(0, 1fr); }
  .nacht .kopfzeile { padding-left: 130px; }
  .kopfzeile .knopf { font-size: 14px; padding-inline: 2px; border-width: 15px; border-image-width: 15px; min-height: 48px; }
  .titel { font-size: 11.5vw; }
  .reiter2 .knopf { flex: 1 1 40%; }
  section.team .lies { font-size: 12.5vw; }
  .recht.unten a { min-height: 44px; }
}

:root { --nachtgrund: #efe5d2; --brett: var(--papier); }
.wort, .lies, .titel, .satz2 { font-family: var(--knopf); font-weight: 800; letter-spacing: 0; }
.nacht { color: #2a2130; }
.nacht:not(.schwarz) { background: #efe5d2; }
.nacht .quelle, .pfad { color: #6a5f70; }
.kurz, .hinweis { color: #3b2b45; }
.brett, .fuss .brett { background: var(--papier); color: #2a2130; }
.menue-auf { color: #2a2130; background: rgba(239, 229, 210, .9); }
.menue { background: #efe5d2; color: #2a2130; }
.menue::backdrop { background: rgba(42, 33, 48, .35); }
.dock { background: rgba(239, 229, 210, .96); }
.dock .zu { color: #2a2130; }
.schreib { background: var(--papier); color: #2a2130; }
.rs { background: #efe5d2; color: #2a2130; }
/* Sections keep their soft tones, but none of them is dark any more. */
:root { --grund1: #a9d3cf; --schrift1: #2a2130; --grund2: #bddbc9; --grund3: #e6bdd0; --grund4: #e3c681; }
.vor { color: #3b2b45; }
.faq { background: linear-gradient(in oklab, var(--grund2), var(--nachtgrund) calc(var(--weich) * .45), var(--grund3) var(--weich), var(--grund3)); }
.dock .zu { color: #2a2130; }
/* Fur rendered with the app's own renderer. Panels are app colours, never beige on beige. */
.f { border-width: 34px; border-image-slice: 54 fill; border-image-width: 34px; border-image-repeat: round; }
.f-creme, .f-tuerkis { border-image-source: url(rahmen_tuerkis.webp); }
.f-gold { border-image-source: url(rahmen_gold.webp); }
.f-lila { border-image-source: url(rahmen_lila.webp); }
.f-pink { border-image-source: url(rahmen_pink.webp); }
.f-gruen { border-image-source: url(rahmen_gruen.webp); }
.feld, .blase, .spr, .blase.du { background: none; border-image-slice: 54 fill; border-image-repeat: round; }
.blase, .spr { border-width: 24px; border-image-width: 24px; border-image-source: url(rahmen_pink.webp); color: #2a2130; }
.blase.du, .spr.du { border-image-source: url(rahmen_tuerkis.webp); color: #2a2130; }
.reiter.feld, .reiter2.feld { width: fit-content; margin-inline: auto; border: 0; border-image: none; background: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; padding: 0; }
.knopf.fb { display: inline-block; flex: none; min-height: 0; min-width: 0; margin: 0; padding: 0; border: 0; border-image: none; background: none; filter: none; line-height: 0; cursor: pointer; }
.fb img { display: block; height: var(--kh, 58px); width: auto; transition: transform .12s ease, filter .12s ease; }
.fb:hover img { filter: brightness(1.06); }
.fb:active img { transform: scale(.96); }
[role=tab].fb img.an, [role=tab].fb[aria-selected=true] img.aus { display: none; }
[role=tab].fb[aria-selected=true] img.an { display: block; height: calc(var(--kh, 58px) * 1.156); margin: calc(var(--kh, 58px) * -.148) calc(var(--kh, 58px) * -.156) calc(var(--kh, 58px) * -.133) calc(var(--kh, 58px) * -.178); }
.kopfzeile { --kh: 52px; } .befehle { --kh: 42px; } .tasten { --kh: 58px; gap: 2px; } .probe { --kh: 50px; } .g { --kh: 46px; } .ziel { --kh: 58px; } .senden { --kh: 54px; }
span.fb { cursor: default; }
.dock input { border: 0; border-image: none; background: var(--papier); border-radius: 14px; min-height: 50px; padding: 0 14px 2px; }
@media (max-width: 760px) {
  .kopfzeile { --kh: 44px; } .reiter, .reiter2 { --kh: 48px; } .tasten { --kh: 50px; }
  .f { border-width: 26px; border-image-width: 26px; } .blase, .spr { border-width: 20px; border-image-width: 20px; }
}