/*
Plotterliebe by Si&Sa — CSS Stylesheet
Datei: style_plotterliebe.css
Design-Iteration 2 "Warm Modern" — Tokens übernommen aus
design_handoff_warm_modern/README.md. DM Sans führt jetzt auch Headlines,
Cormorant Garamond Italic nur noch als Akzent. Pill-Radien für Buttons/Chips.
Enthält auch die Styles für die Bildergalerie (von assets/js/gallery.js gesteuert).
*/

/* Fonts werden in includes/header.php direkt per <link> geladen (statt @import),
   damit die Schriften nicht erst nach dem Parsen dieses Stylesheets angefordert
   werden — @import erzeugt eine zusaetzliche Request-Kette und verzoegert LCP. */

/* Design-Tokens ------------------------------------------------------- */
:root{
  /* Farben — Surfaces & Border */
  --color-bg:#FAF6F2;
  --color-bg-muted:#F6ECEF;
  --color-surface:#FFFFFF;
  --color-surface-raised:#FDFAFC;
  --color-border:#E6D8DC;
  --color-border-subtle:#F0E6E9;

  /* Farben — Text */
  --color-fg:#26191E;
  --color-fg-muted:#75636B;
  --color-fg-subtle:#A78F99;
  --color-fg-on-dark:#FDF9F5;

  /* Farben — Primary (Dusky Rose) */
  --color-primary:#96455D;
  --color-primary-hover:#A65269;
  --color-primary-active:#82394E;
  --color-primary-subtle:#F8E9EE;
  --color-primary-fg:#FDF9F5;

  /* Farben — Links im Fließtext.
     Helleres Rosé als --color-primary. Es ist der hellste Ton der Palette, der
     auf allen drei Untergründen der Seite noch das WCAG-AA-Verhältnis von 4,5:1
     erreicht (4,84:1 auf --color-bg, 4,73:1 auf Weiß, 4,50:1 auf
     --color-bg-muted). Hellere Rosatöne wirken auf dem warmen Hintergrund
     zwar zarter, sind aber nicht mehr sicher lesbar. */
  --color-link:#A65269;
  --color-link-hover:#96455D;

  /* Farben — Accent (Rosegold) */
  --color-accent:#C9956A;
  --color-accent-hover:#B07A52;
  --color-accent-active:#966040;
  --color-accent-subtle:#F6EDE0;
  --color-accent-fg:#241A12;

  /* Farben — Status */
  --color-error:#A04050;
  --color-error-subtle:#F5E8EC;
  --color-success:#5A7A5C;
  --color-success-subtle:#E8F0E8;

  /* Typografie — DM Sans führt (auch Headlines), Cormorant nur als Akzent */
  --font-display:'Cormorant Garamond','Georgia',serif;
  --font-body:'DM Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-md:1.125rem;
  --text-lg:1.25rem;
  --text-xl:1.5rem;
  --text-2xl:1.875rem;
  --text-3xl:2.25rem;
  --text-4xl:3rem;
  --text-5xl:3.75rem;
  --text-display:5rem;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --leading-none:1;
  --leading-tight:1.2;
  --leading-snug:1.35;
  --leading-normal:1.55;
  --leading-relaxed:1.7;

  --tracking-tight:-0.02em;
  --tracking-normal:0em;
  --tracking-wide:0.04em;
  --tracking-wider:0.08em;
  --tracking-widest:0.14em;

  /* Spacing (8px-Grid) */
  --space-1:0.25rem;
  --space-1-5:0.375rem;
  --space-2:0.5rem;
  --space-2-5:0.625rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;

  --container-xl:1280px;
  --container-pad:var(--space-8);

  /* Radien (Warm Modern: großzügiger, Buttons/Chips als Pills) */
  --radius-sm:8px;
  --radius-input:14px;
  --radius-md:16px;
  --radius-lg:20px;
  --radius-xl:24px;
  --radius-2xl:28px;
  --radius-full:999px;

  /* Schatten (warm getönt) */
  --shadow-sm:0 1px 3px rgba(38,25,30,0.06);
  --shadow-md:0 4px 20px rgba(38,25,30,0.07);
  --shadow-lg:0 10px 28px rgba(38,25,30,0.11);
  --shadow-arrows:0 4px 14px rgba(38,25,30,0.14);

  --transition-fast:150ms ease;
  --transition-base:220ms ease;
  --transition-slow:380ms ease;
}

