/* blocks/shared.css – gilt in Frontend und Editor */
:where(.editor-styles-wrapper, .is-frontend) .fsd-hero{
  border-radius: var(--hero-br, 24px);
  min-height: var(--hero-h, clamp(420px,48vw,560px));
  padding-inline: var(--hero-pad-inline, clamp(24px,4vw,42px));
  padding-top: var(--hero-pad-top, clamp(48px,8vw,180px));
  overflow: hidden;
}

/* Buttons (gemeinsam) */
:where(.editor-styles-wrapper, .is-frontend) .pill-button{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.6em 1.1em; border-radius:999px; text-decoration:none;
}


/* Navigation */
:is(.editor-styles-wrapper, .is-frontend) .main-navigation a,
:is(.editor-styles-wrapper, .is-frontend) .main-navigation .sub-menu a {
  font-family: 'Gantari', sans-serif;
}

/* Headings */
:is(.editor-styles-wrapper, .is-frontend) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-ui);
}

/* Buttons */
:is(.editor-styles-wrapper, .is-frontend) :is(button, input[type="button"], input[type="submit"], .wp-block-button__link) {
  font-family: var(--font-ui);
}


/* =========================
   SHARED – Buttons (Frontend + Editor)
   Funktioniert für:
   - Core Button: .wp-block-button__link
   - GenerateBlocks Button: .gb-button
   - GenerateBlocks Text-Link: .gb-text
   Nutzung: btn-primary / btn-outline + Farbvariante (z.B. btn-hydro)
   Klassen dürfen am Link ODER am Container hängen.
   ========================= */

:where(.editor-styles-wrapper, .is-frontend){
  --btn-radius: 999px;
}

/* -------------------------------------------------
   1) BASIS-LOOK – sobald irgendwo eine btn-* Klasse gesetzt ist
   (am Link ODER am Container)
-------------------------------------------------- */
:where(.editor-styles-wrapper, .is-frontend)
:is(
  /* Link trägt die Klasse */
  a[class*="btn-"],
  button[class*="btn-"],
  .wp-block-button__link[class*="btn-"],
  .gb-button[class*="btn-"],
  .gb-text[class*="btn-"],
  /* Container trägt die Klasse → style das anklickbare Kindelement */
  .wp-block-button[class*="btn-"] .wp-block-button__link,
  .gb-button-wrapper[class*="btn-"] .gb-button,
  .gb-button-wrapper[class*="btn-"] .gb-text
){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:600 1rem/1 inherit;
  text-decoration:none;
  cursor:pointer;
  border-radius:var(--btn-radius) !important;
  padding:.8em 1.6em;
  border:2px solid transparent;
  transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s,transform .06s;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* Hover-Lift */
:where(.editor-styles-wrapper, .is-frontend)
:is(
  a[class*="btn-"],
  button[class*="btn-"],
  .wp-block-button__link[class*="btn-"],
  .gb-button[class*="btn-"],
  .gb-text[class*="btn-"],
  .wp-block-button[class*="btn-"] .wp-block-button__link,
  .gb-button-wrapper[class*="btn-"] :is(.gb-button,.gb-text)
):hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.10);
}

/* Fokus */
:where(.editor-styles-wrapper, .is-frontend)
:is(
  a[class*="btn-"],
  button[class*="btn-"],
  .wp-block-button__link[class*="btn-"],
  .gb-button[class*="btn-"],
  .gb-text[class*="btn-"],
  .wp-block-button[class*="btn-"] .wp-block-button__link,
  .gb-button-wrapper[class*="btn-"] :is(.gb-button,.gb-text)
):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--btn-color, var(--accent)) 30%, white);
}

/* -------------------------------------------------
   2) VARIANTEN – PRIMARY / OUTLINE / NEUTRAL
   (lesen --btn-color / --btn-fg; greifen gegen GB/Editor Styles)
-------------------------------------------------- */

