/* ============================================================
   SCHOTTERGRUBE · High-End Design-System
   Schlicht · edel · ruhig. Platzhalter: [[ ]]
   ============================================================ */

/* Hinweis: Keine externen Schriften (Datenschutz). Cormorant Garamond / Inter
   werden genutzt, wenn lokal vorhanden, sonst System-Serif/Sans als Fallback. */

:root {
  --bg:        #090d0a;
  --bg-elev:   #10160f;
  --bg-soft:   #131a12;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.16);
  --txt:       #ece9e3;
  --txt-dim:   #9b988f;
  --txt-mute:  #6f6d67;
  --accent:    #6fae6b;   /* einladendes Grün – passt zum Frosch-Logo */
  --accent-2:  #8fce8a;
  --accent-soft: rgba(111,174,107,.12);
  --maxw: 1180px;
  --maxw-narrow: 820px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--txt);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Typografie ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: 0; text-wrap: balance; }
::selection { background: var(--accent); color: #08140a; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}
h1 { font-size: clamp(2.8rem, 6.5vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3 { font-size: 1.5rem; font-weight: 500; }
p  { color: var(--txt-dim); font-weight: 300; }
a  { color: inherit; }

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 26px;
}
.eyebrow.dim { color: var(--txt-mute); }
.lead { font-size: 1.18rem; color: var(--txt-dim); max-width: 56ch; font-weight: 300; }
.accent { color: var(--accent); }
em.serif { font-style: italic; color: var(--accent-2); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.narrow { max-width: var(--maxw-narrow); }
section { padding: 130px 0; position: relative; }
.divider { height: 1px; background: var(--line); border: 0; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(9,13,10,.82); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--txt); }
.brand .mark { font-family: var(--serif); font-size: 1.5rem; letter-spacing: .02em; }
.brand .sub { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--txt-mute); }
.brand-logo { height: 40px; width: auto; display: block; }
.footer .brand-logo { height: 50px; margin-bottom: 16px; }
.nav-links { display: flex; gap: 4px; align-items: center; list-style: none; }
.nav-links a {
  text-decoration: none; color: var(--txt-dim); font-size: .86rem; font-weight: 400;
  letter-spacing: .04em; padding: 10px 16px; transition: color .3s var(--ease); position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--txt); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-cta { border: 1px solid var(--line-2); border-radius: 2px; }
.nav-cta::after { display: none; }
.nav-cta:hover { border-color: var(--accent); }
.nav-toggle {
  display: none; background: none; border: 0; color: var(--txt); cursor: pointer;
  width: 44px; height: 44px; place-items: center; margin-right: -10px;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  display: block; width: 22px; height: 2px; background: currentColor;
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -7px; }
.nav-toggle .bars::after { top: 7px; }
.nav-toggle.open .bars { background: transparent; }
.nav-toggle.open .bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open .bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: .82rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: 16px 30px; border-radius: 2px; cursor: pointer; border: 1px solid transparent;
  transition: all .4s var(--ease);
}
.btn .arw { transition: transform .4s var(--ease); }
.btn:hover .arw { transform: translateX(5px); }
.btn-primary { background: var(--accent); color: #08140a; }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { border-color: var(--line-2); color: var(--txt); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-text { padding: 0; border: 0; color: var(--accent); background: none; }

/* ---------- Hero (ruhig: Text zentriert, Frosch scheint dahinter durch) ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding: 160px 0 120px; text-align: center;
}
.hero-inner { max-width: 780px; margin: 0 auto; }
.hero h1 { margin-bottom: 26px; font-size: clamp(2.6rem, 5.8vw, 4.8rem); font-weight: 700; letter-spacing: -.015em; }
.hero .lead { font-size: 1.3rem; margin: 0 auto 42px; font-weight: 400; color: var(--txt); }
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.hero-meta {
  position: absolute; right: 32px; bottom: 40px; text-align: right;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--txt-mute);
}

/* ---------- Stat-Leiste ---------- */
.stats { display: flex; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats .stat { flex: 1; padding: 44px 28px; border-left: 1px solid var(--line); }
.stats .stat:first-child { border-left: 0; }
.stat .num { font-family: var(--serif); font-size: 3rem; font-weight: 400; line-height: 1; color: var(--txt); }
.stat .num .accent { color: var(--accent); }
.stat .lbl { margin-top: 12px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--txt-mute); }

/* ---------- Section-Kopf ---------- */
.sec-head { max-width: 60ch; margin-bottom: 64px; }
.sec-head h2 { margin-bottom: 22px; }

/* ---------- Grid & Karten ---------- */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.tile {
  background: var(--bg); padding: 48px 40px; transition: background .5s var(--ease);
}
.tile:hover { background: var(--bg-elev); }
.tile .ico { color: var(--accent); margin-bottom: 26px; display: block; }
.tile .ico svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.tile h3 { margin-bottom: 14px; }
.tile p { font-size: .98rem; }
.tile .idx { font-family: var(--serif); font-size: .9rem; color: var(--txt-mute); letter-spacing: .1em; }

/* ---------- Flip-Karten (Produkte / Transport) ---------- */
.prod.flip, .tile.flip { padding: 0; overflow: hidden; cursor: pointer; perspective: 1400px; }
.flip-inner { position: relative; transform-style: preserve-3d; transition: transform .65s var(--ease); }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-front { position: relative; }
.prod.flip .flip-front { padding: 34px; }
.tile.flip .flip-front { padding: 48px 40px; }
.flip-back { position: absolute; inset: 0; transform: rotateY(180deg); overflow: hidden; background: var(--bg-soft); }
.flip-back img, .flip-back video { width: 100%; height: 100%; object-fit: cover; display: block; }
.flip-back .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px; font-family: var(--serif); font-size: 1.2rem; color: #f4f2ec; background: linear-gradient(180deg, transparent, rgba(0,0,0,.72)); }
.flip-back.noimg { display: grid; place-items: center; color: var(--txt-dim); font-family: var(--serif); font-size: 1.25rem; }
/* Eselsohr oben rechts: umgeknickte Ecke, darunter blitzt das Materialfoto hervor */
.flip-fold {
  position: absolute; top: -1px; right: -1px; width: 58px; height: 58px; z-index: 2;
  transition: width .35s var(--ease), height .35s var(--ease);
}
.flip-fold .ph {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.flip-fold .crease {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: linear-gradient(225deg,
    transparent 49.2%, var(--line-2) 49.2%, var(--line-2) 50.6%,
    var(--bg-soft) 50.6%, var(--bg-elev) 90%);
}
.flip:hover .flip-fold { width: 74px; height: 74px; }

/* Karten mit Rahmen (frei stehend) */
.card {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 3px;
  padding: 40px; transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.card:hover { border-color: var(--line-2); }

/* ---------- Produkte ---------- */
.prod {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 3px;
  padding: 34px;
  transition: border-color .5s var(--ease), background .5s var(--ease),
              transform .5s var(--ease), box-shadow .5s var(--ease);
}
.prod:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.20); }
.prod .cat { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--txt-mute); }
.prod .grain { font-family: var(--serif); font-size: 2.6rem; font-weight: 400; color: var(--accent); margin: 8px 0 6px; }
.prod h3 { font-size: 1.18rem; font-weight: 500; margin-bottom: 8px; }
.prod p { font-size: .92rem; margin-bottom: 16px; }
.prod ul { list-style: none; border-top: 1px solid var(--line); padding-top: 14px; }
.prod ul li { font-size: .86rem; color: var(--txt-dim); padding: 5px 0; display: flex; gap: 10px; }
.prod ul li::before { content: "·"; color: var(--accent); font-weight: 600; }

