/* marthaschaffran.com - Personen-Seite von Martha Schaffran und Seite zu den Kita-Schulungen (seit 2026-10-14).
   Farben und Schrift wie die neue Website (db/website/assets/mdk.css: Rose-Creme + Rosenholz, Knopf in Beere,
   Newsreader selbst gehostet). Keine fremden Server, keine Cookies, kein JavaScript. */

@font-face{
  font-family:"Newsreader";
  src:url(/fonts/newsreader-latin-var.woff2) format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url(/fonts/newsreader-latin-italic.woff2) format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}

:root{
  --paper:#FAF4F0; --paper-2:#F5EAE3; --card:#FFFDFB;
  --ink:#2C1C16; --ink-2:#654A3F; --ink-3:#987A6C;
  --clay:#A84350; --clay-dk:#832F3B; --clay-soft:#F7E4E3;
  --rose:#E0A091; --gold:#C4883F;
  --line:#EADAD1; --line-2:#DAC4B8;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sh2:0 2px 4px rgba(44,28,22,.05),0 14px 32px -18px rgba(44,28,22,.3);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background-color:var(--paper);
  background-image:
    radial-gradient(60rem 28rem at 50% -8rem, rgba(224,160,145,.30), transparent 70%),
    radial-gradient(30rem 22rem at 100% 34rem, rgba(196,136,63,.08), transparent 70%);
  background-repeat:no-repeat;
  font:400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto}
a{color:var(--clay); text-underline-offset:.2em; text-decoration-thickness:1px}
a:hover{color:var(--clay-dk)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--serif); font-weight:500; color:var(--ink)}

main{max-width:58rem; margin:0 auto; padding:clamp(2.75rem,8vw,5rem) 1.25rem 0}
main.breit{max-width:66rem; padding-top:clamp(1.5rem,5vw,3rem)}

.eyebrow{margin:0 0 .65rem; font:600 .74rem/1.45 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--clay)}
.eyebrow span{white-space:nowrap}
.klein{font-size:.9rem; color:var(--ink-3)}
.mitte{text-align:center}

/* --- Knöpfe ------------------------------------------------------------- */
.knopf{
  display:inline-flex; align-items:center; gap:.55rem; padding:1rem 1.55rem; border-radius:999px;
  background:var(--clay); color:#fff; text-decoration:none; font:600 1rem/1 var(--sans);
  box-shadow:0 2px 3px rgba(131,47,59,.22),0 14px 26px -14px rgba(131,47,59,.6);
  transition:background-color .2s ease,transform .2s ease;
}
.knopf:hover{background:var(--clay-dk); color:#fff; transform:translateY(-1px)}
.knopf-leise{background:transparent; color:var(--clay); box-shadow:inset 0 0 0 1.5px var(--clay)}
.knopf-leise:hover{background:var(--clay-soft); color:var(--clay-dk)}

/* --- Kopf der Startseite ------------------------------------------------ */
.held{max-width:40rem; margin-left:auto; margin-right:auto; text-align:center}
.portrait{
  display:block; width:9.5rem; margin:0 auto 1.6rem; border-radius:50%;
  box-shadow:0 0 0 6px var(--card),0 0 0 7px var(--line),0 22px 44px -20px rgba(44,28,22,.5);
}
h1{margin:0 0 .5rem; font-size:clamp(2.5rem,8vw,3.7rem); line-height:1.04; letter-spacing:-.012em; font-variation-settings:"opsz" 48}
.rolle{margin:0 0 1.2rem; font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2.6vw,1.3rem); color:var(--ink-2)}
.rolle a{color:inherit; text-decoration-color:var(--line-2)}
.lede{
  max-width:34rem; margin:0 auto 1rem; font-family:var(--serif); font-size:clamp(1.18rem,2.8vw,1.38rem);
  line-height:1.5; color:var(--ink-2); font-variation-settings:"opsz" 18;
}
.angebot{max-width:31rem; margin:0 auto 1.7rem; color:var(--ink-2)}
.mehr{display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem 1.3rem; margin-top:1.25rem}
.mehr a{color:var(--ink-2); font-size:.95rem; text-decoration-color:var(--line-2)}
.mehr a:hover{color:var(--clay); text-decoration-color:currentColor}