/* PRIMARY (gefüllt) */
:where(.editor-styles-wrapper, .is-frontend)
:is(
  /* Klasse am Link */
  a.btn-primary, button.btn-primary,
  .wp-block-button__link.btn-primary,
  .gb-button.btn-primary, .gb-text.btn-primary,
  /* Klasse am Container */
  .wp-block-button.btn-primary .wp-block-button__link,
  .gb-button-wrapper.btn-primary :is(.gb-button,.gb-text),
  /* Legacy */
  a.btn--primary, button.btn--primary,
  .wp-block-button__link.btn--primary,
  .gb-button.btn--primary, .gb-text.btn--primary,
  .wp-block-button.btn--primary .wp-block-button__link,
  .gb-button-wrapper.btn--primary :is(.gb-button,.gb-text)
){
  background-color:var(--btn-color, var(--accent)) !important;
  color:var(--btn-fg, #fff) !important;
  border-color:var(--btn-color, var(--accent)) !important;
}
:where(.editor-styles-wrapper, .is-frontend)
:is(
  a.btn-primary:hover, button.btn-primary:hover,
  .wp-block-button__link.btn-primary:hover,
  .gb-button.btn-primary:hover, .gb-text.btn-primary:hover,
  .wp-block-button.btn-primary .wp-block-button__link:hover,
  .gb-button-wrapper.btn-primary :is(.gb-button,.gb-text):hover,
  a.btn--primary:hover, button.btn--primary:hover,
  .wp-block-button__link.btn--primary:hover,
  .gb-button.btn--primary:hover, .gb-text.btn--primary:hover,
  .wp-block-button.btn--primary .wp-block-button__link:hover,
  .gb-button-wrapper.btn--primary :is(.gb-button,.gb-text):hover
){
  background-color:#fff !important;
  color:var(--btn-color, var(--accent)) !important;
  border-color:var(--btn-color, var(--accent)) !important;
}

/* OUTLINE */
:where(.editor-styles-wrapper, .is-frontend)
:is(
  a.btn-outline, button.btn-outline,
  .wp-block-button__link.btn-outline,
  .gb-button.btn-outline, .gb-text.btn-outline,
  .wp-block-button.btn-outline .wp-block-button__link,
  .gb-button-wrapper.btn-outline :is(.gb-button,.gb-text),
  a.btn--outline, button.btn--outline,
  .wp-block-button__link.btn--outline,
  .gb-button.btn--outline, .gb-text.btn--outline,
  .wp-block-button.btn--outline .wp-block-button__link,
  .gb-button-wrapper.btn--outline :is(.gb-button,.gb-text)
){
  background-color:#fff !important;
  color:var(--btn-color, var(--accent)) !important;
  border-color:var(--btn-color, var(--accent)) !important;
}
:where(.editor-styles-wrapper, .is-frontend)
:is(
  a.btn-outline:hover, button.btn-outline:hover,
  .wp-block-button__link.btn-outline:hover,
  .gb-button.btn-outline:hover, .gb-text.btn-outline:hover,
  .wp-block-button.btn-outline .wp-block-button__link:hover,
  .gb-button-wrapper.btn-outline :is(.gb-button,.gb-text):hover,
  a.btn--outline:hover, button.btn--outline:hover,
  .wp-block-button__link.btn--outline:hover,
  .gb-button.btn--outline:hover, .gb-text.btn--outline:hover,
  .wp-block-button.btn--outline .wp-block-button__link:hover,
  .gb-button-wrapper.btn--outline :is(.gb-button,.gb-text):hover
){
  background-color:var(--btn-color, var(--accent)) !important;
  color:var(--btn-fg, #fff) !important;
  border-color:var(--btn-color, var(--accent)) !important;
}

/* NEUTRAL (optional) */
:where(.editor-styles-wrapper, .is-frontend)
:is(
  a.btn-neutral, button.btn-neutral,
  .wp-block-button__link.btn-neutral,
  .gb-button.btn-neutral, .gb-text.btn-neutral,
  .wp-block-button.btn-neutral .wp-block-button__link,
  .gb-button-wrapper.btn-neutral :is(.gb-button,.gb-text),
  a.btn--neutral, button.btn--neutral,
  .wp-block-button__link.btn--neutral,
  .gb-button.btn--neutral, .gb-text.btn--neutral,
  .wp-block-button.btn--neutral .wp-block-button__link,
  .gb-button-wrapper.btn--neutral :is(.gb-button,.gb-text)
){
  background-color:#fff !important;
  color:#333 !important;
  border-color:#ddd !important;
}
:where(.editor-styles-wrapper, .is-frontend)
:is(
  a.btn-neutral:hover, button.btn-neutral:hover,
  .wp-block-button__link.btn-neutral:hover,
  .gb-button.btn-neutral:hover, .gb-text.btn-neutral:hover,
  .wp-block-button.btn-neutral .wp-block-button__link:hover,
  .gb-button-wrapper.btn-neutral :is(.gb-button,.gb-text):hover,
  a.btn--neutral:hover, button.btn--neutral:hover,
  .wp-block-button__link.btn--neutral:hover,
  .gb-button.btn--neutral:hover, .gb-text.btn--neutral:hover,
  .wp-block-button.btn--neutral .wp-block-button__link:hover,
  .gb-button-wrapper.btn--neutral :is(.gb-button,.gb-text):hover
){
  background-color:#f7f7f7 !important;
  border-color:#bbb !important;
}

/* -------------------------------------------------
   3) FARB-UTILITIES – setzen NUR Variablen
   (können am Link ODER Container hängen)
-------------------------------------------------- */
:where(.editor-styles-wrapper, .is-frontend) :is(.btn-warm,  .btn-warm  * ){ --btn-color:#FBB040; --btn-fg:#111; }
:where(.editor-styles-wrapper, .is-frontend) :is(.btn-cast,  .btn-cast  * ){ --btn-color:#E43D30; --btn-fg:#111; }
:where(.editor-styles-wrapper, .is-frontend) :is(.btn-hydro, .btn-hydro * ){ --btn-color:#63C8D0; --btn-fg:#111; }
:where(.editor-styles-wrapper, .is-frontend) :is(.btn-am,    .btn-am    * ){ --btn-color:#D59B29; --btn-fg:#111; }
:where(.editor-styles-wrapper, .is-frontend) :is(.btn-weld,  .btn-weld  * ){ --btn-color:#BF1E2E; --btn-fg:#fff; }

/* -------------------------------------------------
   4) Mobile Feinschliff
-------------------------------------------------- */
@media (max-width:600px){
  :where(.editor-styles-wrapper, .is-frontend)
  :is(
    a[class*="btn-"], button[class*="btn-"],
    .wp-block-button__link[class*="btn-"],
    .gb-button[class*="btn-"], .gb-text[class*="btn-"],
    .wp-block-button[class*="btn-"] .wp-block-button__link,
    .gb-button-wrapper[class*="btn-"] :is(.gb-button,.gb-text)
  ){
    font-size:.95rem;
    padding:.7em 1.4em;
  }
}
/* =========================================
   Rückwärtskompatibilität: ".btn" wie PRIMARY
   – greift für Core, GenerateBlocks Button & GB Text-Link
   – Klassen dürfen am Link ODER Container hängen
   ========================================= */

/* Basis-Shaping für .btn (da nicht von [class*="btn-"] erfasst) */
:where(.editor-styles-wrapper, .is-frontend)
:is(
  /* Link trägt .btn */
  a.btn, button.btn,
  .wp-block-button__link.btn,
  .gb-button.btn, .gb-text.btn,
  /* Container trägt .btn → Link/Kindelement stylen */
  .wp-block-button.btn .wp-block-button__link,
  .gb-button-wrapper.btn :is(.gb-button,.gb-text)
){
  display:inline-flex;
/*  display: block; */

  align-items:center;
  justify-content:center;
  font:600 1rem/1 inherit;
  text-decoration:none;
  cursor:pointer;
  border-radius:var(--btn-radius) !important;
  padding:.8em 1.6em;
  border:2px solid transparent;
  transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s,transform .06s;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* Hover-Lift + Fokus für .btn */
:where(.editor-styles-wrapper, .is-frontend)
:is(
  a.btn, button.btn,
  .wp-block-button__link.btn,
  .gb-button.btn, .gb-text.btn,
  .wp-block-button.btn .wp-block-button__link,
  .gb-button-wrapper.btn :is(.gb-button,.gb-text)
):hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.10);
}
:where(.editor-styles-wrapper, .is-frontend)
:is(
  a.btn, button.btn,
  .wp-block-button__link.btn,
  .gb-button.btn, .gb-text.btn,
  .wp-block-button.btn .wp-block-button__link,
  .gb-button-wrapper.btn :is(.gb-button,.gb-text)
):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--btn-color, var(--accent)) 30%, white);
}

/* .btn verhält sich wie PRIMARY (gefüllt) */
:where(.editor-styles-wrapper, .is-frontend)
:is(
  a.btn, button.btn,
  .wp-block-button__link.btn,
  .gb-button.btn, .gb-text.btn,
  .wp-block-button.btn .wp-block-button__link,
  .gb-button-wrapper.btn :is(.gb-button,.gb-text)
){
  background-color:var(--btn-color, var(--accent)) !important;
  color:var(--btn-fg, #fff) !important;
  border-color:var(--btn-color, var(--accent)) !important;
}
:where(.editor-styles-wrapper, .is-frontend)
:is(
  a.btn:hover, button.btn:hover,
  .wp-block-button__link.btn:hover,
  .gb-button.btn:hover, .gb-text.btn:hover,
  .wp-block-button.btn .wp-block-button__link:hover,
  .gb-button-wrapper.btn :is(.gb-button,.gb-text):hover
){
  background-color:#fff !important;
  color:var(--btn-color, var(--accent)) !important;
  border-color:var(--btn-color, var(--accent)) !important;
}




/* ===== Stats Section ===== */
.fsd-stats{
  --stats-pad-y: clamp(48px, 7vw, 120px);
  --stats-gap: 28px;
  padding-block: var(--stats-pad-y);
  /* WICHTIG: KEIN background hier setzen/überschreiben,
     damit dein im Editor gesetztes Bild + Overlay sichtbar bleibt */
  position: relative;
}

.fsd-stats .gb-grid-wrapper{
  gap: var(--stats-gap);
  position: relative;
  z-index: 1; /* Inhalt über dem Bild */
}

/* Karten */
.stat-item{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  padding: clamp(22px, 3.5vw, 36px);
  text-align: center;
  backdrop-filter: blur(2px);
}

/* Zahl (weiß, mit Plus) */
.stat-value{
  display: block;
  font-weight: 800;
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1.05;
  color: #fff;
  letter-spacing: .2px;
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.stat-value::after{
  content:"+";
  margin-left: 2px;
  font-weight: 800;
  opacity: .9;
}

/* Label (hell) */
.stat-label{
  margin-top: .35em;
  color: #e6eef2;
  color: #f0f4f6;
  text-shadow: 0 1px 3px rgba(0,0,0,.2);
  
  font-weight: 600;
  font-size: clamp(13px, 2.5vw, 16px);
  margin-bottom: 5px;
}

.fsd-stats .gb-grid-wrapper {
  align-items: stretch; /* sorgt für gleich hohe Grid-Items */
}
.stat-item {
  height: 100%; /* füllt die gesamte Grid-Zeilenhöhe */
}

@media (max-width:560px){
  .stat-item{ padding:16px; }
}


/* ===== HEROS ===== */

/* Scrollbar-sicheres Full-Bleed */
:root { --sbw: calc(100vw - 100%); }

/* Basis */
.fsd-hero{
  --hero-h: clamp(420px, 48vw, 560px);
  --hero-pad-x: clamp(24px, 4vw, 42px);
  --hero-pad-top: clamp(48px, 10vw, 160px);

  position: relative;
  isolation: isolate;
  margin: clamp(16px, 3vw, 28px) auto 0;
  max-width: min(1392px, 96vw);
  min-height: var(--hero-h);
  border-radius: 24px;
  overflow: hidden;

  background-color: #0b2f35;            /* Fallback */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  box-shadow: 0 18px 40px rgba(0,0,0,.16);
}

/* Innenabstände + Text */
.fsd-hero__inner{
  position: relative; z-index: 1;
  padding: var(--hero-pad-top) var(--hero-pad-x) clamp(22px, 5vw, 42px);
  color: #e8f2f4;
}
.fsd-hero h1{
  margin: 0 0 .35em; color:#fff; line-height:1.08;
/*  max-width: 830px; */
}
.fsd-hero p{
  margin: 0 0 1.1em; color:#d7e7ea; max-width:700px;
  font-size: clamp(1.05rem, 1.2vw + .6rem, 1.25rem);
}

/* Modifier */
.fsd-hero.is-3q{ --hero-h: clamp(520px, 75vh, 860px); }
.fsd-hero.is-fullheight{ --hero-h: 100vh; }
.fsd-hero.is-wide{
  width: calc(100vw - var(--sbw));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
  box-shadow: none;
}

/* Tönung/Verlauf */
.fsd-hero.has-tint::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(1,44,51,.65) 0px, rgba(1,44,51,0) 120px),
    linear-gradient(90deg,  rgba(1,44,51,.85) 0%,
                           rgba(1,44,51,.5) 50%,
                           rgba(1,44,51,0) 65%);
  transition: opacity .6s ease;
  opacity: 1;
}
.fsd-hero.has-tint:hover::before{ opacity: .85; }

/* Button-Optik beibehalten – bewusst auf Hero begrenzt */
.fsd-hero .wp-element-button{
  border-radius: 7px; font-weight: 700;
  border: 1px solid rgba(170,170,170,0);
  color:#fff;
}
.fsd-hero .wp-element-button:hover{
  background-color:#106476; color:#C0DEE3; border-color:#aaa;
}

/* Editor-spezifischer Feinschliff */
.editor-styles-wrapper .fsd-hero{ min-height: max(var(--hero-h), 360px); }


/* ===== HERO – Top-Variante ===== */

/* Hero bündig an den oberen Rand setzen */
.fsd-hero.is-top{
  margin-top: 0;
  position: relative;
  z-index: 0;
}

/* Wenn der Header fixiert ist → Hero leicht nach oben “ziehen” */
body:not(.admin-bar) .fsd-hero.is-top{
  margin-top: calc(var(--header-h, 57px) * -1);
}

/* Wenn WP-Adminbar vorhanden → zusätzlichen Offset vermeiden */
body.admin-bar .fsd-hero.is-top{
  margin-top: calc((var(--header-h, 57px) + var(--adminbar-h, 32px)) * -1);
}

/* Optional: leichter Schatten oben, damit der Header nicht “versinkt” */
.fsd-hero.is-top::after{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height: var(--header-h, 57px);
  background: linear-gradient(to bottom, rgba(0,0,0,.2), transparent);
  pointer-events:none;
  z-index:2;
}

/* =========================
   HERO – Frontend-Only Verhalten
   ========================= */

/* nur im Frontend den Hero an den oberen Rand „ziehen“ */
.is-frontend .fsd-hero.is-top{
  margin-top: calc(var(--header-h, 57px) * -1);
}
.is-frontend body.admin-bar .fsd-hero.is-top{
  margin-top: calc((var(--header-h, 57px) + var(--adminbar-h, 32px)) * -1);
}
.is-frontend .fsd-hero.is-top::after{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height: var(--header-h, 57px);
  background: linear-gradient(to bottom, rgba(0,0,0,.2), transparent);
  pointer-events:none; z-index:2;
}

/* full-bleed Breite nur im Frontend anwenden */
.is-frontend .fsd-hero.is-wide{
  width: calc(100vw - var(--sbw));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
  box-shadow: none;
}

/* =========================
   HERO – Editor Safety Net
   ========================= */

/* Im Editor niemals nach oben ziehen */
.editor-styles-wrapper .fsd-hero.is-top{
  margin-top: 0 !important;
}
.editor-styles-wrapper .fsd-hero.is-top::after{
  content: none !important;
}

/* Im Editor: volle Canvas-Breite, ohne Rundung/Shadow, aber ohne 100vw-Shift */
.editor-styles-wrapper .fsd-hero.is-wide{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}





/* =========================
   Textbox – Basis + Varianten
   ========================= */

/* Basis */
.textbox{
  /* Tokens (pro Instanz überschreibbar) */
  --tb-pad: clamp(18px, 2.4vw, 28px);
  --tb-radius: 16px;
  --tb-bg: transparent;
  --tb-border: 1px solid transparent;
  --tb-shadow: 0 2px 10px rgba(0,0,0,.06);

  position: relative;
  display: block;
/*  padding: var(--tb-pad); */
  border-radius: var(--tb-radius);
/*  background: var(--tb-bg); */
  border: var(--tb-border);
/*  box-shadow: var(--tb-shadow); */
}

/* Inhalt-Abstände harmonisieren */
.textbox :is(h1,h2,h3,h4,h5,h6){ margin-top: 0; }
.textbox > * + *{ margin-top: .8em; }

/* Variante: dauerhaft grau */
.textbox--grey{
  --tb-bg: #f1f3f4;              /* hellgrau */
  --tb-border: 1px solid #e3e6e8;
  --tb-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* Variante: nur beim Hover grau (Start: transparent) */
.textbox--hovergrey{
  --tb-border: 1px solid #e9ecef;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.textbox--hovergrey:hover{
/*  --tb-bg: #f6f7f8; */
  --tb-bg: #e0e0e0;  
  --tb-border: 1px solid #dfe3e6;
  --tb-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Optionale Zusätze */
.textbox--tight{ --tb-pad: clamp(14px, 1.8vw, 22px); }
.textbox--flat{ --tb-shadow: none; }

/* Buttons in Box leicht absetzen */
.textbox :is(.wp-block-button, .gb-button){ margin-top: .6em; }

/* =========================
   Buttons innerhalb von .textbox
   ========================= */

/* oberen Abstand entfernen */
.textbox > :is(.wp-block-button, .gb-button, a.btn){
  margin-top: 0 !important;
}

/* ansonsten normalen Abstand zwischen aufeinanderfolgenden Elementen */
/*
.textbox > :is(.wp-block-button, .gb-button, a.btn){
  margin-top: .8em;
}*/

/* =========================
   Textbox – Layoutvarianten (Breite)
   ========================= */

/* Standard: ca. 1200 px maximal */
.textbox{
  width: auto;                               /* wichtig für den Editor */
  max-width: min(1200px, 94vw);
  margin-inline: auto;
}
/* Editor: falls GB/Block Inline-Styles setzen, sicher überstimmen */
.editor-styles-wrapper .textbox{
  width: auto !important;                     /* bricht width:100% Inline */
  max-width: min(1200px, 94vw) !important;
  margin-inline: auto !important;
}

/* Variante: etwas breiter (z. B. für Produkttexte) */
.textbox--wide{
  max-width: min(1360px, 96vw);
}
.editor-styles-wrapper .textbox--wide{ max-width: min(1360px, 96vw) !important; }
/* Basisbreiten (lassen wie gehabt) */
/*
.textbox{ max-width: min(1200px, 94vw); margin-inline:auto; }
.textbox--wide{ max-width: min(1360px, 96vw); }
*/

/* ===== FULL (Viewport-Breite) ===== */
/* Frontend: wirklich bis an den Rand */
.is-frontend .textbox--full{
  width: calc(100vw - var(--sbw));
  max-width: none !important;           /* bricht WP/Theme-Klammern auf */
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
  box-shadow: none;
}

/* Editor: volle Canvas-Breite (nicht 100vw, sonst läuft es aus dem iFrame) */
.editor-styles-wrapper .textbox--full{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  transform: none !important;
  border-radius: 0 !important;      /* erzwingt eckig trotz Inline-Style */
  box-shadow: none !important;
}



/* ===========================================
   PRODUCT GRID – Frontend & Gutenberg Editor
   (ohne Wrapper-Scopes)
   =========================================== */

/* === TUNING (pro Bereich anpassbar) ====================== */
.products-grid{
  --overlay-bg: rgba(7,63,70,.85);       /* Hintergrunddunkel */
  --slide-distance: 28px;                /* Start-Versatz nach unten */
  --fade-duration: .60s;                 /* Dauer */
  --fade-ease: cubic-bezier(.2,.7,.2,1); /* Easing */
}

/* === Kachel-Basis ======================================= */
.products-grid .product-card{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

/* Dunkles Overlay */
.products-grid .product-card > .product-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--overlay-bg);
  opacity: 0;
  transition: opacity var(--fade-duration) ease;
  pointer-events: none; /* Klick geht zum stretched-link */
}

/* Nur der Text-Wrapper wird animiert */
.products-grid .product-card > .product-overlay > .overlay-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  transform: translate3d(0, var(--slide-distance), 0);
  opacity: 0;
  transition:
    transform var(--fade-duration) var(--fade-ease),
    opacity   var(--fade-duration) ease;
  will-change: transform, opacity;
}

/* Hover/Fokus: Film einblenden + Text hochfahren */
.products-grid .product-card:hover > .product-overlay,
.products-grid .product-card:focus-within > .product-overlay{
  opacity: 1;
}
products-grid .product-card:hover > .product-overlay > .overlay-content,
.products-grid .product-card:focus-within > .product-overlay > .overlay-content{
  transform: translate3d(0,0,0);
  opacity: 1;
}

/* Stretched Link bleibt flächig klickbar */
.products-grid .product-card .stretched-link{
  position: absolute; inset: 0; z-index: 5;
  background: transparent !important; border: 0 !important;
  color: transparent !important; text-indent: -9999px;
}

/* Weniger Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  .products-grid .product-card > .product-overlay > .overlay-content{
    transform: none !important; transition: opacity .2s ease;
  }
}

/* Titel in der Overlay-Variante leicht aufhellen */
.products-grid .product-card .overlay-content h2{
  text-shadow:
    0 0 3px rgba(255,255,255,0.1),
    0 0 5px rgba(255,255,255,0.1);
  color: #cacacc;
}

/* === Theme-Variante: Themenbild + dauerhaft sichtbare Bodencaption === */
.products-grid.theme-tiles{
  --tint: rgba(0,0,0,.45); /* Grundtönung übers Bild */
  --cap-bg: linear-gradient(
    to top,
    rgba(0,0,0,.6) 0%,
    rgba(0,0,0,.4) 80%,
    rgba(0,0,0,0) 100%
  );
  --cap-pad: clamp(14px, 2vw, 22px);
  --fade-ease: cubic-bezier(.2,.7,.2,1);
}

/* Kachel nutzt das (GB-)Inline-Hintergrundbild */
.products-grid.theme-tiles .product-card{
  background-position: center;
  background-size: cover;
  background-color: transparent !important; /* falls noch eine Fläche liegt */
}

/* Tönung über dem Bild */
.products-grid.theme-tiles .product-card::before{
  content:"";
  position: absolute; inset: 0;
  background: var(--tint);
  mix-blend-mode: multiply;
  opacity: .45;
  transition: opacity .35s var(--fade-ease);
  z-index: 0;
}
.products-grid.theme-tiles .product-card:hover::before,
.products-grid.theme-tiles .product-card:focus-within::before{
  opacity: .65;
}

/* Overlay als Grid -> Caption unten anheften */
.products-grid.theme-tiles .product-card > .product-overlay{
  display: grid !important;
  align-content: end;
  justify-content: stretch;
  background: none;
  opacity: 1 !important;   /* Basis (0) überstimmen */
  inset: 0;
  padding: 0;
  pointer-events: none;     /* Klick bleibt beim stretched-link */
  z-index: 1;               /* über der Tönung */
}

/* Bodencaption */
.products-grid.theme-tiles .product-card > .product-overlay > .overlay-content{
  display: block !important;   /* alte Zentrier-Flexregeln aushebeln */
  min-height: 0 !important;
  width: 100%;
  text-align: left;
  padding: var(--cap-pad);
  background: var(--cap-bg);
  transform: none !important;
  opacity: 1 !important;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Typo in der Caption */
.products-grid.theme-tiles .overlay-content h2{
  font-size: clamp(24px, 2vw, 36px);
  margin: 10px 0 3px;
  color: #fff;
  text-shadow: none;
}
.products-grid.theme-tiles .overlay-content p{
  font-size: clamp(13px, 1.2vw, 16px);
  margin: 0;
  color: #eaeaea;
}

/* Altes Kachelinneres ausblenden -> Themenbild sichtbar lassen */
.products-grid.theme-tiles .product-card > :not(.product-overlay):not(.stretched-link){
  opacity: 0 !important;
  pointer-events: none !important;
}
.product-card:hover .product-logo1 {
  --glow-intensity: 0.7; /* 0 = aus, 1 = stark */
  filter:
    /* Outline */
    drop-shadow(0 0 0 white)
    drop-shadow(1px 0 0 white)
    drop-shadow(-1px 0 0 white)
    drop-shadow(0 1px 0 white)
    drop-shadow(0 -1px 0 white)
    /* Glow mit Intensität */
    drop-shadow(0 0 6px rgba(255,255,255,calc(var(--glow-intensity) * 1)))
    drop-shadow(0 0 12px rgba(255,255,255,calc(var(--glow-intensity) * 0.7)))
    drop-shadow(0 0 20px rgba(255,255,255,calc(var(--glow-intensity) * 0.4)));
}
/* slight bewegung  */
.product-card .product-logo {
  transition: transform .35s ease, filter .35s ease !important;
}
.product-card:hover .product-logo {
  transform: translateY(-4px);
}


/* FEATURE SETS  */
.fsd-features{ font-size: 1rem; }          /* gleiche Eltern-Größe */
.entry-content .fsd-features p{
  margin-bottom: .75em;
  line-height: 1.4;
  font-size: 1.1em;                           /* jetzt überall identisch */
}

.fsd-features .dark h3, .fsd-features h3 {
/*  font-size: 1.4em; */
}
.fsd-features .dark p {
/*  font-size: 1rem; */
}

.feature-card.light { 
  background-color: var(--base-2);
}
.feature-card.light:hover {
  background-color: var(--base);
}

.feature-card.dark {
  background-color: #0c464d;
  color: #fff;
}
.feature-card.dark:hover {
  background-color: var(--accent);
}





/* =====================================================
   Editor-Fix: Bildgrößen bleiben stabil beim Anklicken
   ===================================================== */
.editor-styles-wrapper .gb-media.is-selected img,
.editor-styles-wrapper .gb-image.is-selected img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block;
}


.fsd-gallery-grid {
  position: relative;
}
/* Einzelne Kacheln */
.fsd-gallery__item {
  position: relative !important;      /* ← Bezug für ::after erzwingen */
  transition: transform .3s ease;
  overflow: hidden;
}
/* Bild selbst */
.fsd-gallery__item img {
  transition: transform .4s ease;
}
/* Overlay-Schicht */
.fsd-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0); /* Startzustand: unsichtbar */
  transition: background-color .35s ease;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

/* Hover-Effekt: Verdunklung + leichtes Zoom */
.fsd-gallery__item:hover::after {
/*  background: rgba(0,0,0,0.25); */ /* Dunkelheit nach Wunsch anpassen */
}

.fsd-gallery__item:hover img {
  transform: scale(1.03);
}

/* Weniger Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .fsd-gallery__item img { transition: none; }
  .fsd-gallery__item::after { transition: none; }
}






/* ===== 3er Kacheln (GenerateBlocks) ===== */
.fsd-tiles{ padding-block: clamp(40px, 6vw, 32px); }

.fsd-tiles .tile{
  --tile-radius: 24px;
  --tile-shadow: 0 10px 24px rgba(0,0,0,.08);
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
/*  border-radius: var(--tile-radius); */
  box-shadow: var(--tile-shadow);
  transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
  backdrop-filter: saturate(110%);
}
.fsd-tiles .tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
}

.fsd-tiles .tile-head{ display: flex; flex-direction: column; gap: .5rem; }
.fsd-tiles .tile h3{ margin: 0; line-height: 1.15; }
.fsd-tiles .tile p{ margin: 0 0 .5rem; }

/* Bild unten */
.fsd-tiles .tile-media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
/*  border-radius: 18px; */
}