/* Reset / Base --------------------------------------------------------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:var(--weight-regular);
  background:var(--color-bg);
  color:var(--color-fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--leading-normal);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{
  max-width:var(--container-xl);
  margin:0 auto;
  padding:0 var(--container-pad);
}

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

/* Eyebrow-Chip (Pill statt reinem Text) --------------------------------- */
.eyebrow{
  display:inline-block;
  font-size:11px;
  font-weight:var(--weight-semibold);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--color-primary);
  background:var(--color-primary-subtle);
  padding:7px 16px;
  border-radius:var(--radius-full);
  margin-bottom:var(--space-3);
}
.eyebrow.eyebrow-on-surface{ background:var(--color-surface); }

.section-title{
  font-family:var(--font-body);
  font-weight:var(--weight-semibold);
  font-size:var(--text-3xl);
  letter-spacing:-0.015em;
  line-height:1.15;
  margin:0;
}
.section-title em{ font-family:var(--font-display); font-style:italic; font-weight:var(--weight-regular); color:var(--color-primary); }

/* Site-Header ------------------------------------------------------------ */
header.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(250,246,242,0.95);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border-subtle);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  height:72px;
  gap:var(--space-6);
}
.wordmark{
  flex:1;
  font-family:var(--font-body);
}
.wordmark-main{ font-size:19px; font-weight:var(--weight-semibold); color:var(--color-fg); }
.wordmark-sub{ font-family:var(--font-display); font-size:17px; font-weight:var(--weight-regular); font-style:italic; color:var(--color-primary); margin-left:0.35em; }

.site-nav{
  display:flex;
  align-items:center;
  gap:var(--space-8);
}
.site-nav a:not(.btn){
  position:relative;
  font-size:13.5px;
  font-weight:var(--weight-medium);
  color:var(--color-fg-muted);
  letter-spacing:var(--tracking-wide);
  padding-bottom:5px;
  transition:color var(--transition-fast);
}
.site-nav a:not(.btn)::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  border-radius:2px;
  background:var(--color-accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 250ms cubic-bezier(0.4,0,0.2,1);
}
.site-nav a:not(.btn):hover{ color:var(--color-primary); }
.site-nav a:not(.btn):hover::after{ transform:scaleX(1); }
.site-nav a.active{ color:var(--color-primary); font-weight:var(--weight-semibold); }
.site-nav a.active::after{ transform:scaleX(1); }

/* Footer ------------------------------------------------------------------ */
/* Abstand zum Footer kommt aus main (nicht mehr aus footer margin-top), damit
   er sich nicht mit dem Bottom-Padding der letzten Sektion aufaddiert. Endet
   die Seite mit .cta-banner, liefert dessen eigenes symmetrisches Padding
   bereits den Abstand — main bekommt dann keinen zusätzlichen.
   Selector main[role="main"] statt nur main, damit die Regel auch dort
   greift, wo main zusätzlich die Klasse .wrap trägt (margin:0 auto würde
   sonst per Spezifität gewinnen und margin-bottom wieder auf 0 setzen). */
main[role="main"]{ display:block; margin-bottom:var(--space-24); }
main[role="main"]:has(> .cta-banner:last-child){ margin-bottom:0; }

footer.site-footer{
  background:var(--color-fg);
  padding:38px 0;
}
footer.site-footer .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-6);
}
.footer-brand{
  font-family:var(--font-body);
  font-size:var(--text-xl);
  font-weight:var(--weight-semibold);
  color:var(--color-fg-on-dark);
  line-height:1.2;
}
.footer-brand em{ font-family:var(--font-display); font-style:italic; font-weight:var(--weight-regular); }
.footer-tagline{
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(250,246,240,0.45);
  margin-top:var(--space-1);
}
.footer-tagline a{ transition:color var(--transition-fast); }
.footer-tagline a:hover{ color:rgba(250,246,240,0.85); }
.footer-links{ display:flex; gap:var(--space-6); flex-wrap:wrap; }
.footer-links a{
  font-size:12px;
  color:rgba(250,246,240,0.5);
  letter-spacing:var(--tracking-wide);
  transition:color var(--transition-fast);
}
.footer-links a:hover{ color:rgba(250,246,240,0.85); }

