/* FloraGrid – Webseite. Schrift Arial, Farben aus der App-Palette. */
:root {
  --wald: #3e4d36;
  --gruen: #5b6f4f;
  --salbei: #6f8b72;
  --sand: #b0a286;
  --beige: #d7cfbe;
  --hell: #efeadd;
  --creme: #f4f2ec;
  --bernstein: #e2a33a;
  --text: #2b2b2b;
  --grau: #625f56;
  --max: 1160px;
  --rand: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}
img, video { max-width: 100%; display: block; }
a { color: var(--gruen); text-underline-offset: 3px; }
a:hover { color: var(--wald); }
:focus-visible { outline: 3px solid var(--bernstein); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3 { color: var(--wald); font-weight: 700; margin: 0 0 0.55em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: 1.2rem; line-height: 1.3; }
p { margin: 0 0 1em; max-width: 66ch; }

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

/* Kopfzeile */
.leiste { position: sticky; top: 0; z-index: 20; background: rgba(244,242,236,.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(176,162,134,.4); }
.leiste .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--wald); font-weight: 700; font-size: 1.25rem; }
.marke img { width: 32px; height: 32px; }
.leiste nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.leiste nav a:not(.knopf) { color: var(--text); text-decoration: none; font-size: .97rem; }
.leiste nav a:not(.knopf):hover { color: var(--gruen); text-decoration: underline; }
@media (max-width: 760px) { .leiste nav a:not(.knopf) { display: none; } }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gruen); color: #fff; text-decoration: none;
  padding: .75em 1.3em; border-radius: 6px; border: 2px solid var(--gruen);
  font-weight: 700; font-size: 1rem; line-height: 1.2;
}
.knopf:hover { background: var(--wald); border-color: var(--wald); color: #fff; }
.knopf.hell { background: transparent; color: var(--wald); border-color: var(--sand); }
.knopf.hell:hover { background: var(--hell); }
.knopf.klein { padding: .5em 1em; font-size: .95rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Abschnitte */
section { padding: clamp(60px, 8vw, 110px) 0; }
section + section { border-top: 1px solid rgba(176,162,134,.3); }
.einleitung { max-width: 780px; margin-bottom: clamp(28px, 4vw, 44px); }
.einleitung p, .unterzeile { font-size: 1.15rem; color: #3f413a; }

/* Titelbild */
.titel { position: relative; padding: 0; border-top: 0 !important; background: #e9e6dc; overflow: hidden; }
.titel .titelbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.titel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 78% at 0% 0%, rgba(244,242,236,.93) 0%, rgba(244,242,236,.82) 45%, rgba(244,242,236,0) 100%); }
.titel .wrap { position: relative; z-index: 2; min-height: min(56.25vw, calc(100vh - 64px)); max-width: none; padding-left: clamp(16px, 4vw, 64px); }
.titeltext { padding-top: clamp(28px, 4vw, 64px); max-width: min(520px, 30vw); }
.titelmarke { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: clamp(1.3rem, 1.8vw, 1.7rem); color: var(--wald); margin: 0 0 18px; }
.titelmarke img { width: clamp(34px, 3vw, 44px); height: auto; }
.titel h1 { font-size: clamp(1.9rem, 2.9vw, 3rem); max-width: 15ch; }
.titel .knopf { white-space: nowrap; }
.titel .aktionen { flex-direction: column; align-items: flex-start; }
@media (max-width: 1100px) {
  .titel { background: var(--creme); }
  .titel .titelbild { position: relative; height: 56vw; object-position: 62% 50%; }
  .titel::after { display: none; }
  .titel .wrap { min-height: 0; padding-left: var(--rand); }
  .titeltext { max-width: none; padding: 28px 0 8px; }
  .titelmarke { display: none; }
  .titel h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); max-width: 22ch; }
  .titel .aktionen { flex-direction: row; }
}
.unterzeile.gross { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 70ch; margin: 0; }

/* Kopf */
.kopf { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(56px, 8vw, 100px); }
.kopf h1 { max-width: 16ch; }
.kopf .unterzeile { max-width: 62ch; }

