/* ===========================================================================
   Schafkopf Biacherl - gemeinsames Aussehen fuer alle Seiten
   ---------------------------------------------------------------------------
   Diese Datei wird von index.html und den drei Rechtsseiten geladen. Wer hier
   etwas aendert, aendert es ueberall - das ist der Sinn der Sache.

   Aufbau:
     1. Farben, Schrift, Grundlagen
     2. Kopfzeile und Knoepfe
     3. Abschnitte und Ueberschriften
     4. Handy-Rahmen
     5. Galerie (das wischbare Karussell)
     6. Preise, Schritte, Fragen
     7. Fusszeile
     8. Rechtsseiten
     9. Einblenden und Ruecksicht auf reduzierte Bewegung

   Ueberschriften stehen bewusst in einer Serifenschrift. Die passt zum Wappen
   und zur Werbegrafik und nimmt der Seite den Baukasten-Anstrich. Geladen wird
   nichts - es sind Schriften, die jedes Geraet ohnehin hat.
   =========================================================================== */

:root {
  --gruen:        #2e7d32;
  --gruen-hell:   #43a047;
  --gruen-dunkel: #1b5e20;
  --gruen-blass:  #eaf4e8;
  --gruen-rand:   #cfe3cd;
  --grund:        #f7faf4;
  --karte:        #ffffff;
  --text:         #17210f;
  --text-leise:   #55654f;
  --linie:        #dfe8db;
  --gold:         #a9780a;
  --radius:       18px;
  --schatten:     0 1px 2px rgba(20,46,23,.05), 0 10px 30px rgba(20,46,23,.07);
  --schatten-hoch:0 3px 6px rgba(20,46,23,.06), 0 20px 46px rgba(20,46,23,.12);

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.62rem, 3.1vw, 2.35rem); }
h3 { font-size: 1.09rem; }

p { margin: 0; }
img { max-width: 100%; }

a { color: var(--gruen-dunkel); }

:focus-visible {
  outline: 3px solid var(--gruen-hell);
  outline-offset: 3px;
  border-radius: 4px;
}

.huelle { width: min(1180px, 100% - 40px); margin-inline: auto; }
.huelle-eng { width: min(760px, 100% - 40px); margin-inline: auto; }

/* ---------- 2. Kopfzeile und Knoepfe ---------- */

header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,250,244,.86);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
header.geschoben {
  border-bottom-color: var(--linie);
  box-shadow: 0 6px 24px rgba(20,46,23,.05);
}
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; }

.marke {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--text);
  font-family: var(--serif); font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em;
}
.marke img { width: 36px; height: 36px; border-radius: 9px; display: block; }

nav { display: flex; align-items: center; gap: 26px; }
nav a { color: var(--text-leise); text-decoration: none; font-size: .94rem; font-weight: 550; }
nav a:hover { color: var(--gruen-dunkel); }
@media (max-width: 780px) { .verstecken-klein { display: none; } nav { gap: 14px; } }

