/* EMB – Stylesheet
   Farben stehen oben als Variablen. Logo-Navy: #032241 (aus dem Logo gemessen).
   Knöpfe und dunkle Flächen nutzen das Logo-Navy, kleine Akzente ein helleres Blau daraus. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --logo: #032241;
  --grund: #F6F5F1;
  --flaeche: #FFFFFF;
  --flaeche-2: #EAEEF3;
  --tinte: #14202F;
  --tinte-2: #3F4A58;
  --leise: #637081;
  --linie: #E1E4E8;
  --linie-stark: #C7CDD5;
  --dunkel: #032241;
  --dunkel-2: #0B2F55;
  --auf-dunkel: #EEF2F7;
  --auf-dunkel-leise: #A8B5C7;
  --knopf: #032241;
  --knopf-hover: #0B3566;
  --akzent: #24558F;
  --akzent-hover: #1A4475;
  --akzent-zart: #E5ECF5;
  --akzent-hell: #9DBBE3;
  --ok: #2F6B45;
  --fehler: #A33A2B;

  --schrift: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-titel: "Fraunces", Georgia, "Times New Roman", serif;
  --radius: 14px;
  --radius-gross: 24px;
  --schatten: 0 1px 2px rgba(29, 33, 37, .06), 0 8px 24px rgba(29, 33, 37, .07);
  --schatten-gross: 0 2px 4px rgba(29, 33, 37, .05), 0 24px 60px rgba(29, 33, 37, .14);
  --rand: clamp(16px, 4vw, 32px);
  --abschnitt: clamp(64px, 9vw, 120px);
}

/* Farbvariante nur für den Entwurf (Auswahl im Entwurfs-Panel): Logo-Navy plus warme Holz-Akzente */
html[data-farbe="eiche"] {
  --grund: #F7F4EF; --flaeche-2: #EFEAE2; --linie: #E3DDD3; --linie-stark: #CFC7BA;
  --akzent: #8C5A2B; --akzent-hover: #744820; --akzent-zart: #F1E6D7; --akzent-hell: #D1A06A;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 600; letter-spacing: -.01em; overflow-wrap: break-word; }
h1, h2 { font-family: var(--schrift-titel); font-weight: 560; }
h1 { font-size: clamp(2.35rem, 5.4vw, 4.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt--hell { background: var(--flaeche); }
.abschnitt--ton { background: var(--flaeche-2); }
.zum-inhalt { position: absolute; left: -9999px; top: 8px; background: var(--tinte); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.zum-inhalt:focus { left: 8px; }

.dachzeile {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--akzent); margin-bottom: 18px;
}
.dachzeile::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.kopfzeile { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.kopfzeile p { color: var(--tinte-2); font-size: 1.08rem; margin-top: 16px; }
.kopfzeile--mitte { margin-inline: auto; text-align: center; }
.kopfzeile--mitte .dachzeile { justify-content: center; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent;
  font: 700 .98rem/1 var(--schrift); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.knopf svg { width: 18px; height: 18px; flex: none; }
.knopf--voll { background: var(--knopf); color: #fff; }
.knopf--voll:hover { background: var(--knopf-hover); }
.knopf--rand { border-color: var(--linie-stark); color: var(--tinte); background: transparent; }
.knopf--rand:hover { border-color: var(--tinte); }
.knopf--hell { background: var(--auf-dunkel); color: var(--dunkel); }
.knopf--hell:hover { background: #fff; }
.knopf:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--akzent-hell); outline-offset: 3px; }
.textlink { display: inline-flex; align-items: center; gap: 8px; color: var(--akzent); font-weight: 700; text-decoration: none; }
.textlink svg { width: 16px; height: 16px; transition: transform .2s; }
.textlink:hover svg { transform: translateX(3px); }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 245, 241, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.kopf.gescrollt { border-color: var(--linie); box-shadow: 0 6px 24px rgba(29, 33, 37, .06); }
.kopf .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; position: relative; }
.marke-zeichen { width: 54px; height: 54px; flex: none; border-radius: 10px; }
.marke-text { display: flex; flex-direction: column; line-height: 1.2; gap: 2px; }
.marke-name { font-weight: 800; font-size: .98rem; color: var(--logo); }
.marke-zusatz { font-size: .78rem; color: var(--leise); font-weight: 600; }
.fuss-logo { width: 76px; height: 76px; color: #fff; }
@media (max-width: 400px) { .marke-zeichen { width: 48px; height: 48px; } .marke-name { font-size: .9rem; } }
.menue { display: flex; align-items: center; gap: 4px; }
.menue a { text-decoration: none; font-weight: 600; font-size: .95rem; padding: 10px 14px; border-radius: 999px; color: var(--tinte-2); white-space: nowrap; }
.menue a:hover, .menue a[aria-current="page"] { color: var(--tinte); background: var(--flaeche-2); }
.kopf-aktionen { display: flex; align-items: center; gap: 10px; }
.kopf .knopf { min-height: 44px; padding: 0 20px; font-size: .92rem; }
.tel-knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--linie-stark); color: var(--tinte); }
.tel-knopf:hover { border-color: var(--tinte); }
.tel-knopf svg { width: 18px; height: 18px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--linie-stark); background: transparent; color: var(--tinte); cursor: pointer; align-items: center; justify-content: center; }
.burger svg { width: 20px; height: 20px; }

@media (max-width: 1080px) {
  .burger { display: inline-flex; }
  .kopf .knopf--voll { display: none; }
  .menue {
    position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--grund); border-bottom: 1px solid var(--linie); padding: 8px var(--rand) 20px;
    box-shadow: 0 20px 40px rgba(29, 33, 37, .12);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
  }
  .menue.offen { transform: none; opacity: 1; visibility: visible; }
  .menue a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--linie); font-size: 1.05rem; }
  .menue a:hover { background: transparent; }
  .menue .knopf { margin-top: 16px; border-bottom: 0; border-radius: 999px; color: #fff; justify-content: center; display: inline-flex; }
}
@media (min-width: 1081px) { .menue .knopf { display: none; } }

