/*
  Einzelpersonen-Karte -- funktioniert als 1 Instanz auf der Kontaktseite
  (breiter Slot: Avatar+Text nebeneinander) UND als eine von 3+ Karten im
  Team-Grid (schmaler Slot: gestapelt). Container Query statt Media Query,
  identisch zum etablierten Card/Hero-Muster in dieser Bibliothek -- die Karte
  soll auf ihre EIGENE verfuegbare Breite reagieren, unabhaengig vom Viewport
  (z.B. schmal in einer Seitenspalte trotz breitem Viewport).
*/@layer komponenten{.ansprechpartner-karte{/* container-type:inline-size sitzt bewusst HIER (Groesse/Box unveraendert
       durch die eigene Query), waehrend flex-direction unten auf dem Kind
       '.ansprechpartner-karte__reihe' umschaltet -- ein Size-Query-Container
       darf sein EIGENES Boxmodell/Layout nicht ueber die eigene Container
       Query aendern (sonst Zirkelbezug), Browser ignorieren das sonst
       stillschweigend (Playwright-belegt, exakt derselbe Bug + Fix wie bei
       rich-text.css/.rich-text__hauptbereich, siehe dortiger Kommentar). */container-type:inline-size;padding:var(--space-6);background:var(--farbe-grund);border:1px solid var(--farbe-linie);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);/* Eigene, bewusst zurueckhaltende Aussenbreite -- gedacht fuer die
       Einzelinstanz auf der Kontaktseite (direkt als Top-Level-Section in der
       Route, wie hero/rich-text auch ihre eigene Aussenbreite mitbringen,
       siehe dortige CSS). In einem KUENFTIGEN Team-Grid (ueber-uns, mehrere
       Karten als Grid-Items nebeneinander) ist die Grid-Spaltenbreite immer
       kleiner als --container-max (96rem) -- max-width greift dort schlicht
       nie, kein Konflikt mit der Grid-Nutzung. */max-width:44rem;margin-inline:auto;margin-block:var(--space-10)}.ansprechpartner-karte__reihe{display:flex;flex-direction:column;gap:var(--space-5)}.ansprechpartner-karte__avatar-bereich{flex-shrink:0}.ansprechpartner-karte__foto{width:var(--space-16);border-radius:var(--radius-full);overflow:hidden}.ansprechpartner-karte__foto img{display:block;width:100%;aspect-ratio:1;object-fit:cover}/* Initialen-Kreis -- der Ersatz fuer ein noch fehlendes Foto (Guido
     Mitschke, Stand 2026-08-19). Bewusst dezent (Flaechen-, nicht Akzentfarbe
     als Hintergrund): ein grelles Farbfeld mit zwei Buchstaben wuerde neben
     einem spaeter ergaenzten echten Foto (anderer Ansprechpartner) wie ein
     Fehlerzustand wirken -- so bleibt es ein ruhiger, bewusst gestalteter
     Platzhalter, kein kaschierter Bug. */.ansprechpartner-karte__initialen{display:flex;align-items:center;justify-content:center;width:var(--space-16);aspect-ratio:1;border-radius:var(--radius-full);background:var(--farbe-flaeche);color:var(--farbe-akzent);font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold)}.ansprechpartner-karte__inhalt{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}.ansprechpartner-karte__name{margin:0;font-size:var(--text-lg)}.ansprechpartner-karte__rolle{margin:0;font-size:var(--text-sm);color:var(--farbe-text-dezent)}.ansprechpartner-karte__kurztext{margin:var(--space-1) 0 0;font-size:var(--text-sm);color:var(--farbe-text-gedaempft);line-height:var(--leading-relaxed)}.ansprechpartner-karte__schwerpunkte{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0 0;padding:0;list-style:none}.ansprechpartner-karte__schwerpunkte li{padding:0.35rem 0.7rem;border-radius:var(--radius-full);background:color-mix(in oklch, var(--farbe-akzent) 10%, transparent);color:var(--farbe-text);font-size:var(--text-xs);line-height:1.2}.ansprechpartner-karte__kontakt{display:flex;flex-direction:column;gap:var(--space-1);margin:var(--space-2) 0 0;padding:0;list-style:none;font-size:var(--text-sm)}.ansprechpartner-karte__kontakt a{color:var(--farbe-text);text-decoration:none}.ansprechpartner-karte__kontakt a:hover,.ansprechpartner-karte__kontakt a:focus-visible{color:var(--farbe-akzent);text-decoration:underline}/* Ausreichend eigene Breite (Kontaktseite: 1 Karte in voller Spalte) --
     Avatar und Inhalt nebeneinander statt gestapelt. Schwelle niedrig genug
     (26rem), damit sie in einem Team-Grid mit 3 Spalten (je grob 18-22rem
     breiter Slot bei --container-max) NICHT greift und dort die kompaktere
     gestapelte Optik bleibt. */@container (min-width: 26rem){.ansprechpartner-karte__reihe{flex-direction:row;align-items:flex-start}}}