/* --- Karten ------------------------------------------------------------- */
.karte{
  padding:clamp(1.4rem,4.5vw,2.2rem); border:1px solid var(--line); border-radius:22px;
  background:var(--card); box-shadow:var(--sh2);
}
.karte h2,.karte h3{margin:0 0 .8rem; font-size:clamp(1.45rem,3.4vw,1.85rem); line-height:1.2}
.karte p{margin:0 0 1rem; color:var(--ink-2)}
.karte p:last-child{margin-bottom:0}
.skizze img{display:block; width:100%; margin:0 auto; mix-blend-mode:multiply}

/* Hinweis auf die Kita-Schulungen (Startseite) */
.teaser{display:grid; gap:1.25rem; align-items:center; margin-top:clamp(3.5rem,9vw,5rem)}
.teaser .skizze img{max-width:24rem}
@media (min-width:760px){ .teaser{grid-template-columns:minmax(0,24rem) minmax(0,1fr); gap:3rem} }

/* --- Listen mit Punkt --------------------------------------------------- */
.punkte{display:grid; gap:.6rem; margin:1.1rem 0 0; padding:0; list-style:none; text-align:left}
.punkte li{position:relative; padding-left:1.25rem; color:var(--ink-2)}
.punkte li::before{content:""; position:absolute; left:0; top:.62em; width:.5rem; height:.5rem; border-radius:50%; background:var(--rose)}
.ausbildung{max-width:40rem; margin:clamp(3.5rem,9vw,4.5rem) auto 0; text-align:center}
.ausbildung h2{margin:0; font-size:clamp(1.35rem,3vw,1.6rem); line-height:1.25}
.ausbildung .punkte{display:inline-grid}

/* --- Kita-Seite --------------------------------------------------------- */
.kopfleiste{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  max-width:66rem; margin:0 auto; padding:1rem 1.25rem;
}
.kopf-name{font-family:var(--serif); font-size:1.2rem; color:var(--ink); text-decoration:none}
.kopf-name:hover{color:var(--clay)}
.kopf-anfrage{font:600 .92rem/1 var(--sans); padding:.6rem 1rem; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--clay); text-decoration:none}
.kopf-anfrage:hover{background:var(--clay-soft)}

.held-kita{max-width:46rem}
.held-kita h1{font-size:clamp(2.2rem,6.6vw,3.4rem); margin-bottom:1rem}
.held-kita .lede{margin-bottom:1.7rem}
.held-kita .klein{margin:1rem 0 0}
.chips{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:1.4rem 0 0; padding:0; list-style:none}
.chips li{padding:.4rem .85rem; border:1px solid var(--line-2); border-radius:999px; background:var(--card); font-size:.88rem; color:var(--ink-2)}
.skizze-held img{max-width:32rem; margin-top:2rem}

.abschnitt{margin-top:clamp(4rem,10vw,6rem)}
.abschnitt > .eyebrow,.abschnitt > h2,.abschnitt > .einleitung{text-align:center}
.abschnitt > h2{max-width:40rem; margin:0 auto; font-size:clamp(1.65rem,4.2vw,2.3rem); line-height:1.18}
.einleitung{max-width:36rem; margin:1rem auto 0; color:var(--ink-2)}

.zwei{display:grid; gap:1.5rem; margin-top:2.2rem}
@media (min-width:860px){ .zwei{grid-template-columns:1fr 1fr} }
.karten-bild{display:block; width:100%; max-width:20rem; margin:0 auto 1.2rem; mix-blend-mode:multiply}

