/* =========
   Lerncoaching – Britta Schöttler
   Elegant, modern, logo-basiertes Corporate Design
   ========= */

:root{
  /* Warm, Canva‑ähnliche Farbwelt (hell ↔ etwas dunkler) */
  --bg: #FBF6EF;
  --bg2: #F3E3CD;

  --panel: rgba(255,255,255,.88);
  --card: #ffffff;

  --text: var(--brand-blue);
  --muted: rgba(var(--brand-blue-rgb), .72);
  --line: rgba(var(--brand-blue-rgb), .12);

  /* Brand (Logo) blue */
  --brand-blue: #2848A0;
  --brand-blue-rgb: 40, 72, 160;

  --line-accent: rgba(192,122,43,.35);
  /* Accent (warm, weniger grell) */
  --blue: #C07A2B;   /* used as accent in existing CSS */
  --blue2: #E39A3B;
  --orange: #E39A3B;
  --orange2: #F1C37A;

  --shadow: 0 18px 60px rgba(20,33,61,.10);
  --shadow2: 0 10px 30px rgba(20,33,61,.08);

  /* Button accent (CTA) – warm but not too orange */
  --btn-accent-1: #F3D6A8;
  --btn-accent-2: #D98D35;

  /* About / "Über mich" photo sizing (Homepage) */
  --about-photo-w: 260px;
  --about-photo-radius: 18px;

  --radius: 18px;
  --radius2: 26px;

  --container: 1120px;

  /* Will be set by JS to the real header height (fixed header + anchor offsets) */
  --header-offset: 124px;
}


*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top: calc(var(--header-offset) + 12px)}
section[id]{scroll-margin-top: calc(var(--header-offset) + 12px)}
/* Prevent any horizontal overflow + avoid side-to-side scrolling on mobile */
html, body{max-width:100%; overflow-x:hidden}
body{
  margin:0;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg), var(--bg2));
  padding-top: var(--header-offset);
}

img{max-width: 100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
figure{margin:0}
.container{width:min(var(--container), calc(100% - 40px)); margin-inline:auto}

.skip{
  position:absolute; left:-999px; top:12px;
  background:#fff; padding:10px 14px; border-radius:12px; box-shadow: var(--shadow2);
}
.skip:focus{left:12px; z-index:9999}

/* ===== Header ===== */
.header{
  /* Sticky sometimes fails if any ancestor creates a new scroll container.
     Fixed is more robust and guarantees the menu is ALWAYS visible on scroll. */
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9998;
  backdrop-filter: blur(10px);
  background: rgba(250,246,241,.62);
  border-bottom: 1px solid rgba(20,33,61,.08);
}
.header.is-elevated{box-shadow: 0 10px 30px rgba(20,33,61,.08)}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding: 6px 0;
}
.brand{display:flex; align-items:center; gap:12px}
.brand__logo{height: 132px; width:auto; transform: scale(1.20); transform-origin: left center}

/* Make sure long buttons never cause horizontal scrolling on small screens */
@media (max-width: 520px){
  .btn{white-space: normal; text-align:center}
}

.nav__toggle{
  display:none;
  width:42px; height:42px; border-radius:14px;
  border:1px solid rgba(20,33,61,.12);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(10px);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.nav__toggle span{
  display:block; height:2px; width:18px; margin:4px auto;
  background: var(--blue);
  border-radius:99px;
  transition: transform .18s ease, opacity .18s ease, width .18s ease;
}
.nav__toggle:active{transform: scale(.98)}
.nav__toggle:hover{background: rgba(255,255,255,.78); border-color: rgba(var(--brand-blue-rgb), .16)}

/* Elegant hamburger -> close state */
.nav__toggle.is-open span:nth-child(1){transform: translateY(6px) rotate(45deg); width: 18px}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform: translateY(-6px) rotate(-45deg); width: 18px}

.nav__list{
  list-style:none; padding:0; margin:0;
  display:flex; align-items:center; gap:18px;
}
.nav__list a{
  font-family:"Montserrat", sans-serif;
  font-weight:600;
  color: rgba(var(--brand-blue-rgb), .86);
  padding:10px 10px;
  border-radius: 12px;
  transition: background .2s ease, transform .2s ease;
}
.nav__list a:hover{background: rgba(227,154,59,.08)}
.nav__list a:active{transform: translateY(1px)}


/* ===== Dropdown (Angebote) ===== */
.nav__item{position:relative}
.nav__dropdownToggle{
  font-family:"Montserrat", sans-serif;
  font-weight:600;
  color: rgba(var(--brand-blue-rgb), .86);
  padding:10px 10px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.nav__dropdownToggle:hover{background: rgba(227,154,59,.08)}
.nav__dropdownToggle:active{transform: translateY(1px)}

.nav__dropdown{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  padding: 10px;
  margin: 0;
  list-style: none;
  border-radius: 18px;
  border: 1px solid rgba(20,33,61,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(20,33,61,.10);
  display: none;
}
.nav__dropdown a{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  font-family:"Montserrat", sans-serif;
  font-weight: 700;
  color: rgba(var(--brand-blue-rgb), .88);
}
.nav__dropdown a:hover{background: rgba(227,154,59,.08)}
.nav__item--dropdown:hover > .nav__dropdown,
.nav__item--dropdown:focus-within > .nav__dropdown{display:block}

/* Mobile: dropdown becomes an inline sublist */
@media (max-width: 900px){
  .nav__dropdown{
    position: static;
    display: none;
    min-width: unset;
    margin-top: 6px;
    box-shadow: none;
    background: rgba(255,255,255,.76);
  }
  .nav__item--dropdown.is-open > .nav__dropdown{display:block}
  .nav__dropdown a{padding-left: 14px}
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  font-family:"Montserrat", sans-serif;
  font-weight:700;
  letter-spacing: .2px;
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(20,33,61,.12);
  background: linear-gradient(180deg, var(--btn-accent-1), var(--btn-accent-2));
  color: var(--brand-blue);
  box-shadow: 0 14px 30px rgba(20,33,61,.12);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  white-space:nowrap;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.02)}
.btn:active{transform: translateY(0px); box-shadow: 0 10px 20px rgba(20,33,61,.10)}
.btn:focus-visible{
  outline: 3px solid rgba(227,154,59,.28);
  outline-offset: 3px;
}

.btn:disabled{
  opacity: .62;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
}

.btn.is-loading{
  pointer-events: none;
}

.btn.is-loading::after{
  content:"";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(20,33,61,.35);
  border-top-color: rgba(var(--brand-blue-rgb), 0);
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.btn--ghost{
  background: rgba(255,255,255,.78);
  border-color: rgba(227,154,59,.18);
  color: rgba(var(--brand-blue-rgb), .92);
  box-shadow: none;
}
.btn--ghost:hover{
  background: rgba(227,154,59,.06);
  box-shadow: 0 10px 24px rgba(20,33,61,.08);
}

.btn--soft{
  background: rgba(227,154,59,.10);
  border-color: rgba(227,154,59,.30);
  color: rgba(var(--brand-blue-rgb), .92);
  box-shadow: none;
}

.btn--offers{
  /* Slightly more visible than the ghost buttons, but still calm/professional */
  background: rgba(255,255,255,.86);
  border-color: rgba(227,154,59,.36);
  color: rgba(var(--brand-blue-rgb), .92);
  box-shadow: 0 12px 26px rgba(20,33,61,.08);
}
.btn--offers:hover{
  background: rgba(227,154,59,.10);
  border-color: rgba(227,154,59,.46);
}

.btn--soft:hover{
  background: rgba(227,154,59,.16);
}

.btn--wide{width:100%}
.btn--sm{padding: 10px 12px; border-radius: 12px}

/* ===== Typography ===== */
h1,h2,h3{
  font-family:"Montserrat", sans-serif;
  letter-spacing: -0.02em;
  margin:0 0 12px 0;
}
h1{font-size: clamp(30px, 4.2vw, 48px); line-height:1.08; margin:0 0 14px 0}
h2{font-size: clamp(22px, 3vw, 34px); line-height:1.15; margin:0 0 12px 0}
h3{font-size: 18px; line-height:1.25; margin:0 0 10px 0}
p{margin:0 0 14px 0; color: rgba(var(--brand-blue-rgb), .88)}
.lead{font-size: 16px; line-height:1.65}
.lead2{font-size: 16px; color: var(--muted); line-height:1.7}
.lead2--emph{font-size: 18px; font-weight: 900; color: rgba(var(--brand-blue-rgb), .90)}
.leadStrong{font-size: 16px; font-weight: 800; color: rgba(var(--brand-blue-rgb), .86); line-height: 1.85; max-width:none; margin: 0 0 22px 0}
.lead2--intro{
  font-size: 18px;
  line-height: 1.7;
  color: rgba(var(--brand-blue-rgb), .92);
  font-weight: 600;
}
.lead2--intro strong{
  font-weight: 900;
  color: rgba(var(--brand-blue-rgb), .98);
}


/* Was ist Lerncoaching? page tweaks */
.page-hero--wasis .wasIsIntro{
  font-size: 16px;
  line-height: 1.7;
  font-weight: 600;
}
.page-hero--wasis .wasIsDivider{
  margin: 18px 0 30px 0;
}
.page-hero--wasis .wasIsBlocks{
  margin-top: 0;
}
.page-hero--wasis .page-hero__text{
  width: 100%;
}


.flowLead{
  font-family:"Montserrat", sans-serif;
  font-weight: 900;
  font-size: 1.05em;
  color: rgba(var(--brand-blue-rgb), .90);
}
.muted{color: var(--muted); font-size: 13px}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding: 92px 0 54px 0;
  overflow:hidden;
}
.hero__bg{
  /*
    Make sure the background image ALWAYS covers the full hero area.
    We slightly bleed the background outside the container to avoid any
    visible image edge (e.g. a left border) caused by sub‑pixel rounding
    or late image paint.
  */
  position:absolute;
  inset:-2px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: saturate(1.18) contrast(1.12) brightness(1.05);
  /* Keep original size – just enhance visibility via overlay */
  transform: scale(1.03);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    /* Even less "milky" overlay so the forest/stairs background is clearer */
    linear-gradient(90deg, rgba(250,246,241,.42), rgba(250,246,241,.22) 55%, rgba(250,246,241,.36)),
    radial-gradient(900px 500px at 15% 25%, rgba(227,154,59,.20), transparent 60%),
    radial-gradient(700px 420px at 70% 10%, rgba(247,166,0,.24), transparent 60%);
}
.hero__shape{
  position:absolute;
  width: 900px; height: 900px;
  right:-500px; top:-420px;
  background: radial-gradient(circle at 30% 30%, rgba(227,154,59,.22), transparent 55%);
  border-radius: 999px;
  filter: blur(10px);
  opacity: .9;
}
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 34px;
  align-items: flex-end;
}

/* Make the hero text readable even on a vivid background */
.hero__copy{
  position:relative;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  padding: 26px 26px;
  box-shadow: 0 22px 70px rgba(20,33,61,.12);
  backdrop-filter: blur(12px);
}
.hero__copy::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,0));
}
.hero__copy h1{
  color: rgba(var(--brand-blue-rgb), .95);
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: 10px;
}
.hero__copy .lead{
  color: rgba(var(--brand-blue-rgb), .84);
  font-size: 16.5px;
  line-height: 1.55;
  max-width: 58ch;
}