/* Farbschemen (anpassbar an deine Palette) */
.fsd-tiles .tile.is-lime{ 
  background: #fbb040;                 /* helles Lime */
  color: #0f2530;
}
.fsd-tiles .tile.is-ink{
  background: #012c33;                 /* tiefes Navy */
  color: #eef3f5;
}
.fsd-tiles .tile.is-mint{
  background: #178496;                 /* mint / helles Petrol */
  color: #0f2530;
}

/* Links/Icons in dunkler Kachel */
.fsd-tiles .tile.is-ink a{ color:#cfeeee; }
.fsd-tiles .tile.is-ink a:hover{ color:#ffffff; }

/* Optional: Pfeil-Icon per CSS (kompatibel codiert) */
.fsd-tiles .arrow{
  --sz: 18px;
  inline-size: var(--sz);
  block-size: var(--sz);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 5l7 7-7 7v-4H4v-6h9V5z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 5l7 7-7 7v-4H4v-6h9V5z'/%3E%3C/svg%3E") no-repeat center / contain;
  background: currentColor;
  opacity: .8;
}
.fsd-tiles .tile a:hover .arrow{ opacity: 1; }

/* Responsives Feintuning */
@media (max-width: 1024px){
  .fsd-tiles .tile{ --tile-radius: 20px; }
  .fsd-tiles .tile-media img{ /*border-radius: 16px; */}
}
@media (max-width: 768px){
  .fsd-tiles{ padding-block: 32px; }
}

/* Einheitliche Abstände in den 3er-Kacheln */
.fsd-tiles .tile{ --tile-gap:16px; gap:var(--tile-gap); }

/* Standard-Margins von Gutenberg-Headlines/Paragraphs neutralisieren */
.fsd-tiles .tile h1,
.fsd-tiles .tile h2,
.fsd-tiles .tile h3,
.fsd-tiles .tile p{ margin:0; }

/* Abstand NUR vor dem Bild steuern */
.fsd-tiles .tile .tile-media{
  margin-top: var(--tile-gap);
  overflow:hidden;           /* saubere Rundung */
/*  border-radius:18px; */
}

/* Optional: Bilder unten bündig ausrichten – egal wie viel Text */
@media (min-width: 768px){
  .fsd-tiles .tile{ display:flex; flex-direction:column; }
  .fsd-tiles .tile .tile-media{ margin-top:auto; } /* statt var(--tile-gap) */
}
/* Bild in den Kacheln bündig – keine Extra-Ränder */
.fsd-tiles .tile .tile-media{ 
  padding:0 !important;
  margin-top: 0;
  overflow:hidden; 
/*  border-radius:18px; */
}

/* Falls GB einen inneren Wrapper setzt */
.fsd-tiles .tile .tile-media > .gb-inside-container{ padding:0 !important; }

/* WP-Image-Block (figure) entmargen */
.fsd-tiles .tile .tile-media figure,
.fsd-tiles .tile .tile-media .wp-block-image{ margin:0 !important; }

/* Bild selbst */
.fsd-tiles .tile .tile-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (min-width:768px){
  .fsd-tiles .tile{ display:flex; flex-direction:column; }
  .fsd-tiles .tile .tile-media{ margin-top:0; }
}

.fsd-tiles .tile .tile-media img {
  display: block;        /* ← verhindert Baseline-Abstand */
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle; /* optional – doppelt sicher */
}

.tile-image img { display:block; }


/* nur Kacheln mit has-arrow bekommen den Pfeil */
.fsd-tiles .tile.has-arrow .tile-head{
  position: relative;
  padding-right: 28px;
}
.fsd-tiles .tile.has-arrow .tile-head::after{
  content:"";
  position:absolute; right:30px; top:30px;
  inline-size:28px; block-size:28px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E") no-repeat center/contain;
  background: currentColor;
  opacity:.75; transition: transform .18s ease, opacity .18s ease;
}
.fsd-tiles .tile.has-arrow:hover .tile-head::after{
  transform: translate(3px,-3px); opacity:1;
}




/* === Duo Cards – konfliktfrei mit Prefix === */
.duo-cards .duo-card{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
}

.duo-cards .duo-card__img img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;     /* oder per GB */
  object-fit: cover;
  transition: transform .5s ease;
  font-size: 0.1%;
}

.duo-cards .duo-card__panel{
  background:#fff;
  border-radius:16px;
  box-shadow: var(--shadow);
  padding: clamp(18px, 2.6vw, 28px);
  margin-inline: auto;
  margin-top: -60px;        /* Überlappung */
/*  max-width: 66ch; */
  position: relative;
  z-index: 2;
}

.duo-cards .duo-card:hover .duo-card__img img{ transform: scale(1.03); }

.duo-cards .duo-card__panel h3{ margin: 0 0 .35em 0; }
.duo-cards .duo-card__panel p{ margin: 0; }

@media (max-width: 768px){
  .duo-cards .duo-card__panel{ margin-top: -40px; }
}

/* Optionales Hover-Lift */
.duo-cards .is-hover-lift{
  transition: transform .18s ease, box-shadow .25s ease;
}
.duo-cards .is-hover-lift:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.12);
}





