/* E-SORP - Designvorschlag 2 (2026): ruhig, viel Weissraum, Gruen nur als Akzent */
:root {
  --gruen: #A4C540;          /* Logo-Gruen, nur fuer Linien/Marke */
  --gruen-text: #5C7A18;     /* Textgruen, Kontrast 4,9:1 auf Weiss (WCAG AA) */
  --gruen-dunkel: #4E6416;
  --schrift: #1F2418;
  --schrift-2: #4B5044;
  --schrift-3: #7A7F73;
  --linie: #E4E6E0;
  --flaeche: #F6F7F3;
  --fuss: #22281B;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; background: #FFFFFF; color: var(--schrift-2); font: 17px/1.65 "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; }
a { color: var(--gruen-text); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
.inner { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px; }
main { flex: 1 0 auto; }

/* Kopf: weiss, Wortmarke links, Menue rechts */
.kopf { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--linie); }
.kopf .inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.marke { display: inline-block; text-decoration: none; line-height: 1; }
.marke .wort { display: block; font: 700 26px/1 "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing: 3px; color: #5D6360; }
.marke .wort b { color: var(--gruen); font-weight: 700; }
.marke .zusatz { display: block; margin-top: 5px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--schrift-3); }
.menu { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.menu a { position: relative; display: block; padding: 28px 14px 25px; font-size: 15px; font-weight: 500; color: var(--schrift); text-decoration: none; transition: color .2s ease; }
.menu a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--gruen); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.menu a:hover, .menu a:focus-visible { color: var(--gruen-text); text-decoration: none; }
.menu a:hover::after, .menu a:focus-visible::after, .menu a.active::after { transform: scaleX(1); }

/* Startseite: Text links, Foto rechts */
.buehne { position: relative; overflow: hidden; padding: 96px 0 104px; background: radial-gradient(ellipse at 70% 40%, #2E3A22 0%, #1B2116 55%, #141811 100%); color: #E8ECDF; }
.buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.buehne .tagline { position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; pointer-events: none; white-space: nowrap; font: 300 16px/1 "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing: .12em; color: #D5DCC6; text-shadow: 0 0 12px rgba(164,197,64,.35); }
.buehne .inner { position: relative; z-index: 1; }
.buehne .inner > div { max-width: 640px; }
.buehne .kicker { color: var(--gruen); }
.kicker { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gruen-text); }
.buehne h1 { margin: 0 0 24px; font: 300 40px/1.25 "Segoe UI", Helvetica, Arial, sans-serif; color: #FFFFFF; letter-spacing: -.2px; }
.buehne h1 strong { font-weight: 600; }
.buehne p { margin: 0 0 28px; max-width: 34em; font-size: 18px; color: #C9D0BC; }
.buehne .mehr { color: #D7E39F; }
.buehne .knopf { background: var(--gruen); color: #1B2116; }
.buehne .knopf:hover, .buehne .knopf:focus-visible { background: #B9D65A; }

/* Aktuelles */
.aktuell { padding: 0 0 96px; }
.aktuell .inner { max-width: 860px; }
.news { border: 1px solid var(--linie); border-left: 4px solid var(--gruen); border-radius: 3px; padding: 26px 30px; background: #FFFFFF; }
.news .datum { margin: 0 0 6px; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; color: var(--schrift-3); }
.news h2 { margin: 0 0 12px; font: 600 22px/1.3 "Segoe UI", Helvetica, Arial, sans-serif; color: var(--schrift); }
.news p { margin: 0 0 14px; max-width: none; }
.news .mehr { margin-left: 0; }
.news + .news { margin-top: 18px; }
.alle { margin: 22px 0 0; }
.alle .mehr { margin-left: 0; }
.liste .news + .news { margin-top: 22px; }
.liste { max-width: 900px; }

.knopf { display: inline-block; padding: 13px 26px; border-radius: 3px; background: var(--gruen-dunkel); color: #FFFFFF; font-size: 15px; font-weight: 600; text-decoration: none; }
.knopf { transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.knopf:hover, .knopf:focus-visible { background: #3B4D10; text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.mehr::after { display: inline-block; transition: transform .15s ease; }
.mehr:hover::after { transform: translateX(4px); }
.news { transition: transform .2s ease, box-shadow .2s ease; }
.news:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.07); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .knopf, .news, .menu a::after { transition: none; } }
.mehr { margin-left: 22px; font-size: 15px; font-weight: 600; color: var(--gruen-text); }
.mehr::after { content: " \2192"; }

/* Kennzahlen: drei Spalten, feine Linien */
/* Produkt: Foto links, Text + Kennzahlen rechts */
.logo img { display: block; height: 52px; width: auto; }
.produkt { padding: 80px 0 64px; border-bottom: 1px solid var(--linie); }
.produkt .inner { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: center; }
.geraet { margin: 0; text-align: center; }
.geraet img { max-width: 100%; height: auto; max-height: 520px; width: auto; }
.geraet figcaption { margin-top: 10px; font-size: 13px; color: var(--schrift-3); }
.produkt-text h2 { margin: 0 0 16px; font: 600 26px/1.3 "Segoe UI", Helvetica, Arial, sans-serif; color: var(--schrift); }
.produkt-text > p { margin: 0 0 28px; max-width: 60ch; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.kennzahl { border-top: 3px solid var(--gruen); padding-top: 14px; }
.kennzahl strong { display: block; margin-bottom: 6px; font: 600 24px/1.1 "Segoe UI", Helvetica, Arial, sans-serif; color: var(--schrift); letter-spacing: -.3px; }
.kennzahl span { display: block; font-size: 14px; line-height: 1.5; color: var(--schrift-2); }
.aktuell { padding-top: 72px; }
/* Unterseiten: Text links, Bild rechts */
.zweispaltig { display: grid; grid-template-columns: 1fr 340px; gap: 64px; align-items: start; }
.zweispaltig .bild { position: sticky; top: 100px; }
.zweispaltig .bild { margin: 0; text-align: center; }
.zweispaltig .bild img { max-width: 100%; height: auto; }
.zweispaltig .bild figcaption { margin-top: 8px; font-size: 13px; color: var(--schrift-3); }
.inhalt h2 + dl.daten { margin-bottom: 8px; }
.stein { margin: 0; justify-self: end; align-self: center; }
.stein img { width: 300px; height: auto; display: block; }

/* Absatz unter den Kennzahlen */
.text { padding: 72px 0 96px; }
.text .inner { max-width: 860px; }
.text h2 { margin: 0 0 18px; font: 600 24px/1.3 "Segoe UI", Helvetica, Arial, sans-serif; color: var(--schrift); }
.text p { margin: 0 0 1.2em; }

/* Unterseiten */
.titel { background: var(--flaeche); border-bottom: 1px solid var(--linie); padding: 52px 0 40px; }
.titel h1 { margin: 0 0 8px; font: 300 40px/1.2 "Segoe UI", Helvetica, Arial, sans-serif; color: var(--schrift); }
.titel .untertitel { margin: 0; font-size: 19px; color: var(--schrift-2); }
.inhalt { padding: 48px 0 96px; }
.inhalt h2 { margin: 2em 0 .5em; font: 600 19px/1.3 "Segoe UI", Helvetica, Arial, sans-serif; color: var(--schrift); }
.inhalt > .inner > h2:first-child, .inhalt .kontakt h2 { margin-top: 0; }
.inhalt p { margin: 0 0 1.1em; max-width: 68ch; }
.inhalt .knopf { margin-top: 8px; }
.hinweis { margin-top: 28px; padding: 18px 22px; border-left: 3px solid var(--gruen); background: var(--flaeche); max-width: 60ch; }
.hinweis p { margin: 0; }
.band { position: relative; overflow: hidden; height: 220px; background: radial-gradient(ellipse at 70% 40%, #2E3A22 0%, #1B2116 55%, #141811 100%); }
.band canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

dl.daten { display: grid; grid-template-columns: 220px 1fr; gap: 0; margin: 0 0 8px; max-width: 820px; border-top: 1px solid var(--linie); }
dl.daten dt, dl.daten dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--linie); }
dl.daten dt { font-size: 14px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--schrift-3); }
dl.daten dd { color: var(--schrift); }

.kontakt { display: grid; grid-template-columns: 300px 300px 1fr; gap: 48px; align-items: start; }
.kontakt h2 { margin-top: 0; }
address { font-style: normal; line-height: 1.7; color: var(--schrift); }
.kontakt .zeile { display: block; margin: 0 0 14px; }
.kontakt .zeile small { display: block; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; color: var(--schrift-3); }
.kontakt .zeile a { font-size: 19px; color: var(--schrift); }

/* Fuss */
.fuss { background: var(--fuss); color: #B8BDB0; font-size: 14px; }
.fuss .inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; padding-top: 44px; padding-bottom: 44px; }
.fuss .marke .wort { color: #D6DACF; font-size: 20px; }
.fuss .marke .zusatz { color: #8B9184; }
.fuss p { margin: 14px 0 0; line-height: 1.7; }
.fuss a { color: #E7EAE1; }
.fuss nav { display: flex; gap: 28px; align-items: flex-start; padding-top: 6px; }
.fuss nav a { color: #E7EAE1; font-weight: 500; }

@media (max-width: 900px) {
  .buehne { padding: 64px 0 72px; }
  .buehne h1 { font-size: 32px; }
  .produkt { padding: 48px 0 40px; }
  .produkt .inner { grid-template-columns: 1fr; gap: 32px; }
  .geraet img { max-height: 380px; }
  .kennzahlen { grid-template-columns: 1fr; gap: 18px; }
  .zweispaltig { grid-template-columns: 1fr; gap: 32px; }
  .kontakt { grid-template-columns: 1fr; gap: 24px; }
  .stein { justify-self: center; margin-top: 16px; }
}
@media (max-width: 640px) {
  .inner { padding: 0 20px; }
  .kopf .inner { flex-wrap: wrap; min-height: 0; padding-top: 16px; }
  .menu { width: 100%; gap: 0; margin-left: -14px; }
  .menu a { padding: 12px 14px 10px; font-size: 14px; }
  .titel h1, .buehne h1 { font-size: 28px; }
  .titel { padding: 36px 0 28px; }
  .band { height: 140px; }
  .inhalt { padding: 32px 0 64px; }
  dl.daten { grid-template-columns: 1fr; }
  dl.daten dt { padding-bottom: 2px; border-bottom: 0; }
  dl.daten dd { padding-top: 0; }
  .mehr { display: inline-block; margin: 14px 0 0; }
}