/* Film */
.film { background: var(--wald); color: #e6e4da; border-top: 0 !important; }
.film h2 { color: #fff; }
.film .einleitung p { color: #dcdacd; }
.film video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; background: #1f2619; }
.film + section { border-top: 0; }

/* Bildschirmfotos */
.foto { margin: 0; border-radius: 8px; overflow: hidden; border: 1px solid rgba(176,162,134,.7); box-shadow: 0 18px 40px -24px rgba(40,52,34,.55); background: #fff; }
.foto img { width: 100%; height: auto; }
figcaption { font-size: .9rem; color: var(--grau); margin-top: 10px; }

.zwei { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.zwei.oben { align-items: start; }
@media (max-width: 900px) { .zwei { grid-template-columns: 1fr; } }

ul.punkte { list-style: none; padding: 0; margin: 0 0 1em; max-width: 62ch; }
ul.punkte li { position: relative; padding-left: 24px; margin: 0 0 .65em; }
ul.punkte li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--salbei); }

/* Tastenfolge */
.tastenfolge { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px 18px; padding: 28px 0 0; }
.schritt { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.schritt .tasten { display: flex; gap: 4px; }
.schritt small { color: var(--grau); font-size: .85rem; }
.weiter { color: var(--sand); font-size: 1.3rem; padding-bottom: 26px; }
kbd {
  font-family: inherit; font-weight: 700; font-size: .92rem;
  min-width: 2.1em; padding: .25em .55em; display: inline-flex; justify-content: center;
  background: #fff; color: var(--wald);
  border: 1px solid var(--sand); border-bottom-width: 3px; border-radius: 6px;
}
kbd.an { background: var(--bernstein); border-color: #b9802a; color: #2c2a20; }
.feld { font-weight: 700; font-size: .95rem; color: var(--text); background: #fff; border: 2px solid var(--wald); border-radius: 5px; padding: .2em .8em; min-width: 3.4em; text-align: right; }

/* Über (Foto über die ganze Breite) */
.ueber { position: relative; padding: 0; border-top: 0 !important; background: #2f3b29; overflow: hidden; }
.ueber picture, .ueber .bild { position: absolute; inset: 0; }
.ueber .bild img { width: 100%; height: 100%; object-fit: cover; object-position: 25% 30%; }
.ueber::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,38,26,0) 30%, rgba(30,38,26,.72) 58%, rgba(30,38,26,.86) 100%); }
.ueber .wrap { position: relative; z-index: 2; display: flex; justify-content: flex-end; min-height: clamp(460px, 46vw, 640px); align-items: center; }
.ueber .text { max-width: 500px; color: #f1efe6; padding: 48px 0; }
.ueber h2 { color: #fff; }
.ueber p { color: #ebe8dc; }
.ueber .name { font-weight: 700; color: #fff; margin-top: 1.2em; }
.ueber .unterschrift { display: block; width: 280px; max-width: 70%; height: auto; }
@media (max-width: 760px) {
  .ueber .bild { position: relative; height: 62vw; }
  .ueber::after { display: none; }
  .ueber .wrap { min-height: 0; }
  .ueber .text { max-width: none; padding: 32px 0 48px; }
}

/* Filter */
.zaehler { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 4px 0 6px; }
.zaehler .zahl { font-size: clamp(3.2rem, 7vw, 5.2rem); font-weight: 700; color: var(--wald); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.zaehler .von { color: var(--grau); font-size: 1rem; }
.breit { margin-top: 36px; }

/* Ablauf */
.reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); }
.reihe h3 { margin-top: 18px; }
.reihe p { font-size: 1rem; }
@media (max-width: 900px) { .reihe { grid-template-columns: 1fr; } }

/* So startest du */
.start ol { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.start li { counter-increment: s; background: #fff; border: 1px solid var(--beige); border-radius: 10px; padding: 24px 22px; }
.start li::before { content: counter(s); display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--gruen); color: #fff; font-weight: 700; align-items: center; justify-content: center; margin-bottom: 12px; }
.start li strong { display: block; color: var(--wald); font-size: 1.1rem; margin-bottom: 4px; }
.start li span { color: #45473f; font-size: 1rem; }
@media (max-width: 760px) { .start ol { grid-template-columns: 1fr; } }

/* Preise */
.preise { background: var(--hell); }
.tarife { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; }
@media (max-width: 760px) { .tarife { grid-template-columns: 1fr; } }
.tarif { background: #fff; border: 1px solid var(--beige); border-radius: 12px; padding: 30px 28px; display: flex; flex-direction: column; }
.tarif.empfohlen { border: 2px solid var(--gruen); }
.tarif h3 { margin-bottom: 4px; }
.tarif .hinweis { color: var(--grau); font-size: .95rem; margin-bottom: 18px; }
.tarif .preis { font-size: 2.6rem; font-weight: 700; color: var(--wald); line-height: 1; }
.tarif .preis span { font-size: 1rem; font-weight: 400; color: var(--grau); margin-left: 4px; }
.tarif .netto { color: var(--grau); font-size: .92rem; margin: 10px 0 20px; }
.tarif ul.punkte { font-size: .98rem; margin-bottom: 24px; }
.tarif .knopf { margin-top: auto; }
.inklusive { margin-top: 36px; max-width: 900px; }
.inklusive .klein { font-size: .95rem; color: #4a4c42; }

/* Fragen */
details { border-top: 1px solid rgba(176,162,134,.5); padding: 16px 0; max-width: 840px; }
details:last-of-type { border-bottom: 1px solid rgba(176,162,134,.5); }
summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; color: var(--wald); list-style: none; padding-right: 30px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: -3px; font-size: 1.5rem; color: var(--salbei); }
details[open] summary::after { content: "–"; }
details p { margin: 10px 0 0; color: #44463c; }

/* Schluss */
.schluss { text-align: center; }
.schluss h2 { max-width: 34ch; margin-left: auto; margin-right: auto; }
.schluss .aktionen { justify-content: center; }

/* Fuß */
.fuss { background: var(--wald); color: #d8d6cb; padding: 44px 0; font-size: .95rem; }
.fuss .wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: center; }
.fuss a { color: #fff; }
.fuss nav { display: flex; gap: 22px; flex-wrap: wrap; }

/* Rechtstexte */
.recht { padding: 56px 0 90px; }
.recht h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.recht h2 { font-size: 1.3rem; margin-top: 2em; }
.recht p, .recht li { max-width: 72ch; }
.offen { background: #fff3d6; padding: 1px 4px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
.titel + .kopf { padding: clamp(36px, 5vw, 64px) 0; border-top: 0; }