@charset "utf-8";
/* ==========================================================================
   startseite.de – modernes Design
   Farbpalette direkt aus images/startseitede_logo1.png entnommen:
     #0C487C  Navy     (Schrift + Haus-Icon)
     #FF4747  Rot      (".de" Badge)
     #CDD3E0  Blaugrau (Logo-Flaeche)
     #9BA3C0  Graublau (Logo-Aussenkontur)
     #F5F6FA  Off-White (Badge-Kontur)
   ========================================================================== */

/* ------------------------------------------------------------- Schriftart */
/* Inter, SIL Open Font License 1.1 – frei fuer kommerzielle Nutzung.
   Lokal eingebunden, damit beim Seitenaufruf keine Verbindung zu einem
   fremden Server (Google Fonts) entsteht. Variabler Schnitt: eine Datei
   deckt alle Staerken von 100 bis 900 ab. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- Tokens  */
:root {
  /* Markenfarben (in beiden Themes identisch) */
  --brand-navy:   #0C487C;
  --brand-red:    #FF4747;
  --brand-mist:   #CDD3E0;
  --brand-white:  #F5F6FA;

  /* Helles Theme */
  --bg:            #EBEFF6;
  --surface:       #FFFFFF;
  --surface-2:     #F7F9FC;
  --surface-sunk:  #EDF1F7;
  --hover-bg:      #E7EDF6;
  --logo-ring:     #B4C0D4;
  --suggest-text:  #05121F;
  --border:        #C3CCDB;
  --border-strong: #A8B4C9;
  --text:          #10243A;
  --text-muted:    #5C7089;
  --primary:       #0C487C;
  --primary-hover: #0A3B66;
  --primary-ink:   #FFFFFF;
  --accent:        #E23A3A;
  --accent-soft:   rgba(255, 71, 71, .12);
  /* Symbolflaechen (Kategorie-Icons, Lupe, Schrittzahlen) in der
     Blaugrau-Flaeche des Logos, Symbol darauf im Logo-Navy */
  --chip-bg:       #CDD3E0;
  --chip-bg-hover: #B9C3D6;
  --chip-ink:      #0C487C;
  --chip-border:   #9BA3C0;
  /* Symbole (Kategorien + Lupe): Flaeche = Seitenhintergrund, Linien =
     Trennlinienfarbe von Kopf- und Fusszeile */
  --sym-ink:       #0C487C;
  /* Ueberschriften der Kacheln in derselben Farbe wie "Suchen" im Suchfeld.
     Bewusst als Verweis: aendert sich --sym-ink je Theme, zieht die
     Ueberschrift automatisch mit. */
  --tile-title:    var(--sym-ink);
  --sym-bg-hover:  #E1E6EF;
  --ring:          rgba(12, 72, 124, .28);
  --shadow-sm:     0 1px 2px rgba(16, 36, 58, .06), 0 1px 2.7px rgba(16, 36, 58, .05);
  --shadow-md:     0 3.6px 10.8px rgba(16, 36, 58, .07), 0 2px 3.6px rgba(16, 36, 58, .05);
  --shadow-lg:     0 16.2px 36px rgba(16, 36, 58, .12), 0 3.6px 10.8px rgba(16, 36, 58, .06);
  --header-bg:     rgba(255, 255, 255, .78);

  /* Maße */
  --radius-sm: 7.2px;
  --radius:    12.6px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --wrap: 1008px;
  /* Abstand ueber und unter der Suchleiste – frueher zugleich die Hoehe der
     inzwischen entfernten Kopfzeile. */
  --header-h: 64.8px;
  /* Abstand zwischen den Linkboxen. In der Mobilansicht uebernimmt
     --header-h diesen Wert, damit die Suchleiste ringsum genauso viel Luft
     hat wie die Kacheln untereinander. */
  --kachel-abstand: 18px;
  /* Gesamtmassstab der Seite fuer die Groesser/Kleiner-Schalter. 1 ist die
     Normalgroesse: alle Laengen im Stylesheet sind bereits auf das gewuenschte
     Mass gerechnet, es wird im Ruhezustand also nichts mehr skaliert. */
  --zoom: 1;
}

