/* ===========================================================================
   ERINNERUNGSWAND 748
   Gast: Dark Blue Grund, Cream Schrift, EIN oranger Button pro Screen.
   Team: Cream Grund, Dark Blue Schrift, Orange nur auf "Freigeben".
   Schriften liegen lokal — nichts wird nachgeladen, von nirgends.
   ========================================================================= */

@font-face{font-family:'Inter';src:url('/fonts/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'League Gothic';src:url('/fonts/LeagueGothic.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'MANIC';src:url('/fonts/MANIC.otf') format('opentype');font-weight:400;font-display:swap}

:root{
  --cream:#fff5e1;
  --blue:#161328;
  --orange:#bf5216;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'League Gothic','Inter',Impact,sans-serif;
  --accent:'MANIC','Bradley Hand',cursive;
  --pad:clamp(22px,6vw,40px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);line-height:1.45;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer}

/* Die Wortmarke — das Secondary Logo aus dem Kit: SEVEN FOUR EIGHT, horizontal,
   in der Headline-Schrift. Das handschriftliche 748 ist der Short Code; der
   steht auf dem Druck und im Tab, nicht als Absender im Kopf. */
.mark{
  display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:21px;line-height:1;letter-spacing:.07em;color:var(--cream);white-space:nowrap;
}
.mark--dark{color:var(--blue)}

.hl{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(52px,16vw,84px);line-height:.86;letter-spacing:-.005em;
  margin:0;
}
.hl__line{display:block}
.hl--small{font-size:clamp(44px,13vw,68px)}

/* ===================================================== GAST ============== */
.guest{background:var(--blue);color:var(--cream)}
.guest .stage{
  min-height:100svh;display:flex;flex-direction:column;
  padding:var(--pad);padding-top:calc(var(--pad) + env(safe-area-inset-top));
  padding-bottom:calc(var(--pad) + env(safe-area-inset-bottom));
}
.head{flex:0 0 auto;margin-bottom:8px}

/* Ein Screen ist sichtbar — welcher, entscheidet der Server. */
.screen{display:none;flex:1;flex-direction:column;gap:18px}
.guest[data-state='start']   [data-screen='start'],
.guest[data-state='preview'] [data-screen='preview'],
.guest[data-state='wait']    [data-screen='wait'],
.guest[data-state='done']    [data-screen='done'],
.guest[data-state='limit']   [data-screen='limit'],
.guest[data-state='blocked'] [data-screen='blocked'],
.guest[data-state='error']   [data-screen='error']{display:flex}

/* Der Stapel: die letzten Karten, die schon hängen. Liegt wie auf einem Tisch —
   schief, überlappend, die neueste obenauf. Ein einziger Knoten; wo er zu sehen
   ist, entscheidet der Zustand. Er darf den Knopf nie unter die Falz schieben,
   deshalb feste Höhe statt "so hoch wie die Bilder wollen": ob vier Karten
   liegen oder sechs, der Kasten ist derselbe und „Foto machen" rührt sich nie.
   Der Rand über dem Kasten ist der Anflugweg — von dort kommt jede Karte. */
.stack{display:none;position:relative;flex:1 1 auto;min-height:140px;margin:0}
/* Owner 2026-09-11 19:20: ONE VIEWPORT. The page is exactly the screen — the
   wordmark at the top, the words and the button at the bottom, and the pile
   OWNS whatever is left in between; the cards are sized by the screen's height,
   so the composition holds on every phone and tablet, upright or wide. */
.guest[data-state='start'] .stage{height:100svh;min-height:0;overflow:hidden}
.guest[data-state='start'] [data-screen='start']{flex:0 0 auto}
.guest[data-state='start'] .screen__body{flex:0 0 auto;justify-content:flex-end;padding-top:0}
/* Owner 2026-09-11 17:05: the pile is the picture of the page — bigger, hanging
   at the top right, the headline set lower beneath it. */
.guest[data-state='start'] .stack,
.guest[data-state='limit'] .stack,
.guest[data-state='blocked'] .stack{display:block}
/* Bündig links, auf derselben Achse wie Wortmarke, Headline und Lead. Die
   oberste (neueste) Karte sitzt auf 0, die älteren schauen nach rechts darunter
   hervor. Zentriert schwebte der Stapel neben der Satzkante — die Seite ist
   sonst durchgehend linksbündig.

   Die Haarlinie am Rand ist von der eigenen Seite des Chefs geborgt
   (docs/ref-greatplanet/PhotoCard.astro: border-black/[0.04]): zwei creme
   Karten übereinander brauchen eine Kante, sonst verschwimmen sie zu einer.
   Unsichtbar, bis das Skript sie austeilt — siehe /stack.js. */
.stack__card{
  /* Owner 2026-09-11 16:08: the pile moves to the top RIGHT. Anchored to the
     right edge; the older cards peek out to the LEFT, so the shift is mirrored
     here and in /stack.js. */
  position:absolute;top:50%;right:0;left:auto;height:clamp(120px,25svh,320px);width:auto;max-width:none;
  border-radius:2px;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;
  transform:translate(calc(-1 * var(--shift,0px)),-50%) rotate(var(--tilt,0deg));
  box-shadow:0 6px 16px rgb(0 0 0 / .45),0 1px 0 rgb(255 245 225 / .12);
  background:var(--cream);
  outline:1px solid rgb(22 19 40 / .09);outline-offset:-1px;
  opacity:0;
  /* Antippen öffnet „Dieses Foto entfernen lassen" (sheet.js). Kein
     Bild-Speichern-Menü beim langen Drücken auf dem iPhone. */
  cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
}
/* Wer keine Bewegung will, bekommt den fertigen Stapel — ohne Austeilen, ohne
   Mischen. Das Skript hält sich an dieselbe Einstellung und rührt sich nicht. */
/* A portrait card stands taller than the pile's landscape height — it may cover
   a little of the words (owner 2026-09-11 18:36). */
.stack__card--portrait{height:clamp(170px,36svh,460px)}
@media (prefers-reduced-motion:reduce){.stack__card{opacity:1}}
@media (max-height:700px){.stack{min-height:110px}}

.screen__body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:0}
/* Owner 2026-09-11 17:05, the composition: the pile hangs top right, the words
   follow right beneath it, the free air collects above the button. */