/* ---------- Split ---------- */
/* Split: links Text und Link, rechts Bild. Drei Bereiche, damit der Link am
   Handy unter das Bild rutschen kann, ohne dass sich die Reihenfolge im HTML
   aendert. Am Desktop steht er wie bisher direkt unter dem Text. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "body img" "cta img";
  column-gap: 80px; row-gap: 0;
  align-items: center;
}
.split.wide-img { grid-template-columns: 1.05fr .95fr; }
.split-body { grid-area: body; }
.split-body h2 { margin-bottom: 20px; }
.split-cta { grid-area: cta; margin-top: 30px; align-self: start; }
.split-img { grid-area: img; position: relative; overflow: hidden; border-radius: 3px; }
.split-img img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/5; transition: transform 1.2s var(--ease); }
.split-img:hover img { transform: scale(1.05); }
.split-img .tag { position: absolute; left: 0; bottom: 0; background: var(--bg); color: var(--txt-dim); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; padding: 12px 18px; }

.feature-list { list-style: none; margin-top: 30px; }
.feature-list li { display: grid; grid-template-columns: 200px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); align-items: baseline; }
.feature-list li:last-child { border-bottom: 1px solid var(--line); }
.feature-list .k { font-family: var(--serif); font-size: 1.1rem; color: var(--accent); }
.feature-list .v { color: var(--txt-dim); font-size: .98rem; }

/* ---------- Ablauf / Steps ---------- */
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 90px 1fr; gap: 30px; padding: 36px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step .n { font-family: var(--serif); font-size: 2rem; color: var(--accent); line-height: 1; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: .98rem; }