.knopf {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 650; font-size: .97rem; text-decoration: none; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.knopf-klein { padding: 9px 17px; font-size: .9rem; }
.knopf-voll { background: var(--gruen); color: #fff; box-shadow: 0 4px 14px rgba(46,125,50,.26); }
.knopf-voll:hover { background: var(--gruen-dunkel); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(46,125,50,.32); }
.knopf-rand { border-color: var(--linie); color: var(--gruen-dunkel); background: var(--karte); }
.knopf-rand:hover { border-color: var(--gruen-hell); transform: translateY(-1px); }

/* ---------- 3. Abschnitte und Ueberschriften ---------- */

section { padding: clamp(54px, 7vw, 96px) 0; }
.hell { background: var(--karte); border-block: 1px solid var(--linie); }

.abschnitt-kopf { max-width: 42rem; margin-bottom: clamp(28px, 4vw, 46px); }
.abschnitt-kopf p { color: var(--text-leise); margin-top: 15px; font-size: 1.05rem; }
.marke-klein {
  font-size: .78rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gruen); margin-bottom: 13px;
}

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

.hero { padding: clamp(44px, 6vw, 76px) 0 clamp(20px, 3vw, 34px); text-align: center; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -220px -20% auto -20%; height: 560px; z-index: 0;
  background: radial-gradient(52% 58% at 50% 34%, rgba(67,160,71,.15), transparent 70%),
              radial-gradient(38% 44% at 84% 8%, rgba(169,120,10,.10), transparent 72%);
}
.hero > * { position: relative; z-index: 1; }
.augenbraue {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  background: var(--gruen-blass); color: var(--gruen-dunkel);
  padding: 7px 16px; border-radius: 999px; font-size: .84rem; font-weight: 650;
  border: 1px solid var(--gruen-rand);
}
.hero p.blei {
  font-size: clamp(1.06rem, 1.9vw, 1.22rem); color: var(--text-leise);
  margin: 20px auto 0; max-width: 40rem;
}
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; justify-content: center; }
.store-hinweis {
  margin-top: 18px; font-size: .87rem; color: var(--text-leise);
  display: inline-flex; align-items: center; gap: 8px;
}
.store-hinweis svg { flex: none; }

/* ---------- USP-Band ---------- */

.usp-bild {
  display: block; width: 100%; height: auto;
  border-radius: 22px; box-shadow: var(--schatten-hoch);
  border: 1px solid var(--gruen-rand);
}
.usp-ersatz { display: none; }

/* Unter 860px ist die Schrift in der Grafik nicht mehr lesbar. Dort stehen
   dieselben Aussagen als richtiger Text - das ist der einzige ehrliche Weg. */
@media (max-width: 859px) {
  .usp-bild { display: none; }
  .usp-ersatz { display: block; }
}
.usp-mitte {
  text-align: center; padding: 26px 22px; border-radius: var(--radius);
  background: var(--gruen-blass); border: 1px solid var(--gruen-rand);
  margin-bottom: 16px;
}
.usp-mitte h3 { font-size: 1.14rem; margin-top: 12px; }
.usp-mitte p { color: var(--text-leise); margin-top: 9px; font-size: .95rem; }
.usp-symbol {
  width: 58px; height: 58px; margin-inline: auto; border-radius: 17px;
  background: var(--karte); border: 1px solid var(--gruen-rand);
  display: grid; place-items: center; color: var(--gruen-dunkel);
}
.usp-liste { display: grid; gap: 12px; }
.usp-punkt {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 17px 18px; box-shadow: var(--schatten);
}
.usp-punkt .zeichen {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  background: var(--gruen-blass); color: var(--gruen-dunkel);
  display: grid; place-items: center;
}
.usp-punkt p { color: var(--text-leise); margin-top: 4px; font-size: .93rem; }

/* ---------- 4. Handy-Rahmen ---------- */

.handy {
  width: 100%; aspect-ratio: 540 / 1169;
  background: #101a11; border-radius: 30px; padding: 8px;
  box-shadow: 0 18px 46px rgba(20,46,23,.24), 0 2px 8px rgba(20,46,23,.14);
}
.handy-schirm {
  width: 100%; height: 100%; border-radius: 23px; overflow: hidden; background: var(--grund);
}
.handy-schirm img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- 5. Galerie ---------- */

.galerie { position: relative; }