/* ===== Reusable Hero ===== */
.fsd-hero{
  --hero-br: 24px;
  --hero-h: clamp(420px, 48vw, 560px);
  --hero-pad-inline: clamp(75px, 4vw, 42px);
  --hero-pad-top: clamp(54px, 8vw, 180px);
  --hero-max: min(1392px, 96vw);

  padding-inline: var(--hero-pad-inline);
  
  position: relative;
  margin: clamp(16px, 3vw, 28px) auto 0;
  max-width: var(--hero-max);
  min-height: var(--hero-h);
  border-radius: var(--hero-br);
  overflow: hidden;
/*  background: #0b2f35 center/cover no-repeat; */
  background-color: #0b2f35;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  isolation: isolate;
}

.fsd-hero.hero-wide{
  --hero-max: 97vw;
  max-width: var(--hero-max);
  width: 97%;
  margin-inline: auto;
}

@media (min-width: 1130px){
   /* nur Desktop, mobil normal lassen */
  .fsd-hero.hero-wide{
    --hero-pad-inline: clamp(100px, 8vw, 120px);
    padding-inline: var(--hero-pad-inline);
  }
}

/* =========================================
   Hero – Mobile Anpassung (temporär)
   ========================================= */
@media (max-width: 768px){
  .fsd-hero.hero-wide{
    --hero-max: 100%;
    max-width: var(--hero-max);
    width: 100%;
    margin-inline: auto;
    border-radius: 0;
  }
}

