/* ============================================================
   community-stil.css — der Community-Chat in den Farben der Marke

   Der Chat kann schon viel: Kanäle, Reaktionen, Sprachnachrichten,
   Bilder, Dateien, Korrekturkarten, Erwähnungen, Angeheftetes,
   Online-Anzeige. Er sah nur aus wie ein fremdes Programm — eigenes
   Blau, eigenes Weiß, eigene Schrift.

   Diese Datei fasst keine Funktion an. Sie dreht die Farben auf den
   Baukasten und macht die drei Dinge deutlicher, die in einem
   Messenger zählen: wo ich gerade bin, was ungelesen ist, wo ich
   schreibe.

   Einbinden NACH dw-baukasten.css:
     <link rel="stylesheet" href="community-stil.css?v=1">

   Das html davor ist nötig: community.js hängt seinen Stil zur
   Laufzeit an den Kopf. Wer danach gewinnen will, braucht Gewicht.
   ============================================================ */

/* ---------- 1. Die Farben umhängen ---------- */
html #v-community{
  --brand:#10627A; --brand-2:#0F6E7E; --brand-ink:#063138;
  --brand-wash:#E6F8FC; --brand-line:#1B9BC0;
  --red:#D42A21; --gold:#C9A200;
  --ink:#14181B; --t1:#14181B; --t2:#5A6B72; --t3:#8C8574;
  --surface:#FFFFFF; --surface-2:#F6F9FA;
  --line:#E7ECEE; --line-2:#E7ECEE;
  --fh:'Shantell Sans','Inter',sans-serif;
}

/* ---------- 2. Der Rahmen ---------- */
html #v-community .comm{
  border:1.5px solid var(--line); border-radius:18px;
  box-shadow:3px 4px 0 rgba(32,33,31,.06);
}

/* ---------- 3. Kanalliste: wo bin ich, was ist neu ---------- */
html #v-community .cs{ background:var(--surface-2); border-right:1.5px solid var(--line); }
html #v-community .cs-h b{ font-family:var(--fh); font-weight:800; font-size:15px; }
html #v-community .cg{
  font-size:10.5px; font-weight:800; letter-spacing:.1em; color:#C7D0D4; padding:14px 9px 5px;
}
html #v-community .ch{ border-radius:9px; font-size:13.5px; color:var(--t2); }
html #v-community .ch:hover{ background:#F6F9FA; color:var(--t1); }
/* Der aktive Kanal sieht aus wie der aktive Punkt in der Seitenleiste —
   ein Zustand, eine Form, überall dieselbe Bedeutung. */
html #v-community .ch.on{
  background:var(--ink); color:#FFFFFF; font-weight:700;
}
html #v-community .ch.on .h,
html #v-community .ch.on .ce{ color:#FFE100; }
html #v-community .ch .cn{
  background:var(--red); color:#fff; font-weight:800; border-radius:999px;
  min-width:18px; height:18px;
}
html #v-community .ch.on .cn{ background:#FFE100; color:var(--ink); }

/* ---------- 4. Kopfzeile des Kanals ---------- */
html #v-community .ch-hd{
  border-bottom:1.5px solid var(--line); background:var(--surface-2); height:56px;
}
html #v-community .ch-hd .ti{ font-family:var(--fh); font-weight:800; font-size:15px; }
html #v-community .ch-hd .ti .h{ color:var(--brand-2); }

/* ---------- 5. Nachrichten ---------- */
html #v-community .feed{ background:var(--surface); }
html #v-community .m:hover{ background:var(--surface-2); }
html #v-community .mh .w{ font-family:var(--fh); font-weight:800; font-size:13.5px; }
html #v-community .mt{ color:var(--t1); font-size:14px; }
html #v-community .mh .rl{
  background:#FDEAE6; color:var(--red); border:1px solid var(--red); font-weight:800;
}
html #v-community .mh .lv{ background:var(--surface-2); color:var(--t2); border:1px solid var(--line); }
html #v-community .dsep{ color:var(--t3); font-weight:700; }
html #v-community .dsep::before,
html #v-community .dsep::after{ background:var(--line); }

