/*
Theme Name: Optik Klein
Theme URI: https://www.optik-klein.de/
Description: Schlankes Theme fuer Optik Klein Saarbruecken. Loest den Divi-Baukasten ab. Schriften lokal eingebettet, keine externen Aufrufe.
Author: Optik Klein
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: optik-klein
*/

/* ---------------------------------------------------------------- Schriften
   Lokal eingebettet. Kein Aufruf an fonts.googleapis.com oder gstatic.com -
   damit verlaesst keine IP-Adresse der Besucher den Server (LG Muenchen I,
   Urteil vom 20.01.2022, Az. 3 O 17493/20).
   Beide Familien sind variabel: eine Datei deckt alle Gewichte ab.
   ========================================================================== */

@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/fraunces-italic-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;
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/fraunces-italic-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:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/fraunces-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;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/fraunces-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:'Public Sans';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/public-sans-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;
}
@font-face{
  font-family:'Public Sans';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(fonts/public-sans-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;
}

/* ==========================================================================
   Optik Klein — Design-System
   Wird spaeter zu optik-klein-theme/style.css
   Aufbau nach dem Vorbild familiennetzwerk-saar.de, uebersetzt in die
   Firmenfarben von Optik Klein (Logo-Gruen #4CB050).
   ========================================================================== */

:root{
  /* Flaechen — Tiefgruen-Schwarz statt reinem Schwarz, weniger hart fuers Auge */
  --bg:           #141C18;
  --surface:      #1C2620;
  --surface-tint: #22302A;

  /* Schrift — Off-White statt reinem Weiss, senkt die Blendung */
  --ink:          #ECEFEA;
  --ink-soft:     #AFBCB3;

  /* Marke */
  --primary:      #4CB050;   /* Logo-Gruen */
  --primary-deep: #6FD073;   /* Hover und Links auf dunklem Grund */
  --primary-glow: rgba(76,176,80,.28);

  /* Akzent — ausschliesslich fuer Aktionen und Angebote */
  --accent:       #E8A65C;
  --accent-soft:  #3A3123;

  /* Lichtkasten — die einzige helle Flaeche der Seite. Bewusst nur an einer
     Stelle: der Sehtafel im Hero. Ein Optiker-Laden hat genau einen solchen
     Leuchtkasten, und der zieht den Blick. */
  --panel:        #EEF2EC;
  --panel-ink:    #131C17;
  --panel-line:   #D2DBD1;
  --panel-green:  #2E7A33;   /* auf Weiss dunkel genug fuer 4,5:1 */

  --line:         #2F3D36;
  --radius:       14px;
  --radius-lg:    22px;

  /* Abstands-Stufen. Vorher stand ueberall eine eigene Zahl - dadurch hatten
     wichtige und beilaeufige Abschnitte exakt denselben Rhythmus. */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px;
  --sp-4: 40px; --sp-5: 64px; --sp-6: 96px;

  --sans:  "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", ui-serif, Georgia, serif;

  /* Entschieden am 22.08.2026: Serif fuer Ueberschriften (Variante A) */
  --display: var(--serif);

  --wrap: 1080px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* Kein Text darf je aus seinem Kasten laufen.
   Wichtig wegen deutscher Komposita ("Kindermyopie-Management") und weil
   Android die Systemschrift skalieren kann - dann wird jede feste
   Schriftgroesse zu gross fuer ihre Box.

   BEWUSST OHNE hyphens:auto - die deutsche Silbentrennung zerlegt sonst
   auch kurze Woerter ("Se-hen", "ei-nem"), was in grossen Ueberschriften
   furchtbar aussieht. overflow-wrap greift nur als Notfall, wenn ein Wort
   wirklich breiter als seine Box ist. */
body, h1, h2, h3, p, li, b, span, a, summary, blockquote, cite{
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Grid- und Flex-Kinder duerfen schrumpfen, sonst sprengen lange Woerter
   die Spalte statt umzubrechen. */
.grid > *, .stats > *, .steps > *, .reviews > *, .foot-grid > *, .page-layout > *{
  min-width: 0;
}

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;              /* nicht kleiner — Zielgruppe mit Sehschwaechen */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
a{ color: inherit; }

/* Fraunces ist eine variable Schrift mit optischer Achse (opsz 9–144).
   Genau dafuer ist sie gemacht: Grosse Groessen bekommen feinere Haarstriche
   und engere Abstaende, kleine Groessen kraeftigere. Ohne diese Achse sieht
   eine 4rem-Ueberschrift aus wie eine hochskalierte 1rem-Ueberschrift -
   das ist der Unterschied, den man nicht benennen kann, aber sieht. */
h1,h2,h3{
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  font-optical-sizing: auto;
}
h1{
  font-size: clamp(2.4rem, 5.6vw, 3.9rem);
  line-height: 1.04; letter-spacing: -0.028em;
  font-variation-settings: "opsz" 144;
}
h2{
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.1; letter-spacing: -0.02em;
  font-variation-settings: "opsz" 96;
}
h3{
  font-size: clamp(1.18rem, 2vw, 1.3rem);
  line-height: 1.28; letter-spacing: -0.004em;
  font-variation-settings: "opsz" 24;
}

p{ margin: 0 0 1.1em; color: var(--ink-soft); }
p.lead{
  font-size: clamp(1.08rem, 1.6vw, 1.2rem);
  line-height: 1.55; color: var(--ink-soft); max-width: 56ch;
}

.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* Barrierefreiheit: Fokus muss immer sichtbar sein */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position:absolute; left:-9999px;
  background: var(--primary); color:#0B120E;
  padding:12px 20px; border-radius:0 0 var(--radius) 0;
  font-weight:700; z-index:100;
}
.skip-link:focus{ left:0; top:0; }

/* ---------------------------------------------------------------- Bausteine */

/* Der kurze Strich vor dem Eyebrow ist kein Zierrat: Er markiert den Anfang
   eines Abschnitts und wiederholt die Linien der Sehtafel-Spalte. */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}
.eyebrow::before{
  content:""; flex:none;
  width:22px; height:2px; background: currentColor; opacity:.65;
}

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding: 13px 26px;
  border-radius: 9999px;          /* Pille, wie im Vorbild */
  font-weight: 700; font-size: 1rem;
  text-decoration:none; border:1px solid transparent;
  cursor:pointer;
  transition: background .15s ease, transform .15s ease,
              border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn-primary{ background: var(--primary); color:#0B120E; }
.btn-primary:hover{
  background: var(--primary-deep);
  box-shadow: 0 12px 26px -14px rgba(76,176,80,.9);
}

.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--primary); color: var(--primary-deep); }

.arrow-link{
  display:inline-flex; align-items:center; gap:.4em;
  color: var(--primary-deep); font-weight:600; text-decoration:none;
  font-size:.95rem;
  /* Trefferflaeche auf 44px bringen, ohne das Aussehen zu aendern.
     Der negative Rand gleicht die Polsterung im Layout wieder aus. */
  min-height: 44px; padding: 10px 0; margin: -10px 0;
}
.arrow-link span{ transition: transform .15s ease; }
.arrow-link:hover span{ transform: translateX(4px); }

/* ------------------------------------------------------------------- Header */

