/* via-app: Oberflaeche.
   Mobil zuerst. Vorschau im Vollbild, Chat als aufziehbares Blatt darueber.
   Farben aus dem hallovia-CI, aber eigenstaendig: das hier ist ein
   Werkzeug, keine Verkaufsseite. */

:root{
  --dunkel:#141414;
  --grund:#F7F6F2;
  --karte:#FFFFFF;
  --rand:rgba(20,20,20,.12);
  --text:#141414;
  --still:#6B6B66;
  --gelb:#F2E744;
  --gelb-dk:#B8A800;
  --gruen:#2E7D53;
  --rot:#C0523F;
  --r:14px;
  --sicher-unten:env(safe-area-inset-bottom, 0px);
  color-scheme:light;
}

*{box-sizing:border-box}
/* Eine mobil gedachte App darf niemals seitlich scrollen. Falls doch
   einmal ein Element zu breit gerät, soll es abgeschnitten werden und
   nicht die ganze Seite verschieben. */
html,body{max-width:100%;overflow-x:hidden}
/* hidden muss gewinnen. Ohne das schlaegt jede eigene display-Regel
   (.app{display:flex}, .blatt{position:fixed} usw.) das Attribut, und
   angeblich verborgene Bereiche liegen weiter im Layout. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--grund);color:var(--text);
  font:400 16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  overscroll-behavior:none;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}

/* ── Tor (nicht angemeldet) ─────────────────────────────────── */
.tor{min-height:100dvh;display:grid;place-items:center;padding:1.5rem}
.tor__karte{max-width:min(26rem,100%);text-align:center}
.marke{display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:1.5rem}
.marke__bild{height:2.4rem;width:auto;display:block}
/* Zwei Fassungen, je nach Thema. Das Logo ist einfarbig, eine einzelne
   Datei wuerde in einem der beiden Themen verschwinden. */
.marke__bild--dunkel{display:none}
.tor h1{margin:0 0 .6rem;font-size:1.35rem;line-height:1.25;letter-spacing:-.02em}
.tor p{margin:0;color:var(--still);font-size:.95rem}

/* ── Gerüst ─────────────────────────────────────────────────── */
.app{display:flex;flex-direction:column;height:100dvh;overflow:hidden}

.kopf{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding:.7rem 1rem;background:var(--karte);
  border-bottom:1px solid var(--rand);
  padding-top:calc(.7rem + env(safe-area-inset-top,0px));
}
.kopf__projekt{display:flex;align-items:center;gap:.35rem;min-width:0;
  font-weight:600;font-size:.95rem;padding:.25rem 0}
.kopf__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kopf__pfeil{color:var(--still);font-size:.7rem}
.kopf__rechts{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;min-width:0}
.kopf__knopf{padding:.25rem .5rem;color:var(--still);letter-spacing:.1em}
.marker{padding:.2rem .5rem;border-radius:999px;background:var(--gelb);
  color:#141414;font-size:.7rem;font-weight:700}

/* ── Aufklappblätter (Projektwahl, Menü) ────────────────────── */
.blatt{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.35)}
.blatt__inner{position:absolute;left:0;right:0;top:0;background:var(--karte);
  border-bottom:1px solid var(--rand);padding:.5rem;
  padding-top:calc(.5rem + env(safe-area-inset-top,0px));
  box-shadow:0 12px 32px rgba(0,0,0,.18)}
.blatt__titel{margin:.35rem 0 .75rem;padding:0 1rem;font-size:1.05rem;
  letter-spacing:-.01em}
/* Im Haftungsblatt stehen Text und Knoepfe, keine Zeilenliste. */
#haftung-blatt .blatt__inner{padding:1rem;
  padding-top:calc(1rem + env(safe-area-inset-top,0px))}
#haftung-blatt .haftung{margin:0 0 1rem}
.zeile{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;padding:.85rem 1rem;border-radius:10px;text-align:left;
  text-decoration:none;color:inherit;font-size:.95rem}
