/* ============================================================
   Future Leadership Lab — Landing CSS
   Brand Guide: Corporate Design 08.06.2026 (Carolin Rauen)
   ============================================================ */

/* ---------- Brand-Font: Loretta (Headlines) ---------- */
@font-face {
  font-family: 'Loretta';
  src: url('fonts/loretta.woff2') format('woff2'),
       url('fonts/loretta.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset / kill theme interference ---------- */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }

body > .wp-site-blocks,
body > main,
body > div,
body > div > div {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Kill TT4 block-gap (1.2rem default zwischen blocks) + Page Title ---------- */
body.fll-front {
  --wp--style--block-gap: 0 !important;
  --wp--style--root--padding-top: 0 !important;
  --wp--style--root--padding-bottom: 0 !important;
  --wp--style--root--padding-left: 0 !important;
  --wp--style--root--padding-right: 0 !important;
}
body.fll-front main,
body.fll-front .wp-site-blocks,
body.fll-front .wp-block-post-content,
body.fll-front .entry-content,
body.fll-front .fll-page {
  --wp--style--block-gap: 0 !important;
  row-gap: 0 !important;
  gap: 0 !important;
}
body.fll-front main > *,
body.fll-front .wp-site-blocks > *,
body.fll-front .wp-block-post-content > *,
body.fll-front .entry-content > *,
body.fll-front .fll-page > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* TT4 Page-Title-Wrapper im main (das 141px Geist-Element) verstecken */
body.fll-front main > .wp-block-group:first-child:not(.fll-page),
body.fll-front main > .wp-block-template-part,
body.fll-front .wp-block-post-title,
body.fll-front .wp-block-post-featured-image { display: none !important; }
/* Image-Figures: keine Margins */
.fll-page .wp-block-image,
.fll-page figure.wp-block-image,
.fll-page figure { margin: 0 !important; padding: 0 !important; }

/* TT4 / Gutenberg layout constraints töten — Page muss full-width sein */
.fll-page,
.fll-page.wp-block-group,
.wp-block-post-content,
.wp-block-post-content.has-global-padding {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Gutenberg's alignfull-Sections sollen voll bleiben, aber NICHT die Container drin */
.fll-page > .alignfull { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; }
/* WP Image alignfull: figure flushen */
.fll-page .wp-block-image.alignfull { margin: 0 !important; max-width: 100% !important; }
.fll-page .wp-block-image.alignfull img { width: 100% !important; max-width: 100% !important; }
/* Standard-Padding der Sections kommt vom .hero/.orientierung/etc. — Inner container braucht .container für die 1240px-Breite */
.fll-page > .wp-block-group {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
.fll-page > .wp-block-group > * {
  max-width: var(--content-max);
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Image full-width darf NICHT mittig wegen max-width */
.fll-page > .wp-block-image.alignfull,
.fll-page > .hero-image-wrap {
  padding: 0 !important;
}
.fll-page > .wp-block-image.alignfull img,
.fll-page > .hero-image-wrap img {
  max-width: 100% !important;
  margin: 0 !important;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; }

/* ---------- Design Tokens (Brand Guide) ---------- */
:root {
  /* Primärfarben */
  --c-blue:       #718FB8;   /* Primärblau */
  --c-yellow:     #F8F8B7;   /* Primärgelb */
  --c-light-gray: #E3E1E0;   /* Primär Hellgrau */
  --c-white:      #FFFFFF;
  --c-black:      #000000;

  /* Sekundärfarben */
  --c-violet-gray: #AAA4B1;
  --c-beige:       #D5CDC6;
  --c-taupe:       #6E6362;
  --c-green-gray:  #A4A9AC;
  --c-blue-gray:   #C1C8D4;

  /* Tones */
  --c-blue-dark:   #5A7AA3;  /* hover/active */
  --c-text:        #1a1a1a;

  /* Layout — schmaler Container, damit sich der Text nicht "verläuft".
     Logo im Header und alle Content-Elemente teilen denselben linken/rechten Anker. */
  --content-max: 980px;
  --content-wide: 1240px;  /* für full-bleed elements */
  --gutter: 36px;

  /* Typography (laut Brand Guide):
     Headlines = Loretta (lokal via @font-face, Regular),
     Fließtexte = Geist (Google Fonts, Regular) */
  --ff-serif: 'Loretta', Georgia, 'Times New Roman', serif;
  --ff-sans:  'Geist', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
}

body {
  font-family: var(--ff-sans);
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.6;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Gutenberg-Layout: content-size ans neue schmaleres Layout anpassen */
body.fll-front {
  --wp--style--global--content-size: 980px;
  --wp--style--global--wide-size: 1240px;
}

/* Direct-Child-Constraint aller Sections auf 980px zwingen
   (überschreibt Gutenberg's inline contentSize:"1240px" pro Block).
   .alignfull/.alignwide/.hero-image-wrap bleiben edge-to-edge. */
body.fll-front .hero > *:not(.alignfull):not(.alignwide),
body.fll-front .orientierung > *:not(.alignfull):not(.alignwide),
body.fll-front .angebot > *:not(.alignfull):not(.alignwide),
body.fll-front .ueber-uns > *:not(.alignfull):not(.alignwide),
body.fll-front .kontakt > *:not(.alignfull):not(.alignwide),
body.fll-front .mc-cards-list > *:not(.alignfull):not(.alignwide),
body.fll-front .mc-aufbau > *:not(.alignfull):not(.alignwide),
body.fll-front .fll-legal > *:not(.alignfull):not(.alignwide),
body.fll-front .site-footer > *:not(.alignfull):not(.alignwide),
body.fll-front .site-header .nav-wrap {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

/* ---------- Typography ---------- */
h1, h2, h3 {
  font-family: var(--ff-serif);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--c-text);
  margin: 0 0 1.4rem;
}
h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  line-height: 1.15;
  font-weight: 500;
}
h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  font-weight: 500;
}
h3 {
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 500;
}
p {
  margin: 0 0 1.1rem;
  /* Kein max-width mehr — Text nutzt volle Container-Breite (980px).
     Container ist schmal genug für gute Lesbarkeit. */
}
.lead {
  font-size: 1.08rem;
  line-height: 1.65;
}
.muted { color: #555; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.9rem;
  border: none;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.05s ease;
  font-family: var(--ff-sans);
  text-decoration: none !important;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.btn:active { transform: translateY(1px); }

/* Primary: blau / weiß → hover: gelb / blau */
.btn-primary {
  background: var(--c-blue) !important;
  color: var(--c-white) !important;
}
.btn-primary:hover {
  background: var(--c-yellow) !important;
  color: var(--c-blue) !important;
}

/* Card button: weiß / blau → hover: blau dunkler / weiß */
.btn-card {
  background: var(--c-white) !important;
  color: var(--c-blue) !important;
  font-weight: 600;
  padding: 10px 24px;
  font-size: 0.9rem;
}
.btn-card:hover {
  background: var(--c-blue-dark) !important;
  color: var(--c-white) !important;
}

/* Gutenberg-Button-Wrapper: schmaler + mehr Abstand zum Text drüber */
.fll-page .wp-block-buttons {
  margin-top: 36px !important;
}
/* WICHTIG: Outer wrapper (.wp-block-button) komplett resetten,
   damit nicht "doppelter Button" entsteht. Nur der innere Link ist der Button. */
.fll-page .wp-block-button.btn,
.fll-page .wp-block-button.btn-primary {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  display: inline-block !important;
}
.fll-page .wp-block-button.btn:hover,
.fll-page .wp-block-button.btn-primary:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}
/* Der eigentliche Button = innerer <a>-Link */
.fll-page .wp-block-button.btn-primary .wp-block-button__link,
.fll-page .wp-block-button.btn .wp-block-button__link {
  background-color: var(--c-blue) !important;
  color: var(--c-white) !important;
  padding: 10px 24px !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  font-family: var(--ff-sans) !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.fll-page .wp-block-button.btn-primary .wp-block-button__link:hover,
.fll-page .wp-block-button.btn .wp-block-button__link:hover {
  background-color: var(--c-yellow) !important;
  color: var(--c-blue) !important;
}

/* ---------- Header (Banner Blau, full-width) ---------- */
/* Legacy HTML-Block Support + neuer Gutenberg-Header */
header.site-header:not(.wp-block-group) {
  background: var(--c-blue) !important;
  padding: 28px 0;
  width: 100vw;
  position: relative;
  margin-left: calc(-50vw + 50%);
  left: 0;
}
/* Gutenberg-Header: Columns vertikal zentrieren, Logo links, Nav rechts */
.site-header .wp-block-columns.nav-wrap,
.site-header .wp-block-columns {
  align-items: center !important;
  gap: 24px !important;
  margin: 0 !important;
}
.site-header .wp-block-column {
  margin: 0 !important;
  padding: 0 !important;
  flex-basis: auto;
  min-width: 0;
}
/* Logo weiter nach links: rechter Rand des Logos endet an der Content-Text-Linie
   (auf großen Screens weiter raus, auf kleinen kompakter) */
.site-header .header-logo {
  margin: 0 0 0 clamp(-200px, -13vw, -80px) !important;
}
.site-header .header-logo img {
  display: block;
  height: auto;
  max-width: 100%;
}
/* Nav-Links im neuen Header — größere Gaps zwischen Menü-Punkten */
.site-header .main-nav-links,
.site-header .main-nav-links.has-text-align-right {
  margin: 0 !important;
  font-size: 1rem;
  max-width: none !important;
  color: var(--c-white);
  letter-spacing: 0.01em;
}
.site-header .main-nav-links a {
  color: var(--c-white) !important;
  text-decoration: none;
  opacity: 0.95;
  transition: opacity 0.15s ease;
  padding: 4px 0;
  display: inline-block;
}
.site-header .main-nav-links a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Hero-Cover Overlay: Text-Feld auf dem Foto
   aspect-ratio statt min-height → skaliert korrekt beim Browser-Zoom */
.hero-image-wrap.wp-block-cover {
  align-items: center !important;         /* vertikal mittig */
  justify-content: flex-start !important; /* horizontal LINKS */
  width: 100% !important;
  max-width: 100vw !important;
  max-height: none;
}
/* min-height nur setzen falls User keine gesetzt hat (via style attr) */
.hero-image-wrap.wp-block-cover:not([style*="min-height"]) {
  aspect-ratio: 5 / 3;
  min-height: 480px;
}
.hero-image-wrap.wp-block-cover .wp-block-cover__inner-container {
  /* Zurück auf die vorherige, bewährte Position */
  padding-top: 40px !important;
  padding-right: max(24px, calc((100vw - 980px) / 2)) !important;
  padding-bottom: 40px !important;
  padding-left: max(24px, calc((100vw - 980px) / 2)) !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Falls User im Editor Columns nutzt: die auch links + volle Breite lassen */
.hero-image-wrap.wp-block-cover .wp-block-columns,
.hero-image-wrap.wp-block-cover .wp-block-column {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
.hero-image-wrap.wp-block-cover .wp-block-column {
  flex-basis: 100% !important;
}
/* Alle Textelemente linksbündig, weiß, kein max-width restriction, leichter Schatten */
.hero-image-wrap.wp-block-cover h1,
.hero-image-wrap.wp-block-cover h2,
.hero-image-wrap.wp-block-cover p {
  text-align: left !important;
  max-width: none !important;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
/* Cover H1 – Zitat in Loretta (Serif), etwas größer aber unter Headline-Größe */
.hero-image-wrap.wp-block-cover h1,
.hero-image-wrap.wp-block-cover h1.has-xx-large-font-size,
.hero-image-wrap.wp-block-cover h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.7rem) !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  font-family: 'Loretta', var(--ff-serif) !important;
  letter-spacing: 0 !important;
  max-width: min(52ch, 680px) !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  margin: 0 !important;
}
/* Blockquote-P (Namen) auch in Loretta */
.hero-image-wrap.wp-block-cover blockquote p {
  font-family: 'Loretta', var(--ff-serif) !important;
}
/* Blockquote im Cover: kein linker Rand, kein Extra-Padding */
.hero-image-wrap.wp-block-cover blockquote.wp-block-quote {
  border: none !important;
  padding: 0 !important;
  margin: 14px 0 0 !important;
  font-style: normal !important;
}
.hero-image-wrap.wp-block-cover blockquote p {
  font-size: clamp(0.78rem, 1.2vw, 0.9rem) !important;
  line-height: 1.5 !important;
  opacity: 0.92;
  letter-spacing: 0.015em;
  font-family: var(--ff-sans) !important;
  font-weight: 400 !important;
}
.hero-overlay-tagline {
  font-family: var(--ff-sans) !important;
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  margin: 0 0 1.2rem !important;
  max-width: none !important;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.15);
}
.hero-overlay-names {
  font-family: var(--ff-sans) !important;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem) !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  margin: 0 !important;
  max-width: none !important;
  opacity: 0.94;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.2);
}

/* Kontaktformular — Pflichtfeld-Markierungen */
.contact-form label { position: relative; }
.contact-form .fll-required {
  color: var(--c-blue);
  font-weight: 600;
  margin-left: 2px;
}
.contact-form .fll-form-required-hint {
  font-size: 0.86rem !important;
  color: #666 !important;
  margin: -8px 0 8px !important;
  max-width: none !important;
}
.contact-form .fll-form-required-hint {
  color: #666 !important;    /* dezent grau statt blau */
  font-weight: 400 !important;
}
.contact-form .fll-form-required-hint .fll-required {
  margin-left: 0;
}
/* Alte nav-wrap Klasse (für Legacy HTML) */
.nav-wrap:not(.wp-block-columns) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Logo: echtes PNG-Logo (Bildmarke + Wortmarke kombiniert) */
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--c-white) !important;
  text-decoration: none;
}
.logo img {
  height: 64px;
  width: auto;
  display: block;
  max-width: 100%;
}
/* Legacy-Klassen für alte SVG-Variante (nicht mehr genutzt aber sichtbar abschalten) */
.logo-mark { display: none; }
.logo-words { display: none; }

.main-nav {
  display: flex;
  gap: 38px;
  flex-wrap: wrap;
}
.main-nav a {
  color: var(--c-white) !important;
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.95;
  transition: opacity 0.15s ease;
}
.main-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Hero ---------- */
.hero {
  background: var(--c-white);
  padding: 100px 0 80px;
}
.hero h1 { margin-top: 0; max-width: 900px; }
.hero .lead { font-weight: 500; font-size: 1.15rem; margin-bottom: 1.6rem; }
.hero .btn { margin-top: 18px; }

/* Hero-Bild: full-width */
.hero-image-wrap {
  width: 100vw;
  margin: 0;
  padding: 0;
}
.hero-image {
  width: 100vw;
  max-width: 100vw;
  height: auto;
  display: block;
}

/* ---------- Orientierung (Gelb) ---------- */
.orientierung {
  background: var(--c-yellow);
  padding: 100px 0;
}
.orientierung h2 { max-width: 700px; }

/* ---------- Angebot (Weiß) ---------- */
.angebot {
  background: var(--c-white);
  padding: 110px 0;
}
.angebot h2 { margin-bottom: 2rem; }
.angebot p {
  max-width: 760px;
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}
.angebot p:last-of-type { margin-bottom: 0; }
.angebot .lead { max-width: 760px; }

/* Card-Grid: 2x2 — funktioniert für HTML-Block UND Gutenberg Group blocks */
.cards-grid,
.wp-block-group.cards-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  margin-top: 48px !important;
  max-width: 100% !important;  /* nutzt volle Container-Breite */
  width: 100%;
}
.card,
.wp-block-group.card {
  color: var(--c-white) !important;
  padding: 36px 34px 32px !important;
  border-radius: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  min-height: 260px;
  transition: filter 0.18s ease, transform 0.05s ease;
  margin: 0 !important;
}
.card:not([style*="background"]) { background: var(--c-blue); }
.card:hover { filter: brightness(0.92); }
.card h3,
.card .wp-block-heading {
  color: var(--c-white) !important;
  font-family: var(--ff-serif) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  font-size: 1.4rem !important;
  line-height: 1.25 !important;
}
.card p {
  margin: 0 !important;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
  flex-grow: 1;
  color: var(--c-white) !important;
  opacity: 0.96;
  max-width: none !important;
}
.card .wp-block-buttons {
  margin: 0 !important;
  margin-top: auto !important;
}
.card .btn-card { align-self: flex-start; margin-top: auto; }

/* ---------- Über uns (Hellgrau) ---------- */
.ueber-uns {
  background: var(--c-light-gray);
  padding: 110px 0;
}
/* Team-Portraits: funktioniert für altes HTML UND neue Gutenberg-Columns */
.team-grid,
.wp-block-columns.team-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 26px !important;
  margin-top: 48px !important;
  margin-bottom: 40px !important;
  margin-left: auto !important;       /* zentriert */
  margin-right: auto !important;
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
  max-width: 590px !important;
}
.team-grid .wp-block-column {
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}
.team-member { margin: 0; }
.team-member img,
.team-grid .wp-block-image img,
.team-grid img {
  width: 100% !important;
  height: auto;
  display: block;
  background: var(--c-violet-gray);
  border-radius: 2px;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center 20% !important;
}
.team-grid .wp-block-image,
.team-grid figure {
  margin: 0 !important;
}
.team-member figcaption,
.team-grid .team-caption,
.team-grid p.team-caption {
  margin: 16px 0 0 !important;
  font-size: 1rem !important;
  color: var(--c-text) !important;
  font-weight: 500 !important;
  text-align: center;
  max-width: none !important;
}
.subheading {
  font-family: var(--ff-serif);
  font-size: 2.8rem;
  line-height: 1.2;
  margin: 40px 0 28px;
  font-weight: 500;
}
.features-list {
  margin: 0 0 1.8rem;
  padding-left: 24px;
  font-size: 1.02rem;
}
.features-list li {
  font-weight: 500;
  margin-bottom: 10px;
}

