/* ==========================================================================
   stil.css – Zentrales Stylesheet der Website
   Privatpraxis für Psychotherapie Conrad-Leon Nienhaus
   Wird von ALLEN Seiten eingebunden (index, angebote, ueber-mich, anfahrt,
   kontakt, impressum, datenschutz).
   ========================================================================== */

/* --------------------------------------------------------------------------
   SCHRIFTEN (Lora + Karla, selbst gehostet)
   Sobald die woff2-Dateien im Ordner schriften/ liegen, einfach den
   folgenden Block einkommentieren (die Kommentarzeichen entfernen).
   Solange die Dateien fehlen, greifen automatisch die System-Schriften
   (Georgia bzw. System-Sans) – die Seite sieht dem Entwurf sehr ähnlich.
   -------------------------------------------------------------------------- */
@font-face{font-family:"Lora";font-style:normal;font-weight:400;
   font-display:swap;src:url("../schriften/lora-400.woff2") format("woff2");}
@font-face{font-family:"Lora";font-style:normal;font-weight:500;
   font-display:swap;src:url("../schriften/lora-500.woff2") format("woff2");}
@font-face{font-family:"Lora";font-style:normal;font-weight:600;
   font-display:swap;src:url("../schriften/lora-600.woff2") format("woff2");}
@font-face{font-family:"Karla";font-style:normal;font-weight:400;
   font-display:swap;src:url("../schriften/karla-400.woff2") format("woff2");}
@font-face{font-family:"Karla";font-style:normal;font-weight:500;
   font-display:swap;src:url("../schriften/karla-500.woff2") format("woff2");}
@font-face{font-family:"Karla";font-style:normal;font-weight:600;
   font-display:swap;src:url("../schriften/karla-600.woff2") format("woff2");}
@font-face{font-family:"Karla";font-style:normal;font-weight:700;
   font-display:swap;src:url("../schriften/karla-700.woff2") format("woff2");}

/* --------------------------------------------------------------------------
   DESIGN-TOKENS (Farben, Maße, Schriften) – aus dem freigegebenen Prototyp
   -------------------------------------------------------------------------- */
:root{
  color-scheme:light;      /* Die Seite ist bewusst hell gestaltet – verhindert
                              ungewollte automatische Dunkel-Umfärbung im Browser */
  --bg:#FAF8F4;            /* Seitenhintergrund, warmes Off-White */
  --surface:#ffffff;       /* weiße Flächen / Karten */
  --surface-2:#F5F7F9;     /* kühle helle Fläche (Karte Psychotherapie) */
  --surface-3:#F6F7F4;     /* warme helle Fläche (Karte Coaching) */
  --surface-blue:#E9EDF1;  /* sanftes Blau (Bild-Rahmen, Hinweisbox) */
  --ink:#2E3945;           /* Überschriften */
  --text:#3A4149;          /* Fließtext (Standard-Textfarbe) */
  --muted:#5A626D;         /* gedämpfter Fließtext */
  --meta:#626A75;          /* kleine Labels/Meta – dunkel genug für WCAG AA (nicht für lange Fließtexte) */
  --accent:#5D7893;        /* Buttons, Links, Akzente */
  --accent-hover:#4A6580;
  --link-hover:#3f566e;
  --dark:#33404F;          /* Footer, Banner, dunkle CTA */
  --dark-hover:#2A3542;
  --banner-text:#DDE5EC;
  --line:#EFEAE1;          /* warme Trennlinie */
  --line-2:#ECE7DD;        /* Kartenrand */
  --line-input:#E0DBD1;    /* Formular-Rand */
  --tag-border:#DDE3EA;    /* Tag-Pillen-Rand */
  --green:#98A58F;         /* zweiter Akzent (Deko-Kreis Coaching) */
  --maxw:1200px;
  --font-serif:"Lora", Georgia, "Times New Roman", serif;      /* Überschriften + Marke */
  --font-sans:"Karla", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Fließtext */
}

/* --------------------------------------------------------------------------
   GRUNDLAGEN (Reset + Basistypografie)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:17px;              /* Fließtext: nie unter 16px */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{
  max-width:100%;
  height:auto;             /* hält das Seitenverhältnis, auch wenn width/height
                              als HTML-Attribute gesetzt sind */
  display:block;
}