.guest[data-state='start'] .screen__body{justify-content:flex-start;padding-top:clamp(8px,2svh,24px)}

.screen__act{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:14px}

.lead{margin:0;font-size:17px;line-height:1.45;color:rgb(255 245 225 / .68);max-width:22em}
.status{margin:0;font-size:15px;letter-spacing:.02em;color:rgb(255 245 225 / .5)}
.hint{margin:0;text-align:center;font-size:12px;letter-spacing:.02em;color:rgb(255 245 225 / .4)}
.aside{
  font-family:var(--accent);font-size:clamp(26px,7.5vw,34px);line-height:1;
  margin:2px 0 0;transform:rotate(-3.5deg);transform-origin:left center;
  color:rgb(255 245 225 / .9);
}
.noscript{margin:0;padding:14px var(--pad);background:var(--orange);color:var(--cream);font-size:14px}

/* Der eine orange Button. */
.btn{
  display:flex;align-items:center;justify-content:center;
  min-height:62px;padding:0 24px;border:0;border-radius:0;
  font-weight:600;font-size:15px;letter-spacing:.11em;text-transform:uppercase;
  text-align:center;position:relative;
}
.btn--go{background:var(--orange);color:var(--cream)}
.btn--go:active{background:#a8460f}
.btn--go[disabled]{opacity:.55}
.btn--text{
  background:none;color:rgb(255 245 225 / .72);min-height:46px;
  text-decoration:underline;text-underline-offset:5px;letter-spacing:.09em;font-weight:500;
}
.pick{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}

/* Die Vorschau IST die Karte: gleiche Proportion, gleicher Fuß, gleicher
   Ausschnitt (object-fit:cover, mittig) wie der Druck. */
.card{
  container-type:inline-size;
  width:100%;max-width:min(100%,62svh);margin:0 auto;
  aspect-ratio:3/2;background:var(--cream);display:flex;flex-direction:column;
  box-shadow:0 18px 40px rgb(0 0 0 / .45);
}
.card[data-orient='portrait']{aspect-ratio:2/3;max-width:min(100%,40svh)}
.card__photo{flex:1;min-height:0;background:#0d0b17;overflow:hidden}
.card__photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.card__foot{
  height:7%;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 4.3cqw;gap:8px;
}
.card__line{
  font-family:var(--sans);font-weight:500;color:var(--blue);white-space:nowrap;
  font-size:max(7px,1.45cqw);letter-spacing:0;
}
.card__code{
  font-family:var(--accent);color:var(--orange);line-height:1;
  font-size:max(13px,2.9cqw);
}
.card[data-orient='portrait'] .card__foot{padding:0 2.9cqw}
.card[data-orient='portrait'] .card__line{font-size:max(7px,1cqw)}
.card[data-orient='portrait'] .card__code{font-size:max(13px,2cqw)}

.toggle{display:flex;gap:10px;justify-content:center}
.toggle__opt{
  background:none;border:1px solid rgb(255 245 225 / .35);color:rgb(255 245 225 / .75);
  padding:9px 20px;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
}
.toggle__opt.is-on{background:var(--cream);border-color:var(--cream);color:var(--blue)}

/* Das Häkchen. Cream auf Dark Blue — der orange Knopf bleibt der einzige
   Farbfleck des Screens. Steht von selbst auf JA. */
.consent{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin:2px auto 0;
  font-size:13px;line-height:1.35;color:rgb(255 245 225 / .72);max-width:27em;
}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent__box{
  flex:0 0 auto;width:20px;height:20px;position:relative;margin-top:1px;
  border:1px solid rgb(255 245 225 / .5);transition:background .12s ease,border-color .12s ease;
}
.consent__box::after{
  content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--blue);border-width:0 2px 2px 0;
  transform:rotate(43deg) scale(.5);opacity:0;transition:opacity .12s ease,transform .12s ease;
}
.consent input:checked + .consent__box{background:var(--cream);border-color:var(--cream)}
.consent input:checked + .consent__box::after{opacity:1;transform:rotate(43deg) scale(1)}
.consent input:focus-visible + .consent__box{outline:2px solid var(--cream);outline-offset:3px}

.pulse{
  display:block;width:9px;height:9px;border-radius:50%;background:var(--cream);
  margin:0 auto 20px;animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none;opacity:.6}}

