/* Schrift "Plus Jakarta Sans", selbst gehostet.
   Frueher kam sie von fonts.googleapis.com - dabei ging die IP-Adresse jedes
   Besuchers an Google. Jetzt liegen die Dateien in styles/schriften/; es geht
   keine Anfrage mehr an fremde Server. Lizenz: SIL Open Font License 1.1,
   Lizenztext in styles/schriften/OFL.txt. Eine Datei je Zeichensatz
   (latin, latin-ext) deckt alle Schriftstaerken ab. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;          /* eine variable Datei fuer alle Staerken */
  font-display: swap;
  src: url('schriften/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;          /* eine variable Datei fuer alle Staerken */
  font-display: swap;
  src: url('schriften/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =============================================================================
   TS Umweltanlagenbau — site stylesheet
   -----------------------------------------------------------------------------
   Everything visual is driven by the tokens in :root. To restyle the site,
   change a token here rather than hunting through the rules below.

   Layered on top of Bootstrap 3 (CDN) and content/style.css, both of which
   load first. Selectors are written to match or beat Bootstrap's own
   specificity, so !important is only used where a third party leaves no
   alternative (Bootstrap inline-level rules and .btn state colours).

   Sections
     1  Tokens          6  Products grid     11  Inner carousels
     2  Base            7  CTA strip         12  Footer
     3  Navigation      8  Content pages     13  Accessibility
     4  Video hero      9  References        14  Responsive
     5  Trust bar      10  Figures
   ========================================================================== */


/* 1 — TOKENS ============================================================== */

:root {
  /* Brand greens ------------------------------------------------------- */
  --green-900: #052e16;   /* headings, footer, CTA panel               */
  --green-800: #166534;   /* primary button hover                      */
  --green-700: #15803d;   /* primary action, accents, active nav       */
  --green-200: #bbf7d0;   /* card hover border                         */
  --green-100: #dcfce7;   /* badge background                          */
  --green-50:  #f0fdf4;   /* icon chip, dropdown hover                 */

  /* Neutrals ----------------------------------------------------------- */
  --ink:        #1f2937;  /* strongest body text                       */
  --text:       #374151;  /* default body text                         */
  --text-soft:  #475569;  /* secondary text                            */
  --text-muted: #64748b;  /* captions, meta                            */
  --text-faint: #94a3b8;  /* on dark grounds                           */
  --line:       #e5e7eb;  /* borders                                   */
  --line-soft:  #f1f5f9;  /* hairlines, list separators                */
  --surface:      #ffffff;
  --surface-alt:  #f8fafc; /* page background                          */
  --surface-sunk: #fafcf9; /* figure captions                          */
  --surface-grey: #eef1f5; /* abgesetzter Abschnitt (Produkte)         */

  /* Rueckmeldungen im Formular ----------------------------------------- */
  --fehler-text:  #991b1b;
  --fehler-grund: #fef2f2;
  --fehler-linie: #fecaca;
  --knapp-text:   #b45309; /* Zeichenzaehler kurz vor der Grenze        */

  /* Typography --------------------------------------------------------- */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-3xs:  0.625rem;    /* 10px — micro uppercase labels             */
  --fs-2xs:  0.6875rem;   /* 11px                                      */
  --fs-xs:   0.75rem;     /* 12px                                      */
  --fs-sm:   0.8125rem;   /* 13px — nav, captions, dense lists         */
  --fs-md:   0.875rem;    /* 14px — small body                         */
  --fs-base: 0.9375rem;   /* 15px — body copy                          */
  --fs-lg:   1.125rem;    /* 18px — lead, card titles                  */
  --fs-xl:   1.375rem;    /* 22px — h2 / CTA heading                   */
  --fs-2xl:  1.75rem;     /* 28px — section title                      */
  --fs-3xl:  2.25rem;     /* 36px — page h1                            */

  --lh-tight: 1.15;
  --lh-snug:  1.4;
  --lh-body:  1.7;

  --ls-tight: -0.02em;    /* large headings                            */
  --ls-none:  0;
  --ls-wide:  0.02em;     /* buttons, brand                            */
  --ls-wider: 0.12em;     /* uppercase labels                          */

  /* Radius ------------------------------------------------------------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 9999px;

  /* Elevation ---------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .06);
  --shadow-lg: 0 8px 24px rgba(21, 128, 61, .09), 0 2px 8px rgba(0, 0, 0, .04);

  /* Motion ------------------------------------------------------------- */
  --dur: .2s;
  --ease: ease;

  /* Layout ------------------------------------------------------------- */
  --navbar-h: 53px;
  --navbar-h-mobile: 49px;
  --measure: 72ch;        /* comfortable reading width                 */
}


/* 2 — BASE ================================================================ */

/* Bootstrap 3 sets html{font-size:10px}, which would make every rem token
   render at 62.5%. Restore the browser default so 1rem = 16px and the sizes
   in the token block above are the sizes that actually render. */
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--surface-alt);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Bootstrap sets its own stack on form controls and .btn */
button, input, select, textarea, .btn { font-family: var(--font); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--green-900);
  letter-spacing: var(--ls-tight);
}

::selection { background: var(--green-100); color: var(--green-900); }

/* Externe Ziele oeffnen in einem neuen Tab - das Symbol kuendigt den
   Wechsel an. Der Kartenlink ist ein Bild und bleibt ohne Symbol. */
