/* ============================================================
   Terrassendaecher Ostfriesland - Demo
   Farbwelt: Original-Gruen der Bestandsseite plus Anthrazit aus dem Logo
   ============================================================ */

@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/barlow-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --anthrazit: #1E2A33;
  --anthrazit-2: #2C3A45;
  --gruen: #508729;
  --gruen-btn: #39601D;
  --gruen-hell: #5C9B2F;
  --gruen-blass: #E2F3D6;
  --text: #3A444E;
  --text-muted: #737373;
  --linie: #D1D1D1;
  --flaeche: #F2F2F2;
  --weiss: #FFFFFF;

  --schrift-text: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-titel: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  --radius: 6px;
  --schatten: 0 2px 12px rgba(30, 42, 51, 0.08);
  --schatten-stark: 0 8px 32px rgba(30, 42, 51, 0.16);
  --abstand: clamp(48px, 7vw, 96px);
}

* { box-sizing: border-box; }

/* Muss vor allen display-Regeln stehen: sonst gewinnt z. B. .btn { display: inline-block }
   gegen das hidden-Attribut und versteckte Elemente bleiben sichtbar. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--schrift-titel);
  color: var(--anthrazit);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: 0.005em;
}

.h1, h1 { font-size: clamp(36px, 5.5vw, 54px); }
.h2, h2 { font-size: clamp(30px, 4vw, 42px); }
.h3, h3 { font-size: clamp(22px, 2.5vw, 27px); }
h4 { font-size: 17px; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.55; }
.muted { color: var(--text-muted); }
.klein { font-size: 15px; }

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

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.wrap--schmal { max-width: 820px; }

.sektion { padding: var(--abstand) 0; }
.sektion--flaeche { background: var(--flaeche); }
.sektion--blass { background: var(--gruen-blass); }
.sektion--dunkel { background: var(--anthrazit); color: #D6DDE3; }
.sektion--dunkel h2, .sektion--dunkel h3 { color: var(--weiss); }
.sektion--dunkel .lead { color: #DDE4EA; }

.sektion-kopf { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.sektion-kopf p { color: var(--text-muted); font-size: 19px; margin: 0; }
.sektion--dunkel .sektion-kopf p { color: #AEBAC4; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--schrift-text);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.btn:active { transform: translateY(1px); }

.btn--primaer { background: var(--gruen-btn); color: var(--weiss); }
.btn--primaer:hover { background: var(--gruen-hell); }

.btn--sekundaer { background: transparent; color: var(--gruen-btn); border-color: var(--gruen-btn); }
.btn--sekundaer:hover { background: var(--gruen-blass); }

.btn--hell { background: var(--weiss); color: var(--anthrazit); }
.btn--hell:hover { background: var(--gruen-blass); }

/* ---------- Kopf ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--linie);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 102px;
  position: relative;
}
.kopf__logo { display: block; flex: none; line-height: 0; }
.kopf__logo img { height: 88px; width: auto; }
.kopf__nav { display: flex; gap: 26px; align-items: center; }
.kopf__nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--anthrazit);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
/* Die Symbole erben die Textfarbe, damit sie beim Hover mitgehen. */
.ico {
  flex: none;
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.kopf__nav a .ico { color: var(--gruen); transition: color 0.15s; }
.kopf__nav a:hover .ico,
.kopf__nav a[aria-current="page"] .ico { color: var(--gruen-btn); }
.kopf__nav a:hover { border-bottom-color: var(--gruen); }
.kopf__nav a[aria-current="page"] { border-bottom-color: var(--gruen); color: var(--gruen-btn); }
.kopf__kontakt { position: relative; flex: none; }

/* Ankerpunkt fuer ein .tel-menue-Dropdown ausserhalb der Kopfzeile, z. B.
   an der Telefonnummer im Hero - .tel-menue positioniert sich per
   position:absolute relativ zum naechsten positionierten Vorfahren. */
.tel-anker { position: relative; display: inline-flex; }
/* Die Rufnummer ist der zweite Weg neben dem Konfigurator und soll im Kopf
   sofort auffallen, deshalb als gefuellter Knopf statt als Textlink. */
.kopf__tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: var(--gruen-btn);
  border: 0;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 17px;
  letter-spacing: 0.2px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(57, 96, 29, 0.28);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.kopf__tel:hover {
  background: var(--gruen);
  box-shadow: 0 4px 16px rgba(57, 96, 29, 0.34);
  transform: translateY(-1px);
}
.kopf__tel:active { transform: none; }
.kopf__tel .ico { color: #fff; }
.kopf__tel-pfeil {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 0.18s;
  opacity: 0.75;
}
.kopf__tel[aria-expanded="true"] .kopf__tel-pfeil { transform: rotate(180deg); }

/* Auswahl: anrufen oder per WhatsApp schreiben */
.tel-menue {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  width: 268px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: var(--schatten-stark);
  padding: 6px;
}
.tel-menue[hidden] { display: none; }
.tel-menue__eintrag {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--anthrazit);
}
.tel-menue__eintrag:hover { background: var(--flaeche); }
.tel-menue__eintrag strong { display: block; font-size: 15px; line-height: 1.3; }
.tel-menue__eintrag small { display: block; font-size: 13px; color: var(--text-muted); }
.tel-menue__sym {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gruen-blass);
  color: var(--gruen-btn);
}
.tel-menue__sym .ico { width: 20px; height: 20px; }
.tel-menue__eintrag--wa .tel-menue__sym { background: #DCF8C6; color: #128C4A; }
.tel-menue__eintrag--wa .tel-menue__sym .ico { fill: currentColor; stroke: none; }
.kopf__burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  flex: none;
}
.kopf__burger span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: var(--anthrazit);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