/* ---------- Band mit Bild (Parallax-Anmutung) ---------- */
.band { position: relative; padding: 150px 0; text-align: center; overflow: hidden; }
.band-media { position: absolute; inset: 0; z-index: -2; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.flare {
  position: absolute; top: 62%; width: 34vmin; height: 34vmin;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,246,216,.95), rgba(255,232,170,.38) 32%, transparent 68%);
  mix-blend-mode: screen; opacity: .16; pointer-events: none;
  animation: lichthupe 3.6s ease-in-out infinite;
}
.flare-l { left: 11%; }
.flare-r { left: 86.7%; animation-delay: .04s; }
@keyframes lichthupe {
  0%, 100% { opacity: .18; }
  6%  { opacity: 1; }    /* Aufblendlicht – Blitz 1 */
  11% { opacity: .28; }
  18% { opacity: 1; }    /* Aufblendlicht – Blitz 2 */
  24% { opacity: .30; }
  55% { opacity: .18; }  /* Abblendlicht – ruhig */
}
.band-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #090d0a 0%, rgba(9,13,10,.72) 26%, rgba(9,13,10,.72) 74%, #090d0a 100%); }
.band h2 { margin-bottom: 24px; }

/* ---------- CTA ---------- */
.cta { text-align: center; }
.cta h2 { margin-bottom: 24px; }
.cta .hero-actions { justify-content: center; margin-top: 36px; }

/* ---------- Partner ---------- */
.partners { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 56px; }
.partner { display: flex; align-items: center; justify-content: center; }
.partner-name { font-family: var(--serif); font-size: 1.7rem; color: var(--txt-dim); transition: color .4s var(--ease); }
.partner:hover .partner-name { color: var(--accent); }
.partner.has-logo { background: #fff; border-radius: 12px; padding: 22px 30px; }
.partner.has-logo .partner-name { display: none; }
.partner-logo { max-height: 120px; max-width: 320px; width: auto; height: auto; display: block; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-dim); margin-bottom: 10px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 0; background: transparent; color: var(--txt);
  border: 0; border-bottom: 1px solid var(--line-2); font-family: var(--sans); font-size: 1rem; font-weight: 300;
  transition: border-color .35s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--txt-mute); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 120px; }