.content-wrapper a[target="_blank"]:not(.karte-link)::after {
  content: "↗";
  font-size: .8em;
  margin-left: 3px;
  display: inline-block;
  text-decoration: none;
}


@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* 3 — NAVIGATION ========================================================== */

.navbar-default {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  min-height: var(--navbar-h);
}
.navbar-default .container { position: relative; }

/* -- Brand lockup: logo + company name + claim ------------------------- */
.navbar-default .navbar-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  height: calc(var(--navbar-h) - 1px);
  padding: 0 18px 0 15px;
  color: var(--green-900);
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus { color: var(--green-700); }

.navbar-logo {
  flex: none;
  display: block;
  height: 34px;
  width: auto;
}
.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: var(--lh-tight);
}
.brand-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.brand-claim {
  margin-top: 3px;
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* -- Links -------------------------------------------------------------- */
.navbar-default .navbar-nav > li > a {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  color: var(--text);
  /* padding + line-height are pinned so the bar is exactly --navbar-h tall,
     which is what .video-hero offsets itself by */
  padding: 0 18px;
  line-height: calc(var(--navbar-h) - 1px);
  background: transparent;
  transition: color var(--dur) var(--ease);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: var(--green-700);
  background: transparent;
}

/* Current page is marked by colour *and* an underline, not colour alone */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  box-shadow: inset 0 -2px 0 var(--green-700);
}

.navbar-default .navbar-nav > li.nav-lang > a { padding-left: 8px; padding-right: 8px; }
.navbar-default .navbar-nav > li.nav-lang:not(.active) > a { color: var(--text-muted); }

.navbar-default .caret { border-top-color: currentColor; }

/* -- Dropdown ----------------------------------------------------------- */
.navbar-default .dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 6px 0;
}
.navbar-default .dropdown-menu > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text);
  padding: 7px 20px;
}

/* Untermenue-Eintraege tragen dasselbe Motiv wie die Kachel auf der
   Startseite: die Leistungen ein Icon, die Produkte ihr Material. */
.menu-icon,
.menu-thumb {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
}
.menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 12px;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navbar-default .dropdown-menu > li > a:hover .menu-icon,
.navbar-default .dropdown-menu > li > a:focus .menu-icon {
  background: var(--green-700);
  color: var(--surface);
}
.menu-thumb {
  background-color: var(--line);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(5, 46, 22, .08);
}
/* dieselben Ausschnitte wie in den Kacheln, nur kleiner */
.menu-thumb.material--aktivkohle     { background-size: 300%; background-position: 50% 22%; }
.menu-thumb.material--zeolith        { background-size: 280%; }
.menu-thumb.material--filtermaterial { background-size: 300%; }
.menu-thumb.material--fuellkoerper   { background-size: 300%; }
.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu > li > a:focus {
  color: var(--green-700);
  background: var(--green-50);
}

/* -- Mobile toggle ------------------------------------------------------ */
.navbar-default .navbar-toggle {
  border-color: var(--line);
  border-radius: var(--r-sm);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: var(--line-soft); }
.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--text);
  width: 22px;
  height: 2px;
}



/* 4 — VIDEO HERO ========================================================== */

.video-hero { margin-top: var(--navbar-h); }

.video-hero-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* the video's own ground colour, so there is no white flash before the
     first frame paints */
  background: rgb(103, 113, 105);
}
/* width/height attributes on the element reserve the box, so no layout shift */
.video-hero-video {
  display: block;
  width: 100%;
  height: auto;
}

/* Pause/play control — WCAG 2.2.2 requires a way to stop moving content */
.video-hero-toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(5, 46, 22, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.video-hero-toggle:hover { background: rgba(5, 46, 22, .78); }
.video-hero-toggle[data-state="playing"] .video-hero-toggle-icon {
  display: block;
  width: 12px;
  height: 13px;
  border-left: 4px solid var(--surface);
  border-right: 4px solid var(--surface);
}
.video-hero-toggle[data-state="paused"] .video-hero-toggle-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-left: 12px solid var(--surface);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

/* -- Hero copy ---------------------------------------------------------- */
.video-hero-text {
  text-align: center;
  padding: 40px 0 8px;
}
.video-hero-text h1 {
  margin: 0;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
}
.video-hero-text p {
  color: var(--text-soft);
  font-size: var(--fs-base);
  max-width: 56ch;
  margin: 14px auto 0;
}
.video-hero-text p strong { color: var(--green-900); }

/* -- Buttons ------------------------------------------------------------ */
.cta-strip-btn {
  display: inline-block;
  padding: 13px 28px;
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.cta-strip-btn,
.cta-strip-btn:link,
.cta-strip-btn:visited {
  background: var(--surface);
  color: var(--green-900);
  box-shadow: var(--shadow-sm);
}
.cta-strip-btn:hover,
.cta-strip-btn:focus {
  background: var(--line-soft);
  color: var(--green-900);
  transform: translateY(-1px);
  text-decoration: none;
}


/* 5 — TRUST BAR =========================================================== */

.trust-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  animation: fadeInUp .5s ease-out .2s both;
}
.trust-bar-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid var(--line);
}
.trust-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 22px 24px;
  text-align: center;
  border-right: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease);
}
.trust-item:last-child { border-right: none; }
.trust-item:hover { background: var(--green-50); }
.trust-item strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--green-700);
  letter-spacing: var(--ls-wide);
}
.trust-item strong::before {
  content: '\2713\00a0';
  font-weight: 800;
}
.trust-item span {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: var(--ls-wide);
}


