/*
Theme Name: SB Packaging
Theme URI: https://sb-packaging.com
Description: Eigenes Block-Theme für SB Packaging UG. Grundton Recyclingkarton, Markengrün als System, Wellpappen-Querschnitt als durchgehendes Motiv. Schriften werden lokal ausgeliefert, es besteht keine Verbindung zu Google.
Version: 1.4.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sb-packaging
Tags: full-site-editing, block-patterns, business, one-column, custom-colors, custom-menu, editor-style, translation-ready
*/

/* ============================================================
   1. Token
   Spiegelbild der Palette aus theme.json. Bewusst zusaetzlich
   als kurze Eigenschaften, damit die Regeln unten lesbar bleiben.
   Werte hier und in theme.json muessen uebereinstimmen.
   ============================================================ */
:root{
  --paper:      #FBFCF8;
  --paper-2:    #F2F4EC;
  --paper-3:    #E7EADD;
  --ink:        #14180F;
  --ink-2:      #2C3325;
  --muted:      #6B7263;
  --muted-2:    #8A9081;
  --line:       #DCDDD2;
  --line-2:     #ECEEE4;

  --green:      #92C608;
  --green-deep: #5A7A05;
  --green-dark: #3D5303;
  --green-tint: #EDF6D6;

  --ink-line:   #2B3122;
  --ink-text:   #A8B09B;

  --sans:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --display: Archivo, 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Wellpappen-Querschnitt: zwei Decken, dazwischen die Welle. */
  --flute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Cpath d='M0 15 C 3.25 1 9.75 1 13 15 C 16.25 29 22.75 29 26 15' fill='none' stroke='%23C3CBA5' stroke-width='1.3'/%3E%3C/svg%3E");
  /* Dieselbe Welle im Grossformat fuer den Querschnitt im Hero. */
  --flute-big: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='86' viewBox='0 0 56 86'%3E%3Cpath d='M0 43 C 7 3 21 3 28 43 C 35 83 49 83 56 43' fill='none' stroke='%23B4BE93' stroke-width='2.2'/%3E%3C/svg%3E");
  --flute-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Cpath d='M0 15 C 3.25 1 9.75 1 13 15 C 16.25 29 22.75 29 26 15' fill='none' stroke='%2344502C' stroke-width='1.3'/%3E%3C/svg%3E");
}

/* ============================================================
   2. Grundlagen
   ============================================================ */
body{
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: 76px;
}

h1, h2, h3, h4{ text-wrap: balance; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, select, textarea):focus-visible{
  outline: 2px solid var(--green-deep);
  outline-offset: 3px;
}

/* Sprungmarke fuer Tastaturnutzer */
.skip-link{
  position: absolute; left: -9999px;
  z-index: 999; padding: 12px 20px;
  background: var(--ink); color: var(--paper);
  text-decoration: none;
}
.skip-link:focus{ left: 12px; top: 12px; }

/* ============================================================
   3. Wiederkehrende Bausteine
   ============================================================ */
.eyebrow{
  font-family: var(--mono);
  font-size: 11.5px !important;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-deep);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before{
  content: "";
  width: 22px; height: 2px;
  background: var(--green);
  flex: none;
}
.eyebrow--plain::before{ display: none; }

.lede{
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}
.body-text{ color: var(--muted); max-width: 66ch; }

/* WordPress zentriert im Constrained-Layout jedes Kind, das eine
   eigene Maximalbreite mitbringt - und setzt die automatischen
   Raender mit !important. Unser Satz ist durchgehend linksbuendig.
   Deshalb hier ausnahmsweise ebenfalls !important, dazu :root fuer
   die noetige Spezifitaet: Ohne beides rutscht jeder Fliesstext
   und jeder Abschnittskopf in die Mitte. Nachgemessen. */
:root :is(.lede, .body-text, .sec-head, .hero h1){ margin-inline: 0 !important; }
:root .entry-content > *{ margin-inline: 0 !important; }

