/* ============================================================================
   meet — Material 3
   ============================================================================
   Die Farbwerte sind die BASELINE-PALETTE von Material 3, unveraendert. Das ist
   Absicht: Der Dienst soll aussehen wie ein Google-Programm und nicht wie eine
   Nachahmung mit eigenen Lieblingsfarben.

   Alle Farben stehen als Marken (--md-*) ganz oben. Kein Bauteil weiter unten
   nennt einen rohen Hexwert — sonst laesst sich das Schema nicht als Ganzes
   umstellen, und die dunkle Fassung faengt an, an einzelnen Stellen zu haken.

   KEIN style="…"-Attribut im Markup und kein <style>-Block: Die Kopfzeile des
   Dienstes erlaubt nur `style-src 'self'`, und die blockiert beides lautlos.
   ========================================================================= */

:root{
  color-scheme:light dark;

  /* ---------------------------------------------------------------- hell */
  --md-primary:#6750A4;              --md-on-primary:#FFFFFF;
  --md-primary-container:#EADDFF;    --md-on-primary-container:#21005D;
  --md-secondary:#625B71;            --md-on-secondary:#FFFFFF;
  --md-secondary-container:#E8DEF8;  --md-on-secondary-container:#1D192B;
  --md-tertiary:#7D5260;             --md-on-tertiary:#FFFFFF;
  --md-tertiary-container:#FFD8E4;   --md-on-tertiary-container:#31111D;
  --md-error:#B3261E;                --md-on-error:#FFFFFF;
  --md-error-container:#F9DEDC;      --md-on-error-container:#410E0B;

  --md-surface:#FEF7FF;              --md-on-surface:#1D1B20;
  --md-surface-variant:#E7E0EC;      --md-on-surface-variant:#49454F;
  --md-surface-lowest:#FFFFFF;
  --md-surface-low:#F7F2FA;
  --md-surface-container:#F3EDF7;
  --md-surface-high:#ECE6F0;
  --md-surface-highest:#E6E0E9;
  --md-outline:#79747E;              --md-outline-variant:#CAC4D0;
  --md-inverse-surface:#322F35;      --md-inverse-on-surface:#F5EFF7;
  --md-scrim:#000000;

  /* Ecken nach M3-Skala. */
  --e-xs:4px; --e-s:8px; --e-m:12px; --e-l:16px; --e-xl:28px; --e-voll:999px;

  /* Bewegung: „standard" fuer Lagewechsel, „betont" fuer Ein- und Austritte. */
  --takt-kurz:150ms;
  --takt-mittel:250ms;
  --kurve:cubic-bezier(.2,0,0,1);
  --kurve-betont:cubic-bezier(.05,.7,.1,1);

  --grund-feld:var(--md-surface);
}

@media (prefers-color-scheme:dark){
  :root{
    --md-primary:#D0BCFF;              --md-on-primary:#381E72;
    --md-primary-container:#4F378B;    --md-on-primary-container:#EADDFF;
    --md-secondary:#CCC2DC;            --md-on-secondary:#332D41;
    --md-secondary-container:#4A4458;  --md-on-secondary-container:#E8DEF8;
    --md-tertiary:#EFB8C8;             --md-on-tertiary:#492532;
    --md-tertiary-container:#633B48;   --md-on-tertiary-container:#FFD8E4;
    --md-error:#F2B8B5;                --md-on-error:#601410;
    --md-error-container:#8C1D18;      --md-on-error-container:#F9DEDC;

    --md-surface:#141218;              --md-on-surface:#E6E0E9;
    --md-surface-variant:#49454F;      --md-on-surface-variant:#CAC4D0;
    --md-surface-lowest:#0F0D13;
    --md-surface-low:#1D1B20;
    --md-surface-container:#211F26;
    --md-surface-high:#2B2930;
    --md-surface-highest:#36343B;
    --md-outline:#938F99;              --md-outline-variant:#49454F;
    --md-inverse-surface:#E6E0E9;      --md-inverse-on-surface:#322F35;
  }
}

/* ============================================================================
   DAS HIER MUSS GANZ OBEN STEHEN — und `!important` ist kein Pfusch.
   ============================================================================
   Der Browser bringt `[hidden]{display:none}` mit. Diese Regel hat dieselbe
   Spezifitaet wie `.knopf` oder `.karte` — und eine Autorenregel schlaegt die
   Browser-Vorgabe IMMER. Ein `<button class="knopf" hidden>` bliebe sonst
   sichtbar, obwohl das Attribut korrekt gesetzt ist. Lautlos.
   ========================================================================= */