/* Überschriften: Serifenschrift, dunkle Tinte */
h1, h2, h3, h4{
  font-family:var(--font-serif);
  color:var(--ink);
  font-weight:500;
  line-height:1.2;
}
h1{ font-size:clamp(32px, 5vw, 40px); line-height:1.18; }  /* Innenseiten */
h2{ font-size:clamp(24px, 3.4vw, 28px); }
h3{ font-size:21px; font-weight:600; }

/* Ausgewogene Zeilenumbrüche in Überschriften (moderne Browser;
   ältere ignorieren die Zeile einfach – kein Risiko) */
h1, h2, h3{ text-wrap:balance; }

p{ margin-bottom:1em; }
p:last-child{ margin-bottom:0; }

/* Links */
a{
  color:var(--accent);
  text-decoration:none;
}
a:hover{
  color:var(--link-hover);
}

/* Sichtbarer Fokus für Tastatur-Bedienung */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Sprunglink „Zum Inhalt springen": unsichtbar, bis er per Tab-Taste
   fokussiert wird – dann erscheint er oben links (Barrierefreiheit) */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--dark);
  color:#fff;
  padding:10px 18px;
  border-radius:0 0 10px 0;
  font-weight:600;
}
.skip-link:focus{
  left:0;
}

/* Zentrierter Inhalts-Container (überall wiederverwendbar) */
.container{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:40px;
}

/* Standard-Abschnitt mit vertikalem Abstand */
.section{
  padding-block:60px;
}

/* Weißer Block mit warmen Trennlinien oben/unten (z. B. „Mein Angebot") */
.section-weiss{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* --------------------------------------------------------------------------
   KLEINE TEXT-BAUSTEINE (Eyebrow, Label-Caps, Lead)
   -------------------------------------------------------------------------- */

/* Eyebrow / Kicker über Überschriften */
.eyebrow{
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-hover);   /* etwas dunkler als --accent, damit der Kicker WCAG AA erfüllt */
  font-weight:700;
  margin-bottom:14px;
}

/* Graue Großbuchstaben-Labels (z. B. über Info-Boxen) */
.label-caps{
  font-size:12.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--meta);
  font-weight:700;
}

/* Einleitender Absatz unter einer Überschrift */
.lead{
  color:var(--muted);
  max-width:62ch;
  text-wrap:pretty;        /* schönere Zeilenumbrüche (moderne Browser) */
}

/* Seitenkopf der Innenseiten (Eyebrow + h1 + Lead) */
.seitenkopf{
  margin-bottom:36px;
}
.seitenkopf .lead{
  margin-top:16px;
}

/* --------------------------------------------------------------------------
   BUTTONS (primär / sekundär / dunkel) – als <a> oder <button> nutzbar
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;
  border-radius:999px;
  font-family:var(--font-sans);
  font-weight:600;
  font-size:15.5px;
  line-height:1.2;
  cursor:pointer;
  text-align:center;
  border:0;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Primär: gefüllt, Akzentfarbe */
.btn-primary{
  background:var(--accent);
  color:#fff;
  padding:14px 28px;
}
.btn-primary:hover{
  background:var(--accent-hover);
  color:#fff;
}

/* Sekundär: nur Rand */
.btn-secondary{
  border:1.5px solid #C9CFD8;
  color:var(--text);
  padding:13px 26px;
  background:transparent;
}
.btn-secondary:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* Dunkel: z. B. auf CTA-Leisten */
.btn-dark{
  background:var(--dark);
  color:#fff;
  padding:14px 28px;
}
.btn-dark:hover{
  background:var(--dark-hover);
  color:#fff;
}

/* Weißer Button auf dunklem Grund (CTA-Leiste) */
.btn-hell{
  background:#fff;
  color:var(--dark);
  padding:14px 28px;
}
.btn-hell:hover{
  background:var(--banner-text);
  color:var(--dark);
}

/* --------------------------------------------------------------------------
   BANNER (dunkler Hinweis-Streifen ganz oben, nur Startseite)
   -------------------------------------------------------------------------- */
.banner{
  background:var(--dark);
  color:var(--banner-text);
  text-align:center;
  padding:9px 20px;
  font-size:13.5px;
}
.banner a{
  color:#fff;
  font-weight:700;
}
.banner a:hover{
  text-decoration:underline;
}