/* Schriftgroessenskala
   Bewusst hier und nicht allein in theme.json: So greifen die
   Groessen unabhaengig davon, wie WordPress die globalen Stile
   aufloest und in welcher Reihenfolge es sie ausgibt. Die Werte
   entsprechen den Vorgaben in theme.json.
   Bauteil-Ueberschriften weiter unten haben dieselbe Gewichtung
   und stehen spaeter - sie gewinnen daher wie beabsichtigt. */
h1.wp-block-heading,
.wp-block-post-title{
  font-size: clamp(34px, 4.8vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.hero h1.wp-block-heading{
  font-size: clamp(38px, 5.6vw, 66px);
  letter-spacing: -0.033em;
}
h2.wp-block-heading{ font-size: clamp(26px, 3vw, 36px); }
.sec-head h2.wp-block-heading{ font-size: clamp(27px, 3.3vw, 40px); }
h3.wp-block-heading{ font-size: 21px; }

.flute{
  height: 30px;
  background-image: var(--flute);
  background-repeat: repeat-x;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.flute--dark{
  background-image: var(--flute-dark);
  border-color: var(--ink-line);
}

/* ============================================================
   4. Abschnitte
   ============================================================ */
.section{ padding-block: clamp(58px, 7.5vw, 104px); }
.section--tight   { padding-block: clamp(38px, 4.5vw, 62px); }
.section--tint    { background: var(--paper-2); }
.section--ink     { background: var(--ink); color: var(--paper-2); }
.section--ink :is(h1,h2,h3,h4){ color: var(--paper); }
.section--ink .body-text{ color: var(--ink-text); }
.section--ink .eyebrow{ color: var(--green); }

.sec-head{ max-width: 760px; }

/* ============================================================
   5. Kopfzeile
   ============================================================ */
.site-head{
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding-block: 16px;
}
.site-head.is-stuck{ border-bottom-color: var(--line); }

.brand{ display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand:hover{ text-decoration: none; }
.brand .custom-logo,
.brand .wp-block-site-logo img{ width: 44px; height: 44px; display: block; }
.brand-name{
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; color: var(--ink); display: block; line-height: 1.2;
}
.brand-sub{
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted-2); display: block; margin-top: 1px;
}

/* Navigation */
.site-head .wp-block-navigation{ font-size: 13.5px; font-weight: 500; }
.site-head .wp-block-navigation-item__content{
  position: relative;
  padding: 9px 14px;
  text-decoration: none;
  color: var(--ink-2);
}
.site-head .wp-block-navigation-item__content::after{
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.site-head .wp-block-navigation-item__content:hover{ color: var(--ink); text-decoration: none; }
.site-head .wp-block-navigation-item__content:hover::after,
.site-head .current-menu-item > .wp-block-navigation-item__content::after{ transform: scaleX(1); }
.site-head .current-menu-item > .wp-block-navigation-item__content{ color: var(--ink); font-weight: 600; }

/* Menue-Ueberlagerung auf schmalen Geraeten */
.wp-block-navigation__responsive-container.is-menu-open{
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  padding: 92px 24px 32px;
  z-index: 1100;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  width: 100%;
  gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 21px;
  line-height: 1.35;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-2);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  width: 100%;
  min-width: 0;
  padding: 4px 0 10px 18px;
  border-left: 1px solid var(--line);
}

/* Sprachumschalter */
.lang-switch{ display: flex; border: 1px solid var(--line); flex: none; }
.lang-switch > *{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  padding: 6px 10px;
  text-decoration: none;
  color: var(--muted);
}
.lang-switch > [aria-current]{ background: var(--ink); color: var(--paper); }
.lang-switch > a:hover{ color: var(--ink); background: var(--paper-2); }

/* Der Knopf oben bleibt bewusst monochrom: das einzige Gruen in der
   Kopfzeile ist das Logo. Das kraeftige Markengruen ist dem
   Abschlussband am Seitenende vorbehalten. */
.head-cta .wp-block-button__link{
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 0;
  white-space: nowrap;
  transition: background-color .18s ease;
}
.head-cta .wp-block-button__link:hover{ background: var(--green-dark); color: var(--paper); }

/* Lesefortschritt */
.reading-progress{
  position: fixed; inset: 0 0 auto 0; height: 3px;
  background: var(--line-2); z-index: 60;
}
.reading-progress span{
  display: block; height: 100%; width: 0;
  background: var(--green);
  transition: width .1s linear;
}

/* ============================================================
   6. Knopfvarianten
   ============================================================ */
.wp-block-button__link{
  display: inline-flex; align-items: center; gap: 10px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.is-style-ghost .wp-block-button__link{
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.is-style-ghost .wp-block-button__link:hover{
  background: var(--paper-2); border-color: var(--ink); color: var(--ink);
}
.is-style-accent .wp-block-button__link{
  background: var(--green); color: var(--green-dark); font-weight: 600;
}
.is-style-accent .wp-block-button__link:hover{ background: var(--ink); color: var(--green); }

/* ============================================================
   7. Hero
   ============================================================ */
.hero{ padding-top: clamp(48px, 7vw, 88px); padding-bottom: 0; }
.hero h1{ letter-spacing: -0.033em; max-width: 17ch; }

/* ------------------------------------------------------------
   Querschnitt durch die Wellpappe
   Steht im Hero anstelle eines Fotos: zwei Deckenbahnen, dazwischen
   die Welle - gezeichnet, nicht fotografiert. Kein Schmuck, sondern
   das Produkt selbst, und nichts, was auf einer anderen Seite
   nochmal auftaucht.
   ------------------------------------------------------------ */
.board{
  margin-top: clamp(40px, 5vw, 64px);
  border: 1px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
}
.board-liner{ height: 12px; background: var(--paper-3); }
.board-flute{
  height: 86px;
  background-image: var(--flute-big);
  background-repeat: repeat-x;
  background-position: center;
}
.board-legend{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 26px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.board-legend b{ font-weight: 500; color: var(--green-deep); }

@media (max-width: 780px){
  .board-legend{ grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 620px){
  .board-flute{ height: 62px; background-size: 40px 62px; }
  .board-liner{ height: 9px; }
}
/* ------------------------------------------------------------
   Foto mit Bildunterschrift
   Ein gewoehnlicher Bildblock mit der Klasse "photo". Dadurch
   laesst sich das Bild im Editor mit "Ersetzen" direkt aus der
   Mediathek tauschen - ohne Code.
   ------------------------------------------------------------ */
.wp-block-image.photo{ margin: 0; }
.wp-block-image.photo img{
  display: block; width: 100%;
  height: clamp(260px, 33vw, 380px);
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
}
.wp-block-image.photo figcaption{
  margin: 9px 0 0; padding-top: 9px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2); text-align: left;
}

/* Wellen-Trenner als Stil des Trennlinien-Blocks: Im Editor unter
   Trennlinie -> Stil "Welle" auswaehlbar. */
.wp-block-separator.is-style-flute{
  width: 100%;
  height: 30px;
  margin-block: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-color: transparent;
  background-image: var(--flute);
  background-repeat: repeat-x;
  opacity: 1;
}

/* ============================================================
   8. Fakten-Leiste
   ============================================================ */
.facts{
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  gap: 0;
}
.fact{
  padding: 26px 26px 26px 0;
  border-right: 1px solid var(--line-2);
}
.fact:last-child{ border-right: 0; }
.fact .fact-label{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 7px;
}
.fact .fact-value{
  font-family: var(--display); font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink);
}
.fact .fact-note{ font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ============================================================
   9. Karten
   ============================================================ */
.cards{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.card{
  background: var(--paper);
  padding: 30px 28px 34px;
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
}
.card::before{
  content: ""; position: absolute; inset: 0 auto auto 0;
  height: 3px; width: 100%;
  background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.card:hover::before{ transform: scaleX(1); }
.card .card-num{ font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted-2); }
.card h3{ font-size: 19px; }
.card p{ font-size: 14.8px; color: var(--muted); }

/* ============================================================
   10. Merkmalsliste
   ============================================================ */
/* Ein gewoehnlicher Listenblock mit der Klasse "marks". Jeder
   Eintrag: fett gesetzter Titel, danach der erlaeuternde Satz.
   Die Nummern 01, 02 ... zaehlt das Stylesheet selbst - wer im
   Editor einen Punkt einfuegt oder loescht, muss nichts nachziehen.
   Mit zusaetzlicher Klasse "marks--check" steht statt der Nummer
   ein Haken. */
.marks{ list-style: none; margin: 0; padding: 0; counter-reset: mark; }
.marks li{
  position: relative;
  counter-increment: mark;
  padding: 15px 0 15px 42px;
  border-bottom: 1px solid var(--line-2);
  font-size: 14.5px;
  color: var(--muted);
}
.marks li:first-child{ border-top: 1px solid var(--line-2); }
.marks li::before{
  content: counter(mark, decimal-leading-zero);
  position: absolute; left: 0; top: 19px;
  font-family: var(--mono); font-size: 11px; color: var(--green-deep);
}
.marks--check li::before{ content: "\2713"; top: 16px; font-size: 13px; }
/* Fuer Aufzaehlungen ohne Reihenfolge - Nummern wuerden eine
   Rangfolge behaupten, die es nicht gibt. */
.marks--dash li::before{ content: "\2014"; top: 16px; }
.marks li strong{ display: block; font-weight: 600; font-size: 15.5px; color: var(--ink); }
.section--ink .marks li,
.section--ink .marks li:first-child{ border-color: var(--ink-line); color: var(--ink-text); }
.section--ink .marks li::before{ color: var(--green); }
.section--ink .marks li strong{ color: var(--paper-2); }

/* ============================================================
   11. Ablauf
   ============================================================ */
.steps{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line);
}
.step{
  background: var(--ink); padding: 26px 22px 30px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left; border: none; font: inherit; color: inherit;
  cursor: pointer;
  transition: background-color .22s ease;
}
.step:hover{ background: #1B2116; }
.step[aria-selected="true"]{ background: #1F2618; }
/* Die Schrittnummer ist ein normaler Absatz; der Strich davor
   kommt aus dem Stylesheet. */
.step .step-n{
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted-2);
}
.step .step-n::before{ content: ""; width: 18px; height: 2px; background: currentColor; flex: none; }
.step[aria-selected="true"] .step-n{ color: var(--green); }
.step h3{ font-size: 16.5px; color: var(--paper-2); margin: 0; }
.step .step-body{
  font-size: 14.3px; color: var(--ink-text); margin: 0;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .3s ease, opacity .25s ease;
}
.step[aria-selected="true"] .step-body{ max-height: 240px; opacity: 1; }

/* Ohne JavaScript bleibt jeder Schritt lesbar */
.no-js .step .step-body{ max-height: none; opacity: 1; }

/* ============================================================
   12. Produkt-Explorer
   ============================================================ */
/* Die Filterknoepfe baut site.js aus den Gruppenbezeichnungen der
   Produkte - im Editor gibt es dafuer nichts zu pflegen. */
.filters{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filter{
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 15px; border: 1px solid var(--line); background: var(--paper);
  color: var(--muted); cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.filter:hover{ border-color: var(--ink); color: var(--ink); }
.filter[aria-pressed="true"]{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter b{ font-weight: 500; opacity: .55; margin-left: 6px; }

.prod-list{ border-top: 1px solid var(--line); }
.general-info{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prod{ border-bottom: 1px solid var(--line); }
.prod[hidden]{ display: none !important; }

.prod-btn{
  width: 100%;
  display: grid; grid-template-columns: 96px 1fr auto; gap: 22px;
  align-items: center; padding: 22px 4px;
  background: none; border: none; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
  transition: background-color .16s ease;
}
.prod-btn:hover{ background: var(--paper-2); }
.prod-code{ font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--green-deep); }
/* h3 im Selektor, damit die Groesse die allgemeine Skala oben schlaegt */
h3.prod-name, .prod-name{
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(17px, 2vw, 20px); letter-spacing: -0.018em; margin: 0;
}
.prod-group{
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); margin-top: 5px;
}
.prod-toggle{
  width: 30px; height: 30px; flex: none;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: transform .25s ease, background-color .16s ease, border-color .16s ease;
}
.prod-btn:hover .prod-toggle{ border-color: var(--ink); }
.prod[data-open="true"] .prod-toggle{ transform: rotate(45deg); background: var(--green); border-color: var(--green); }

.prod-panel{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1);
}
.prod[data-open="true"] .prod-panel{ grid-template-rows: 1fr; }
/* min-height:0 ist zwingend: sonst haelt die automatische Mindesthoehe
   des Grid-Items die Zeile offen und 0fr kollabiert nicht. */
.prod-panel > div{ overflow: hidden; min-height: 0; }
.prod-inner{ padding: 0 4px 28px 118px; }
.prod-inner p{ font-size: 15px; color: var(--muted); max-width: 66ch; }
.no-js .prod-panel{ grid-template-rows: 1fr; }

/* Die Schaltflaeche entsteht erst im Browser aus dem Kopfbereich.
   Die Abstaende der Bloecke darin muessen dabei verschwinden. */
.prod-btn :is(p, h3, div){ margin-block: 0; }

.prod-tags{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; list-style: none; padding: 0; }
.prod-tags li{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 9px; background: var(--green-tint); color: var(--green-dark);
}
.prod-note{
	font-family: var(--mono) !important;
	font-size: 11.5px !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
	color: var(--muted-2) !important;
	margin-top: 16px !important;
}

/* ============================================================
   13. Download-Karten
   ============================================================ */
.docs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.doc{
  border: 1px solid var(--line); background: var(--paper);
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .18s ease;
}
.doc:hover{ border-color: var(--ink); }
.doc-kind{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.doc h3{ font-size: 19px; }
.doc p{ font-size: 14.5px; color: var(--muted); }
/* Die Download-Knoepfe sind gewoehnliche Knopfbloecke. Die Datei
   haengt man im Editor ueber das Link-Werkzeug an - auch direkt
   aus der Mediathek. */
.doc .doc-links{ gap: 8px; margin-top: auto; padding-top: 6px; }
.doc-links .wp-block-button__link{
  font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: .08em;
  padding: 8px 14px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.doc-links .wp-block-button__link:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ============================================================
   14. Ansprechpartner und Abschlussband
   ============================================================ */
.person{
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  border: 1px solid var(--line); background: var(--paper); padding: 30px;
}
.person-initials{
  width: 78px; height: 78px;
  display: grid; place-items: center;
  background: var(--green-tint);
  font-family: var(--display); font-weight: 700; font-size: 25px;
  letter-spacing: -0.02em; color: var(--green-dark);
}
.person-role{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.person h3{ font-size: 21px; margin: 5px 0 0; }
.person-links{ display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; font-size: 14.5px; }
.person-links a{ text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--green); padding-bottom: 1px; }

.cta-band{ background: var(--ink); color: var(--paper); padding-block: clamp(52px, 6.5vw, 84px); }
.cta-band :is(h1,h2,h3){ color: var(--paper); }
.cta-band h2{ font-size: clamp(25px, 3.2vw, 38px); max-width: 17ch; margin-inline: 0; }
.cta-band p{ color: var(--ink-text); max-width: 46ch; margin-inline: 0; }

/* ============================================================
   15. Formular
   Greift sowohl fuer eigene Felder als auch fuer die Ausgabe
   gaengiger Formular-Plugins (Contact Form 7, Forminator).
   ============================================================ */
.form-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.field{ display: flex; flex-direction: column; gap: 7px; }
.field--full{ grid-column: 1 / -1; }
.field label,
.wpcf7 label{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.field label .req{ color: var(--green-deep); }

:is(.field, .wpcf7, .forminator-ui) :is(input[type=text], input[type=email], input[type=tel], select, textarea){
  font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  padding: 12px 14px; width: 100%;
  border: 1px solid var(--line); border-radius: 0;
  background: var(--paper);
  transition: border-color .16s ease, box-shadow .16s ease;
}
:is(.field, .wpcf7, .forminator-ui) :is(input, select, textarea):focus{
  outline: none;
  border-color: var(--green-deep);
  box-shadow: 0 0 0 3px var(--green-tint);
}
.field textarea, .wpcf7 textarea{ resize: vertical; min-height: 140px; }

.field[data-invalid="true"] :is(input, select, textarea){ border-color: #B4341F; }
.field-err{ display: none; font-size: 13px; color: #B4341F; }
.field[data-invalid="true"] .field-err{ display: block; }

.form-foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.form-note{ font-size: 13px; color: var(--muted); max-width: 40ch; }

/* WPForms - auf der bestehenden Seite im Einsatz.
   Neuere WPForms-Fassungen lassen sich ueber CSS-Variablen anpassen;
   das ist der vom Hersteller vorgesehene Weg. Aeltere Formulare
   nutzen noch das alte Markup mit sehr spezifischen Regeln, deshalb
   zusaetzlich einige gezielte Ueberschreibungen - bewusst mit
   !important und nur innerhalb von .wpforms-container. */
.wpforms-container{
  --wpforms-field-border-radius: 0px;
  --wpforms-field-border-color: var(--line);
  --wpforms-field-background-color: var(--paper);
  --wpforms-field-text-color: var(--ink);
  --wpforms-label-color: var(--muted);
  --wpforms-label-sublabel-color: var(--muted-2);
  --wpforms-label-error-color: #B4341F;
  --wpforms-button-border-radius: 0px;
  --wpforms-button-background-color: var(--ink);
  --wpforms-button-text-color: var(--paper);
  --wpforms-button-border-color: var(--ink);
}
.wpforms-container .wpforms-field-label{
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.wpforms-container .wpforms-required-label{ color: var(--green-deep) !important; }
.wpforms-container :is(input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea){
  font-family: var(--sans) !important;
  font-size: 15.5px !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.wpforms-container :is(input, select, textarea):focus{
  outline: none !important;
  border-color: var(--green-deep) !important;
  box-shadow: 0 0 0 3px var(--green-tint) !important;
}
.wpforms-container :is(.wpforms-submit, button[type=submit]){
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 13px 22px !important;
  height: auto !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 0 !important;
  border-radius: 0 !important;
  transition: background-color .18s ease;
}
.wpforms-container :is(.wpforms-submit, button[type=submit]):hover{ background: var(--green-dark) !important; }
.wpforms-container .wpforms-error{ font-size: 13px; color: #B4341F !important; }

/* Sichtbarer Platzhalter fuer das Formular-Plugin. Bewusst als
   solcher erkennbar: Ein Formular, das echt aussieht aber nichts
   versendet, wuerde Anfragen verlieren. */
.form-slot{
  border: 2px dashed var(--line);
  background: var(--paper-2);
  padding: 30px;
  color: var(--muted);
}
.form-slot strong{ color: var(--ink); }

.contact-aside{ border: 1px solid var(--line); background: var(--paper-2); padding: 30px; }
.contact-aside > *{ margin-block: 0; }
.contact-aside .eyebrow{ margin-bottom: 12px; color: var(--muted-2); }
.contact-aside h2.wp-block-heading{ font-size: 22px; }
.contact-aside .marks{ margin-top: 22px; }
.contact-aside .aside-note{ margin-top: 22px; font-size: 14.5px; color: var(--muted); }

/* ------------------------------------------------------------
   Kennzahl
   Eine einzelne Zahl, gross gesetzt - nur dort, wo die Zahl selbst
   die Aussage ist.
   ------------------------------------------------------------ */
.stat{ border-left: 3px solid var(--green); padding: 6px 0 6px 26px; }
.stat > *{ margin-block: 0; }
.stat .stat-value{
  font-family: var(--display); font-weight: 700;
  font-size: clamp(48px, 7vw, 84px); line-height: 1; letter-spacing: -0.035em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.stat .stat-label{ margin-top: 12px; font-size: 16px; color: var(--ink-2); max-width: 36ch; }
.stat .stat-source{
  margin-top: 10px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
}

/* ============================================================
   16. Beitraege und Archiv
   ============================================================ */
.post-meta{
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
}
.entry-list{ display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.entry-item{ background: var(--paper); padding: 28px 4px; }
.entry-item h2{ font-size: clamp(21px, 2.4vw, 27px); }
.entry-content > *{ max-width: 66ch; }
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > figure{ max-width: none; }
.entry-content :is(h2, h3){ margin-top: 1.8em; }

/* ============================================================
   17. Fusszeile
   ============================================================ */
.site-foot{ background: var(--ink); color: var(--ink-text); padding-block: 60px 34px; }
.site-foot :is(h1,h2,h3,h4){ color: var(--paper); }
.site-foot h4{
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
}
.site-foot a{ color: #C6CCBB; text-decoration: none; }
.site-foot a:hover{ color: var(--green); }
.foot-brand{ display: flex; align-items: center; gap: 12px; }
.foot-brand .brand-name{ color: var(--paper); }
.foot-claim{ margin-top: 18px; font-size: 14.5px; max-width: 38ch; }

/* Das FSC-Zeichen ist gruen auf weiss. Auf dem dunklen Grund
   braucht es deshalb eine helle Flaeche, sonst verschwindet es. */
.foot-fsc{
  display: inline-block;
  margin-top: 26px;
  padding: 10px 12px;
  background: var(--paper);
  line-height: 0;
}
.foot-fsc img{ display: block; height: 92px; width: auto; }
.foot-fsc:hover{ background: #fff; }
/* Auf dunklem Grund die Variante mit hellen Buchstaben; das gruene
   Sechseck ist in beiden Dateien identisch. */
.foot-brand img{ width: 42px; height: 42px; display: block; }
.foot-cols{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.foot-list{ list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
.foot-legal{
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--ink-line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted-2);
}

/* ============================================================
   18. Einblenden beim Scrollen
   Ruhezustand ist sichtbar. Erst das Skript versteckt vorab,
   und nur, was beim Laden ohnehin unterhalb des Faltes liegt.
   ============================================================ */
.reveal{ transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
.reveal.pre{ opacity: 0; transform: translateY(14px); }

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

/* ============================================================
   20. Zusammenspiel mit dem Blocksatz von WordPress
   Die Flow-Layouts setzen Abstaende zwischen Geschwistern. In
   den Rastern oben stoert das die Ausrichtung, dort uebernimmt
   der Innenabstand der Kacheln die Arbeit.
   ============================================================ */
:is(.facts, .cards, .steps, .prod-list, .marks, .docs) > *{ margin-block: 0; }
.card > *, .fact > *, .step > *, .doc > *{ margin-block: 0; }

/* ============================================================
   19. Responsiv
   ============================================================ */
@media (max-width: 1020px){
  .facts{ grid-template-columns: repeat(2, 1fr); }
  .fact{ border-bottom: 1px solid var(--line-2); }
  .fact:nth-child(2n){ border-right: 0; }
  .steps{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px){
  .head-cta{ display: none; }
}
@media (max-width: 782px){
  .wp-block-navigation__responsive-container.is-menu-open{
    padding: 88px 20px 28px;
  }
}

@media (max-width: 620px){
  body{ padding-top: 76px; }
  .facts{ grid-template-columns: 1fr; }
  .fact{ border-right: 0; padding-right: 0; }
  .steps{ grid-template-columns: 1fr; }
  .prod-btn{ grid-template-columns: 1fr auto; gap: 14px; }
  .prod-code{ display: none; }
  .prod-inner{ padding-left: 4px; }
  .person{ grid-template-columns: 1fr; }
  .foot-cols{ grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 782px){
  body.admin-bar{ padding-top: 122px; }
  body.admin-bar .site-head{ top: 46px; }
}