/* Bild per GB-Hintergrund = ok; für IMG-Fall: */
.fsd-hero img{ 
  display:block; width:100%; height:var(--hero-h); object-fit:cover; object-position:center;
}

/* weiche Abdunkelung ohne Risskante */
.fsd-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
/*
  background:
    radial-gradient(120% 90% at 20% 20%, rgba(7,63,70,.55), rgba(7,63,70,.80)),
    linear-gradient(90deg, rgba(7,63,70,.85) 0%, rgba(7,63,70,.55) 48%, rgba(7,63,70,.30) 72%, rgba(7,63,70,.25) 100%); */
}

/* Innenabstände + Textfarben */
.fsd-hero__inner{
  position: relative; z-index: 1;
  padding: var(--hero-pad-top) var(--hero-pad-inline) clamp(22px, 5vw, 42px);
  color: #e8f2f4;
}

/* Typo */
.fsd-hero h1{
  margin: 0 0 .35em 0;
  color:#fff;
/*  max-width: 830px; */
  line-height: 1.08;
}
.fsd-hero h1 em{ font-style: italic; }
.fsd-hero h1 strong{ font-weight: 700; }
.fsd-hero p{
  max-width: 700px;
  font-size: clamp(1.05rem, 1.2vw + .6rem, 1.25rem);
  line-height: 1.6;
  margin: 0 0 1.1em 0;
  color: #d7e7ea;
}