.field select option { background: var(--bg-elev); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.contact-info { display: grid; gap: 0; }
.contact-info .row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.contact-info .row:last-child { border-bottom: 1px solid var(--line); }
.contact-info .k { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-mute); padding-top: 3px; }
.contact-info a { color: var(--txt); text-decoration: none; transition: color .3s; }
.contact-info a:hover { color: var(--accent); }
.map-embed { margin-top: 1px; height: 340px; border: 1px solid var(--line); }
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.9); }
[data-theme="light"] .map-embed iframe { filter: grayscale(.15); }
.map-load {
  width: 100%; height: 100%; display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
  background: var(--bg-elev); border: 0; color: var(--txt-dim); cursor: pointer;
  font-family: var(--sans); transition: background .3s, color .3s;
}
.map-load:hover { background: var(--bg-soft); color: var(--txt); }
.map-load .map-pin { font-size: 30px; color: var(--accent); }
.map-load .map-title { font-size: 1rem; font-weight: 500; }
.map-load small { font-size: .76rem; color: var(--txt-mute); max-width: 36ch; line-height: 1.5; }
.map-load a { color: var(--accent); }
.form-note { font-size: .8rem; color: var(--txt-mute); margin-top: 14px; }
.download-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- Footer ---------- */
.footer { padding: 90px 0 40px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.3fr; gap: 50px; margin-bottom: 60px; }
.footer .mark { font-family: var(--serif); font-size: 1.6rem; display: block; margin-bottom: 16px; }
.footer p { font-size: .92rem; max-width: 34ch; }
.footer h4 { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-mute); margin-bottom: 20px; font-weight: 500; }
.footer ul { list-style: none; display: grid; gap: 12px; }
.footer a { color: var(--txt-dim); text-decoration: none; font-size: .92rem; transition: color .3s; }
.footer a:hover { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 30px; border-top: 1px solid var(--line); color: var(--txt-mute); font-size: .78rem; letter-spacing: .04em; }

/* ---------- Page-Head (Unterseiten) ---------- */
.page-head { padding: 200px 0 90px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); margin-bottom: 24px; }
.page-hint { margin-top: 16px; font-size: .9rem; color: var(--accent); }
.page-hint::before { content: "⟲"; margin-right: 8px; }
.page-note { margin-top: 6px; font-size: .85rem; color: var(--txt-mute); }

/* ---------- Rechtstexte (Impressum/Datenschutz) ---------- */
.legal { padding-bottom: 40px; }
.legal h2 { font-size: 1.6rem; margin: 50px 0 16px; }
.legal h3 { font-size: 1.15rem; font-weight: 600; margin: 28px 0 8px; }
.legal p { margin-bottom: 12px; }
.legal ul { list-style: none; margin: 10px 0 18px; padding: 0; }
.legal li { color: var(--txt-dim); padding: 5px 0 5px 20px; position: relative; }
.legal li::before { content: "·"; color: var(--accent); font-weight: 600; position: absolute; left: 0; }
.legal a { color: var(--accent); }
.legal .meta { color: var(--txt-mute); font-size: .85rem; }
.legal .note { border-left: 2px solid var(--line-2); padding: 8px 0 8px 18px; color: var(--txt-mute); font-size: .9rem; margin: 18px 0; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

/* ---------- Page-Hintergrund: ruhige Flaeche mit weichem Lichtschein ---------- */
.bg-fade { position: fixed; inset: 0; z-index: -5; background:
  radial-gradient(900px 600px at 80% -5%, rgba(111,174,107,.10), transparent 60%),
  radial-gradient(700px 500px at 0% 100%, rgba(111,174,107,.08), transparent 60%),
  var(--bg);
}

/* Feines, neutrales Korn: gibt der Flaeche Tiefe, ohne sichtbares Muster */
.bg-fade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url(korn.png);
  background-size: 180px;
  opacity: .05;
  mix-blend-mode: screen;
}