/* Buttons — Pills --------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  font-family:var(--font-body);
  font-weight:var(--weight-semibold);
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  border:1.5px solid transparent;
  border-radius:var(--radius-full);
  padding:var(--space-3) var(--space-6);
  font-size:12.5px;
  transition:background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
  background:var(--color-primary);
  color:var(--color-primary-fg);
  border-color:var(--color-primary);
}
.btn:hover{ background:var(--color-primary-hover); border-color:var(--color-primary-hover); }
.btn:active{ background:var(--color-primary-active); }
.btn:focus-visible{ box-shadow:0 0 0 3px var(--color-primary-subtle); outline:1.5px solid var(--color-primary); outline-offset:1px; }

.btn-primary{ background:var(--color-primary); color:var(--color-primary-fg); border-color:var(--color-primary); }
.btn-primary:hover{ background:var(--color-primary-hover); border-color:var(--color-primary-hover); }

.btn-secondary{ background:var(--color-accent); color:var(--color-accent-fg); border-color:var(--color-accent); }
.btn-secondary:hover{ background:var(--color-accent-hover); color:var(--color-fg-on-dark); border-color:var(--color-accent-hover); }

.btn-outline{ background:transparent; color:var(--color-primary); border-color:var(--color-primary); }
.btn-outline:hover{ background:var(--color-primary-subtle); }

.btn-sm{ padding:var(--space-2) var(--space-4); font-size:11.5px; }
.btn-lg{ padding:var(--space-4) var(--space-8); font-size:13px; }

.btn-article-req{
  display:inline-block;
  width:fit-content;
  background:var(--color-primary);
  color:var(--color-primary-fg);
  padding:var(--space-3) var(--space-6);
  border-radius:var(--radius-full);
  font-weight:var(--weight-semibold);
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background var(--transition-base);
}
.btn-article-req:hover{ background:var(--color-primary-hover); }

/* Chip (allgemein, z.B. "Geeignet für"-Kategorie-Chips, Eigenschafts-Chips) */
.chip{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1-5);
  background:var(--color-surface);
  border:1px solid var(--color-border-subtle);
  color:var(--color-fg-muted);
  font-size:12.5px;
  font-weight:var(--weight-medium);
  padding:8px 16px;
  border-radius:var(--radius-full);
}
.chip::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--color-accent); flex-shrink:0; }
a.chip{ transition:border-color var(--transition-fast), color var(--transition-fast); }
a.chip:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.chip-flat{ border:none; background:var(--color-surface); box-shadow:var(--shadow-sm); }

/* Eigenschafts-Chip mit Label + Untertext (Verfahrensseiten) */
.prop-chip{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:2px;
  background:var(--color-surface);
  border-radius:var(--radius-full);
  box-shadow:var(--shadow-sm);
  padding:12px 22px;
}
.prop-chip .prop-title{ font-size:13px; font-weight:var(--weight-semibold); color:var(--color-fg); }
.prop-chip .prop-sub{ font-size:11.5px; color:var(--color-fg-muted); }

/* Card (Rechtstexte, Kontakt, Kategorie-Intro) ----------------------------- */
.card{
  max-width:900px;
  width:100%;
  margin:var(--space-12) auto;
  background:var(--color-surface);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  display:grid;
  grid-template-columns:1fr 250px;
  gap:var(--space-8);
  padding:var(--space-8);
  align-items:center;
}
.card .left{ padding-right:var(--space-2); min-width:0; }
.card .visual{ display:flex; align-items:center; justify-content:center; }
.card .visual svg{ border-radius:var(--radius-lg); }

.card.single-column{
  grid-template-columns:1fr;
}
.card.single-column .left{ grid-column:1 / -1; width:100%; }
.card.single-column .visual{ display:none; }
.card.single-column .btn-article-req{ display:inline-block; margin:var(--space-2) 0 var(--space-4); }

.title{
  font-family:var(--font-body);
  font-weight:var(--weight-semibold);
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:var(--space-8) 0 var(--space-3);
  color:var(--color-fg);
  overflow-wrap:break-word;
}
.title em{ font-family:var(--font-display); font-style:italic; font-weight:var(--weight-regular); color:var(--color-primary); }
h1.title{ font-size:44px; margin-top:0; }
h2.title{ font-size:24px; }
h3.title{ font-size:15px; }
h4.title{ font-size:13.5px; color:var(--color-fg-muted); }
.lead{ color:var(--color-fg-muted); font-size:15px; line-height:var(--leading-relaxed); margin:0 0 var(--space-4); }
.note{ font-size:12.5px; color:var(--color-fg-subtle); margin-bottom:var(--space-3); }
.actions{ display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-4); }