@media (max-width: 980px) {
  .kopf__kontakt { display: none; }
}

@media (max-width: 900px) {
  .kopf__burger { display: block; }
  .kopf__tel { font-size: 15px; }
  .kopf__innen { min-height: 88px; }
  .kopf__logo img { height: 72px; }
  .kopf__nav {
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten);
    padding: 8px 20px 20px;
    display: none;
  }
  .kopf__nav.nav-offen { display: flex; }
  .kopf__nav a { padding: 13px 0; border-bottom: 1px solid var(--linie); }
  .kopf__nav a:last-child { border-bottom: 0; }
}

@media (max-width: 460px) {
  .kopf__logo img { height: 68px; }
  .kopf__tel { font-size: 15px; gap: 7px; padding: 10px 14px; }
  .kopf__tel-pfeil { display: none; }
  .tel-menue { width: 252px; }
  .kopf__innen { min-height: 82px; gap: 8px; }
}

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

.hero { position: relative; background: var(--anthrazit); overflow: hidden; }
.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  opacity: 0.5;
}

/* Slideshow: alle Motive liegen uebereinander, sichtbar ist immer nur eines.
   Ohne JavaScript traegt das erste Bild die Klasse bereits im HTML.
   Das sichtbare Motiv wandert langsam nach rechts, danach blendet das
   naechste darueber. Der Massstab von 1.18 gibt der Fahrt den noetigen
   Ueberschuss, sonst liefe an der Kante ein leerer Streifen mit. */
.hero[data-slideshow] .hero__bild {
  opacity: 0;
  transform: scale(1.18) translateX(-3.6%);
  transition: opacity 1.4s ease-in-out;
  will-change: transform, opacity;
}
.hero[data-slideshow] .hero__bild.ist-sichtbar {
  opacity: 0.5;
  animation: hero-fahrt 7.6s linear forwards;
}