/* Die Bildzeichen der Leute: warme Töne aus der Palette, nicht kühl */
html #v-community .ava{ font-family:var(--fh); font-weight:800; }
html #v-community .a1{ background:#10627A; }
html #v-community .a2{ background:#B02B24; }
html #v-community .a3{ background:#4E9E12; }
html #v-community .a4{ background:#C9A200; color:#14181B; }
html #v-community .a5{ background:#8A5A3B; }
html #v-community .a6{ background:#6B4A7A; }

/* Reaktionen */
html #v-community .rc span{
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:999px; color:var(--t2);
}
html #v-community .rc span.on{
  background:var(--brand-wash); border-color:var(--brand); color:var(--brand-2);
}

/* ---------- 6. Die Korrekturkarte: das Herz eines Sprach-Chats ---------- */
/* Hier wird aus einem Messenger Unterricht. Deshalb bekommt sie den
   gelben Marker der Marke statt eines beliebigen blauen Kastens. */
html #v-community .corr{
  border:1.5px solid var(--gelb,#FFE100); background:#FFFFFF; border-radius:14px;
}
html #v-community .corr .ch2{ color:#8A6608; font-weight:800; font-size:12px; }
html #v-community .corr .cx{
  font-family:var(--fh); font-weight:700; font-size:14px; color:var(--ink);
  background:linear-gradient(180deg,transparent 58%,#FFE100 58%);
  display:inline; padding:0 2px; border-radius:3px;
}
html #v-community .corr .cbtn{ border:1.5px solid var(--line); background:var(--surface); border-radius:9px; }
html #v-community .corr .cbtn.done{ background:#F3FAEC; border-color:#CFE7B8; color:#4E9E12; }
html #v-community .corrbtn{ color:var(--brand-2); font-weight:700; }

/* Sprachnachricht und Dateien */
html #v-community .voice,
html #v-community .mfile{ background:var(--surface-2); border:1.5px solid var(--line); border-radius:12px; }
html #v-community .voice .vp{ background:var(--brand); }
html #v-community .wave i{ background:#E7ECEE; }
html #v-community .wave i.p{ background:var(--brand); }
html #v-community .mfile .fi{ background:var(--brand-wash); color:var(--brand-2); }
html #v-community .mimg{ border:1.5px solid var(--line); background:var(--surface-2); }

/* ---------- 7. Das Schreibfeld: der wichtigste Ort im Chat ---------- */
html #v-community .cmp-box{
  border:2px solid var(--line); border-radius:16px; background:var(--surface);
  padding:6px; transition:border-color .15s, box-shadow .15s;
}
html #v-community .cmp-box:focus-within{
  border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-wash);
}
html #v-community .cmp-in input,
html #v-community .cmp-in textarea{ font-size:14.5px; color:var(--t1); }
html #v-community .ct{ border-radius:10px; color:var(--t2); }
html #v-community .ct:hover{ background:var(--surface-2); color:var(--t1); }
html #v-community .cse{
  width:38px; height:38px; border-radius:50%; background:var(--brand); color:#fff;
}
html #v-community .cse:hover{ background:var(--brand-2); }
html #v-community .cmp-lock{
  background:var(--surface-2); border:1.5px dashed var(--line); border-radius:14px; color:var(--t2);
}
html #v-community .chint{ color:var(--t3); }

/* ---------- 8. Mitgliederspalte ---------- */
html #v-community .ms{ background:var(--surface-2); border-left:1.5px solid var(--line); }
html #v-community .ms h4{ color:#C7D0D4; font-weight:800; letter-spacing:.1em; }
html #v-community .mem .mn{ font-size:13px; font-weight:700; color:var(--ink); }
html #v-community .mem .pr{ background:#4E9E12; border-color:var(--surface-2); }
html #v-community .mem .pr.of{ background:#C7D0D4; }