/* Dunkles Theme – greift bei Systemeinstellung "dunkel", solange der
   Nutzer nicht ausdrücklich "hell" gewählt hat. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0A1725;
    --surface:       #10263D;
    --surface-2:     #14304A;
    --surface-sunk:  #0D2137;
    --hover-bg:      #1E4368;
    --logo-ring:     #2A4C6E;
    --suggest-text:  #EEF6FF;
    --border:        #1E3A57;
    --border-strong: #2A4C6E;
    --text:          #E7EDF6;
    --text-muted:    #9DB2C9;
    --primary:       #3D8BD4;
    --primary-hover: #5AA0E2;
    --primary-ink:   #06131F;
    --accent:        #FF6B6B;
    --accent-soft:   rgba(255, 107, 107, .16);
    --chip-bg:       #CDD3E0;
    --chip-bg-hover: #B9C3D6;
    --chip-ink:      #0C487C;
    --chip-border:   #9BA3C0;
    --sym-ink:       #8FC0EF;
    --sym-bg-hover:  #142639;
    --ring:          rgba(61, 139, 212, .40);
    --shadow-sm:     0 1px 2px rgba(0, 0, 0, .40);
    --shadow-md:     0 3.6px 10.8px rgba(0, 0, 0, .40);
    --shadow-lg:     0 16.2px 36px rgba(0, 0, 0, .50);
    --header-bg:     rgba(10, 23, 37, .78);
  }
}

/* Ausdrückliche Nutzerwahl "dunkel" – gewinnt immer. */
:root[data-theme="dark"] {
  --bg:            #0A1725;
  --surface:       #10263D;
  --surface-2:     #14304A;
  --surface-sunk:  #0D2137;
  --hover-bg:      #1E4368;
  --logo-ring:     #2A4C6E;
  --suggest-text:  #EEF6FF;
  --border:        #1E3A57;
  --border-strong: #2A4C6E;
  --text:          #E7EDF6;
  --text-muted:    #9DB2C9;
  --primary:       #3D8BD4;
  --primary-hover: #5AA0E2;
  --primary-ink:   #06131F;
  --accent:        #FF6B6B;
  --accent-soft:   rgba(255, 107, 107, .16);
  --chip-bg:       #CDD3E0;
  --chip-bg-hover: #B9C3D6;
  --chip-ink:      #0C487C;
  --chip-border:   #9BA3C0;
  --sym-ink:       #8FC0EF;
  --sym-bg-hover:  #142639;
  --ring:          rgba(61, 139, 212, .40);
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, .40);
  --shadow-md:     0 3.6px 10.8px rgba(0, 0, 0, .40);
  --shadow-lg:     0 16.2px 36px rgba(0, 0, 0, .50);
  --header-bg:     rgba(10, 23, 37, .78);
}

/* ----------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }

/* Alle Schriftgroessen der Seite stehen in rem und haengen damit an dieser
   einen Angabe. 90% statt eines festen Pixelwerts, damit eine vom Nutzer im
   Browser eingestellte Grundschrift weiterhin durchschlaegt – bei der
   ueblichen Voreinstellung von 16px ergibt das 14.4px. */
