/* ==========================================================================
   Meine Schulliste – Design Tokens
   ========================================================================== */
:root{
  --blue-900:#1f3752;
  --blue-700:#365a82;
  --blue-brand:#688dc3;
  --blue-200:#dde8f4;
  --blue-100:#f0f5fb;
  --paper:#faf7f1;
  --gold:#e8a33d;
  --gold-dark:#c07e1f;
  --ink:#20293a;
  --ink-soft:#5b6577;
  --white:#ffffff;
  --line:#e2ddd0;
  --radius:14px;
  --shadow:0 12px 28px -14px rgba(31,55,82,.35);
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, Segoe UI, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-display);
  color:var(--blue-900);
  line-height:1.15;
  margin:0 0 .5em;
}
h2{font-size:clamp(1.6rem,3vw,2.2rem); font-weight:600;}
h3{font-size:1.15rem; font-weight:600;}
p{margin:0 0 1em;}
a{color:var(--blue-700);}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--blue-900); color:#fff;
  padding:10px 16px; z-index:1000;
}
.skip-link:focus{left:12px; top:12px;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:.85em 1.7em; font-weight:600; font-size:.98rem;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
.btn-primary{background:var(--gold); color:var(--blue-900); box-shadow:var(--shadow);}
.btn-primary:hover{transform:translateY(-2px); background:var(--gold-dark);}
.btn-ghost{background:transparent; border-color:var(--blue-200); color:var(--blue-900);}
.btn-ghost:hover{background:var(--blue-100);}
.btn-small{padding:.6em 1.2em; font-size:.9rem;}
.btn-large{padding:1em 2.2em; font-size:1.05rem; width:100%; max-width:360px;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--white); border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px;}
.logo{display:flex; align-items:center; gap:.5em; text-decoration:none; color:var(--blue-900);}
.logo-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; background:var(--blue-brand); color:#fff;
  font-weight:700;
}
.logo-text{font-family:var(--font-display); font-weight:600; font-size:1.2rem;}
.header-meta{display:flex; align-items:center; gap:18px;}
.header-phone{color:var(--blue-900); font-weight:600; text-decoration:none; display:none;}
@media(min-width:640px){.header-phone{display:inline-flex; gap:.4em;}}

/* Hero */
.hero{
  background:
    repeating-linear-gradient(to bottom, transparent, transparent 37px, var(--blue-200) 38px),
    linear-gradient(180deg, var(--blue-100), var(--paper) 70%);
  padding:72px 0 56px;
  border-bottom:1px solid var(--line);
}
.hero-inner{max-width:760px;}
.eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:700;
  color:var(--blue-700); margin-bottom:.8em;
}
.hero h1{font-size:clamp(2rem,4.4vw,3rem); font-weight:600;}
.highlight{color:var(--blue-brand);}
.hero-sub{font-size:1.08rem; color:var(--ink-soft); max-width:620px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 22px;}
.trust-badges{list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px; padding:0; margin:0; font-size:.9rem; color:var(--blue-900); font-weight:600;}
.trust-badges li{display:flex; align-items:center; gap:.4em;}
.trust-badges li::before{content:"✓"; color:var(--blue-brand); font-weight:700;}

/* Ablauf / Steps */
.ablauf{padding:64px 0;}
.ablauf h2{text-align:center; margin-bottom:1.2em;}
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px;
}
.step{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; position:relative;
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:var(--blue-900); color:#fff;
  font-family:var(--font-display); font-weight:600; margin-bottom:14px;
}
.step p{color:var(--ink-soft); font-size:.95rem; margin:0;}