.galerie-bahn {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.galerie-bahn::-webkit-scrollbar { display: none; }

.folie {
  flex: 0 0 100%; scroll-snap-align: center;
  display: grid; grid-template-columns: 260px minmax(0, 34rem);
  justify-content: center;              /* sonst klebt alles links */
  gap: clamp(28px, 5vw, 64px);
  align-items: center; padding: 4px 2px 8px;
}
.folie-text .zaehler {
  font-size: .78rem; font-weight: 750; letter-spacing: .1em;
  color: var(--gruen); margin-bottom: 11px; font-variant-numeric: tabular-nums;
}
.folie-text h3 { font-size: clamp(1.25rem, 2.4vw, 1.68rem); }
.folie-text p { color: var(--text-leise); margin-top: 13px; font-size: 1.01rem; max-width: 34rem; }

@media (max-width: 760px) {
  .folie { grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: center; text-align: center; }
  .folie .handy { width: min(216px, 60vw); }
  .folie-text p { margin-inline: auto; }
}

.galerie-fuss {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: clamp(18px, 2.4vw, 28px);
  padding-top: 18px; border-top: 1px solid var(--linie);
}
.pfeil {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--linie); background: var(--karte); color: var(--gruen-dunkel);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, opacity .16s ease;
}
.pfeil:hover:not(:disabled) { border-color: var(--gruen-hell); transform: translateY(-1px); }
.pfeil:disabled { opacity: .34; cursor: default; }

.miniaturen {
  flex: 0 1 auto; display: flex; gap: 9px; overflow-x: auto;
  scrollbar-width: none; scroll-behavior: smooth; padding: 3px 1px;
}
.miniaturen::-webkit-scrollbar { display: none; }
.mini {
  flex: none; width: 40px; padding: 0; cursor: pointer; background: none;
  border: 2px solid transparent; border-radius: 9px; line-height: 0;
  opacity: .62; transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}
.mini img { width: 100%; aspect-ratio: 540 / 1169; object-fit: cover; object-position: top; border-radius: 7px; display: block; }
.mini:hover { opacity: .85; }
.mini[aria-current="true"] { opacity: 1; border-color: var(--gruen-hell); transform: translateY(-2px); }
@media (max-width: 560px) { .mini { width: 32px; } .galerie-fuss { gap: 10px; } }

/* ---------- Beamer-Band (breites Bild) ---------- */

.breitbild {
  margin-top: clamp(34px, 5vw, 58px);
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--linie); box-shadow: var(--schatten-hoch);
}
.breitbild img { display: block; width: 100%; height: auto; }

/* ---------- 6. Preise, Schritte, Fragen ---------- */

.preis-raster {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  align-items: stretch;                 /* gleiche Hoehe fuer alle Karten */
}
.preis {
  display: flex; flex-direction: column;  /* damit der Fuss unten sitzt */
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 32px 27px; box-shadow: var(--schatten); position: relative;
}
.preis.hervor {
  border-color: var(--gruen-hell); border-width: 2px; padding: 31px 26px;
  box-shadow: 0 4px 10px rgba(46,125,50,.08), 0 20px 46px rgba(46,125,50,.16);
}
.preis-fahne {
  position: absolute; top: -13px; left: 26px; background: var(--gruen); color: #fff;
  font-family: var(--sans); font-size: .73rem; font-weight: 700;
  padding: 5px 13px; border-radius: 999px; letter-spacing: .03em;
}
.betrag { font-family: var(--serif); font-size: 2.5rem; font-weight: 700; letter-spacing: -.03em; margin: 14px 0 4px; }
.betrag span { font-family: var(--sans); font-size: .93rem; font-weight: 550; color: var(--text-leise); letter-spacing: 0; }
.preis-unter { color: var(--text-leise); font-size: .95rem; }
.liste { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; }
.liste li { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; color: var(--text-leise); }
.liste svg { flex: none; margin-top: 4px; color: var(--gruen-hell); }
.preis-fuss {
  margin-top: auto;                      /* schiebt sich ans untere Ende */
  padding-top: 24px; font-size: .87rem; color: var(--text-leise);
}

.schritt-raster { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(264px, 1fr)); counter-reset: schritt; }
.schritt { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--schatten); }
.hell .schritt { background: var(--grund); }
.schritt-nr {
  counter-increment: schritt; width: 34px; height: 34px; border-radius: 50%;
  background: var(--gruen); color: #fff; display: grid; place-items: center;
  font-weight: 750; font-size: .93rem; margin-bottom: 15px;
}
.schritt-nr::before { content: counter(schritt); }
.schritt p { color: var(--text-leise); margin-top: 9px; font-size: .96rem; }
.schritt b { color: var(--text); font-weight: 650; }