/* 6 — PRODUCTS GRID ======================================================= */

.buzzword-wrapper {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  padding: 72px 0 80px;
}
/* Produkte stehen auf grauem Grund, damit sie sich von den Leistungen
   darueber absetzen */
.buzzword-wrapper--products { background: var(--surface-grey); }
.buzzword-header {
  margin-bottom: 48px;
  text-align: center;
  animation: fadeInUp .5s ease-out .4s both;
}
.buzzword-wrapper .buzzword-section-title {
  /* die Kachel-Regel .buzzword-wrapper h2 setzt display:flex; hier zurueck-
     nehmen, sonst richtet der Flex-Container den Text links aus und das
     text-align:center des .buzzword-header bleibt wirkungslos */
  display: block;
  font-size: var(--fs-2xl);
  /* Schnitt wie die Seitenueberschrift im Hero: Gewicht 500 und die
     engere Laufweite, nicht der fette Schnitt der Kacheltitel */
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  color: var(--green-900);
  margin: 0;
  line-height: var(--lh-tight);
}

.buzzword-wrapper .row { display: flex; flex-wrap: wrap; }
.buzzword-wrapper .col-xs-12 {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
}

.buzzword-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px 26px;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  animation: fadeInUp .4s ease-out both;
  transition: box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.buzzword-wrapper .col-xs-12:nth-child(1) .buzzword-card { animation-delay: .5s; }
.buzzword-wrapper .col-xs-12:nth-child(2) .buzzword-card { animation-delay: .6s; }
.buzzword-wrapper .col-xs-12:nth-child(3) .buzzword-card { animation-delay: .7s; }
.buzzword-wrapper .col-xs-12:nth-child(4) .buzzword-card { animation-delay: .8s; }
.buzzword-wrapper .col-xs-12:nth-child(5) .buzzword-card { animation-delay: .9s; }
.buzzword-wrapper .col-xs-12:nth-child(6) .buzzword-card { animation-delay: 1s; }

.buzzword-card:hover,
.buzzword-card:focus {
  border-color: var(--green-200);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}
/* Accent bar wipes in on hover */
.buzzword-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--green-700);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.buzzword-card:hover::before { transform: scaleX(1); }
/* Trailing arrow */
.buzzword-card::after {
  content: '\2192';
  display: block;
  margin-top: auto;
  padding-top: 16px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--green-700);
  opacity: .28;
  transition: opacity var(--dur) var(--ease);
}
.buzzword-card:hover::after { opacity: 1; }

.buzzword-wrapper h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Titel steht in .card-title, damit <sub> und Text nicht zu getrennten
     Flex-Items werden (sonst reisst der gap sie auseinander) */
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--green-900);
  margin: 0 0 14px;
  letter-spacing: var(--ls-none);
}
.buzzword-wrapper h2 a { color: inherit; text-decoration: none; }
.buzzword-wrapper h2 .card-title {
  /* fuellt den Platz neben dem Chip; min-width:0 erlaubt zusammen mit
     break-word den Umbruch langer Komposita wie "Biogasentschwefelung",
     die sonst bei ~992px abgeschnitten wurden */
  flex: 1 1 auto;
  min-width: 0;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.buzzword-wrapper h2 span:not(.card-thumb):not(.card-title) {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  background: var(--green-50);
  transition: background-color .3s var(--ease);
}
.buzzword-wrapper h2 span i.fa {
  color: var(--green-700);
  font-size: 16px;
  transition: color .3s var(--ease);
}
/* Nur verlinkte Kacheln geben eine Hover-Rueckmeldung. Die Leistungen sind
   (noch) nicht verlinkt, dort waere ein Farbwechsel irrefuehrend. */
.buzzword-card:hover h2 span:not(.card-thumb):not(.card-title) { background: var(--green-700); }
.buzzword-card:hover h2 span i.fa { color: var(--surface); }

/* -- Produktkacheln zeigen einen Materialausschnitt statt eines Icons -- */
.buzzword-wrapper h2 span.card-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background-color: var(--line);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(5, 46, 22, .08);
}

/* Materialmotive. Kachel und Untermenue verwenden dieselben Klassen, nur in
   unterschiedlicher Groesse - die Zoomwerte sind Prozent und skalieren mit. */
.material--aktivkohle     { background-image: url('../img/material/aktivkohle.png'); }
.material--zeolith        { background-image: url('../img/material/zeolith.jpg'); }
.material--filtermaterial { background-image: url('../img/material/hackschnitzel.jpg'); }
.material--fuellkoerper   { background-image: url('../img/material/fuellkoerper.jpg'); }
/* Rohrbuendel eines Waermeuebertragers, bereits quadratisch zugeschnitten */
.material--rohrbuendel    { background-image: url('../img/material/rohrbuendel.jpg'); }

/* Ausschnitt-Vergroesserung, damit das Material erkennbar wird. Die Werte
   sind so gewaehlt, dass alle vier einen aehnlich grossen Materialausschnitt
   zeigen. Die Selektoren muessen das "background-size: cover" der Basisregel
   schlagen, daher die volle Spezifitaet. */