/* Held */
.held { padding-block: clamp(40px, 6vw, 80px) clamp(64px, 8vw, 104px); }
.held .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.held h1 { margin-bottom: 22px; }
.held h1 em { font-style: normal; color: var(--akzent); }
.einleitung { font-size: clamp(1.06rem, 1.6vw, 1.2rem); color: var(--tinte-2); max-width: 560px; margin-bottom: 30px; }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.haken-liste { display: grid; gap: 10px; }
.haken-liste li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; color: var(--tinte-2); }
.haken-liste svg { width: 22px; height: 22px; flex: none; color: var(--akzent); margin-top: 2px; }
.held-bild { position: relative; margin: 0; }
.held-bild .foto { aspect-ratio: 4 / 5; border-radius: var(--radius-gross); box-shadow: var(--schatten-gross); }
.schwebekarte {
  position: absolute; display: flex; gap: 14px; align-items: center;
  background: var(--flaeche); border-radius: 16px; padding: 16px 18px; box-shadow: var(--schatten-gross);
  max-width: 290px;
}
.schwebekarte strong { display: block; font-size: .98rem; line-height: 1.3; }
.schwebekarte span { display: block; font-size: .84rem; color: var(--leise); line-height: 1.4; margin-top: 2px; }
.schwebekarte .symbol { width: 46px; height: 46px; border-radius: 12px; background: var(--akzent-zart); color: var(--akzent); display: grid; place-items: center; flex: none; }
.schwebekarte .symbol svg { width: 24px; height: 24px; }
.schwebekarte--unten { left: -28px; bottom: 36px; }
.schwebekarte--oben { right: -18px; top: 30px; padding: 12px 16px; }
@media (max-width: 960px) {
  .held .wrap { grid-template-columns: 1fr; }
  .held-bild { max-width: 560px; }
  .held-bild .foto { aspect-ratio: 5 / 4; }
  .schwebekarte--unten { left: 12px; bottom: -24px; }
  .schwebekarte--oben { right: 12px; top: 12px; }
}
@media (max-width: 480px) {
  .schwebekarte { max-width: calc(100% - 24px); }
  .schwebekarte--oben { display: none; }
}

/* Foto-Rahmen (Platzhalter-Grafiken oder später echte Fotos) */
.foto { position: relative; overflow: hidden; background: var(--flaeche-2); border-radius: var(--radius); }
.foto img, .foto video { width: 100%; height: 100%; object-fit: cover; }