.hero__copy .lead strong{
  color: rgba(227,154,59,.98);
  font-weight: 750;
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
  contain: paint;
}
.hero__copy .lead strong::after{
  content:"";
  position:absolute;
  left:-2px; right:-2px;
  bottom: 0.08em;
  height: .48em;
  background: rgba(255,193,7,.22);
  border-radius: 999px;
  z-index: -1;
}

.badge--panel{margin-bottom: 10px}
.badge{
  display:inline-flex;
  font-family:"Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing:.08em;
  font-size: 14px;
  color: rgba(227,154,59,.92);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(227,154,59,.18);
  border-radius: 999px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px}
.hero__actions--wants{justify-content: space-between; align-items:center; gap: 14px;}
.hero__actions--wants .heroWants__pill{margin-top: 0;}
.heroWants__pill{white-space: nowrap;}
@media (max-width: 420px){
  .heroWants__pill{white-space: normal;}
}

@media (min-width: 560px){
  .hero__actions--wants{flex-wrap: nowrap;}
}

/* Mobile: zuerst "… einfach leichter lernen?" dann der Button "Angebote" */
@media (max-width: 640px){
  .hero__actions--wants{
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .hero__actions--wants .heroWants__pill{order: 1; width: 100%; text-align: center;}
  .hero__actions--wants .btn{order: 2; width: 100%; justify-content: center;}
}



.panel{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 14px 0 14px 16px;
  border-left: 4px solid rgba(227,154,59,.55);
  color: rgba(var(--brand-blue-rgb), .86);
}
.panel__title{margin-bottom: 10px}
.panel__cta{margin-top: 14px}

/* Inline callout without boxes */
.noteLine{
  padding: 12px 0 12px 16px;
  border-left: 4px solid rgba(227,154,59,.55);
  color: rgba(var(--brand-blue-rgb), .86);
  margin: 12px 0 0;
}
.checklist{list-style:none; padding:0; margin: 12px 0 0 0}
.checklist li{
  position:relative;
  padding-left: 22px;
  margin: 10px 0;
  color: rgba(var(--brand-blue-rgb), .85);
}
.checklist li::before{
  content:"✓";
  position:absolute;
  left:0;
  top: 1px;
  color: var(--orange);
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
}
.checklist li::after{
  content:"";
  display:none;
}
.checklist--compact li{margin: 8px 0}

/* Checklist as a clean 2-column grid (used for "Was ist Lerncoaching?") */
.checklist--grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
  max-width: 920px;
}
.checklist--grid li{ margin: 0; }
.checklist--hero{ margin-top: 10px; max-width: 760px; }
@media (max-width: 720px){
  .checklist--grid{ grid-template-columns: 1fr; }
}

/* Elegant reveal (bottom -> top) for "Du möchtest …" bullet points
   This keeps the hero animations consistent: everything fades & lifts up. */
.hero__panel .checklist li{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.hero__panel.is-in .checklist li{
  opacity: 1;
  transform: translateY(0);
}
.hero__panel.is-in .checklist li:nth-child(1){transition-delay: .05s}
.hero__panel.is-in .checklist li:nth-child(2){transition-delay: .11s}
.hero__panel.is-in .checklist li:nth-child(3){transition-delay: .17s}
.hero__panel.is-in .checklist li:nth-child(4){transition-delay: .23s}
.hero__panel.is-in .checklist li:nth-child(5){transition-delay: .29s}

@media (prefers-reduced-motion: reduce){
  .hero__panel .checklist li,
  .hero__panel.is-in .checklist li{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== Sections ===== */
.section{padding: 74px 0}
.section--soft{
  background: linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.24));
  border-top: 1px solid rgba(20,33,61,.06);
  border-bottom: 1px solid rgba(20,33,61,.06);
}
.section__head{max-width: 760px; margin-bottom: 22px}
.section__head p{margin:0}

.strip{padding: 28px 0}
.strip__inner{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:center;
}
.strip__text{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  padding: 18px 18px;
  box-shadow: 0 10px 24px rgba(20,33,61,.07);
}
.strip__cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px}
.mini{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
}
.mini__title{
  font-family:"Montserrat", sans-serif;
  font-weight:800;
  color: var(--blue);
  margin-bottom: 6px;
}
.mini__desc{color: rgba(var(--brand-blue-rgb), .78); font-size: 13px; line-height:1.55}

/* ===== Cards ===== */
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.card{
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: var(--shadow2);
  display:flex;
  flex-direction: column;
  min-height: 410px;
}
.card__media{
  height: 220px;
  background-size: cover;
  /* slightly higher focus so faces don't get cropped */
  background-position: center 20%;
}
.card__body{padding: 16px 16px 18px 16px; display:flex; flex-direction:column; gap: 10px}
.card__body p{color: rgba(var(--brand-blue-rgb), .82)}
.bullets{margin:0; padding-left: 18px; color: rgba(var(--brand-blue-rgb), .84)}
.bullets li{margin: 7px 0}
.link{
  margin-top: auto;
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  color: var(--blue);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.link::after{
  content:"→";
  transition: transform .18s ease;
}
.link:hover::after{transform: translateX(2px)}

/* ===== Split / figure ===== */
.split{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items:center;
}
.grid2{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 16px}
.iconcard{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 18px 0;
  box-shadow: none;
  border-bottom: 1px solid var(--line-accent);
}
/* Remove the divider line on the last row (2-column grids) */
.grid2:not(.grid2--single) .iconcard:nth-last-child(-n+2){
  border-bottom: 0;
  padding-bottom: 0;
}
.grid2.grid2--single .iconcard:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.iconcard__t{
  font-family:"Montserrat", sans-serif;
  font-weight: 900;
  color: rgba(var(--brand-blue-rgb), .92);
  margin-bottom: 6px;
  font-size: 18px;
  line-height: 1.25;
}
.iconcard__d{
  color: rgba(var(--brand-blue-rgb), .78);
  font-size: 14px;
  line-height: 1.6;
}

/* Iconcards with checkmark titles (used on offer pages) */
.iconcard--check .iconcard__t{
  position: relative;
  padding-left: 26px;
}
.iconcard--check .iconcard__t::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  font-weight: 900;
}

/* Simple dash list (no check icons) */
.dashlist{
  list-style: none;
  padding-left: 0;
  margin: 12px 0 0 0;
}
.dashlist li{
  position: relative;
  padding-left: 18px;
  margin: 8px 0;
  color: rgba(var(--brand-blue-rgb), .84);
}
.dashlist li::before{
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(var(--brand-blue-rgb), .65);
  font-weight: 800;
}

/* Highlight box for "Elternberatung" */
.highlightBox{
  margin-top: 24px;
  padding: 18px 18px;
  border-radius: 18px;
  border: 1px solid rgba(20,33,61,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 26px rgba(20,33,61,.06);
}
.highlightBox__title{
  font-family:"Montserrat", sans-serif;
  font-weight: 900;
  font-size: 20px;
  margin: 0 0 8px 0;
}
.highlightBox p{margin:0; color: rgba(var(--brand-blue-rgb), .82); line-height:1.65}

/* Mobile readability: stack multi-column content */
@media (max-width: 820px){
  .split{grid-template-columns: 1fr}
  .grid2{grid-template-columns: 1fr}
  .media-soft{height:auto !important;}
  .media-soft img{height:auto;}

  /* On 1-column stacks, only remove divider on the last item */
  .grid2:not(.grid2--single) .iconcard{
    border-bottom: 1px solid var(--line-accent);
    padding-bottom: 18px;
  }
  /* Re-enable divider for the second last item (stacked layout) */
  .grid2:not(.grid2--single) .iconcard:nth-last-child(-n+2){
    border-bottom: 1px solid var(--line-accent);
    padding-bottom: 18px;
  }
  .grid2:not(.grid2--single) .iconcard:last-child{
    border-bottom: 0;
    padding-bottom: 0;
  }
}

.figure{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.figure img{
  border-radius: 0;
  border: 1px solid rgba(20,33,61,.12);
}

.aboutPills{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 10px 0;
}
.aboutPills .pill{margin-top:0}
.checklist--compact{margin: 10px 0 0 0}
.checklist--compact li{margin: 8px 0}

.numberList{
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display:grid;
  gap: 12px;
}
.numberList li{
  counter-increment: step;
  position: relative;
  padding: 6px 0 6px 52px;
  color: rgba(var(--brand-blue-rgb), .82);
  line-height: 1.6;
}
.numberList li::before{

  content: counter(step);
  position:absolute;
  left: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Montserrat", sans-serif;
  font-weight: 900;
  color: #fff;
  background: rgba(247,166,0,.95);
  box-shadow: none;
}
.numberList strong{color: rgba(var(--brand-blue-rgb), .92)}
.detailsContent{
  color: rgba(var(--brand-blue-rgb), .82);
}
.detailsContent p{color: rgba(var(--brand-blue-rgb), .82)}
.figure figcaption{margin-top: 10px; color: rgba(var(--brand-blue-rgb), .72); font-size: 13px}

/* ===== Timeline ===== */
.timeline{display:grid; gap: 14px; margin-top: 14px}
.step{
  display:grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  padding: 14px 14px;
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
}
.step__n{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-family:"Montserrat", sans-serif;
  font-weight: 900;
  color: var(--brand-blue);
  background: linear-gradient(180deg, var(--btn-accent-1), var(--btn-accent-2));
  box-shadow: 0 12px 24px rgba(247,166,0,.18);
}
.step__c p{color: rgba(var(--brand-blue-rgb), .78)}

.cta{
  margin-top: 22px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(227,154,59,.14);
  background: linear-gradient(180deg, rgba(227,154,59,.10), rgba(227,154,59,.04));
}
.cta__text p{margin:0; color: rgba(var(--brand-blue-rgb), .78)}

/* ===== About ===== */
.about{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 20px;
  align-items:center;
}
.about__img img{
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.quote{
  margin-top: 16px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(247,166,0,.22);
  background: rgba(255,255,255,.74);
}
.quote p{margin:0; color: rgba(var(--brand-blue-rgb), .84)}

/* ===== FAQ ===== */
.faq{
  display:grid;
  gap: 12px;
  max-width: 860px;
}
details{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
}
summary{
  cursor:pointer;
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  color: rgba(var(--brand-blue-rgb), .92);
  list-style:none;
}
summary::-webkit-details-marker{display:none}
details p{margin: 10px 0 0 0; color: rgba(var(--brand-blue-rgb), .78); line-height:1.65}

/* ===== Contact ===== */
.section--contact{
  background: rgba(255,255,255,.40);
  border-top: 1px solid rgba(20,33,61,.06);
}
/* Kontakt – clean & professionell */
.contactSimple{display:block}
.contactSimple__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
}
.contactSimple__intro{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.contactSimple__intro::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background: rgba(227,154,59,.28);
}
.contactSimple__intro:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--brand-blue-rgb), .14);
  box-shadow: 0 18px 48px rgba(20,33,61,.10);
}
.contactSimple__bullets{
  margin: 14px 0 0 0;
  padding-left: 18px;
  color: rgba(var(--brand-blue-rgb), .78);
  line-height: 1.6;
}
.contactSimple__bullets li{margin: 6px 0}

.contactSimple__box{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.contactSimple__box::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background: rgba(227,154,59,.28);
}
.contactSimple__box:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--brand-blue-rgb), .14);
  box-shadow: 0 18px 48px rgba(20,33,61,.10);
}
.contactSimple__row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(20,33,61,.08);
  transition: background .18s ease;
}
.contactSimple__row:hover{background: rgba(20,33,61,.03)}
.contactSimple__row:last-of-type{border-bottom: none}
.contactSimple__label{
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  color: rgba(var(--brand-blue-rgb), .92);
  font-size: 13px;
  letter-spacing:.02em;
}
.contactSimple__value{
  color: rgba(227,154,59,.92);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .18s ease;
}
.contactSimple__value:hover{background-size: 100% 1px}