/* Rechtsseiten-Typografie: Lesespalte max. 760px, Ordinalzahl in H2 als Cormorant-Italic-Akzent */
.legal-page{ max-width:760px; margin:var(--space-12) auto; }
.legal-page .title{ color:var(--color-fg); }
.legal-page > p, .legal-page li{ font-size:14.5px; line-height:1.75; color:#5C4B52; overflow-wrap:break-word; }
.legal-page a{ overflow-wrap:break-word; word-break:break-word; }
.legal-page h1.title{ border-bottom:1px solid var(--color-border-subtle); padding-bottom:var(--space-6); margin-bottom:var(--space-4); }
.legal-ordinal{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:var(--weight-regular);
  color:var(--color-accent);
  margin-right:var(--space-2);
}
.legal-meta{ font-size:12.5px; color:var(--color-fg-subtle); margin:0 0 var(--space-4); }
.legal-address{
  background:var(--color-bg-muted);
  border-radius:var(--radius-sm);
  padding:22px 26px;
  margin:var(--space-4) 0;
}

/* Hero ---------------------------------------------------------------------- */
.hero{ padding:80px 0 72px; }
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}

/* Intro-Grid (Verfahrensseiten Plotter/Sublimation) — 1.1fr/0.9fr statt 1fr/1fr */
.intro-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:64px;
  align-items:center;
  max-width:1080px;
  margin:0 auto;
  padding-top:var(--space-16);
  padding-bottom:var(--space-20);
}
.intro-grid h1{
  font-family:var(--font-body);
  font-weight:var(--weight-semibold);
  font-size:44px;
  line-height:1.1;
  letter-spacing:-0.02em;
  margin:0;
  color:var(--color-fg);
}
.intro-grid h1 em{ font-family:var(--font-display); font-style:italic; font-weight:var(--weight-regular); color:var(--color-primary); }
.intro-grid .lead{ font-size:15.5px; max-width:460px; margin-top:var(--space-6); }
.hero h1{
  font-family:var(--font-body);
  font-weight:var(--weight-semibold);
  font-size:50px;
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0;
  color:var(--color-fg);
}
.hero h1 em{ font-family:var(--font-display); font-style:italic; font-weight:var(--weight-regular); color:var(--color-primary); }
.hero .lead{ font-size:15.5px; max-width:460px; margin-top:var(--space-6); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-8); }
.hero-trust{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-8); }

/* Trust-Chips (Hero + eigenständige Sektion) -------------------------------- */
.trust-chip{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  background:var(--color-surface);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-full);
  padding:10px 16px;
  font-size:13px;
  color:var(--color-fg-muted);
}
.trust-chip::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--color-accent); flex-shrink:0; }

.hero-visual{ position:relative; }
.hero-visual .frame{
  position:absolute;
  inset:14px -14px -14px 14px;
  border:1.5px solid var(--color-accent);
  border-radius:var(--radius-2xl);
  z-index:0;
}
.hero-visual .image-wrap{
  position:relative;
  z-index:1;
  aspect-ratio:4/3;
  background:var(--color-bg-muted);
  border-radius:var(--radius-2xl);
  border:1px solid var(--color-border-subtle);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-visual img{ width:100%; height:100%; object-fit:cover; }
.hero-visual .placeholder{ text-align:center; }
.hero-visual .placeholder-title{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  font-style:italic;
  font-weight:var(--weight-light);
  color:var(--color-fg-subtle);
}
.hero-visual .placeholder-sub{
  font-size:10px;
  letter-spacing:var(--tracking-wider);
  text-transform:uppercase;
  color:var(--color-fg-subtle);
  margin-top:6px;
}
.hero-visual .badge{
  position:absolute;
  z-index:2;
  left:16px; bottom:16px;
  background:rgba(253,249,245,0.94);
  color:var(--color-primary);
  font-size:10px;
  font-weight:var(--weight-semibold);
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:8px 14px;
  border-radius:var(--radius-full);
}

/* Fakten-Zeile (Verfahrensseiten: "Geeignet für") --------------------------- */
.facts-row{ margin-top:var(--space-8); }
.facts-row .facts-label{
  font-size:10.5px;
  font-weight:var(--weight-semibold);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--color-fg-subtle);
  margin-bottom:var(--space-3);
}
.facts-row .chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }

/* Fakten-Karten (Kontaktseite) ----------------------------------------------- */
.fact-cards{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-8); }
.fact-card{
  display:flex;
  align-items:baseline;
  gap:var(--space-4);
  background:var(--color-surface);
  border-radius:var(--radius-md);
  padding:16px 20px;
  box-shadow:var(--shadow-sm);
}
.fact-card .label{
  width:84px;
  flex-shrink:0;
  font-size:10.5px;
  font-weight:var(--weight-semibold);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--color-primary);
}
.fact-card .value{ font-size:14px; color:var(--color-fg); }