html {
  -webkit-text-size-adjust: 100%;
  font-size: 90%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  /* Durchgehend gleichmaessige Flaeche, ohne Muster und ohne Verlauf. */
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

/* Nur fuer die Groesser/Kleiner-Schalter. Im Ruhezustand steht --zoom auf 1,
   die Seite wird also nicht skaliert – die Groessen stehen fest im Stylesheet.
   Erst wenn der Nutzer eine andere Stufe waehlt, greift zoom.
   Muss nach der body-Regel stehen, sonst gewinnt deren min-height: 100vh.
   Browser ohne "zoom" (Firefox vor 126) zeigen die Seite in Normalgroesse,
   dort bleiben die Schalter wirkungslos und blenden sich selbst aus. */
@supports (zoom: 1) {
  html { zoom: var(--zoom); }
  /* 100vh misst das unskalierte Fenster. Geteilt durch den Zoomfaktor reicht
     die Seite nach dem Verkleinern wieder genau bis zur Fensterunterkante,
     die Fusszeile sitzt also weiterhin ganz unten. */
  body { min-height: calc(100vh / var(--zoom)); }
}

img { max-width: 100%; height: auto; border: 0; }
a   { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -.01em; }

:focus-visible {
  outline: 2.7px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 18px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ Logo */
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; height: 36px; width: auto; }
.brand:focus-visible { outline-offset: 3.6px; }

/* Symbolschalter im Fuss (Hell/Dunkel und Groesser/Kleiner) – ohne
   Umrandung, nur das Symbol. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 37.8px;
  height: 37.8px;
  padding: 0;
  font: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .2s ease, transform .12s ease;
}
.icon-btn:hover { color: var(--primary); }
.icon-btn:active { transform: translateY(1px); }
/* Endstufe erreicht: sichtbar, aber erkennbar ohne Funktion */
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn:disabled:hover { color: var(--text-muted); }
.icon-btn:disabled:active { transform: none; }
/* Klicks sollen immer den Button treffen, nie das Symbol darin */
.icon-btn svg { width: 19.8px; height: 19.8px; pointer-events: none; }

/* Alle drei Symbolschalter bilden eine Gruppe mit gleichmaessigem Abstand.
   2px zwischen den 37.8px breiten Schaltflaechen ergeben bei 19.8px Symbolgroesse
   ueberall dieselben 19.8px von Symbolmitte zu Symbolmitte – auch zwischen
   Hell/Dunkel und der Lupe. */
.schalter,
.zoomsteller {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Sonne im hellen, Mond im dunklen Theme */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}
/* Umbruchgrenzen mit dem Zoomfaktor .9 multipliziert (frueher 432px), damit
   sie beim gleichen Inhaltsplatz greifen wie vor der Verkleinerung. */
@media (max-width: 432px) {
  .brand img { height: 28.8px; }
}

/* ------------------------------------------------------------------ Main */
/* Inhalt senkrecht mittig zwischen Seitenoberkante und Fusszeile.
   flex-shrink bleibt 0: reicht der Platz nicht, waechst der Bereich mit dem
   Inhalt mit, statt ihn oben und unten abzuschneiden. Der Innenabstand ist
   dann der Mindestabstand.
   Oben steht bewusst derselbe Wert wie auf den Inhaltsseiten: sobald die Hoehe
   zum Zentrieren nicht mehr reicht, beginnt die Startseite damit exakt so weit
   oben wie Impressum & Co. Mit den frueheren 36px sprang die Suchleiste beim
   Verbreitern des Fensters nach oben, weil die Zentrierung dort wirkungslos
   wird und nur noch der Innenabstand zaehlt. */
.site-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--header-h) 36px;
}
/* Inhaltsseiten beginnen oben statt mittig. Der Abstand nach oben entspricht
   dem Abstand zwischen Suchleiste und Kacheln auf der Startseite. */
.layout-wide .site-main,
.layout-page .site-main {
  justify-content: flex-start;
  padding-top: var(--header-h);
}

/* Schmale Ansicht bis 810px – dieselbe Grenze, an der die Kacheln von vier auf
   zwei Spalten wechseln. Hier faellt beides zusammen:

   1. Die Startseite beginnt oben statt mittig, genau wie die Inhaltsseiten,
      auch dann, wenn der Inhalt auf einem hohen Schirm einmal ganz passt.
   2. Alle Abstaende ruecken auf 14.4px zusammen: die Kacheln untereinander und
      die Suchleiste ringsum. --header-h steuert dabei alle drei Stellen, an
      denen der Abstand um die Suchleiste entsteht: Innenabstand oben in
      .site-main, der Abstand zu den Kacheln und der zur Inhaltskarte der
      Unterseiten.

   Ab 810.9px wird zentriert und es gelten wieder die normalen Abstaende. */