[hidden]{display:none !important}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--md-surface);
  color:var(--md-on-surface);
  font-family:Roboto,'Segoe UI',system-ui,-apple-system,sans-serif;
  /* body-large */
  font-size:16px; line-height:24px; letter-spacing:.5px;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}

/* ---------------------------------------------------------------- Symbole */
.sym{
  font-family:'Material Symbols Rounded';
  font-weight:400; font-style:normal;
  font-size:24px; line-height:1;
  letter-spacing:normal; text-transform:none;
  display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr;
  -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
.sym.klein{font-size:18px}
.sym.gross{font-size:40px}

/* ============================================================================
   SCHRIFTROLLEN nach M3. Sie stehen als Klassen bereit, damit im Markup
   „title-large" steht und nicht „18px, ein bisschen fetter".
   ========================================================================= */
.t-display{font-size:45px;line-height:52px;font-weight:400;letter-spacing:0}
.t-headline{font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}
.t-headline-s{font-size:24px;line-height:32px;font-weight:400;letter-spacing:0}
.t-title{font-size:22px;line-height:28px;font-weight:400;letter-spacing:0}
.t-title-m{font-size:16px;line-height:24px;font-weight:500;letter-spacing:.15px}
.t-body{font-size:16px;line-height:24px;font-weight:400;letter-spacing:.5px}
.t-body-m{font-size:14px;line-height:20px;font-weight:400;letter-spacing:.25px}
.t-label{font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px}
.t-label-s{font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px}
.leise{color:var(--md-on-surface-variant)}

@media (max-width:600px){
  .t-display{font-size:32px;line-height:40px}
  .t-headline{font-size:24px;line-height:32px}
}

/* ============================================================================
   KOPFLEISTE (top app bar, small)
   ========================================================================= */
.app-leiste{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:8px;
  height:64px; padding:0 8px 0 16px;
  background:var(--md-surface);
  color:var(--md-on-surface);
}
.app-leiste .marke{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.app-leiste .marke .sym{color:var(--md-primary)}
.app-leiste .wortmarke{font-size:22px;line-height:28px;font-weight:500;letter-spacing:0}
.app-leiste .fassung{color:var(--md-on-surface-variant);font-size:11px;letter-spacing:.5px}

/* ============================================================================
   KNOEPFE
   ============================================================================
   Ein Grundbauteil, vier Auspraegungen. Die Zustandsschicht (::before) ist der
   M3-Weg: eine Flaeche in der Vordergrundfarbe, deren Deckkraft sich aendert —
   nicht eine zweite, aufgehellte Farbe, die bei jedem Schema neu geraten
   werden muesste.
   ========================================================================= */
.knopf{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:0 24px;
  border:none; border-radius:var(--e-voll);
  background:var(--md-primary); color:var(--md-on-primary);
  font-family:inherit; font-size:14px; line-height:20px; font-weight:500; letter-spacing:.1px;
  cursor:pointer;
  transition:box-shadow var(--takt-kurz) var(--kurve), background var(--takt-kurz) var(--kurve);
}
.knopf::before{
  content:''; position:absolute; inset:0;
  background:currentColor; opacity:0;
  transition:opacity var(--takt-kurz) var(--kurve);
}
.knopf:hover::before{opacity:.08}
.knopf:focus-visible::before{opacity:.1}
.knopf:active::before{opacity:.1}
.knopf:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}
.knopf .sym{font-size:18px}
.knopf:disabled{
  background:color-mix(in srgb,var(--md-on-surface) 12%,transparent);
  color:color-mix(in srgb,var(--md-on-surface) 38%,transparent);
  cursor:not-allowed;
}
.knopf:disabled::before{opacity:0}

.knopf.tonal{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.knopf.umrandet{
  background:transparent; color:var(--md-primary);
  border:1px solid var(--md-outline-variant);
}
.knopf.text{background:transparent;color:var(--md-primary);padding:0 12px}
.knopf.gefahr{background:var(--md-error);color:var(--md-on-error)}
.knopf.breit{width:100%}

/* Icon-Knopf: 40x40, rund, Zustandsschicht wie oben. */
.ikone-knopf{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0;
  border:none; border-radius:var(--e-voll);
  background:transparent; color:var(--md-on-surface-variant);
  cursor:pointer;
}
.ikone-knopf::before{
  content:''; position:absolute; inset:0; background:currentColor; opacity:0;
  transition:opacity var(--takt-kurz) var(--kurve);
}
.ikone-knopf:hover::before{opacity:.08}
.ikone-knopf:focus-visible::before{opacity:.1}
.ikone-knopf:focus-visible{outline:3px solid var(--md-primary);outline-offset:2px}
.ikone-knopf.gefahr{color:var(--md-error)}

/* ============================================================================
   EINGABEFELDER (outlined text field)
   ============================================================================
   Die schwebende Beschriftung sitzt AUF der Rahmenlinie und deckt sie mit dem
   Hintergrund ab. Deshalb gibt es --grund-feld: In einem Dialog ist der Grund
   ein anderer als auf der Seite, und ohne diese Marke bliebe ein farbiger
   Balken hinter der Beschriftung stehen.
   ========================================================================= */
.feld{position:relative;display:block;margin:0 0 20px}
.feld > input,
.feld > textarea,
.feld > select{
  width:100%; min-height:56px; padding:16px;
  border:1px solid var(--md-outline); border-radius:var(--e-xs);
  background:transparent; color:var(--md-on-surface);
  font-family:inherit; font-size:16px; line-height:24px; letter-spacing:.5px;
  transition:border-color var(--takt-kurz) var(--kurve);
}
.feld > textarea{min-height:104px;resize:vertical}
.feld > select{appearance:none;cursor:pointer}
.feld > input:focus,
.feld > textarea:focus,
.feld > select:focus{
  outline:none; border:2px solid var(--md-primary); padding:15px;
}
.feld > .marke{
  position:absolute; left:12px; top:16px;
  padding:0 4px;
  background:var(--grund-feld);
  color:var(--md-on-surface-variant);
  font-size:16px; line-height:24px; letter-spacing:.5px;
  pointer-events:none;
  transition:transform var(--takt-kurz) var(--kurve), font-size var(--takt-kurz) var(--kurve), color var(--takt-kurz) var(--kurve);
}
/* `:placeholder-shown` ist der Trick, mit dem „hat Inhalt" ohne JS erkannt wird.
   Deshalb tragen alle Felder ein Leerzeichen als Platzhalter. */
.feld > input:focus + .marke,
.feld > input:not(:placeholder-shown) + .marke,
.feld > textarea:focus + .marke,
.feld > textarea:not(:placeholder-shown) + .marke,
.feld > select + .marke{
  transform:translateY(-24px) scale(.75);
  transform-origin:left center;
}
.feld > input:focus + .marke,
.feld > textarea:focus + .marke,
.feld > select:focus + .marke{color:var(--md-primary)}
/* Ein Auswahlfeld braucht ein sichtbares Zeichen, dass es aufklappt. `appearance:none`
   nimmt den nativen Pfeil weg, und ohne Ersatz sieht das Feld aus wie ein Textfeld.
   Der Ersatz ist ein Zeichen aus der Symbolschrift — es erbt damit die Textfarbe und
   stimmt in beiden Farbschemata, was ein eingebettetes Bild nicht koennte. */
.feld.auswahl > select{padding-right:44px}
.feld.auswahl::after{
  content:'expand_more';
  font-family:'Material Symbols Rounded';
  font-size:24px; line-height:1;
  position:absolute; right:14px; top:16px;
  color:var(--md-on-surface-variant);
  pointer-events:none;
}
.feld > .hinweis{
  display:block; margin:4px 16px 0;
  color:var(--md-on-surface-variant); font-size:12px; line-height:16px; letter-spacing:.4px;
}
.feld.fehlerhaft > input,
.feld.fehlerhaft > textarea{border-color:var(--md-error)}
.feld.fehlerhaft > .marke{color:var(--md-error)}

/* ============================================================================
   FLAECHEN
   ========================================================================= */
.karte{
  background:var(--md-surface-container);
  border-radius:var(--e-m);
  padding:16px;
}
.karte.umrandet{background:transparent;border:1px solid var(--md-outline-variant)}
.karte.hoch{background:var(--md-surface-high)}

.chip{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 12px;
  border:1px solid var(--md-outline-variant); border-radius:var(--e-s);
  background:transparent; color:var(--md-on-surface-variant);
  font-size:14px; line-height:20px; font-weight:500; letter-spacing:.1px;
  white-space:nowrap;
}
.chip .sym{font-size:18px}
.chip.gewaehlt{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-color:transparent}
.chip.warnung{background:var(--md-error-container);color:var(--md-on-error-container);border-color:transparent}
.chip.gut{background:var(--md-primary-container);color:var(--md-on-primary-container);border-color:transparent}

/* ============================================================================
   SEITENGERUEST
   ========================================================================= */
main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:0 16px 64px}

.startbild{
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  padding:48px 0 32px;
}
.startbild .sym.gross{
  color:var(--md-primary);
  background:var(--md-primary-container); border-radius:var(--e-l);
  padding:12px;
}
.startbild p{max-width:52ch;margin:0;color:var(--md-on-surface-variant)}

.punkte{display:flex;flex-direction:column;gap:12px;margin:8px 0 24px;padding:0;list-style:none}
.punkte li{display:flex;align-items:flex-start;gap:12px;color:var(--md-on-surface-variant)}
.punkte .sym{color:var(--md-primary);flex:0 0 auto}

/* ============================================================================
   DIALOG
   ============================================================================
   Ein <dialog> mit ::backdrop. Auf schmalen Schirmen wird er zur ganzen Seite —
   das ist die M3-Fassung „full-screen dialog", und sie ist hier richtig, weil
   der Ablauf mehrere Schritte hat.
   ========================================================================= */
dialog{
  --grund-feld:var(--md-surface-high);
  width:min(560px,calc(100vw - 48px));
  max-height:min(720px,calc(100vh - 48px));
  padding:0; border:none; border-radius:var(--e-xl);
  background:var(--md-surface-high); color:var(--md-on-surface);
  overflow:hidden;
}
dialog::backdrop{background:color-mix(in srgb,var(--md-scrim) 40%,transparent)}
dialog[open]{display:flex;flex-direction:column;animation:auf var(--takt-mittel) var(--kurve-betont)}
@keyframes auf{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  dialog[open]{animation:none}
  *{transition-duration:1ms !important}
}

.dialog-kopf{
  display:flex; align-items:center; gap:8px;
  padding:16px 16px 8px;
}
.dialog-kopf .titel{flex:1;min-width:0;font-size:22px;line-height:28px;font-weight:400}
.dialog-rumpf{flex:1;overflow-y:auto;padding:8px 24px 8px}
.dialog-fuss{
  display:flex; align-items:center; gap:8px; justify-content:flex-end;
  padding:16px 24px 24px;
}
.dialog-fuss .links{margin-right:auto}

@media (max-width:600px){
  dialog{
    width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
    border-radius:0;
  }
}

/* Schrittanzeige: ein Balken je Schritt. Kein Ziffernkreis — die Zahl der
   Schritte ist klein, und ein Balken sagt dasselbe ohne Beschriftung. */
.schritte{display:flex;gap:4px;padding:0 24px 12px}
.schritte span{
  flex:1; height:4px; border-radius:var(--e-voll);
  background:var(--md-surface-variant);
  transition:background var(--takt-mittel) var(--kurve);
}
.schritte span.erledigt{background:var(--md-primary)}
.schritte span.hier{background:var(--md-primary)}

.schirm{display:none}
.schirm.aktiv{display:block;animation:rein var(--takt-mittel) var(--kurve-betont)}
@keyframes rein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* ============================================================================
   WUNSCHZEITEN
   ========================================================================= */
.zeitzeile{
  display:grid; grid-template-columns:1fr 110px 120px 40px; gap:8px; align-items:start;
  margin-bottom:12px;
}
.zeitzeile .feld{margin:0}
@media (max-width:560px){
  .zeitzeile{grid-template-columns:1fr 1fr 40px}
  .zeitzeile .feld:nth-child(3){grid-column:1/3}
}

/* Ergebnisliste der Pruefung. Frei = anwaehlbar, belegt = nicht. */
.ergebnis{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:12px 16px; margin-bottom:8px;
  border:1px solid var(--md-outline-variant); border-radius:var(--e-m);
  background:transparent; color:inherit; font:inherit; text-align:left;
  cursor:pointer;
  transition:background var(--takt-kurz) var(--kurve), border-color var(--takt-kurz) var(--kurve);
}
.ergebnis .sym{color:var(--md-on-surface-variant)}
/* Beschriftung und Dauer sind zwei Zeilen. Nebeneinander liefen sie ohne Abstand
   ineinander („…18:00 Uhr3 h") — zwei inline-Elemente kennen keinen Umbruch. */
.ergebnis .text{flex:1;min-width:0;display:flex;flex-direction:column}
.ergebnis .dauer{color:var(--md-on-surface-variant);font-size:12px;letter-spacing:.4px}
.ergebnis.gewaehlt{
  background:var(--md-primary-container); color:var(--md-on-primary-container);
  border-color:transparent;
}
.ergebnis.gewaehlt .sym,.ergebnis.gewaehlt .dauer{color:inherit}
.ergebnis.belegt{
  cursor:not-allowed; opacity:.6;
  background:color-mix(in srgb,var(--md-error-container) 45%,transparent);
  border-color:transparent;
}
.ergebnis.belegt .beschriftung{text-decoration:line-through}

/* Zweiteiliger Schalter (segmented button) fuer „alle" oder „eine". */
.segmente{display:flex;margin:0 0 8px}
.segmente button{
  flex:1; min-height:40px; padding:0 12px;
  border:1px solid var(--md-outline); background:transparent; color:var(--md-on-surface);
  font-family:inherit; font-size:14px; font-weight:500; letter-spacing:.1px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.segmente button:first-child{border-radius:var(--e-voll) 0 0 var(--e-voll)}
.segmente button:last-child{border-radius:0 var(--e-voll) var(--e-voll) 0;border-left:none}
.segmente button.gewaehlt{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.segmente .sym{font-size:18px}

/* ============================================================================
   ADMIN
   ========================================================================= */
.reiter{
  display:flex; gap:0; margin:8px 0 24px;
  border-bottom:1px solid var(--md-outline-variant);
}
.reiter button{
  position:relative; flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 12px;
  border:none; background:transparent; color:var(--md-on-surface-variant);
  font-family:inherit; font-size:14px; font-weight:500; letter-spacing:.1px; cursor:pointer;
}
.reiter button.aktiv{color:var(--md-primary)}
.reiter button.aktiv::after{
  content:''; position:absolute; left:12px; right:12px; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:var(--md-primary);
}
.reiter .zaehler{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:var(--e-voll);
  background:var(--md-error); color:var(--md-on-error);
  font-size:11px; font-weight:500;
}
@media (max-width:600px){ .reiter .beschriftung{display:none} }

.liste{display:flex;flex-direction:column;gap:12px}

.anfrage{padding:16px;border-radius:var(--e-m);background:var(--md-surface-container)}
.anfrage .kopf{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.anfrage .kopf .wer{flex:1;min-width:0}
.anfrage .zweck{margin:0 0 12px;color:var(--md-on-surface-variant)}
.anfrage .zeiten{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.anfrage .taten{display:flex;gap:8px;flex-wrap:wrap}
.anfrage .hinweis{margin:8px 0 0;color:var(--md-on-surface-variant);font-size:12px;letter-spacing:.4px}

/* Monatsgitter. Sieben Spalten, feste Reihenfolge — die Hoehe kommt aus dem
   Inhalt, nicht aus einer gerechneten Zeitachse: Stufe 1 zeigt WAS an einem Tag
   liegt, nicht wann genau. */
.monat{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.monat .wochentag{
  padding:4px; text-align:center;
  color:var(--md-on-surface-variant); font-size:11px; font-weight:500; letter-spacing:.5px;
}
.tag{
  display:flex; flex-direction:column; gap:3px;
  min-height:84px; padding:6px;
  border-radius:var(--e-s); background:var(--md-surface-container);
  border:1px solid transparent;
  font:inherit; text-align:left; color:inherit; cursor:pointer;
}
.tag.fremd{opacity:.45}
.tag.heute{border-color:var(--md-primary)}
.tag.gewaehlt{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.tag .zahl{font-size:12px;font-weight:500;letter-spacing:.5px}
.tag .balken{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:2px 6px; border-radius:var(--e-xs);
  font-size:11px; line-height:16px; letter-spacing:.3px;
}
.balken.eigen{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.balken.buchung{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.balken.ical,.balken.caldav{background:var(--md-surface-highest);color:var(--md-on-surface-variant)}
.balken.vorschlag{
  background:transparent; color:var(--md-on-surface-variant);
  border:1px dashed var(--md-outline);
}

.tagesliste{margin-top:16px}
.tagesliste .zeile{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 8px; border-bottom:1px solid var(--md-outline-variant);
}
.tagesliste .zeile:last-child{border-bottom:none}
.tagesliste .zeit{min-width:104px;color:var(--md-on-surface-variant);font-size:14px}
.tagesliste .titel{flex:1;min-width:0}

.leerlauf{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:48px 16px; text-align:center; color:var(--md-on-surface-variant);
}
.leerlauf .sym{font-size:40px;opacity:.6}

/* ---------------------------------------------------------- Einstellungen */
.neue-art{display:flex;gap:12px;align-items:flex-start;margin-top:16px}
.neue-art .feld{flex:1;margin:0}
/* Der Knopf steht neben einem 56 Pixel hohen Feld — ohne diese Hoehe saesse er
   oben an der Kante statt auf einer Linie mit der Eingabe. */
.neue-art .knopf{min-height:56px}

.kategorie{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:var(--e-m);
  background:var(--md-surface-container);
}
.kategorie.stumm{opacity:.62}
.kategorie .kategorie-name{
  flex:1; min-width:0; padding:8px 12px;
  border:1px solid transparent; border-radius:var(--e-s);
  background:transparent; color:var(--md-on-surface);
  font-family:inherit; font-size:16px; line-height:24px; letter-spacing:.5px;
}
.kategorie .kategorie-name:hover{border-color:var(--md-outline-variant)}
.kategorie .kategorie-name:focus{outline:none;border-color:var(--md-primary);background:var(--md-surface-lowest)}
.kategorie .chip{cursor:pointer}
.kategorie .ikone-knopf:disabled{opacity:.38;cursor:not-allowed}
@media (max-width:600px){
  .kategorie{flex-wrap:wrap}
  .kategorie .kategorie-name{flex:1 0 100%;order:-1}
}

.anfrage .art{margin:0 0 8px}

.mailzeile{padding:12px 16px;border-radius:var(--e-m);background:var(--md-surface-container)}
.mailzeile .kopf{display:flex;align-items:center;gap:8px}
.mailzeile pre{
  margin:8px 0 0; padding:12px;
  background:var(--md-surface-lowest); border-radius:var(--e-s);
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-size:12px; line-height:18px;
  white-space:pre-wrap; word-break:break-word;
}

/* ============================================================================
   MELDUNG (snackbar) — eine Zeile unten, drei Sekunden.
   ========================================================================= */
/* Im Ruhezustand wird sie NICHT nur hinausgeschoben, sondern auch unsichtbar
   gemacht: 120 % ihrer eigenen Hoehe reichen bei `bottom:24px` nicht aus, um sie
   ganz aus dem Bild zu bringen — ein heller Streifen blieb am unteren Rand stehen. */
.meldung{
  position:fixed; left:50%; bottom:24px; z-index:60;
  transform:translate(-50%,120%);
  opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:12px;
  min-height:48px; max-width:min(560px,calc(100vw - 32px)); padding:12px 16px;
  border-radius:var(--e-xs);
  background:var(--md-inverse-surface); color:var(--md-inverse-on-surface);
  font-size:14px; line-height:20px; letter-spacing:.25px;
  box-shadow:0 4px 12px color-mix(in srgb,var(--md-scrim) 30%,transparent);
  transition:transform var(--takt-mittel) var(--kurve-betont), opacity var(--takt-kurz) var(--kurve);
}
.meldung.sichtbar{transform:translate(-50%,0);opacity:1;pointer-events:auto}

/* Fehler direkt an der Stelle, an der er entsteht. */
.fehlerzeile{
  display:flex; align-items:flex-start; gap:8px;
  margin:0 0 16px; padding:12px 16px;
  border-radius:var(--e-m);
  background:var(--md-error-container); color:var(--md-on-error-container);
  font-size:14px; line-height:20px;
}

.lade{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:32px; color:var(--md-on-surface-variant);
}
.lade .sym{animation:dreh 1.2s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

.fuss{
  padding:24px 16px; text-align:center;
  color:var(--md-on-surface-variant); font-size:11px; letter-spacing:.5px;
}