.gruende{display:grid; gap:1.1rem; margin:2.2rem 0 0; padding:0; list-style:none}
@media (min-width:640px){ .gruende{grid-template-columns:1fr 1fr} }
@media (min-width:960px){ .gruende{grid-template-columns:1fr 1fr 1fr} }
.gruende li{padding:1.4rem 1.4rem 1.5rem; border:1px solid var(--line); border-radius:18px; background:var(--card)}
.gruende h3{margin:0 0 .5rem; font-size:1.25rem; line-height:1.25}
.gruende p{margin:0; font-size:.97rem; color:var(--ink-2)}

.schritte{counter-reset:schritt; display:grid; gap:1.1rem; max-width:44rem; margin:2.2rem auto 0; padding:0; list-style:none}
.schritte li{counter-increment:schritt; display:grid; grid-template-columns:2.6rem 1fr; column-gap:1rem}
.schritte li::before{
  content:counter(schritt); grid-row:span 2; display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--card); box-shadow:inset 0 0 0 1.5px var(--rose); font:500 1.25rem/1 var(--serif); color:var(--clay);
}
.schritte h3{margin:.35rem 0 .3rem; font-size:1.25rem}
.schritte p{margin:0; color:var(--ink-2)}
.abschnitt > .klein.mitte{margin-top:1.5rem}

.stimmen{display:grid; gap:1.1rem; margin:2.2rem 0 0; padding:0; list-style:none}
@media (min-width:760px){ .stimmen{grid-template-columns:1fr 1fr} }
.stimmen li{display:flex; flex-direction:column; justify-content:space-between; padding:1.5rem; border-radius:18px; background:var(--paper-2)}
.stimmen blockquote{margin:0}
.stimmen blockquote p{margin:0; font-family:var(--serif); font-size:1.15rem; line-height:1.5; color:var(--ink)}
.stimmen .wer{margin:1rem 0 0; font-size:.9rem; color:var(--ink-3)}

.ueber{display:grid; gap:1.5rem; align-items:start; max-width:52rem; margin-left:auto; margin-right:auto}
@media (min-width:760px){ .ueber{grid-template-columns:11rem 1fr; gap:2.5rem} }
.ueber h2{margin:0 0 .9rem; font-size:clamp(1.5rem,3.6vw,1.9rem); line-height:1.2}
.ueber p{color:var(--ink-2)}
.portrait-klein{width:9rem; margin:0}
@media (max-width:759px){ .portrait-klein{margin:0 auto} .ueber > div > .eyebrow,.ueber h2{text-align:center} }

.faq{max-width:44rem; margin:2rem auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:1.1rem 0; font-family:var(--serif); font-size:1.2rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; font:400 1.4rem/1 var(--sans); color:var(--clay)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 1.2rem; color:var(--ink-2)}

.kontakt-block{
  margin:clamp(4rem,10vw,6rem) auto 0; max-width:46rem; padding:clamp(2rem,6vw,3rem) 1.25rem;
  border-radius:26px; background:var(--card); border:1px solid var(--line); box-shadow:var(--sh2); text-align:center;
}
.kontakt-block h2{margin:0 0 1.4rem; font-size:clamp(1.65rem,4.2vw,2.2rem)}
.kontakt-wege{display:grid; gap:.7rem; margin:1.8rem 0 0; padding:0; list-style:none}
@media (min-width:640px){ .kontakt-wege{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr)} }
.kontakt-wege a{display:block; padding:.85rem .9rem; border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--ink-2); font-size:.92rem; overflow-wrap:anywhere}
.kontakt-wege a:hover{border-color:var(--rose); color:var(--clay)}
.kontakt-wege b{display:block; margin-bottom:.15rem; font:600 .72rem/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--clay)}