@media (max-width: 900px) {
  :root {
    --kachel-abstand: 14.4px;
    --header-h: var(--kachel-abstand);
  }
  .site-main { justify-content: flex-start; }
}

.hero { text-align: center; margin-bottom: 36px; }
.hero h1 {
  font-size: clamp(1.75rem, 1.2rem + 1.98vw, 2.6rem);
  margin-bottom: 9px;
}
.hero p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.0625rem;
}

/* ----------------------------------------------------------- Suchformular */
/* Suchleiste: volle Rasterbreite, als flache Karte im Stil der Link-Kacheln */
.searchbar { width: 100%; margin: 0; }

/* Auf schmalen Inhaltsseiten buendig mit der Textkarte statt ueber die volle Rasterbreite */
.layout-page .searchbar { max-width: 774px; margin-inline: auto; }

.searchbar__field {
  /* Bezugsrahmen fuer die Vorschlagsliste, die als Kind hier drin haengt */
  position: relative;
  display: flex;
  /* zentriert statt gedehnt: die Lupe behaelt so ihre feste Groesse */
  align-items: center;
  gap: 0;
  padding: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* Der Schatten wechselt nicht mehr, darum steht er auch nicht mehr im
     Uebergang – es bleibt bei der Randfarbe. */
  transition: border-color .2s ease;
}
/* Beim Anklicken kein dicker Fokusring und kein staerkerer Schatten – nur die
   Randfarbe wechselt, und zwar auf dieselbe Farbe, die auch die Linkboxen
   beim Ueberfahren annehmen (.tile:hover). Das Token ist bereits
   themenabhaengig, hell und dunkel stimmen damit automatisch ueberein. */
.searchbar__field:focus-within {
  border-color: var(--border-strong);
}

/* Bei offener Vorschlagsliste waechst das Feld nach unten weiter:
   untere Ecken gerade, damit die Liste nahtlos anschliesst. */
.searchbar__field.is-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--border-strong);
  border-bottom-color: var(--border);
}

/* Quadratische Lupen-Kachel – nimmt die Formensprache der Kachel-Icons auf */
.searchbar input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6.3px 3.6px 6.3px 12.6px;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
}
.searchbar input[type="text"]::placeholder { color: var(--text-muted); opacity: 1; }
/* Das "X" von Chrome/Edge im Suchfeld unterdrücken */
.searchbar input::-webkit-search-cancel-button { display: none; }

/* Lupe rechts im Feld – loest die Suche aus (ersetzt den Websuche-Button).
   42x37.8px, also genau so gross wie der Hell/Dunkel-Schalter in der Fusszeile. */