/* ---------- 9. Angeheftetes, Hinweise, gesperrt ---------- */
html #v-community .pinbar{ background:#FFFFFF; border-bottom:1.5px solid var(--line); }
html #v-community .note{ background:var(--surface-2); border:1.5px solid var(--line); border-radius:12px; }
html #v-community .gate{
  background:var(--surface); border:1.5px solid var(--line); border-radius:18px;
}
html #v-community .msg-actions{
  background:var(--surface); border:1.5px solid var(--line); border-radius:11px;
}
html #v-community .msg-actions button:hover{ background:var(--surface-2); color:var(--ink); }
html #v-community .repop,
html #v-community .emopick{
  background:var(--surface); border:1.5px solid var(--line); border-radius:14px;
}

/* ============================================================
   Rechte Spalte im Community-Chat: keine Namensliste mehr.
   Stattdessen die echte Mitgliederzahl, die Aktivitaet der
   Woche und Amandas Frage des Tages.
   ============================================================ */
#v-community .akt{background:var(--surface,#fff);border:1.5px solid var(--line,#E7ECEE);
  border-radius:14px;padding:14px 15px;margin-bottom:12px}
#v-community .akt h4{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#C7D0D4;margin:0 0 8px}
#v-community .akt-gross{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;
  font-size:38px;line-height:1;letter-spacing:-1px;color:var(--text,#1D1B18)}
#v-community .akt-mg{background:linear-gradient(135deg,#E6F7F5,#F6FBFA);border-color:#BEE7E1}
#v-community .akt-z{display:flex;align-items:baseline;gap:7px;margin-bottom:4px}
#v-community .akt-z b{font-family:'Space Grotesk',system-ui,sans-serif;font-size:22px;line-height:1}
#v-community .akt-z span{font-size:13px;color:#6B7280;font-weight:600}
#v-community .akt-hin{font-size:12px;color:#8B8271;margin-top:8px;line-height:1.45}
#v-community .akt.amanda{background:#F6F9FA;border-color:#F0DFB0}
#v-community .akt-frage{font-family:'Space Grotesk',Georgia,serif;font-style:italic;font-size:15px;
  line-height:1.45;color:#3f4650;margin:0}

/* ============================================================
   Robuster Messenger: Zustaende, die man sehen muss.
   Senden laeuft / Senden fehlgeschlagen / keine Verbindung /
   aeltere Nachrichten nachladen.
   ============================================================ */
#v-community .m-sendet{ opacity:.55 }
#v-community .m-fehler .mb{ border-color:#D42A21 !important }
#v-community .m-warn{
  margin:4px 0 0 47px; font-size:12px; font-weight:600; color:#D42A21;
  display:flex; align-items:center; gap:8px;
}
#v-community .m-warn button{
  border:1.5px solid #D42A21; background:#fff; color:#D42A21; border-radius:999px;
  padding:3px 10px; font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
