/* 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 dark;
}
@media(prefers-color-scheme:dark){
  :root{
    --grund:#141414; --karte:#1C1C1C; --rand:rgba(255,255,255,.12);
    --text:#F0EFE9; --still:#9A9A94;
  }
}

*{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}
@media(prefers-color-scheme:dark){
  .marke__bild--hell{display:none}
  .marke__bild--dunkel{display:block}
}
.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 ─────────────────────────────────────────── */
.entwurf{flex:0 0 auto;background:var(--karte);border-top:1px solid var(--rand)}
.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}
.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 ───────────────────────────────────────────────────── */
.chat{
  flex:0 0 auto;background:var(--karte);border-top:1px solid var(--rand);
  display:flex;flex-direction:column;
  padding-bottom:var(--sicher-unten);
}
.chat__griff{width:100%;padding:.45rem 0 .2rem;display:grid;place-items:center}
.chat__strich{display:block;width:2.5rem;height:4px;border-radius:2px;
  background:rgba(127,127,127,.4)}
.chat__lauf{
  height:0;overflow:hidden;padding:0 1rem;
  transition:height .22s ease;
  -webkit-overflow-scrolling:touch;
}
/* Bewusst knapp: der Chat teilt sich den Bildschirm mit der Vorschau, und
   die ist der eigentliche Gegenstand. Vorher nahm er auf dem Handy weit
   ueber die Haelfte ein. */
.chat.offen .chat__lauf{height:min(34dvh,19rem);overflow-y:auto;padding-bottom:.5rem}
.chat__form{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem .75rem}
.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--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: Vorschau und Chat nebeneinander ────────── */
@media(min-width:900px){
  /* Drei Zeilen: Kopf, Entwurfsleiste, Chat. Chat und Entwurf stehen
     links, die Vorschau rechts ueber beide unteren Zeilen. Vorher lagen
     Entwurf und Chat in derselben Zelle und haben sich ueberlagert. */
  .app{display:grid;grid-template-columns:24rem 1fr;
       grid-template-rows:auto auto minmax(0,1fr);height:100dvh}
  .kopf{grid-column:1/-1;grid-row:1}
  .vorschau{grid-column:2;grid-row:2/4}
  .entwurf{grid-column:1;grid-row:2;border-right:1px solid var(--rand);border-top:0}
  .chat{grid-column:1;grid-row:3;border-top:1px solid var(--rand);
        border-right:1px solid var(--rand);min-height:0}
  .chat__griff{display:none}
  .chat__lauf{height:auto!important;flex:1 1 auto;overflow-y:auto;padding-top:1rem}
  .entwurf__liste{max-height:40dvh}
}