.searchbar__go {
  display: inline-flex;
  align-items: center;
  gap: 7.2px;
  height: 37.8px;
  flex: none;
  margin-left: 10.8px;
  padding: 0 14.4px 0 10.8px;
  font: inherit;
  /* gleiche Groesse und Staerke wie .tile__title (Einkaufen, E-Mail usw.) */
  font-size: 1.1875rem;
  font-weight: 400;
  color: var(--sym-ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10.8px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
/* Beim Ueberfahren dieselbe Randfarbe, die auch das Suchfeld im Fokus annimmt
   (.searchbar__field:focus-within) – derselbe Token, damit hell und dunkel
   ohne zweite Pflegestelle uebereinstimmen. */
.searchbar__go:hover {
  background: var(--sym-bg-hover);
  border-color: var(--border-strong);
}
/* Steht der Cursor im Suchfeld, nimmt der Rand des Buttons dieselbe Farbe
   schon vorweg – Feldrahmen und Buttonrahmen sind dann einheitlich. Die
   Flaeche bleibt hell und wechselt erst beim tatsaechlichen Ueberfahren. */
.searchbar__field:focus-within .searchbar__go {
  border-color: var(--border-strong);
}
/* Klicks sollen immer den Button treffen, nie das Symbol darin.
   stroke-width hier statt im Markup, damit die Strichstaerke an einer Stelle
   justierbar bleibt. 1.6 bei 23.4px Anzeige (viewBox 24) ergibt rund 1.56px. */
.searchbar__go svg { width: 23.4px; height: 23.4px; stroke-width: 1.6; pointer-events: none; }

/* frueher 504px, siehe Hinweis zur Zoomkorrektur weiter oben */
@media (max-width: 504px) {
  .searchbar__go { margin-left: 9px; }
}

/* Autovervollständigung (jQuery UI): direkte Verlaengerung des Suchfelds,
   kein eigener Kasten – gleiche Breite, gleiche Kontur, ohne Abstand. */
.ui-autocomplete {
  position: absolute;
  /* Lage und Breite kommen aus dem CSS, nicht aus der JS-Positionierung von
     jQuery UI: die rechnet mit .offset() und liegt bei gesetztem CSS-zoom um
     den Zoomfaktor daneben. !important schlaegt die Inline-Werte, die
     jQuery UI trotzdem setzt.
     Bezugsrahmen ist die Polsterflaeche des Suchfelds, also innerhalb dessen
     1px-Rahmen. Die -1px bzw. +1px schieben die Liste auf die Aussenkante,
     damit ihre Seitenlinien genau die des Suchfelds fortsetzen. */
  top: calc(100% + 1px) !important;
  left: -1px !important;
  right: -1px;
  width: auto !important;
  z-index: 200;
  /* hoechstens 8 Eintraege (serverseitig begrenzt) – daher kein Scrollbalken */
  overflow: hidden;
  margin: 0;
  /* oben derselbe Wert wie unten, damit der erste Auswahlbalken genauso viel
     Luft zur Trennlinie hat wie der letzte zur unteren Kastenlinie */
  padding: 9px;
  list-style: none;
  background: var(--surface);
  /* dieselbe Randfarbe wie das Suchfeld im Fokus, sonst gaebe es an der
     Nahtstelle einen sichtbaren Farbsprung */
  border: 1px solid var(--border-strong);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.ui-autocomplete li { margin: 0; }
.ui-autocomplete li a {
  display: block;
  padding: 8.1px 12.6px;
  /* gleiche Schriftgroesse wie im Suchfeld; der Vorschlag steht fett */
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--suggest-text);
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-autocomplete li a:hover,
.ui-autocomplete li a.ui-state-focus,
.ui-autocomplete li a.ui-state-active {
  background: var(--hover-bg);
  color: var(--suggest-text);
}
/* Der bereits eingegebene Teil in derselben Farbe wie der Vorschlag –
   unterschieden wird nur ueber die Schriftstaerke (normal statt fett). */
.autocompelte-matching { font-weight: 400; color: var(--suggest-text); }
.ui-helper-hidden-accessible { display: none; }

/* ------------------------------------------------------------- Link-Kacheln */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--kachel-abstand);
  margin-top: var(--header-h);
}
/* frueher 900px bzw. 504px – mit dem Zoomfaktor .9 multipliziert */
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Einspaltig. Der engere Abstand kommt bereits aus der Mobilregel bei 518.4px. */
@media (max-width: 504px) { .tiles { grid-template-columns: 1fr; } }

.tile {
  display: flex;
  flex-direction: column;
  padding: 19.8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* Beim Ueberfahren aendert sich nur noch die Randfarbe – kein Schatten,
     der Kasten bleibt ruhig liegen. Der Schatten oben ist der Ruhezustand
     und wechselt nicht mehr, darum steht er auch nicht mehr im Uebergang. */
  transition: border-color .25s ease;
}
.tile:hover {
  border-color: var(--border-strong);
}

/* Rahmen umschliesst Symbol und Text und laeuft bis zum rechten Innenrand
   der Kachel durch.
   Linker Innenabstand 7.2px: 1px Rahmen + 7.2px + halbe Symbolbreite 12.6px = 20.7px
   = halbe Breite der alten Symbolflaeche, dadurch steht das Symbol weiterhin
   auf derselben Mittelachse wie die Marken-Favicons darunter. */
.tile__head {
  display: flex;
  align-items: center;
  /* 8.1px statt 10.8px: damit beginnt die Ueberschrift auf derselben Senkrechten
     wie die Linktexte darunter (Symbol endet bei 54px + 8.1px = 62.1px,
     Favicon endet bei 53.1px + 9px Abstand = 62.1px). */
  gap: 8.1px;
  padding: 7.2px 14.4px 7.2px 7.2px;
  margin-bottom: 18px;
  color: var(--sym-ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 11.7px;
  transition: border-color .25s ease;
}
/* Beim Ueberfahren der Kachel wechselt der Rahmen der Ueberschrift auf
   dieselbe Farbe wie der Kachelrahmen. */
.tile:hover .tile__head { border-color: var(--border-strong); }
/* Rahmen und Flaeche liegen jetzt am umschliessenden .tile__head */
.tile__icon {
  display: grid;
  place-items: center;
  flex: none;
}
/* stroke-width hier statt im Markup, damit die Strichstaerke an einer
   Stelle justierbar bleibt. 1.3 bei 25.2px Anzeige (viewBox 24) entspricht
   rund 1.37px Strich – etwas duenner als die 1.56px der Lupe. */
.tile__icon svg { width: 25.2px; height: 25.2px; stroke-width: 1.3; }
/* In beiden Themes in der Symbolfarbe, also identisch mit dem Wort "Suchen"
   im Suchfeld. */
.tile__title { font-size: 1.1875rem; font-weight: 400; color: var(--tile-title); }

.tile ul { margin: 0; padding: 0; list-style: none; }
.tile li + li { margin-top: 1px; }

.tile li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  /* links 1px weniger als rechts: Favicon und Text ruecken im
     Mouse-Over-Feld einen Pixel nach links.
     Linkwert 9px + halbe Favicon-Breite 11.7px = 20.7px = halbe Symbolbreite,
     dadurch stehen Favicons und Kopfsymbol auf derselben Mittelachse. */
  padding: 5.4px 9.9px 5.4px 9px;
  font-size: .9375rem;
  font-weight: 400;
  color: var(--text);
  /* Rundung fuer den innenliegenden Tastatur-Fokusring weiter unten */
  border-radius: 9px;
}
/* Marken-Favicon vor dem Linktext */
.tile__logo {
  width: 23.4px;
  height: 23.4px;
  flex: none;
  object-fit: contain;
  border-radius: 4.5px;
  /* helle Unterlage, damit auch dunkle Logos im Dark Mode lesbar bleiben.
     Achtung: viele Favicons sind transparent – die Hintergrundfarbe darf
     nicht umgefaerbt werden, sonst faerbt sich das ganze Icon ein. */
  background: #FFFFFF;
  /* Ring als outline statt box-shadow: Rahmen- und Umrissbreiten rastet der
     Browser auf ganze Geraetepixel, den Spread eines box-shadow dagegen nicht.
     Bei Zoomstufen wie 90% landet ein 1px-Ring dann auf 0.9 Geraetepixeln an
     krummen Koordinaten – einzelne Kanten wurden dadurch blass oder fielen
     ganz weg (z. B. bei T-Online). */
  outline: 1px solid var(--logo-ring);
  outline-offset: 0;
  padding: 1px;
}

/* Beim Ueberfahren wird nur der Linktext unterstrichen – kein Hintergrund,
   keine andere Schriftfarbe, kein Ring um das Markensymbol. Das Symbol ist
   ein Bild und wird von text-decoration nicht erfasst, die Linie laeuft also
   nur unter dem Text.
   Position "under" statt eines Abstands zur Grundlinie: Firefox misst
   text-underline-offset ab der Grundlinie, Chrome und Edge ab der
   Unterstrich-Position der Schrift. Mit 2.7px lag die Linie in Firefox
   deshalb mitten in den Unterlaengen von p, g und y. "under" setzt sie in
   allen Browsern unter die Unterlaengen, 1px Luft ergibt dasselbe Bild wie
   bisher in Chrome und Edge. */
.tile li a:hover,
.tile li a:focus-visible {
  text-decoration: underline;
  text-underline-position: under;
  text-underline-offset: 1px;
}
/* Firefox setzt :focus-visible auch nach einem Mausklick auf einen Link,
   Chrome nur bei Tastaturbedienung – dort faellt das deshalb nicht auf.
   Der globale Fokusring ragt nach aussen, die Zeilen liegen aber nur 1px
   auseinander: er wuerde die Nachbarzeile ueberdecken.

   Ein nach innen gezogener outline reicht dafuer nicht: unter dem CSS-zoom
   rastet die Ringbreite auf ganze Geraetepixel, der negative Abstand wird
   dagegen mitskaliert (bei 90%: 2px Breite gerastet, aber nur 1.8px Versatz).
   Die Differenz ragt heraus – bei 100% faellt sie weg, darum trat es nur in
   Zoomstufen auf.

   Ein innenliegender Schatten wird dagegen am Rand der Zeile abgeschnitten und
   kann sie grundsaetzlich nicht verlassen – unabhaengig von Zoomstufe und
   Browser. Der durchsichtige outline bleibt stehen, damit in den
   Kontrastmodi des Betriebssystems weiterhin ein Fokusrahmen entsteht; dort
   werden Schatten nicht gezeichnet. */
.tile li a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 2px var(--ring);
}

