/* ============================================
   claudiapfeiffer.com
   Stand: April 2026
   Farbpalette: Mauve und Aubergine
   Typografie: Cormorant Garamond + Source Sans 3
   ============================================ */

:root{
  --bg-body:#e4d5dc;--bg-page:#f4eef0;--bg-soft:#faf5f6;--bg-arbeit:#ede0e4;
  --mauve:#6b3d54;--mauve-dark:#3d2331;--mauve-deep:#2d1f28;--mauve-muted:#8a6678;
  --rose-pale:#e8d5db;--line:rgba(107,61,84,0.18);--line-strong:rgba(107,61,84,0.3);
  --font-display:'Cormorant Garamond',serif;--font-body:'Source Sans 3',sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;padding:2rem;background:var(--bg-body);font-family:var(--font-body);color:var(--mauve-deep);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;}
.page{max-width:1100px;margin:0 auto;background:var(--bg-page);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(45,31,40,0.06);}
a{color:inherit;text-decoration:none;}
p{margin:0 0 1.25rem;}

.hero{padding:3.5rem 3rem 3rem;display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:center;}
.kicker{font-family:var(--font-display);font-size:13px;letter-spacing:0.2em;text-transform:uppercase;color:var(--mauve);margin-bottom:1.75rem;}
.hero h1{font-family:var(--font-display);font-size:46px;line-height:1.2;font-weight:400;margin:0 0 1.75rem;color:var(--mauve-deep);letter-spacing:-0.01em;}
.hero h1 em{color:var(--mauve);font-style:italic;}
.nav-anker{display:flex;gap:1.5rem;font-size:14px;color:var(--mauve);padding-top:1.25rem;border-top:0.5px solid var(--line-strong);max-width:480px;align-items:flex-start;}
.nav-anker .sep{color:#c9b5be;}
.nav-anker .zweizeilig{line-height:1.3;}
.portrait{aspect-ratio:3/4;border-radius:2px;overflow:hidden;background:var(--rose-pale);}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;}

.trenner{display:flex;align-items:center;justify-content:center;padding:1.5rem 0;}
.trenner .linie{height:0.5px;background:var(--line);width:120px;}
.trenner-auf-soft{background:var(--bg-soft);padding:2.25rem 0 0.5rem;}

.sektion-text{background:var(--bg-soft);padding:0 3rem 2.5rem;}
.sektion-text.first{padding-top:2.5rem;}
h2.sektions-titel{font-family:var(--font-display);font-size:30px;font-weight:400;margin:0 0 1.75rem;color:var(--mauve);letter-spacing:-0.01em;}
.sektion-text p{font-size:15.5px;line-height:1.8;max-width:66%;color:var(--mauve-deep);}
.sektion-text em.montessori{font-family:var(--font-display);font-size:18px;color:var(--mauve);font-style:italic;}

.stimmungsbild{background:var(--bg-soft);}
.stimmungsbild img{width:100%;height:auto;display:block;}