.buzzword-wrapper h2 span.material--aktivkohle     { background-size: 300%; background-position: 50% 22%; }
.buzzword-wrapper h2 span.material--zeolith        { background-size: 280%; }
.buzzword-wrapper h2 span.material--filtermaterial { background-size: 300%; }
.buzzword-wrapper h2 span.material--fuellkoerper   { background-size: 300%; }


/* Bei den Produkten bleibt das Materialfoto beim Hover unveraendert,
   deshalb traegt hier der Titel die Rueckmeldung - in denselben Farben wie
   die Icon-Chips der Leistungen: gruen auf hellgruen, beim Hover weiss auf
   gruen. */
.buzzword-wrapper--products .card-title {
  background: var(--green-50);
  color: var(--green-700);
  padding: 9px 14px;
  border-radius: var(--r-md);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.buzzword-wrapper--products .buzzword-card:hover .card-title {
  background: var(--green-700);
  color: var(--surface);
}

.buzzword-wrapper p {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text-soft);
  margin: 0;
}


/* 7 — CTA STRIP =========================================================== */

.cta-strip { padding: 32px 0 64px; }
.cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  background: var(--green-900);
  border-radius: var(--r-xl);
  padding: 48px 52px;
}
.cta-strip-text { display: flex; flex-direction: column; gap: 3px; }
.cta-strip-text strong {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--surface);
  letter-spacing: var(--ls-tight);
}
.cta-strip-text span {
  font-size: var(--fs-md);
  color: var(--text-faint);
}
.cta-strip-btn { flex-shrink: 0; }


/* 8 — CONTENT PAGES ======================================================= */

.content-wrapper {
  background: var(--surface-alt);
  padding: 72px 0 80px;
}
.content-wrapper .row {
  background: var(--surface);
  max-width: 920px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 28px 20px 48px;
}

.content-wrapper h1 {
  display: inline-block;
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--green-900);
  line-height: var(--lh-tight);
  margin: 0 0 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--green-700);
}
.content-wrapper h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--green-900);
  margin: 44px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.content-wrapper h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--green-700);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin: 32px 0 8px;
}

.content-wrapper p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  margin: 8px 0 14px;
  max-width: var(--measure);
}

.content-wrapper a:link,
.content-wrapper a:visited { color: var(--green-700); text-decoration: none; }
.content-wrapper a:hover,
.content-wrapper a:focus { color: var(--green-800); text-decoration: underline; }
/* Self-referencing heading anchors must not look like links */
.content-wrapper .anchor:link,
.content-wrapper .anchor:visited,
.content-wrapper .anchor:hover { color: inherit; text-decoration: none; }

.content-wrapper ul {
  max-width: var(--measure);
  padding-left: 0;
  list-style: none;
}
.content-wrapper ul li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--text);
  border-bottom: 1px solid var(--line-soft);
}
.content-wrapper ul li:last-child { border-bottom: none; }
.content-wrapper ul li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--green-700);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.content-wrapper code { background: transparent; }


/* 8b — KONTAKTSEITE ======================================================= */

.kontakt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  margin: 20px 0 8px;
  max-width: var(--measure);
}
.kontakt-block {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px 20px;
}
.content-wrapper .kontakt-block h3 { margin: 0 0 8px; }
.content-wrapper .kontakt-block p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

/* -- Anfrageformular ---------------------------------------------------- */
.kontakt-formular {
  max-width: var(--measure);
  margin-top: 20px;
}
.kontakt-formular .feld-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 20px;
}
.content-wrapper .kontakt-formular p.feld { margin: 0 0 16px; max-width: none; }
.kontakt-formular label {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--green-900);
}
.kontakt-formular input[type="text"],
.kontakt-formular input[type="tel"],
.kontakt-formular input[type="email"],
.kontakt-formular textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kontakt-formular input:focus,
.kontakt-formular textarea:focus {
  outline: none;
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, .15);
}
.kontakt-formular textarea { resize: vertical; min-height: 120px; }
.kontakt-formular .pflicht { color: var(--green-700); }

.content-wrapper .kontakt-formular p.feld-einwilligung {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 14px;
  max-width: none;
}
.kontakt-formular .feld-einwilligung input { margin-top: 3px; flex-shrink: 0; }
.kontakt-formular .feld-einwilligung label {
  font-weight: 400;
  font-size: var(--fs-base);
  color: var(--text);
  margin: 0;
}
.content-wrapper .kontakt-formular p.feld-hinweis {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 18px;
}
/* Spamschutz: fuer Menschen unsichtbar, aber nicht via display:none, damit
   Bots es im Markup finden und ausfuellen */
.kontakt-formular .feld-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Absende-Knopf in denselben Farben wie die Produktkacheln der Startseite:
   gruen auf hellgruen, beim Hover weiss auf gruen */
.kontakt-formular button.cta-strip-btn {
  background: var(--green-50);
  color: var(--green-700);
  border: none;
  box-shadow: none;
}
.kontakt-formular button.cta-strip-btn:hover,
.kontakt-formular button.cta-strip-btn:focus {
  background: var(--green-700);
  color: var(--surface);
}

.kontakt-formular button.cta-strip-btn:disabled {
  opacity: .65;
  cursor: progress;
}