/* ------------------------------------------------------- Inhaltsseiten */
/* Der kleinste Wert der Formel entspricht dem oberen Innenabstand. Dadurch
   faellt die Seite auf schmalen Schirmen nicht mehr unter diesen Wert – frueher
   schrumpfte sie ueber die vw-Angabe bis auf 18px, waehrend oben unveraendert
   32.4px standen. Eine eigene Medienabfrage braucht es dafuer nicht. */
.page {
  max-width: 774px;
  margin: var(--header-h) auto 0;
  padding: 25.2px clamp(25.2px, 2.7vw, 34.2px) 30.6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Inhaltsseiten ueber die volle Rasterbreite – wie die Kachelreihe */
.layout-wide .page {
  max-width: none;
  padding: 27px clamp(27px, 2.34vw, 37.8px) 32.4px;
}

/* 21.6px unten = derselbe Wert wie der Abstand des Rueckwaerts-Links darueber,
   damit die Ueberschrift oben und unten gleich viel Luft hat. */
.page__title {
  font-size: clamp(1.5rem, 1.1rem + 1.44vw, 2rem);
  margin-bottom: 21.6px;
}

.prose { color: var(--text); }
.prose p { margin: 0 0 1.05em; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.25rem; margin: 2em 0 .6em; }
.prose h3 { font-size: 1.0625rem; margin: 1.6em 0 .5em; }
.prose strong, .prose b { font-weight: 700; color: var(--text); }
.prose a { text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.prose ul, .prose ol { margin: 0 0 1.05em; padding-left: 1.4em; }
.prose li { margin-bottom: .35em; }
/* Alte Inline-Schriftgrößen der Bestandstexte neutralisieren */
.prose [style*="font-size"] { font-size: inherit !important; }
.prose font { font-size: inherit !important; font-family: inherit !important; }

/* Eingebettete Inhalte (z. B. das Matomo-Opt-Out mit fester 630px-Breite im
   Bestandstext) auf die Spaltenbreite zwingen, sonst laeuft die Seite ueber. */
.prose iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
  border-radius: var(--radius);
  background: #FFFFFF;
}

/* Visitenkarten-Block im Impressum */
.factcard {
  padding: 18px 19.8px;
  margin-bottom: 19.8px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-left: 2.7px solid var(--accent);
  border-radius: var(--radius);
}
/* Erstes/letztes Element buendig am Kasteninnenrand – gilt fuer Absaetze,
   Ueberschriften und Listen gleichermassen. Spezifitaet bewusst ueber
   .prose ol / .prose .steps, damit deren Aussenabstaende hier nicht greifen. */
.prose .factcard > :first-child { margin-top: 0; }
.prose .factcard > :last-child  { margin-bottom: 0; }

/* .prose ol setzt padding-left – hier bewusst wieder auf 0, damit die
   Nummernkreise buendig mit dem Fliesstext stehen. */
.steps, .prose .steps { margin: 0 0 1.05em; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  position: relative;
  padding: 9px 0 9px 39.6px;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 9px;
  display: grid;
  place-items: center;
  width: 25.2px; height: 25.2px;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--chip-ink);
  background: var(--chip-bg);
  border-radius: 50%;
}