/* ===================================================== TEAM ============== */
.staff{background:var(--cream);color:var(--blue)}
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px var(--pad) 14px;border-bottom:1px solid rgb(22 19 40 / .16);
}
.bar__left{display:flex;align-items:baseline;gap:16px}
.bar__right{display:flex;align-items:center;gap:18px}
.bar__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:34px;line-height:1;margin:0;letter-spacing:.005em}
.bar__hint{margin:0;padding:10px var(--pad) 0;font-size:12px;color:rgb(22 19 40 / .5)}
.staff .bar__left .mark{font-size:19px}
.staff--login .mark{font-size:19px;margin-bottom:2px}
.btn--dark{color:rgb(22 19 40 / .6);min-height:34px;padding:0}

.switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;font-weight:500}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch__box{
  width:46px;height:26px;border:1px solid rgb(22 19 40 / .35);position:relative;flex:0 0 auto;
  transition:background .15s ease;
}
.switch__box::after{
  content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--blue);
  transition:transform .15s ease,background .15s ease;
}
.switch input:checked + .switch__box{background:var(--blue);border-color:var(--blue)}
.switch input:checked + .switch__box::after{transform:translateX(20px);background:var(--cream)}
.switch input:focus-visible + .switch__box{outline:2px solid var(--blue);outline-offset:2px}

.counts{display:flex;gap:30px;flex-wrap:wrap;padding:16px var(--pad) 4px}
.count{display:flex;flex-direction:column}
.count__n{font-family:var(--display);font-size:38px;line-height:1}
.count__l{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgb(22 19 40 / .55)}