/* ---------- Frosch: ruhig im Hintergrund, ohne jede Bewegung ---------- */
.bg-fade::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(760px, 82vmin); height: min(760px, 82vmin);
  transform: translate(-50%, -50%);
  background: url(logo-green.png) center / contain no-repeat;
  opacity: .06; pointer-events: none;
}
.home .bg-fade::before { opacity: .10; }
.hero .container { position: relative; z-index: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  /* Gestapelt in der Lesereihenfolge: Text, Bild, dann der Link ganz unten */
  .split, .split.wide-img {
    grid-template-columns: 1fr;
    grid-template-areas: "body" "img" "cta";
    column-gap: 0; row-gap: 40px;
  }
  .split-cta { margin-top: 0; }
  .split-img img { aspect-ratio: 16/10; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats .stat { padding: 34px 20px; }
  .stat .num { font-size: 2.6rem; }
  .tile { padding: 38px 30px; }
  /* Menü klappt bereits auf Tablet-Breite ein, damit nichts umbricht */
  .nav-links {
    position: fixed; top: 84px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(9,13,10,.97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
    transform: translateY(-130%); visibility: hidden;
    transition: transform .5s var(--ease), visibility .5s;
    padding: 10px 22px 20px;
  }
  .nav-links.open { transform: none; visibility: visible; }
  .nav-links a { padding: 16px 4px; border-bottom: 1px solid var(--line); }
  .nav-links a::after { display: none; }
  .nav-cta { border: 0; }
  .nav-toggle { display: grid; }
  [data-theme="light"] .nav-links { background: rgba(245,244,239,.97); }
}
@media (max-width: 640px) {
  section { padding: 72px 0; }
  .container { padding: 0 22px; }
  .grid-3, .grid-2, .two { grid-template-columns: 1fr; }
  .feature-list li { grid-template-columns: 1fr; gap: 6px; }
  .footer-grid { grid-template-columns: 1fr; }
  .download-row { flex-direction: column; align-items: flex-start; }

  /* Kopfzeile kompakter, damit Name und Menue nicht gedraengt wirken */
  .nav-inner { height: 68px; }
  .brand { gap: 10px; }
  .brand .mark { font-size: 1.15rem; }
  .brand-logo { height: 32px; }
  .nav-links { top: 68px; }

  /* Hero */
  /* Hero fuellt auch am Handy den ersten Bildschirm */
  .hero { padding: 88px 0 56px; }
  .hero h1 { font-size: clamp(2.15rem, 9vw, 3rem); margin-bottom: 20px; }
  .hero .lead { font-size: 1.1rem; margin-bottom: 32px; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* Kennzahlen untereinander statt 2+1 */
  .stats { flex-direction: column; }
  .stats .stat { border-left: 0; border-top: 1px solid var(--line); padding: 22px 0; }
  .stats .stat:first-child { border-top: 0; }
  .stat .num { font-size: 2.2rem; }
  .stat .lbl { margin-top: 8px; }

  /* Abschnitte und Karten enger */
  .page-head { padding: 140px 0 56px; }
  .sec-head { margin-bottom: 40px; }
  .tile { padding: 30px 24px; }
  .card, .prod { padding: 26px 22px; }
  .prod.flip .flip-front { padding: 26px 22px; }
  .tile.flip .flip-front { padding: 30px 24px; }
  .step { grid-template-columns: 54px 1fr; gap: 16px; padding: 26px 0; }
  .step .n { font-size: 1.5rem; }
  .contact-info .row { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  /* Am Handy mehr Luft nach der Ueberschrift, der Link wird volle Breite */
  .split, .split.wide-img { row-gap: 32px; }
  .split-body h2 { margin-bottom: 24px; }
  .split-body .eyebrow { margin-bottom: 18px; }
  .split-cta .btn { width: 100%; justify-content: center; }
  .map-embed { height: 260px; }

  /* Platz, damit die schwebenden Schalter nichts verdecken */
  .footer { padding-bottom: 96px; }
}

@media (max-width: 380px) {
  .brand .mark { font-size: 1.02rem; }
  .brand-logo { height: 28px; }
  .hero h1 { font-size: 2rem; }
  .btn { padding: 14px 20px; font-size: .76rem; letter-spacing: .1em; }
  .container { padding: 0 18px; }
}

/* ============================================================
   LIGHT MODE + Theme-Umschalter
   ============================================================ */
[data-theme="light"] {
  --bg: #f5f4ef;
  --bg-elev: #ffffff;
  --bg-soft: #ecebe4;
  --line: rgba(20,22,15,.12);
  --line-2: rgba(20,22,15,.20);
  --txt: #16180f;
  --txt-dim: #4c4f45;
  --txt-mute: #82847a;
  --accent: #4f8f49;
  --accent-2: #3f7a3b;
}
[data-theme="light"] .nav.scrolled { background: rgba(245,244,239,.86); }
[data-theme="light"] .bg-fade::after { opacity: .07; mix-blend-mode: multiply; }
[data-theme="light"] .bg-fade::before { background-image: url(logo-green-dark.png); opacity: .09; }
[data-theme="light"] .home .bg-fade::before { opacity: .13; }
[data-theme="light"] .map-embed iframe { filter: grayscale(.15); }

/* Light Mode: weißes Frosch-Logo auf hellen Flächen abdunkeln */
[data-theme="light"] .brand-logo { filter: brightness(0); }

/* Band liegt über dunklem Bild – Text bleibt in beiden Modi hell */
[data-theme="light"] .band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band h2 { color: #f4f2ec; }
.band .lead { color: #dcd9d1; }
.band em.serif { color: #8fce8a; display: inline-block; }
/* Hero-Text folgt dem Theme; Akzentwort in Markengrün */
.hero em.serif { color: var(--accent-2); display: inline-block; }

/* Morphendes Wort im Hero.
   Zwei Ebenen uebereinander: das alte Wort gleitet nach rechts hinaus,
   waehrend das neue schon von links hereinkommt. Der reservierte Platz ist
   so breit wie das laengste Wort, der Text steht darin mittig. */
.hero h1 em.serif { position: relative; text-align: center; }

/* Neues Wort: startet weit links und faehrt die ganze Strecke nach rechts.
   Sichtbar wird es erst auf dem letzten Stueck, dadurch steht es nie lange
   neben dem alten Wort, obwohl sich beide gleichzeitig bewegen. */
.hero h1 em.serif .w {
  display: inline-block;
  transition: opacity .45s var(--ease) .22s, transform .9s var(--ease), filter .5s var(--ease) .15s;
}
.hero h1 em.serif .w.enter {           /* Startbild des neuen Wortes, ohne Animation */
  transition: none;
  opacity: 0; filter: blur(4px); transform: translateX(-1.6em);
}

/* Altes Wort: Kopie, liegt darueber und faehrt weiter nach rechts. Es blendet
   zuegig ab, damit es dem neuen Wort nicht im Weg steht. */
.hero h1 em.serif .w-out {
  position: absolute; left: 0; right: 0; top: 0; pointer-events: none;
  transition: opacity .42s var(--ease), transform .9s var(--ease), filter .4s var(--ease);
}
.hero h1 em.serif .w-out.leave {
  opacity: 0; filter: blur(4px); transform: translateX(1.6em);
}

/* Theme-Umschalter (schwebender Button) */
#theme-toggle {
  position: fixed; right: 22px; bottom: 22px; z-index: 120;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--bg-elev); color: var(--txt);
  cursor: pointer; font-size: 18px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  transition: transform .3s var(--ease), background .4s, color .4s, border-color .4s;
}
#theme-toggle:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }
/* Sprachumschalter */
#lang-switch {
  position: fixed; left: 22px; bottom: 22px; z-index: 120;
  display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--bg-elev);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
#lang-switch button {
  border: 0; background: transparent; color: var(--txt-dim); cursor: pointer;
  font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  padding: 7px 11px; border-radius: 999px; transition: background .3s, color .3s;
}
#lang-switch button:hover { color: var(--txt); }
#lang-switch button.active { background: var(--accent); color: #08140a; }

.ti-moon { display: none; }
[data-theme="light"] .ti-sun { display: none; }
[data-theme="light"] .ti-moon { display: inline; }

@media (max-width: 640px) {
  #theme-toggle { right: 16px; bottom: 16px; }
  #lang-switch { left: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}