.site-header{
  position: sticky; top:0; z-index:20;
  background: rgba(20,28,24,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Das Element traegt beide Klassen: <div class="wrap nav">.
   ".wrap" setzt "padding: 0 28px", ".nav" stand hier frueher auf
   "padding: 14px 0" - und weil beide Ein-Klassen-Selektoren sind, gewinnt der
   spaetere. Der Kopf hatte damit gar keinen seitlichen Abstand und klebte
   unterhalb von rund 1136 px am Bildschirmrand, waehrend der Inhalt darunter
   ordentlich 28 px einrueckte. Darueber faellt es nicht auf, weil max-width
   die Zeile ohnehin zentriert.
   Die 28 px stehen deshalb jetzt ausgeschrieben - Kopf und Inhalt fluchten. */
.nav{
  display:flex; align-items:center; gap:26px;
  padding: 14px 28px;
}
/* Wortmarke und Slogan stehen uebereinander, deshalb eine Spalte.
   justify-content:center haelt den Block mittig, wenn die Kopfzeile - etwa
   wegen des groesseren Termin-Knopfs - hoeher ist als der Text selbst. */
.brand{
  /* Die Groesse der Wortmarke steht hier und nicht in .wordmark, weil der
     Slogan sie ebenfalls braucht: Sein Einzug richtet sich nach der Breite
     des "O" und muss deshalb mit derselben Zahl rechnen. */
  --wm-groesse: clamp(1.55rem, 1.2rem + 1.6vw, 2.05rem);

  display:flex; flex-direction:column; justify-content:center;
  /* gap: 0 - der Slogan sitzt dicht unter der Wortmarke. Der sichtbare
     Abstand betraegt dann noch 4,1 px bei 32,8 px Wortmarke (vorher 8,1 px):
     Er entsteht aus den Unterlaengen-Reserven der beiden Zeilenboxen und
     waechst dadurch von selbst mit der Schriftgroesse mit. */
  align-items:flex-start; gap: 0;
  text-decoration:none; margin-right:auto;
  min-height: 44px;   /* bequem antippbar */
}
.brand img{ height: 34px; width:auto; }

/* 20px statt 26: Mit dem sechsten Menuepunkt "Ratgeber" brauchte die Zeile
   1029 von 1024 verfuegbaren Pixeln - funf zu viel. Die Folge war kein
   Ueberlauf, sondern ein zweizeiliges "Termin buchen". Sechs Abstaende mal
   sechs Pixel bringen 36 zurueck, damit passt es mit Luft. */
.nav-links{ display:flex; align-items:center; gap:20px; }
.nav-links a{
  text-decoration:none; font-size:.95rem; font-weight:500;
  color: var(--ink-soft);
  transition: color .15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--ink); }

/* Der Termin-Knopf im Kopf ist ein Link IM Menue - und ".nav-links a" ist
   spezifischer als ".btn-primary". Ohne diese Zeile erbt er das Grau der
   Menuepunkte und steht blass auf der Markenflaeche. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover{ color: #0B120E; }

/* "Startseite" nur im Handy-Menue - auf dem Desktop uebernimmt das Logo */
.nav-home{ display: none; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line);
  border-radius:10px; padding:8px 14px; color:var(--ink); cursor:pointer;
  min-height: 44px; font-family: inherit; font-size:.95rem;
}

/* --------------------------------------------------------------- Suchfeld

   Fortschrittliche Verbesserung, gleiche Konvention wie beim Einblenden:
   Ohne JavaScript traegt <html> keine Klasse "js". Dann steht das Suchfeld
   offen und die Lupe ist ausgeblendet - sie haette nichts zu klappen.
   Mit JavaScript kehrt sich das um. */

.search-toggle{
  display: none;                    /* ohne JS unsichtbar, siehe oben */
  align-items:center; gap:.5em;
  background:none; border:1px solid var(--line); border-radius:9999px;
  padding: 8px 16px; color: var(--ink-soft); cursor:pointer;
  min-height: 44px; font-family: inherit; font-size:.95rem;
  transition: color .15s ease, border-color .15s ease;
}
.js .search-toggle{ display:inline-flex; }
.search-toggle:hover{ color: var(--ink); border-color: var(--primary); }
.search-toggle svg{ width:19px; height:19px; flex:none; }
.search-toggle[aria-expanded="true"]{ color: var(--ink); border-color: var(--primary); }

.site-search{
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: var(--sp-3) 0;
}
.js .site-search{ display:none; }
.js .site-search.open{ display:block; }

.site-search label{
  display:block; margin-bottom: 8px;
  font-size:.85rem; font-weight:600; color: var(--ink-soft);
}

/* Feld und Knopf teilen sich eine Zeile. Der Knopf behaelt seine Breite,
   das Feld nimmt den Rest - deshalb 1fr auto statt flex mit Prozenten. */
.search-row{ display:grid; grid-template-columns: 1fr auto; gap: 10px; }

.search-row input[type="search"]{
  height: 46px;                     /* wie die Felder im Buchungsformular */
  padding: 0 20px;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit; font-size: 1rem;
  width: 100%;
  -webkit-appearance: none; appearance: none;
}
.search-row input[type="search"]::placeholder{ color: var(--ink-soft); }
.search-row input[type="search"]:focus{ border-color: var(--primary); }
.search-row .btn{ padding: 0 26px; height: 46px; }

/* ------------------------------------------------------- Suchergebnisse */