/* Button (nutzt WP/GP Button-Block) */
.fsd-hero .wp-element-button{
  border-radius: 7px;
  font-weight: 700;
  border: 1px solid rgba(170,170,170,0);
  color: #fff;
}
.fsd-hero .wp-element-button:hover{
  background-color:#106476;
  color:#C0DEE3;
  border-color:#aaa;
}

/* optional: leichte Parallaxe beim Scrollen (ohne Jank) */
@media (prefers-reduced-motion: no-preference){
  .fsd-hero{ will-change: filter; contain: paint; }
}

/* Hebt ALLE direkten Kinder über das Overlay */
.fsd-hero > *{ 
  position: relative; 
  z-index: 1; 
}

/* Blend-Variante einschalten */
.fsd-hero.hero--blend{
  background-blend-mode: multiply; /* oder overlay/soft-light – siehe unten */
}


/* Hero-Tint (liegt über dem GB-Hintergrundbild) */
.fsd-hero.hero--tint::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(0deg, rgba(2,44,51,0.5), rgba(2,44,51,0.5));
   opacity: 1;                     /* NEU */
  transition: opacity .6s ease;   /* NEU (nicht auf :hover setzen) */
}

/* Hover: Tint schwächer durch geringere Deckkraft */
.fsd-hero.hero--tint:hover::before{
  opacity: .5;                    /* NEU – Wert nach Geschmack (z.B. .5/.4) */
}