.contactSimple__actions{display:flex; flex-wrap:wrap; gap: 10px; margin-top: 14px}
.btn--wa2{
  background: rgba(27,160,72,.10);
  color: rgba(var(--brand-blue-rgb), .92);
  border-color: rgba(27,160,72,.35);
}
.btn--wa2:hover{background: rgba(27,160,72,.14)}

@media (max-width: 900px){
  .contactSimple__grid{grid-template-columns: 1fr}
}

/* (Alt) Kontakt-Section – bleibt zur Sicherheit im Projekt, wird aber nicht mehr genutzt */
.contact2{display:block}
.contact2__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: stretch;
}
.contact2__panel{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}
.contact2__panel::before{
  content:"";
  position:absolute;
  inset:-80px -60px auto auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(247,166,0,.25), rgba(247,166,0,0));
  pointer-events:none;
}
.contact2__panel--right::before{
  inset:-90px auto auto -70px;
  background: radial-gradient(circle at 30% 30%, rgba(227,154,59,.22), rgba(227,154,59,0));
}

.contact2__highlights{display:grid; gap: 10px; margin: 14px 0 16px 0}
.highlight{display:flex; align-items:flex-start; gap: 10px; color: rgba(var(--brand-blue-rgb), .80); line-height:1.55}
.highlight__dot{width:10px; height:10px; border-radius:999px; background: rgba(247,166,0,.95); box-shadow: 0 0 0 4px rgba(247,166,0,.18); margin-top: 6px; flex:0 0 auto}

.contact2__cta{display:flex; flex-wrap:wrap; gap: 10px; margin-top: 6px}
.contact2__note{margin: 12px 0 0 0; color: rgba(var(--brand-blue-rgb), .72); font-size: 14px}

.btn--wa{
  background: linear-gradient(180deg, rgba(44,184,91,.95), rgba(27,160,72,.95));
  color: #0b1b10;
  border-color: rgba(27,160,72,.25);
  box-shadow: 0 14px 30px rgba(27,160,72,.18);
}
.btn--wa:hover{filter: brightness(1.03)}

.contact2__cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contactCard{
  display:grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  row-gap: 4px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(250,246,241,.72);
  border: 1px solid rgba(20,33,61,.12);
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  min-height: 120px;
}
.contactCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(20,33,61,.10);
}
.contactCard__icon{
  grid-row: 1 / span 3;
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(var(--brand-blue-rgb), .92);
}
.contactCard__icon svg{width:22px; height:22px; fill: currentColor}
.contactCard__k{font-family:"Montserrat", sans-serif; font-weight: 800; color: rgba(var(--brand-blue-rgb), .92); font-size: 13px}
.contactCard__v{color: rgba(var(--brand-blue-rgb), .80); font-size: 14px; line-height:1.25}
.contactCard__hint{color: rgba(var(--brand-blue-rgb), .58); font-size: 12px}

.contactCard--wa{background: rgba(27,160,72,.10); border-color: rgba(27,160,72,.22)}
.contactCard--note{background: rgba(227,154,59,.06)}

@media (max-width: 900px){
  .contact2__grid{grid-template-columns: 1fr}
  .contact2__cards{grid-template-columns: 1fr}
}

/* Legacy Kontakt (wird aktuell nicht mehr genutzt, bleibt aber kompatibel) */
.contact__meta{display:grid; gap: 10px; margin-top: 14px}
.meta{
  display:flex; flex-direction:column; gap: 4px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(20,33,61,.10);
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
}
.meta__k{font-family:"Montserrat", sans-serif; font-weight: 800; color: var(--blue); font-size: 12px; letter-spacing:.04em; text-transform:uppercase}
.meta__v{color: rgba(var(--brand-blue-rgb), .82)}
.form{
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: var(--shadow);
}
.form__row{display:grid; grid-template-columns: 1fr 1fr; gap: 10px}
.field{display:grid; gap: 6px; margin-bottom: 10px}
.field span{font-family:"Montserrat", sans-serif; font-weight: 800; color: rgba(var(--brand-blue-rgb), .90); font-size: 13px}
input, textarea{
  width: auto;
  font: inherit;
  color: rgba(var(--brand-blue-rgb), .92);
  background: rgba(250,246,241,.72);
  border: 1px solid rgba(20,33,61,.14);
  border-radius: 14px;
  padding: 12px 12px;
  outline:none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
textarea{resize: vertical; min-height: 140px}
input:focus, textarea:focus{
  border-color: rgba(227,154,59,.35);
  box-shadow: 0 0 0 4px rgba(227,154,59,.12);
}
input:invalid:focus, textarea:invalid:focus{
  border-color: rgba(204, 57, 57, .5);
  box-shadow: 0 0 0 4px rgba(204, 57, 57, .10);
}
.consent{
  display:flex; gap: 10px; align-items:flex-start;
  margin: 10px 0 12px 0;
  color: rgba(var(--brand-blue-rgb), .76);
  font-size: 13px;
}
.consent input{width:18px; height:18px; margin-top: 2px}
.form__actions{display:grid; gap: 10px}
.form__hint{
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(227,154,59,.05);
  border: 1px solid rgba(227,154,59,.10);
  color: rgba(var(--brand-blue-rgb), .78);
  font-size: 13px;
}

.form__status{
  margin-top: 10px;
  border-radius: 16px;
  padding: 10px 12px;
  display:none;
}
.form__status.is-ok{
  display:block;
  background: rgba(46, 160, 67, .10);
  border: 1px solid rgba(46, 160, 67, .20);
  color: rgba(var(--brand-blue-rgb), .90);
}
.form__status.is-err{
  display:block;
  background: rgba(204, 57, 57, .08);
  border: 1px solid rgba(204, 57, 57, .18);
  color: rgba(var(--brand-blue-rgb), .90);
}

/* ===== Footer ===== */
.footer{
  padding: 26px 0 34px 0;
  /* Only ONE divider line should be visible (the .footer__divider). */
  border-top: none;
}

/* Eleganter Footer-Trenner (länglicher Strich innerhalb der Container-Breite) */
.footer__divider{
  height: 1px;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto 18px;
  background: rgba(20,33,61,.16);
  border-radius: 999px;
}
.footer__inner{
  display:grid;
  /* Brand links stay compact on the left; link columns align neatly on the right */
  grid-template-columns: minmax(320px, 520px) 1fr;
  gap: 18px;
  align-items:flex-start;
}
.footer__brand{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 8px;
}
.footer__logo{height: 74px; width:auto}
.footer__badge{height: 84px; width:auto; opacity: .98}

.footer__badgeRow{display:flex; align-items:center; gap: 12px;}
.footer__badgeText{margin:0; font-family:"Montserrat", sans-serif; font-weight: 700; color: rgba(var(--brand-blue-rgb), .78); font-size: 14px; letter-spacing: .01em;}

/* Footer brand layout:
   - Tagline must be vertically centered to the LOGO (not between logo + certificate)
   - Certificate sits under the logo
*/
.footer__brandTop{
  display:flex;
  align-items:center; /* centers tagline to logo */
  gap: 12px;
  width: auto;
}
.footer__tagline{
  margin:0;
  font-family:"Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(var(--brand-blue-rgb), .82);
  font-size: 16px;
  text-align: left;
}
.footer__links{
  display:flex;
  flex-direction: row;
  /* Place the navigation links more to the right (above the Neaforge line) */
  justify-content: flex-end;
  gap: 40px;
  font-family:"Montserrat", sans-serif;
  font-weight: 700;
  color: rgba(var(--brand-blue-rgb), .78);
  justify-self: end;
  width: max-content;
}

/* Footer link columns (Angebote/Ablauf/Kontakt + Impressum/Datenschutz) */
.footer__col{
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
}
.footer__fine{
  grid-column: 1 / -1;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap:wrap;
  color: rgba(var(--brand-blue-rgb), .66);
  font-size: 13px;
  align-items:center;
}
.dot{opacity:.6}

/* Zertifikat-Siegel im Footer */
.footer__cert{
  justify-self:end;
  display:flex;
  align-items:center;
  grid-column: 2;
}
.footer__cert img{
  height: 78px;
  width: auto;
  opacity: .95;
}

/* ===== Reveal animation ===== */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero__inner{grid-template-columns: 1fr; gap: 16px}
  .hero{padding-top: 74px}
  .strip__inner{grid-template-columns: 1fr}
  .strip__cards{grid-template-columns: 1fr}
  .cards{grid-template-columns: 1fr}
  .card{min-height: unset}
  .split{grid-template-columns: 1fr}
  .about{grid-template-columns: 1fr}
  .contact__grid{grid-template-columns: 1fr}
  .footer__inner{grid-template-columns: 1fr}
  .footer__links{
    justify-content: flex-start;
    width: auto;
    justify-self: start;
    gap: 26px;
  }
  .footer__col{align-items:flex-start}
  .footer__cert{justify-self:flex-start; grid-column:auto}
}

/* Mobile hero: keep everything visually centered and remove right-heavy shapes */
@media (max-width: 640px){
  /* Use predictable full-width padding inside the hero to avoid any perceived shift */
  .hero .container{
    width: auto;
    margin-inline: auto;
    padding-inline: 16px;
  }

  .hero__inner{
    justify-items: center;
    justify-content: center;
  }

  /* Split hero (Slider + Bild) must stretch full-width on mobile.
     Otherwise the slider becomes visually "narrow" because items don't stretch. */
  .hero.hero--split .hero__inner{justify-items: stretch; justify-content: stretch}

  /* Cleaner mobile hero: one focused card (Slider + CTA), image becomes subtle background */
  .hero.hero--split{
    padding: 74px 0 26px 0;
    /* Mobile: show content first and the IMAGE as a real element below (not as background) */
    background:
      radial-gradient(820px 520px at 18% 8%, rgba(227,154,59,.10), transparent 62%),
      radial-gradient(740px 520px at 84% 0%, rgba(247,166,0,.10), transparent 62%),
      rgba(250,246,241,.78);
  }

  .hero.hero--split .heroSplit{grid-template-columns: 1fr; gap: 14px}

  /* Hide the separate image card on mobile (it makes the first screen too long/"unruhig") */
  .hero.hero--split .heroSplit__right{display:flex}
  .hero.hero--split .heroSplit__right{margin-top: 10px}

  .hero.hero--split .heroTagline{
    width: auto;
    justify-content: center;
    padding: 8px 12px;
    font-size: 14px;
    box-shadow: 0 10px 26px rgba(20,33,61,.08);
  }

  .hero.hero--split .heroSlider{width: auto; border-radius: 22px; box-shadow: 0 18px 46px rgba(20,33,61,.10)}

  /* Give the slide a reserved bottom area for the dots (no overlaps) */
  .hero.hero--split .heroSlide{padding: 18px 16px 54px 16px}
  .hero.hero--split .heroSlide h1{font-size: clamp(24px, 7.4vw, 34px); line-height: 1.12; margin-bottom: 10px}
  .hero.hero--split .heroSlide .lead{font-size: 14.5px; line-height: 1.6}
  .hero.hero--split .heroSlide .bullets{font-size: 14px; margin-top: 10px}
  .hero.hero--split .heroSlide .bullets li{margin: 4px 0}

  /* On mobile, the CTA should feel like a clean primary action */
  .hero.hero--split .heroSlide__cta{margin-top: 14px}
  .hero.hero--split .heroSlide__cta .btn{width: auto; justify-content: center; border-radius: 16px}

  /* Mobile: use swipe + dots only (arrows feel busy and cover content) */
  .hero.hero--split .heroSlider__arrow{display:none}

  .hero.hero--split .heroSlider__dots{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    padding: 0;
    justify-content: center;
    gap: 8px;
    pointer-events: auto;
  }
  .hero.hero--split .heroSlider__dot{width: 9px; height: 9px}

  /* (CTA is inside each slide now) */

  /* Cleaner header on mobile */
  .header__inner{padding: 8px 0}
  .brand__logo{height: 70px; transform: scale(1.12); transform-origin: left center}
  .nav__toggle{width: 46px; height: 46px; border-radius: 16px}
  /* Make the hero cards perfectly centered on mobile */
  .hero__copy,
  .hero__panel{
    width: auto;
    max-width: 560px;
    margin-inline: auto;
  }

  /* Slightly tighter typography so the layout feels cleaner on small screens */
  .hero__copy{padding: 22px 20px}
  .hero__copy h1{line-height: 1.04}

  .hero__copy h1{font-size: clamp(30px, 8.5vw, 44px)}

  /* Ensure the background stays centered and never appears shifted to the right */
  .hero__bg{
    background-position: 50% 50%;
    transform: scale(1.01);
  }

  /* Less left/right bias on small screens */
  .hero__overlay{
    background:
      linear-gradient(180deg, rgba(250,246,241,.40), rgba(250,246,241,.28)),
      radial-gradient(900px 500px at 50% 20%, rgba(31,59,255,.22), transparent 62%),
      radial-gradient(700px 420px at 50% 80%, rgba(255,138,0,.24), transparent 62%);
  }

  .hero__shape{display:none}

  /* Mobile: show hero image under the slide */
  .hero.hero--split .heroImageCard__media img{height: 220px;}
}