.zeile:hover{background:rgba(127,127,127,.1)}
.zeile--still{color:var(--still);font-size:.85rem;pointer-events:none}
.zeile--aktiv{font-weight:600}
.zeile__unter{display:block;color:var(--still);font-size:.8rem;font-weight:400}
.schalter{width:40px;height:24px;border-radius:999px;background:rgba(127,127,127,.35);
  position:relative;transition:background .2s;flex:0 0 auto}
.schalter:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:transform .2s}
.schalter.an{background:var(--gelb)}
.schalter.an:after{transform:translateX(16px)}

/* ── Vorschau ───────────────────────────────────────────────── */
.vorschau{flex:1 1 auto;position:relative;min-height:0;background:var(--grund)}
.vorschau__rahmen{width:100%;height:100%;border:0;display:block;background:#fff}
.vorschau__leer{height:100%;display:grid;place-items:center;padding:2rem;
  text-align:center;color:var(--still);font-size:.95rem}
.vorschau__leer p{max-width:min(22rem,100%);margin:0}

/* ── Entwurfsleiste ─────────────────────────────────────────── */
/* Handy: der Entwurf ist ein Blatt wie der Chat, nicht eine Leiste, die
   staendig ein Drittel des Schirms belegt. Geoeffnet wird es ueber die
   gelbe Pille im Dock. */
.entwurf{position:fixed;left:0;right:0;bottom:0;z-index:31;
  max-height:min(80dvh,44rem);background:var(--karte);
  border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.2);
  display:flex;flex-direction:column;padding-bottom:var(--sicher-unten);
  transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.entwurf.offen{transform:none}
.entwurf__liste{flex:1 1 auto;min-height:0}
.entwurf__kopf{display:flex;align-items:center;gap:.6rem;width:100%;min-width:0;
  padding:.75rem 1rem;font-size:.9rem;font-weight:600}
.entwurf__zahl{display:grid;place-items:center;min-width:1.4rem;height:1.4rem;
  padding:0 .35rem;border-radius:999px;background:var(--gelb);color:#141414;
  font-size:.75rem;font-weight:700}
.entwurf__pfeil{margin-left:auto;color:var(--still);font-size:.75rem;transition:transform .2s}
.entwurf__kopf[aria-expanded="true"] .entwurf__pfeil{transform:rotate(180deg)}
.entwurf__liste{max-height:38dvh;overflow:auto;padding:0 1rem .5rem;
  -webkit-overflow-scrolling:touch}
/* ── Einführung ─────────────────────────────────────────────── */
.intro{padding:1.25rem!important;text-align:center}
.intro__zaehler{font-size:.75rem;font-weight:600;color:var(--still);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:.75rem}
/* Gezeichnet statt fotografiert: eine Bildschirmaufnahme veraltet mit der
   naechsten Aenderung, diese Skizze bleibt richtig. */
.intro__bild{height:8.5rem;margin:0 auto 1rem;max-width:17rem;border-radius:12px;
  background:rgba(127,127,127,.09);display:grid;place-items:center;
  overflow:hidden;position:relative}
.intro .blatt__titel{padding:0;margin:0 0 .5rem;font-size:1.15rem}
.intro__text{margin:0 0 1rem;color:var(--still);font-size:.92rem;line-height:1.5}
.intro__punkte{display:flex;gap:.4rem;justify-content:center;margin-bottom:1.1rem}
.intro__punkt{width:.45rem;height:.45rem;border-radius:50%;
  background:rgba(127,127,127,.3)}
.intro__punkt--an{background:var(--gelb-dk)}

.blaettern{display:flex;align-items:center;gap:.5rem;margin:0 1rem .3rem;
  padding:.35rem .35rem;border-radius:11px;background:rgba(127,127,127,.09)}
.blaettern__pfeil{flex:0 0 auto;width:2rem;height:2rem;border-radius:8px;
  display:grid;place-items:center;font-size:1.35rem;line-height:1;
  color:var(--text)}
.blaettern__pfeil:hover{background:rgba(127,127,127,.18)}
.blaettern__pfeil:disabled{opacity:.3;cursor:default;background:none}
.blaettern__mitte{flex:1 1 auto;min-width:0;text-align:center}
.blaettern__zahl{font-size:.7rem;color:var(--still);letter-spacing:.04em}
.blaettern__feld{font-size:.85rem;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.anfrage__form{display:flex;flex-direction:column;gap:.55rem;text-align:left}
.anfrage__feld{width:100%;padding:.75rem .9rem;border-radius:11px;
  border:1px solid var(--rand);background:var(--grund);font-size:.95rem}
.anfrage__feld:focus{outline:2px solid var(--gelb-dk);outline-offset:1px}
.anfrage__text{resize:vertical;min-height:4.5rem;font-family:inherit}
.anfrage__direkt{margin:.9rem 0 0;font-size:.85rem;color:var(--still);
  line-height:1.6}
.anfrage__direkt a{color:var(--text);font-weight:600}

.schritte{display:flex;gap:.4rem;padding:0 1rem .2rem}
.schritt-knopf{display:flex;align-items:center;gap:.35rem;
  padding:.4rem .75rem;border-radius:999px;font-size:.8rem;font-weight:500;
  background:rgba(127,127,127,.12);color:var(--text)}
.schritt-knopf svg{width:.95rem;height:.95rem}
.schritt-knopf:disabled{opacity:.35;cursor:default}
.schritt-knopf:not(:disabled):hover{background:rgba(127,127,127,.22)}
.entwurf__aktionen{display:flex;flex-direction:column;gap:.6rem;
  padding:.5rem 1rem .85rem}
.entwurf__knoepfe{display:flex;gap:.6rem}
.haftung{display:flex;gap:.55rem;align-items:flex-start;cursor:pointer;
  font-size:.82rem;line-height:1.35;color:var(--still)}
.haftung input{flex:0 0 auto;width:1.05rem;height:1.05rem;margin:.1rem 0 0;
  accent-color:var(--gelb-dk);cursor:pointer}

.feld{padding:.7rem 0;border-top:1px solid var(--rand)}
.feld__kopf{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}
.feld__name{font-size:.8rem;font-weight:600;color:var(--still)}
.feld__marke{padding:.1rem .4rem;border-radius:5px;background:var(--gelb);
  color:#141414;font-size:.65rem;font-weight:700;letter-spacing:.02em}
.feld__alt,.feld__neu{font-size:.88rem;line-height:1.45;word-break:break-word}
.feld__alt{color:var(--rot);text-decoration:line-through;opacity:.75}
.feld__neu{color:var(--gruen);font-weight:500}
.feld__haken{display:flex;align-items:center;gap:.5rem;margin-top:.45rem;
  font-size:.82rem;color:var(--still)}
.feld__haken input{width:1.1rem;height:1.1rem;accent-color:var(--gelb-dk)}

.btn{flex:1;padding:.85rem 1rem;border-radius:999px;font-weight:600;font-size:.92rem;
  text-align:center}
.btn--gelb{background:var(--gelb);color:#141414}
.btn--gelb:disabled{opacity:.5}
.btn--still{background:rgba(127,127,127,.14);color:var(--text);flex:0 0 auto;padding-inline:1.2rem}

/* ── Chat ───────────────────────────────────────────────────── */
/* Handy: ein Blatt, das von unten ueber die Vorschau faehrt. Zu heisst
   ganz weg (kein Griff, keine Eingabezeile) — dafuer steht der schwebende
   Knopf in der Vorschau. Die Vorschau ist der Gegenstand, der Chat das
   Werkzeug, das man holt und wieder weglegt. */
.chat{
  position:fixed;left:0;right:0;bottom:0;z-index:31;
  height:min(72dvh,42rem);background:var(--karte);
  border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.2);
  display:flex;flex-direction:column;
  padding-bottom:var(--sicher-unten);
  transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.chat.offen{transform:none}
/* Kopfzeile beider Blaetter (Chat, Entwurf): Griffstrich zum Herunterziehen,
   Titel, Schliessen. */
.blatt-kopf{position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem .55rem .5rem 1.1rem;border-bottom:1px solid var(--rand);flex:0 0 auto;
  touch-action:none}
.blatt-griff{position:absolute;top:.45rem;left:50%;width:2.6rem;height:4px;margin-left:-1.3rem;
  border-radius:2px;background:rgba(127,127,127,.35)}
.blatt-kopf__titel{font-weight:800;letter-spacing:-.01em}
.blatt-kopf__zu{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  font-size:1.5rem;line-height:1;color:var(--still)}
.blatt-kopf__zu:hover{background:rgba(127,127,127,.12)}
.chat__lauf{
  flex:1 1 auto;min-height:0;overflow-y:auto;padding:.8rem 1rem .5rem;
  -webkit-overflow-scrolling:touch;
}
.schleier{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.28)}

/* Das Dock in der Vorschau (nur Handy): rechts das runde Chat-Symbol,
   links davon, sobald es Aenderungen gibt, die gelbe Entwurfspille.
   Sonst nichts — die Vorschau ist die Buehne. */
.dock{position:absolute;right:.9rem;bottom:calc(.9rem + var(--sicher-unten));z-index:5;
  display:flex;align-items:center;gap:.6rem}
/* Mit Wort, nicht nur Symbol: Saschas Freundin hat den runden Knopf
   nicht als Chat erkannt (11.09.2026). */
.chat-knopf{position:relative;height:3.4rem;padding:0 1.15rem 0 .95rem;border-radius:999px;
  background:var(--dunkel);color:#fff;display:flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:.95rem;
  box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .2s}
.chat-knopf:active{transform:scale(.94)}
.chat-knopf svg{width:1.55rem;height:1.55rem}
.chat-knopf__punkt{position:absolute;top:.2rem;right:.2rem;width:.8rem;height:.8rem;
  border-radius:50%;background:var(--gelb);border:2px solid var(--dunkel);display:none}
.chat-knopf--neu .chat-knopf__punkt{display:block;animation:pochen 1s ease-out 2}
@keyframes pochen{0%{box-shadow:0 0 0 0 rgba(242,231,68,.8)}100%{box-shadow:0 0 0 12px rgba(242,231,68,0)}}
.entwurf-knopf{height:3.4rem;padding:0 1.05rem 0 .45rem;border-radius:999px;
  background:var(--gelb);color:#141414;display:flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:.9rem;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .2s}
.entwurf-knopf:active{transform:scale(.96)}
.entwurf-knopf__zahl{display:grid;place-items:center;min-width:2.4rem;height:2.4rem;
  padding:0 .5rem;border-radius:999px;background:#141414;color:var(--gelb);font-size:.95rem}
.entwurf-knopf--hops{animation:hops .45s cubic-bezier(.3,1.6,.4,1)}
@keyframes hops{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
/* Kurze Rueckmeldung ueber dem Dock, verschwindet von selbst. */
.toast{position:absolute;left:50%;bottom:calc(5.3rem + var(--sicher-unten));z-index:6;
  transform:translate(-50%,8px);max-width:calc(100% - 1.8rem);
  padding:.65rem 1rem;border-radius:14px;background:var(--dunkel);color:#fff;
  font-size:.9rem;line-height:1.35;box-shadow:0 10px 30px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast--an{opacity:1;transform:translate(-50%,0)}
.chat__form{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem .75rem}
/* Bezug auf eine angeklickte Stelle. Eine Zeile, gekuerzt, mit Kreuz zum
   Aufheben. Die Eingabe darunter bleibt leer fuer den neuen Text. */
/* ── Fortschritt beim Fertigmachen ──────────────────────────
   Sitzt zwischen Chatlauf und Eingabe, also im Blickfeld beim Tippen.
   Der Balken ist der eigentliche Grund, warum ein gefuehrter Chat besser
   ist als ein Formular: Nach jeder Antwort sieht man, dass er waechst. */
.fortschritt{flex:0 0 auto;margin:0 1rem .5rem}
.fortschritt__kopf{display:flex;justify-content:space-between;
  align-items:baseline;margin-bottom:.3rem}
.fortschritt__text{font-size:.75rem;color:var(--still);letter-spacing:.01em}
.fortschritt__bahn{height:4px;border-radius:999px;overflow:hidden;
  background:var(--rand)}
.fortschritt__balken{height:100%;width:0;border-radius:999px;
  background:var(--gelb);transition:width .45s ease}
@media(prefers-reduced-motion:reduce){.fortschritt__balken{transition:none}}

.bezug{display:flex;align-items:center;gap:.5rem;margin:0 1rem;
  padding:.4rem .5rem .4rem .7rem;border-radius:9px;
  background:rgba(242,231,68,.18);border:1px solid rgba(242,231,68,.5);
  font-size:.82rem;color:var(--text)}
.bezug__text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.bezug__weg{flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:50%;
  display:grid;place-items:center;font-size:1rem;line-height:1;
  color:var(--still)}
.bezug__weg:hover{background:rgba(127,127,127,.18);color:var(--text)}
.chat__eingabe{
  flex:1;min-width:0;padding:.8rem 1rem;border-radius:999px;
  border:1px solid var(--rand);background:var(--grund);
  /* 16px, sonst zoomt iOS beim Antippen hinein */
  font-size:16px;
}
.chat__eingabe:focus{outline:2px solid var(--gelb-dk);outline-offset:1px}
.chat__senden{display:grid;place-items:center;width:2.9rem;height:2.9rem;
  flex:0 0 auto;border-radius:50%;background:var(--gelb);color:#141414}
.chat__senden svg{width:1.15rem;height:1.15rem}
.chat__senden:disabled{opacity:.45}

.blase{max-width:85%;margin:.4rem 0;padding:.65rem .9rem;border-radius:16px;
  font-size:.93rem;line-height:1.45;word-break:break-word}
.blase--via{background:rgba(127,127,127,.12);border-bottom-left-radius:5px}
.blase--ich{margin-left:auto;background:var(--gelb);color:#141414;
  border-bottom-right-radius:5px}
.blase--still{color:var(--still);font-size:.85rem;background:transparent;border:1px dashed var(--rand)}
.blase--fehler{background:rgba(192,82,63,.14);color:var(--rot)}
.blase--tippt span{display:inline-block;width:6px;height:6px;margin-right:3px;
  border-radius:50%;background:var(--still);animation:tippen 1.2s infinite}
.blase--tippt span:nth-child(2){animation-delay:.15s}
.blase--tippt span:nth-child(3){animation-delay:.3s;margin-right:0}
@keyframes tippen{0%,60%,100%{opacity:.25}30%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ── Breite Schirme: Chat links, Vorschau mit Leiste rechts ──
   Zeile 1 Kopf, Zeile 2 Leiste (Adresse, Geraet, Entwurf), Zeile 3
   Vorschau. Der Chat steht links ueber beide unteren Zeilen. */
@media(min-width:900px){
  .app{display:grid;grid-template-columns:25.5rem 1fr;
       grid-template-rows:auto auto minmax(0,1fr);height:100dvh}
  .kopf{grid-column:1/-1;grid-row:1}
  .leiste{grid-column:2;grid-row:2}
  .vorschau{grid-column:2;grid-row:3}
  .chat{grid-column:1;grid-row:2/4;border-right:1px solid var(--rand);min-height:0;
        position:static;height:auto;transform:none;transition:none;
        border-radius:0;box-shadow:none;background:var(--grund)}
  .blatt-kopf,.schleier,.dock{display:none!important}
  .chat__lauf{padding:1.1rem 1.25rem .5rem}

  .leiste{position:relative;z-index:12;display:flex;align-items:center;gap:.6rem;
          padding:.6rem .75rem;background:var(--grund)}
  .adresse{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:.45rem;
           height:2.3rem;padding:0 .9rem;border-radius:999px;background:var(--karte);
           border:1px solid var(--rand);font-size:.84rem;color:var(--still)}
  .adresse svg{flex:0 0 auto;width:.85rem;height:.85rem}
  .adresse span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:600}
  .geraete{flex:0 0 auto;display:flex;padding:3px;border-radius:999px;background:rgba(20,20,20,.07)}
  .geraet{display:grid;place-items:center;width:2.1rem;height:1.9rem;border-radius:999px;color:var(--still)}
  .geraet svg{width:1.05rem;height:1.05rem}
  .geraet--an{background:var(--karte);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.15)}

  .entwurf{position:static;flex:0 0 auto;max-height:none;transform:none;transition:none;
           border-radius:0;box-shadow:none;padding:0;background:none;
           flex-direction:row;align-items:center;gap:.5rem;margin-left:auto}
  .entwurf__kopf{width:auto;height:2.3rem;padding:0 .8rem .0 .5rem;border-radius:999px;
                 background:rgba(242,231,68,.28);border:1px solid rgba(184,168,0,.5);gap:.45rem}
  .entwurf__kopf:hover{background:rgba(242,231,68,.5)}
  .entwurf__pfeil{margin-left:.15rem}
  .schritte{padding:0;gap:.2rem}
  .schritt-knopf{width:2.3rem;height:2.3rem;padding:0;justify-content:center}
  .schritt-knopf span{display:none}
  .schritt-knopf svg{width:1.05rem;height:1.05rem}
  .entwurf__aktionen{padding:0;flex-direction:row}
  .entwurf__aktionen .entwurf__knoepfe{gap:.4rem}
  .entwurf__aktionen .btn{height:2.3rem;padding:0 1rem;font-size:.86rem}
  .entwurf__liste{position:absolute;top:calc(100% - .1rem);right:.75rem;width:min(27rem,calc(100% - 1.5rem));
                  max-height:min(60dvh,32rem);overflow:auto;padding:.4rem 1.1rem .7rem;
                  background:var(--karte);border:1px solid var(--rand);border-radius:16px;
                  box-shadow:0 18px 48px rgba(0,0,0,.18)}

  .vorschau{padding:0 .75rem .75rem}
  .vorschau__rahmen{border-radius:14px;border:1px solid var(--rand);
                    box-shadow:0 8px 30px rgba(0,0,0,.08);transition:width .3s}
  .vorschau--handy .vorschau__rahmen{box-sizing:content-box;width:390px;max-width:calc(100% - 18px);height:calc(100% - 18px);margin:0 auto;
                    border:9px solid #141414;border-radius:34px}
  .vorschau .arbeit{top:auto;bottom:1.4rem}
  .klapp{display:flex}
  .app--zu{grid-template-columns:0 1fr}
  .app--zu .chat{display:none!important}
}
@media(min-width:900px) and (max-width:1180px){
  .adresse{display:none}
  .entwurf__kopf #entwurf-text{display:none}
}
@media(max-width:899px){
  .leiste{display:contents}
  .adresse,.geraete{display:none}
}

/* Aufstiegsangebot im Chatverlauf. Steht als eigener Block unter der
   Antwort, nicht als Blase: es ist keine Aeusserung, sondern eine
   Handlungsmoeglichkeit, und soll auch so aussehen. */
.aufstieg{margin:.35rem 0 .6rem;padding:.75rem;border-radius:var(--r);
  border:1px solid var(--gelb-dk);background:rgba(242,231,68,.14);
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.aufstieg__text{font-size:.85rem;font-weight:600}
.aufstieg__knopf{width:100%}
.aufstieg__mehr{font-size:.8rem;color:var(--still);text-decoration:underline;
  background:none;border:none;padding:0;cursor:pointer}
.aufstieg__mehr:hover{color:var(--text)}

/* Die Einführung ist Pflicht und steht deshalb mittig statt oben:
   ein Blatt, das von oben hereinfährt, liest sich wie ein Menü, das man
   wegwischt. Mittig ist es das, was es ist — ein Schritt, der zu Ende
   gegangen werden muss. Überspringen gibt es nicht mehr, weil ohne die
   Einführung niemand findet, dass man Bilder und Texte antippen kann. */
#intro{display:flex;align-items:center;justify-content:center;padding:1rem;
  padding-bottom:calc(1rem + var(--sicher-unten))}
#intro .blatt__inner{position:relative;inset:auto;width:100%;
  max-width:420px;max-height:calc(100vh - 2rem);overflow-y:auto;
  border:1px solid var(--rand);border-radius:var(--r);
  padding:1.25rem;padding-top:1.25rem}
#intro .btn:disabled{opacity:.35;cursor:default}

/* Schließen als X oben rechts statt als Knopf unter der Liste: Die
   Paketliste ist lang, der Knopf lag darunter und war nur nach dem
   Scrollen erreichbar — man kam also am schlechtesten wieder heraus,
   wenn man am meisten gelesen hatte. */
.blatt__kopf{display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;margin-bottom:.5rem}
.blatt__kopf .blatt__titel{margin:0;padding:0}
.blatt__zu{flex:0 0 auto;width:34px;height:34px;border-radius:999px;
  border:none;background:rgba(127,127,127,.12);color:var(--text);
  font-size:1.3rem;line-height:1;cursor:pointer}
.blatt__zu:hover{background:rgba(127,127,127,.22)}

/* Passwortabfrage vor der Anmeldung. Eigene Seite, deshalb hier ein paar
   Zeilen, die sonst nur die Torkarte braucht. */
.tor__form{display:flex;flex-direction:column;gap:.6rem;margin-top:1.1rem}
.tor__feld{padding:.85rem 1rem;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--karte);color:var(--text);font-size:1.05rem;
  letter-spacing:.12em;text-align:center;font-family:inherit}
.tor__feld:focus{outline:2px solid var(--gelb-dk);outline-offset:1px}

/* Antworten zum Antippen (Einfuehrung): dieselben Pillen wie im
   Kickoff-Chat (web/start.css). */
.vorschlaege{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 .55rem}
.vorschlag{padding:.5rem .9rem;border-radius:999px;border:1px solid var(--rand);
  background:var(--karte);color:var(--text);font-size:.88rem;font-weight:500;line-height:1.2;text-align:left}
.vorschlag:hover{background:rgba(127,127,127,.1)}
/* Schritt-Pillen beim Fertigmachen: Werte zum Setzen (Ueberschriften)
   duerfen umbrechen, sie sind ganze Saetze. */
.vorschlag--wert{white-space:normal;max-width:100%;font-weight:600}
.vorschlaege--schritt{margin-bottom:.8rem}

/* Das Ende des Fertigmachens: eine Blase mit Rahmen, nicht mehr. */
.blase--fertig{border:1px solid var(--gelb-dk);background:rgba(242,231,68,.14);
  animation:auftauchen .35s cubic-bezier(.2,.8,.3,1.2)}
@keyframes auftauchen{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}

/* Teilen-Link im Chat: Adresse zum Markieren, Knopf zum Kopieren. */
.teilen{max-width:95%}
.teilen__url{margin:.5rem 0;padding:.5rem .65rem;border-radius:9px;background:var(--karte);
  border:1px solid var(--rand);font-size:.8rem;word-break:break-all;user-select:all}
.teilen__knopf{width:100%;flex:none;margin-top:.2rem}

/* ── Chat am Rechner einklappen (19.09.2026) ────────────────
   Der Griff sitzt am linken Rand der Vorschau, also genau an der Kante
   zum Chat: dunkle Lasche mit Pfeil. Eingeklappt bekommt die Vorschau
   beide Spalten, die Lasche zeigt "Chat" und einen gelben Punkt, wenn
   via inzwischen etwas gesagt hat. Auf dem Handy gibt es sie nicht. */
.klapp{display:none;position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:6;
  width:1.9rem;height:5.2rem;padding:0;border-radius:0 12px 12px 0;
  background:var(--dunkel);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25);
  flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  transition:width .15s,height .15s,background .15s}
.klapp:hover{background:#2a2a2a}
.klapp__pfeil{width:.55rem;height:.55rem;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-left:.2rem}
.klapp__text{display:none;writing-mode:vertical-rl;font-size:.72rem;font-weight:700;letter-spacing:.08em}
.klapp__punkt{display:none;width:.55rem;height:.55rem;border-radius:50%;background:var(--gelb)}
.app--zu .klapp{width:2.4rem;height:7rem}
.app--zu .klapp__pfeil{transform:rotate(-135deg);margin-left:-.2rem}
.app--zu .klapp__text{display:block}
.klapp--neu .klapp__punkt{display:block}



/* ══ Neuer Zuschnitt (15.10.2026): vertraut wie ChatGPT und Claude ══
   Hell, ruhig, via-Gelb nur fuer die Handlung. Die Antworten von via
   stehen ohne Blase neben einem Avatar, die eigenen Saetze in einer
   grauen Blase. Die Eingabe ist ein Kasten, kein nackter Streifen. */

.kopf__logo{height:1.2rem;width:auto;display:block;flex:0 0 auto}
.kopf__strich{flex:0 0 auto;width:1px;height:1.25rem;background:var(--rand)}
.kopf{justify-content:flex-start}
.kopf__rechts{margin-left:auto}
.kopf__projekt{min-width:0}

.blase{position:relative;max-width:100%;margin:.55rem 0;padding:0 0 0 2.3rem;
  background:none;border-radius:0;font-size:.97rem;line-height:1.55}
.blase--via::before{content:"";position:absolute;left:0;top:.05rem;width:1.6rem;height:1.6rem;
  border-radius:.4rem;background:url(/spelly-symbol-s.png) center/cover no-repeat}
.blase--via{background:none;border-radius:0}
.blase--ich{margin-left:auto;max-width:88%;padding:.65rem .95rem;background:#EBE8DF;
  color:var(--text);border-radius:18px 18px 6px 18px}
.blase--still,.blase--fehler,.blase--fertig,.teilen{padding:.65rem .9rem .65rem 2.9rem}
.blase--still{border-radius:12px}
.blase--still::before,.blase--fehler::before,.blase--fertig::before{left:.7rem;top:.7rem}
.blase--fehler{border-radius:12px}
.blase--fertig{border-radius:14px}
.blase--tippt{padding-top:.5rem;min-height:2rem}

.chat__form{margin:.5rem .9rem .3rem;padding:.3rem .3rem .3rem 1.1rem;gap:.4rem;
  border:1px solid var(--rand);border-radius:28px;background:var(--karte);
  box-shadow:0 2px 10px rgba(0,0,0,.05)}
.chat__form:focus-within{border-color:rgba(20,20,20,.4)}
.chat__eingabe{border:0;background:none;padding:.6rem 0;border-radius:0}
.chat__eingabe:focus{outline:none}
.chat__senden{width:2.6rem;height:2.6rem}
.chat__hinweis{margin:0;padding:0 1rem calc(.55rem + 0px);text-align:center;
  font-size:.74rem;color:var(--still)}

.bezug{margin:0 .9rem .4rem}
.fortschritt{margin:0 1.1rem .5rem}

/* Statuspille ueber der Vorschau, solange via arbeitet. */
.arbeit{position:absolute;top:.75rem;left:50%;transform:translateX(-50%);z-index:7;
  display:flex;align-items:center;gap:.55rem;padding:.5rem .95rem;border-radius:999px;
  background:#fff;color:var(--dunkel);border:1px solid rgba(0,0,0,.08);font-size:.85rem;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.25)}
.arbeit__kreis{width:.95rem;height:.95rem;border-radius:50%;border:2px solid rgba(0,0,0,.15);
  border-top-color:#141414;animation:dreh .8s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

.vorschau{background:#ECEAE2}
.vorschau__leer{color:var(--still)}

@media(max-width:899px){
  .vorschau{background:var(--grund)}
  .chat{background:var(--grund)}
  .chat__form{margin-bottom:.2rem}
  .chat__hinweis{padding-bottom:.4rem}
  .blase--ich{max-width:90%}
}

@media(min-width:900px){.klapp{display:flex}}