@keyframes hero-fahrt {
  from { transform: scale(1.18) translateX(-3.6%); }
  to   { transform: scale(1.18) translateX(3.6%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero[data-slideshow] .hero__bild { transform: scale(1.02); }
  .hero[data-slideshow] .hero__bild.ist-sichtbar { animation: none; }
}
.hero__bild--mitte { object-position: center center; }
/* Viel Rasen im Vordergrund, deshalb den Ausschnitt nach oben ziehen */
.hero__bild--hoch { object-position: center 32%; }

.hero__punkte {
  position: absolute;
  z-index: 3;
  bottom: 22px;
  right: max(20px, calc((100% - 1200px) / 2 + 20px));
  display: flex;
  gap: 9px;
}
.hero__punkt {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hero__punkt:hover { background: rgba(255, 255, 255, 0.8); }
.hero__punkt.ist-aktiv { background: var(--gruen); transform: scale(1.3); }

/* Wer Bewegung reduziert haben will, bekommt ein stehendes Bild */
@media (prefers-reduced-motion: reduce) {
  .hero[data-slideshow] .hero__bild { transition: none; }
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(30, 42, 51, 0.86) 0%, rgba(30, 42, 51, 0.55) 55%, rgba(30, 42, 51, 0.25) 100%);
}
.hero__inhalt {
  position: relative;
  z-index: 2;
  padding: clamp(60px, 10vw, 130px) 0;
  max-width: 660px;
  color: var(--weiss);
}
.hero__inhalt h1 { color: var(--weiss); }
.hero__inhalt .lead { color: #E4EAEF; }
.hero__marke {
  display: inline-block;
  background: var(--gruen);
  color: var(--weiss);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 3px;
  margin-bottom: 20px;
}
.hero__aktionen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.hero--klein .hero__inhalt { padding: clamp(44px, 7vw, 84px) 0; }

/* Hero ohne Foto: fuer Seiten, zu denen kein brauchbares Bild vorliegt */
.hero--einfarbig {
  background: linear-gradient(135deg, var(--anthrazit) 0%, var(--anthrazit-2) 100%);
  border-bottom: 5px solid var(--gruen);
}
.hero--einfarbig::after { display: none; }

/* ---------- Raster und Karten ---------- */

.raster { display: grid; gap: 26px; }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.karte:hover { box-shadow: var(--schatten-stark); transform: translateY(-3px); }
.karte__bild { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.karte__inhalt { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.karte__inhalt h3 { margin: 0; }
.karte__inhalt p { margin: 0; }
.karte__inhalt .btn { margin-top: auto; align-self: flex-start; }

.karte--schlicht { border-color: transparent; background: var(--weiss); box-shadow: var(--schatten); }

/* ---------- Zweispalter ---------- */

.zweispalt {
  display: grid;
  gap: clamp(30px, 5vw, 60px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) {
  .zweispalt { grid-template-columns: 1fr 1fr; }
  .zweispalt--gedreht .zweispalt__bild { order: 2; }
}
.zweispalt__bild img { border-radius: var(--radius); width: 100%; }

.bildunterschrift { font-size: 14px; color: var(--text-muted); margin-top: 10px; }

/* Projektbilder: einheitliche Hoehe, sonst steht die Reihe unruhig */
.projekt { margin: 0; }
.projekt img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.projekt--tief img { object-position: center 35%; }

/* ---------- Listen ---------- */

.liste-haken { list-style: none; padding: 0; margin: 0; }
.liste-haken li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}
.liste-haken li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 15px;
  border: solid var(--gruen);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.sektion--dunkel .liste-haken li::before { border-color: var(--gruen-hell); }

/* ---------- FAQ ---------- */

.faq { margin-top: 26px; }
/* Zwei Spalten, damit sechs Fragen nicht zur Kolonne werden. Jede Spalte
   klappt fuer sich auf, die Nachbarspalte ruckt dabei nicht. */
.faq-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  align-items: start;
}
.faq-raster .faq:first-child,
.faq-raster .faq:nth-child(2) { margin-top: 0; }

@media (max-width: 760px) {
  .faq-raster { grid-template-columns: 1fr; }
  .faq-raster .faq:nth-child(2) { margin-top: 26px; }
}
.faq__frage {
  width: 100%;
  text-align: left;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-family: var(--schrift-text);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--anthrazit);
  cursor: pointer;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq__frage:hover { border-color: var(--gruen); }
.faq__frage::after { content: '+'; color: var(--gruen); font-size: 24px; line-height: 1; flex: none; }
.faq__frage.ist-offen::after { content: '\2212'; }
.faq__antwort { display: none; padding: 6px 20px 18px; }
.faq__antwort.ist-offen { display: block; }

/* ---------- Faktenband unter dem Einstieg ---------- */

.band-fakten {
  background: var(--anthrazit);
  color: #fff;
  padding: 26px 0;
}
.band-fakten ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
}
.band-fakten li { padding-left: 16px; border-left: 3px solid var(--gruen-hell); }
.band-fakten strong {
  display: block;
  font-family: var(--schrift-titel);
  font-size: 21px;
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}
.band-fakten span { font-size: 15px; color: rgba(255, 255, 255, 0.78); line-height: 1.5; }

@media (max-width: 760px) {
  .band-fakten ul { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Einzugsgebiet ---------- */

/* Ostfriesische Landschaft hinter dem Einzugsgebiet. Der helle Schleier
   darueber haelt den Text lesbar, ohne das Bild ganz auszubleichen. */
.sektion--landschaft {
  position: relative;
  overflow: hidden;
  padding-block: 82px;
  background: url('../img/ostfriesland-landschaft.webp') center 46% / cover no-repeat;
}
.sektion--landschaft::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.74) 0%,
    rgba(255, 255, 255, 0.5) 42%,
    rgba(255, 255, 255, 0.28) 100%
  );
  pointer-events: none;
}
.sektion--landschaft > .wrap { position: relative; }

/* Die Ortskarten stehen auf dem Bild, deshalb etwas mehr Kante als sonst. */
.sektion--landschaft .orte__gruppe {
  border-color: rgba(30, 42, 51, 0.14);
  box-shadow: 0 2px 14px rgba(30, 42, 51, 0.07);
}

@media (max-width: 900px) {
  .sektion--landschaft { background-position: center; }
}


.orte {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 26px;
}
.orte__gruppe {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.orte__gruppe h3 {
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--gruen-btn);
}
.orte__gruppe p { margin: 0; font-size: 15px; line-height: 1.7; }

/* ---------- Hinweisbox ---------- */

.hinweis {
  background: var(--gruen-blass);
  border-left: 4px solid var(--gruen);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 30px;
  font-size: 16px;
}
.hinweis strong { color: var(--anthrazit); }

/* ---------- Kontaktzeile ---------- */

.kontakt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 60px; align-items: start; margin-top: 40px; }
.kontakt-info { display: grid; gap: 30px; }
.kontakt-block { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kontakt-block h3 { margin-bottom: 6px; }
.kontakt-grid .kontakt-formular { margin-top: 0; }

@media (max-width: 760px) {
  .kontakt-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Fuss ---------- */

.fuss { background: var(--anthrazit); color: #AEBAC4; padding: 56px 0 26px; }
.fuss h3 { color: var(--weiss); font-size: 18px; margin-bottom: 12px; }
.fuss a { color: #D6DDE3; text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }
.fuss__spalten { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.fuss__recht {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  font-size: 14px;
}

/* ---------- Rechtstexte ---------- */

.rechtstext h2 { margin-top: 40px; }
.rechtstext h3 { margin-top: 28px; }
.rechtstext ul { padding-left: 22px; }
.rechtstext li { margin-bottom: 8px; }

/* ============================================================
   Konfigurator (B2C)
   ============================================================ */

/* overflow-anchor:none verhindert, dass der Browser beim Umschalten
   zwischen .wizard-step-Feldern (display:none/block, teils stark
   unterschiedliche Hoehe) die Scroll-Position eigenmaechtig "korrigiert" -
   ohne das wirkte ein Schrittwechsel wie ein harter Anker-Link-Sprung. */
.wizard-huelle { max-width: 820px; margin: 0 auto; overflow-anchor: none; }

.wizard-step { display: none; border: 0; padding: 0; margin: 0; }
.wizard-step.is-active { display: block; }
.wizard-step legend { padding: 0; margin-bottom: 20px; }

.wizard-fortschritt { display: flex; gap: 6px; margin-bottom: 14px; }
.wizard-fortschritt span {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--linie);
  transition: background 0.2s;
}
.wizard-fortschritt span.ist-erledigt { background: var(--gruen); }
.wizard-zaehler { font-size: 14px; color: var(--text-muted); margin: 0 0 28px; }

.wahl-raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wahl-kachel {
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wahl-kachel img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.wahl-kachel span { display: block; padding: 14px 16px; font-weight: 700; color: var(--anthrazit); }
.wahl-kachel:hover { border-color: var(--gruen-hell); }
.wahl-kachel.ist-gewaehlt { border-color: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-blass); }

.wahl-liste { display: flex; flex-wrap: wrap; gap: 12px; }
.wahl-knopf {
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  padding: 12px 20px;
  cursor: pointer;
  font-family: var(--schrift-text);
  font-weight: 700;
  font-size: 16px;
  color: var(--anthrazit);
  transition: border-color 0.15s, background 0.15s;
}
.wahl-knopf:hover { border-color: var(--gruen-hell); }
.wahl-knopf.ist-gewaehlt { border-color: var(--gruen); background: var(--gruen-blass); }

#wizard label { display: block; margin-bottom: 18px; }
#wizard label > span { display: block; font-weight: 700; margin-bottom: 6px; color: var(--anthrazit); }
#wizard input[type="text"], #wizard input[type="number"],
#wizard input[type="tel"], #wizard input[type="email"] {
  width: 100%;
  max-width: 420px;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.4;
  background: var(--weiss);
  color: var(--text);
}
#wizard label.haken { display: flex; gap: 10px; align-items: flex-start; }
#wizard label.haken > span { font-weight: 400; margin: 0; }
#wizard label.haken input { margin-top: 5px; flex: none; width: 18px; height: 18px; }

.feld-paar { display: flex; flex-wrap: wrap; gap: 20px; }
.feld-paar label { flex: 1 1 180px; margin-bottom: 0; }

.wizard-block { margin-top: 26px; }
.wizard-block > p.h3 { margin-bottom: 12px; }

.wizard-fehler {
  background: #FDECEA;
  border-left: 4px solid #C8322C;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 22px 0 0;
  color: #8B231F;
}
.wizard-fehler ul { margin: 0; padding-left: 20px; }
.wizard-fehler li { margin: 3px 0; }

.wizard-navigation { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

.zusammenfassung {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px 28px;
  margin: 26px 0 30px;
  background: var(--flaeche);
  border-radius: var(--radius);
  padding: 24px;
}
.zusammenfassung dt { font-weight: 700; color: var(--anthrazit); }
.zusammenfassung dd { margin: 0; }

.danke-whatsapp {
  margin: 0 0 30px;
  padding: 22px 24px;
  background: var(--gruen-blass);
  border-radius: var(--radius);
  text-align: center;
}
.danke-whatsapp .btn { display: inline-flex; align-items: center; gap: 10px; }
.danke-whatsapp p { margin: 14px 0 0; }

.danke-anruf { margin: 0; text-align: center; color: var(--anthrazit); }
.danke-anruf strong { color: var(--gruen-btn); }

@media (max-width: 560px) {
  .zusammenfassung { grid-template-columns: 1fr; gap: 0; }
  .zusammenfassung dt { margin-top: 14px; }
  .zusammenfassung dt:first-child { margin-top: 0; }
  .zusammenfassung dd { margin-bottom: 0; }
}

.danke-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.danke-haken {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gruen);
  position: relative;
}

/* ---------- Eingebetteter Konfigurator auf der Startseite ---------- */

.start-konfigurator {
  position: relative;
  overflow: hidden;
  padding-top: clamp(72px, 9vw, 118px);
  padding-bottom: clamp(82px, 10vw, 132px);
}
.start-konfigurator::before {
  content: '?';
  position: absolute;
  left: max(-70px, -5vw);
  top: -120px;
  color: rgba(255, 255, 255, 0.035);
  font: 700 clamp(300px, 40vw, 560px) / 1 var(--schrift-titel);
  pointer-events: none;
}
.start-konfigurator .wrap { position: relative; }
.start-konfigurator__kopf {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}
.start-konfigurator__kopf h2 { font-size: clamp(40px, 6vw, 66px); }
.start-konfigurator__kopf .lead { color: #DDE4EA; }
.start-konfigurator__vorteile {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 24px;
  color: var(--gruen-hell);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wizard-huelle--eingebettet { max-width: 900px; }
.wizard-huelle--eingebettet > #wizard,
.wizard-huelle--eingebettet > #danke {
  padding: clamp(24px, 5vw, 48px);
  border-radius: 10px;
  background: var(--weiss);
  color: var(--text);
  box-shadow: 20px 20px 0 rgba(80, 135, 41, 0.3);
}
.wizard-huelle--eingebettet .wizard-step legend,
.wizard-huelle--eingebettet .h2,
.wizard-huelle--eingebettet .h3,
.wizard-huelle--eingebettet #danke h2,
.wizard-huelle--eingebettet #danke .lead { color: var(--anthrazit); }
.wizard-huelle--eingebettet .wizard-hilfe { margin-top: 20px; }

@media (max-width: 560px) {
  .start-konfigurator__kopf { margin-bottom: 28px; }
  .start-konfigurator__vorteile { gap: 6px 16px; font-size: 12px; }
  .wizard-huelle--eingebettet > #wizard,
  .wizard-huelle--eingebettet > #danke { box-shadow: 9px 9px 0 rgba(80, 135, 41, 0.3); }
  .wizard-huelle--eingebettet .wizard-navigation .btn { flex: 1 1 120px; }
}
.danke-haken::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 11px;
  width: 11px;
  height: 20px;
  border: solid var(--weiss);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.danke-kopf h2 { margin: 0; }

/* ============================================================
   Haendlerbereich
   ============================================================ */

.login-karte {
  max-width: 460px;
  margin: 0 auto;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 30px;
}
.login-karte label { display: block; margin-bottom: 18px; }
.login-karte label > span { display: block; font-weight: 700; margin-bottom: 6px; color: var(--anthrazit); }
.login-karte input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-family: var(--schrift-text);
  font-size: 17px;
  background: var(--weiss);
}
.login-karte__aktion { display: block; text-align: center; margin-top: 8px; width: 100%; border: 0; cursor: pointer; }
.login-karte__fehler {
  background: #FDECEA;
  border-left: 4px solid #C8322C;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 14px 0 0;
  color: #8B231F;
  font-size: 14px;
}
.login-karte__fuss { font-size: 14px; margin: 18px 0 0; color: var(--text-muted); }

.haendler-band {
  background: var(--anthrazit-2);
  color: #D6DDE3;
  padding: 12px 0;
  font-size: 15px;
}
.haendler-band__innen { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.haendler-band a { color: var(--weiss); }
.haendler-band__aktionen { display: flex; gap: 20px; align-items: center; }

/* Der Angebotsersteller hat eine eigene Datei: assets/css/rechner.css */
/* ---------- Angebotsansicht ---------- */

.angebot {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 44px);
}
.angebot-kopf { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; border-bottom: 2px solid var(--anthrazit); padding-bottom: 20px; }
.angebot-kopf img { height: 110px; width: auto; }
.angebot-kopf__rechts { text-align: right; font-size: 14px; }
.angebot-kopf__rechts strong { display: block; font-size: 19px; color: var(--anthrazit); margin-bottom: 4px; }

.angebot-parteien { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 28px 0; }
.angebot-parteien h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-family: var(--schrift-text); margin-bottom: 6px; }

.positions-tabelle { width: 100%; border-collapse: collapse; margin: 10px 0 24px; font-size: 15px; }
.positions-tabelle th, .positions-tabelle td { padding: 10px 8px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.positions-tabelle th { background: var(--flaeche); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.positions-tabelle th:last-child, .positions-tabelle td:last-child { text-align: right; white-space: nowrap; }
.positions-tabelle th:nth-child(2), .positions-tabelle td:nth-child(2) { text-align: right; white-space: nowrap; }

.angebot-summe { max-width: 380px; margin-left: auto; }
.angebot-fuss { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--text-muted); }
.angebot-status { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.angebot-aktionen { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }

.angebote-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.angebote-tabelle th, .angebote-tabelle td { padding: 12px 14px; border-bottom: 1px solid var(--ae-rahmen-hell, var(--linie)); text-align: left; vertical-align: middle; }
.angebote-tabelle th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ae-label, var(--text-muted)); }
.angebote-tabelle td:nth-child(4) { white-space: nowrap; font-weight: 700; }
.angebote-tabelle select.ae-select { width: auto; min-width: 130px; }

/* ============================================================
   Produkt-Landingpages
   Gemeinsames Conversion-System fuer Terrassendach,
   Kaltwintergarten und Carport.
   ============================================================ */

.produkt-seite main { overflow: clip; }
.produkt-seite .hero--klein .hero__inhalt {
  max-width: 760px;
  padding: clamp(58px, 8vw, 104px) 0;
}
.produkt-seite .hero__inhalt h1 {
  font-size: clamp(40px, 5.4vw, 66px);
  max-width: 18ch;
  text-wrap: balance;
}
.produkt-seite .hero__inhalt .lead { max-width: 690px; }
.hero__aktionen--produkt { align-items: center; }
.btn--kontur-hell {
  color: #fff;
  border-color: rgba(255,255,255,.58);
  background: rgba(255,255,255,.06);
}
.btn--kontur-hell:hover { border-color: #fff; background: rgba(255,255,255,.14); }
.hero__microcopy {
  display: block;
  margin-top: 15px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  font-weight: 600;
}

.produkt-band {
  background: #152129;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
}
.produkt-band ul {
  list-style: none;
  margin: 0;
  padding: 20px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px 28px;
}
.produkt-band li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #D8E0E5;
  font-size: 15px;
  line-height: 1.45;
}
.produkt-band li::before {
  content: '';
  width: 9px;
  height: 15px;
  margin: 1px 4px 0 2px;
  border: solid var(--gruen-hell);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  flex: none;
}
.produkt-band strong { display: block; color: #fff; }

.produkt-kopf {
  max-width: 770px;
  margin-bottom: clamp(30px, 4.2vw, 50px);
}
.produkt-kopf--zentriert { margin-inline: auto; text-align: center; }
.produkt-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--gruen-btn);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.produkt-kopf p { color: var(--text-muted); font-size: 19px; }

.produkt-fit-grid,
.vergleich-grid,
.prozess-grid,
.preis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}
.produkt-fit,
.vergleich-card,
.preis-card {
  position: relative;
  background: #fff;
  border: 1px solid #D9DFE3;
  border-radius: 12px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 12px 34px rgba(30,42,51,.07);
}
.produkt-fit::before {
  content: attr(data-nr);
  display: block;
  margin-bottom: 22px;
  color: var(--gruen);
  font-family: var(--schrift-titel);
  font-size: 30px;
  font-weight: 700;
}
.produkt-fit h3,
.vergleich-card h3,
.preis-card h3 { margin-bottom: 10px; }
.produkt-fit p,
.vergleich-card p,
.preis-card p { color: var(--text-muted); }

.produkt-split {
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  gap: clamp(38px, 7vw, 88px);
  align-items: center;
}
.produkt-split--gedreht { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); }
.produkt-split--gedreht .produkt-split__media { order: 2; }
.produkt-split__copy > p { max-width: 60ch; }
.produkt-split__media { position: relative; }
.produkt-split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 22px 50px rgba(30,42,51,.17);
}
.produkt-split__beweis {
  position: absolute;
  right: -18px;
  bottom: -20px;
  max-width: 260px;
  padding: 17px 20px;
  border-radius: 8px;
  background: var(--anthrazit);
  color: #fff;
  box-shadow: var(--schatten-stark);
  font-size: 14px;
  line-height: 1.45;
}
.produkt-split__beweis strong {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 16px;
}
.produkt-split__copy .produkt-split__beweis {
  position: static;
  max-width: none;
  margin-top: 24px;
}