.note {
  padding: 12.6px 16.2px;
  margin-top: 18px;
  font-size: .9375rem;
  color: var(--text-muted);
  background: var(--accent-soft);
  border-radius: var(--radius);
}

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 7.2px;
  /* etwas Luft ueber dem Rueckwaerts-Link, zusaetzlich zum Innenabstand der
     Karte – er sass sonst sehr dicht unter der Oberkante */
  margin-top: 5.4px;
  margin-bottom: 21.6px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-muted);
}
.backlink:hover { color: var(--primary); }
.backlink svg { width: 14.4px; height: 14.4px; }

/* ---------------------------------------------------------------- Footer */
.site-footer {
  flex: none;
  padding-block: 14.4px;
  border-top: 1px solid var(--border);
  background: var(--header-bg);
}
/* Schalter und Links bilden rechts eine Gruppe, damit der Schalter direkt
   vor "Impressum" steht und nicht in die Mitte rutscht. */
.site-footer__ende {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10.8px 21.6px;
  /* volle Fensterbreite: Logo aussen links, Links aussen rechts */
  max-width: none;
  font-size: .875rem;
  color: var(--text-muted);
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7.2px 18px;
  margin: 0; padding: 0;
  list-style: none;
}
.site-footer a { color: var(--text-muted); }
/* Unterstrich unter den Unterlaengen wie bei den Markenlinks – mit einem
   Abstand zur Grundlinie laeuft er in Firefox durch p und g
   (Impressum, Datenschutzerklaerung). */