#v-community .cm-offline{
  background:#F6F9FA; border-bottom:1px solid #E7C766; color:#7A5B00;
  font-size:13px; font-weight:600; padding:8px 14px; text-align:center;
}
#v-community .cm-mehr{
  display:block; margin:6px auto 12px; border:1.5px solid var(--line,#E7ECEE);
  background:var(--surface,#fff); color:var(--text-soft,#5C4E3E); border-radius:999px;
  padding:7px 16px; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
#v-community .cm-mehr:hover{ border-color:#10627A; color:#10627A }
#v-community .cm-mehr[disabled]{ opacity:.6; cursor:default }

/* Am Handy sitzt unten die Reiterleiste. Das Schreibfeld muss darueber
   bleiben — sonst tippt man gegen die Reiter statt ins Feld. */
@media(max-width:900px){
  #v-community .cmp{ padding-bottom:calc(6px + env(safe-area-inset-bottom)) }
  #v-community .m-warn{ margin-left:0 }
}

/* ============================================================
   MOBIL UND SUCHE — nachgetragen, damit der Chat am Handy
   wirklich benutzbar ist.

   Diese Datei wird in konto.html ganz zuletzt geladen und
   benutzt den Vorsatz „html #v-community". Beides zusammen
   sticht die aelteren Bloecke in konto.html, ohne dass ueberall
   !important stehen muss. Nur dort, wo dort !important steht,
   steht es hier auch.
   ============================================================ */

/* ---------- 1 Das Suchfeld ----------
   Es war bisher gar nicht gestaltet: ein nacktes Browser-Feld
   mitten in der Kanalleiste. Am Handy sah das aus wie ein
   Fehler und war kaum zu treffen. */
html #v-community .cs-srch{
  padding:8px 12px 4px;
  position:relative;
}
html #v-community .cs-srch::before{
  content:"🔍";
  position:absolute; left:22px; top:50%; transform:translateY(-40%);
  font-size:13px; opacity:.55; pointer-events:none;
}
html #v-community #cmSearch{
  width:100%; box-sizing:border-box;
  /* 16px ist kein Geschmack, sondern Technik: Darunter zoomt
     iOS beim Antippen in die Seite hinein und verschiebt alles. */
  font:inherit; font-size:16px;
  padding:10px 12px 10px 32px;
  border:1.5px solid var(--line,#E7ECEE); border-radius:999px;
  background:var(--surface,#fff); color:var(--t1,#14181B);
  outline:none; -webkit-appearance:none; appearance:none;
}
html #v-community #cmSearch::placeholder{ color:var(--t3,#C7D0D4) }
html #v-community #cmSearch:focus{
  border-color:var(--brand,#10627A);
  box-shadow:0 0 0 3px rgba(25,144,164,.14);
}
/* Das kleine x, das manche Browser einbauen, sonst sitzt es schief */
html #v-community #cmSearch::-webkit-search-cancel-button{ margin-right:2px }

/* ---------- 2 Alle Eingabefelder auf 16px ----------
   Dasselbe Problem wie oben, nur an der wichtigsten Stelle:
   dem Schreibfeld. Wer bisher am iPhone auf das Feld getippt
   hat, bekam die Seite hineingezoomt und musste danach wieder
   herausziehen. Das war der Hauptgrund, warum sich der Chat am
   Handy zaeh angefuehlt hat. */
@media(max-width:900px){
  html #v-community .cmp-in input,
  html #v-community .cmp-in textarea{ font-size:16px !important }
  html #v-community .cmp-box{ padding:6px }
}

/* ---------- 3 Die Kanalleiste am Handy ----------
   Sie laeuft waagerecht. Damit sie sich nicht anfuehlt wie ein
   Rutschen ins Nichts, rasten die Kacheln ein, und die Leiste
   bekommt links und rechts Luft, damit man sieht, dass es
   weitergeht. */
@media(max-width:900px){
  html #v-community .cs-l{
    scroll-snap-type:x proximity;
    scroll-padding-left:10px;
    padding:8px 10px 10px !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  html #v-community .cs-l::-webkit-scrollbar{ display:none }
  html #v-community .ch{
    scroll-snap-align:start;
    /* 40px hoch: Das ist die Grenze, ab der ein Finger sicher
       trifft. Darunter tippt man staendig daneben. */
    min-height:40px;
    padding:9px 13px !important;
    font-size:14px !important;
    border:1px solid var(--line,#E7ECEE);
    background:var(--surface,#fff);
  }
  html #v-community .ch.on{ border-color:transparent }
}

/* ---------- 4 Der Kopf der Leiste ----------
   „Community · 24 Mitglieder · 3 online" stand am Handy in
   zwei Zeilen ueber dem Suchfeld und hat Platz gefressen, den
   der Verlauf braucht. Jetzt eine Zeile, kleiner. */
@media(max-width:900px){
  html #v-community .cs-h{
    display:flex; align-items:baseline; gap:8px;
    padding:10px 14px 2px !important;
  }
  html #v-community .cs-h b{ font-size:14px }
  html #v-community .cs-h .st{ font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
}

/* ---------- 5 Suchergebnisse antippbar machen ----------
   Die Treffer waren am Handy sehr eng und ohne sichtbare
   Trennung. Wer sucht, will danach auch treffen. */
html #v-community .srch-res{
  display:block; width:100%; text-align:left;
  padding:11px 14px; border:none; border-bottom:1px solid var(--line-2,#F6F9FA);
  background:none; font:inherit; cursor:pointer;
}
html #v-community .srch-res:hover,
html #v-community .srch-res:focus-visible{ background:var(--surface-2,#F6F9FA) }
html #v-community .srch-res .sr-top{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:11.5px; color:var(--t3,#C7D0D4); margin-bottom:3px;
}
html #v-community .srch-res .sr-ch{ font-weight:700; color:var(--brand,#10627A) }
html #v-community .srch-res .sr-body{
  font-size:14px; color:var(--t1,#14181B); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere;
}
html #v-community .srch-sec{
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--t3,#C7D0D4); padding:14px 14px 6px;
}
html #v-community .srch-mem{
  display:flex; align-items:center; gap:10px; padding:8px 14px; font-size:14px;
}