.vergleich-card { box-shadow: none; }
.vergleich-card--favorit {
  border: 2px solid var(--gruen);
  background: linear-gradient(180deg, #fff 0%, #F2FAEC 100%);
}
.vergleich-card__label {
  display: inline-block;
  margin-bottom: 17px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.vergleich-card--favorit .vergleich-card__label { background: var(--gruen); color: #fff; }
.vergleich-card ul { margin-top: 18px; }

.produkt-wetter {
  position: relative;
  background:
    linear-gradient(110deg, rgba(20,31,39,.98), rgba(30,42,51,.94)),
    url('../img/ostfriesland-landschaft.webp') center / cover;
  color: #D8E0E5;
}
.produkt-wetter h2,
.produkt-wetter h3 { color: #fff; }
.wetter-grid {
  display: grid;
  grid-template-columns: 1.15fr repeat(3, minmax(0,1fr));
  gap: 30px;
  align-items: start;
}
.wetter-grid__intro p { color: #BFC9D0; }
.wetter-fakt {
  padding-top: 19px;
  border-top: 3px solid var(--gruen-hell);
}
.wetter-fakt h3 { font-size: 23px; }
.wetter-fakt p { margin: 0; color: #BFC9D0; font-size: 15px; }

.prozess-grid { counter-reset: prozess; }
.prozess-schritt {
  position: relative;
  min-height: 210px;
  padding: 30px 26px 25px;
  border-top: 4px solid var(--gruen);
  background: #fff;
  box-shadow: var(--schatten);
}
.prozess-schritt::before {
  counter-increment: prozess;
  content: '0' counter(prozess);
  display: block;
  margin-bottom: 30px;
  color: var(--gruen);
  font-family: var(--schrift-titel);
  font-size: 25px;
  font-weight: 700;
}
.prozess-schritt p { color: var(--text-muted); font-size: 15px; }
.prozess-grid--4 { grid-template-columns: repeat(4,minmax(0,1fr)); }

.preis-grid--4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.preis-card__wert {
  display: block;
  margin-top: 18px;
  color: var(--gruen-btn);
  font-size: 14px;
  font-weight: 700;
}
.preis-hinweis {
  margin-top: 26px;
  padding: 18px 22px;
  border-left: 4px solid var(--gruen);
  background: var(--gruen-blass);
  color: var(--anthrazit);
}

.produkt-faq .faq-raster { margin-top: 28px; }
.produkt-faq .faq { margin-top: 0; }
.produkt-faq .faq__antwort { color: var(--text-muted); }

.produkt-weiter {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  margin-top: 34px;
}
.produkt-weiter a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: #fff;
  color: var(--anthrazit);
  font-weight: 700;
  text-decoration: none;
}
.produkt-weiter a::after { content: '→'; color: var(--gruen); }
.produkt-weiter a:hover { border-color: var(--gruen); }

.produkt-cta {
  background:
    radial-gradient(circle at 85% 15%, rgba(92,155,47,.22), transparent 32%),
    var(--anthrazit);
  color: #D8E0E5;
}
.produkt-cta__inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 34px;
  align-items: center;
}
.produkt-cta h2 { color: #fff; max-width: 18ch; }
.produkt-cta p { max-width: 650px; color: #BFC9D0; }
.produkt-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.produkt-cta__micro { display: block; margin-top: 13px; color: #9EABB4; font-size: 13px; }

.produkt-mobil-cta { display: none; }

@media (max-width: 980px) {
  .produkt-fit-grid,
  .vergleich-grid,
  .preis-grid { grid-template-columns: 1fr; }
  .produkt-split,
  .produkt-split--gedreht { grid-template-columns: 1fr; }
  .produkt-split--gedreht .produkt-split__media { order: initial; }
  .produkt-split__media { max-width: 720px; }
  .wetter-grid { grid-template-columns: 1fr 1fr; }
  .prozess-grid--4 { grid-template-columns: 1fr 1fr; }
  .produkt-cta__inner { grid-template-columns: 1fr; }
  .produkt-cta__actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .produkt-seite { padding-bottom: 68px; }
  .produkt-seite .hero__inhalt h1 { font-size: clamp(38px, 11vw, 52px); }
  .produkt-band ul,
  .wetter-grid,
  .prozess-grid--4,
  .produkt-weiter { grid-template-columns: 1fr; }
  .produkt-band ul { gap: 12px; padding-block: 18px; }
  .produkt-split__beweis {
    position: relative;
    right: auto;
    bottom: auto;
    max-width: none;
    margin: -24px 14px 0;
  }
  .prozess-schritt { min-height: 0; }
  .produkt-mobil-cta {
    position: fixed;
    z-index: 80;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(21,33,41,.96);
    border-top: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(10px);
  }
  .produkt-mobil-cta a {
    padding: 12px 10px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
  }
  .produkt-mobil-cta a:last-child { background: var(--gruen-btn); border-radius: 5px; }
  .produkt-seite .fuss { padding-bottom: 34px; }
}

@media (max-width: 460px) {
  .hero__aktionen--produkt .btn { width: 100%; }
  .hero__aktionen--produkt .tel-anker { width: 100%; }
  .produkt-fit,
  .vergleich-card,
  .preis-card { padding: 24px 21px; }
  .produkt-cta__actions .btn { width: 100%; }
}

/* Terrassendach: verdichtete, redaktionelle Produktseite */
.td-page .sektion { padding-block: clamp(62px, 6.7vw, 92px); }

.td-page + .produkt-band,
.td-page .produkt-band { position: relative; z-index: 3; }
.td-page .produkt-kopf { max-width: 820px; margin-bottom: 34px; }
.td-page .produkt-kopf h2 { font-size: clamp(38px, 4.2vw, 56px); }
.td-page .produkt-kopf p { font-size: 18px; }

.td-page .produkt-fit-grid { gap: 0; }
.td-page .produkt-fit {
  min-height: 0;
  padding: 8px clamp(24px, 3vw, 42px) 4px;
  border: 0;
  border-left: 1px solid var(--linie);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.td-page .produkt-fit:first-child { padding-left: 0; border-left: 0; }
.td-page .produkt-fit::before { margin-bottom: 14px; font-size: 24px; }
.td-page .produkt-fit h3 { font-size: 26px; }
.td-page .produkt-fit p { max-width: 30ch; }

.td-page .produkt-split { gap: clamp(46px, 7vw, 92px); }
.td-page .produkt-split__media img { aspect-ratio: 1 / 1; }
.td-page .produkt-split__copy h2 { font-size: clamp(40px, 4.4vw, 58px); }

.td-page .vergleich-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.td-page .vergleich-card { padding: clamp(28px, 3.8vw, 44px); }
.td-page .vergleich-card h3 { font-size: clamp(30px, 3vw, 40px); }
.td-page .vergleich-card p { font-size: 17px; }
.td-page .vergleich-card--favorit { box-shadow: 0 18px 42px rgba(57,96,29,.12); }

.td-upgrades {
  display: grid;
  grid-template-columns: 210px minmax(0,1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  margin-top: 28px;
  padding: 24px clamp(26px, 4vw, 50px) 24px 24px;
  border-radius: 12px;
  background: var(--anthrazit);
  color: #D8E0E5;
  overflow: hidden;
}
.td-upgrades > img { width: 100%; height: 225px; border-radius: 8px; object-fit: cover; }
.td-upgrades h3 { margin-bottom: 7px; color: #fff; font-size: 30px; }
.td-upgrades p { margin-bottom: 16px; color: #BFC9D0; }
.td-upgrades__liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.td-upgrades__liste li { padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #fff; font-size: 13px; }

.td-page .produkt-wetter { overflow: hidden; }
.td-page .produkt-wetter::after {
  content: 'NORDSEE';
  position: absolute;
  right: -10px;
  bottom: -36px;
  color: rgba(255,255,255,.035);
  font-family: var(--schrift-titel);
  font-size: clamp(100px, 18vw, 260px);
  font-weight: 700;
  line-height: 1;
}
.td-page .produkt-wetter .wrap { position: relative; z-index: 1; }
.td-textlink { display: inline-block; margin-top: 18px; color: #fff; font-weight: 700; text-underline-offset: 5px; }

.td-page .prozess-grid { position: relative; gap: 0; }
.td-page .prozess-grid::before { content: ''; position: absolute; top: 46px; left: 8%; right: 8%; height: 1px; background: #C9D3D9; }
.td-page .prozess-schritt {
  min-height: 0;
  padding: 0 clamp(18px, 2.5vw, 32px);
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
.td-page .prozess-schritt::before {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  margin: 18px auto 24px;
  border: 7px solid var(--flaeche);
  border-radius: 50%;
  background: var(--gruen);
  color: #fff;
  font-size: 18px;
  line-height: 44px;
}

.td-page .preis-card { padding: 26px 28px; box-shadow: none; }
.td-preis-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 24px;
  padding: 24px 28px;
  border-left: 5px solid var(--gruen-hell);
  background: var(--anthrazit);
  color: #fff;
}
.td-preis-cta strong, .td-preis-cta span { display: block; }
.td-preis-cta strong { font-size: 19px; }
.td-preis-cta span { color: #BFC9D0; }
.td-preis-cta .btn { flex: none; }

.td-page .produkt-faq .produkt-kopf { margin-bottom: 24px; }
.td-page .produkt-weiter { margin-top: 24px; }
.td-page .produkt-cta {
  position: relative;
  background:
    linear-gradient(90deg, rgba(21,33,41,.98) 0%, rgba(21,33,41,.9) 58%, rgba(21,33,41,.72) 100%),
    url('../img/terrasse-fertig.webp') center 54% / cover;
}

@media (max-width: 980px) {
  .td-page .produkt-fit-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .td-page .vergleich-grid { grid-template-columns: 1fr 1fr; }
  .td-page .prozess-grid--4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .td-page .sektion { padding-block: 44px; }
  .td-page .produkt-kopf h2 { font-size: 38px; }
  .td-page .produkt-kopf { margin-bottom: 25px; }
  .td-page .produkt-fit-grid { grid-template-columns: 1fr; }
  .td-page .produkt-fit,
  .td-page .produkt-fit:first-child { padding: 22px 0; border-left: 0; border-top: 1px solid var(--linie); }
  .td-page .produkt-fit:first-child { border-top: 0; }
  .td-page .produkt-split__media img { aspect-ratio: 4 / 3; }
  .td-page .vergleich-grid { grid-template-columns: 1fr; }
  .td-page .vergleich-card { padding: 24px 22px; }
  .td-upgrades { grid-template-columns: 96px 1fr; gap: 20px; padding: 18px; }
  .td-upgrades > img { height: 100%; min-height: 230px; }
  .td-upgrades__liste { gap: 6px; }
  .td-upgrades__liste li { font-size: 12px; }
  .td-page .prozess-grid--4 { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .td-page .prozess-grid::before { display: none; }
  .td-page .prozess-schritt { text-align: left; }
  .td-page .prozess-schritt::before { margin: 0 0 16px; text-align: center; }
  .td-page .preis-grid { gap: 10px; }
  .td-page .preis-card {
    display: grid;
    grid-template-columns: minmax(120px,.75fr) 1.25fr;
    gap: 10px 18px;
    align-items: start;
    padding: 18px;
  }
  .td-page .preis-card h3 { margin: 0; font-size: 22px; }
  .td-page .preis-card p { margin: 0; font-size: 14px; }
  .td-page .preis-card__wert { grid-column: 2; margin-top: 0; }
  .td-preis-cta { align-items: stretch; flex-direction: column; }
  .td-preis-cta .btn { width: 100%; }
}

@media (max-width: 460px) {
  .td-upgrades { grid-template-columns: 1fr; }
  .td-upgrades > img { width: 100%; height: 180px; min-height: 0; object-position: center 36%; }
  .td-page .prozess-grid--4 { grid-template-columns: 1fr 1fr; }
  .td-page .prozess-schritt { padding: 0 10px 0 0; }
  .td-page .prozess-schritt h3 { font-size: 21px; }
}

@media print {
  .kopf, .fuss, .haendler-band, .tel-menue, .angebot-aktionen, .angebot-status, #konfiguration, #angebote-liste { display: none !important; }

  /* Kompakt halten: ein Angebot dieser Groesse soll auf eine A4-Seite passen. */
  body { font-size: 11px; line-height: 1.45; background: #fff; color: #000; }
  .wrap { max-width: none; padding: 0; }
  .sektion { padding: 0; }
  .angebot { border: 0; padding: 0; }
  a { color: #000; text-decoration: none; }

  .angebot-kopf { padding-bottom: 12px; }
  .angebot-kopf img { height: 76px; }
  .angebot-kopf__rechts { font-size: 11px; }
  .angebot-kopf__rechts strong { font-size: 15px; margin-bottom: 2px; }

  .angebot h3 { font-size: 12px; margin: 0 0 5px; }
  .angebot-parteien { margin: 16px 0; gap: 16px; }
  .angebot-parteien h3 { font-size: 10px; }

  .positions-tabelle { margin: 6px 0 16px; font-size: 11px; }
  .positions-tabelle th, .positions-tabelle td { padding: 5px 6px; }
  .positions-tabelle th { font-size: 10px; }
  .positions-tabelle th {
    background: #eee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .preis-tabelle { font-size: 11px; }
  .preis-tabelle td { padding: 4px 0; }
  .preis-tabelle tr.ist-trenner td { padding-top: 7px; }
  .preis-tabelle tr.ist-summe td { font-size: 14px; padding-top: 7px; }

  #a-bemerkung-block h3 { margin-top: 14px !important; }
  .angebot-fuss { margin-top: 16px; padding-top: 10px; font-size: 10px; }
  .angebot-fuss p { margin-bottom: 5px; }

  .positions-tabelle tr, .angebot-kopf, .angebot-summe { break-inside: avoid; }
  @page { size: A4; margin: 15mm; }
}

/* ============================================================
   KONTAKTFORMULAR (kontakt.html)
   ============================================================ */
.kontakt-formular { max-width: 640px; margin-top: 40px; }
.kontakt-formular h3 { margin: 0 0 20px; }
.kontakt-formular label { display: block; margin-bottom: 18px; }
.kontakt-formular label > span { display: block; font-weight: 700; margin-bottom: 6px; color: var(--anthrazit); }
.kontakt-formular .feld-paar { margin-bottom: 18px; }
.kontakt-formular .feld-paar label { margin-bottom: 0; }
.kontakt-formular input[type="text"],
.kontakt-formular input[type="tel"],
.kontakt-formular input[type="email"],
.kontakt-formular textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.4;
  background: var(--weiss);
  color: var(--text);
}
.kontakt-formular textarea { min-height: 140px; resize: vertical; }
.kontakt-formular input:focus, .kontakt-formular textarea:focus {
  outline: none;
  border-color: var(--gruen);
  box-shadow: 0 0 0 3px var(--gruen-blass);
}
.kontakt-formular label.haken { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 22px; }
.kontakt-formular label.haken > span { font-weight: 400; margin: 0; }
.kontakt-formular label.haken input { margin-top: 5px; flex: none; width: 18px; height: 18px; }
.kontakt-formular .hp { position: absolute; left: -9999px; }
.kontakt-formular .req { color: #C8322C; }

.form-alert { border-radius: var(--radius); padding: 14px 18px; margin: 0 0 22px; }
.form-alert--ok { background: var(--gruen-blass); border-left: 4px solid var(--gruen-btn); color: var(--anthrazit); }
.form-alert--err { background: #FDECEA; border-left: 4px solid #C8322C; color: #8B231F; }