/* ── Riedel IT – Design „Grün": alte Farbwelt, modern & responsiv ── */

:root {
  color-scheme: light;
  --gruen: #7f9832;          /* Original-Akzent der alten Seite */
  --gruen-dunkel: #5d7024;
  --gruen-tief: #46551c;
  --gruen-hell: #f2f5e4;
  --oliv: #6d7a45;           /* Hintergrund-Oliv des alten Templates */
  --oliv-dunkel: #4a5230;
  --braun: #6b6046;          /* Braunton der alten Info-Boxen */
  --braun-hell: #8a7c60;
  --creme: #faf9f3;
  --papier: #ffffff;
  --ink: #33352a;
  --ink-soft: #63665a;
  --line: #e3e2d4;
  --header-bg: rgba(255, 255, 255, 0.96);
  --tun-bg: #f4f8e8;
  --lassen-bg: #fbf0ec;
  --rot: #a4381f;
  /* Marken-Button: kräftiges Grün + weiße Schrift, in HELL wie DUNKEL gleich
     (bewusst NICHT im Dark-Block überschrieben → hoher Wiedererkennungswert) */
  --btn-bg: #7f9832;
  --btn-bg-hover: #5d7024;
  --radius: 10px;
  --schatten: 0 2px 14px rgba(70, 85, 28, 0.10);
  --font: Helvetica, "Helvetica Neue", Arial, FreeSans, sans-serif;
}

/* ── Dark Mode ──────────────────────────────────────────────────────
   Zwei Wege, gleiche Werte:
   1) automatisch nach Systemeinstellung (prefers-color-scheme)
   2) manuell per Umschalt-Knopf (data-theme="dunkel")
   data-theme="hell" erzwingt hell und übersteuert die Systemeinstellung.
   Akzentgrün wird für dunklen Grund etwas aufgehellt (Kontrast/Lesbarkeit),
   bleibt aber klar als Marken-Grün erkennbar. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    color-scheme: dark;
    --gruen: #93b03f;
    --gruen-dunkel: #aecb5c;
    --gruen-tief: #c2d878;
    --gruen-hell: #2b3119;
    --creme: #17180f;
    --papier: #22241a;
    --ink: #e9eae0;
    --ink-soft: #adb0a1;
    --line: #383a2d;
    --header-bg: rgba(26, 28, 19, 0.94);
    --tun-bg: #232a15;
    --lassen-bg: #33211c;
    --rot: #f0a08c;
    --schatten: 0 2px 14px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dunkel"] {
  color-scheme: dark;
  --gruen: #93b03f;
  --gruen-dunkel: #aecb5c;
  --gruen-tief: #c2d878;
  --gruen-hell: #2b3119;
  --creme: #17180f;
  --papier: #22241a;
  --ink: #e9eae0;
  --ink-soft: #adb0a1;
  --line: #383a2d;
  --header-bg: rgba(26, 28, 19, 0.94);
  --tun-bg: #232a15;
  --lassen-bg: #33211c;
  --rot: #f0a08c;
  --schatten: 0 2px 14px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--creme);
}

/* Sicherheitsnetz: kein horizontales Verschieben der Gesamtseite */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Bei geöffnetem mobilem Menü den Hintergrund nicht scrollen lassen */
html.menu-offen { overflow: hidden; }

img { max-width: 100%; height: auto; }

.container { max-width: 1100px; margin-inline: auto; padding-inline: 1.25rem; }

.skip-link { position: absolute; left: -999px; background: var(--gruen-tief); color: #fff; padding: .5rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }

/* Zweifarbige Überschriften — Echo des alten Designs                */
/* (erstes Wort dunkel, Rest grün, wie beim alten GantryBuildSpans)  */
.zweifarbig em { font-style: normal; color: var(--gruen); }

/* ── Header ──────────────────────────────────────────────────────── */

.g-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--gruen);
  transition: transform .28s ease;
}
.g-header--versteckt { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .g-header { transition: none; }
}
.g-header-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 76px; }
.g-logo { margin-right: auto; display: flex; align-items: center; flex-shrink: 0; }
.g-logo img { height: 44px; width: auto; max-width: none; }