.zitat{padding:3rem 2.5rem;background:var(--mauve);text-align:center;}
.zitat .zitat-inner{display:inline-block;text-align:center;}
.zitat p{font-family:var(--font-display);font-size:26px;line-height:1.4;font-weight:400;font-style:italic;margin:0;color:var(--bg-page);max-width:42ch;margin-left:auto;margin-right:auto;}
.zitat .auth{font-family:var(--font-body);font-size:12px;color:#c9a8b5;margin:0.75rem 0 0;letter-spacing:0.05em;font-style:normal;text-align:left;}

.sektion-schreibe{background:var(--bg-soft);padding:3rem 3rem 2.5rem;}
.unter-ueberschrift{font-family:var(--font-display);font-size:20px;font-weight:500;margin:0 0 0.5rem;color:var(--mauve-deep);}
.unter-beschreibung{font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--mauve-muted);margin:0 0 1.25rem;}
.unter-beschreibung .normal{font-style:normal;color:var(--mauve);}
.buch-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1rem;align-items:stretch;}
.buch{padding:1.1rem 1.25rem;background:var(--bg-page);border-radius:4px;position:relative;display:flex;flex-direction:column;color:inherit;transition:background 0.2s ease, transform 0.2s ease;}
.buch:hover{background:#ede0e4;}
.buch .titel{font-family:var(--font-display);font-size:17px;font-style:italic;color:var(--mauve-deep);margin-bottom:0.3rem;line-height:1.25;}
.buch .jahr{font-size:12.5px;color:var(--mauve-muted);margin-bottom:0.5rem;font-variant-numeric:tabular-nums;}
.buch .beschreibung{font-size:12.5px;line-height:1.55;color:#3a2a32;margin-top:auto;}
.buch .badge{position:absolute;top:0.75rem;right:0.75rem;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mauve);background:var(--rose-pale);padding:2px 8px;border-radius:2px;opacity:0;transition:opacity 0.25s ease;}
.buch.mit-badge:hover .badge{opacity:1;}
.buch.mit-badge:hover{background:var(--bg-page);cursor:default;}
.artikel-liste{font-size:14px;line-height:1.75;margin-top:1.5rem;}
.artikel{display:grid;grid-template-columns:3.5rem 1fr auto;gap:1rem;padding:0.55rem 0;border-bottom:0.5px solid var(--line);align-items:baseline;}
.artikel:last-child{border-bottom:none;}
.artikel .jahr{color:var(--mauve-muted);font-variant-numeric:tabular-nums;font-size:13px;}
.artikel .medium{color:var(--mauve-muted);font-style:italic;font-size:12.5px;}
.magazin-hinweis{margin-top:1.25rem;font-size:13px;color:var(--mauve);font-style:italic;}

.sektion-arbeit{padding:2.75rem 3rem 3rem;background:var(--bg-arbeit);color:var(--mauve-deep);}
.sektion-arbeit h2{font-family:var(--font-display);font-size:30px;font-weight:400;margin:0 0 2rem;color:var(--mauve);letter-spacing:-0.01em;}
.gruppe-label{font-family:var(--font-display);font-size:13px;letter-spacing:0.2em;text-transform:uppercase;color:var(--mauve);margin-bottom:1rem;}
.gruppe-intro{font-size:15.5px;line-height:1.8;color:var(--mauve-deep);margin:0 0 1.25rem;max-width:66%;}
.arbeit-gruppe{margin-bottom:2.25rem;}
.arbeit-gruppe:last-child{margin-bottom:0;}
.kachel-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}
.kachel-grid-2 .kachel{padding:1.75rem 1.5rem 1.5rem;min-height:220px;}
.kachel-grid-2 .kachel .kachel-titel{font-size:22px;margin-bottom:0.6rem;}
.kachel .kachel-detail{font-size:13px;line-height:1.7;color:var(--mauve-deep);margin-top:0.75rem;}
.kachel-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem;}
.kachel{background:var(--bg-page);padding:1.25rem 1.25rem 1.1rem;border-radius:4px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;color:inherit;border-left:2px solid var(--mauve);}
.kachel .kachel-titel{font-family:var(--font-display);font-size:19px;font-style:italic;margin-bottom:0.5rem;color:var(--mauve);}
.kachel .kachel-sub{font-size:13px;line-height:1.65;color:var(--mauve-deep);}

.sektion-kontakt{padding:3rem;background:var(--bg-soft);}
.sektion-kontakt .inhalt{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;}
.sektion-kontakt p{font-size:15.5px;line-height:1.8;color:var(--mauve-deep);}
.visitenkarte{background:var(--bg-page);padding:1.5rem 1.75rem;border-left:2px solid var(--mauve);}
.visitenkarte .praxis-name{font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--mauve);margin-bottom:1rem;}
.visitenkarte .zeilen{font-size:14px;line-height:1.8;color:var(--mauve-deep);}
.link-unterstrichen{color:var(--mauve);border-bottom:0.5px solid var(--mauve);padding-bottom:1px;}

.impressum-kopf{padding:1.5rem 3rem 0;}
.impressum-inhalt{padding:0 3rem 3rem;}

