/* dienste.css — Anordnung der Dienste-Seite, ausschliesslich var(--ds-*) aus design/tokens.css. Keine #hex, keine freien px.
   Schmal/breit regeln die Tokens (--ds-raster-spalten); Umbruch des Kopfs ueber flex-wrap statt eigener @media. */

/* ---- Huelle */
.d-wurzel{min-height:100vh;display:flex;flex-direction:column}
.d-kopf{position:sticky;top:0;z-index:var(--ds-ebene-leiste);display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-abstand-3) var(--ds-abstand-5);min-height:var(--ds-hoehe-kopf);padding:var(--ds-abstand-3) var(--ds-abstand-6);background:var(--ds-farbe-leiste);border-bottom:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen)}
.d-marke{font-size:var(--ds-schrift-l);font-weight:var(--ds-gewicht-fett);color:var(--ds-farbe-text);text-decoration:none;white-space:nowrap}
.d-kopf [hidden]{display:none}
.d-nav{display:flex;gap:var(--ds-abstand-2);flex-basis:100%;min-width:0;overflow-x:auto;order:3}
.d-nav a{text-decoration:none;white-space:nowrap}
.d-rechts{display:flex;align-items:center;gap:var(--ds-abstand-3);margin-left:auto}
.d-wurzel a.ds-knopf{text-decoration:none}
.d-theme{min-height:var(--ds-groesse-knopf-s);padding:0 var(--ds-abstand-4);font-size:var(--ds-schrift-s)}

/* ---- Sprach-Knopf DE|EN */
.d-sprache{display:inline-flex;gap:var(--ds-abstand-1);padding:var(--ds-abstand-1);border:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen);border-radius:var(--ds-radius-voll);background:var(--ds-farbe-flaeche)}
.d-sprache a{padding:var(--ds-abstand-1) var(--ds-abstand-3);border-radius:var(--ds-radius-voll);color:var(--ds-farbe-text-2);font-size:var(--ds-schrift-xs);font-weight:var(--ds-gewicht-halbfett);letter-spacing:var(--ds-laufweite-kapital);text-decoration:none;transition:background var(--ds-dauer-schnell) var(--ds-kurve-standard)}
.d-sprache a:hover{color:var(--ds-farbe-text);background:var(--ds-farbe-flaeche-2)}
.d-sprache a[aria-current="true"]{background:var(--ds-farbe-akzent-hauch);color:var(--ds-farbe-akzent)}

/* ---- Inhalt */
.d-seite{flex:1;width:100%;max-width:var(--ds-breite-chat);margin:0 auto;padding:var(--ds-abstand-7) var(--ds-abstand-6) var(--ds-abstand-12);box-sizing:border-box}
.d-bereich>*+*{margin-top:var(--ds-abstand-6)}
.d-held{padding:var(--ds-abstand-6) 0 var(--ds-abstand-7)}
.d-held-titel{margin:0 0 var(--ds-abstand-4);font-size:var(--ds-schrift-3xl);font-weight:var(--ds-gewicht-fett);line-height:var(--ds-zeile-eng)}
.d-held-text{margin:0 0 var(--ds-abstand-6);max-width:var(--ds-breite-dialog);color:var(--ds-farbe-text-2);font-size:var(--ds-schrift-l);line-height:var(--ds-zeile-weit)}
.d-unterzeile{margin:0;color:var(--ds-farbe-text-3);font-size:var(--ds-schrift-xs);font-weight:var(--ds-gewicht-halbfett);letter-spacing:var(--ds-laufweite-kapital);text-transform:uppercase}
.d-karte-text{margin:0;color:var(--ds-farbe-text-2);font-size:var(--ds-schrift-s)}
.d-reihe{display:flex;flex-wrap:wrap;gap:var(--ds-abstand-4);align-items:center}

/* ---- Dienst-Karten: Streifen links zeigt den Zustand */
.d-karte{display:flex;flex-direction:column;gap:var(--ds-abstand-3);border-left:var(--ds-linie-dick) solid var(--ds-farbe-rahmen-stark)}
.d-karte[data-zustand="erfolg"]{border-left-color:var(--ds-farbe-gut)}
.d-karte[data-zustand="leer"]{border-left-color:var(--ds-farbe-wartend)}
.d-karte[data-zustand="fehler"]{border-left-color:var(--ds-farbe-fehler)}
.d-karte[data-zustand="angebot"]{border-left-color:var(--ds-farbe-akzent)}
.d-karte[data-aktiv]{border-color:var(--ds-farbe-akzent);background:var(--ds-farbe-akzent-hauch);box-shadow:var(--ds-schatten-m)}
a.d-karte{color:inherit;text-decoration:none}
.d-karte .ds-karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-abstand-3)}
.d-karte .ds-karte-titel{margin:0}
.d-karte-fuss{display:flex;flex-wrap:wrap;gap:var(--ds-abstand-3);margin-top:auto;padding-top:var(--ds-abstand-2)}

/* ---- Bereich */
.d-zurueck{align-self:flex-start;padding:0 var(--ds-abstand-3)}
.d-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-abstand-3)}
.d-liste li{padding:var(--ds-abstand-4) var(--ds-abstand-5);background:var(--ds-farbe-flaeche-2);border:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen);border-radius:var(--ds-radius-m)}
.d-form{display:flex;flex-direction:column;gap:var(--ds-abstand-5)}
.d-form .ds-knopf{align-self:flex-start}

/* ---- Fuss */
.d-fuss{display:flex;flex-wrap:wrap;gap:var(--ds-abstand-3) var(--ds-abstand-6);justify-content:space-between;width:100%;max-width:var(--ds-breite-chat);margin:0 auto;padding:var(--ds-abstand-6);box-sizing:border-box;border-top:var(--ds-linie-duenn) solid var(--ds-farbe-rahmen);color:var(--ds-farbe-text-3);font-size:var(--ds-schrift-xs)}
.d-fuss a{color:var(--ds-farbe-text-2)}