/* Warum */
.warum{background:var(--blue-900); color:#fff; padding:64px 0;}
.warum h2{color:#fff;}
.warum-grid{display:grid; grid-template-columns:1fr; gap:36px;}
@media(min-width:800px){.warum-grid{grid-template-columns:1fr 1fr;}}
.warum-text p{color:#c9d6e6;}
.warum-list{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.warum-list li{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:14px 16px; font-size:.95rem; color:#dbe5f1;
}
.warum-list strong{color:#fff; display:block; margin-bottom:2px;}

/* Formular */
.formular-section{padding:70px 0;}
.formular-section h2{text-align:center;}
.formular-intro{text-align:center; max-width:560px; margin:0 auto 2.2em; color:var(--ink-soft);}
form{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; max-width:760px; margin:0 auto; box-shadow:var(--shadow);
}
fieldset{border:none; padding:0; margin:0 0 30px;}
legend{
  font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--blue-900);
  padding:0 0 12px; border-bottom:2px solid var(--blue-200); width:100%; margin-bottom:18px;
}
.form-row{display:grid; gap:16px; margin-bottom:16px;}
.two-col{grid-template-columns:1fr;}
@media(min-width:600px){.two-col{grid-template-columns:1fr 1fr;}}
.field label{display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; color:var(--blue-900);}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea{
  width:100%; padding:.75em .9em; border:1.5px solid var(--line); border-radius:9px;
  font-family:var(--font-body); font-size:.98rem; background:var(--paper); color:var(--ink);
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--blue-brand); background:#fff;}
.field{margin-bottom:16px;}
.toggle-field{margin-bottom:12px;}
.detail-input{margin-top:8px; width:100%;}
.detail-input:disabled{opacity:.45;}

.radio-group{display:flex; flex-wrap:wrap; gap:10px;}
.radio-pill{
  display:flex; align-items:center; gap:.5em; border:1.5px solid var(--line);
  border-radius:999px; padding:.5em 1em; font-size:.88rem; cursor:pointer; font-weight:500;
}
.radio-pill:has(input:checked){border-color:var(--blue-brand); background:var(--blue-100); color:var(--blue-900);}
.radio-pill input{accent-color:var(--blue-brand);}
.hint{color:var(--ink-soft); font-weight:400;}

.checkbox-line{display:flex; align-items:flex-start; gap:.6em; font-weight:500; font-size:.94rem; cursor:pointer;}
.checkbox-line input{margin-top:3px; accent-color:var(--blue-brand);}
.dsgvo{background:var(--blue-100); border-radius:10px; padding:16px; font-size:.85rem; color:var(--ink-soft);}

.upload-zone{
  position:relative; border:2px dashed var(--blue-brand); border-radius:var(--radius);
  padding:34px 20px; text-align:center; background:var(--blue-100); cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.upload-zone.dragover{background:var(--blue-200); border-color:var(--blue-900);}
.upload-zone input[type="file"]{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
}
.upload-icon{font-size:2rem; display:block; margin-bottom:8px;}
.upload-hint{font-size:.82rem; color:var(--ink-soft); margin:0;}
.datei-liste{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px;}
.datei-liste li{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:.86rem;
}
.datei-liste button{
  background:none; border:none; color:#b3432f; font-weight:700; cursor:pointer; font-size:1rem; line-height:1;
}

form .btn-large{display:block; margin:8px auto 0;}
.form-status{text-align:center; font-weight:600; margin-top:14px; min-height:1.2em;}
.form-status.ok{color:#2f7a4b;}
.form-status.error{color:#b3432f;}

/* SEO text */
.seo-text{padding:50px 0 70px; background:var(--blue-100);}
.seo-text .wrap{max-width:820px;}
.seo-text p{color:var(--ink-soft);}

/* Kontakt */
.kontakt{padding:64px 0;}
.kontakt-grid{display:grid; gap:36px; grid-template-columns:1fr;}
@media(min-width:760px){.kontakt-grid{grid-template-columns:1.3fr 1fr;}}
.kontakt-list{list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:1rem;}
.kontakt-list li{display:flex; align-items:center; gap:.6em;}
.kontakt-list a{color:var(--blue-900); font-weight:600; text-decoration:none;}
.oeffnungszeiten{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px;}
.oeffnungszeiten h3{margin-bottom:.2em;}
.oeffnungszeiten p{color:var(--ink-soft); margin-bottom:1.2em;}

/* Footer */
.site-footer{background:var(--blue-900); color:#c9d6e6; padding:26px 0;}
.footer-inner{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; font-size:.85rem;}
.footer-links{display:flex; gap:18px;}
.footer-links a{color:#fff; text-decoration:none;}
.footer-links a:hover{text-decoration:underline;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .btn{transition:none;}
}