/* Hero-Inhalt sichtbar über dem Overlay */
.fsd-hero > *{
  position: relative;
  z-index: 1;
}

.fsd-hero h1 { font-weight: normal; }



/* ===============================
   Testimonials – kompakt & clean
   =============================== */
.testimonials{
  /* Farben & Maße */
  --petrol:#007c89;
  --green:#2f8f2f;
  --ink:#0f2530;
  --muted:#5a6b74;
  --card-bg:#fff;
  --card-br:14px;
  --card-pad:18px;                 /* ↓ kompakter */
  --gap: clamp(14px, 2.4vw, 24px); /* ↓ geringere Abstände */
  --shadow: 0 8px 22px rgba(0,0,0,.06);
  --shadow-hover: 0 14px 28px rgba(0,0,0,.08);

/*  max-width:1200px; */
  margin:0 auto;
  background:#f4f8f9;
  border-radius:16px;

  padding-inline: clamp(28px, 6vw, 60px); /* nur L/R */
  padding-block: clamp(23px, 3vw, 34px);  /* nur oben/unten */
  
/*  padding: clamp(16px, 3.5vw, 28px); */ /* ↓ kompakter */
  overflow:hidden;
}

/* Grid */
.testimonials-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:900px){ .testimonials-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .testimonials-grid{ grid-template-columns:1fr; } }
.testimonials-grid > *{ min-width:0; } /* Text-Überlauf verhindern */

/* Card */
.testimonial-card{
  display:flex; flex-direction:column;
  background:var(--card-bg);
  border:1px solid rgba(0,0,0,.05);
  border-left:3px solid color-mix(in srgb, var(--petrol) 35%, transparent);
  border-radius:var(--card-br);
  padding:var(--card-pad);
  box-shadow:var(--shadow);
  position:relative; isolation:isolate; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Corner-Glow dezenter */
.testimonial-card::after{
  content:""; position:absolute; inset:auto -18px -18px auto;
  width:120px; height:120px;
  background:radial-gradient(120px 120px at 100% 100%,
             rgba(0,124,137,.12), transparent 70%);
  pointer-events:none; z-index:-1;
}
.testimonial-card.is-green{ border-left-color: color-mix(in srgb, var(--green) 45%, transparent); }
.testimonial-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:rgba(0,0,0,.07); }

/* Header (Avatar + Name + Rolle/Firma) */
.t-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } /* ↓ enger */
.t-head .avatar{
  width:82px; height:82px; flex:0 0 82px;       /* ↑ etwas größer */
  border-radius:50%; overflow:hidden;
  background:#eef4f6; border:3px solid color-mix(in srgb, var(--petrol) 12%, #fff);
}
.t-head .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.t-head .name{
  font:700 1.2rem 'Rubik', sans-serif;  /* größer & fett */
  font:700 1.2rem 'Gantari', sans-serif;  /* größer & fett */ 
  color:var(--ink);
  margin:0 0 3px;
}
.role, p.role-title, p.role-company{
  font-size:0.85rem;
  line-height:1.8;
  margin: 0;
}

.role-title{ color:#37515b; font-weight:500; }
.role-company, .role .role-company{ color:#7e96a1; }

/* Zitat */
.t-quote{
  position:relative;
  color:var(--ink);
  font-size:1rem;                  /* ↓ minimal kleiner */
  line-height:1.55;                /* ↓ enger */
  margin:8px 0 6px;
  padding-left:1.2em;              /* Einzug für Quote-Mark */
}
.t-quote::before{
  content:"“";
  position:absolute; left:0; top:.06em;
  font:700 2.2rem/1 Georgia,serif; /* ↓ kleiner = weniger dominant */
  color:rgba(0,124,137,.18);
}

/* Footer / Quelle */
.t-foot{
  margin-top:auto;
  display:flex; align-items:center; gap:8px;     /* ↓ enger */
  color:var(--muted); font-size:.93rem;
}
.t-foot a{ color:var(--petrol); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.t-foot a:hover{ color:var(--green); border-bottom-color:currentColor; }

/* Reveal-Stagger (3 Karten) */
.stagger-grid > *:nth-child(1){ --delay:0ms; }
.stagger-grid > *:nth-child(2){ --delay:120ms; }
.stagger-grid > *:nth-child(3){ --delay:240ms; }
.reveal-up{ transition-delay:var(--delay,0ms); }

/* Feines Rendering & A11y */
.testimonial-card, .t-quote{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.t-quote{ hyphens:auto; overflow-wrap:anywhere; }
@media (prefers-reduced-motion:reduce){
  .testimonial-card{ transition:none; transform:none; }
  .reveal-up{ transition:none; }
}
.entry-content .testimonial-card p.role-title,
.entry-content .testimonial-card p.role-company {
  font-size: 0.8em;  
}
.entry-content .testimonial-card h2.wp-block-heading.name {
  font-size: 1.1em;
}



/* ==============================
   Testimonials v2 – sauberes Zitat
   ============================== */

.fsd-t2{
  --bg:#f4f8f9;
  --ink:#0f2530;
  --muted:#5a6b74;
  --radius:14px;
  --shadow:0 8px 22px rgba(0,0,0,.06);
  --gap:clamp(16px,3vw,32px);

  background:var(--bg);
  padding-block:clamp(20px,3vw,42px);
  padding-inline:clamp(20px,5vw,40px);
  border-radius:var(--radius);
}

/* Grid */
.fsd-t2-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:960px){ .fsd-t2-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .fsd-t2-grid{ grid-template-columns:1fr; } }

/* Card */
.fsd-t2-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
/*  padding:clamp(20px,3vw,32px); */
  text-align:left;
/*  border-right: 3px solid color-mix(in srgb, var(--petrol) 35%, transparent); */
}
.fsd-t2-card:hover{
/*  border-right: 3px solid color-mix(in srgb, var(--petrol) 15%, transparent); */
}

/* Logo unten abschließend */
.fsd-t2-card .t2-logo{
  align-items:center;
/*  height:var(--logo-h,50px); */
  margin-top:auto;               /* drückt Logo nach unten */
  
/*
  padding-top:20px;
  border-top: 1px dotted #ccc;
  margin-left: -30px;
  margin-right: -30px;
  padding-left: 30px;
  padding-right: 30px; */
}
.fsd-t2-card .t2-logo img{
  display:block;
/*  max-width:180px; */
  width:auto;
  object-fit:contain;
}
@media (max-width:640px){
  .fsd-t2-card .t2-logo img { height:50px; }
}

/* Zitat – kein Dekozeichen, aber leichte Betonung */
.fsd-t2-card .t2-quote{
  color:#666;
  font-size:1.02rem;
  line-height:1.6;
  margin:16px 10px 12px;
  padding-left:.1em;
/*  border-left:3px solid rgba(15,37,48,.08); */
  padding-inline-start:0.8em;
}
.fsd-t2-card .t2-meta-company {
  padding-bottom: 15px;
}

/* Name + Meta */
.fsd-t2-card .t2-name{
  font-weight:700;
  font-size:1rem;
  margin:0.25em 0 0.15em;
  margin-left: 10px;
  padding-left: 0.9em;
}
.fsd-t2-card .t2-meta-title{
  font-size:.9rem;
  font-weight:400;
  color:var(--muted);
  margin:0;
  margin:0.25em 0 0.15em;
  margin-left: 10px;
  padding-left: 0.9em;
}
.fsd-t2-card .t2-meta-company{
  font-size:.95rem;
  font-weight:700;
  color:#38728f;
  margin:.1em 0 0;

  margin-left: 10px;
  padding-left: 0.9em;
}
/* Grafisches Zitat-Icon oben links */
.fsd-t2-card .t2-quote{
  position: relative;
  margin-top: 28px;              /* Platz für Icon */
}

/* Das Icon selbst */
.fsd-t2-card .t2-quote::before{
  content: "❞";                   /* elegantes Unicode-Quote */
  position: absolute;
  left: -17px;
  top: -26px;                     /* Icon leicht über dem Text */
  font-size: 42px;
  color: rgba(15,37,48,.18);      /* sehr dezent */
  pointer-events: none;
}

/* Editor-Fix */
.editor-styles-wrapper .fsd-t2-card p{
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left !important;
}



/* =========================================================
   TEAM-CARDS – Flow Science Deutschland
   ========================================================= */

:root{
  --team-ov-height: 64%;                 /* wie hoch der Verlauf hochzieht */
  --team-ov-dark:  rgba(15,37,48,.78);   /* dunkler unten */
  --team-ov-mid:   rgba(15,37,48,.46);   /* weicher Übergang */
}

/* === GRID === */
.team-grid{
  align-items: stretch;
  gap: 28px;
}
@media (max-width: 768px){
  .team-grid{ gap: 18px; }
}

/* === CARD BASIS === */
.team-card{
  position: relative;
/*  border-radius: 16px; */
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  isolation: isolate;
  line-height: 0;                  /* entfernt Inline-Gap bei IMG */
  background: transparent;
  transition: transform .18s ease, box-shadow .25s ease;
}
.team-card:hover{ 
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.16);
}

/* === BILD === */
.team-card img.team-card__img{
  display: block;
  width: 100%;
  height: auto;                    /* oder: height:100% bei fixem Wrapper */
  object-fit: cover;
  vertical-align: middle;
/*  aspect-ratio: 4 / 5; */
  transition: transform .5s ease;
}
.team-card:hover img.team-card__img{
  transform: scale(1.04);
}

/* === OVERLAY (Verlauf unten) === */
.team-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height: var(--team-ov-height);
  background: linear-gradient(
    to top,
    var(--team-ov-dark) 0%,
    var(--team-ov-mid) 38%,
    rgba(15,37,48,0) 75%
  );
  z-index: 1;
  pointer-events:none;
}