.queue{
  display:grid;gap:16px;padding:20px var(--pad);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.job{border:1px solid rgb(22 19 40 / .16);display:flex;flex-direction:column;background:#fffaf0}
.job--blocked{opacity:.55}
.job__thumb{aspect-ratio:3/2;background:#e8dcc4;display:block;overflow:hidden}
.job__thumb img{width:100%;height:100%;object-fit:contain}
/* Die Datei ist nach der Frist weg. Kein kaputtes Bild, sondern eine Notiz. */
.job__thumb--gone{display:flex;align-items:center;justify-content:center;background:#efe6d2}
.job__gone{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgb(22 19 40 / .45)}
.job__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px 4px;font-size:11px;color:rgb(22 19 40 / .55)}
.chip{
  border:1px solid rgb(22 19 40 / .4);padding:2px 7px;font-size:9px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
}
.chip--printed{background:var(--blue);color:var(--cream);border-color:var(--blue)}
/* „nicht zeigen" — eine Notiz, kein Alarm. Gedruckt wurde die Karte trotzdem. */
.chip--hidden{border-style:dashed;border-color:rgb(22 19 40 / .45);color:rgb(22 19 40 / .6)}
.chip--failed{border-color:var(--orange);color:var(--orange)}
.job__tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.job__err{padding:0 11px;font-size:10px;color:var(--orange)}
.job__acts{display:flex;gap:6px;padding:8px 11px 11px;margin-top:auto;flex-wrap:wrap}
.act{
  border:1px solid rgb(22 19 40 / .35);background:none;padding:8px 11px;
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;flex:1 1 auto;
}
.act--go{background:var(--orange);border-color:var(--orange);color:var(--cream)}
.act[disabled]{opacity:.3;cursor:default}

.empty{margin:0;padding:40px var(--pad);color:rgb(22 19 40 / .5);font-size:15px;grid-column:1/-1}

.wall{padding:8px var(--pad) 8px}
.wall__hint{margin:0 0 12px;font-size:12px;line-height:1.45;color:rgb(22 19 40 / .7);max-width:60ch}
.wall__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.wcard{border:1px solid rgb(22 19 40 / .16);background:#fffaf0;display:flex;flex-direction:column}
.wcard--hidden{opacity:.5}
.wcard__thumb{aspect-ratio:3/2;background:#e8dcc4;overflow:hidden}
.wcard__thumb img{width:100%;height:100%;object-fit:contain}
.wcard__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 2px;font-size:11px}
.wcard__acts{padding:8px 10px 10px;margin-top:auto}
.tags{padding:8px var(--pad) 48px}
.tags__title{font-family:var(--display);text-transform:uppercase;font-size:24px;font-weight:400;margin:0 0 10px;letter-spacing:.01em}
/* Der Hintergrund ist der 1-px-Strich zwischen den Zeilen. Ohne Zeilen wäre er
   ein grauer Kasten — dann trägt die leere Meldung die Fläche selbst. */
.tags__list{display:flex;flex-direction:column;gap:1px;background:rgb(22 19 40 / .16);border:1px solid rgb(22 19 40 / .16)}
.tags__list .empty{background:var(--cream);padding:26px var(--pad)}
.tagrow{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--cream);font-size:13px;flex-wrap:wrap}
.tagrow__id{font-weight:600;font-variant-numeric:tabular-nums;flex:1 1 120px;overflow:hidden;text-overflow:ellipsis}
.tagrow__n{color:rgb(22 19 40 / .55);font-size:12px}
.tagrow__lim{width:58px;padding:6px 8px;border:1px solid rgb(22 19 40 / .35);background:none;text-align:center}
.tagrow__save{border:1px solid rgb(22 19 40 / .35);background:none;padding:6px 12px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

/* Login */
.staff--login{display:flex;min-height:100svh;align-items:center;justify-content:center}
.login{width:min(340px,86vw);display:flex;flex-direction:column;gap:14px}
.login .hl--dark{font-size:56px}
.login__form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.login__label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgb(22 19 40 / .55)}
.login__input{
  border:1px solid rgb(22 19 40 / .35);background:none;padding:15px 14px;
  font-size:20px;letter-spacing:.3em;text-align:center;
}
.login__wrong{margin:0;font-size:13px;color:var(--orange)}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Wide screens (iPad, desktop; owner 2026-09-11 17:29 "the position can be
   optimized"): the pile is a sibling of the screens inside .stage, so the
   composition is a grid — wordmark across the top, words and button at the
   left, the pile at the right on the same height, vertically centred. */
@media (min-width:760px){
  .guest[data-state='start'] .stage{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,40%);
    grid-template-rows:auto 1fr;grid-template-areas:"head head" "screen stack";
    column-gap:6vw;align-items:center;
  }
  .guest[data-state='start'] .head{grid-area:head;align-self:start}
  .guest[data-state='start'] [data-screen='start']{grid-area:screen;justify-content:center}
  .guest[data-state='start'] .screen__body{justify-content:center;padding-top:0}
  .guest[data-state='start'] .stack{grid-area:stack;align-self:center;height:min(30vw,60svh);min-height:0;margin:0}
  .guest[data-state='start'] .stack__card{height:min(20vw,40svh)}
  .guest[data-state='start'] .stack__card--portrait{height:min(30vw,58svh)}
}

/* Impressum / Datenschutz (2026-09-16) */
.legal{margin:28px 0 0;padding:14px 0 0;font-size:12px;letter-spacing:.06em;text-align:center;color:rgb(22 19 40 / .55)}
.legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.guest .legal{color:rgb(255 245 225 / .45);line-height:1.8}

/* ============================ HERUNTER VON DER WAND (2026-09-16) ========= */
/* Mein Foto und Foto entfernen: Gästeseiten zum Scrollen — kein Ein-Viewport-
   Zwang wie die Startseite, dafür dieselbe Achse, dieselben Wörter. */
.guest--page .page{gap:18px}
.guest--page .hl--small{margin-top:10px}
.head__back{text-decoration:none;display:inline-block}
.lead--pointer a,.page__back a{color:var(--cream);text-decoration:underline;text-underline-offset:4px}
.page__back{margin:8px 0 0;font-size:14px}

/* Die eigenen Karten: eine unter der anderen, das Bild in Kartengröße, eine
   Zeile Status, der eine Knopf. Was nicht auf der Wand liegt, liegt gedämpft. */
.mine__list{display:flex;flex-direction:column;gap:28px;margin-top:6px}
.mine{display:flex;flex-direction:column;gap:12px;max-width:420px}
.mine__card{width:100%;max-width:340px;border-radius:2px;background:var(--cream);box-shadow:0 8px 20px rgb(0 0 0 / .45)}
.mine__card--off{opacity:.45}
.mine__note{margin:0;font-size:13px;letter-spacing:.02em;color:rgb(255 245 225 / .6)}
.mine form{display:flex}
.mine .btn{flex:1 1 auto;max-width:340px}
.mine .btn--text{justify-content:flex-start;padding:0}

/* Foto entfernen: die Auswahl. Kleine Karten in einem Raster, die gewählte
   mit Rand — ohne Skript führt jeder Link auf dieselbe Seite mit Formular. */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:6px}
.pick{display:block;border-radius:2px;background:var(--cream);box-shadow:0 4px 12px rgb(0 0 0 / .4);outline:2px solid transparent;outline-offset:2px}
.pick--on{outline-color:var(--cream)}
.pick img{width:100%;height:auto;border-radius:2px}
.ask{display:flex;flex-direction:column;gap:16px;max-width:420px}
.ask__card{width:100%;max-width:340px;border-radius:2px;background:var(--cream);box-shadow:0 8px 20px rgb(0 0 0 / .45)}
.ask .btn--text{justify-content:flex-start;padding:0}

/* Das Fenster über der angetippten Karte. Dunkel, vom unteren Rand her, die
   Karte groß, darunter ein Knopf — oder das kurze Formular, oder der Dank. */
.sheet{position:fixed;inset:0;z-index:50;background:rgb(22 19 40 / .82);display:flex;align-items:flex-end;justify-content:center;padding:0}
.sheet[hidden]{display:none}
.sheet__panel{
  width:100%;max-width:520px;max-height:100svh;overflow:auto;background:var(--blue);color:var(--cream);
  padding:22px var(--pad) calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px;
  box-shadow:0 -12px 40px rgb(0 0 0 / .5);
}
.sheet__card{
  align-self:center;max-width:min(100%,340px);max-height:44svh;width:auto;height:auto;
  border-radius:2px;background:var(--cream);box-shadow:0 8px 20px rgb(0 0 0 / .45);
}
.sheet__step{display:flex;flex-direction:column;gap:12px}
.sheet__step[hidden]{display:none}
.sheet__form{display:flex;flex-direction:column;gap:12px}
.sheet__done{color:var(--cream)}
.sheet__err{margin:0;font-size:13px;color:var(--cream);border-left:2px solid var(--cream);padding-left:10px}
.field{display:flex;flex-direction:column;gap:6px}
.field__l{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgb(255 245 225 / .55)}
.field__in{
  font:inherit;font-size:16px;color:var(--cream);background:none;border:1px solid rgb(255 245 225 / .4);
  padding:12px 12px;border-radius:0;resize:vertical;min-height:46px;width:100%;
}
.field__in:focus{outline:2px solid var(--cream);outline-offset:2px;border-color:transparent}
@media (min-width:760px){.sheet{align-items:center;padding:24px}.sheet__panel{max-height:calc(100svh - 48px)}}

/* Team: die Anfragen über der Wand. Die Zeile des Gastes steht groß, die zwei
   Knöpfe nebeneinander — der laute für runter, der leise fürs Lassen. */
.reqs__n{font-family:var(--sans);font-size:14px;letter-spacing:.02em;text-transform:none;color:rgb(22 19 40 / .55);vertical-align:middle}
.rcard__reason{margin:0;padding:6px 10px 0;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.rcard__reason--none{color:rgb(22 19 40 / .45);font-size:12px}
.rcard__mail{margin:0;padding:2px 10px 0;font-size:12px;color:rgb(22 19 40 / .7);overflow-wrap:anywhere}
.rcard__acts{display:flex;gap:6px}
.legalpage{background:#fff;color:#161328}
.legal__main{max-width:640px;margin:0 auto;padding:28px 22px 60px;font:16px/1.55 -apple-system,system-ui,sans-serif}
.legal__main h1{font-size:22px;margin:12px 0 18px}
.legal__main p{margin:0 0 14px}
.legal__main a{color:inherit}