/* zz_test_refresh_v2.css — Visible, light-modern refresh for index only. */

/* Palette & tokens */
:root{
  --zz-bg:#fffdfb;
  --zz-ink:#201a17;
  --zz-accent:#8b6f57;
  --zz-accent-2:#d7c7b7;
  --zz-line:#efe6df;
  --zz-card:#fffaf6;
  --zz-radius:16px;
  --zz-shadow:0 8px 28px rgba(0,0,0,.06);
  --zz-maxw:72ch;
}

/* Typography */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Playfair+Display:wght@700&display=swap');
html,body{color:var(--zz-ink);background:#fffdfb;font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}

/* HERO — bigger, airier, centered */
#hero-header{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:62vh; padding:3.5rem 1rem 2.5rem;
  background:inherit;
}
#hero-header > div{max-width:var(--zz-maxw); margin:0 auto;}
#hero-header h1{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(2rem,4.5vw,3.2rem);
  letter-spacing:.3px;
  color:#fff !important;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000 !important;
}
#hero-header p{font-size:clamp(1.05rem,1.3vw,1.2rem); opacity:.95;}

/* SECTION RHYTHM — consistent vertical spacing & separators */
main > section{padding-block:3rem; border-top:1px solid var(--zz-line);}
main > section:first-of-type{border-top:none;}
main > section > h2, main > section > h3, main > section > p, main > section > ul, main > section > ol, main > section > blockquote{
  max-width:var(--zz-maxw); margin-left:auto; margin-right:auto; padding-inline:1rem;
}

/* CARDS — apply to two key sections to make it feel 2025 without screaming */
#haltung, #ablauf{
  background:var(--zz-card) !important;
  border:1px solid var(--zz-line);
  border-radius:var(--zz-radius);
  box-shadow:var(--zz-shadow);
}
#haltung > div, #ablauf > div, #ablauf > *:not(style){
  max-width:var(--zz-maxw); margin-left:auto; margin-right:auto; padding-inline:1rem;
}

/* Headings */
main h2{font-family:'Playfair Display',serif; font-weight:700; color:var(--zz-ink); font-size:clamp(1.6rem,2.6vw,2rem); margin-bottom:.75rem;}
main h3{font-weight:700; color:var(--zz-ink); margin-top:1.5rem;}

/* Links & emphasis */
a{color:var(--zz-accent); text-underline-offset:3px;}
a:hover{opacity:.9;}
main p strong, main li strong, main p b, main li b{color:var(--zz-accent);}

/* CTA — subtle modern button look (only anchor buttons, not FAQ buttons) */
a.cta-button, .cta a{
  background:var(--zz-accent);
  color:#fff !important;
  padding:.8rem 1.1rem;
  border-radius:999px;
  text-decoration:none;
  box-shadow:var(--zz-shadow);
  display:inline-block;
}
a.cta-button:hover, .cta a:hover{transform:translateY(-1px); filter:brightness(1.05); transition:.2s ease;}

/* Audio block layout (keeps function & markup) */
#audio-vorstellung audio{display:block; width:100%; max-width:600px; margin:1rem auto 0;}

/* Excerpts under "Lerne mich kennen – in Wort und Schrift" */
#audio-vorstellung ul{list-style:none; padding:0; margin:1rem auto; display:grid; grid-template-columns:1fr; gap:.55rem; max-width:720px; justify-items:center;}
#audio-vorstellung ul li{margin:0; text-align:center;}
#audio-vorstellung ul li a{text-decoration:underline;}

/* DO NOT TOUCH FAQ classes/components */