/* CTA: on small screens, stack neatly (fixes the "Bereit für den nächsten Schritt" layout) */
@media (max-width: 860px){
  .cta{
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 12px;
  }
  .cta__text{width: 100%}
  .cta .btn{width: auto; justify-content: center}
}

/* Mobile Footer Links: two clean columns with comfortable spacing */
@media (max-width: 640px){
  .footer__links{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    width: auto;
    justify-content: initial;
    justify-self: start;
  }

  .footer__col{
    gap: 8px;
  }

  .footer__links a{
    width: auto;
    padding: 10px 10px;
    border-radius: 14px;
  }
}

@media (max-width: 860px){
  .nav__toggle{display:inline-flex; align-items:center; justify-content:center}
  .nav__list{
    position: absolute;
    right: 20px;
    /* Open the mobile menu right below the fixed header */
    top: calc(var(--header-offset) + 10px);
    width: min(320px, calc(100vw - 40px));
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(20,33,61,.12);
    box-shadow: var(--shadow);
    display:none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .nav__list.is-open{display:flex}
  .nav__list a{padding: 12px 12px}
  .form__row{grid-template-columns: 1fr}
}

/* Better reading on small screens: stack columns and avoid cramped 2-col layouts */
@media (max-width: 820px){
  .split{grid-template-columns: 1fr;}
  .grid2{grid-template-columns: 1fr;}
}

/* On very small screens, allow long button labels to wrap (prevents horizontal scrolling) */
@media (max-width: 520px){
  .btn{white-space: normal; text-align:center;}
}


/* ===== Polishing / Eleganz ===== */
::selection{background: rgba(247,166,0,.28)}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline: 3px solid rgba(227,154,59,.28);
  outline-offset: 3px;
  border-radius: 14px;
}
.header__inner{padding: 6px 0}
.brand__logo{height: 132px}
.nav__list a{position:relative}
.nav__list a:not(.btn)::after{
  content:"";
  position:absolute;
  left: 10px; right: 10px; bottom: 6px;
  height: 2px;
  background: linear-gradient(90deg, rgba(247,166,0,.0), rgba(247,166,0,.75), rgba(247,166,0,.0));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
  border-radius: 99px;
  opacity: .9;
}
.nav__list a:not(.btn):hover::after{transform: scaleX(1)}

.card{transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 70px rgba(20,33,61,.14);
  border-color: rgba(227,154,59,.18);
}
.card__body{gap: 10px}
.card__actions{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content:flex-start;
  gap: 8px;
  margin-top: auto;
}
.card__actions .link{margin-top: 0}
.card__actions .btn{box-shadow:none}
.card__actions .btn:hover{transform: translateY(-1px)}
.card__actions .btn:active{transform: translateY(0px)}

/* Subpages */
.page-hero{
  padding: 68px 0 18px 0;
}
.page-hero__wrap{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 0;
}
.page-hero__wrap--single{grid-template-columns: 1fr}
.page-hero__content{
  padding: 22px 22px;
}
.breadcrumb{
  display:flex; gap: 8px; flex-wrap:wrap;
  font-family:"Montserrat", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: rgba(var(--brand-blue-rgb), .70);
  margin-bottom: 10px;
}
.breadcrumb a{color: rgba(227,154,59,.92)}
.pill{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(227,154,59,.14);
  background: rgba(227,154,59,.06);
  color: rgba(227,154,59,.92);
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  font-size: 12px;
  margin-top: 10px;
}
.pill--lg{
  padding: 11px 16px;
  font-size: 15px;
}
.pill--xl{
  padding: 12px 18px;
  font-size: 16px;
}
.page-hero__media{
  min-height: 260px;
  background-size: cover;
  background-position: center;
}
.page-grid{
  display:grid;
  grid-template-columns: 1fr .95fr;
  gap: 18px;
  align-items:start;
}
.page-grid--stack{
  grid-template-columns: 1fr;
}

/* Simple spacing utilities */
.mt12{margin-top:12px}
.mt24{margin-top:24px}
.mt28{margin-top:28px}
.mt36{margin-top:36px}

/* Text helpers */
.lead2--wide{max-width:none}

/* Strong section subheads */
.h3Strong{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: rgba(var(--brand-blue-rgb), .92);
  /* visually separate sub-sections (esp. after iconcard grids) */
  position: relative;
  padding-top: 16px;
}

.h3Strong::before{
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: var(--line-accent);
  margin-bottom: 10px;
}

/* Force single-column grid for iconcards where needed */
.grid2--single{
  grid-template-columns: 1fr;
}

/* 2x2 image grid (used in Azubis/Studierende/Erwachsene Hero) */
.page-hero__media--grid{
  background: none;
  min-height: auto;
}

/* Keep the grid compact and "professional" */
.mediaGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Match the clean 2x2 look (like the reference screenshot): centered squares with generous spacing */
  justify-items: center;
  align-items: center;
  gap: 40px 56px;
  max-width: 760px;
  margin: 0 auto;
  align-content: start;
}

/* 2 columns -> 4 images become a 2x2 block */
.mediaGrid--quad{ /* no-op: already 2 columns */ }

.mediaGrid img{
  /* Fixed square thumbnails, like in the screenshot */
  width: min(320px, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  box-sizing: border-box;
}

/* Responsive: keep 2 columns, just reduce height */
@media (max-width: 920px){
  .mediaGrid{ max-width: 640px; gap: 28px 34px; }
  .mediaGrid img{ width: min(280px, 100%); }
}

@media (max-width: 560px){
  .mediaGrid{ max-width: 100%; gap: 14px 16px; }
  .mediaGrid img{ width: 100%; }
}

.panel-soft{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  padding: 16px;
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
}

/* Media + Text split helpers */
.split--equal{align-items:center}
.media-soft{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
  height: auto;
}
.media-soft img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
}
.panel-plain{
  background: transparent;
  border: 0;
  border-left: 3px solid rgba(192,122,43,.35);
  border-radius: 0;
  padding: 0 0 0 14px;
  box-shadow: none;
}
.kv{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
.kv__row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(250,246,241,.70);
  border: 1px solid rgba(20,33,61,.10);
}
.kv__k{font-family:"Montserrat", sans-serif; font-weight: 800; color: rgba(var(--brand-blue-rgb), .88)}
.kv__v{color: rgba(var(--brand-blue-rgb), .74)}
.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,33,61,.18), transparent);
  margin: 18px 0;
}
.divider--orange{
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(192,122,43,.55), transparent);
}


/* Footer polish */
.footer__links a{
  padding: 8px 10px;
  border-radius: 12px;
  transition: background .18s ease;
}
.footer__links a:hover{background: rgba(227,154,59,.06)}