/* --------------------------------------------------------------------------
   HEADER + NAVIGATION (sticky, auf allen Seiten identisch)
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(250,248,244,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  max-width:var(--maxw);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 40px;
}

/* Marke (Name + Untertitel), verlinkt auf die Startseite */
.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.brand-name{
  font-family:var(--font-serif);
  font-size:19px;
  font-weight:600;
  color:var(--dark);
}
.brand-sub{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--meta);
}
.brand:hover .brand-name{
  color:var(--accent);
}

/* Navigations-Leiste */
.nav{
  display:flex;
  align-items:center;
  gap:2px;
}
.nav-link{
  color:var(--muted);
  font-weight:500;
  font-size:15.5px;
  padding:9px 14px;
  border-radius:999px;
}
.nav-link:hover{
  color:var(--dark);
  background:#F1EDE5;
}
/* Aktiver Menüpunkt der aktuellen Seite (Klasse UND aria-current,
   damit auch Screenreader die aktuelle Seite erkennen) */
.nav-link.is-active,
.nav-link[aria-current="page"]{
  color:var(--accent);
  background:#EFF2F5;
  font-weight:700;
}
/* Kontakt-Button in der Navigation */
.nav .nav-kontakt{
  margin-left:14px;
}

/* Hamburger-Button: erst auf schmalen Bildschirmen sichtbar */
.nav-toggle{
  display:none;
  background:transparent;
  border:1.5px solid var(--line-2);
  border-radius:10px;
  padding:8px 12px;
  font-size:20px;
  line-height:1;
  color:var(--ink);
  cursor:pointer;
}
.nav-toggle:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* --------------------------------------------------------------------------
   HERO (Startseite: Text links, Portrait rechts)
   -------------------------------------------------------------------------- */
.hero .container{
  padding-block:56px 72px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:64px;
  align-items:center;
}
.hero h1{
  font-size:clamp(34px, 5.4vw, 46px);
  line-height:1.18;
  margin-bottom:22px;
}
.hero-lead{
  max-width:52ch;
  color:var(--muted);
  margin-bottom:28px;
}
.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:26px;
}
.hero-meta{
  color:var(--meta);
  font-size:14.5px;
  letter-spacing:.02em;
}

/* Bildspalte: Portrait im Bogen-Rahmen + Namenskärtchen */
.hero-bild{
  justify-self:center;
  width:100%;
  max-width:360px;
}
.portrait-rahmen{
  position:relative;
}
/* Versetzte blaue Deko-Fläche hinter dem Bild */
.portrait-rahmen::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--surface-blue);
  border-radius:180px 180px 14px 14px;
  transform:translate(16px, 16px);
  z-index:0;
}
.portrait-rahmen img{
  position:relative;
  z-index:1;
  width:100%;
  border-radius:180px 180px 14px 14px;
  object-fit:cover;
}
/* Weißes Namenskärtchen unter dem Portrait */
.namenskarte{
  position:relative;
  z-index:2;
  background:var(--surface);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(46,57,69,.12);
  padding:16px 22px;
  margin-top:-28px;
  margin-inline:18px;
  text-align:center;
}
.namenskarte-name{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:16.5px;
  color:var(--ink);
  margin-bottom:2px;
}
.namenskarte-titel{
  font-size:13px;
  color:var(--meta);
  margin-bottom:0;
}

/* --------------------------------------------------------------------------
   SEE-BILD-BAND (volle Breite, ruhiges Stimmungsbild)
   -------------------------------------------------------------------------- */
.see-band{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.see-band img{
  width:100%;
  height:clamp(240px, 42vw, 420px);
  object-fit:cover;
}

/* --------------------------------------------------------------------------
   SEKTION „MEIN ANGEBOT" (Startseite) + allgemeine Karten
   -------------------------------------------------------------------------- */
.sektion-kopf{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:30px;
}
.sektion-kopf h2{
  font-size:clamp(26px, 3.6vw, 30px);
}
.mehr-link{
  font-weight:600;
  font-size:15.5px;
}

/* Zwei-Spalten-Kartenraster */
.karten-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}

/* Allgemeine Karte – auch als Link (<a class="card">) nutzbar */
.card{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:34px 32px;
  color:inherit;             /* verhindert blaue Linkfarbe bei Karten-Links */
  border:1px solid var(--line-2);
  background:var(--surface);
}
.card:hover{
  color:inherit;
}
a.card:hover h3{
  color:var(--accent);
}
.card p{
  color:var(--muted);
}
.card h3{
  margin-bottom:12px;
}

