/* ============================================================
   Max F. Munstermann — persönliche Webseite (v1-Gerüst)
   Statisch, self-contained. Farb-/Typo-System über Custom Properties.
   ============================================================ */

:root{
  --ink:        #16191d;   /* Fast-Schwarz, Text */
  --ink-soft:   #4a5157;   /* gedämpfter Text */
  --paper:      #f7f4ee;   /* warmes Off-White */
  --paper-2:    #efeae1;   /* Sektions-Alternative */
  --line:       #dcd6ca;   /* Trennlinien */
  --accent:     #0e5c56;   /* Petrol/Teal — Vertrauen, distinkt */
  --accent-2:   #0b4a45;   /* dunkler Hover */
  --accent-ink: #ffffff;
  --gold:       #b0863f;   /* warmer Akzent, sparsam */

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:  system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap: 1120px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Typo ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.1; letter-spacing:-0.01em;
  overflow-wrap:break-word; text-wrap:pretty; }
h1{ font-size:clamp(2.4rem, 6vw, 4rem); margin:.2em 0 .4em; }
h2{ font-size:clamp(1.8rem, 4vw, 2.7rem); margin:0 0 .6em; }
h3{ font-size:1.25rem; margin:0 0 .5em; }

.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:700;
  color:var(--accent);
  margin:0 0 .4rem;
}
.eyebrow--light{ color:var(--gold); }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.nav__brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.nav__mark{
  font-family:var(--serif); font-weight:700; font-size:1.05rem;
  color:var(--accent-ink); background:var(--accent);
  width:38px; height:38px; display:grid; place-items:center; border-radius:8px;
  letter-spacing:.02em;
}
.nav__name{ font-weight:600; font-size:.98rem; }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2rem); }
.nav__links a{ text-decoration:none; font-size:.95rem; font-weight:500; color:var(--ink-soft); transition:color .15s; }
.nav__links a:hover{ color:var(--ink); }
.nav__cta{
  color:var(--accent) !important; font-weight:700 !important;
  border:1px solid var(--accent); border-radius:999px; padding:.4rem 1rem;
}
.nav__cta:hover{ background:var(--accent); color:var(--accent-ink) !important; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-weight:600; font-size:.98rem;
  padding:.8rem 1.5rem; border-radius:999px; transition:transform .12s, background .15s, color .15s;
  border:1px solid transparent; cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); }
.btn--primary{ background:var(--accent); color:var(--accent-ink); }
.btn--primary:hover{ background:var(--accent-2); }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--lg{ padding:1rem 2rem; font-size:1.05rem; }

/* ---------- Hero ---------- */
.hero{ padding:clamp(3rem,7vw,6rem) 0; border-bottom:1px solid var(--line); }
.hero__inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero__inner > *{ min-width:0; }
.grid-2 > *{ min-width:0; }
.leadmagnet > *{ min-width:0; }
.hero__title{ margin-top:.1em; font-size:clamp(2rem, 4.4vw, 3.2rem); }
.hero__lead{ font-size:1.18rem; color:var(--ink-soft); max-width:46ch; margin:0 0 1.1rem; }
.hero__claim{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--accent);
  border-left:3px solid var(--gold); padding-left:1rem; margin:0 0 1.8rem; max-width:44ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

.portrait{
  aspect-ratio:4/5; border-radius:14px; overflow:hidden;
  background:linear-gradient(150deg,var(--accent),var(--accent-2));
  box-shadow:0 30px 60px -30px rgba(14,92,86,.55);
}
.portrait--photo{ display:block; width:100%; height:auto; object-fit:cover; object-position:center top; }
.portrait--placeholder{
  display:grid; place-content:center; text-align:center; color:#fff; gap:.3rem;
}
.portrait--placeholder span{ font-family:var(--serif); font-size:3.4rem; letter-spacing:.06em; opacity:.95; }
.portrait--placeholder small{ text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; opacity:.75; }

/* ---------- Sections ---------- */
.section{ padding:clamp(3.5rem,8vw,6.5rem) 0; }
.section--alt{ background:var(--paper-2); border-block:1px solid var(--line); }
.section--feature{ background:var(--paper-2); border-block:1px solid var(--line); }
.section__head--center{ text-align:center; max-width:48ch; margin-inline:auto; margin-bottom:2.5rem; }
.section__sub{ font-size:1.1rem; color:var(--ink-soft); margin:.6rem auto 0; }
.grid-2{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }

.prose p{ font-size:1.08rem; color:var(--ink-soft); margin:0 0 1.1rem; }
.pull{
  font-family:var(--serif); font-size:1.4rem; line-height:1.35; color:var(--ink);
  border-left:3px solid var(--gold); margin:1.6rem 0 0; padding:.2rem 0 .2rem 1.2rem;
}
.creds{ list-style:none; padding:0; margin:0 0 1.4rem; }
.creds li{ padding:.7rem 0; border-bottom:1px solid var(--line); font-size:1.05rem; color:var(--ink-soft); }
.creds strong{ color:var(--ink); }
.note{ font-size:.92rem; color:var(--ink-soft); font-style:italic; opacity:.8; }

/* ---------- Cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.cards--3{ grid-template-columns:repeat(3,1fr); }
.cards--2{ grid-template-columns:repeat(2,1fr); }
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:1.6rem 1.5rem; transition:transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -28px rgba(22,25,29,.4); border-color:var(--accent); }
.card h3{ color:var(--ink); }
.card p{ margin:0; color:var(--ink-soft); font-size:.98rem; }

/* Feature-Karten (Abschlussprüfung) */
.card--feature{ background:var(--paper); border-top:3px solid var(--accent); }
.card__num{ font-family:var(--serif); font-size:1.1rem; color:var(--gold); font-weight:700; display:block; margin-bottom:.4rem; }
.feature__cta{ text-align:center; margin-top:1.6rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.feature__links{ text-align:center; margin-top:2.4rem; font-size:.98rem; color:var(--ink-soft); }
.feature__links a{ color:var(--accent); text-decoration:none; font-weight:600; }
.feature__links a:hover{ text-decoration:underline; }

/* Lead-Magnet (Warm-Capture) */
.leadmagnet{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.leadmagnet__text h2{ margin-bottom:.5rem; }
.leadmagnet__text p{ color:var(--ink-soft); font-size:1.06rem; margin:0; }
.leadmagnet__form{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:1.6rem; }
.leadmagnet__form input{ width:100%; padding:.85rem 1rem; border:1px solid var(--line); border-radius:8px;
  font-size:1rem; font-family:var(--sans); margin-bottom:.8rem; background:#fff; }
.leadmagnet__form input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.leadmagnet__form .btn{ width:100%; }
.leadmagnet__fine{ font-size:.8rem; color:var(--ink-soft); margin:.8rem 0 0; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---------- Scoping-/Kontaktformular ---------- */
.form{ margin:1.4rem 0; }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.4rem; }
.form label{ display:block; font-size:.9rem; font-weight:600; color:var(--ink); }
.form__full{ margin-top:1rem; }
.form input, .form select, .form textarea{
  width:100%; margin-top:.35rem; padding:.7rem .8rem; border:1px solid var(--line);
  border-radius:8px; font-size:1rem; font-family:var(--sans); background:#fff; font-weight:400; color:var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.form__check{ display:flex; gap:.6rem; align-items:flex-start; margin:1.2rem 0; font-weight:400; font-size:.92rem; color:var(--ink-soft); }
.form__check input{ width:auto; margin-top:.2rem; flex:0 0 auto; }
.form__fine{ font-size:.82rem; color:var(--ink-soft); margin:.9rem 0 0; }
@media (max-width:640px){ .form__grid{ grid-template-columns:1fr; } }

/* ---------- CTA ---------- */
.section--cta{ background:var(--ink); color:var(--paper); text-align:center; }
.section--cta h2{ color:#fff; }
.cta{ max-width:56ch; margin-inline:auto; }
.cta__lead{ font-size:1.15rem; color:#c9cdd2; margin:0 auto 2rem; }
.cta__actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.section--cta .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.35); }
.section--cta .btn--ghost:hover{ border-color:#fff; }
.cta__fine{ margin-top:1.4rem; font-size:.82rem; color:#8b9096; letter-spacing:.02em; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:#aeb3b8; padding:2.6rem 0 2rem; border-top:1px solid rgba(255,255,255,.08); }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.9rem; }
.footer__mark{ font-family:var(--serif); font-weight:700; color:#fff; margin-right:.6rem; }
.footer__links{ display:flex; gap:1.4rem; }
.footer__links a{ color:#aeb3b8; text-decoration:none; }
.footer__links a:hover{ color:#fff; }

/* Footer-Menü (Sitemap) */
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:1.6rem 2rem; }
.footer__brand{ font-size:.92rem; color:#c9cdd2; line-height:1.5; }
.footer__brand .footer__mark{ display:inline-block; margin-bottom:.4rem; font-size:1.1rem; }
.footer__col h3{ color:#fff; font-family:var(--sans); font-size:.78rem; text-transform:uppercase; letter-spacing:.13em; margin:0 0 .7rem; }
.footer__col a{ display:block; color:#aeb3b8; text-decoration:none; font-size:.9rem; padding:.22rem 0; }
.footer__col a:hover{ color:#fff; }
.footer__region{ display:inline-block; margin-top:.6rem; font-size:.82rem; color:#8b9096; }
.footer__social{ display:inline-flex; align-items:center; gap:.45rem; margin-top:.8rem; color:#c9cdd2; text-decoration:none; font-size:.9rem; }
.footer__social:hover{ color:#fff; }
.footer__icon{ flex:0 0 auto; }
.link-arrow{ font-weight:600; color:var(--accent); text-decoration:none; }
.link-arrow:hover{ text-decoration:underline; }
.footer__col a.footer__cta{ margin-top:.5rem; color:var(--gold); font-weight:600; }
.footer__col a.footer__cta:hover{ color:#fff; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem 1.4rem;
  margin-top:2rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.08); font-size:.85rem; color:#8b9096; }
@media (max-width:760px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1 / -1; } }
@media (max-width:460px){ .footer__grid{ grid-template-columns:1fr; } }

/* placeholder-Links dezent markieren */
[data-placeholder]{ position:relative; }

/* ---------- Rechtstexte (Unterseiten) ---------- */
.legal{ padding:clamp(2.5rem,6vw,5rem) 0; }
.legal .wrap{ max-width:820px; }
.legal h1{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:.6em; }
.legal h2{ font-size:1.35rem; margin:2rem 0 .6rem; }
.legal h3{ font-size:1.05rem; margin:1.4rem 0 .4rem; }
.legal p, .legal li{ color:var(--ink-soft); font-size:1rem; }
.legal a{ color:var(--accent); }
.back-link{ display:inline-block; margin-bottom:1.5rem; text-decoration:none; color:var(--accent); font-weight:600; font-size:.95rem; }
.legal .ph{ background:#eef6f5; border-bottom:1px dashed var(--accent); padding:0 3px; color:#0b4a45; font-style:italic; font-size:.95em; }
.legal address{ font-style:normal; }
.callout{
  background:#fff5e6; border:1px solid #e7cfa0; border-left:4px solid var(--gold);
  border-radius:8px; padding:1rem 1.2rem; margin:1.4rem 0; color:#6b5220; font-size:.96rem;
}

/* ---------- Money-/Content-Unterseiten ---------- */
.breadcrumb{ font-size:.85rem; color:var(--ink-soft); margin-bottom:1.2rem; }
.breadcrumb a{ color:var(--accent); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb span{ margin:0 .4rem; opacity:.5; }

.page{ padding:clamp(2.5rem,6vw,4.5rem) 0; }
.page .wrap{ max-width:880px; }
.page h1{ font-size:clamp(2rem,4.5vw,3rem); margin-bottom:.5em; }
.page h2{ font-size:1.55rem; margin:2.4rem 0 .7rem; }
.page h3{ font-size:1.15rem; margin:1.5rem 0 .4rem; }
.page p, .page li{ color:var(--ink-soft); font-size:1.06rem; }
.page .lead{ font-size:1.22rem; color:var(--ink); max-width:60ch; }
.page ul{ padding-left:1.2rem; }
.page li{ margin:.35rem 0; }

/* Vergleichstabelle klassisch vs. digital */
.compare{ width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:1rem; }
.compare th, .compare td{ text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.compare thead th{ background:var(--paper-2); font-family:var(--sans); font-weight:700; color:var(--ink); }
.compare td:first-child{ font-weight:600; color:var(--ink); }
.table-scroll{ overflow-x:auto; }

/* Prozess-Schritte */
.steps{ list-style:none; padding:0; margin:1.2rem 0; display:grid; gap:1rem; }
.steps li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.steps .step-n{ font-family:var(--serif); font-weight:700; color:var(--accent-ink);
  background:var(--accent); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:.95rem; }

/* FAQ */
.faq{ margin:1.2rem 0; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); padding:.2rem 0; }
.faq summary{ cursor:pointer; font-weight:600; color:var(--ink); padding:.9rem 0; list-style:none; font-size:1.05rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; float:right; color:var(--accent); font-weight:700; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 0 1rem; margin:0; }

/* Autor-/Trust-Box (E-E-A-T) */
.author{ display:flex; gap:1.2rem; align-items:center; background:var(--paper-2);
  border:1px solid var(--line); border-radius:12px; padding:1.3rem 1.5rem; margin:2.5rem 0; }
.author__avatar{ flex:0 0 auto; width:64px; height:64px; border-radius:50%;
  background:linear-gradient(150deg,var(--accent),var(--accent-2)); color:#fff;
  display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:1.2rem; }
img.author__avatar{ display:block; object-fit:cover; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); }
.author__body{ font-size:.96rem; color:var(--ink-soft); }
.author__body strong{ color:var(--ink); }

/* schmaler Konversions-Block am Seitenende */
.page-cta{ background:var(--ink); color:var(--paper); border-radius:14px; padding:2rem 2rem; margin:2.5rem 0 0; text-align:center; }
.page-cta h2{ color:#fff; margin:.2rem 0 .6rem; }
.page-cta p{ color:#c9cdd2; margin:0 auto 1.2rem; max-width:52ch; }

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__figure{ order:-1; max-width:200px; }
  .grid-2{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr 1fr; }
  .nav__name{ display:none; }
}
@media (max-width:860px){
  .leadmagnet{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
}
/* Menü: unter 680px passt die volle Navigation nicht mehr in eine Zeile */
@media (max-width:680px){
  .nav__links{ gap:.9rem; margin-left:auto; }
  .nav__links a:not(.nav__cta){ display:none; }
  /* Handy-Menü */
  .nav__toggle{ display:grid; place-content:center; gap:4px; width:42px; height:42px; margin-left:.7rem;
    background:none; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
  .nav__toggle span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--ink);
    transition:transform .2s ease, opacity .2s ease; }
  .nav--open .nav__toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav--open .nav__toggle span:nth-child(2){ opacity:0; }
  .nav--open .nav__toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .nav--open .nav__links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 18px 30px -18px rgba(0,0,0,.25);
    padding:.4rem 1.25rem 1.3rem; }
  .nav--open .nav__links a:not(.nav__cta){ display:block; padding:.9rem 0; font-size:1.05rem; color:var(--ink);
    border-bottom:1px solid var(--line); }
  .nav--open .nav__cta{ margin-top:1rem; text-align:center; padding:.75rem 1rem; }
}
.nav__toggle{ display:none; }
@media (max-width:680px){ .nav__toggle{ display:grid; } }

/* Scroll-Einblendung (nur aktiv, wenn js/main.js die Klasse setzt) */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* Sprungziele nicht unter der fixierten Kopfleiste verstecken */
html{ scroll-padding-top:84px; }

/* Footer-Vorhang: Der Footer liegt fest hinter der Seite und wird erst sichtbar,
   wenn der letzte Block (z. B. dunkler Kontaktblock) nach oben weggescrollt ist.
   Nur auf großen Bildschirmen, da der Footer dort niedriger als das Fenster ist. */
@media (min-width:861px) and (min-height:640px){
  .footer{ position:sticky; bottom:0; z-index:0; }
  body > main, body > section{ position:relative; z-index:1; background-color:var(--paper); }
  body > main:last-of-type, body > section:last-of-type{
    box-shadow:0 28px 40px -18px rgba(0,0,0,.45); }
}