/* Zeichenzaehler unter der Nachricht; ohne JS steht dort nur die Grenze */
.kontakt-formular .feld-zaehler {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.kontakt-formular .feld-zaehler.ist-knapp { color: var(--knapp-text); font-weight: 600; }

/* Fehlermeldung aus kontakt.js - steht direkt ueber dem Absende-Knopf */
.content-wrapper .kontakt-formular p.formular-meldung {
  max-width: none;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--fehler-linie);
  border-radius: var(--r-md);
  background: var(--fehler-grund);
  color: var(--fehler-text);
  font-size: var(--fs-md);
}
.kontakt-formular [aria-invalid="true"] { border-color: var(--fehler-text); }

@media (max-width: 767px) {
  .kontakt-formular button.cta-strip-btn { width: 100%; }
}

/* -- Standortkarte: statisches Bild, damit beim Seitenaufruf keine Daten an
      Dritte gehen. Erst der Klick oeffnet Google Maps. ------------------- */
.karte-link {
  position: relative;
  display: block;
  max-width: var(--measure);
  margin: 18px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  line-height: 0;
}
.karte-link img { display: block; width: 100%; height: auto; }

/* Position des Standorts im Kachelraster: 395/768 bzw. 195/512 */
.karte-marker {
  position: absolute;
  left: 51.4%;
  top: 38.1%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--green-700);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 2px 6px rgba(0, 0, 0, .35);
}
.karte-hinweis {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .94);
  color: var(--green-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.karte-link:hover .karte-hinweis,
.karte-link:focus .karte-hinweis {
  background: var(--green-700);
  color: var(--surface);
}
.content-wrapper p.karte-quelle {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0 0 8px;
}

/* -- Titelbild oben auf einer Inhaltsseite (Jobs, Kontakt) --------------
      Die Zeichnung ist 1200 x 800 gross. Das Seitenverhaeltnis steht hier
      noch einmal, damit der Platz schon vor dem Laden steht und der Text
      darunter nicht springt. Die Vorlage hat weissen Grund, deshalb die
      feine Linie: sonst verschwimmt der Rand mit der Seite. --- */
.seiten-banner {
  margin: 0 0 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.seiten-banner img {
  display: block;
  width: 100%;
  /* Seitenverhaeltnis kommt aus width/height des jeweiligen Bildes
     (Jobs 3:2, Kontakt 16:9) - ein fester Wert wuerde eines verzerren */
  height: auto;
}

/* 9 — REFERENCES ========================================================== */

.content-wrapper .ref-intro {
  font-size: var(--fs-base);
  color: var(--text);
  max-width: none;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--green-900);
}
.content-wrapper .ref-section {
  padding: 28px 0;
  box-sizing: border-box;
}
/* Ueberschriften folgen dem System der uebrigen Seiten (h2 / h3); hier
   wird nur der Abstand an den kompakten Aufbau der Liste angepasst */
.content-wrapper .ref-section h2 { margin-top: 0; }
.content-wrapper .ref-section h2 small {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 8px;
  white-space: nowrap;
}
.content-wrapper .ref-section > p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: none;
  margin: 0 0 14px;
}

.ref-full-years { columns: 2; column-gap: 48px; margin-top: 16px; }
.ref-year-block { break-inside: avoid; margin-bottom: 24px; }
.content-wrapper .ref-year-block h3 { margin: 0 0 6px; }

.content-wrapper .ref-list { list-style: none; padding: 0; margin: 0; max-width: none; }
.content-wrapper .ref-list li {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: var(--lh-snug);
  padding: 5px 0;
  margin: 0;
  border-bottom: 1px solid var(--line-soft);
}
.content-wrapper .ref-list li:last-child { border-bottom: none; }
.content-wrapper .ref-list li::before { display: none; }