/* Farbvarianten + Deko-Kreis oben rechts */
.card-blau{ background:var(--surface-2); }
.card-gruen{ background:var(--surface-3); }
.card-blau::before,
.card-gruen::before{
  content:"";
  position:absolute;
  top:-46px;
  right:-46px;
  width:140px;
  height:140px;
  border-radius:50%;
  pointer-events:none;
}
.card-blau::before{ background:var(--accent); opacity:.14; }
.card-gruen::before{ background:var(--green); opacity:.22; }

/* Tag-Pillen (weiß, dezenter Rand) */
.tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.tag{
  background:#fff;
  border:1px solid var(--tag-border);
  border-radius:999px;
  padding:6px 14px;
  font-size:13.5px;
  color:var(--muted);
}

/* „Mein Angebot richtet sich an"-Leiste (Startseite) */
.zielgruppen-leiste{
  margin-top:26px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px 28px;
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.zielgruppen{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  font-weight:600;
  font-size:15px;
  color:var(--ink);
}

/* --------------------------------------------------------------------------
   BAUSTEINE FÜR INNENSEITEN (Angebote, Über mich, Anfahrt, Kontakt)
   -------------------------------------------------------------------------- */

/* Große weiße Inhalts-Karte (z. B. Angebote-Seite) */
.card-gross{
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:20px;
  padding:40px;
  margin-bottom:28px;
}

/* Deko-Kreis als eigenständiges Element (z. B. neben h2 auf Karten) */
.deko-kreis{
  width:44px;
  height:44px;
  border-radius:50%;
  flex-shrink:0;
}
.deko-kreis-blau{ background:var(--accent); opacity:.18; }
.deko-kreis-gruen{ background:var(--green); opacity:.3; }

/* Kachel-Raster (z. B. Störungsbilder: 4 Spalten, Mobil 2) */
.kacheln{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-block:20px;
}
.kachel{
  background:var(--surface-2);
  border-radius:10px;
  padding:14px 16px;
  font-weight:600;
  font-size:15px;
  color:var(--ink);
  text-align:center;
}

/* Themen-Pillen (Coaching-Themen) */
.pillen{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-block:20px;
}
.pille{
  background:var(--surface-3);
  border:1px solid #DEE2D9;
  border-radius:999px;
  padding:8px 18px;
  font-size:14.5px;
  color:var(--text);
}

/* Info-Box auf warmem Grund (z. B. Kosten, Zielgruppen) */
.info-boxen{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:24px;
}
.info-box{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 26px;
}
.info-box .label-caps{
  display:block;
  margin-bottom:10px;
}

/* Hinweis-Box (z. B. Coaching nur für Selbstzahler*innen) */
.hinweis-box{
  background:var(--surface-3);
  border-radius:12px;
  padding:16px 20px;
  font-size:15.5px;
}

/* Sanft-blaue Link-/Hinweisfläche (z. B. „So finden Sie die Praxis") */
.link-box{
  display:block;
  background:var(--surface-blue);
  border-radius:14px;
  padding:20px 24px;
  font-weight:600;
  color:var(--ink);
}
.link-box:hover{
  color:var(--accent);
}

/* Dunkle CTA-Leiste (Aufruf zur Kontaktaufnahme) */
.cta-leiste{
  background:var(--dark);
  border-radius:20px;
  padding:32px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.cta-leiste h2,
.cta-leiste p{
  font-family:var(--font-serif);
  color:#fff;
  font-size:clamp(21px, 3vw, 26px);
  font-weight:500;
  margin:0;
}

/* Kopfzeile einer großen Karte: Deko-Kreis + Überschrift nebeneinander */
.karten-kopf{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
}

/* Aufzählungen in Info-Boxen leicht einrücken */
.info-box ul{
  margin-left:20px;
}

/* Label-Caps in normalen Karten: als Block mit Abstand nach unten
   (gleiche Optik wie in den Info-Boxen) */
.card .label-caps{
  display:block;
  margin-bottom:10px;
}

/* Button über die volle Breite (z. B. CTA am Ende einer Spalte) */
.btn-block{
  display:block;
  text-align:center;
}

/* Größerer Abstand über einem Abschnitt (z. B. h2 nach einem Textblock) */
.abstand-oben{
  margin-top:40px;
}

/* Hervorgehobene Vorstellungszeile (Über mich) */
.intro-titel{
  font-weight:600;
  color:var(--ink);
  margin-top:12px;
}

/* --------------------------------------------------------------------------
   ÜBER MICH: zweispaltiges Layout (Bild links, Text rechts)
   -------------------------------------------------------------------------- */
.ueber-grid{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:72px;
  align-items:start;
}
.ueber-grid .portrait-rahmen img{
  height:460px;
  object-fit:cover;
}

/* --------------------------------------------------------------------------
   ANFAHRT: Kartenfläche + Schritt-Karten
   -------------------------------------------------------------------------- */
.anfahrt-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:stretch;
}
/* Dekorative „Karten"-Fläche mit dezentem Raster – KEINE echte Google Map
   (Datenschutz), stattdessen ein normaler Link zu Google Maps darunter. */
.karten-flaeche{
  background:var(--surface-blue);
  background-image:
    linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px);
  background-size:42px 42px;
  border-radius:20px;
  min-height:380px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:32px;
  text-align:center;
}
/* Adress-„Pin": Punkt + weißes Adresskärtchen */
.karten-pin{
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--accent);
  border:3px solid #fff;
  box-shadow:0 4px 12px rgba(46,57,69,.25);
}
.karten-adresse{
  background:var(--surface);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(46,57,69,.12);
  padding:14px 22px;
  font-weight:600;
  color:var(--ink);
}
/* Nummerierte Wegbeschreibungs-Karte */
.schritt-karte{
  padding:22px 24px;
  margin-bottom:14px;
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.schritt-nummer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--surface-blue);
  color:var(--ink);
  font-weight:700;
  flex-shrink:0;
}