/* === CONTENT (Textblock über dem Bild) === */
.team-card__content{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 22px 15px;        /* oben leicht erhöht, unten etwas weniger */
  z-index: 2;
  color: #fff;
}
.team-card__title{
/*  margin: 0 0 10px 0; */
  color:#fff;
/*  font: 800 clamp(18px, 3vw, 28px)/1.1 'Rubik',system-ui,sans-serif; */
  letter-spacing: .5px;
  text-transform: uppercase;
}
.team-card__text{
  margin: 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.55;
  opacity: .95;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
/* Produkte in den Team-Cards kleiner darstellen */
.team-card__text.product {
  font-size: 0.85em;             /* etwas kleiner */
  line-height: 1.25;             /* kompakter */
  opacity: 0.9;                  /* leicht dezenter */
  font-weight: 400;              /* weniger "bold", falls nötig */
}

/* === FOCUS / ACCESSIBILITY === */
.team-card:focus-within{
  outline: 3px solid color-mix(in srgb, var(--petrol), white 25%);
  outline-offset: 2px;
}
.team-grid img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translateZ(0); /* erzwingt GPU-Schärferendering */
}

/*
.editor-styles-wrapper .team-card__img {
  position: relative;
  z-index: 0;
}
*/




/* ========== Events-Teaser via Shortcode ========== */

/* Grid-Layout wie bisher .gb-looper-3114f1dc */
.fsd-events-loop .fsd-events-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
  column-gap: 32px;
  row-gap: 32px;
}

/* Karte wie bisher .gb-loop-item-3dc51005 */
.fsd-events-loop .fsd-event-card{
  background-color: var(--base-3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border-radius: 16px;
  padding: 0;
}

/* Bild-Container wie .blog-card-image + .gb-element-023bb5b2 */
.fsd-events-loop .fsd-event-card-image{
  overflow: hidden;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  aspect-ratio: 1 / 1;
}

/* Bild selbst wie .blog-card-image img + .gb-media-8cf44f90 */
.fsd-events-loop .fsd-event-card-media{
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s ease;
  transform: scale(1);
  transform-origin: center center;
}

/* Inhalt wie .gb-element-2021e571 */
.fsd-events-loop .fsd-event-card-body{
  padding: 16px 20px 20px 20px;
}

/* Titel wie .gb-text-30356521 */
.fsd-events-loop .fsd-event-title{
  font-family: var(--font-ui);
  font-size: 23px;
  margin-bottom: 5px;
}

.fsd-events-loop .fsd-event-title a{
  text-decoration: none;
  text-transform: none;
}

/* Datum wie .gb-text-139c856a */
.fsd-events-loop .fsd-event-date{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Optional: Fallback-Karten leicht absetzen */
.fsd-events-loop .fsd-event-fallback{
  opacity: 0.95;
}
/* Container selber mittig */
.fsd-events-loop{
  max-width: 1350px;          /* oder was dein Layout vorsieht */
  margin-inline: auto;
}

/* Grid-Inhalt horizontal zentrieren */
.fsd-events-loop .fsd-events-grid{
  justify-content: center;
}


.veranstaltung-card-inner{
  display:block;
  text-decoration:none;
  color:inherit;
}

.veranstaltung-card.is-static .veranstaltung-card-inner{
  cursor: default;
}




.fsd-arrowlist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fsd-arrowlist li {
  padding-left: 38px;
  position: relative;
  margin-bottom: 13px;
}

.fsd-arrowlist li::marker {
  content: "";
}
  
.fsd-arrowlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/uploads/circle-right-regular-full-petrol.svg");
}




.block-editor-block-list__layout .block-editor-block-list__block p.img-caption,
.entry-content p.img-caption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.75);
  padding: 4px 8px;
  font-size: 0.8rem;
  line-height: 12px;
  border-radius: 3px;
  margin-bottom: 0;
}

p.nodisplay {
  display: none;
}


@media (max-width: 768px) {
  body, h2, h3 {
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: normal;
  }
}