/* Trust-Band (statt dunkler Leiste) ------------------------------------------ */
.trustbar{ background:var(--color-bg-muted); padding:22px 0; }
.trustbar .wrap{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-6);
}
.trustbar-item{ display:flex; gap:var(--space-2); align-items:baseline; }
.trustbar-item::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--color-primary); flex-shrink:0; align-self:center; }
.trustbar-item .title{ font-size:13px; font-weight:var(--weight-semibold); color:var(--color-fg); margin:0; }
.trustbar-item .sub{ font-size:12.5px; color:var(--color-fg-muted); }

/* Produkte-Grid --------------------------------------------------------------- */
.products-section{ padding:var(--space-20) 0; }
.products-section .section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-4);
  margin-bottom:var(--space-12);
}
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:22px;
}
.product-card{
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition-base), transform var(--transition-base);
}
.product-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.product-card__img-wrap{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--color-bg-muted);
  flex-shrink:0;
}
.product-card__img{ width:100%; height:100%; object-fit:cover; }
.product-card__placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-xs); letter-spacing:var(--tracking-widest); text-transform:uppercase;
  color:var(--color-fg-subtle);
}
.product-card__body{
  padding:18px 20px 20px;
  display:flex; flex-direction:column; gap:var(--space-1-5); flex:1;
}
.product-card__category{
  font-size:10px; font-weight:var(--weight-semibold);
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--color-primary);
}
.product-card__title{
  font-family:var(--font-body);
  font-size:16.5px; font-weight:var(--weight-semibold);
  letter-spacing:-0.01em;
  color:var(--color-fg);
}
.product-card__desc{
  font-size:12.5px;
  line-height:var(--leading-normal);
  color:var(--color-fg-muted);
  flex:1;
}
.product-card__footer{ display:flex; align-items:center; justify-content:flex-start; margin-top:var(--space-3); }
.product-card__cta{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  background:transparent;
  border:1.5px solid var(--color-border);
  cursor:pointer;
  padding:8px 16px;
  border-radius:var(--radius-full);
  font-family:var(--font-body); font-size:11px; font-weight:var(--weight-semibold);
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--color-primary);
  transition:background var(--transition-fast), border-color var(--transition-fast);
  text-decoration:none;
}
.product-card__cta:hover{ background:var(--color-primary-subtle); border-color:var(--color-primary); }

/* Prozess ---------------------------------------------------------------------- */
.process-section{ background:var(--color-bg-muted); padding:var(--space-20) 0; }
.process-section .section-head{ text-align:center; margin-bottom:var(--space-12); }
.process-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-6);
}
.process-card{
  background:var(--color-surface);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-lg);
  padding:var(--space-8);
  box-shadow:var(--shadow-sm);
}
.process-num{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-primary-subtle);
  color:var(--color-primary);
  font-family:var(--font-body);
  font-size:14px;
  font-weight:var(--weight-bold);
  border-radius:50%;
  margin-bottom:var(--space-5);
}
.process-card h3{
  font-family:var(--font-body);
  font-size:18px;
  font-weight:var(--weight-semibold);
  margin:0 0 var(--space-3);
}
.process-card p{
  font-size:13.5px;
  color:var(--color-fg-muted);
  line-height:var(--leading-normal);
  margin:0;
}

/* CTA-Banner --------------------------------------------------------------------- */
.cta-banner{ padding:72px 0; }
.cta-banner .inner{
  margin:0 auto;
  text-align:center;
  padding:64px;
  background:var(--color-primary);
  border-radius:var(--radius-2xl);
}
.cta-banner h2{
  font-family:var(--font-body);
  font-size:34px;
  font-weight:var(--weight-semibold);
  letter-spacing:-0.015em;
  color:var(--color-primary-fg);
  line-height:1.15;
  margin:0 0 var(--space-5);
}
.cta-banner h2 em{ font-family:var(--font-display); font-style:italic; font-weight:var(--weight-regular); }
.cta-banner p{ font-size:15px; color:rgba(253,249,245,0.75); line-height:var(--leading-relaxed); margin:0 0 var(--space-8); }
.cta-banner .btn-secondary{ color:var(--color-accent-fg); }
.cta-banner .btn-secondary:hover{ color:var(--color-fg-on-dark); }

/* Formulare (Kontakt / Widerruf) -------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start; margin-top:var(--space-8); }
.contact-grid > *{ min-width:0; }
.form-card{
  background:var(--color-surface);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  padding:40px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field-group{ margin-bottom:var(--space-5); }
.field-group label{
  display:block;
  font-size:13px;
  font-weight:var(--weight-medium);
  color:var(--color-fg);
  margin-bottom:var(--space-2);
}
.field-group .req{ color:var(--color-primary); }
.form-footer{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-4); }

/* Ältere .contact/.formular/.field-Struktur (Fallback, falls noch referenziert) */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); margin:var(--space-6) 0; }
.contact .formular{ background:var(--color-bg-muted); padding:var(--space-6); border-radius:var(--radius-md); border:1px solid var(--color-border-subtle); text-align:right; }
.contact .field{ background:var(--color-bg-muted); padding:var(--space-6); border-radius:var(--radius-md); border:1px solid var(--color-border-subtle); text-align:left; }
.contact label{ font-family:var(--font-body); font-size:13px; font-weight:var(--weight-medium); color:var(--color-fg); letter-spacing:var(--tracking-wide); }