.g-nav { display: flex; align-items: center; gap: .9rem; }
.g-nav > ul { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.g-nav > ul > li { flex: 0 0 auto; }
.g-nav a { white-space: nowrap; }

/* Einstellungs-Gruppe (Hell/Dunkel, später Sprache): auf dem Desktop rechts
   neben der Navigation, auf dem Handy unten im geöffneten Menü */
.g-settings { display: flex; align-items: center; gap: .5rem; }
.farb-toggle .ft-text { display: none; }
.sprach-link {
  font-weight: 700; font-size: .9rem; text-decoration: none;
  color: var(--gruen-dunkel); padding: .28rem .5rem; border-radius: 6px;
  border: 1px solid var(--line); line-height: 1;
}
.sprach-link:hover { background: var(--gruen-hell); color: var(--gruen-tief); }
.g-nav a {
  display: block; padding: .5rem .85rem; border-radius: 999px;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem;
}
.g-nav a:hover { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.g-nav a[aria-current="page"] { background: var(--btn-bg); color: #fff; }

/* Untermenü: Disclosure-Muster — Text = Link, Pfeil-Knopf = auf/zu.
   Desktop zusätzlich bequem per Hover; Zustand .offen wird per JS gesetzt. */
.g-nav .hat-untermenue {
  position: relative;
  display: flex; align-items: center;
}
.untermenue-toggle {
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0; margin-left: .1rem;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--gruen-tief); cursor: pointer;
}
.untermenue-toggle:hover { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.untermenue-toggle svg { transition: transform .2s ease; }
.hat-untermenue.offen > .untermenue-toggle svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .untermenue-toggle svg { transition: none; } }

.g-nav .untermenue {
  position: absolute; left: 0; top: 100%; min-width: 240px;
  background: var(--papier); border: 1px solid var(--line); border-top: 3px solid var(--gruen);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 12px 28px rgba(70,85,28,.18);
  padding: .4rem; margin: 0; list-style: none;
  display: none; flex-direction: column;
}
/* Hover öffnet nur am Desktop mit echter Maus (nicht auf Touch-Geräten) */
@media (min-width: 1141px) and (hover: hover) {
  .g-nav .hat-untermenue:hover > .untermenue { display: flex; }
}
/* Per Pfeil-Knopf geöffnet: gilt auf allen Geräten */
.g-nav .hat-untermenue.offen > .untermenue { display: flex; }
.untermenue a { border-radius: 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: .97rem;
  text-decoration: none; white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-gruen { background: var(--btn-bg); color: #fff; }
.btn-gruen:hover { background: var(--btn-bg-hover); }
.btn-dunkel { background: var(--oliv-dunkel); color: #fff; }
.btn-dunkel:hover { background: var(--gruen-tief); }
.btn-rand { border: 2px solid var(--line); color: var(--ink); background: transparent; }
.btn-rand:hover { border-color: var(--gruen); color: var(--gruen-dunkel); }
.btn-lg { padding: .85rem 1.6rem; font-size: 1.05rem; }

/* Hell/Dunkel-Umschalter (Sonne in Dunkel, Mond in Hell) */
.farb-toggle {
  display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0; flex: 0 0 auto;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--gruen-tief); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.farb-toggle:hover { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.farb-toggle .icon-sonne { display: none; }
.farb-toggle .icon-mond { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .farb-toggle .icon-sonne { display: block; }
  :root:not([data-theme="hell"]) .farb-toggle .icon-mond { display: none; }
}
:root[data-theme="dunkel"] .farb-toggle .icon-sonne { display: block; }
:root[data-theme="dunkel"] .farb-toggle .icon-mond { display: none; }

/* Zertifikats-Logos (dunkles Logo auf Transparenz) im Dark Mode auf helle
   Fläche setzen, damit sie lesbar bleiben. Trifft nur Logos in <p>, nicht das Foto. */
:root[data-theme="dunkel"] .leisten-box p img,
:root[data-theme="dunkel"] .zertifikate img { background: #fff; padding: .4rem; border-radius: 8px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .leisten-box p img,
  :root:not([data-theme="hell"]) .zertifikate img { background: #fff; padding: .4rem; border-radius: 8px; }
}

.nav-toggle { display: none; }
.nav-toggle-label { display: none; }

/* ── Datenrettungs-Streifen (direkt unter der Kopfzeile, sofort sichtbar) ── */

.dr-band {
  background: var(--gruen-hell);
  border-bottom: 1px solid var(--line);
  padding: 1.3rem 0 1.4rem;
}
.dr-titel {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 800; line-height: 1.2;
  color: var(--gruen-tief);
  margin: 0 0 .35rem;
}
.dr-text { margin: 0 0 .85rem; color: var(--ink-soft); max-width: 78ch; font-size: .97rem; }
.dr-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: 0 0 1rem; padding: 0;
}
.dr-chips a {
  display: inline-block; padding: .34rem .8rem;
  border-radius: 999px; background: var(--papier);
  border: 1px solid var(--line); color: var(--gruen-dunkel);
  text-decoration: none; font-weight: 650; font-size: .88rem;
  transition: border-color .15s ease, background .15s ease;
}
.dr-chips a:hover { border-color: var(--gruen); color: var(--gruen-tief); }
.dr-aktionen { display: flex; flex-wrap: wrap; gap: .7rem; }

@media (max-width: 480px) {
  .dr-band { padding: 1.1rem 0 1.2rem; }
  .dr-text { font-size: .92rem; }
  .dr-aktionen .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Hero ────────────────────────────────────────────────────────── */

.g-hero {
  background:
    radial-gradient(900px 480px at 110% -20%, rgba(127, 152, 50, .32), transparent 60%),
    linear-gradient(155deg, var(--oliv-dunkel), var(--oliv) 75%);
  color: #fff;
  padding: 4rem 0 3.5rem;
}
.g-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 3rem; align-items: center;
}
.g-hero h1 {
  font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.22; margin: 0 0 1.25rem;
}
.g-hero h1 .zitat { color: #e8efce; }
.g-hero p { color: #dfe5c8; max-width: 58ch; margin: 0 0 2rem; font-size: 1.1rem; }
.g-hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.g-hero .btn-rand { border-color: rgba(255,255,255,.4); color: #fff; }
.g-hero .btn-rand:hover { border-color: #fff; }

.g-hero-foto { position: relative; text-align: center; margin: -2.5rem 0 0; }
.g-hero-foto img {
  display: block;
  margin-inline: auto;
  /* Puffer, damit die durch die Drehung überstehenden Ecken nie anstoßen */
  max-width: calc(100% - 20px);
  border-radius: var(--radius);
  border: 5px solid rgba(255,255,255,.85);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  transform: rotate(2deg);
}
.g-hero-foto figcaption {
  display: inline-block; margin-top: 1rem; padding: .35rem 1rem;
  background: var(--btn-bg); border-radius: 999px;
  font-size: .9rem; font-weight: 700; color: #fff;
}

.g-badges {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem;
  margin-top: 2.75rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.22);
  color: #cdd6ab; font-size: .92rem;
}
.g-badges strong { display: block; color: #fff; font-size: 1.2rem; }

/* ── Sektionen ───────────────────────────────────────────────────── */

.sektion { padding: 4rem 0; }
.sektion-creme { background: var(--gruen-hell); }
.sektion-kopf { max-width: 62ch; margin-bottom: 2.25rem; }
.sektion-kopf h2 { font-size: 1.8rem; margin: 0 0 .5rem; color: var(--ink); }
.sektion-kopf p { color: var(--ink-soft); margin: 0; }

/* Leistungs-Karten mit Original-Bildern */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.6rem; }
.karte {
  background: var(--papier); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--schatten);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.karte:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(70,85,28,.16); }
.karte-bild { aspect-ratio: 16/9; overflow: hidden; background: var(--gruen-hell); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karte-text { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.karte h3 { margin: 0 0 .5rem; font-size: 1.2rem; color: var(--gruen-tief); }
.karte p { margin: 0 0 1.2rem; color: var(--ink-soft); flex: 1; }
.karte-link { color: var(--gruen-dunkel); font-weight: 700; text-decoration: none; }
.karte-link:hover { text-decoration: underline; }

/* Leistungsliste */
.haken { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .6rem 2rem; list-style: none; padding: 0; margin: 0; }
.haken li { padding-left: 1.75rem; position: relative; }
.haken li::before { content: "✓"; position: absolute; left: 0; color: var(--gruen); font-weight: 800; }
.haken a { color: var(--gruen-dunkel); }

/* Kundenstimmen */
.stimmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; }
.stimme {
  background: var(--papier); border-left: 5px solid var(--gruen);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.6rem; box-shadow: var(--schatten);
}
.stimme p { margin: 0 0 1rem; font-style: italic; color: var(--ink); }
.stimme cite { font-style: normal; font-weight: 700; color: var(--gruen-dunkel); font-size: .95rem; }

/* Zertifikate */
.zertifikate { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3rem; }
.zertifikate figure { margin: 0; text-align: center; }
.zertifikate img { max-height: 110px; width: auto; }
.zertifikate figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: .5rem; }

/* CTA-Band */
.cta-band {
  background: linear-gradient(135deg, var(--gruen-dunkel), var(--oliv-dunkel));
  color: #fff; border-radius: var(--radius); padding: 2.5rem 2rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.cta-band h2 { margin: 0 0 .3rem; font-size: 1.5rem; }
.cta-band p { margin: 0; color: #dfe5c8; }

/* ── Unterseiten ─────────────────────────────────────────────────── */

.seiten-hero {
  background: linear-gradient(155deg, var(--oliv-dunkel), var(--oliv));
  color: #fff; padding: 3rem 0 2.5rem;
}
.seiten-hero h1 { margin: 0; font-size: clamp(1.5rem, 3.5vw, 2.3rem); line-height: 1.25; }
.seiten-hero h1 em { font-style: normal; color: #dbe6ad; }

.seiten-körper {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3rem; padding-top: 3rem; padding-bottom: 4rem;
}

.prosa h2 { color: var(--gruen-tief); font-size: 1.45rem; margin: 2.25rem 0 .75rem; }
.prosa h3 { color: var(--gruen-tief); font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
.prosa > :first-child { margin-top: 0; }
.prosa a { color: var(--gruen-dunkel); }
.prosa ul, .prosa ol { padding-left: 1.4rem; }
.prosa li { margin-bottom: .3rem; }
.prosa img { border-radius: var(--radius); box-shadow: var(--schatten); margin: .75rem 0; }
.prosa table { border-collapse: collapse; }
.prosa td { padding: .2rem .6rem .2rem 0; vertical-align: top; }
.prosa iframe { max-width: 100%; border-radius: var(--radius); }
.prosa blockquote {
  margin: 1.5rem 0; padding: 1rem 1.35rem; border-left: 4px solid var(--gruen);
  background: var(--gruen-hell); border-radius: 0 8px 8px 0; color: var(--ink-soft);
}

/* Seitenleiste — modernes Echo der alten Sidebar */
.seitenleiste { align-self: start; position: sticky; top: 100px; display: grid; gap: 1.5rem; }
.leisten-box {
  background: var(--papier); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--schatten); text-align: center;
}
.leisten-box h2 {
  margin: 0 0 1rem; font-size: 1.02rem; color: var(--gruen-tief);
  padding-bottom: .6rem; border-bottom: 2px solid var(--gruen-hell);
}
.leisten-box p { margin: 0 0 .75rem; font-size: .95rem; color: var(--ink-soft); }
.leisten-box img { border-radius: 8px; }
.leisten-box .btn { width: 100%; margin-top: .5rem; }

/* ── Inhalts-Bausteine (RAID/NAS-Seite u. a.) ────────────────────── */

.brotkrumen { font-size: .88rem; margin: 0 0 1.25rem; color: var(--ink-soft); }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.brotkrumen li + li::before { content: "›"; margin-right: .35rem; color: var(--gruen); }
.brotkrumen a { color: var(--gruen-dunkel); text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }

.inhaltsverz {
  background: var(--gruen-hell); border-radius: var(--radius);
  padding: 1.1rem 1.4rem; margin: 1.5rem 0 2rem;
}
.inhaltsverz strong { color: var(--gruen-tief); display: block; margin-bottom: .4rem; }
.inhaltsverz ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.inhaltsverz li { margin-bottom: .25rem; break-inside: avoid; }
.inhaltsverz a { color: var(--gruen-dunkel); text-decoration: none; }
.inhaltsverz a:hover { text-decoration: underline; }
@media (max-width: 640px) { .inhaltsverz ol { columns: 1; } }

.notfall-box {
  border: 2px solid var(--gruen); border-radius: var(--radius);
  overflow: hidden; margin: 1.75rem 0;
}
.notfall-box header {
  background: var(--btn-bg); color: #fff; font-weight: 800;
  padding: .65rem 1.25rem;
}
.notfall-spalten { display: grid; grid-template-columns: 1fr 1fr; }
.notfall-spalten > div { padding: 1rem 1.25rem; }
.notfall-spalten h3 { margin: 0 0 .5rem; font-size: 1rem; }
.notfall-spalten ul { margin: 0; padding-left: 1.2rem; font-size: .97rem; }
.notfall-tun { background: var(--tun-bg); }
.notfall-tun h3 { color: var(--gruen-dunkel); }
.notfall-lassen { background: var(--lassen-bg); }
.notfall-lassen h3 { color: var(--rot); }
@media (max-width: 640px) { .notfall-spalten { grid-template-columns: 1fr; } }

.raid-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .8rem; margin: 1.25rem 0; padding: 0; list-style: none;
}
.raid-grid li {
  background: var(--papier); border: 1px solid var(--line); border-radius: 8px;
  padding: .75rem .9rem; text-align: center; box-shadow: var(--schatten);
  margin: 0; font-size: .92rem; color: var(--ink-soft);
}
.raid-grid strong { display: block; color: var(--gruen-tief); font-size: 1.05rem; margin-bottom: .15rem; }

.faq details {
  background: var(--papier); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: .75rem; box-shadow: var(--schatten);
}
.faq summary {
  cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; color: var(--gruen-tief);
  list-style: none; position: relative; padding-right: 2.75rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1.1rem; top: 50%;
  transform: translateY(-50%); font-size: 1.5rem; font-weight: 600; color: var(--gruen);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding: 0 1.25rem 1.1rem; color: var(--ink-soft); }
.faq details > div > :first-child { margin-top: 0; }
.faq details > div > :last-child { margin-bottom: 0; }

/* Impressum: Definitionsliste als saubere, umbruchsichere zwei Spalten */
.impressum-liste {
  display: grid; grid-template-columns: max-content 1fr;
  gap: .5rem 1.5rem; margin: 1rem 0 1.75rem; max-width: 100%;
}
.impressum-liste dt { color: var(--ink-soft); }
.impressum-liste dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.impressum-liste a { color: var(--gruen-dunkel); }
@media (max-width: 480px) {
  .impressum-liste { grid-template-columns: 1fr; gap: .1rem; }
  .impressum-liste dd { margin-bottom: .6rem; }
}

/* ── Kontakt ─────────────────────────────────────────────────────── */

.kontakt-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; margin: 2rem 0 2.5rem; }
.kontakt-kachel {
  background: var(--papier); border: 1px solid var(--line); border-top: 4px solid var(--gruen);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--schatten);
}
.kontakt-kachel h3 { margin: 0 0 .4rem; font-size: 1.02rem; color: var(--gruen-tief); }
.kontakt-kachel p { margin: 0; color: var(--ink-soft); }
.kontakt-kachel a { color: var(--gruen-dunkel); font-weight: 700; text-decoration: none; }
.kontakt-kachel a:hover { text-decoration: underline; }
.karte-rahmen { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.karte-rahmen iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ── Footer ──────────────────────────────────────────────────────── */

.g-footer { background: var(--oliv-dunkel); color: #cdd6ab; padding: 3rem 0 1.5rem; font-size: .95rem; }
.g-footer a { color: #e8efce; text-decoration: none; }
.g-footer a:hover { text-decoration: underline; }
.g-footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.15);
}
.g-footer h2 { font-size: 1rem; color: #fff; margin: 0 0 .65rem; }
.g-footer ul { list-style: none; margin: 0; padding: 0; }
.g-footer li { margin-bottom: .35rem; }
.g-footer-unten { padding-top: 1.25rem; font-size: .85rem; color: #a8b384; }
.g-footer-unten p { margin: 0; }

/* ── Einblend-Effekt (sanft, respektiert Reduzierte-Bewegung) ───── */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .karte, .karte:hover { transform: none; transition: none; }
}

/* ── Mobil ───────────────────────────────────────────────────────── */

@media (max-width: 1140px) {
  .g-header-inner { flex-wrap: wrap; gap: .75rem; }
  .nav-toggle-label {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; cursor: pointer; order: 3;
  }
  .nav-toggle-label span { display: block; height: 2px; background: var(--gruen-tief); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Menü als überlagerndes Dropdown – verändert den Seitenfluss NICHT,
     dadurch springt die Scrollposition beim Öffnen nicht mehr */
  .g-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch;
    background: var(--header-bg);
    backdrop-filter: blur(8px);
    border-bottom: 3px solid var(--gruen);
    box-shadow: 0 14px 24px rgba(70, 85, 28, 0.14);
    padding: .5rem 1.25rem 1rem;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .nav-toggle:checked ~ .g-nav { display: flex; }
  .g-nav > ul { flex-direction: column; padding-bottom: .75rem; }

  /* Einstellungs-Bereich unten im Menü abgesetzt; Schalter als beschriftete Zeile */
  .g-settings { flex-basis: 100%; border-top: 1px solid var(--line); margin-top: .25rem; padding-top: .5rem; }
  .farb-toggle {
    display: flex; align-items: center; justify-content: flex-start;
    width: 100%; height: auto; gap: .6rem;
    padding: .6rem .85rem; border-radius: 8px;
    color: var(--ink); font-weight: 600; font-size: .97rem;
  }
  .farb-toggle .ft-text { display: inline; }

  /* Untermenü mobil: dauerhaft ausgeklappt (wenige Unterpunkte – nichts
     verstecken, ein Tipp weniger). Der Pfeil-Knopf entfällt deshalb hier. */
  .g-nav .hat-untermenue { flex-wrap: wrap; }
  .g-nav .hat-untermenue > a { flex: 1; }
  .untermenue-toggle { display: none; }
  .g-nav .untermenue {
    position: static; min-width: 0; flex-basis: 100%;
    display: flex;
    border: 0; border-left: 3px solid var(--gruen);
    box-shadow: none; border-radius: 0;
    margin-left: 1rem; padding: 0 0 .25rem .25rem;
  }
  .btn-phone-kopf { order: 2; margin-left: auto; }

  .g-hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .g-hero-foto { order: -1; margin-top: 0; }
  .g-hero-foto img { max-width: min(320px, calc(100% - 20px)); }
  .seiten-körper { grid-template-columns: 1fr; gap: 2rem; }
  .seitenleiste { position: static; }
}

@media (max-width: 540px) {
  /* Telefon-Button nur als Hörer-Symbol, Nummer bleibt im Hero prominent */
  .g-header-inner { gap: .5rem; }
  .btn-phone-kopf { padding: 0; width: 44px; height: 44px; border-radius: 50%; }
  .btn-phone-kopf .btn-phone-text { display: none; }
  .btn-phone-kopf svg { width: 19px; height: 19px; }
}

@media (max-width: 480px) {
  .g-hero { padding: 2.75rem 0 2.5rem; }
  .sektion { padding: 2.75rem 0; }
  .karte-rahmen iframe { height: 320px; }
}