/* 10 — BILDGALERIE ======================================================= */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  margin: 24px 0 8px;
}
.galerie-bild {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.galerie-bild > a {
  display: block;
  position: relative;
  line-height: 0;
  background: var(--surface-alt);
}
.galerie-bild img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .35s var(--ease);
}
.galerie-bild > a:hover img,
.galerie-bild > a:focus-visible img { transform: scale(1.04); }
/* Lupensymbol beim Ueberfahren */
.galerie-bild > a::after {
  content: '⤢';
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(5, 46, 22, .72);
  color: var(--surface);
  font-size: var(--fs-lg);
  line-height: 26px;
  text-align: center;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.galerie-bild > a:hover::after,
.galerie-bild > a:focus-visible::after { opacity: 1; }
/* Verfahrensschema: eine Grafik mit eigener Beschriftung. Sie nutzt Karte
   und Grossansicht der Galerie, wird aber nicht auf 4:3 zugeschnitten (das
   schnitte Beschriftungen ab) und steht in Textbreite. */
.galerie--schema { display: block; max-width: var(--measure); }
/* Karten und Schemata, die breiter als das Textmass sein duerfen */
.galerie--breit { max-width: none; }
.galerie--schema .galerie-bild img {
  /* Seitenverhaeltnis der Grafik, damit der Platz schon vor dem Laden
     reserviert ist und der Text darunter nicht springt. Je Grafik ueber
     die Variable --verhaeltnis im Markup einstellbar. */
  aspect-ratio: var(--verhaeltnis, auto 1240 / 1017);
  object-fit: contain;
  height: auto;
  padding: 18px;
  background: var(--surface);
}
.galerie--schema .galerie-bild > a:hover img,
.galerie--schema .galerie-bild > a:focus-visible img { transform: none; }
/* am Handy zaehlt jeder Pixel Breite fuer die Beschriftungen der Grafik;
   steht hier und nicht im Mobilblock, weil sie die Regel oben ueberstimmen muss */
@media (max-width: 767px) {
  .galerie--schema .galerie-bild img { padding: 6px; }
}

/* Lange Galerien klappt galerie.js ein. Das Attribut hidden allein genuegt
   nicht: die Regel oben setzt display:flex und wuerde es ueberstimmen. */
.galerie-bild[hidden] { display: none; }
/* Video in der Galerie: Abspielzeichen dauerhaft auf dem Vorschaubild */
.galerie-bild--video > a::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(5, 46, 22, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5.5v9l7-4.5z' fill='%23fff'/%3E%3C/svg%3E") center / 60% no-repeat;
  transition: background-color var(--dur) var(--ease);
}
.galerie-bild--video > a:hover::before,
.galerie-bild--video > a:focus-visible::before { background-color: rgba(5, 46, 22, .9); }
video.lightbox-bild[hidden] { display: none; }
.galerie-mehr {
  display: inline-block;
  margin: 2px 0 10px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--green-50);
  color: var(--green-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.galerie-mehr:hover,
.galerie-mehr:focus-visible {
  background: var(--green-700);
  color: var(--surface);
}

.content-wrapper .galerie-bild figcaption {
  padding: 10px 13px 12px;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  border-top: 1px solid var(--line-soft);
  /* lange Komposita ("Biogasentschwefelungsanlage") in schmalen Karten trennen */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* -- Grossansicht ------------------------------------------------------- */
body.lightbox-offen { overflow: hidden; }
/* muss vor der display-Regel stehen und sie ueberstimmen: sonst haelt
   display:flex das Overlay sichtbar, obwohl hidden gesetzt ist */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(5, 46, 22, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.lightbox-buehne {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lightbox-bild {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  height: auto;
  border-radius: var(--r-sm);
  background: var(--surface);
}
.lightbox-text {
  margin: 0;
  max-width: 62ch;
  text-align: center;
  color: var(--surface);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}
.lightbox-zaehler {
  margin: 0;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  color: var(--surface);
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  font-family: var(--font);
  transition: background-color var(--dur) var(--ease);
}
.lightbox button svg {
  width: 56%;
  height: 56%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lightbox button:hover,
.lightbox button:focus-visible { background: rgba(255, 255, 255, .28); }
.lightbox-zu {
  top: 16px; right: 16px;
  width: 44px; height: 44px;
}
.lightbox-zurueck, .lightbox-vor {
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
}
.lightbox-zurueck { left: 16px; }
.lightbox-vor { right: 16px; }

@media (max-width: 600px) {
  .galerie { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .lightbox { padding: 2vh 2vw; }
  .lightbox-bild { max-height: 62vh; }
  .lightbox-zurueck, .lightbox-vor { width: 40px; height: 40px; font-size: 24px; }
  .lightbox-zurueck { left: 6px; }
  .lightbox-vor { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .galerie-bild img { transition: none; }
  .galerie-bild > a:hover img { transform: none; }
}

/* 11 — FOOTER ============================================================= */

footer {
  background: var(--green-900);
  color: var(--text-faint);
  font-size: var(--fs-md);
  padding: 56px 0 48px;
}
footer h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--line-soft);
  letter-spacing: var(--ls-wide);
  margin: 20px 0 10px;
}
footer p, footer address {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--text-faint);
}
footer a:link, footer a:visited { color: var(--text-faint); text-decoration: none; }
footer a:hover, footer a:focus { color: var(--surface); text-decoration: none; }

.footer-main-row { align-items: center; }
.footer-logo-col {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 0;
}
.footer-logo-img {
  max-width: 200px;
  width: 100%;
  /* ohne height:auto wuerde das height-Attribut des <img> die Hoehe
     festhalten und das Logo verzerren */
  height: auto;
  opacity: .7;
  /* das Logo ist gruen (#15803d); auf dem dunkelgruenen Fuss waere es nicht
     zu erkennen, deshalb wird es dort weiss eingefaerbt */
  filter: brightness(0) invert(1);
}

.footer-legal {
  width: 100%;
  text-align: center;
  font-size: var(--fs-xs);
  /* --text-faint, not --text-muted: 5.8:1 on the dark ground rather than 3.1:1 */
  color: var(--text-faint);
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer-legal a:link, .footer-legal a:visited { color: var(--text-faint); }
.footer-legal a:hover, .footer-legal a:focus { color: var(--surface); }
.footer-sep { margin: 0 8px; opacity: .5; }


/* 12 — ACCESSIBILITY ====================================================== */

a:focus-visible,
button:focus-visible,
.buzzword-card:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 3px;
}
.cta-strip-btn:focus-visible,
.video-hero-toggle:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .trust-bar,
  .buzzword-header,
  .buzzword-card { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


/* 13 — RESPONSIVE ========================================================= */

/* -- Tablet: Schriftzug und acht Menuepunkte passen nebeneinander nicht mehr
      in eine Zeile. Statt beides zusammenzuquetschen klappt das Menue hier
      schon ueber den Knopf auf - Bootstrap taete das erst unter 768px.
      Die zwei !important sind der einzige Weg an Bootstraps eigenem
      ".navbar-collapse.collapse { display: block !important }" vorbei. --- */
@media (max-width: 991px) {
  .navbar-default .navbar-header { float: none; }
  .navbar-default .navbar-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(var(--navbar-h) - 1px);
    margin: 0 8px 0 0;
    padding: 0 10px;
  }
  .navbar-default .navbar-collapse {
    background: rgba(255, 255, 255, .98);
    border-color: var(--line);
    box-shadow: var(--shadow-md);
  }
  .navbar-default .navbar-collapse.collapse { display: none !important; }
  .navbar-default .navbar-collapse.collapse.in { display: block !important; }
  .navbar-default .navbar-nav { float: none; margin: 0; }
  .navbar-default .navbar-nav > li { float: none; }
  .navbar-default .navbar-collapse .nav > li > a { padding: 12px 20px; line-height: var(--lh-snug); }
  /* Untermenues stehen im aufgeklappten Menue mit im Fluss, nicht darueber */
  .navbar-default .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    padding: 0 0 4px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a { padding-left: 36px; }
}

@media (min-width: 768px) {
  .content-wrapper .row { padding: 44px 48px 64px; }
}

@media (min-width: 992px) {
  .content-wrapper .row { padding: 52px 64px 72px; }
}

/* -- Mobile ------------------------------------------------------------- */
@media (max-width: 767px) {
  .navbar-default { min-height: var(--navbar-h-mobile); }
  .navbar-default .navbar-brand {
    height: calc(var(--navbar-h-mobile) - 1px);
    gap: 7px;
    padding: 0 10px 0 12px;
  }
  .navbar-logo { height: 24px; }
  .brand-name { font-size: var(--fs-md); }
  .brand-claim { font-size: var(--fs-3xs); letter-spacing: var(--ls-wide); margin-top: 2px; }
  /* Grund, Schatten und Aufklappen stehen im Block bis 991px; hier zaehlt
     nur die kleinere Leistenhoehe, an der der Knopf haengt. */
  .navbar-default .navbar-toggle { height: calc(var(--navbar-h-mobile) - 1px); }

  .video-hero { margin-top: var(--navbar-h-mobile); }
  .video-hero-text { padding: 26px 0 4px; }
  .video-hero-text h1 { font-size: var(--fs-2xl); }
  .video-hero-text p { max-width: none; text-align: left; }
  .video-hero-toggle { right: 10px; bottom: 10px; width: 34px; height: 34px; }

  .cta-strip-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 22px;
  }

  /* Trust bar becomes a 2x2 grid */
  .trust-item {
    flex: 0 0 50%;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }
  .trust-item:nth-child(odd) { border-right: 1px solid var(--line); }
  .trust-item:nth-child(even) { border-right: none; }
  .trust-item:nth-child(n+3) { border-bottom: none; }

  .buzzword-wrapper { padding: 52px 0 60px; }
  .buzzword-wrapper h2 span.card-thumb { width: 48px; height: 48px; }
  .buzzword-header { margin-bottom: 32px; }
  .buzzword-wrapper .col-xs-12 { padding: 6px 12px; }
  .buzzword-card { padding: 24px 20px 20px; }
  .buzzword-wrapper h2 { font-size: var(--fs-base); }
  .buzzword-wrapper h2 span:not(.card-thumb):not(.card-title) { width: 38px; height: 38px; border-radius: var(--r-md); }

  .cta-strip { padding: 12px 12px 32px; }
  .cta-strip-inner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
    border-radius: var(--r-lg);
  }
  .cta-strip-text { text-align: center; }
  .cta-strip-text strong { font-size: var(--fs-lg); }
  .cta-strip-btn { margin-top: 16px; }

  .content-wrapper { padding: 56px 0 64px; }
  .content-wrapper .row { border-radius: 0; margin: 0 -15px; padding: 24px 16px 36px; }
  .content-wrapper h1 { font-size: var(--fs-2xl); }
  .content-wrapper h2 { font-size: var(--fs-lg); margin-top: 32px; }

  footer { padding: 40px 0 36px; }
  footer .col-md-4 { text-align: center; margin-bottom: 20px; }
  footer h3 { margin-top: 8px; }
  .footer-logo-col { padding: 8px 0; }
  .footer-logo-img { max-width: 140px; }
}

/* -- Below 360px the lockup and the hamburger want the same pixels; the
      name and claim carry meaning, the logo is decorative. -------------- */
@media (max-width: 359px) {
  .navbar-logo { display: none; }
}

@media (max-width: 600px) {
  .ref-full-years { columns: 1; }
}


/* 14 — TECHNOLOGIEVERGLEICH =============================================
   Eigener Abschnitt am Dateiende: alle Regeln tragen das Praefix .tv-,
   beruehren also nichts anderes. Der Block steht bewusst hinter dem
   Responsive-Abschnitt und bringt seine eigene Handy-Regel gleich mit. */

.tv-block {
  margin: 0 0 30px;
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-sunk);
}
.tv-block > h3:first-child { margin-top: 0; }

/* -- Eingabefelder ----------------------------------------------------- */
.tv-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 18px;
}
.tv-feld { display: flex; flex-direction: column; gap: 5px; }
.tv-feld label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-soft);
}
.tv-feld .tv-einheit { font-weight: 400; color: var(--text-muted); }
.tv-feld input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tv-feld select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font: inherit;
  color: var(--ink);
}
.tv-feld select:focus-visible,
.tv-feld input:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 1px;
  border-color: var(--green-700);
}