input, textarea, select{
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-fg);
  background:var(--color-bg);
  border:1.5px solid var(--color-border-subtle);
  border-radius:var(--radius-input);
  padding:13px 16px;
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline:none;
  width:100%;
  box-sizing:border-box;
}
textarea{ resize:vertical; min-height:150px; line-height:var(--leading-relaxed); }
input:hover, textarea:hover, select:hover{ border-color:var(--color-fg-muted); }
input:focus, textarea:focus, select:focus{ border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-subtle); }
input::placeholder, textarea::placeholder{ color:var(--color-fg-subtle); }

/* Kategorieseiten-Kopf (Beton.php u.a.) ------------------------------------- */
.category-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:var(--space-6);
  max-width:1080px;
  margin:var(--space-12) auto var(--space-8);
}
.category-header .cta-col{ text-align:right; flex-shrink:0; }

/* ===== Bildergalerie (Kategorieseiten, gesteuert von assets/js/gallery.js) ===== */
.gallery{
  max-width:1080px;
  margin:var(--space-6) auto;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  align-items:stretch;
}

.gallery .viewer{
  position:relative;
  background:var(--color-bg-muted);
  border-radius:var(--radius-xl);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:16/10;
}
.gallery .viewer img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .36s ease, opacity .28s ease;
}

.gallery .viewer .counter{
  position:absolute;
  right:16px; bottom:16px;
  background:rgba(253,249,245,0.94);
  color:var(--color-primary);
  font-size:12px;
  font-weight:var(--weight-semibold);
  padding:6px 14px;
  border-radius:var(--radius-full);
  z-index:5;
}

/* Caption jetzt als zentrierte Zeile UNTER dem Viewer statt Overlay */
.gallery .caption{
  text-align:center;
  font-size:14px;
  color:var(--color-fg-muted);
}
#captionText{ white-space:normal; word-break:break-word; }

.gallery .btn--prev,
.gallery .btn--next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(253,249,245,0.95);
  color:var(--color-primary);
  border:0;
  border-radius:50%;
  box-shadow:var(--shadow-arrows);
  cursor:pointer;
  z-index:50;
  text-transform:none;
  letter-spacing:normal;
  font-weight:var(--weight-regular);
  padding:0;
}
.gallery .btn--prev:hover,
.gallery .btn--next:hover{ background:var(--color-primary-subtle); }
.gallery .btn--prev{ left:18px; }
.gallery .btn--next{ right:18px; }

.gallery .thumbs{
  display:flex;
  /* "safe center" statt "center": Bei mehr Vorschaubildern als Platz (Taschen
     hat 25) läuft zentrierter Flex-Inhalt nach BEIDEN Seiten über — scrollen
     lässt sich aber nur nach rechts. Das erste Vorschaubild war dadurch
     angeschnitten und nicht erreichbar. "safe" zentriert nur solange alles
     hineinpasst und richtet sonst linksbündig aus.
     Die erste Zeile bleibt als Rückfall für ältere Browser stehen. */
  justify-content:center;
  justify-content:safe center;
  gap:10px;
  overflow-x:auto;
  padding:var(--space-2) var(--space-1);
  -webkit-overflow-scrolling:touch;
}
.gallery .thumb{
  position:relative;
  flex:0 0 auto;
  width:72px;
  height:72px;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 0 0 2px var(--color-border-subtle);
  opacity:0.75;
  box-sizing:border-box;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--color-surface);
  transition:opacity var(--transition-fast), box-shadow var(--transition-fast);
}
.gallery .thumb button{ width:100%; height:100%; border:0; padding:0; background:none; cursor:pointer; }
.gallery .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.gallery .thumb.is-active{
  box-shadow:0 0 0 2px var(--color-primary);
  opacity:1;
}
.gallery .thumb:hover{ opacity:1; }

.gallery .thumb button:focus-visible,
.gallery .btn--prev:focus-visible,
.gallery .btn--next:focus-visible{
  outline:3px solid var(--color-primary-subtle);
  outline-offset:3px;
}