/* Leistungen */
.leistungen-raster { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-gross);
  padding: 30px; display: flex; flex-direction: column; gap: 14px; position: relative;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.karte:hover { box-shadow: var(--schatten); border-color: var(--linie-stark); }
.karte p { color: var(--tinte-2); margin: 0; }
.karte .symbol { width: 52px; height: 52px; border-radius: 14px; background: var(--akzent-zart); color: var(--akzent); display: grid; place-items: center; }
.karte .symbol svg { width: 28px; height: 28px; }
.karte .textlink { margin-top: auto; padding-top: 6px; }
.punkte { display: grid; gap: 8px; font-size: .95rem; color: var(--tinte-2); }
.punkte li { display: flex; gap: 10px; }
.punkte li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); flex: none; margin-top: .65em; }
.karte--gross { grid-row: span 2; padding: 0; overflow: hidden; }
.karte--gross .foto { aspect-ratio: 16 / 10; border-radius: 0; }
.karte--gross .karte-inhalt { padding: 30px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.marke-schild { position: absolute; top: 18px; right: 18px; z-index: 2; background: var(--dunkel); color: var(--auf-dunkel); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.karte--breit { grid-column: span 2; flex-direction: row; align-items: center; gap: 24px; }
.karte--breit .karte-text { display: grid; gap: 8px; flex: 1; }
@media (max-width: 1020px) {
  .leistungen-raster { grid-template-columns: 1fr 1fr; }
  .karte--gross { grid-column: span 2; grid-row: auto; }
  .karte--gross .foto { aspect-ratio: 21 / 9; }
}
@media (max-width: 680px) {
  .leistungen-raster { grid-template-columns: 1fr; }
  .karte--gross, .karte--breit { grid-column: auto; }
  .karte--gross .foto { aspect-ratio: 16 / 10; }
  .karte--breit { flex-direction: column; align-items: flex-start; }
  .karte { padding: 24px; }
  .karte--gross { padding: 0; }
  .karte--gross .karte-inhalt { padding: 24px; }
}

/* Dunkles Band: Arbeitszeiten */
.band { background: var(--dunkel); color: var(--auf-dunkel); position: relative; overflow: hidden; }
.band .dachzeile { color: var(--akzent-hell); }
.band h2 { color: #fff; }
.band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.band-text p { color: var(--auf-dunkel-leise); font-size: 1.1rem; margin-top: 18px; }
.band-liste { display: grid; gap: 14px; }
.band-liste li { display: flex; gap: 18px; padding: 22px 24px; border-radius: 18px; background: var(--dunkel-2); border: 1px solid rgba(255, 255, 255, .06); }
.band-liste .symbol { width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, .07); color: var(--akzent-hell); display: grid; place-items: center; flex: none; }
.band-liste .symbol svg { width: 24px; height: 24px; }
.band-liste strong { display: block; color: #fff; font-size: 1.05rem; margin-bottom: 4px; }
.band-liste span { color: var(--auf-dunkel-leise); font-size: .95rem; line-height: 1.55; display: block; }
.band-muster { position: absolute; inset: 0; opacity: .05; pointer-events: none; }
.band-muster img { width: 100%; height: 100%; object-fit: cover; }
.band .wrap { position: relative; }
@media (max-width: 900px) { .band .wrap { grid-template-columns: 1fr; } }

/* Drei Werte */
.werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wert { padding: 30px; border-radius: var(--radius-gross); background: var(--flaeche); border: 1px solid var(--linie); }
.wert .nummer { font-family: var(--schrift-titel); font-size: 2.6rem; line-height: 1; color: var(--akzent); margin-bottom: 18px; display: block; }
.wert h3 { margin-bottom: 10px; }
.wert p { color: var(--tinte-2); margin: 0; }
@media (max-width: 860px) { .werte { grid-template-columns: 1fr; } }

/* Ablauf */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: schritt; }
.schritt { position: relative; padding-top: 28px; border-top: 2px solid var(--linie-stark); }
.schritt::before {
  counter-increment: schritt; content: counter(schritt, decimal-leading-zero);
  position: absolute; top: -15px; left: 0; background: var(--grund); padding-right: 12px;
  font-weight: 800; font-size: .9rem; letter-spacing: .08em; color: var(--akzent);
}
.abschnitt--hell .schritt::before { background: var(--flaeche); }
.schritt h3 { margin-bottom: 8px; }
.schritt p { color: var(--tinte-2); font-size: .97rem; margin: 0; }
@media (max-width: 900px) { .ablauf { grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (max-width: 560px) { .ablauf { grid-template-columns: 1fr; } }

/* Galerie */
.galerie { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.galerie figure { margin: 0; position: relative; }
.galerie button { all: unset; display: block; cursor: zoom-in; border-radius: var(--radius); width: 100%; height: 100%; }
.galerie button:focus-visible { outline: 3px solid var(--akzent-hell); outline-offset: 3px; }
.galerie .foto { height: 100%; min-height: 220px; }
.galerie .foto img { transition: transform .6s ease; }
.galerie button:hover .foto img { transform: scale(1.04); }
.galerie figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(255, 255, 255, .92); border-radius: 10px; padding: 10px 14px; font-size: .88rem; line-height: 1.35;
}
.galerie figcaption strong { display: block; font-size: .93rem; }
.galerie figcaption span { color: var(--leise); }
.g1 { grid-column: span 7; grid-row: span 2; }
.g2 { grid-column: span 5; }
.g3 { grid-column: span 5; }
.g4 { grid-column: span 4; }
.g5 { grid-column: span 4; }
.g6 { grid-column: span 4; }
.g1 .foto { min-height: 460px; }
@media (max-width: 860px) {
  .galerie { grid-template-columns: 1fr 1fr; }
  .galerie figure { grid-column: auto; grid-row: auto; }
  .g1 { grid-column: span 2; }
  .g1 .foto { min-height: 300px; }
}
@media (max-width: 520px) {
  .galerie { grid-template-columns: 1fr; }
  .g1 { grid-column: auto; }
}
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); width: 100%; }
.lightbox::backdrop { background: rgba(15, 17, 19, .86); }
.lightbox img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 12px; background: #111; }
.lightbox p { color: #fff; text-align: center; margin: 14px 0 0; font-weight: 600; }
.lightbox-zu { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); cursor: pointer; display: grid; place-items: center; }
.lightbox-zu svg { width: 20px; height: 20px; }

/* Boden-Ratgeber Kurzform */
.boeden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.boden { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-gross); overflow: hidden; display: flex; flex-direction: column; }
.boden .foto { aspect-ratio: 16 / 7; border-radius: 0; }
.boden-inhalt { padding: 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.boden-inhalt p { color: var(--tinte-2); margin: 0; font-size: .97rem; }
.ideal { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--akzent); }
.merkmale { display: grid; gap: 8px; margin-top: 4px; }
.merkmale li { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; border-top: 1px solid var(--linie); padding-top: 8px; }
.merkmale li span:first-child { color: var(--leise); }
.merkmale li span:last-child { font-weight: 700; text-align: right; }
.ratgeber-fuss { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; border-radius: var(--radius); background: var(--akzent-zart); }
.ratgeber-fuss p { margin: 0; font-weight: 600; }
@media (max-width: 900px) { .boeden { grid-template-columns: 1fr; } }

/* Einsatzgebiet */
.gebiet { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.gebiet-text h2, .kontakt-text h2 { margin-bottom: 18px; }
.gebiet-text p { color: var(--tinte-2); }
.orte { display: flex; flex-wrap: wrap; gap: 10px; }
.orte li { padding: 10px 16px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); font-weight: 600; font-size: .94rem; }
.orte li.heim { background: var(--dunkel); color: var(--auf-dunkel); border-color: var(--dunkel); }
.orte li.weit { border-style: dashed; color: var(--tinte-2); }
.gebiet-hinweis { margin-top: 22px; display: flex; gap: 12px; color: var(--tinte-2); font-size: .95rem; }
.gebiet-hinweis svg { width: 22px; height: 22px; flex: none; color: var(--akzent); margin-top: 2px; }
@media (max-width: 860px) { .gebiet { grid-template-columns: 1fr; } }

/* Bewertungen (erst nach Google-Profil) */
.stimmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stimme { background: var(--flaeche); border: 1px dashed var(--linie-stark); border-radius: var(--radius-gross); padding: 26px; display: grid; gap: 14px; }
.sterne { display: flex; gap: 3px; color: #C9A23A; }
.sterne svg { width: 18px; height: 18px; }
.leerzeile { height: 10px; border-radius: 6px; background: var(--flaeche-2); }
.leerzeile.kurz { width: 60%; }
@media (max-width: 860px) { .stimmen { grid-template-columns: 1fr; } }

/* Bewertung bei MyHammer. Eine ehrliche Karte mit der echten Note und einem
   Link zum Profil, statt erfundener Stimmen. Die Bewertungstexte gehoeren den
   Kunden, deshalb werden sie nicht kopiert. Fabian hat die Verlinkung am
   04.11.2026 erlaubt. */
.bewertung-karte {
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--radius-gross); padding: clamp(24px, 4vw, 34px);
  display: grid; gap: 14px; justify-items: center; text-align: center;
  max-width: 520px; margin: 0 auto;
}
/* Im Raster bekommt jedes Kind sonst seine volle Textbreite und steht am
   schmalen Handy ueber den Rand (gemessen bei 360 px: 378 statt 360). */
.bewertung-karte > * { max-width: 100%; }
.bewertung-karte .knopf { white-space: normal; }
.bewertung-karte .sterne svg { width: 26px; height: 26px; }
.bewertung-zahl { margin: 0; color: var(--tinte-2); }
.bewertung-zahl strong { color: var(--tinte); font-size: 1.25rem; }

/* Fragen */
.fragen-raster { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.fragen-raster .kopfzeile { position: sticky; top: 110px; }
.fragen { display: grid; gap: 12px; }
.fragen details { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.fragen summary {
  list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-weight: 700; position: relative; line-height: 1.4;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); transform: rotate(45deg); transition: transform .2s;
}
.fragen details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.fragen details > div { padding: 0 22px 20px; color: var(--tinte-2); }
.fragen details > div p:last-child { margin: 0; }
@media (max-width: 900px) { .fragen-raster { grid-template-columns: 1fr; } .fragen-raster .kopfzeile { position: static; } }

/* Kontakt */
.kontakt { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.kontakt-text > p { color: var(--tinte-2); font-size: 1.06rem; }
.direkt { display: grid; gap: 12px; margin-top: 28px; }
.direkt a, .direkt div { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; }
.direkt a:hover { border-color: var(--linie-stark); box-shadow: var(--schatten); }
.direkt .symbol { width: 44px; height: 44px; border-radius: 12px; background: var(--akzent-zart); color: var(--akzent); display: grid; place-items: center; flex: none; }
.direkt .symbol svg { width: 22px; height: 22px; }
.direkt small { display: block; color: var(--leise); font-size: .82rem; font-weight: 600; }
.direkt strong { display: block; font-size: 1.02rem; word-break: break-word; }
.formular { background: var(--flaeche); border-radius: var(--radius-gross); padding: clamp(24px, 4vw, 40px); box-shadow: var(--schatten-gross); border: 1px solid var(--linie); }
.formular h3 { font-size: 1.35rem; margin-bottom: 6px; }
.formular > p { color: var(--leise); font-size: .95rem; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.feld-voll { grid-column: 1 / -1; }
.eingabe label, .eingabe legend { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 7px; padding: 0; }
.eingabe label .opt { font-weight: 500; color: var(--leise); }
.eingabe input, .eingabe select, .eingabe textarea {
  width: 100%; font: 500 1rem/1.4 var(--schrift); color: var(--tinte);
  background: var(--grund); border: 1.5px solid var(--linie); border-radius: 12px; padding: 13px 14px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.eingabe textarea { min-height: 130px; resize: vertical; }
.eingabe input:focus, .eingabe select:focus, .eingabe textarea:focus { outline: 0; border-color: var(--akzent); background: #fff; box-shadow: 0 0 0 4px var(--akzent-zart); }
.eingabe fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.eingabe .chip input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  border: 1.5px solid var(--linie); background: var(--grund); font-weight: 600; font-size: .94rem; cursor: pointer; user-select: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip input:checked + span { background: var(--dunkel); border-color: var(--dunkel); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--akzent-hell); outline-offset: 2px; }
.zustimmung { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--tinte-2); line-height: 1.5; }
.zustimmung input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--akzent); flex: none; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular .knopf { width: 100%; margin-top: 6px; }
.meldung { display: none; margin-top: 16px; padding: 14px 16px; border-radius: 12px; font-weight: 600; font-size: .95rem; }
.meldung.ok { display: block; background: #E6F1EA; color: var(--ok); }
.meldung.fehler { display: block; background: #F6E4E1; color: var(--fehler); }
@media (max-width: 900px) { .kontakt { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .felder { grid-template-columns: 1fr; } }

/* Abschluss-Band */
.aufruf { background: var(--knopf); color: #fff; border-radius: var(--radius-gross); padding: clamp(32px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.aufruf h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: 640px; }
.aufruf p { margin: 10px 0 0; opacity: .85; }
.aufruf .knopf--hell { color: var(--knopf); }

/* Fuß */
.fuss { background: var(--dunkel); color: var(--auf-dunkel-leise); padding-block: 64px 28px; font-size: .95rem; }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.fuss h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.fuss ul { display: grid; gap: 10px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss .marke { color: #fff; margin-bottom: 16px; }
.fuss .marke-zusatz { color: var(--auf-dunkel-leise); }
.fuss-unten { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .86rem; }
.fuss-unten nav { display: flex; gap: 20px; flex-wrap: wrap; }
.sozial { display: flex; gap: 10px; margin-top: 18px; }
.sozial a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); display: grid; place-items: center; color: var(--auf-dunkel); }
.sozial a:hover { background: rgba(255, 255, 255, .08); }
.sozial svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fuss-raster { grid-template-columns: 1fr; } }

/* Unterseiten */
.seitenkopf { padding-block: clamp(40px, 6vw, 80px) clamp(32px, 4vw, 56px); }
.pfad { display: flex; gap: 8px; font-size: .88rem; color: var(--leise); margin-bottom: 22px; flex-wrap: wrap; }
.pfad a { text-decoration: none; }
.pfad a:hover { color: var(--tinte); }
.seitenkopf h1 { margin-bottom: 20px; }
.seitenkopf .einleitung { max-width: 720px; margin-bottom: 0; }
.unternav { position: sticky; top: 76px; z-index: 40; background: rgba(246, 245, 241, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-block: 1px solid var(--linie); }
.unternav ul { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.unternav ul::-webkit-scrollbar { display: none; }
.unternav a { display: block; white-space: nowrap; text-decoration: none; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--tinte-2); }
.unternav a:hover, .unternav a.aktiv { background: var(--dunkel); color: #fff; }
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.detail--gedreht .detail-bild { order: 2; }
.detail-bild .foto { aspect-ratio: 4 / 3; border-radius: var(--radius-gross); box-shadow: var(--schatten); }
.detail-text h2 { margin-bottom: 16px; }
.detail-text > p { color: var(--tinte-2); }
.zwei-listen { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.zwei-listen h3 { font-size: 1rem; margin-bottom: 12px; }
@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; }
  .detail--gedreht .detail-bild { order: 0; }
}
@media (max-width: 520px) { .zwei-listen { grid-template-columns: 1fr; } }

/* Vergleichstabelle */
.tabelle-huelle { overflow-x: auto; border-radius: var(--radius-gross); border: 1px solid var(--linie); background: var(--flaeche); }
.vergleich { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.vergleich th, .vergleich td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
.vergleich thead th { background: var(--dunkel); color: #fff; font-size: .9rem; letter-spacing: .02em; }
.vergleich tbody th { font-weight: 700; color: var(--tinte); white-space: nowrap; position: sticky; left: 0; background: var(--flaeche); }
.vergleich tbody tr:last-child th, .vergleich tbody tr:last-child td { border-bottom: 0; }
.vergleich td { color: var(--tinte-2); }
.bewertung { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 8px; }
.bewertung i { width: 9px; height: 9px; border-radius: 50%; background: var(--linie); }
.bewertung i.an { background: var(--akzent); }
.tabelle-hinweis { font-size: .86rem; color: var(--leise); margin-top: 12px; }

.gegenueber { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
@media (max-width: 760px) { .gegenueber { grid-template-columns: 1fr; } }

.muster-raster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.muster { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.muster .foto { aspect-ratio: 1; border-radius: 0; }
.muster .foto--diagonal img { transform: rotate(45deg) scale(1.5); }
.muster > div:last-child { padding: 14px 16px 16px; }
.muster strong { display: block; font-size: .98rem; }
.muster span { font-size: .86rem; color: var(--leise); line-height: 1.45; display: block; margin-top: 4px; }
@media (max-width: 1000px) { .muster-raster { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .muster-raster { grid-template-columns: 1fr 1fr; } }

/* Rechtstexte */
.rechtstext { max-width: 780px; }
.rechtstext h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.rechtstext h3 { font-size: 1.1rem; margin: 26px 0 8px; }
.rechtstext p, .rechtstext li { color: var(--tinte-2); }
.rechtstext ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.rechtstext address { font-style: normal; color: var(--tinte-2); margin-bottom: 1em; }
/* "Datenschutzerklärung" ist ein langes Wort: in den Rechtstexten ist die Überschrift
   deshalb kleiner, damit sie am Handy in eine Zeile passt und nicht über den Rand steht.
   Die Silbentrennung greift zusätzlich auf sehr schmalen Geräten. */
.rechtstext h1 { font-size: clamp(1.95rem, 4.6vw, 3.2rem); }
.rechtstext h1, .rechtstext h2, .rechtstext h3 { hyphens: auto; -webkit-hyphens: auto; }
/* Noch fehlende Angaben, vor dem Livegang ersetzen */
.luecke { background: #FFE48F; color: #3B2F00; padding: 1px 6px; border-radius: 4px; font-weight: 600; }

/* Band über der Seite in geteilten Vorschauen (nicht auf der echten Website) */
.vorschau-band { background: #FFE48F; color: #3B2F00; text-align: center; font: 600 13px/1.4 var(--schrift); padding: 8px 16px; }

/* Platzhalter-Hinweise, nur im Entwurf sichtbar */
.nur-entwurf { display: none !important; }
html.entwurf .nur-entwurf { display: revert !important; }
html.entwurf section.nur-entwurf { display: block !important; }
html.entwurf [data-hinweis] { position: relative; }
html.entwurf [data-hinweis]::after {
  content: attr(data-hinweis);
  position: absolute; top: 10px; left: 10px; z-index: 5; max-width: calc(100% - 20px);
  background: #FFE48F; color: #3B2F00; font: 700 11.5px/1.3 var(--schrift); letter-spacing: .01em;
  padding: 5px 9px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); pointer-events: none;
}
html.entwurf.hinweise-aus [data-hinweis]::after { display: none; }

/* Zusatz: Animationen (nur wenn gebucht – im Entwurf per Schalter) */
@media (prefers-reduced-motion: no-preference) {
  html.animationen .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  html.animationen .reveal.sichtbar { opacity: 1; transform: none; }
  html.animationen .reveal-verzoegert { transition-delay: .12s; }
  html.animationen .held-bild .foto img { animation: einblenden 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  html.animationen .schwebekarte { animation: schweben 6s ease-in-out infinite; }
  html.animationen .schwebekarte--oben { animation-delay: -3s; }
  /* Zusatz: Hero-Video – hier nur als Vorschau angedeutet */
  html.heldvideo .held-bild .foto img { animation: schwenk 22s ease-in-out infinite alternate; transform-origin: 30% 60%; }
}
@keyframes einblenden { from { transform: scale(1.12); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes schwenk { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.22) translate(-4%, -3%); } }
/* Zusatz: Hero-Video (mit-hero-video.html, assets/js/hero-video.js) – zwei Clips mit Überblendung */
.foto--video { background: #1B1F24; }
.foto--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.foto--video video.aktiv { opacity: 1; }
.video-label {
  position: absolute; top: 16px; left: 16px; z-index: 3; padding: 6px 14px; border-radius: 999px;
  background: rgba(3, 34, 65, .82); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .02em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}.video-pause {
  position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .9); color: var(--logo); cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.video-pause svg { width: 16px; height: 16px; }
.video-pause .abspielen, .video-pause.pausiert .anhalten { display: none; }
.video-pause.pausiert .abspielen { display: block; }
@media (max-width: 960px) {
  .held-bild:has(.foto--video) .schwebekarte--unten { position: static; margin-top: 14px; max-width: none; box-shadow: var(--schatten); }
  .held-bild .foto--video { aspect-ratio: 4 / 5; }
}
.video-schild { display: none; }
html.heldvideo .video-schild {
  display: flex; position: absolute; top: 16px; left: 16px; z-index: 3; align-items: center; gap: 8px;
  background: rgba(17, 19, 21, .72); color: #fff; font-size: .8rem; font-weight: 700; padding: 8px 12px; border-radius: 999px;
}
html.heldvideo .video-schild i { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; }

/* Entwurfs-Panel */
.entwurf-panel {
  position: fixed; left: 16px; bottom: 16px; z-index: 90; width: min(340px, calc(100vw - 32px));
  background: #111315; color: #EDEDED; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  font: 500 13.5px/1.45 var(--schrift);
}
.entwurf-panel button { font: inherit; }
.entwurf-panel > button { all: unset; box-sizing: border-box; width: 100%; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 700; }
.entwurf-panel > button:focus-visible { outline: 2px solid #FFE48F; border-radius: 16px; }
.entwurf-panel .inhalt { padding: 0 16px 16px; display: grid; gap: 14px; max-height: 70vh; overflow-y: auto; }
.entwurf-panel[data-zu] .inhalt { display: none; }
.entwurf-panel h5 { margin: 0 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9A9EA3; }
.entwurf-panel .wahl { display: grid; gap: 6px; }
.entwurf-panel .wahl button { text-align: left; background: #1D2023; color: #EDEDED; border: 1px solid #2E3236; border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.entwurf-panel .wahl button[aria-pressed="true"] { border-color: #FFE48F; background: #2A2614; }
.entwurf-panel .farben { display: flex; gap: 8px; }
.entwurf-panel .farben button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #2E3236; cursor: pointer; padding: 0; }
.entwurf-panel .farben button[aria-pressed="true"] { border-color: #FFE48F; }
.entwurf-panel label { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.entwurf-panel label input { accent-color: #FFE48F; width: 16px; height: 16px; }
.entwurf-panel small { color: #9A9EA3; display: block; margin-left: 26px; }
.entwurf-panel .erklaerung { margin: 0; color: #C9CCD0; font-size: 12.5px; }
.entwurf-panel .beenden { background: transparent; color: #9A9EA3; border: 1px solid #2E3236; border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.entwurf-panel .beenden:hover { color: #fff; }
[hidden] { display: none !important; }
@media print { .entwurf-panel { display: none; } }

/* ---------------------------------------------------------------
   Signatur von jaeschke.flegel
   ---------------------------------------------------------------
   Ein dezenter, verlinkter Hinweis am Fuss jeder Seite, die wir
   bauen. Quelle: ../../signatur/ im Hauptordner, dort steht auch
   das Rechtliche dazu.

   Grundsatz: Die Signatur darf nie lauter sein als der Name des
   Kunden. Sie erbt Schrift und Farbe des Fusses und nimmt sie zur
   Haelfte zurueck. Kein eigener Kasten, kein Logo, und sie laedt
   nichts von unserem Server nach - sonst braeuchte die Kundenseite
   dafuer einen Eintrag in ihrer Datenschutzerklaerung.

   Vorher stand der Hinweis in der Rechtliches-Navigation, gleich
   laut wie Impressum und Datenschutz. Dort gehoert er nicht hin.
   --------------------------------------------------------------- */

.jf-sig {
  display: block;
  margin-top: 1.6rem;
  font-size: .76rem;
  line-height: 1.5;
  letter-spacing: .02em;
  color: inherit;
  /* Gemessen am 04.11.2026 auf diesem Fuss (Text rgb(168,181,199) auf
     rgb(3,34,65), Schrift 12,16 px): bei den vorgeschlagenen 45 % kommt
     nur ein Kontrast von 2,63 zu 1 heraus. Fuer Text dieser Groesse sind
     4,5 noetig, und die Signatur ist ein Link, den man lesen koennen muss.
     Ab 71 % wird die Grenze erreicht, 72 % ergibt 4,6 zu 1. Leiser als der
     uebrige Fusstext bleibt sie trotzdem, weil der bei voller Deckkraft
     und groesserer Schrift steht. */
  opacity: .72;
  text-align: inherit;
  transition: opacity .3s ease;
}
.jf-sig a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.jf-sig:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .jf-sig { transition: none; } }