/* 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: Cinzel, Roboto, Arial, sans-serif;
}

/* Footer */
:is(.editor-styles-wrapper, .is-frontend) .site-footer a,
:is(.editor-styles-wrapper, .is-frontend) .footer-navigation a {
  font-family: Lato, Roboto, Arial, 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)
   Gilt in beiden Kontexten über den gemeinsamen Wrapper:
   :where(.editor-styles-wrapper, .is-frontend)
   ========================= */

/* Vars lokal für beide Kontexte setzen (statt :root) */
:where(.editor-styles-wrapper, .is-frontend){
  --btn-radius: 999px;
}

/* Basisform – funktioniert am Container (.wp-block-button.btn)
   und direkt am Link (a.btn) */
:where(.editor-styles-wrapper, .is-frontend)
  :is(.wp-block-button.btn .wp-block-button__link,
      .wp-block-button .wp-block-button__link.btn,
      a.btn){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:600 1rem/1 inherit;
  text-decoration:none;
  cursor:pointer;
  border-radius:var(--btn-radius);
  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);
}

/* PRIMARY (gefüllt in Akzent) */
:where(.editor-styles-wrapper, .is-frontend)
  :is(.wp-block-button.btn--primary .wp-block-button__link,
      .wp-block-button .wp-block-button__link.btn--primary,
      a.btn--primary){
  background-color:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
:where(.editor-styles-wrapper, .is-frontend)
  :is(.wp-block-button.btn--primary .wp-block-button__link:hover,
      .wp-block-button .wp-block-button__link.btn--primary:hover,
      a.btn--primary:hover){
  background-color:#fff;
  color:var(--accent);
}

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

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

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

/* Mobil kompakter */
@media (max-width:600px){
  :where(.editor-styles-wrapper, .is-frontend)
    :is(.wp-block-button.btn .wp-block-button__link,
        .wp-block-button .wp-block-button__link.btn,
        a.btn){
    font-size:.95rem;
    padding:.7em 1.4em;
  }
}




/* ===== 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;
}

@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;
}




/* FEATURE SETS  */
.fsd-features p {
  margin-bottom: 0.75em;
  line-height: 1.4;
  font-size: 1.1rem;
}

.fsd-features .dark h3 {
  font-size: 1.2em;
}
.fsd-features .dark p {
  font-size: 1em;
}

.feature-card { 
  background-color: var(--base-2);
}
.feature-card: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);
  }
}

/* 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; }




/*
@media (min-width: 769px) {
    .quote {
        background-attachment: fixed;
    }
}
@media (max-width: 768px) {
    .quote {
        background-attachment: scroll !important;
    }
}
*/




.quote h2 {
  font-size: 42px;
}
.quote p {  
  font-size: 28px;
}
@media (max-width: 768px) {
  .quote h2 {
    font-size: 28px;
  }
  .quote p {  
    font-size: 18px;
  }
}

@media (max-width: 768px) {

    .quote {
        position: relative;
        clip-path: inset(0);
        isolation: isolate;

        /* natives fixed auf Mobile abschalten */
        background-attachment: scroll !important;
    }

    /* Kopie des Hintergrundbildes als ECHTE feste Ebene */
    .quote::before {
        content: "";
        position: fixed;

        top: top: calc(100dvh - 100lvh); /*0;*/
        left: 0;
        width: 100vw;
        height: 100lvh;

        background-image: inherit;
        background-position: inherit;
        background-size: cover;
        background-repeat: no-repeat;

        pointer-events: none;
        z-index: 0;
    }

    /* Zitat/Text darüber */
    .quote > * {
        position: relative;
        z-index: 1;
    }
}

/*
@media (max-width: 768px) {

    #sticky-placeholder {
        margin-top: 0 !important;
    }

    #sticky-placeholder .navigation-branding,
    #sticky-placeholder .site-logo {
        display: none !important;
    }

}
*/

@media (max-width: 768px) {

    /* Erstes Zitat mobil genauso behandeln wie die anderen */
    #zitat1::before {
        content: none !important;
        display: none !important;
    }

    #zitat1 {
        background-image: var(--inline-bg-image) !important;
        background-attachment: scroll !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
}