/* ---------- Kontaktformular (Weiß mit gelben Feldern) ---------- */
.kontakt {
  background: var(--c-white);
  padding: 100px 0;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 640px;
  margin-top: 36px;
}
.contact-form label {
  display: block;       /* nicht flex column → Text + Stern bleiben nebeneinander */
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-text);
}
.contact-form label > input,
.contact-form label > textarea {
  display: block;
  width: 100%;
  margin-top: 10px;
}
.contact-form input,
.contact-form textarea {
  background: var(--c-yellow) !important;
  border: none;
  padding: 16px 18px;
  font: inherit;
  font-size: 1rem;
  font-family: var(--ff-sans);
  border-radius: 2px;
  outline: none;
  resize: vertical;
  width: 100%;
  color: var(--c-text);
}
.contact-form input:focus,
.contact-form textarea:focus {
  box-shadow: 0 0 0 2px var(--c-blue);
}
.contact-form button {
  align-self: flex-start;
  margin-top: 14px;
}
.contact-form button[disabled] { opacity: 0.6; cursor: not-allowed; }
.fll-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.fll-form-status { margin: 14px 0 0; font-size: 0.95rem; min-height: 1.4em; }
.fll-form-status.is-success { color: #2a5d3c; font-weight: 500; }
.fll-form-status.is-error   { color: #a03333; font-weight: 500; }

/* ---------- Masterclass-Übersichtsseite ---------- */
.mc-section {
  padding: 90px 0;
}
.mc-section.mc-white  { background: var(--c-white); }
.mc-section.mc-yellow { background: var(--c-yellow); }
.mc-section.mc-gray   { background: var(--c-light-gray); }

.mc-section h2 {
  margin-bottom: 0.4rem;
}

/* ---------- Detail-Cards (2x2 Grid wie Homepage) ----------
   Section = full-bleed weißer Background,
   Inner-Wrapper = 980px zentriert → gleiche Kante wie Text drüber */
.mc-cards-list {
  background: var(--c-white);
  padding: 80px 0 100px !important;
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
}
.mc-cards-inner {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}
.mc-card-detail {
  color: var(--c-white) !important;
  padding: 44px 44px 40px !important;
  border-radius: 4px;
  margin: 0 !important;
  width: 100%;
  max-width: none !important;
  scroll-margin-top: 100px;
  display: flex !important;
  flex-direction: column;
}
/* Default-Background falls inline-style fehlt (z.B. neue Card im Editor) */
.mc-card-detail:not([style*="background"]) { background: var(--c-blue); }
.mc-card-detail h2 {
  color: var(--c-white) !important;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(1.65rem, 2.4vw, 2rem);
  line-height: 1.2;
  margin: 0 0 0.3rem !important;
}
.mc-card-detail .mc-subtitle {
  color: var(--c-white) !important;
  font-family: var(--ff-sans);
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: 500;
  margin: 0 0 1.4rem !important;
  opacity: 0.85;
  letter-spacing: 0.02em;
  max-width: none;
}
.mc-card-detail .mc-tagline {
  color: var(--c-white) !important;
  font-family: var(--ff-serif);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.35;
  font-weight: 400;
  margin: 0 0 1.4rem !important;
  max-width: 760px;
}
.mc-card-detail p:not(.mc-tagline):not(.mc-subtitle) {
  color: var(--c-white) !important;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 1rem !important;
  max-width: 800px;
  opacity: 0.96;
}
/* Buttons-Wrapper aus Stretch-Mode ziehen + explizit links
   margin-top: auto → schiebt Button ans unteres Ende der Card
   → alle 4 Buttons landen auf gleicher Höhe (Cards sind grid-stretch gleich hoch) */
.mc-card-detail .wp-block-buttons,
.mc-card-detail .wp-block-buttons.is-layout-flex,
.mc-card-detail .wp-block-buttons-is-layout-flex {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: max-content !important;
  margin-top: auto !important;
  padding-top: 28px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
  text-align: left !important;
}
.mc-card-detail .wp-block-buttons > .wp-block-button {
  display: inline-block !important;
  margin: 0 !important;
  align-self: flex-start !important;
}

/* Card-Button auf Detail-Card: weiß auf blau → hover dunkler */
.fll-page .mc-card-detail .wp-block-button.btn-card .wp-block-button__link,
.fll-page .wp-block-button.btn-card .wp-block-button__link {
  background-color: var(--c-white) !important;
  color: var(--c-blue) !important;
  padding: 10px 24px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  font-family: var(--ff-sans) !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.fll-page .mc-card-detail .wp-block-button.btn-card .wp-block-button__link:hover,
.fll-page .wp-block-button.btn-card .wp-block-button__link:hover {
  background-color: var(--c-blue-dark) !important;
  color: var(--c-white) !important;
}

@media (max-width: 700px) {
  .mc-card-detail { padding: 32px 22px 28px !important; }
}

/* ==== Aggressive Mobile-Safeguards: nichts wird abgeschnitten ==== */
@media (max-width: 600px) {
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* Alle top-level Blöcke innerhalb der Page nicht über Viewport hinaus */
  .fll-page, .fll-page > *, .fll-page > * > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Cards: passen exakt in den Viewport, keine Overflow */
  .card, .wp-block-group.card,
  .mc-card-detail, .wp-block-group.mc-card-detail {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  .cards-grid,
  .wp-block-group.cards-grid {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .mc-cards-inner {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
  /* Alle Buttons EINHEITLICH gleich groß */
  .btn,
  .btn-primary,
  .btn-card,
  .wp-block-button__link,
  .wp-block-button .wp-block-button__link,
  .fll-page .wp-block-button__link,
  .fll-page .wp-block-button.btn-primary .wp-block-button__link,
  .fll-page .wp-block-button.btn-card .wp-block-button__link,
  .fll-page .wp-block-button.btn .wp-block-button__link,
  .fll-page .mc-card-detail .wp-block-button.btn-card .wp-block-button__link {
    padding: 10px 22px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    border-radius: 999px !important;
    letter-spacing: 0.01em !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Alle Buttons-Wrapper linksbündig */
  .wp-block-buttons,
  .fll-page .wp-block-buttons,
  .mc-card-detail .wp-block-buttons {
    justify-content: flex-start !important;
    align-self: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 20px !important;
  }
  /* Hero Image full-width behalten */
  .hero-image-wrap, .hero-image { width: 100vw !important; max-width: 100vw !important; }
  /* Team-Grid einfacher & voll */
  .team-grid,
  .wp-block-columns.team-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    padding: 0 16px;
  }
  /* Header noch weiter komprimieren */
  .site-header .header-logo { margin: 0 auto !important; }
  .site-header .header-logo img { max-width: 150px !important; }
  .site-header .main-nav-links { font-size: 0.88rem !important; }
  .site-header .main-nav-links a { display: inline-block; padding: 4px 0; }
  /* Hero-Cover: höher (mehr Portrait) auf Mobile, damit der Text reinpasst */
  .hero-image-wrap.wp-block-cover,
  .hero-image-wrap.wp-block-cover[style*="min-height"] {
    min-height: unset !important;
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 40px 0 !important;
  }
  .hero-image-wrap.wp-block-cover .wp-block-cover__inner-container {
    padding: 20px 0 !important;
  }
  .hero-image-wrap.wp-block-cover h1,
  .hero-image-wrap.wp-block-cover h2,
  .hero-image-wrap.wp-block-cover blockquote.wp-block-quote {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  .hero-image-wrap.wp-block-cover h1,
  .hero-image-wrap.wp-block-cover h2 {
    font-size: clamp(1rem, 3.8vw, 1.2rem) !important;
    max-width: 100% !important;
    line-height: 1.4 !important;
  }
  .hero-image-wrap.wp-block-cover blockquote p {
    font-size: clamp(0.82rem, 3vw, 0.95rem) !important;
    line-height: 1.5 !important;
  }
  .hero-overlay-tagline {
    font-size: clamp(1.05rem, 4.8vw, 1.4rem) !important;
    padding: 0 8px;
  }
  .hero-overlay-names {
    font-size: clamp(0.85rem, 3.4vw, 1rem) !important;
  }
  /* Typo etwas kleiner */
  h1 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }
  h2 { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; }
  .mc-tagline { font-size: clamp(1.05rem, 4vw, 1.25rem) !important; }
  .subheading { font-size: clamp(1.6rem, 5.5vw, 2rem) !important; }
}
.mc-subtitle {
  font-family: var(--ff-sans);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--c-text);
  margin: 0 0 1.6rem;
  max-width: 760px;
  opacity: 0.7;
  letter-spacing: 0.02em;
}
/* Pull-Quote / Tagline (Loretta, größer, ohne Anführungszeichen) */
.mc-tagline {
  font-family: var(--ff-serif);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.3;
  font-weight: 400;
  margin: 0 0 1.6rem;
  max-width: 720px;
  color: var(--c-text);
}
.mc-section p:not(.mc-tagline):not(.mc-subtitle) {
  max-width: 760px;
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 1.1rem;
}

/* Hero auf MC-Seite */
.hero .mc-tagline { margin-top: 0.4rem; }

/* "Aufbau unserer Masterclasses" – 2-Spalten mit Foto-Platzhalter */
.mc-aufbau {
  background: var(--c-light-gray);
  padding: 100px 0;
}
/* Aufbau-Grid: Foto verankert, prominent, gerahmt */
.mc-aufbau .aufbau-grid,
.mc-aufbau .wp-block-columns.aufbau-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.5fr !important;  /* Foto dominant */
  gap: 56px !important;
  align-items: stretch !important;              /* Foto füllt Sektionshöhe */
  margin: 0 !important;
  max-width: 100%;
}
/* Photo-Column: volle Höhe */
.mc-aufbau .aufbau-photo-col,
.mc-aufbau .wp-block-column:has(.aufbau-photo) {
  display: flex !important;
  align-items: stretch !important;
  height: 100%;
}
/* Photo (figure): volle Höhe */
.mc-aufbau .aufbau-photo,
.mc-aufbau .wp-block-image.aufbau-photo,
.mc-aufbau figure.aufbau-photo {
  width: 100% !important;
  height: 100% !important;
  min-height: 480px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}
/* Photo (img): fills the figure, cropped nicely */
.mc-aufbau .aufbau-photo img,
.mc-aufbau .aufbau-photo-col img {
  width: 100% !important;
  height: 100% !important;
  min-height: 480px !important;
  object-fit: cover !important;
  object-position: center 30% !important;   /* Gesichter oben-mittig behalten */
  display: block;
  border-radius: 3px;
}
.mc-aufbau .aufbau-grid .wp-block-column {
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}
.mc-aufbau h2 { margin: 0 0 1.4rem; }
.mc-aufbau ul.features-list {
  margin: 1rem 0 1.6rem;
  padding-left: 24px;
  font-size: 1.02rem;
}
.mc-aufbau ul.features-list li {
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 1.45;
}
.mc-aufbau .aufbau-text p {
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 1.1rem;
  max-width: none;
}
.mc-aufbau .aufbau-text .mc-tagline {
  margin: 1.4rem 0 0;
  font-style: normal;
}
.photo-placeholder {
  background: var(--c-violet-gray);
  color: var(--c-white);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 2px;
  position: relative;
  padding: 24px;
}
.photo-placeholder span {
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  opacity: 0.92;
  font-style: italic;
}
/* Echtes Foto im Aufbau-Block (alt: <img>, neu: Gutenberg figure.wp-block-image) */
.aufbau-photo,
figure.aufbau-photo,
.aufbau-photo-col .wp-block-image {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}
.aufbau-photo img,
figure.aufbau-photo img,
.aufbau-photo-col .wp-block-image img {
  width: 100% !important;
  height: auto;
  display: block;
  border-radius: 2px;
  object-fit: cover;
}

@media (max-width: 900px) {
  .mc-aufbau .aufbau-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .photo-placeholder { aspect-ratio: 4 / 3; }
}

/* Smooth scroll für Anchor-Links (z.B. Homepage → /masterclasses/#leading-into-the-future) */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

/* ---------- Legal Pages (Datenschutz / Impressum) ---------- */
.fll-legal {
  background: var(--c-white);
  padding: 80px 0 100px;
}
.fll-legal-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.fll-legal h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin: 0 0 1.4rem;
}
.fll-legal h2 {
  font-size: 1.45rem;
  margin: 2.4rem 0 0.9rem;
  font-weight: 500;
}
.fll-legal h3 {
  font-size: 1.15rem;
  margin: 1.6rem 0 0.6rem;
  font-weight: 500;
}
.fll-legal p,
.fll-legal li {
  font-size: 1rem;
  line-height: 1.7;
  max-width: none;
}
.fll-legal ul, .fll-legal ol {
  margin: 0 0 1.1rem;
  padding-left: 24px;
}
.fll-legal li { margin-bottom: 6px; }
.fll-legal .fll-placeholder {
  color: #999;
  background: #fdf9c4;
  padding: 1px 6px;
  border-radius: 3px;
  font-style: italic;
  font-size: 0.95em;
}
.fll-legal a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }
.fll-legal a:hover { color: var(--c-blue-dark); }
.fll-legal .fll-back-home {
  display: inline-block;
  margin-top: 36px;
  font-size: 0.95rem;
}

/* Footer-Legal-Nav (Links zu Datenschutz/Impressum unten im Footer) */
.footer-legal {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex;
  gap: 28px;
  font-size: 0.88rem;
}
.footer-legal a {
  color: var(--c-white) !important;
  text-decoration: none;
  opacity: 0.9;
}
.footer-legal a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer (Taupe) — funktioniert für altes HTML + neue Gutenberg-Struktur ---------- */
.site-footer {
  background: var(--c-taupe) !important;
  color: var(--c-white) !important;
  padding: 56px 0 48px !important;
  font-size: 0.94rem;
  line-height: 1.65;
}
/* Wenn alter HTML-Block (kein Gutenberg-align): full-bleed via viewport-trick */
footer.site-footer:not(.alignfull):not(.wp-block-group) {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.site-footer * { color: var(--c-white) !important; }
.site-footer strong { font-weight: 600; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer p {
  margin: 0 !important;
  max-width: none !important;
}

/* Footer-Grid (3-Spalten Layout): alt = .footer-grid div, neu = .wp-block-columns.footer-grid */
.footer-grid,
.wp-block-columns.footer-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 48px !important;
  margin: 0 !important;
}
.footer-grid .wp-block-column {
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

/* Footer-Legal-Links (Datenschutz · Impressum unten im Footer) */
.footer-legal-links,
.site-footer .footer-legal-links,
p.footer-legal-links {
  margin-top: 36px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 0.88rem !important;
  max-width: none !important;
}
.footer-legal-links a {
  color: var(--c-white) !important;
  text-decoration: none !important;
  opacity: 0.9;
}
.footer-legal-links a:hover { opacity: 1; text-decoration: underline !important; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .hero { padding: 60px 0 40px; }
  .orientierung, .angebot, .ueber-uns, .kontakt { padding: 60px 0; }
  .cards-grid,
  .wp-block-group.cards-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 16px !important;
  }
  .team-grid,
  .wp-block-columns.team-grid {
    grid-template-columns: 1fr !important;
    max-width: 320px !important;
    gap: 20px !important;
  }
  .footer-grid,
  .wp-block-columns.footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Aufbau: Foto oben, Text drunter */
  .mc-aufbau .aufbau-grid,
  .mc-aufbau .wp-block-columns.aufbau-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Aufbau-Foto zuerst oben zeigen */
  .mc-aufbau .aufbau-photo-col,
  .mc-aufbau .wp-block-column:has(.aufbau-photo) { order: -1; }

  /* Mobile: Header sauber gestackt Logo oben + Nav drunter,
     Logo NICHT mehr nach links "rauslugen" */
  .site-header .wp-block-columns.nav-wrap,
  .site-header .wp-block-columns {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .site-header .wp-block-column {
    flex: 0 0 auto !important;
    width: 100% !important;
    text-align: center;
  }
  .site-header .header-logo {
    margin: 0 auto !important;    /* auf Mobile zentriert, kein negativer Rand */
    display: block;
    text-align: center;
  }
  .site-header .header-logo img { max-width: 170px !important; height: auto; margin: 0 auto; }
  .site-header .main-nav-links {
    font-size: 0.95rem !important;
    text-align: center !important;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.15);
  }
  .site-header .main-nav-links a { padding: 6px 0; }
  /* Legacy nav (falls noch irgendwo HTML-Header) */
  .nav-wrap:not(.wp-block-columns) { flex-direction: column; align-items: flex-start; gap: 18px; }
  .main-nav { gap: 22px; font-size: 0.95rem; }
  .logo-mark { width: 44px; height: 44px; }
  .logo-future, .logo-lab { font-size: 1rem; }
  .logo-leadership { font-size: 0.95rem; }
}