/* Responsive -------------------------------------------------------------------- */
@media only screen and (max-width:900px){
  .hero-grid, .intro-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .products-grid{ grid-template-columns:repeat(2,1fr); }
  .process-grid{ grid-template-columns:1fr; }
  .trustbar .wrap{ justify-content:flex-start; }
  .trustbar-item{ width:calc(50% - var(--space-3)); }
  .card{ grid-template-columns:1fr; }
  .card .visual{ display:none; }
  .contact{ grid-template-columns:1fr; }
  .contact .formular{ text-align:left; }
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

@media only screen and (max-width:600px){
  .site-header .wrap{ height:auto; flex-wrap:wrap; padding-top:var(--space-3); padding-bottom:var(--space-3); gap:var(--space-3); }
  .site-nav{ gap:var(--space-4); flex-wrap:wrap; }
  .hero{ padding:var(--space-16) 0 var(--space-12); }
  .hero h1{ font-size:var(--text-3xl); }
  h1.title{ font-size:28px; }
  .products-grid{ grid-template-columns:1fr; }
  .trustbar-item{ width:100%; }
  footer.site-footer .wrap{ flex-direction:column; align-items:flex-start; }
  .gallery .viewer{ aspect-ratio:4/3; }
  .cta-banner .inner{ padding:40px var(--space-6); }
}

/* Breadcrumb & Kategorie-Fließtext -----------------------------------------------
   Ergänzt im Zuge der SEO-Umsetzung: sichtbare Brotkrumennavigation (passend zum
   BreadcrumbList-Markup) und eine Lesespalte für den erklärenden Text unterhalb
   der Galerie. Nutzt ausschließlich vorhandene Design-Tokens. */
.breadcrumb{
  margin:var(--space-8) 0 var(--space-4);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--color-fg-muted);
}
.breadcrumb a{ color:var(--color-fg-muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--color-primary); }
.breadcrumb span[aria-hidden]{ margin:0 var(--space-2); opacity:0.5; }
.breadcrumb [aria-current="page"]{ color:var(--color-fg); }

.category-content{
  max-width:760px;
  margin:var(--space-12) 0 0;
}
.category-content h2{
  font-size:20px;
  line-height:var(--leading-tight);
  color:var(--color-fg);
  margin:var(--space-8) 0 var(--space-3);
}
.category-content h2:first-child{ margin-top:0; }
.category-content p{
  font-size:14.5px;
  line-height:1.75;
  color:#5C4B52;
  margin:0 0 var(--space-4);
}
.category-links{ margin:var(--space-12) 0 var(--space-12); }

/* Formular-Rückmeldung ------------------------------------------------------------
   Hinweiskasten über Kontakt- und Widerrufsformular, wenn ein Absendeversuch
   fehlgeschlagen ist (siehe includes/form_messages.php). Nutzt die bereits
   vorhandenen Error-Tokens, damit die Meldung sichtbar ist, ohne aus dem warmen
   Farbklima der Seite auszubrechen. */
.form-notice{
  margin:var(--space-6) 0 0;
  padding:var(--space-4) var(--space-5);
  max-width:760px;
  background:var(--color-error-subtle);
  border-left:3px solid var(--color-error);
  border-radius:var(--radius-sm);
}
.form-notice__text{
  margin:0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--color-fg);
}
.form-notice__fields{
  margin:var(--space-2) 0 0;
  padding-left:var(--space-5);
  font-size:14px;
  line-height:1.7;
  color:var(--color-fg-muted);
}

/* Hero-Diashow ---------------------------------------------------------------
   Blendet die Kategoriebilder im Hero überein (assets/js/hero-slideshow.js).
   Die Bilder liegen absolut übereinander im bestehenden .image-wrap, das seine
   Höhe schon über aspect-ratio:4/3 reserviert — es entsteht also kein
   Layout-Sprung, egal wann welches Bild eintrifft. */
.hero-slideshow{ position:relative; }
.hero-slideshow .hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1400ms ease-in-out;
}
.hero-slideshow .hero-slide.is-active{ opacity:1; }

/* Der Text im Badge wechselt mit dem Bild — mitüberblenden, damit er nicht
   hart umspringt, während das Bild noch weich wechselt. */
.hero-visual .badge{ transition:opacity 300ms ease-in-out; }

@media (prefers-reduced-motion: reduce){
  /* Das Script hält die Diashow ohnehin an; hier zusätzlich die Überblendung
     abschalten, falls das erste Bild noch eingeblendet wird. */
  .hero-slideshow .hero-slide{ transition:none; }
  .hero-visual .badge{ transition:none; }
}