.footer{padding:2.5rem 3rem;background:var(--mauve-dark);color:#c9b5be;display:flex;justify-content:space-between;align-items:center;font-size:12px;}
.footer .signatur{font-family:var(--font-display);font-style:italic;color:var(--rose-pale);font-size:14px;}
.footer .links{display:flex;gap:1.5rem;align-items:center;}
.footer .links a{color:var(--rose-pale);}
.footer .links .sep{color:var(--mauve);}

/* ============================================
   Responsive
   ============================================ */

/* Tablet */
@media (max-width:900px){
  body{padding:1rem;}
  .hero{padding:2.5rem 2rem 2rem;gap:2rem;}
  .hero h1{font-size:38px;}
  .sektion-text{padding-left:2rem;padding-right:2rem;}
  .sektion-schreibe{padding:2.5rem 2rem 2rem;}
  .sektion-arbeit{padding:2.25rem 2rem 2.5rem;}
  .sektion-kontakt{padding:2.5rem 2rem;}
  .footer{padding:2rem;}
  .impressum-kopf{padding:1.25rem 2rem 0;}
  .impressum-inhalt{padding:0 2rem 2.5rem;}
  .buch-grid{grid-template-columns:1fr 1fr;}
  .kachel-grid-3{grid-template-columns:1fr 1fr;}
  .sektion-text p,.gruppe-intro{max-width:100%;}
  .zitat p{font-size:24px;}
}

/* Mobile */
@media (max-width:640px){
  body{padding:0;font-size:16px;}
  .page{border-radius:0;box-shadow:none;}

  .hero{grid-template-columns:1fr;padding:2rem 1.25rem 1.75rem;gap:1.5rem;}
  .hero>div:first-child{order:2;}
  .hero .portrait{order:1;}
  .kicker{font-size:12px;margin-bottom:1rem;letter-spacing:0.18em;}
  .hero h1{font-size:28px;line-height:1.25;margin-bottom:1.25rem;}
  .hero h1 br{display:none;}
  .nav-anker{flex-wrap:wrap;gap:0.6rem 1rem;font-size:13px;padding-top:1rem;max-width:100%;}
  .portrait{max-width:260px;width:75%;margin:0 auto;aspect-ratio:3/4;}

  .trenner{padding:1rem 0;}
  .trenner-auf-soft{padding:1.5rem 0 0.25rem;}

  h2.sektions-titel,.sektion-arbeit h2{font-size:26px;margin-bottom:1.25rem;letter-spacing:0;}

  .sektion-text{padding:0 1.25rem 1.75rem;}
  .sektion-text.first{padding-top:1.75rem;}
  .sektion-text p,.gruppe-intro{max-width:100%;font-size:15.5px;line-height:1.75;hyphens:auto;-webkit-hyphens:auto;}
  .sektion-text em.montessori{font-size:17px;}

  .zitat{padding:2.25rem 1.5rem;}
  .zitat p{font-size:21px;line-height:1.4;}
  .zitat .auth{font-size:11.5px;}

  .sektion-schreibe{padding:2rem 1.25rem 1.75rem;}
  .gruppe-label{font-size:12px;letter-spacing:0.18em;}
  .unter-beschreibung{font-size:14.5px;}
  .buch-grid{grid-template-columns:1fr;gap:0.65rem;margin-bottom:0.65rem;}
  .buch{padding:1rem 1.1rem;}
  .buch .titel{font-size:16.5px;}
  .buch .beschreibung{font-size:13px;}
  .buch.mit-badge .badge{opacity:1;}

  .artikel{grid-template-columns:3rem 1fr;grid-template-rows:auto auto;row-gap:0.15rem;column-gap:0.85rem;padding:0.7rem 0;font-size:13.5px;}
  .artikel>span:nth-child(2){grid-column:2;grid-row:1;line-height:1.4;}
  .artikel .medium{grid-column:2;grid-row:2;font-size:12px;justify-self:start;}

  .sektion-arbeit{padding:2rem 1.25rem 2.25rem;}
  .arbeit-gruppe{margin-bottom:2rem;}
  .kachel-grid-2,.kachel-grid-3{grid-template-columns:1fr;gap:0.7rem;}
  .kachel{min-height:auto;padding:1.1rem 1.2rem 1rem;}
  .kachel-grid-2 .kachel{min-height:auto;padding:1.4rem 1.4rem 1.25rem;}
  .kachel-grid-2 .kachel .kachel-titel{font-size:20px;}
  .kachel .kachel-titel{font-size:18px;}
  .kachel .kachel-sub{font-size:13px;}

  .sektion-kontakt{padding:2rem 1.25rem 2.25rem;}
  .sektion-kontakt .inhalt{grid-template-columns:1fr;gap:1.5rem;}
  .visitenkarte{padding:1.25rem 1.5rem;}

  .footer{flex-direction:column;gap:0.85rem;text-align:center;padding:2rem 1.25rem;}
  .footer .signatur{font-size:13.5px;line-height:1.4;}

  .impressum-kopf{padding:1.25rem 1.25rem 0;}
  .impressum-inhalt{padding:0 1.25rem 2rem;}
}

/* Sehr kleine Geräte */
@media (max-width:380px){
  .hero{padding:2rem 1rem 1.5rem;}
  .hero h1{font-size:27px;}
  .zitat p{font-size:19px;}
  h2.sektions-titel,.sektion-arbeit h2{font-size:23px;}
  .nav-anker .sep{display:none;}
  .nav-anker{gap:0.5rem 0.85rem;}
}