@media (max-width: 980px){
  .page-hero__wrap{grid-template-columns: 1fr}
  .page-grid{grid-template-columns: 1fr}
}
/* ===== WhatsApp button ===== */
.wa-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.wa-icon{width:18px; height:18px; fill:#25D366}

/* Swap hero columns on desktop: panel left, text right */
@media (min-width: 980px){
  .hero__copy{order:2}
  .hero__panel{order:1}
}

/* ===== WhatsApp helpers ===== */
.wa-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius: 14px;
  border:1px solid rgba(37,211,102,.28);
  background: rgba(37,211,102,.10);
  transition: transform .2s ease, background .2s ease;
}
.wa-mini:hover{background: rgba(37,211,102,.16)}
.wa-mini:active{transform: translateY(1px)}
.wa-mini svg{width:20px; height:20px; fill: #25D366}

/* Swap hero columns on desktop: panel left, text right */
@media (min-width: 980px){
  .hero__copy{order:2}
  .hero__panel{order:1}
}

/* WhatsApp meta style (elegant + not too heavy) */
.meta--wa{
  position:relative;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(37,211,102,.22);
  background: rgba(37,211,102,.06);
  box-shadow: 0 10px 22px rgba(20,33,61,.05);
}
.meta--wa:hover{background: rgba(37,211,102,.10)}
.meta--wa .meta__k{margin:0; white-space:nowrap}
.meta--wa .meta__v{margin-left:auto; padding-right:34px; color: rgba(var(--brand-blue-rgb), .78)}
.meta--wa .meta__icon{position:absolute; right:12px; top:50%; transform:translateY(-50%); opacity:.92}
.meta--wa .meta__icon svg{width:18px; height:18px}

/* ===== Overrides (v44): Startseite Hero (Slider links / Bild rechts) ===== */
.hero.hero--split{
  padding: 92px 0 54px 0;
  overflow: hidden;
  background: radial-gradient(900px 520px at 12% 10%, rgba(227,154,59,.10), transparent 60%),
              radial-gradient(760px 480px at 88% 0%, rgba(247,166,0,.12), transparent 60%),
              rgba(250,246,241,.65);
}
.hero.hero--split .hero__bg,
.hero.hero--split .hero__overlay,
.hero.hero--split .hero__shape{display:none}

.heroSplit{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  /* Vertically center the slider block relative to the photo */
  align-items: center;

  /*
    Desktop alignment tweak:
    Left column has the small "Einfach leichter Lernen" pill ABOVE the white slider card.
    To make both cards feel vertically aligned (bündig), we offset the right image card
    down by roughly the height of that pill (responsive via clamp).
  */
  /* The right column no longer needs a manual vertical offset */
  --heroRightOffset: 0px;
}

/* Left column: keep the small tagline on top, but vertically center the white slider card
   relative to the image card on the right (desktop). */
.heroSplit__left{
  display:flex;
  flex-direction: column;
  height: 100%;
  /* Slight inset so the text doesn't sit exactly on the container line */
  padding-left: 8px;
}

/* Center the "Du möchtest"-box vertically relative to the photo (desktop),
   without changing its width (same as v63). */
@media (min-width: 641px){
  .heroSplit__left .heroWantsWrap{
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
  }
}


/* Right column: stack image + trust card so the area below the image doesn't look empty */
.heroSplit__right{
  display:flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

/* (handled above in .heroSplit__left) */

.heroTagline{
  display:inline-flex;
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(var(--brand-blue-rgb), .92);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: 999px;
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: 0 16px 46px rgba(20,33,61,.10);
}

.heroSlider{
  position: relative;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  box-shadow: 0 18px 60px rgba(20,33,61,.10);
  overflow: hidden;
}
.heroSlider__track{position:relative; height:auto}
.heroSlide{
  padding: 24px 22px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
  position:absolute;
  inset:0;
}
.heroSlide.is-active{
  opacity: 1;
  transform: translateY(0);
}
.heroSlide h1{font-size: clamp(24px, 3.7vw, 44px); line-height:1.12; margin-bottom: 10px}
.heroSlide .lead{color: rgba(var(--brand-blue-rgb), .84)}

.heroSlide .bullets{margin-top: 10px}
.heroSlide .bullets li{margin: 6px 0}

/* CTA inside each slide (button moves with the slide content) */
.heroSlide__cta{
  margin-top: 16px;
  display:flex;
  align-items:center;
  gap: 12px;
}

.heroSlider__arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(20,33,61,.14);
  background: rgba(255,255,255,.74);
  box-shadow: 0 12px 26px rgba(20,33,61,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color: rgba(var(--brand-blue-rgb), .88);
  transition: transform .18s ease, background .18s ease;
}
.heroSlider__arrow svg{width: 20px; height: 20px}
.heroSlider__arrow--prev{left: 12px}
.heroSlider__arrow--next{right: 12px}
.heroSlider__arrow:hover{background: rgba(255,255,255,.86); transform: translateY(-50%) scale(1.03)}
.heroSlider__arrow:active{transform: translateY(-50%) scale(.98)}
.heroSlider__dots{
  display:flex;
  gap: 8px;
  padding: 14px 18px 18px 18px;
  justify-content: center;
}
.heroSlider__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(20,33,61,.18);
  background: rgba(20,33,61,.10);
  cursor: pointer;
}
.heroSlider__dot.is-active{
  background: rgba(227,154,59,.78);
  border-color: rgba(227,154,59,.35);
}

.hero__slogan{margin: 12px 0 0 0; color: rgba(var(--brand-blue-rgb), .78); line-height:1.6; max-width: 62ch; text-align: right}

.heroImageCard{
  background: rgba(255,255,255,.86);
  /* IMPORTANT: no physical border here.
     A physical border shrinks the content box and can make the image + glass bar
     look "not bündig" by 1–2px. We draw the border as an overlay instead. */
  border: 0;
  border-radius: var(--radius2);
  box-shadow: 0 18px 60px rgba(20,33,61,.10);
  overflow:hidden;
  position: relative;
  clip-path: inset(0 0 0 0 round var(--radius2));
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  clip-path: inset(0 0 0 0 round var(--radius2));
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  /* Hard clip for iOS/GPU backdrop-filter so nothing can bleed outside rounded corners */
  clip-path: inset(0 0 0 0 round var(--radius2));
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  /* Hard clip for iOS/GPU backdrop-filter so nothing can bleed outside rounded corners */
  clip-path: inset(0 0 0 0 round var(--radius2));
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
  transform: translateZ(0);
  contain: paint;
  margin: 0;
  width: 100%;
}

/* Border overlay that does NOT affect layout (keeps image + bar perfectly bündig) */
.heroImageCard::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(20,33,61,.10);
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}

.heroImageCard__media{
  position: relative;
  /* clipping happens on .heroImageCard (single source of truth for width + radius) */
}
.heroImageCard__media img{width:100%; height: 360px; object-fit: cover; display:block}

/* Bottom glass bar sits INSIDE the image (desktop + mobile)
   This guarantees identical width to the photo and perfect clipping on rounded corners. */
.heroImageCard__bar{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  /* hard clip inside the rounded photo (prevents any left/right "bleed") */
  border-radius: 0 0 var(--radius2) var(--radius2);
  overflow: hidden;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;

  /* give room for a very soft fade so it never looks like a separate layer */
  min-height: 118px;
  /* Tiny left inset so the text doesn't sit directly on the image edge */
  padding: 34px 22px 12px 14px;

  /* fade the *whole* bar (including blur) at the top edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.90) 34%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.90) 34%, #000 100%);

  /* we render the glass on ::before so clipping is perfect on all browsers */
  background: rgba(255,255,255,0.01);
  border-top: none;
  margin: 0;
  z-index: 2;
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

/* Elegant integrated CTA bar (sits perfectly inside the image – clipped by the media container) */

/* glass (blur + tint) */
.heroImageCard__bar::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* subtle glass: transparent + warm tint + blur. The gradient makes the transition invisible. */
  background: transparent;
}

/* keep ::after free for future, but don't add visible seams */
.heroImageCard__bar::after{content:"";display:none;}

.heroImageCard__bar > *{position: relative; z-index: 1;}
.heroImageCard__barText{
  margin: 0;
  min-width: 0;
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;

  /* clean & readable on blur (no pills / no extra UI) */
  color: rgba(255,255,255,0.96);
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);

  font-size: 14px;
  line-height: 1.15;

  /* never truncate */
  white-space: normal;
  overflow: visible;
  text-overflow: unset;

  max-width: 62%;
}


.heroImageCard__barBtn{box-shadow: 0 10px 22px rgba(20,33,61,.10)}
.heroImageCard__barTitle{
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(var(--brand-blue-rgb), .92);
  font-size: 14px;
  line-height: 1.15;
}
.heroImageCard__barSub{
  margin-top: 4px;
  color: rgba(var(--brand-blue-rgb), .70);
  font-size: 13px;
  line-height: 1.35;
}