/* --------------------------------------------------------------------------
   KONTAKT: zweispaltiges Layout (Infos links, Formular rechts)
   -------------------------------------------------------------------------- */
.kontakt-grid{
  margin-top:36px;
  align-items:start;
}
.karten-spalte{
  display:grid;
  gap:20px;
  align-content:start;
}

/* --------------------------------------------------------------------------
   404-SEITE: zentrierter, schmaler Inhalt
   -------------------------------------------------------------------------- */
.fehler-inhalt{
  max-width:640px;
  text-align:center;
  padding-block:40px 24px;
}
.fehler-inhalt .lead{
  margin-inline:auto;
}
.fehler-inhalt .hero-buttons{
  justify-content:center;
  margin-top:26px;
}

/* --------------------------------------------------------------------------
   TIMELINE (Über mich: Ausbildung und Qualifikationen)
   -------------------------------------------------------------------------- */
.timeline{
  list-style:none;
  margin-top:22px;
}
.timeline li{
  position:relative;
  padding-left:32px;
  padding-bottom:26px;
}
/* Verbindungslinie zwischen den Punkten */
.timeline li::before{
  content:"";
  position:absolute;
  left:5px;
  top:8px;
  bottom:-8px;
  width:2px;
  background:var(--surface-blue);
}
.timeline li:last-child::before{
  display:none;               /* nach dem letzten Punkt keine Linie mehr */
}
/* Punkt auf der Linie */
.timeline li::after{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--surface-blue);
}
.timeline-titel{
  font-size:15.5px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:2px;
}
.timeline-detail{
  font-size:13.5px;
  color:var(--meta);
  margin-bottom:0;
}

/* --------------------------------------------------------------------------
   FORMULAR (Kontaktseite)
   -------------------------------------------------------------------------- */
.formular-karte{
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:16px;
  padding:32px 34px;
}

.feld{
  margin-bottom:18px;
}
.feld label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  margin-bottom:6px;
}
.feld input,
.feld textarea{
  width:100%;
  font-family:var(--font-sans);
  font-size:15px;
  color:var(--text);
  background:var(--bg);
  border:1.5px solid var(--line-input);
  border-radius:10px;
  padding:12px 14px;
}
.feld input:focus,
.feld textarea:focus{
  border-color:var(--accent);
  background:#fff;
  outline:none;
}

/* Checkbox-Zeile (Datenschutz-Zustimmung) */
.checkbox-zeile{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14.5px;
  margin-bottom:22px;
}
.checkbox-zeile input{
  margin-top:4px;
  accent-color:var(--accent);
  width:17px;
  height:17px;
  flex-shrink:0;
}

/* Kleiner Hinweistext (z. B. „keine vertraulichen Inhalte senden") */
.form-hinweis{
  font-size:13.5px;
  color:var(--meta);
  margin-top:10px;
  margin-bottom:22px;
}