/* Galerie großflächig einpassen -------------------------------------------------
   Die Galerie soll auf Desktop wie Mobil groß sein. Ihre Höhe berechnet
   gallery.js NICHT aus ihrer tatsächlichen Position, sondern aus dem Platz, der
   unterhalb der Brotkrumen zur Verfügung stünde. Damit bleibt die Bildgröße
   gleich, egal wie viel Text darüber steht — sonst würde jede zusätzliche
   Textzeile im Kopfbereich das Bild wieder schrumpfen lassen.

   Folge: Überschrift und Einleitung stehen wie gewohnt über der Galerie, deren
   unterer Teil (Vorschauleiste) liegt dadurch etwas unterhalb des Bildschirm-
   rands. Das ist die bewusste Abwägung zugunsten eines großen Bildes.

   Die Höhe kommt über --pl-gallery-h, erst dann kommt .is-fitted dazu.
   Ohne JavaScript bleibt das bisherige Verhalten (Seitenverhältnis 16/10). */

.gallery.is-fitted{
  height:var(--pl-gallery-h);
  /* Deutlicher Abstand zum Text darüber — vorher standen Einleitung und
     Bildrahmen zu dicht beieinander. */
  margin-top:var(--space-10);
}
.gallery.is-fitted .viewer{
  /* Feste Höhe statt Seitenverhältnis — der Viewer bekommt, was nach
     Bildunterschrift und Vorschauleiste übrig bleibt. min-height:0 erlaubt dem
     Flex-Kind, unter seine Inhaltsgröße zu schrumpfen. */
  aspect-ratio:auto;
  flex:1 1 auto;
  min-height:0;

  /* Rahmenbreite an die tatsächliche Bildhöhe koppeln (gallery.js rechnet sie
     aus). Die Produktfotos sind überwiegend hochformatig und werden mit
     object-fit:contain eingepasst — ein Rahmen über vollen 1080 px wäre
     größtenteils leere Fläche und ließe die Galerie kleiner wirken. */
  max-width:min(100%, var(--pl-viewer-w, 100%));
  margin-inline:auto;
  width:100%;
}
.gallery.is-fitted .thumbs{ flex:0 0 auto; }

/* Auf Telefonen die Vorschaubilder etwas kleiner, damit mehr Höhe für das
   eigentliche Bild bleibt. */
@media (max-width:640px){
  .gallery.is-fitted .thumb{ width:56px; height:56px; }
  .gallery.is-fitted .thumbs{ padding:0; }
}

/* Links im Fließtext ------------------------------------------------------------
   Ausgangslage: Die Basisregel lautet a{color:inherit; text-decoration:none}.
   Links im Fließtext waren dadurch von normalem Text nicht zu unterscheiden —
   die Klasse .links im HTML der Rechtsseiten hatte bis hierher überhaupt keine
   Regel. Betroffen waren vor allem die Rechtstexte (allein die Datenschutz-
   erklärung enthält sieben Verweise) und die Querverweise auf den
   Kategorieseiten.

   Neben der Farbe kommt bewusst eine Unterstreichung dazu: Farbe als einziges
   Unterscheidungsmerkmal ist für farbfehlsichtige Leser zu wenig. Die Linie
   liegt etwas tiefer und zunächst gedeckt, damit längere Textpassagen ruhig
   bleiben; beim Überfahren wird sie kräftig.

   Ausgenommen sind Elemente mit eigener Gestaltung: Buttons, Chips,
   Navigation, Fußzeile, Brotkrumen und Produktkacheln. */
.legal-page a:not(.btn):not(.chip),
.category-content a:not(.btn):not(.chip),
main .lead a:not(.btn):not(.chip),
main .note a:not(.btn):not(.chip){
  color:var(--color-link);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--color-link) 40%, transparent);
  transition:color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.legal-page a:not(.btn):not(.chip):hover,
.category-content a:not(.btn):not(.chip):hover,
main .lead a:not(.btn):not(.chip):hover,
main .note a:not(.btn):not(.chip):hover{
  color:var(--color-link-hover);
  text-decoration-color:currentColor;
}

/* Ältere Browser ohne color-mix bekommen eine einfarbige Linie statt gar keiner. */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .legal-page a:not(.btn):not(.chip),
  .category-content a:not(.btn):not(.chip),
  main .lead a:not(.btn):not(.chip),
  main .note a:not(.btn):not(.chip){
    text-decoration-color:var(--color-link);
  }
}

.legal-page a:focus-visible,
.category-content a:focus-visible,
main .lead a:focus-visible,
main .note a:focus-visible{
  outline:3px solid var(--color-primary-subtle);
  outline-offset:2px;
  border-radius:2px;
}