.faq { max-width: 48rem; }
details {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 14px;
  padding: 2px 20px; margin-bottom: 11px; transition: border-color .18s ease, box-shadow .18s ease;
}
.hell details { background: var(--grund); }
details[open] { border-color: var(--gruen-rand); box-shadow: var(--schatten); }
summary {
  cursor: pointer; padding: 17px 0; font-weight: 650; list-style: none;
  display: flex; align-items: center; gap: 12px; font-size: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; margin-left: auto; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .22s ease;
}
details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details p { padding: 0 0 19px; color: var(--text-leise); font-size: .97rem; }

.schlussruf {
  background: linear-gradient(135deg, var(--gruen-dunkel), var(--gruen) 55%, var(--gruen-hell));
  color: #fff; border-radius: 26px; padding: clamp(40px, 6vw, 66px) clamp(26px, 5vw, 56px);
  text-align: center; box-shadow: 0 20px 50px rgba(27,94,32,.26);
}
.schlussruf h2 { color: #fff; }
.schlussruf p { color: rgba(255,255,255,.92); margin: 16px auto 30px; max-width: 34rem; font-size: 1.06rem; }
.schlussruf .knopf-voll { background: #fff; color: var(--gruen-dunkel); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.schlussruf .knopf-voll:hover { background: #f2f8f1; }

/* ---------- 7. Fusszeile ---------- */

footer { background: #16220f; color: #b7c6b3; padding: 56px 0 30px; font-size: .93rem; }
.fuss-raster { display: grid; gap: 34px 56px; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
@media (max-width: 820px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .fuss-raster { grid-template-columns: 1fr; } }
footer h4 { font-family: var(--sans); margin: 0 0 14px; color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
footer a { color: #b7c6b3; text-decoration: none; display: inline-block; margin-bottom: 10px; }
footer a:hover { color: #fff; }
footer p { color: #8b9c88; font-size: .91rem; }
.fuss-strich {
  border-top: 1px solid #2b3b26; margin-top: 42px; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .85rem; color: #8b9c88;
}

/* ---------- 8. Rechtsseiten ---------- */

.recht { padding: clamp(40px, 6vw, 76px) 0 clamp(50px, 7vw, 90px); }
.zurueck {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--text-leise); font-size: .92rem; font-weight: 550; margin-bottom: 26px;
}
.zurueck:hover { color: var(--gruen-dunkel); }
.recht h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.recht .stand { color: var(--text-leise); font-size: .92rem; margin-top: 10px; }
.recht h2 {
  font-size: clamp(1.16rem, 2vw, 1.38rem); margin-top: 44px;
  padding-top: 22px; border-top: 1px solid var(--linie);
}
.recht h3 { font-size: 1.02rem; margin-top: 26px; }
.recht p { margin-top: 13px; color: var(--text-leise); }
.recht ul { margin: 13px 0 0; padding-left: 22px; color: var(--text-leise); }
.recht li { margin-bottom: 9px; }
.recht b { color: var(--text); font-weight: 650; }
.recht a { color: var(--gruen-dunkel); overflow-wrap: anywhere; }
.anschrift {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 14px;
  padding: 20px 22px; margin-top: 16px; box-shadow: var(--schatten);
  color: var(--text); line-height: 1.75;
}
.formular {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 14px;
  padding: 22px; margin-top: 16px; box-shadow: var(--schatten);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .89rem; line-height: 2.1; white-space: pre; color: var(--text);
  /* Die Punktlinien haben keine Trennstellen. Statt die Seite zu sprengen,
     scrollt das Formular in seinem eigenen Kasten. */
  overflow-x: auto;
}
@media (max-width: 560px) { .formular { font-size: .8rem; padding: 16px; } }
.recht-inhalt { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.recht-inhalt a { font-size: .92rem; }

/* ---------- 9. Einblenden ---------- */

.kommt { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.kommt.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .galerie-bahn, .miniaturen { scroll-behavior: auto; }
  .kommt { opacity: 1; transform: none; transition: none; }
}