/* Small trust/info card under the hero image (desktop) */
.heroSideCard{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: var(--radius2);
  box-shadow: 0 18px 60px rgba(20,33,61,.10);
  padding: 14px 16px;
  backdrop-filter: blur(10px);
}
.heroSideCard__row{display:flex; gap: 12px; align-items:center}
.heroSideCard__seal{
  width: 64px;
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 18px rgba(20,33,61,.10));
}
.heroSideCard__title{
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(var(--brand-blue-rgb), .92);
  font-size: 15px;
  line-height: 1.15;
}
.heroSideCard__text{margin-top: 6px; color: rgba(var(--brand-blue-rgb), .74); font-size: 13px; line-height: 1.45}
.heroSideCard__link{
  display:inline-flex;
  margin-top: 10px;
  color: rgba(227,154,59,.95);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.heroSideCard__link:hover{text-decoration: underline}

/* Mobile CTA under the slider (desktop uses the button inside the image card) */
.heroCtas{display:none; margin-top: 14px}
.heroCtas .btn{width: auto; justify-content:center}

@media (max-width: 900px){
  .heroSplit{grid-template-columns: 1fr;}
  /* when stacking on tablet, don't offset the right column */
  .heroSplit__right{padding-top: 0;}
  .heroImageCard__media img{height: 260px}
  .hero__slogan{text-align:left}
  .heroSideCard{display:none}
}

@media (max-width: 420px){
  .heroSlider__arrow{display:none}
  .heroSlider__dot{width: 11px; height: 11px}
}

/* ===== Contact: nur ein Feld + Treppenbild ===== */
.contactSimple__grid--single{grid-template-columns: 1fr; max-width: 720px; margin: 0 auto}
.contactSimple__image{margin: -18px -18px 14px -18px}
.contactSimple__image img{width:100%; height: 160px; object-fit: cover; display:block}

/* ===== Overrides (v45): Kontakt-Panel (wie Screenshot, aber im Design) ===== */
.contactOnepage{
  padding: clamp(26px, 5vw, 56px) 0;
  min-height: calc(100vh - 160px);
  display:flex;
  align-items:center;
}
.contactPanel{
  display:grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 22px;
  /* weniger "weißer Rand" – mehr Glas-Optik */
  background: rgba(250,246,241,.62);
  border: 0;
  border-radius: var(--radius2);
  box-shadow: 0 18px 60px rgba(20,33,61,.10);
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.contactPanel__media img{width:100%; height: 100%; min-height: 360px; object-fit: cover; display:block}
.contactPanel__content{padding: 24px 22px}
.contactPanel__title{
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(227,154,59,.95);
  margin: 0 0 10px 0;
  font-size: clamp(28px, 4vw, 44px);
}
.contactPanel__line{height: 3px; width: min(520px, 100%); background: rgba(227,154,59,.25); border-radius: 999px; margin: 8px 0 14px 0}
.contactPanel__sub{
  margin: 0 0 18px 0;
  color: rgba(var(--brand-blue-rgb), .86);
  font-weight: 800;
  text-transform: none;
  letter-spacing: .02em;
  font-size: 18px;
}
.contactPanel__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 10px 0 16px 0;
}
.contactOption{
  display:grid;
  grid-template-columns: 58px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items:center;
  padding: 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(20,33,61,.10);
  background: rgba(250,246,241,.6);
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
  text-decoration:none;
}
.contactOption:hover{background: rgba(250,246,241,.82)}

/* Telefon-Kachel mit WhatsApp-Bereich (rechts) */
.contactOption--split{
  display:flex;
  padding: 0;
  overflow: hidden;
}
.contactOption--split .contactOption__main{
  flex: 1;
  /* Allow shrinking on narrow screens so the WhatsApp button never overflows */
  min-width: 0;
  display:grid;
  grid-template-columns: 58px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items:center;
  padding: 16px 14px;
  text-decoration: none;
  color: inherit;
}
.contactOption--split .contactOption__main:hover{background: rgba(250,246,241,.82)}
.contactOption__wa{
  /* WhatsApp: icon only */
  width: 74px;
  min-width: 74px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 0;
  padding: 10px;
  text-decoration:none;
  border-left: 0;
  margin: 14px 14px 14px 0;
  border-radius: 16px;
  border: 1px solid rgba(37,211,102,.24);
  background: rgba(255,255,255,.28);
  box-shadow: 0 10px 22px rgba(20,33,61,.05);
  color: rgba(var(--brand-blue-rgb), .90);
  font-weight: 800;
  overflow: visible;
}
.contactOption__wa:hover{background: rgba(37,211,102,.08)}
.contactOption__waIcon{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible;
}
.contactOption__waIcon img{width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; display:block; filter: drop-shadow(0 10px 22px rgba(20,33,61,.10));}
.contactOption__waIcon svg{display:none}
.contactOption__waText{display:none}

@media (max-width: 520px){
  /* WhatsApp icon larger + never clipped on mobile */
  .contactOption__wa{min-width: 64px; width: 64px; padding: 10px}
  .contactOption__waText{display:none}
  .contactOption__waIcon{width: 44px; height: 44px; overflow: visible}

  /* On very small screens, long labels/numbers must be allowed to wrap.
     Otherwise the right WhatsApp button can get pushed outside the card. */
  .contactOption__main .contactOption__label{white-space: normal}
  .contactOption__value{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Keep the icon safely inside the rounded card edge */
  .contactOption__wa{overflow: hidden}
  .contactOption__waIcon{overflow: hidden}
  .contactOption__waIcon img{filter: none}
}

@media (max-width: 520px){
  /* keep it clean on very small screens */
  .contactOption__wa{min-width: 56px; padding: 10px; gap: 0}
  .contactOption__waText{display:none}

  /* Long CTA texts must wrap on mobile (prevents horizontal scrolling) */
  .btn{white-space: normal; text-align:center}
}
.contactOption__icon{
  grid-row: 1 / span 2;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: rgba(247,166,0,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  color: #fff;
  box-shadow: none;
}
.contactOption__icon svg{width: 26px; height: 26px}
.contactOption__label{color: rgba(var(--brand-blue-rgb), .78); font-weight: 700}
.contactOption__main .contactOption__label{white-space:nowrap}
.contactOption__value{color: rgba(var(--brand-blue-rgb), .92); font-weight: 800}

/* (WhatsApp-Pill wurde in die Telefon-Kachel integriert) */

/* One-page Variante: Bild als Hintergrund, alles sofort sichtbar */
.contactPanel--onepage{
  grid-template-columns: 1fr;
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
  contain: paint;
  background: rgba(250,246,241,.50);
}
.contactPanel--onepage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% 10%, rgba(227,154,59,.18), transparent 60%),
    linear-gradient(180deg, rgba(250,246,241,.78), rgba(250,246,241,.52));
}
.contactPanel--onepage .contactPanel__media{
  position:absolute;
  inset: 0;
  opacity: .65;
  pointer-events:none;
  z-index:0;
}
.contactPanel--onepage .contactPanel__media img{
  width: 100%;
  height:100%;
  min-height: unset;
  object-fit: cover;
  object-position: 55% 50%;
  transform: scale(1.03);
  filter: saturate(.95) contrast(1.05) brightness(.82);
}
.contactPanel--onepage .contactPanel__content{
  position: relative;
  z-index:2;
  padding: clamp(22px, 4vw, 46px);
  max-width: 980px;
}
.contactPanel--onepage .contactPanel__grid{margin-top: 18px}

@media (max-width: 980px){
  .contactPanel{grid-template-columns: 1fr}
  .contactPanel__media img{min-height: 220px}
}
@media (max-width: 640px){
  .contactPanel__grid{grid-template-columns: 1fr}
}

/* ===== About Button ===== */
.about__actions{margin-top: 14px}

/* ===== Über mich: Zertifikat größer ===== */
.certWrap{
  display:flex;
  gap: 18px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.certWrap__img{
  width: min(560px, 100%);
  border-radius: var(--radius2);
  border: 1px solid rgba(20,33,61,.10);
  box-shadow: 0 18px 60px rgba(20,33,61,.10);
  background: rgba(255,255,255,.86);
  padding: 14px;
}
.certWrap__img img{width:100%; height:auto; display:block}
.certWrap__text{flex: 1; min-width: 240px}

/* ===== Cookie Banner ===== */
.cookieBanner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 14px;
}
.cookieBanner__inner{
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(20,33,61,.14);
  background: rgba(250,246,241,.92);
  box-shadow: 0 18px 60px rgba(20,33,61,.16);
  backdrop-filter: blur(10px);
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: flex-end;
}
.cookieBanner__title{
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  color: rgba(var(--brand-blue-rgb), .95);
  margin: 0 0 6px 0;
  font-size: 16px;
}
.cookieBanner__text{
  margin: 0;
  color: rgba(var(--brand-blue-rgb), .78);
  font-size: 13.5px;
  line-height: 1.45;
}
.cookieBanner__text a{color: rgba(227,154,59,.95); font-weight: 700}
.cookieBanner__actions{display:flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end}
.cookieBtn{
  appearance: none;
  border: 1px solid rgba(20,33,61,.18);
  background: rgba(255,255,255,.72);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  color: rgba(var(--brand-blue-rgb), .92);
}
.cookieBtn:hover{background: rgba(255,255,255,.92)}
.cookieBtn--primary{
  border-color: rgba(247,166,0,.35);
  background: rgba(247,166,0,.92);
  color: #fff;
  box-shadow: none;
}
.cookieBtn--primary:hover{background: rgba(247,166,0,.98)}

@media (max-width: 720px){
  .cookieBanner__inner{grid-template-columns: 1fr;}
  .cookieBanner__actions{justify-content: flex-start}
}

body.hasCookieBanner{padding-bottom: 120px}

/* ===== v51: Mobile-Startseite – eleganter & ordentlicher ===== */
@media (max-width: 640px){
  /* Header etwas kompakter */
  .header__inner{padding: 8px 0}
  .brand__logo{height: 68px; transform: scale(1.12); transform-origin: left center}

  /* Hero insgesamt weniger "hoch" */
  .hero.hero--split{padding: 64px 0 18px 0}
  .hero.hero--split .heroSplit{gap: 14px}

  /* Tagline-Pill schlanker */
  .heroTagline{
    font-size: 13px;
    padding: 8px 12px;
    margin-bottom: 10px;
    box-shadow: 0 10px 26px rgba(20,33,61,.08);
  }

  /* Slider-Karte: ruhiger, weniger "klobig" */
  .heroSlider{border-radius: 22px}

  /* Inhalt bekommt unten Platz für Navigation (ohne Überlappungen) */
  .hero.hero--split .heroSlide{padding: 18px 18px 64px 18px}
  .heroSlide h1{
    font-size: clamp(26px, 7.2vw, 34px);
    line-height: 1.10;
    margin: 0 0 8px 0;
  }
  .heroSlide .lead{font-size: 15px; line-height: 1.55; margin: 0 0 10px 0}
  .heroSlide .bullets{padding-left: 16px; font-size: 15px}
  .heroSlide .bullets li{margin: 6px 0}

  /* Pfeile nach unten (über den Punkten), damit nichts den Text verdeckt */
  .heroSlider__arrow{
    top: auto;
    bottom: 14px;
    transform: none;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 10px 22px rgba(20,33,61,.10);
  }
  .heroSlider__arrow--prev{left: 14px}
  .heroSlider__arrow--next{right: 14px}
  .heroSlider__arrow:hover{transform: none}
  .heroSlider__arrow:active{transform: none}

  /* Punkte als Overlay unten mittig (spart Höhe, sieht cleaner aus) */
  .heroSlider__dots{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    padding: 0;
    justify-content: center;
    pointer-events: none;
  }
  .heroSlider__dot{pointer-events: auto; width: 10px; height: 10px}

  /* Bildkarte kompakter */
  .heroImageCard__media img{height: 200px}

  /* Bottom-Bar bleibt im Bild – nur kompaktere Abstände */
  .heroImageCard__bar{padding: 16px 18px 14px 12px; gap: 12px}
  .heroImageCard__barText{font-size: 16px; line-height: 1.2; max-width: 70%;}
}

/* Sehr kleine Handys: Pfeile komplett aus, Swipe + Punkte bleiben */
@media (max-width: 420px){
  .heroSlider__arrow{display:none}
  .hero.hero--split .heroSlide{padding-bottom: 56px}
}

/* --- Safety override: keep inputs full width (fix for accidental width changes) --- */
input, textarea{width: 100% !important;}


.heroImageCard__bar{z-index:2}
.heroImageCard__media{background: transparent;}

/* ================================
   Footer (Mega) – ähnlich Beispielbild
   ================================ */
.footer--mega{
  padding: 0;
  /* Match site palette (warm beige + subtle brand glow) */
  background:
    radial-gradient(900px 420px at 18% -20%, rgba(22,54,255,.20), transparent 58%),
    radial-gradient(900px 420px at 92% 10%, rgba(255,106,0,.18), transparent 58%),
    rgba(255,255,255,.42);
  /* Use the same blue as in the logo for all footer typography */
  color: rgba(var(--brand-blue-rgb), .92);
  border-top: 1px solid rgba(20,33,61,.10);
  backdrop-filter: blur(10px);
}
.footer--mega a{
  color: rgba(var(--brand-blue-rgb), .92);
  text-decoration: none;
}
.footer--mega a:hover{
  color: rgba(var(--brand-blue-rgb), 1);
  text-decoration: none;
  background: rgba(var(--brand-blue-rgb), .10);
  border-radius: 10px;
}

.footerMega{
  padding: 44px 0 26px;
  display: grid;
  /* Brand column less wide so logo doesn't look stretched */
  grid-template-columns: minmax(200px, 260px) 1fr 1fr minmax(180px, 220px);
  gap: 34px;
  align-items: start;
}

.footerMega__brand{
  display:flex;
  flex-direction:column;
  gap: 10px;
  /* Desktop: logo + slogan left of navigation */
  align-items:flex-start;
  text-align:left;
}
.footerMega__logo{
  height: 150px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  filter: none;
}
.footerMega__tagline{margin:0; font-family:"Montserrat", sans-serif; font-weight: 700; letter-spacing: .02em; color: rgba(var(--brand-blue-rgb), .74);}

.footerMega__col{display:flex; flex-direction:column; gap: 10px;}
.footerMega__col h4{
  margin: 0 0 6px 0;
  font-family:"Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 16px;
  color: var(--brand-blue);
}
.footerMega__col a{font-weight: 700; font-family:"Montserrat", sans-serif;}
.footerMega__col a{padding: 6px 8px; margin-left: -8px; width: fit-content;}

/* WhatsApp (Footer) – use provided logo */
.footerLink--wa{display:flex; align-items:center; gap: 10px}
.footerLink--wa img{width: 26px; height: 26px; object-fit: contain; display:block}

.footerMega__col--logos{
  /* Zertifikat-Überschrift exakt mittig über dem Siegel ausrichten */
  align-items: center;
  text-align: center;
}
.footerMega__badge{
  margin-top: 6px;
  height: 120px;
  width: auto;
  opacity: .98;
  filter: none;
}

.footerMega__bottom{
  background: rgba(255,255,255,.22);
  border-top: 1px solid rgba(20,33,61,.10);
}
.footerMega__bottomInner{
  padding: 14px 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(var(--brand-blue-rgb), .72);
}
.footerMega__bottomLinks{display:flex; align-items:center; gap: 10px; font-family:"Montserrat", sans-serif; font-weight: 700;}
.footerMega__bottomLinks .sep{opacity:.6}

.footerMega__copy{display:flex; flex-direction:column; gap: 4px;}
.footerMega__credit{font-family:"Montserrat", sans-serif; font-weight: 700; color: rgba(var(--brand-blue-rgb), .78);}
.footerMega__credit a{color: rgba(var(--brand-blue-rgb), .96); font-weight: 900; text-decoration: none; border-bottom: 1px solid rgba(var(--brand-blue-rgb), .35);}
.footerMega__credit a:hover{border-bottom-color: rgba(var(--brand-blue-rgb), .65);}


/* Responsive */
@media (max-width: 980px){
  .footerMega{grid-template-columns: 1fr 1fr; gap: 26px;}
  /* On smaller screens, keep the brand centered above the footer columns */
  .footerMega__brand{grid-column: 1 / -1; align-items:center; text-align:center; justify-self:center; margin-bottom: 6px;}
  .footerMega__col--logos{grid-column: 1 / -1;}
}
@media (max-width: 640px){
  .footerMega{grid-template-columns: 1fr; padding: 34px 0 18px;}
  .footerMega__logo{height: 124px;}
  .footerMega__badge{height: 104px;}
  .footerMega__bottomInner{justify-content:flex-start;}
}


/* ===== Startseite: "Du möchtest" Box ===== */
.heroWantsWrap{
  position: relative;
  max-width: 620px;
}
.heroWantsWrap .heroTagline{
  position:absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
@media (max-width: 640px){
  .heroWantsWrap{max-width: 100%;}
  .heroWantsWrap .heroTagline{position: static; transform:none; margin-bottom: 10px;}
  .heroWants{padding: 20px 18px 18px 18px;}
  /* Keep the slide readable on mobile, but still prominent */
  .heroWants__list--slider li{font-size: clamp(22px, 7vw, 32px);}
  .heroWants__end{position: static; margin-top: 10px; margin-bottom: 0; right:auto; bottom:auto;}
}

.heroWants{
  margin-top: 2px;
  position: relative;
  overflow: hidden;

  /* etwas größer + gleiche warme Akzentfarbe wie der Kontakt-Button */
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(227,154,59,.22);
  border-radius: var(--radius2);
  padding: 30px 26px 24px 28px;
  display:flex;
  flex-direction:column;

  box-shadow: 0 12px 26px rgba(20,33,61,.06);
}

/* Akzent-Leiste im Button-Gradient (wie "Kontakt") */
.heroWants::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, var(--btn-accent-1), var(--btn-accent-2));
  border-top-left-radius: var(--radius2);
  border-bottom-left-radius: var(--radius2);
}