/* -- Ergebnis von Schritt 1 -------------------------------------------- */
.content-wrapper ul.tv-treffer { margin: 0 0 6px; }
.content-wrapper ul.tv-treffer li { margin-bottom: 6px; }
.content-wrapper ul.tv-raus { margin: 0; color: var(--text-muted); }
.content-wrapper p.tv-klein,
.content-wrapper p.tv-hinweis {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 10px 0 6px;
}
.content-wrapper p.tv-hinweis { color: var(--text); }
/* Info-Hinweis, wenn kein Verfahren die Vorgaben erfuellt */
.tv-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 10px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--green-200);
  border-radius: var(--r-md);
  background: var(--green-50);
}
.content-wrapper .tv-info p {
  flex: 1 1 28ch;
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.content-wrapper .tv-feld p.tv-fein-info { margin: 6px 0 0; }
/* Sprungziel des Korrosionshinweises: nicht unter der festen Menueleiste
   verschwinden und beim Ansprung kurz hervorheben */
#Korrosion, #Corrosion { scroll-margin-top: calc(var(--navbar-h) + 16px); }
#Korrosion:target, #Corrosion:target {
  background: var(--green-50);
  outline: 6px solid var(--green-50);
  border-radius: 2px;
}

/* -- Gestapelte Balken -------------------------------------------------- */
.tv-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.tv-legende-punkt { display: inline-flex; align-items: center; gap: 6px; }
.tv-chip {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.tv-balken { display: flex; flex-direction: column; gap: 12px; }
.tv-zeile-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.tv-name { font-weight: 600; color: var(--ink); }
.tv-summe {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--green-900);
  white-space: nowrap;
}
.tv-spur {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.tv-stapel { display: flex; height: 26px; min-width: 2px; }
.tv-teil { height: 100%; }
.tv-teil:first-child { border-radius: 3px 0 0 3px; }
.tv-teil:last-child { border-radius: 0 3px 3px 0; }

/* -- Zahlentabelle ------------------------------------------------------ */
.tv-scroll { overflow-x: auto; margin: 18px 0 0; }
table.tv-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
table.tv-tabelle th,
table.tv-tabelle td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  white-space: nowrap;
}
table.tv-tabelle thead th {
  border-bottom: 2px solid var(--line);
  color: var(--text-soft);
  font-weight: 600;
}
table.tv-tabelle tbody th { font-weight: 600; color: var(--ink); }
table.tv-tabelle .tv-rechts { text-align: right; }
table.tv-tabelle .tv-stark { font-weight: 700; color: var(--green-900); }