/* ---------- 6 Der Verlauf am Handy ----------
   Mehr Luft zwischen den Beitraegen, damit man beim Scrollen
   erkennt, wo einer aufhoert und der naechste anfaengt. */
@media(max-width:900px){
  html #v-community .feed{ padding:8px 12px 10px !important }
  html #v-community .m{ padding:9px 8px }
  html #v-community .mt{ font-size:15px; line-height:1.55 }
  html #v-community .mh .w{ font-size:14px }
  /* Die Uhrzeit stand am Handy zweimal da: im Kopf und unten. */
  html #v-community .mzeit{ display:none }
}

/* ---------- 7 Die Knoepfe unter einem Beitrag ----------
   Antworten, Reaktion, Korrektur — die waren am Handy so
   klein, dass man sie kaum treffen konnte. */
@media(max-width:900px){
  html #v-community .corrbtn,
  html #v-community .kibtn,
  html #v-community .rc,
  html #v-community .mact button{
    min-height:34px; padding:6px 10px; font-size:13px !important;
  }
}

/* ---------- 8 Umbruch, ohne sich auf Aelteres zu verlassen ----------
   Diese Regeln stehen schon in konto.html. Sie stehen hier noch
   einmal, damit dieser Block fuer sich allein funktioniert: Wenn
   jemand spaeter in konto.html aufraeumt, bricht der Chat nicht. */
html #v-community .comm{ max-width:100%; overflow:hidden }
html #v-community .chat,
html #v-community .feed{ max-width:100%; min-width:0; overflow-x:hidden }
html #v-community .m{ max-width:100% }
html #v-community .mb{ min-width:0; max-width:100% }
html #v-community .mt,
html #v-community .sr-body,
html #v-community .cm-cap{ overflow-wrap:anywhere; word-break:break-word }
html #v-community .cs,
html #v-community .cs-h{ min-width:0; max-width:100% }

/* ---------- Schilder im Chat ----------
   Amanda, Mila und Tom sind KI-Begleiter. Das Schild steht an jedem
   ihrer Beiträge, damit niemand sie für Mitschüler hält. */
.m .mh .m-ki,
.m .mh .m-team{
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  border-radius:4px; padding:2px 5px; margin-left:1px; white-space:nowrap;
}
.m .mh .m-ki{ background:#F1ECFD; color:#6D28D9; }
.m .mh .m-team{ background:#E6F8FC; color:#10627A; }