.heroWants__title{
  font-family:"Montserrat", sans-serif;
  font-weight: 900;
  letter-spacing: -.01em;
  margin-bottom: 14px;
  font-size: 22px;
}
.heroWants__list{
  margin:0;
  padding-left: 18px;
  color: rgba(var(--brand-blue-rgb), .84);
}
.heroWants__list li{margin: 6px 0}

/* Unterpunkte im Hero sliden (1 Punkt zur Zeit) */
.heroWants__list--slider{
  list-style: none;
  padding-left: 0;
  position: relative;
  overflow: hidden;
  margin: 0;
  /* Fill the card so we don't get empty/unused space */
  flex: 1 1 auto;
  height: auto;
  min-height: 3.4em; /* JS sets a taller min-height based on the longest slide */
  transition: none;
}

/* Off-screen measuring clone (JS) – prevents visible layout jumps */
.heroWants__list--slider.is-measuring{
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.heroWants__list--slider.is-measuring li{
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
}
.heroWants__list--slider li{
  margin: 0;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  opacity: 0;
  transform: translateY(calc(-50% + 16px));
  transition: opacity .35s ease, transform .35s ease;

  padding-left: 0;
  font-weight: 900;
  /* The slide itself should be the visual focus (bigger than title/pill) */
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.35;
  /* Textfarbe wie der Kontakt-Button (Orange) */
  color: var(--orange);
  text-align: center;
}
.heroWants__list--slider li::before{
  content: none;
}
.heroWants__list--slider li.is-active{
  opacity: 1;
  transform: translateY(-50%);
}
.heroWants__list--slider li.is-leaving{
  opacity: 0;
  transform: translateY(calc(-50% - 16px));
}
.heroWants__end{
  /* Outside the card (HTML) – keep it fixed so nothing can "hüpfen" */
  position: absolute;
  right: -10px;
  bottom: -18px;
  margin: 0;
  font-family:"Montserrat", sans-serif;
  font-weight: 900;
  color: rgba(var(--brand-blue-rgb), .90);
  font-size: 16px;
  text-align: right;
  padding-right: 0;
}

/* ===== Über mich (Homepage) ===== */
.aboutRole{
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  letter-spacing: -.01em;
  font-size: 20px;
  margin: 6px 0 10px 0;
  color: rgba(var(--brand-blue-rgb), .96);
}

/* Professionelle Portrait-Optik im "Über mich" Bereich */
.split--single{ grid-template-columns: 1fr; }

.aboutMedia{
  display:flex;
  gap: 22px;
  align-items:flex-start;
  margin-top: 12px;
  /* Align photo + text with the section heading (left aligned) */
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.aboutMedia__text{min-width: 0;}

/* Über-mich-Seite: Inhalte bündig links unter der H1 ausrichten */
.aboutMedia.aboutMedia--page{
  max-width: none;
  margin-inline: 0;
}
.aboutMedia.aboutMedia--page + .aboutActions{
  max-width: none;
  margin-inline: 0;
}
.aboutMedia.aboutMedia--page ~ .moreinfoPanel{
  max-width: none;
  margin-inline: 0;
}

/* Über-mich-Seite: gesamter Content linksbündig unter der H1 (nicht zentriert) */
/*
  Wichtig: Auf der Über-mich-Seite soll der komplette Content (Bild + Text + Buttons + Panels)
  exakt unter der H1 links beginnen – also NICHT als schmaler Block zentriert.
*/
.page-ueber .split.split--single{
  /* Grid-Item soll die volle Containerbreite nutzen */
  justify-items: stretch;
}
.page-ueber .split.split--single > div{
  width: 100%;
}
.page-ueber .aboutMedia,
.page-ueber .aboutActions,
.page-ueber .moreinfoPanel{
  margin-inline: 0 !important;
  max-width: none !important;
}

/* Mobile: auch hier links statt zentriert, damit alles bündig unter der Überschrift steht */
@media (max-width: 820px){
  .page-ueber .aboutMedia{align-items: flex-start;}
}

.aboutPortrait{
  flex: 0 0 var(--about-photo-w);
  max-width: var(--about-photo-w);
  margin: 0;
}
.aboutPortrait img{
  display:block;
  width: 100%;
  height: auto;
  border-radius: var(--about-photo-radius);
  border: 1px solid rgba(20,33,61,.12);
  box-shadow: 0 14px 28px rgba(20,33,61,.08);
}

.aboutActions{
  margin-top: 14px;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

@media (max-width: 820px){
  /* On phones: keep the portrait left-aligned (not centered) */
  .aboutMedia{flex-direction: column; align-items: flex-start;}
  .aboutPortrait{flex-basis:auto; max-width: 260px; width: min(260px, 78%);}
  .aboutMedia__text{width: 100%;}
}

/* ===== Ablauf-Seite: 4 Blöcke (ohne 1/2/3) ===== */
.flowGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  /* stretch both columns so the aside can be vertically centered between the left info blocks */
  align-items:stretch;
}

/* Index-Variante ohne rechte Spalte */
.flowGrid--single{
  grid-template-columns: 1fr;
}
.flowBlocks{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 2px;
}
.flowBlock{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 18px 0;
  box-shadow: none;
  border-bottom: 1px solid var(--line-accent);
}
.flowBlock p{ margin: 0; }

/* Remove the divider line on the last row (2-column grids) */
.flowBlocks .flowBlock:nth-last-child(-n+2){
  border-bottom: 0;
  padding-bottom: 0;
}
.processSteps{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 900px){
  .processSteps{ grid-template-columns: 1fr; }

  /* On 1-column stacks, only remove divider on the last item */
  .processSteps .processStep{
    border-bottom: 1px solid var(--line-accent);
    padding-bottom: 18px;
  }
  /* Re-enable divider for the second last item (stacked layout) */
  .processSteps .processStep:nth-last-child(-n+2){
    border-bottom: 1px solid var(--line-accent);
    padding-bottom: 18px;
  }
  .processSteps .processStep:last-child{
    border-bottom: 0;
    padding-bottom: 0;
  }
}
.processStep{
  border-left: 0;
  padding: 0 0 18px 0;
  border-bottom: 1px solid var(--line-accent);
}

/* Remove the divider line on the last row (2-column grids) */
@media (min-width: 901px){
  .processSteps .processStep:nth-last-child(-n+2){
    border-bottom: 0;
    padding-bottom: 0;
  }
}
.processStep p{ margin: 0; }
.processCta{
  margin-top: 16px;
  text-align: center;
}
.flowBlock h3{margin:0 0 8px 0}

.flowOnlineHint{
  margin-top: 10px;
  padding-top: 8px;
  text-align: center;
}
.flowOnlineHint__line{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap: 10px;
  margin: 2px 0;
}

.flowOnlineHint__cta{
  gap: 0;
  margin-top: 6px;
}
.flowOnlineHint__line .dot{
  font-size: 16px;
  line-height: 1;
  margin-top: 3px;
  color: rgba(var(--brand-blue-rgb), .70);
}
.flowOnlineHint__title{
  font-family:"Montserrat", sans-serif;
  font-weight: 900;
  color: rgba(var(--brand-blue-rgb), .88);
}
.flowOnlineHint__text{
  font-size: 15px;
  line-height: 1.55;
  color: rgba(var(--brand-blue-rgb), .76);
}
@media (max-width: 700px){
  .flowOnlineHint{ text-align:left; }
  .flowOnlineHint__line{ justify-content:flex-start; }
}
.flowAside{
  background: rgba(255,255,255,.46);
  border: 1px solid rgba(20,33,61,.10);
  border-left: 4px solid rgba(192,122,43,.45);
  border-radius: 0;
  overflow:hidden;
  box-shadow: none;
}
.flowAside--noimage{overflow:visible; display:flex;}

/* Vertically center the online hint/CTA relative to the left "info boxes" */
.flowAside--noimage .flowAside__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  padding: 14px 14px;
}

.flowAside--noimage .hero__actions{
  justify-content:center;
}

.flowAside--noimage .flowAside__centerNote{
  margin-top: 0;
}
.flowAside img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}
.flowAside__content{padding: 14px 14px}
.flowAside__note{
  margin-top: 8px;
  font-family:"Montserrat", sans-serif;
  font-weight: 900;
  color: rgba(var(--brand-blue-rgb), .88);
}



.flowAside__centerNote{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 6px;
}
.flowAside__centerLine{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap: 10px;
  max-width: 560px;
}

.flowAside__centerCta{
  gap: 0;
  margin-top: 6px;
}

.flowAside__centerLine .dot{
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
  color: rgba(var(--brand-blue-rgb), .75);
}
.flowAside__centerTitle{
  font-family:"Montserrat", sans-serif;
  font-weight: 900;
  color: rgba(var(--brand-blue-rgb), .88);
}
.flowAside__centerText{
  font-size: 16px;
  line-height: 1.55;
  color: rgba(var(--brand-blue-rgb), .76);
}
@media (max-width: 700px){
  .flowAside__centerLine{max-width: 100%;}
  .flowAside__centerText{font-size: 15px;}
}
/* ===== Schüler-Seite: Sprechblasen ===== */
.bubbles{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.bubble{
  position: relative;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: 18px;
  padding: 12px 12px 14px 12px;
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
  color: rgba(var(--brand-blue-rgb), .84);
  line-height: 1.55;
  font-size: 13px;
}
.bubble::after{
  content:"";
  position:absolute;
  bottom:-10px;
  left: 18px;
  width: 18px;
  height: 18px;
  background: rgba(255,255,255,.78);
  border-left: 1px solid rgba(20,33,61,.10);
  border-bottom: 1px solid rgba(20,33,61,.10);
  transform: rotate(45deg);
  border-bottom-left-radius: 4px;
}

/* ===== Schüler-Seite: Textliste (ohne Kästchen) ===== */
.quoteList{
  margin: 14px 0 0 0;
  padding: 0;
  list-style: none;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.quoteList li{
  position: relative;
  max-width: 92%;
  padding: 12px 14px;
  line-height: 1.55;
  color: rgba(var(--brand-blue-rgb), .84);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(20,33,61,.10);
  border-radius: 6px; /* subtle, not the large rounded cards */
  box-shadow: 0 10px 22px rgba(20,33,61,.06);
}

/* Speech-bubble look (alternating left/right) */
.quoteList li:nth-child(odd){align-self:flex-start}
.quoteList li:nth-child(even){align-self:flex-end}
.quoteList li::after{
  content:"";
  position:absolute;
  bottom:-8px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(20,33,61,.10);
  border-right: 1px solid rgba(20,33,61,.10);
  transform: rotate(45deg);
}
.quoteList li:nth-child(odd)::after{left: 18px}
.quoteList li:nth-child(even)::after{right: 18px}

@media (max-width: 640px){
  .quoteList li{max-width: 100%}
}
details.detailsButton summary{
  list-style:none;
  cursor:pointer;
}
details.detailsButton summary::-webkit-details-marker{display:none}

.detailsBtn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  cursor: pointer;
  font-family:"Montserrat", sans-serif;
  font-weight: 900;
  color: rgba(var(--brand-blue-rgb), .92);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.detailsBtn:hover{color: rgba(227,154,59,.95)}
.detailsBtn::after{
  content:"▾";
  font-weight: 900;
  transform: translateY(-1px);
}
details[open] > summary .detailsBtn::after{content:"▴"}

/* ===== Modal (für "Kurz an dich" Bild) ===== */
.detailsBtn--modal::after{content:"⤢"}

.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.modal.is-open{display:block}
.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}
.modal__panel{
  position: relative;
  width: min(980px, 94vw);
  max-height: calc(100vh - var(--header-offset) - 28px);
  margin: calc(var(--header-offset) + 14px) auto 14px;
  background: #fff;
  border-radius: 0; /* keine runden Kästen */
  overflow: auto;
  padding: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.25);
}
.modal__close{
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  color: rgba(var(--brand-blue-rgb), .92);
}
.modal__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
body.modalOpen{overflow:hidden}