.such-formular{
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.such-formular label{
  display:block; margin-bottom: 8px;
  font-size:.85rem; font-weight:600; color: var(--ink-soft);
}

.such-treffer{ list-style:none; margin:0; padding:0; }
.such-treffer .treffer{
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.such-treffer .treffer:first-child{ padding-top: 0; }

.treffer h2{
  font-size: 1.3rem; margin: 0 0 4px;
}
.treffer h2 a{ text-decoration:none; }
.treffer h2 a:hover{ text-decoration:underline; }

/* Die Adresse macht sichtbar, wo der Treffer liegt - hilfreich, wenn zwei
   Ueberschriften aehnlich heissen (Retinopathie / Diabetische Retinopathie). */
.treffer-pfad{
  font-size:.85rem; color: var(--primary-deep);
  margin: 0 0 8px; font-family: var(--sans);
}
.treffer-auszug{ margin: 0; color: var(--ink-soft); }

/* Gelb auf Dunkelgruen waere grell und der Text darauf schlecht lesbar.
   Stattdessen die Flaeche leicht in Akzentfarbe tuepfeln und die Schrift
   hell lassen - der Kontrast bleibt der des normalen Fliesstextes. */
.treffer-auszug mark{
  background: rgba(232,166,92,.22);
  color: var(--ink);
  font-weight: 600;
  padding: .1em .15em;
  border-radius: 3px;
}

.such-leer{ }
.such-vorschlaege{ margin: 0 0 var(--sp-3); }
.such-vorschlaege li{ margin-bottom: 6px; }

/* --------------------------------------------------------------------- Hero */

.hero{ position:relative; padding: var(--sp-6) 0 var(--sp-5); }

/* Licht faellt von oben links ein - der einzige Farbverlauf der Seite.
   Sehr schwach gehalten: Er soll Atmosphaere machen, nicht auffallen. */
.hero::before{
  content:""; position:absolute; z-index:0;
  left:0; right:0; top:-140px; height:620px;
  background: radial-gradient(58% 62% at 24% 12%, rgba(76,176,80,.18), transparent 70%);
  pointer-events:none;
}
.hero > .wrap{ position:relative; z-index:1; }

.hero-grid{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,var(--chart-col, 400px));
  gap: var(--sp-5); align-items:center;
}
.hero h1{ max-width: 15ch; margin-bottom: 20px; }
.hero h1 em{
  font-style: italic;
  color: var(--primary-deep);
}
.hero .lead{ margin-bottom: 28px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ============================================================== Sehtafel ===
   Das Erkennungszeichen der Startseite. Aufgebaut wie die Tafel an der Wand
   im Refraktionsraum: Visus-Spalte links, Zeilen werden nach unten kleiner.
   Die unterste Zeile - die, an der sich alles entscheidet - buchstabiert
   KLEIN und ist als einzige gruen und gestochen scharf.

   Rein deklarativ als Text, nicht als Bild: Es bleibt bei jeder Zoomstufe
   scharf, wiegt nichts und ist fuer Vorleseprogramme sauber ausgeblendet.
   ========================================================================== */

.chart{
  margin:0;
  /* Leichter Verlauf von oben: Der Kasten leuchtet, statt nur weiss zu sein. */
  background: linear-gradient(178deg, #F6F9F5 0%, var(--panel) 62%, #E4EAE2 100%);
  color: var(--panel-ink);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 32px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.75),
              0 0 0 1px var(--panel-line) inset,
              0 0 70px -30px var(--primary-glow);
  /* Eine Stellschraube fuer die ganze Tafel: alle Zeilen rechnen in em. */
  font-size: clamp(.8rem, 1.9vw, 1.05rem);
  font-weight: 800;
  line-height: 1;
}
.chart-row{
  display:grid; grid-template-columns: 3.4em 1fr;
  align-items:center; gap: 1.4em;
  padding: .55em 0;
  border-bottom: 1px solid var(--panel-line);
}
.chart-row:last-child{ border-bottom:0; padding-bottom:.2em; }
.chart-visus{
  font-size: 1.05em; font-weight:600;
  font-variant-numeric: tabular-nums;
  color: #5F6D64; letter-spacing:.02em;   /* 4,8:1 auf dem Panel */
}
/* Zeilen mittig, wie auf der Tafel im Refraktionsraum. Der negative rechte
   Rand nimmt den Abstand hinter dem letzten Buchstaben wieder heraus -
   sonst sitzt die Zeile sichtbar zu weit links. */
.chart-letters{
  display:block; text-align:center;
  letter-spacing:.34em; margin-right:-.34em; white-space:nowrap;
}
/* Der Sprung von Zeile zu Zeile ist derselbe wie auf einer echten Tafel:
   jede Stufe rund ein Drittel kleiner. */
.chart-r1 .chart-letters{ font-size: 5.4em; letter-spacing:0; margin-right:0; }
.chart-r2 .chart-letters{ font-size: 3.6em; letter-spacing:.2em; margin-right:-.2em; }
.chart-r3 .chart-letters{ font-size: 2.4em; letter-spacing:.26em; margin-right:-.26em; }
.chart-r4 .chart-letters{ font-size: 1.55em; }
.chart-r5 .chart-letters{ font-size: 1.05em; color: var(--panel-green); }

/* Die letzte Zeile stellt sich beim Laden einmal scharf. Genau eine
   Bewegung auf der ganzen Seite, und sie bedeutet etwas. */
@media (prefers-reduced-motion: no-preference){
  html.js .chart-r5 .chart-letters{
    animation: scharfstellen 1.1s cubic-bezier(.2,.7,.3,1) .35s backwards;
  }
}
@keyframes scharfstellen{
  from{ filter: blur(5px); opacity:.25; letter-spacing:.5em; }
  to  { filter: blur(0);   opacity:1;   letter-spacing:.34em; }
}

/* Kennzahlen-Leiste direkt unter dem Hero */
.stats{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px; background: var(--line);
  border:1px solid var(--line); border-radius: var(--radius-lg);
  overflow:hidden; margin-top: var(--sp-5);
}
.stat{ background: var(--surface); padding: 26px 24px; min-width: 0; }
.stat b{
  display:block; font-family: var(--display);
  /* Fluid statt fest: waechst mit der Breite, bleibt aber auf schmalen
     Geraeten klein genug. Feste 1.7rem hatten bei 412px nur 1px Luft und
     wurden abgeschnitten, sobald Android die Systemschrift hochskaliert. */
  font-size: clamp(1.25rem, 5.2vw, 1.7rem);
  font-weight:600; color: var(--ink);
  line-height:1.15; margin-bottom:6px;
}
.stat span{ font-size:.9rem; color: var(--ink-soft); }

/* Zweite Zahlenleiste auf derselben Seite darf nicht wie die erste aussehen -
   sonst schwaecht sie die erste ab. Diese Variante ist nur eine Reihe von
   Messwerten unter Trennstrichen, ohne Kasten. */
.stats-quiet{
  background:none; border:0; border-radius:0;
  gap: 0 var(--sp-4); overflow:visible;
}
.stats-quiet .stat{
  background:none; padding: 20px 0 0;
  border-top: 2px solid var(--primary);
}
.stats-quiet .stat + .stat{ border-top-color: var(--line); }
.stats-quiet .stat b{ font-size: clamp(1.1rem, 3.4vw, 1.35rem); }

/* ---------------------------------------------------------------- Sektionen */

/* Rhythmus statt einer festen Zahl: Auf kleinen Geraeten enger, auf grossen
   grosszuegiger - und wichtige Abschnitte duerfen mehr Luft holen. */
section{ padding: clamp(56px, 7vw, 92px) 0; }
section.tint{ background: var(--surface); }

/* Sprungziele nicht unter der klebenden Kopfzeile parken.
   Die Kopfzeile ist rund 66px hoch, plus etwas Luft. */
[id]{ scroll-margin-top: 88px; }

.sec-head{ max-width: 62ch; margin-bottom: 42px; }
.sec-head h2{ margin-bottom: 16px; }

/* Karten-Gitter

   auto-fit + minmax statt fester Spaltenzahl: Das Raster richtet sich nach
   dem tatsaechlich verfuegbaren Platz, nicht nach der gemeldeten Fenster-
   breite. Dadurch bricht es auch dann korrekt um, wenn der Browser eine
   falsche Breite meldet - etwa im Modus "Desktop-Website" auf dem Handy.

   min(100%, 260px) sorgt dafuer, dass eine Karte nie schmaler als 260px wird,
   ausser der Container selbst ist schmaler. Ohne das entstehen Spalten, in
   denen jedes Wort auf einer eigenen Zeile steht. */
.grid{ display:grid; gap: 20px; }
.grid-2{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.card{
  background: var(--surface-tint);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display:flex; flex-direction:column;
  /* Eine Kachel ist eine Flaeche, kein Fliesstext: Der Mauszeiger bleibt
     ein Pfeil statt zum Text-Strich zu werden. Adressen und Oeffnungszeiten
     in den Kacheln lassen sich trotzdem markieren und kopieren. */
  cursor: default;
  transition: border-color .2s ease, transform .2s ease,
              box-shadow .2s ease, background-color .2s ease;
}
section.tint .card{ background: var(--bg); }

/* Anheben plus dezentes Neon-Gruen: das Leuchten liegt im Schatten,
   die Flaeche selbst bekommt nur einen Hauch Gruenstich. Kein Farbwechsel
   am Text, damit der Kontrast erhalten bleibt. */
.card:hover{
  border-color: var(--primary);
  transform: translateY(-6px);
  background-color: #26352B;
  box-shadow: 0 14px 30px -14px rgba(76,176,80,.55),
              0 0 22px -8px rgba(76,176,80,.40);
}
section.tint .card:hover{ background-color: #1B2620; }

/* Karten, die per Tastatur erreichbar sind, zeigen dasselbe Bild. */
.card:focus-within{
  border-color: var(--primary);
  box-shadow: 0 0 22px -8px rgba(76,176,80,.40);
}
/* Ueberschrift und Pfeil-Link sind Ziele, keine Textstellen - beim Zielen
   auf den Link soll nicht versehentlich die Zeile blau werden. */
.card h3, .card .arrow-link{ -webkit-user-select:none; user-select:none; }
.card p{ cursor: text; }

.card h3{ margin-bottom: 10px; }
.card p{ font-size:.97rem; margin-bottom: 18px; }
.card .arrow-link{ margin-top:auto; }

.card-icon{
  width:44px; height:44px; border-radius:12px;
  background: var(--primary-glow);
  display:grid; place-items:center;
  margin-bottom:18px;
}
.card-icon svg{ width:22px; height:22px; stroke: var(--primary-deep); }

/* Nummerierter Ablauf 01–04 */
.steps{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 26px; }
.step{ border-top: 2px solid var(--line); padding-top: 20px; }
/* Der erste Schritt bekommt die Markenfarbe auf die Linie: Das Auge findet
   den Anfang der Reihenfolge, ohne dass wir es dazuschreiben muessen. */
.step:first-child{ border-top-color: var(--primary); }
.step b{
  display:block; font-family: var(--display);
  font-size: 1.05rem; color: var(--primary);
  font-variant-numeric: tabular-nums;
  letter-spacing:.08em; margin-bottom: 12px;
}
.step h3{ font-size:1.1rem; margin-bottom:8px; }
.step p{ font-size:.93rem; margin:0; }

/* Bewertungen */
.reviews{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:20px; }
.review{
  background: var(--surface-tint); border:1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
section.tint .review{ background: var(--bg); }
.review .stars{ color: var(--accent); letter-spacing:.15em; margin-bottom:14px; font-size:.95rem; }
.review blockquote{ margin:0 0 16px; font-size:1rem; color: var(--ink); line-height:1.6; }
/* Deutsche Anfuehrung, gesetzt statt getippt - und in der Markenfarbe. */
.review blockquote::before{ content:"„"; color: var(--primary); }
.review blockquote::after{ content:"“"; color: var(--primary); }
.review cite{ font-style:normal; font-size:.88rem; color: var(--ink-soft); }

/* Angebots-Karte — verschwindet nach Fristablauf automatisch */
.offer{
  background: var(--accent-soft);
  border:1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 38px 40px;
  display:flex; align-items:center; gap:36px; flex-wrap:wrap;
}
.offer .eyebrow{ color: var(--accent); }
.offer-body{ flex:1 1 420px; }
.offer h2{ font-size: clamp(1.6rem,3vw,2.1rem); margin-bottom:12px; }
.offer p{ margin-bottom:0; }
.offer .valid{ font-size:.85rem; color: var(--ink-soft); margin-top:14px; }

/* CTA-Band */
.cta-band{
  background: linear-gradient(135deg, var(--primary) 0%, #3E9442 100%);
  border-radius: var(--radius-lg);
  padding: 52px 44px;
  text-align:center; color:#0B120E;
}
.cta-band h2{ color:#0B120E; margin-bottom:14px; }
.cta-band p{ color: rgba(11,18,14,.78); max-width:52ch; margin:0 auto 26px; }
.cta-band .btn{ background:#0B120E; color: var(--ink); }
.cta-band .btn:hover{ background:#16211B; }

/* FAQ — Akkordeon ohne JavaScript */
.faq details{
  border-bottom:1px solid var(--line);
  padding: 20px 0;
}
.faq summary{
  cursor:pointer; font-weight:600; font-size:1.05rem;
  list-style:none; display:flex; justify-content:space-between; gap:20px;
  align-items:center;
  min-height: 44px;   /* bequem antippbar */
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; color: var(--primary); font-size:1.4rem; line-height:1;
  transition: transform .2s ease;
}
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq details p{ margin: 14px 0 0; font-size:.97rem; }

/* ======================================================= Inhaltsseiten =====
   Vorlage fuer alle Unterseiten (Vorsorge, Leistungen, Ueber uns).
   Kompakter Kopf, zweispaltig: Sprungmarken links, Fliesstext rechts.
   ========================================================================== */

.breadcrumb{
  font-size:.85rem; color: var(--ink-soft);
  padding: 22px 0 0;
}
.breadcrumb a{ text-decoration:none; }
.breadcrumb a:hover{ color: var(--primary-deep); }
.breadcrumb span{ margin: 0 .5em; opacity:.5; }

/* Dasselbe einfallende Licht wie auf der Startseite, nur schwaecher -
   damit Unterseiten erkennbar zur selben Seite gehoeren. */
.page-hero{
  position:relative;
  padding: 34px 0 52px; border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:""; position:absolute; z-index:0;
  left:0; right:0; top:-120px; height:380px;
  background: radial-gradient(52% 60% at 20% 20%, rgba(76,176,80,.13), transparent 72%);
  pointer-events:none;
}
.page-hero > .wrap{ position:relative; z-index:1; }
.page-hero h1{ max-width: 20ch; margin-bottom: 18px; }
.page-hero .lead{ margin-bottom: 0; }

/* Zweispaltiges Layout */
.page-layout{
  display:grid; grid-template-columns: 230px 1fr;
  gap: 56px; align-items:start;
  padding: 56px 0 76px;
}

/* Sprungmarken — bleiben beim Scrollen stehen */
.toc{ position: sticky; top: 96px; }
.toc h2{
  font-family: var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color: var(--primary);
  margin-bottom: 16px;
}
.toc a{
  display:flex; align-items:center;
  padding: 10px 0 10px 14px; min-height: 44px;
  border-left:2px solid var(--line);
  color: var(--ink-soft); text-decoration:none; font-size:.94rem;
  transition: color .15s ease, border-color .15s ease;
}
.toc a:hover{ color: var(--ink); border-color: var(--primary); }

/* Fliesstext */
.prose{ max-width: 68ch; }
.prose > *:first-child{ margin-top:0; }
.prose h2{
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin: 46px 0 16px; scroll-margin-top: 96px;
}
.prose h3{ margin: 30px 0 10px; }
.prose p{ margin-bottom: 1.15em; }
.prose strong{ color: var(--ink); }
.prose a, .lead a{
  color: var(--primary-deep);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose ul{ margin: 0 0 1.3em; }
.prose ul li{
  position:relative; padding-left: 30px; margin-bottom: 11px;
  color: var(--ink-soft);
}
.prose ul li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:7px; height:7px; border-radius:50%;
  background: var(--primary);
}

/* Hinweiskasten — z. B. medizinische Warnung */
.callout{
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px; margin: 30px 0;
}
.callout b{
  display:block; color: var(--accent);
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:10px;
}
.callout p:last-child{ margin-bottom:0; }

/* Faktenkasten */
.factbox{
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px; margin: 30px 0;
}
.factbox h3{ font-size:1.05rem; margin: 0 0 14px; }
.factbox ul{ margin-bottom:0; }

/* Verwandte Seiten am Fuss der Inhaltsseite */
.related{ border-top:1px solid var(--line); padding: 56px 0 20px; }
.related h2{ font-size:1.5rem; margin-bottom: 26px; }

@media (max-width: 900px){
  .page-layout{ grid-template-columns: 1fr; gap: 34px; padding-top: 38px; }
  .toc{
    position:static;
    background: var(--surface); border:1px solid var(--line);
    border-radius: var(--radius); padding: 20px 22px;
  }
  .toc a{ padding: 7px 0 7px 14px; }
}

/* Wortmarke im Kopf (ersetzt spaeter die Logo-Grafik in heller Fassung) */
.wordmark{
  font-family: var(--sans); font-weight:700;
  /* Am 24.08.2026 noch einmal zwei Stufen groesser (1,75 -> 2,05rem), in
     derselben Schrittweite wie zuvor von 1,45 auf 1,75.

     clamp() statt fester Groesse: Im Kopf stehen bei 320 px Wortmarke, Lupe
     und Menue nebeneinander. Fest 2,05rem wuerde die Zeile dort sprengen -
     so waechst sie mit der Breite mit und erreicht den vollen Wert erst,
     wenn der Platz da ist. */
  font-size: var(--wm-groesse);
  letter-spacing:-.02em; line-height:1;
}
.wm-green{ color: var(--primary); }

/* Slogan unter der Wortmarke.
   Bewusst in --ink-soft und nicht in der Markenfarbe: Das Gruen gehoert der
   Wortmarke, und --accent ist laut Design-System Aktionen vorbehalten. Der
   Slogan soll die Marke stuetzen, nicht mit ihr um Aufmerksamkeit ringen. */
.claim{
  font-family: var(--sans);
  /* Untergrenze .60rem statt .66rem: Mit dem groesseren Einzug (0,955 statt
     0,707) wurde der Slogan samt Einzug breiter als die Wortmarke darueber
     und schob den Kopf bei 320 px um 10 px ueber den Rand. */
  font-size: clamp(.60rem, .55rem + .45vw, .78rem);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-soft);
  line-height: 1;
  white-space: nowrap;

  /* Der Slogan beginnt an der rechten Kante des p-Stamms von "Optik".

     0,955 ist kein geschaetzter Wert: Das "p" wurde bei 200 px auf eine
     Zeichenflaeche gezeichnet und im Unterlaengenbereich Pixel fuer Pixel
     abgetastet - dort steht nur der Stamm, ohne die Rundung des Bauchs.
     Stamm links 0,810 / rechts 0,955 der Schriftgroesse, Stammbreite
     0,145 em. (Der fruehere Wert 0,707 war die Vorlaufbreite des "O" und
     traf damit die linke Kante des p, nicht die rechte.)

     Gerechnet wird mit --wm-groesse und nicht mit der eigenen Schriftgroesse
     des Slogans: Beide wachsen unterschiedlich schnell, der Einzug muss der
     Wortmarke folgen. */
  padding-left: calc(var(--wm-groesse) * 0.955);
}
.wm-ink{ color: var(--ink); }

/* Oeffnungszeiten-Tabelle */
.hours{ width:100%; border-collapse: collapse; }
.hours th, .hours td{
  text-align:left; padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400; color: var(--ink-soft);
}
.hours th{ color: var(--ink); font-weight:600; width: 45%; }
.hours tr:last-child th, .hours tr:last-child td{ border-bottom: 0; }
.hours-short th, .hours-short td{ color: var(--accent); font-weight:600; }

/* Rahmen fuer den Bookly-Kalender. Das Plugin bringt eigenes CSS mit -
   wir stylen nur den Rahmen, damit Updates nichts zerschiessen. */
.booking-embed{
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-tint);
  padding: 44px 28px;
  text-align:center;
}
.booking-embed p{ margin-bottom: 10px; }
.booking-embed .btn{ margin-top: 14px; }

/* Steht der echte Kalender drin, ist der gestrichelte Platzhalterrahmen fehl
   am Platz - und das Plugin bringt seine eigene Ausrichtung mit. */
.booking-embed.booking-live{
  border-style: solid;
  padding: 28px 20px;
  text-align: left;
}
.booking-hinweis{ text-align: center; margin-top: 18px; }

/* ==========================================================================
   Bookly — an die Seite angepasst

   Das Plugin bringt sein eigenes Aussehen mit: gruene Beschriftungen in einem
   anderen Gruen als unser Logo (#42a315 statt #4CB050), 32 px hohe Felder,
   silberne Raender und weisse Auswahllisten. Auf dunklem Grund faellt das
   auseinander.

   Angefasst wird nur ueber Klassen und Variablen, nie die Plugin-Dateien -
   die ueberlebt kein Update. Alles haengt unter .booking-embed, wirkt also
   ausschliesslich im Kalender auf /termin/.
   ========================================================================== */

.booking-embed{
  /* Bookly liest seine Akzentfarbe aus diesen beiden Variablen. Es setzt sie
     mit !important auf :root - das ist hier egal: Bei Variablen gewinnt der
     naechste Vorfahre, und der sind wir. */
  --bookly-main-color: var(--primary);
  --bookly-color: var(--primary);

  /* Die aufgeklappte Liste eines <select> zeichnet das Betriebssystem, nicht
     die Seite. Ohne diese Zeile ist sie weiss - schwarze Schrift auf weissem
     Grund mitten in einer dunklen Seite. */
  color-scheme: dark;

  text-align: left;
}

/* Beschriftungen: unsere Schriftfarbe statt Bookly-Gruen. Gruen bleibt dem
   vorbehalten, was anklickbar ist. */
/* Bookly faerbt seine Beschriftungen mit der Markenfarbe, und zwar ueber
   ".bookly-form .bookly-form-group > label" - drei Klassen plus Element. Bei
   gleichem Gewicht gewinnt sonst das Plugin, weil sein Stylesheet spaeter
   laedt. Deshalb hier eine Klasse mehr. */
.booking-embed.booking-embed .bookly-form .bookly-form-group > label,
.booking-embed.booking-embed label{
  color: var(--ink) !important;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 6px;
}

/* Eingabefelder und Auswahllisten ------------------------------------------
   44 px hoch wie jedes andere Tippziel der Seite; Bookly liefert 32. Der
   eigene Pfeil ersetzt den des Betriebssystems, der auf dunklem Grund kaum
   zu sehen ist. */
/* bookly-main.css schreibt "border: 1px solid silver !important" und einen
   festen Radius. Ohne Vorrang bleiben die Felder silbern gerahmt und
   durchsichtig - deshalb hier dieselbe Kelle, aber nur fuer die Angaben, die
   das Plugin wirklich erzwingt. */
.booking-embed.booking-embed select,
.booking-embed.booking-embed input[type="text"],
.booking-embed.booking-embed input[type="email"],
.booking-embed.booking-embed input[type="tel"],
.booking-embed.booking-embed input[type="number"],
.booking-embed.booking-embed textarea{
  width: 100%;
  /* Feste Hoehe statt Polsterung oben/unten: Einzeilige Felder zentrieren
     ihren Text dann von selbst. Mit 10 px Polsterung sass er zu tief, weil
     Bookly zusaetzlich eine eigene Zeilenhoehe mitbringt. */
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 20px !important;
  line-height: normal !important;
  font: inherit;
  /* bookly-main.css setzt 14px mit Vorrang - dagegen hilft nur dasselbe. */
  font-size: 1rem !important;
  color: var(--ink) !important;
  background-color: var(--surface-tint) !important;
  border: 1px solid var(--line) !important;
  /* Oval statt eckig: Bei 44 px Hoehe ergibt ein sehr grosser Radius die
     Pillenform, die auch die Knoepfe der Seite tragen. */
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* Ausnahme: Ein mehrzeiliges Feld als Pille sieht falsch aus. */
/* Mehrzeilig: hier braucht es die Polsterung wieder, und keine feste Hoehe. */
.booking-embed.booking-embed textarea{
  height: auto !important;
  border-radius: 18px !important;
  padding: 14px 20px !important;
}

.booking-embed.booking-embed select{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 46px !important;
  /* Farbe im Pfeil fest: In einer Daten-URL sind CSS-Variablen nicht nutzbar.
     %23AFBCB3 ist --ink-soft. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23AFBCB3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
  cursor: pointer;
}

.booking-embed select:hover,
.booking-embed input:hover{ border-color: var(--primary-deep); }

.booking-embed select:focus-visible,
.booking-embed input:focus-visible,
.booking-embed textarea:focus-visible,
.booking-embed button:focus-visible{
  outline: 2px solid var(--primary-deep);
  outline-offset: 2px;
}

/* Einzelne Eintraege der Liste. Firefox und Windows richten sich danach,
   Safari zeichnet die Liste selbst - dort wirkt color-scheme oben. */
.booking-embed option{
  background: var(--surface);
  color: var(--ink);
}

/* Ankreuzfelder und Auswahlknoepfe in der Markenfarbe, gross genug zum
   Treffen. */
.booking-embed.booking-embed input[type="checkbox"],
.booking-embed.booking-embed input[type="radio"]{
  accent-color: var(--primary);
  width: 20px; height: 20px;
  cursor: pointer;
}

/* Knoepfe ------------------------------------------------------------------
   Dieselbe Form wie ueberall auf der Seite: Pille, 44 px, Markengruen. */
.booking-embed.booking-embed .bookly-btn,
.booking-embed.booking-embed button,
.booking-embed.booking-embed input[type="submit"]{
  min-height: 44px;
  padding: 12px 26px;
  font: inherit;
  /* Bookly schreibt die Beschriftung in Grossbuchstaben und fett - auf der
     hellen Markenflaeche wird daraus ein Schrei. Halbfett reicht, und die
     Versalien nimmt die Regel darunter zurueck. */
  /* Bookly setzt fett und Versalien mit Vorrang - deshalb hier ebenso. */
  font-weight: 500 !important;
  font-size: .95rem;
  letter-spacing: 0 !important;
  color: #0E1611 !important;
  background-color: var(--primary) !important;
  border: 0 !important;
  border-radius: 999px !important;
  cursor: pointer;
  text-transform: none;
}

/* "WEITER" steht so im Plugin, als Text, nicht als Grossschreib-Regel.
   Kleinschreiben und den ersten Buchstaben wieder gross: aus WEITER wird
   Weiter, ohne die Uebersetzungsdateien anzufassen. */
.booking-embed.booking-embed .bookly-btn,
.booking-embed.booking-embed button{
  text-transform: lowercase !important;
  display: inline-block;
}
.booking-embed.booking-embed .bookly-btn::first-letter,
.booking-embed.booking-embed button::first-letter{
  text-transform: uppercase;
}

.booking-embed.booking-embed .bookly-btn:hover,
.booking-embed.booking-embed button:hover{ background-color: var(--primary-deep) !important; }

/* Der Zurueck-Knopf ist die Nebenhandlung und tritt zurueck - sonst stehen
   zwei gleich laute Knoepfe nebeneinander. */
.booking-embed .bookly-back-step,
.booking-embed .bookly-js-back-step,
.booking-embed [class*="prev-step"]{
  color: var(--ink) !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
}

.booking-embed .bookly-back-step:hover,
.booking-embed [class*="prev-step"]:hover{
  border-color: var(--primary-deep) !important;
}

/* Fortschrittsanzeige und Kalenderblatt ------------------------------------
   Bookly zeichnet beides auf weissem Grund. */
/* Jede Stufe besteht aus der Beschriftung und einem Balken darunter. Faerbt
   man die ganze Flaeche, verschwindet die Beschriftung darin - deshalb traegt
   nur der Balken Farbe. */
.booking-embed .bookly-progress-tracker > div{
  background: transparent !important;
  color: var(--ink-soft) !important;
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .04em;
  padding: 0 10px 0 0;
}
.booking-embed .bookly-progress-tracker > div.active{
  color: var(--ink) !important;
  font-weight: 600;
}
.booking-embed .bookly-progress-tracker .step{
  height: 4px !important;
  margin-top: 8px;
  border-radius: 999px !important;
  background: var(--line) !important;
}
.booking-embed .bookly-progress-tracker > div.active .step{
  background: var(--primary) !important;
}

.booking-embed [class*="bookly-picker"],
.booking-embed .bookly-dropdown-menu,
.booking-embed [class*="bookly-day"]{
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

/* Tabellen der freien Zeiten */
.booking-embed table{ color: var(--ink); }
.booking-embed th{ color: var(--ink-soft); font-weight: 600; }

/* Auf schmalen Bildschirmen stehen die Felder ohnehin untereinander -
   Bookly setzt dort feste Breiten, die aus dem Raster laufen. */
@media (max-width: 620px){
  .booking-embed .bookly-form-group{ width: 100% !important; }
}

/* Platzhalter fuer die Karte, solange keine Zustimmung vorliegt */
.map-placeholder{
  margin-top: 30px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 40px 28px;
  text-align:center;
}
.map-placeholder p{ margin-bottom: 10px; }
.map-placeholder .btn{ margin-top: 12px; }

/* ==================================================================== Bilder

   Zwei Formate, mehr braucht die Seite nicht:
   .galerie   Raster gleich hoher Kacheln (Fassungen)
   .bildband  breites Einzelbild (Ladenaufnahmen)

   Beide geben das Seitenverhaeltnis in CSS vor. Damit steht die Hoehe fest,
   bevor das Bild geladen ist - die Seite springt beim Nachladen nicht
   (Core Web Vitals, CLS). object-fit:cover faengt ab, dass die Aufnahmen
   nicht alle exakt dasselbe Format haben.
   ========================================================================== */

.galerie{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 14px;
}
.galerie figure{
  margin:0; overflow:hidden;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: var(--surface);
  /* Quadrat statt Hochformat: Die Aufnahmen haben viel Wand ueber und
     Boden unter der Fassung. Der quadratische Ausschnitt holt das Motiv
     naeher heran, ohne dass eine Fassung angeschnitten wird. */
  aspect-ratio: 1 / 1;
}
.galerie img{
  width:100%; height:100%; object-fit:cover;
  object-position: center 52%;
  transition: transform .5s ease;
}
.galerie figure:hover img{ transform: scale(1.05); }

/* Raumaufnahmen sind Panoramen. Im Quadrat faellt die Haelfte weg,
   deshalb hier liegendes Format. */
.galerie-breit figure{ aspect-ratio: 16 / 9; }
.galerie-breit img{ object-position: center center; }

.bildband{
  margin:0; overflow:hidden;
  border-radius: var(--radius-lg);
  border:1px solid var(--line);
  background: var(--surface);
  aspect-ratio: 20 / 9;
}
.bildband img{ width:100%; height:100%; object-fit:cover; }
.bildband figcaption{
  padding: 12px 4px 0; font-size:.87rem; color: var(--ink-soft);
}

/* Geraetefotos sind Herstelleraufnahmen auf Weiss. Auf dunklem Grund
   brauchen sie eine helle Flaeche, sonst schwimmt der Freisteller. */
.geraetebild{
  margin:0 0 18px; border-radius: var(--radius);
  background: var(--panel); padding: 14px;
  display:grid; place-items:center;
}
.geraetebild img{ max-height: 190px; width:auto; }

/* ================================================================ Markenband

   Laufband mit den Herstellern, direkt vor der Fusszeile. Zwei identische
   Reihen laufen nebeneinander, die Animation schiebt genau um eine halbe
   Spurbreite - dadurch entsteht eine nahtlose Schleife ohne JavaScript.

   Barrierefreiheit: Das Band haelt an, sobald jemand mit Maus oder Tastatur
   hineingeht, es gibt einen echten Pause-Knopf, und bei reduzierter Bewegung
   steht es von vornherein still und laesst sich stattdessen wischen.
   Die zweite Reihe ist nur Optik und deshalb aus dem Vorlesebaum genommen.
   ========================================================================== */

.brandstrip{
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: clamp(40px, 5vw, 64px) 0;
}

/* Die Ueberschrift bleibt eine echte h2 - sie benennt den Abschnitt fuer
   Vorleseprogramme. Optisch tritt sie als Abschnittsmarke zurueck, damit
   das Band selbst der Inhalt ist und nicht die Ansage darueber. */
.brandstrip h2{
  font-family: var(--sans);
  font-variation-settings: normal;
  font-size:.78rem; line-height:1.4; letter-spacing:.13em;
  margin-bottom: 30px;
}

/* Fusszeile des Bandes: Verweis links, Steuerung rechts. */
.brandstrip-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap: 20px; margin-top: 28px;
}

.marquee{
  position:relative; overflow:hidden;
  /* Ausblenden an beiden Raendern, damit die Namen nicht abgeschnitten
     wirken, sondern aus dem Nichts kommen. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; width:max-content;
  /* Linear ohne Easing - eine Dauerbewegung darf nicht beschleunigen oder
     abbremsen, sonst wirkt sie wie ein Fehler. Tempo ist aus der Strecke
     gerechnet: eine halbe Spur (~1450px) in 34s sind rund 43px/s, langsam
     genug, um jeden Namen im Vorbeigehen zu lesen. */
  animation: markenband 34s linear infinite;
  will-change: transform;
}
.marquee-row{
  display:flex; align-items:center;
  gap: clamp(38px, 5vw, 72px);
  padding-right: clamp(38px, 5vw, 72px);
  margin:0;
}
@keyframes markenband{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.brandstrip.pausiert .marquee-track{ animation-play-state: paused; }

.marke{
  display:inline-flex; align-items:center;
  min-height: 44px;
  font-weight: 800; font-size: clamp(1.1rem, 2.6vw, 1.55rem);
  letter-spacing:-.01em; white-space:nowrap; text-decoration:none;
  /* Im Ruhezustand einfarbig. Sieben fremde Markenfarben nebeneinander
     wuerden die Zurueckhaltung der Seite zerlegen und der Sehtafel im Hero
     ihre Sonderstellung nehmen. Die Hausfarbe der Marke steckt als --marke
     am Element und kommt erst beim Ueberfahren zum Vorschein. */
  color: var(--ink-soft);
  transition: color .18s ease, transform .18s ease;
}
.marquee a.marke:hover,
.marquee a.marke:focus-visible{
  color: var(--marke, var(--ink));
  transform: translateY(-2px);
}

/* Steuerung als Icon-Knopf: Der Zustand steht in aria-pressed und im
   aria-label, nicht in sichtbarem Text - ein Textknopf wuerde neben dem
   Band wie ein Fremdkoerper stehen. Umriss-Icons, passend zur uebrigen
   Icon-Familie der Seite. */
.marquee-toggle{
  flex:none;
  width:44px; height:44px; display:grid; place-items:center;
  background:none; border-radius:50%;
  /* Nicht var(--line): Die Umrandung eines Bedienelements braucht 3:1 gegen
     den Hintergrund. --line kommt nur auf 1,52:1 - das ist eine Trennlinie,
     kein Steuerungsrand. #5E6E65 erreicht 3,22:1. */
  border: 1px solid #5E6E65;
  color: var(--ink-soft); cursor:pointer;
  transition: color .15s ease, border-color .15s ease;
}
.marquee-toggle:hover{ color: var(--ink); border-color: var(--primary); }
.marquee-toggle svg{
  width:18px; height:18px;
  fill:none; stroke: currentColor; stroke-width:1.8; stroke-linecap:round;
}
.marquee-toggle .ic-play{ display:none; }
.brandstrip.pausiert .marquee-toggle .ic-pause{ display:none; }
.brandstrip.pausiert .marquee-toggle .ic-play{ display:block; }

@media (prefers-reduced-motion: reduce){
  /* Stillstand statt Bewegung - dafuer von Hand wischbar. */
  .marquee{ overflow-x: auto; }
  .marquee-toggle{ display:none; }
}

/* ------------------------------------------------------------------- Footer */

.site-footer{
  border-top:1px solid var(--line);
  background: var(--surface);
  padding: 60px 0 32px;
  margin-top: 20px;
}
.foot-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:36px; }
/* Gleicher Strich wie bei den Abschnitts-Marken oben - die Fusszeile gehoert
   sichtbar zum selben System. */
.foot-grid h3{ font-family: var(--sans); font-size:.82rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color: var(--primary);
  margin-bottom:16px;
  display:flex; align-items:center; gap:10px; }
.foot-grid h3::before{
  content:""; flex:none; width:18px; height:2px;
  background: currentColor; opacity:.65;
}
.foot-grid a{
  text-decoration:none; color: var(--ink-soft);
  /* Telefonnummer, WhatsApp und E-Mail werden am Handy angetippt -
     17px hohe Links sind dafuer viel zu klein. */
  display:inline-flex; align-items:center;
  min-height: 44px; padding: 4px 0;
}
.foot-grid a:hover{ color: var(--ink); }
.foot-grid li{ margin-bottom:2px; font-size:.95rem; color: var(--ink-soft); }
/* Zeilen ohne Link behalten ihren urspruenglichen Abstand */
.foot-grid li:not(:has(a)){ margin-bottom:9px; }
/* ------------------------------------------------------------ Social Media

   Symbol und Wort zusammen: Ein Symbol allein ist schwerer zu finden, und die
   beiden Zeichen aehneln sich als Strichzeichnung stark. Die Symbole tragen
   deshalb keine Bedeutung und sind fuer Vorleseprogramme ausgeblendet - der
   Linktext sagt bereits alles.
   -------------------------------------------------------------------------- */
.foot-social{
  border-top:1px solid var(--line); margin-top:40px; padding-top:28px;
}
.foot-social h3{
  font-family: var(--sans); font-size:.82rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color: var(--primary);
  margin-bottom:10px; display:flex; align-items:center; gap:10px;
}
.foot-social h3::before{
  content:""; flex:none; width:18px; height:2px;
  background: currentColor; opacity:.65;
}
.foot-social ul{ display:flex; flex-wrap:wrap; gap:8px 28px; }
.foot-social a{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px; padding:4px 0;
  text-decoration:none; color: var(--ink-soft); font-size:.95rem;
}
.foot-social a:hover{ color: var(--ink); }
.foot-social svg{
  width:20px; height:20px; flex:none;
  stroke: var(--primary-deep);
}
.foot-social a:hover svg{ stroke: var(--primary); }

/* --------------------------------------------------- Newsletter-Anmeldung

   Das Formular selbst liefert MailPoet. Wir liefern Rahmen, Ueberschrift und
   den Hinweis auf die Doppelte Bestaetigung - und stylen das fremde Markup
   ueber dessen Klassen. Die Plugin-Dateien bleiben unangetastet, sonst
   ueberlebt die Anpassung kein Update.
   -------------------------------------------------------------------------- */
.foot-news{
  border-top:1px solid var(--line); margin-top:44px; padding-top:36px;
  /* MailPoet bringt eine eigene Polsterung mit, die hier unten ein Loch von
     gut neunzig Pixeln stehen laesst. Der Abstand gehoert uns. */
  padding-bottom:0;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:24px 44px; align-items:start;
}
.foot-news h3{
  font-family: var(--sans); font-size:.82rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color: var(--primary);
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.foot-news h3::before{
  content:""; flex:none; width:18px; height:2px;
  background: currentColor; opacity:.65;
}
.foot-news p{ font-size:.95rem; color: var(--ink-soft); max-width:52ch; }

/* Sichtbares Label ueber dem Feld. Ein Platzhalter ist keins: er verschwindet
   beim Tippen, und Vorleseprogramme werten ihn nicht als Beschriftung. */
.foot-news label{
  display:block; font-size:.9rem; color: var(--ink); margin-bottom:6px;
}

/* 44 px hoch wie jedes andere Tippziel der Seite. MailPoet liefert ab Werk
   deutlich flachere Felder. */
.foot-news input[type="email"],
.foot-news input[type="text"],
.foot-news .mailpoet_text{
  width:100%; min-height:44px; padding:10px 14px;
  font: inherit; color: var(--ink);
  background: var(--surface-tint);
  border:1px solid var(--line); border-radius:10px;
}
.foot-news input::placeholder{ color: var(--ink-soft); opacity:.75; }
.foot-news input:focus-visible,
.foot-news button:focus-visible,
.foot-news .mailpoet_submit:focus-visible{
  outline:2px solid var(--primary-deep); outline-offset:2px;
}
.foot-news .mailpoet_submit,
.foot-news button[type="submit"]{
  /* Nicht ueber die volle Breite: Der Knopf sieht sonst aus wie ein Balken und
     zieht mehr Aufmerksamkeit als der Termin-Knopf im Kopf, der die wichtigere
     Handlung ist. Breite wie die uebrigen Knoepfe der Seite. */
  /* !important, weil MailPoet width und padding als Inline-Stil ins Markup
     schreibt - dagegen kommt kein Stylesheet an. Nur diese beiden Angaben,
     alles andere bleibt normale Kaskade. */
  width:auto !important; padding:12px 26px !important;
  min-height:44px; margin-top:12px;
  padding:12px 22px; border:0; border-radius:999px; cursor:pointer;
  font: inherit; font-weight:600;
  background: var(--primary); color:#0E1611;
}
.foot-news .mailpoet_submit:hover,
.foot-news button[type="submit"]:hover{ background: var(--primary-deep); }
.foot-news button[disabled]{ opacity:.5; cursor:not-allowed; }

/* Dauerhaft sichtbar, nicht nur als Platzhalter: Die Doppelte Bestaetigung
   ist der Grund, warum nach dem Absenden scheinbar nichts passiert. */
.foot-news-hinweis{ font-size:.82rem; margin-top:12px; max-width:46ch; }
.foot-news-hinweis a{ color: var(--primary-deep); }

/* MailPoet setzt eigene Abstaende und eine eigene Schrift. */
.foot-news .mailpoet_form{ margin:0; padding:0; }
.foot-news .mailpoet_paragraph{ margin-bottom:10px; }
/* MailPoet haengt unter den letzten Absatz noch einen Abstand - der
   liess in der Fusszeile ein Loch von gut hundert Pixeln stehen. */
.foot-news .mailpoet_paragraph.last{ margin-bottom:0; }
.foot-news .mailpoet_form_paragraph:last-child{ margin-bottom:0; }
.foot-news .mailpoet_validate_success{ color: var(--primary-deep); }
.foot-news .mailpoet_validate_error{ color: var(--accent); }

.foot-bottom{
  border-top:1px solid var(--line); margin-top:44px; padding-top:22px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  align-items:center;
  font-size:.87rem; color: var(--ink-soft);
}
.foot-bottom a{
  text-decoration:none;
  display:inline-block; padding: 12px 4px; margin: -12px 0;
}
.breadcrumb a{
  display:inline-flex; align-items:center;
  min-height: 44px; padding: 0 2px; margin: -11px 0;
}

/* ==========================================================================
   Einrasten beim Scrollen - entfernt am 23.08.2026

   Die Startseite rastete ab Tablet-Breite an den Abschnittsanfaengen ein
   (scroll-snap-type: y proximity). Auf dem Papier sanft, in der Hand aber
   zaeh: Wer schnell nach unten will, wird auf jedem Abschnitt ausgebremst.
   Thomas hat es genau so beschrieben - "dauert zu lange". Raus.

   Die Klasse "snap" am Wurzelelement schadet nicht und bleibt vorerst, damit
   nicht jede uebertragene Seite angefasst werden muss. Sie tut nichts mehr.
   ========================================================================== */

/* --------------------------------------------------------- Scroll-Animation

   Wichtig: Das Ausblenden greift NUR, wenn JavaScript laeuft (html.js).
   Ohne JavaScript ist der Inhalt sofort sichtbar - eine Animation darf
   niemals darueber entscheiden, ob Text lesbar ist.                          */

html.js .reveal{
  opacity:0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
html.js .reveal.in{ opacity:1; transform:none; }

/* Gestaffelt statt gleichzeitig: Karten einer Reihe kommen nacheinander an.
   60ms Versatz reicht, damit es als Bewegung gelesen wird - mehr wuerde
   sich zaeh anfuehlen. */
html.js .grid > .reveal:nth-child(2),
html.js .steps > .reveal:nth-child(2),
html.js .reviews > .reveal:nth-child(2){ transition-delay:.06s; }
html.js .grid > .reveal:nth-child(3),
html.js .steps > .reveal:nth-child(3),
html.js .reviews > .reveal:nth-child(3){ transition-delay:.12s; }
html.js .grid > .reveal:nth-child(4),
html.js .steps > .reveal:nth-child(4){ transition-delay:.18s; }
html.js .grid > .reveal:nth-child(5){ transition-delay:.24s; }
html.js .grid > .reveal:nth-child(6){ transition-delay:.30s; }

/* Nachtrag: "html.js .reveal.in" ist staerker als ".card:hover" - ohne diese
   Zeile setzt die Einblend-Regel das Anheben der Kachel wieder auf null.
   Die Kachel bliebe beim Ueberfahren einfach stehen. */
html.js .card.reveal.in:hover{ transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  html.js .reveal{ opacity:1; transform:none; }
}

/* ------------------------------------------------------------------- Mobile */

@media (max-width: 1000px){
  /* Die Tafel unter den Text, in voller Breite - dort wirkt sie eher wie die
     Tafel an der Wand als ein Bildchen neben dem Fliesstext. */
  .hero-grid{ grid-template-columns: 1fr; gap: var(--sp-4); }
  .hero h1{ max-width: 18ch; }
  .chart{ font-size: clamp(.6rem, 2.6vw, .95rem); }
}

@media (max-width: 900px){
  /* Raster regeln sich jetzt selbst ueber auto-fit - hier nur noch der Footer */
  .foot-grid{ grid-template-columns: 1fr 1fr; }
}

/* Zwischen 760 und rund 1000 px steht das volle Menue noch nebeneinander, der
   Platz wird aber knapp: Bei 820 px brach die Kopfzeile um, weil Wortmarke,
   Lupe mit Wort und Menue zusammen genau die verfuegbare Breite erreichten
   (gemessen 805 von 805 px). Ab hier zeigt der Knopf deshalb nur noch das
   Symbol. Das Wort bleibt fuer Vorleseprogramme stehen, nur ausserhalb des
   Sichtfelds - ein Knopf braucht einen Namen, und eine Lupe liefert keinen. */
@media (max-width: 1000px){
  .search-toggle{ padding: 8px 12px; }
  .search-toggle-text{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip-path: inset(50%); white-space:nowrap;
  }
}

/* Das Menue klappt ab 1040 px ein. Vorher 760, dann 960.

   Eine Flex-Zeile bricht nicht um, wenn der Platz fehlt - sie staucht die
   Punkte, bis deren Text zweizeilig wird ("Termin buchen" wurde 76 px hoch
   statt 46). Das sieht aus wie ein Umbruch, ist aber ein Stauchen, und es
   trat am 24.08.2026 zweimal auf:

     760-900 px  durch den neuen Suchknopf (806 von 805 px gebraucht)
     bis 920 px  durch die 28 px seitlichen Abstand, die der Kopf vorher
                 faelschlich gar nicht hatte - sie fehlen der Zeile jetzt

   Schon vor beiden Aenderungen blieben bei 800 px nur rund 10 px uebrig. Die
   Zeile war die ganze Zeit an der Kante.

     24.08.2026  Der sechste Menuepunkt "Ratgeber" kam dazu (rund 94 px mit
                 Abstand). Damit reicht 960 nicht mehr - jetzt 1040. */
@media (max-width: 1040px){
  .nav-toggle{ display:block; }
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background: var(--surface); border-bottom:1px solid var(--line);
    padding: 8px 28px 20px;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 0; width:100%; border-bottom:1px solid var(--line); }
  .nav-links .btn{ margin-top:14px; }
  .nav-home{ display: block; }
}

/* Auf dem Handy stehen im Kopf nur noch Marke, Lupe und "Menü". 26 px Abstand
   dazwischen sind dort viel Luft - bei 320 px fehlten sie am Ende genau an
   der Stelle, wo der Slogan den Markenblock verbreitert hat. */
@media (max-width: 600px){
  .nav{ gap: 12px; }
  .nav-toggle{ padding: 8px 12px; }
}

@media (max-width: 760px){
  .hero{ padding: 48px 0 40px; }
  .stats{ grid-template-columns: 1fr; }
  .stats-quiet .stat + .stat{ margin-top: 22px; }
  .foot-grid{ grid-template-columns: 1fr; }
  .offer{ padding: 30px 26px; }
  .cta-band{ padding: 40px 24px; }
}


/* -------------------------------------------------- Vergleichstabelle
   Bisher gab es im Design-System keine Tabelle. Gebraucht wird sie fuer
   die Glaspakete: vier Spalten, viele Zeilen, teils nur Haken.

   Auf schmalen Schirmen wird nicht umgebrochen, sondern seitlich
   gescrollt - eine Vergleichstabelle verliert ihren Sinn, sobald die
   Spalten untereinander stehen. Der Rahmen ist fokussierbar, damit die
   Tabelle auch per Tastatur scrollbar bleibt. */

.tabelle-rahmen{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: var(--sp-3) 0;
}

.tabelle-rahmen:focus-visible{
  outline: 2px solid var(--primary-deep);
  outline-offset: 2px;
}

.tabelle{
  border-collapse: collapse;
  width: 100%;
  min-width: 680px;
  font-size: .95rem;
}

.tabelle caption{
  text-align: left;
  padding: var(--sp-2) var(--sp-2) 0;
  color: var(--ink-soft);
  font-size: .9rem;
}

.tabelle th,
.tabelle td{
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.tabelle thead th{
  position: sticky;
  top: 0;
  background: var(--surface-tint);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  white-space: nowrap;
}

/* Erste Spalte ist die Merkmalsbezeichnung - beim seitlichen Scrollen
   muss sie stehen bleiben, sonst weiss niemand mehr, welche Zeile das ist. */
.tabelle tbody th{
  position: sticky;
  left: 0;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.tabelle tbody tr:last-child th,
.tabelle tbody tr:last-child td{ border-bottom: 0; }

.tabelle td{ color: var(--ink-soft); }

.tabelle .preis{
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink);
}

.tabelle .ja{ color: var(--primary-deep); font-weight: 600; }
.tabelle .nein{ color: var(--ink-soft); opacity: .55; }

@media (max-width: 600px){
  .tabelle{ font-size: .9rem; }
  .tabelle th, .tabelle td{ padding: 10px 12px; }
}

/* ----------------------------------------------------- Glaspaket-Bilder
   Vier freigestellte Aufnahmen desselben Glases nebeneinander. Der Vergleich
   funktioniert nur, wenn sie gleich gross und in einer Reihe stehen - auf
   dem Handy deshalb zwei mal zwei statt untereinander. */

.glaspakete{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}

.glaspakete figure{ margin: 0; }

.glaspakete img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  background: var(--panel);   /* die Vorlagen sind auf Weiss freigestellt */
}

.glaspakete figcaption{
  margin-top: 10px;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.glaspakete figcaption strong{ color: var(--ink); display: block; }

@media (max-width: 700px){
  .glaspakete{ grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================= Ratgeber

   Beitraege kommen aus dem Editor, nicht aus dem Prototyp. Sie brauchen
   deshalb eigene Stile - die Inhaltsseiten bringen ihre eigenen mit.
   ========================================================================== */

.beitragsliste{ list-style:none; margin:0; padding:0; }

.beitragsliste .beitrag{
  display:grid; grid-template-columns: 200px 1fr; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
/* Ohne Bild soll der Text nicht in der schmalen Spalte kleben */
.beitragsliste .beitrag:has(> .beitrag-text:first-child){ grid-template-columns: 1fr; }
.beitragsliste .beitrag:first-child{ padding-top: 0; }

.beitrag-bild{
  display:block; border-radius: var(--radius); overflow:hidden;
  background: var(--surface); align-self:start;
}
.beitrag-bild img{ display:block; width:100%; height:auto; }

.beitrag-datum{
  margin: 0 0 4px;
  font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
  color: var(--ink-soft);
}
.beitrag-text h2{ font-size:1.35rem; margin:0 0 8px; }
.beitrag-text h2 a{ text-decoration:none; }
.beitrag-text h2 a:hover{ text-decoration:underline; }
.beitrag-auszug{ margin:0 0 10px; color: var(--ink-soft); }
.beitrag-mehr{ margin:0; }

/* ----------------------------------------------------- einzelner Beitrag */

.beitrag-einzeln .beitrag-aufmacher{
  margin: 0 0 var(--sp-4);
  border-radius: var(--radius-lg); overflow:hidden;
}
.beitrag-einzeln .beitrag-aufmacher img{ display:block; width:100%; height:auto; }

/* Im Kopfbereich steht das Datum ueber der Ueberschrift */
.page-hero .beitrag-datum{ margin-bottom: 10px; }

.beitrag-kategorien,
.beitrag-zurueck{
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size:.95rem;
}
.beitrag-zurueck{ border-top:0; padding-top:0; margin-top: var(--sp-2); }

@media (max-width: 620px){
  .beitragsliste .beitrag{ grid-template-columns: 1fr; gap: var(--sp-2); }
  .beitrag-bild{ max-width: 320px; }
}