/* Fehlerbox über dem Formular */
.fehler-box{
  background:#FBEFEC;
  border:1px solid #E5C3BA;
  border-radius:12px;
  padding:16px 20px;
  color:#7A3B2E;
  font-size:15px;
  margin-bottom:22px;
}
.fehler-box ul{
  margin-left:20px;
}

/* Erfolgs-Karte nach dem Absenden */
.erfolg-karte{
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:16px;
  padding:40px 34px;
  text-align:center;
}

/* Honeypot-Feld: für Menschen unsichtbar, für Spam-Bots „echt" */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* --------------------------------------------------------------------------
   LESEANSICHT (Impressum, Datenschutz: schmale 1-Spalten-Textseite)
   -------------------------------------------------------------------------- */
.lese{
  max-width:760px;
  margin-inline:auto;
  padding:56px 40px 72px;
}
.lese h1{
  margin-bottom:28px;
}
.lese h2{
  font-size:22px;
  margin-top:36px;
  margin-bottom:12px;
}
.lese ul{
  margin:0 0 1em 22px;
}
.lese .quellen{
  font-size:13.5px;
  color:var(--meta);
  margin-top:40px;
}

/* --------------------------------------------------------------------------
   FOOTER (dunkel, auf allen Seiten identisch)
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--dark);
  color:#fff;
}
.footer-inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:44px 40px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
.footer-title{
  font-family:var(--font-serif);
  font-size:20px;
  font-weight:500;
  margin-bottom:10px;
}
.footer-meta{
  font-size:14px;
  color:#B9C2CD;
  line-height:1.7;
}
.footer-meta a{
  color:#B9C2CD;
}
.footer-meta a:hover{
  color:#fff;
}
.footer-links{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
}
.footer-links a{
  color:#9FA9B6;
  font-size:15px;
}
.footer-links a:hover{
  color:#fff;
}

/* --------------------------------------------------------------------------
   RESPONSIVE: Tablet & Handy
   -------------------------------------------------------------------------- */

/* Zweispaltige Seiten-Layouts brechen früher um als die Navigation */
@media (max-width:860px){
  .ueber-grid{
    grid-template-columns:1fr;
    gap:44px;
  }
  .ueber-grid .ueber-bild{
    max-width:280px;
  }
  .ueber-grid .portrait-rahmen img{
    height:360px;
  }
  .anfahrt-grid{
    grid-template-columns:1fr;
  }
  .karten-flaeche{
    min-height:300px;
  }
}

/* Ab hier: Navigation wird zum Hamburger-Menü */
@media (max-width:760px){

  .header-inner{
    flex-wrap:wrap;           /* Panel rutscht als eigene Zeile darunter */
  }

  .nav-toggle{
    display:block;            /* Hamburger einblenden */
  }

  /* Menü-Panel: volle Breite unter dem Header, Links untereinander */
  .nav{
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding-top:14px;
  }
  .nav-link{
    padding:12px 14px;
  }
  .nav .nav-kontakt{
    margin-left:0;
    margin-top:8px;
  }

  /* Zugeklappter Zustand – wird von js/menu.js gesetzt.
     Ohne JavaScript bleibt das Menü sichtbar (weiterhin bedienbar). */
  .nav.menu-zu{
    display:none;
  }

  /* Mehrspaltige Bereiche untereinander */
  .hero .container{
    grid-template-columns:1fr;   /* Bild unter den Text */
    gap:44px;
  }
  .karten-grid,
  .info-boxen{
    grid-template-columns:1fr;
  }
  .kacheln{
    grid-template-columns:repeat(2, 1fr);
  }
  .cta-leiste{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Ab hier: Handy-Breite (weniger Innenabstand) */
@media (max-width:640px){
  .container,
  .lese{
    padding-inline:20px;
  }
  .header-inner{
    padding-inline:20px;
  }
  .footer-inner{
    padding-inline:20px;
    flex-direction:column;
  }
  .hero .container{
    padding-block:40px 56px;
  }
  .card{
    padding:28px 24px;
  }
  .card-gross{
    padding:28px 24px;
  }
  .formular-karte{
    padding:26px 22px;
  }
  .cta-leiste{
    padding:28px 24px;
  }
}

/* --------------------------------------------------------------------------
   REDUZIERTE BEWEGUNG: Wer im Betriebssystem „Bewegung reduzieren"
   eingestellt hat, bekommt keine Animationen und kein sanftes Scrollen.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}