/* Responsive tweaks */
@media (max-width: 900px){
  .flowGrid{grid-template-columns: 1fr}
  .flowBlocks{grid-template-columns: 1fr}
  .bubbles{grid-template-columns: 1fr}
  .brand__logo{height: 104px}

  /* On 1-column stacks, only remove divider on the last item */
  .flowBlocks .flowBlock{
    border-bottom: 1px solid var(--line-accent);
    padding-bottom: 18px;
  }
  /* Re-enable divider for the second last item (stacked layout) */
  .flowBlocks .flowBlock:nth-last-child(-n+2){
    border-bottom: 1px solid var(--line-accent);
    padding-bottom: 18px;
  }
  .flowBlocks .flowBlock:last-child{
    border-bottom: 0;
    padding-bottom: 0;
  }
}



/* Was ist Lerncoaching (Index) – professionell, clean (ohne Kästen) */
.learnList{
  counter-reset: learn;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  max-width: 920px;
}
.learnList li{
  counter-increment: learn;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  padding: 16px 0;
  line-height: 1.75;
  font-size: 16px;
  border-top: 1px solid rgba(20,33,61,.12);
}
.learnList li:first-child{ border-top: 0; padding-top: 0; }
.learnList li::before{
  content: counter(learn) ".";
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  margin-top: 2px;
}
.learnList li strong{ color: rgba(var(--brand-blue-rgb), .92); }

/* Ensure the full text stays in the wide column (prevents "word-per-line" wrapping) */
.learnList__body{grid-column: 2; min-width: 0;}


/* Trait list (clean, no boxes) */
.traitList{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
  max-width: 920px;
}
.traitList li{
  position: relative;
  padding-left: 16px;
  line-height: 1.7;
  color: rgba(var(--brand-blue-rgb), .82);
  font-size: 16px;
}
.traitList li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 900;
}
.traitList--hero{ margin-top: 10px; max-width: 760px; }
@media (max-width: 720px){
  .traitList{ grid-template-columns: 1fr; }
}

.moreinfoPanel{
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(20,33,61,.10);
  border-left: 4px solid rgba(192,122,43,.55);
  background: rgba(255,255,255,.42);
  border-radius: 0;
  box-shadow: none;
  /* Keep it aligned with the "Über mich" heading (left aligned) */
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.moreinfoPanel p{
  margin: 10px 0;
  line-height: 1.85;
  font-size: 15px;
  color: rgba(var(--brand-blue-rgb), .84);
}
.moreinfoPanel p:first-child{ margin-top: 0; }

/* "Weitere Infos" (Über mich): Text links, Bild rechts (professionell wie im Screenshot) */
.moreinfoSplit{
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--about-photo-w);
  gap: 22px;
  align-items: start;
}
.moreinfoSplit__text{min-width: 0;}
.moreinfoSplit .inlineFigure{
  margin: 0;
  justify-self: end;
}
.moreinfoSplit .inlineFigure img{
  width: 100%;
  max-width: 100%;
}
@media (max-width: 860px){
  .moreinfoSplit{ grid-template-columns: 1fr; }
  .moreinfoSplit .inlineFigure{ justify-self: center; margin-top: 12px; }
}

/* Listen im aufklappbaren Bereich */
.moreinfoPanel .checklist{ margin: 0; }
.moreinfoPanel .checklist li{ margin: 8px 0; }

/* Punkte-Liste (ohne Haken) – z.B. beruflicher Werdegang */
.dotlist{list-style:none; padding:0; margin: 10px 0 0 0}
.dotlist li{position:relative; padding-left:16px; margin: 8px 0; line-height:1.75; color: rgba(var(--brand-blue-rgb), .84); font-size: 15px}
.dotlist li::before{content:'•'; position:absolute; left:0; top:0; color: var(--accent); font-weight:900}

/* Bild im aufklappbaren Bereich */
.moreinfoPanel .inlineFigure{margin: 14px 0 6px}
.moreinfoPanel .inlineFigure img{
  display:block;
  width:100%;
  max-width: var(--about-photo-w);
  border-radius: var(--about-photo-radius);
  border: 1px solid rgba(20,33,61,.12);
  box-shadow: 0 14px 28px rgba(20,33,61,.08);
}
.moreinfoPanel .inlineFigure figcaption{margin-top:8px}

.moreinfoActions{margin-top: 18px}
.moreinfoPanel__sub{margin-top: 10px}

/* "Mehr Infos" Button: Pfeil + Zustand */
.js-moreinfo{
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.js-moreinfo::after{
  content: "▾";
  font-size: 14px;
  line-height: 1;
  opacity: .8;
  transform: translateY(-1px);
  transition: transform .2s ease;
}
.js-moreinfo[aria-expanded="true"]::after{
  transform: rotate(180deg) translateY(1px);
}

/* FAQ – clean, ohne runde Boxen (Kundin möchte keine runden Karten) */
.faq{
  max-width: 920px;
}
.faq details{
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-accent);
  border-radius: 0;
  padding: 14px 0;
  box-shadow: none;
}
.faq details:first-child{
  border-top: 1px solid rgba(20,33,61,.12);
}
.faq summary{
  padding: 6px 0;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.faq summary::after{
  content: "+";
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  color: rgba(var(--brand-blue-rgb), .72);
}
.faq details[open] summary::after{
  content: "–";
}
.faq__content{
  padding: 6px 0 2px 0;
}
.faq__content p{
  margin: 10px 0 0 0;
  color: rgba(var(--brand-blue-rgb), .78);
  line-height: 1.75;
  font-size: 15px;
}


@media (max-width: 640px){
  .card__media{height: 200px;}
}


/* =============================
   v69 – Feinschliff (Startseite)
   - Logo etwas größer (ohne Menühöhe zu verändern)
   - Mobile: erst Bild, dann Text (gleiche Kartenbreite)
   - "Du möchtest …" & "… einfach leichter Lernen?" gleich groß + blau
   - Button "Angebote" nutzt das gleiche CTA-Design wie "Kontakt"
   ============================= */

/* Logo: nur optisch skalieren (Header-Höhe bleibt über die feste Höhe stabil) */
/* Logo ist im Asset beschnitten (weniger Leerraum) – dadurch wirkt es größer bei gleicher Header-Höhe */
.brand__logo{height: 132px; width:auto; transform: none;}
@media (max-width: 900px){
  .brand__logo{height: 104px; transform: none;}
}
@media (max-width: 640px){
  .brand__logo{height: 70px; transform: none;}
}

/* Startseite: Titel + Pill rechts neben dem Button (gleich groß, blau) */
.heroWants__title{
  font-size: clamp(16px, 1.8vw, 20px);
  color: rgba(var(--brand-blue-rgb), .92);
}
.hero__actions--wants .heroWants__pill.pill{
  font-size: clamp(16px, 1.8vw, 20px);
  color: rgba(var(--brand-blue-rgb), .92);
  border-color: rgba(var(--brand-blue-rgb), .14);
  background: rgba(255,255,255,.62);
}

/* Mobile-Layout: Bild zuerst, dann Text – beide Karten gleich breit/ruhig */
@media (max-width: 640px){
  .hero.hero--split .heroSplit{
    grid-template-areas:
      "media"
      "copy";
  }
  .hero.hero--split .heroSplit__right{grid-area: media; margin-top: 0; margin-bottom: 14px;}
  .hero.hero--split .heroSplit__left{grid-area: copy;}

  /* Mobile: keine zusätzliche linke Innenkante – Bild + Text exakt gleich breit */
  .heroSplit__left{padding-left: 0;}

  .heroSplit__left,
  .heroSplit__right{
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }

  /* Bild und Textfeld ähnlich hoch (ruhiger Gesamteindruck) */
  .heroImageCard__media img{height: 260px;}
  .heroWants{min-height: 260px;}
}

/* ================================
   v70 – Hero: gleiche Kartenhöhe (Slide-Rahmen = Bildhöhe)
   - Linke Slide-Karte exakt so hoch wie das Bild rechts
   - "Du möchtest" und "… einfach.leichter.lernen?" identisch groß
   ================================ */

/* Single source of truth for the hero card height */
.hero.hero--split{ --heroCardH: 360px; }
@media (max-width: 900px){ .hero.hero--split{ --heroCardH: 260px; } }
@media (max-width: 640px){ .hero.hero--split{ --heroCardH: 260px; } }

/* Force the photo and the slide card to share the same height */
.hero.hero--split .heroImageCard__media img{ height: var(--heroCardH) !important; }
.hero.hero--split .heroWants{ min-height: var(--heroCardH); margin-top: 0; }
@media (min-width: 641px){
  .hero.hero--split .heroWants{ height: var(--heroCardH); }
  /* keep CTA aligned to the bottom so the card looks calm/professional */
  .hero.hero--split .heroWants .hero__actions--wants{ margin-top: auto; }
}

/* "Du möchtest" (Titel) soll etwas größer sein als die Pill rechts */
.hero.hero--split{
  --heroWantsMetaSize: clamp(16px, 1.8vw, 20px);
  --heroWantsTitleSize: clamp(18px, 2.2vw, 26px);
}
.hero.hero--split .heroWants__title{
  font-size: var(--heroWantsTitleSize) !important;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.01em;
  color: rgba(var(--brand-blue-rgb), .92);
}
.hero.hero--split .hero__actions--wants .heroWants__pill.pill{
  font-size: var(--heroWantsMetaSize) !important;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.01em;
  color: rgba(var(--brand-blue-rgb), .92);
}
/* Keep the CTA button and the right pill visually equal (size + height) */
.hero.hero--split .hero__actions--wants{
  gap: 12px;
}
.hero.hero--split .hero__actions--wants .btn{
  /* v99: Angebot-Button im Hero-Slide etwas kleiner (ruhiger + passt zur Pill) */
  font-size: var(--heroWantsMetaSize);
  /* v100: Schrift dünner wie gewünscht */
  font-weight: 400;
  padding: 12px 20px;
  min-height: 52px;
}
.hero.hero--split .hero__actions--wants .heroWants__pill.pill{
  padding: 12px 18px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}