/* -- Aufklappbare Annahmen --------------------------------------------- */
details.tv-annahmen {
  margin: 22px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
details.tv-annahmen > summary {
  padding: 11px 14px;
  cursor: pointer;
  font-weight: 600;
  color: var(--green-700);
  list-style: none;
}
details.tv-annahmen > summary::-webkit-details-marker { display: none; }
details.tv-annahmen > summary::before {
  content: "+ ";
  font-weight: 700;
}
details.tv-annahmen[open] > summary::before { content: "– "; }
details.tv-annahmen > summary:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: -2px;
}
.tv-annahmen-inhalt { padding: 4px 14px 16px; }
/* Gruppen innerhalb der Annahmen: einzeln aufklappbar, durch Linien getrennt */
details.tv-gruppe { border-top: 1px solid var(--line-soft); }
details.tv-gruppe:last-of-type { border-bottom: 1px solid var(--line-soft); }
details.tv-gruppe > summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 2px;
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
details.tv-gruppe > summary::-webkit-details-marker { display: none; }
details.tv-gruppe > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 2px solid var(--green-700);
  border-bottom: 2px solid var(--green-700);
  transform: translateY(-2px) rotate(-45deg);
  transition: transform var(--dur) var(--ease);
  flex: none;
}
details.tv-gruppe[open] > summary::before { transform: translateY(-3px) rotate(45deg); }
details.tv-gruppe > summary:hover { color: var(--green-700); }
details.tv-gruppe > summary:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.tv-anzahl { font-weight: 400; color: var(--text-muted); }
details.tv-gruppe > .tv-raster { padding: 2px 0 14px; }
@media (prefers-reduced-motion: reduce) {
  details.tv-gruppe > summary::before { transition: none; }
}
.tv-knopf {
  margin-top: 14px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
}
.tv-knopf:hover,
.tv-knopf:focus-visible { border-color: var(--green-700); color: var(--green-700); }

.tv-schalter {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.tv-schalter input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--green-700);
  flex: 0 0 auto;
}
.tv-schalter label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  margin: 0;
}
.tv-schalter .tv-einheit { font-weight: 400; }

/* -- Rechenweg senden -------------------------------------------------- */
.tv-senden { margin: 0 0 10px; }
.tv-senden .feld-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.tv-knopf--haupt {
  margin-top: 4px;
  padding: 11px 22px;
  border-color: var(--green-700);
  background: var(--green-700);
  color: var(--surface);
  font-size: var(--fs-base);
}
.tv-knopf--haupt:hover,
.tv-knopf--haupt:focus-visible {
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--surface);
}
.tv-knopf:disabled { opacity: .6; cursor: default; }

@media (max-width: 600px) {
  .tv-block { padding: 16px 14px 18px; }
  .tv-zeile-kopf { flex-direction: column; gap: 0; }
  .tv-stapel { height: 22px; }
}