.site-footer a:hover { color: var(--primary); text-decoration: underline; text-underline-position: under; text-underline-offset: 1px; }

/* Schmale Ansicht: erste Zeile Logo, Hell/Dunkel und Groesser/Kleiner,
   zweite Zeile die Links.
   Die Grenze liegt bei 630px, weil die einzeilige Fusszeile rund 625.5px
   braucht (Logo 172 + Gruppe 465 + Abstaende). Darunter wuerde sie von selbst
   umbrechen und die Gruppe linksbuendig unter das Logo rutschen – dieser
   Aufbau hier ist die gewollte Variante davon.
   "display: contents" loest die Gruppe .site-footer__ende auf, damit Schalter
   und Liste zu direkten Kindern der Fusszeile werden – nur dann laesst sich
   die Liste einzeln in die naechste Zeile schicken, waehrend die Schalter
   neben dem Logo bleiben. */
@media (max-width: 700px) {
  .site-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 12.6px;
    row-gap: 10.8px;
  }
  .site-footer__ende { display: contents; }
  /* Der Selektor bleibt am DOM-Elternteil: "display: contents" aendert nur die
     Kastenbildung, nicht den Baum, auf den die Selektoren zugreifen. */
  .site-footer__ende > ul { flex-basis: 100%; }
}

/* ----------------------------------------------------------------- Sonstiges */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  /* Ausdruck immer in Originalgroesse, unabhaengig von der am Bildschirm
     gewaehlten Seitengroesse – sonst schrumpft die Schrift auf dem Papier. */
  html { zoom: 1; }
  .site-footer, .searchbar, .backlink { display: none !important; }
  body { background: #fff; color: #000; }
  .page { border: 0; box-shadow: none; padding: 0; max-width: none; }
}