/* --- Autorinnen-Seite: Zahlen, Haltung, Bekannt aus, Stimmen, Profile ---- */
.zahlen{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; max-width:46rem; margin:clamp(2.5rem,7vw,3.5rem) auto 0; padding:0; list-style:none; text-align:center}
@media (min-width:760px){ .zahlen{grid-template-columns:repeat(4,minmax(0,1fr))} }
.zahlen li{padding:1rem .6rem; border-top:1px solid var(--line)}
.zahlen b{display:block; font:500 clamp(1.25rem,3vw,1.5rem)/1.2 var(--serif); color:var(--ink)}
.zahlen span{display:block; margin-top:.25rem; font-size:.86rem; line-height:1.4; color:var(--ink-3)}

.haltung{max-width:44rem; margin:clamp(3.5rem,9vw,5rem) auto 0; text-align:center}
.haltung h2{margin:0 auto; max-width:36rem; font-size:clamp(1.55rem,4vw,2.1rem); line-height:1.2}
.haltung blockquote{margin:1.6rem 0 0; padding:clamp(1.4rem,4.5vw,2.2rem); border-radius:22px; background:var(--paper-2); text-align:left}
.haltung blockquote p{margin:0 0 1rem; font-family:var(--serif); font-size:clamp(1.08rem,2.4vw,1.2rem); line-height:1.6; color:var(--ink-2)}
.haltung blockquote p:last-child{margin-bottom:0}
.haltung blockquote strong{font-weight:500; color:var(--ink)}

.presse{max-width:52rem; margin:clamp(3rem,8vw,4rem) auto 0; text-align:center}
.presse > p{margin:0 0 1rem; font:600 .72rem/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.presse > div{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1.1rem 2rem}
.presse img{width:auto; height:2rem; opacity:.75; mix-blend-mode:multiply}
.presse img[alt="Zwergensprache"]{height:2.6rem}

.stimmen-drei{margin-top:2rem}
@media (min-width:860px){ .stimmen-drei{grid-template-columns:repeat(3,1fr)} }
.stimmen-drei blockquote p{font-size:1.08rem}

.sozial{margin:clamp(3rem,8vw,4rem) auto 0; text-align:center; color:var(--ink-2)}
.sozial p{margin:0 0 .8rem}
.sozial b{font-weight:600; color:var(--ink)}
.sozial div{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem}
.sozial a{padding:.55rem 1.1rem; border:1px solid var(--line-2); border-radius:999px; background:var(--card); color:var(--ink-2); text-decoration:none; font-size:.95rem}
.sozial a:hover{border-color:var(--rose); color:var(--clay)}
.ausbildung > .eyebrow{text-align:center}

/* --- Impressum und Datenschutz ------------------------------------------ */
main.recht{max-width:44rem; padding-top:clamp(1.5rem,5vw,3rem)}
.recht h1{font-size:clamp(2rem,6vw,2.7rem); margin-bottom:.4rem}
.recht h2{margin:2.4rem 0 .7rem; font-size:clamp(1.3rem,3vw,1.5rem); line-height:1.25}
.recht h3{margin:1.6rem 0 .5rem; font-size:1.15rem}
.recht p,.recht address{margin:0 0 1rem; color:var(--ink-2)}
.recht address{font-style:normal}
.recht .punkte{margin-bottom:1rem}

/* --- Fuss --------------------------------------------------------------- */
footer{
  max-width:40rem; margin:clamp(4rem,10vw,5.5rem) auto 0; padding:2.5rem 1.25rem 3rem;
  border-top:1px solid var(--line); text-align:center; color:var(--ink-3); font-size:.92rem;
}
.marke{display:inline-block}
.marke img{display:block; width:13.5rem}
.links{display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem 1.4rem; margin:1.3rem 0 1rem}
.links a{color:var(--ink-2); text-decoration-color:var(--line-2)}
footer details{max-width:34rem; margin:0 auto; text-align:left}
footer summary{cursor:pointer; text-align:center; color:var(--ink-2)}
footer details p{margin:.8rem 0 0; font-size:.88rem; line-height:1.6}
.copy{margin:1.5rem 0 0; font-size:.82rem}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}