/* Nova42 – Startseite: nur Regeln, die NICHT bereits in assets/css/site.css
     stehen (Header/Nav/Footer/Cookie-Banner/Dropdown/Hamburger/AI-Info sind
     dort zentral definiert). */

  h1,h2,h3{
    font-family:"Work Sans", sans-serif;
    font-weight:700;
    letter-spacing:.01em;
    color:var(--heading);
    line-height:1.15;
  }

  .wrap{ max-width:1080px; margin:0 auto; padding:0 1.25rem; }

  /* main auf der Startseite ist eine Abfolge voller Sektionen (.wrap regelt
     die Breite selbst) statt der einspaltigen .card-Seite aus site.css */
  #main{ max-width:none; width:100%; margin:0; padding:0; }

  .hero-logo{
    height:clamp(4.5rem, 10vw, 6.5rem); width:auto;
    display:block; margin:0 auto 1.5rem;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.18));
  }
  :root[data-theme="dark"] .hero-logo{ filter:drop-shadow(0 0 2.5px rgba(251,243,238,.95)) drop-shadow(0 0 10px rgba(251,243,238,.6)); }

  /* ── Buttons ── */
  .btn{
    display:inline-block;
    background:var(--cta); color:#fff;
    font-weight:700; font-size:1.05rem;
    padding:.85rem 1.75rem;
    border:none; border-radius:8px;
    text-decoration:none; cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(204,2,0,.35); }
  .btn:active{ transform:translateY(0); }

  /* ── Hero: zwei verbundene Buttons mit schräger Naht wie im Logo ── */
  .hero-btn-group{ display:inline-flex; align-items:stretch; }
  .hero-btn-group .btn{ border-radius:0; }
  .hero-btn-left{
    background:var(--cta);
    position:relative; z-index:2;
    padding-right:calc(1.75rem + 16px);
    clip-path:polygon(
      0 0,
      calc(100% - 30px) 0,
      calc(100% - 2px) 100%,
      0 100%
    );
  }
  .hero-btn-right{
    background:#3D3D5C;
    position:relative; z-index:1;
    margin-left:-32px;
    padding-left:calc(1.75rem + 32px);
  }
  .hero-btn-left:hover, .hero-btn-right:hover{ transform:none; box-shadow:none; filter:none; }
  @media (max-width:480px){
    .hero-btn-group{ font-size:.92rem; }
    .hero-btn-left{ padding-left:1.1rem; padding-right:calc(1.1rem + 16px); }
    .hero-btn-right{ padding-left:calc(1.1rem + 32px); padding-right:1.1rem; }
  }

  /* ── Hero ── */
  .hero{ padding:5rem 0 4rem; text-align:center; }
  .hero h1{
    font-size:clamp(2.4rem, 6vw, 4rem);
    max-width:16ch; margin:0 auto .5rem;
  }
  .hero-line{ display:block; }
  .hero-line + .hero-line{ margin-top:.5rem; }
  .hero p{
    max-width:52ch; margin:1.25rem auto 2rem;
    font-size:1.2rem;
  }
  .hero .hint{
    display:block; margin-top:1rem;
    font-size:.95rem; opacity:.75;
  }

  /* ── Sektionen ── */
  section{ padding:4rem 0; }
  section h2{
    font-size:clamp(1.7rem, 3.5vw, 2.4rem);
    margin-bottom:1.25rem;
  }
  .eyebrow{
    display:block; font-family:"Inter", sans-serif;
    font-size:.85rem; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; color:var(--text);
    opacity:.7; margin-bottom:.4rem;
  }

  /* .card kommt aus site.css, hier auf der Startseite etwas kompakteres Padding */
  .card{ padding:1.75rem; }
  .card h3{ font-size:1.25rem; margin-bottom:.6rem; overflow-wrap:break-word; hyphens:auto; }
  .form-intro{
    font-family:"Inter", system-ui, sans-serif;
    font-weight:500; color:var(--text);
    font-size:.95rem; margin-bottom:1.5rem;
  }

  /* ── Formular ── */
  #orderForm{
    width:100%; padding:2.25rem;
    border-radius:0 0 var(--radius) var(--radius);
    box-shadow:none;
  }
  .form-grid{ display:grid; gap:1.25rem; grid-template-columns:1fr 1fr; }
  .form-grid .full{ grid-column:1 / -1; }
  @media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

  label{
    display:block; font-weight:600;
    margin-bottom:.35rem; font-size:.95rem;
  }

  /* Rollen-Auswahl im Formular */
  .role-choice{ margin-bottom:1.5rem; }
  .role-choice legend{
    font-weight:700; font-size:1.05rem; margin-bottom:.75rem;
  }
  .role-options{ display:grid; gap:.75rem; }
  .role-option{
    display:flex; gap:.75rem; align-items:flex-start;
    background:var(--bg);
    border:2px solid transparent;
    border-radius:10px;
    padding:.9rem 1rem;
    cursor:pointer; font-weight:500; margin:0;
  }
  .role-option:hover{ border-color:var(--heading); }
  .role-option:has(input:checked){
    border-color:var(--heading);
    background:var(--primary-soft);
  }
  .role-option input{
    width:1.25rem; height:1.25rem; margin-top:.2rem;
    flex:none; accent-color:var(--heading);
  }
  .role-hint{
    margin-top:.9rem; font-size:.95rem;
    background:#fdf1f0; border-left:4px solid var(--cta);
    padding:.6rem .9rem; border-radius:0 8px 8px 0;
  }
  :root[data-theme="dark"] .role-hint{ background:#3a2426; color:var(--text); }

  /* Auslastungs-Schieberegler */
  .range-row{
    display:flex; align-items:center; gap:.75rem;
  }
  .range-row input[type="range"]{
    flex:1; padding:0; border:none;
    -webkit-appearance:none; appearance:none;
    background:transparent;
    height:2rem; cursor:pointer;
  }
  /* Spur - einheitlich in allen Browsern */
  .range-row input[type="range"]::-webkit-slider-runnable-track{
    height:8px; border-radius:999px;
    background:rgba(139,26,107,.25);
  }
  .range-row input[type="range"]::-moz-range-track{
    height:8px; border-radius:999px;
    background:rgba(139,26,107,.25);
  }
  /* Griff - lila Kreis mit weißem Rand */
  .range-row input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:26px; height:26px; margin-top:-9px;
    border-radius:50%;
    background:var(--heading);
    border:3px solid #fff;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
    cursor:pointer;
  }
  .range-row input[type="range"]::-moz-range-thumb{
    width:20px; height:20px;
    border-radius:50%;
    background:var(--heading);
    border:3px solid #fff;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
    cursor:pointer;
  }
  .range-row output{
    min-width:2.4rem; text-align:center;
    background:var(--heading); color:#fff;
    font-weight:700; border-radius:8px;
    padding:.25rem 0;
  }
  .field-hint{ font-size:.85rem; opacity:.7; margin-top:.3rem; }

  /* Einverständnis-Checkbox */
  .consent{
    display:flex; gap:.7rem; align-items:flex-start;
    font-weight:500; font-size:.95rem; cursor:pointer;
  }
  .consent input{
    width:1.35rem; height:1.35rem; margin-top:.15rem;
    flex:none; accent-color:var(--heading); cursor:pointer;
  }
  .required::after{ content:" *"; color:var(--cta); font-weight:700; }

  input, select, textarea{
    width:100%;
    padding:.75rem .9rem;
    font:inherit; color:var(--text);
    background:var(--card);
    border:1.5px solid var(--line);
    border-radius:8px;
  }
  :root[data-theme="dark"] input,
  :root[data-theme="dark"] select,
  :root[data-theme="dark"] textarea{ background:#1E1E38; }
  input:hover, select:hover, textarea:hover{ border-color:var(--heading); }
  textarea{ resize:vertical; min-height:110px; }
  fieldset{ border:none; }
  .form-note{ font-size:.9rem; opacity:.75; margin-top:1rem; }

  .form-error{
    display:none;
    background:#fdf1f0; border-left:4px solid var(--cta);
    padding:.6rem .9rem; border-radius:0 8px 8px 0;
    font-size:.95rem; margin-top:1.25rem; font-weight:600;
  }
  :root[data-theme="dark"] .form-error{ background:#3a2426; color:var(--text); }
  .form-error.show{ display:block; }

  .form-success{
    display:none;
    background:#e8f6ec; border:1.5px solid #2e7d32;
    color:#1b5e20; border-radius:8px;
    padding:1rem 1.25rem; margin-top:1.25rem; font-weight:600;
  }
  .form-success.show{ display:block; }

  /* ── Standorte / Karte ── */
  .standorte-legend{
    display:flex; flex-wrap:wrap; gap:1.25rem;
    font-size:.9rem; font-weight:600;
    margin:1.5rem 0 .75rem;
  }
  .standorte-legend span{ display:flex; align-items:center; gap:.4rem; }
  .legend-dot{
    width:1rem; height:1rem; border-radius:50%;
    border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.2);
    flex:none;
  }
  .dot-oeffentlich{ background:#2a6fb0; }
  .dot-halboeffentlich{ background:#CC0200; }

  .standorte-panel{
    overflow:hidden;
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:0 2px 10px rgba(0,0,0,.08);
  }
  .standorte-leer{
    margin:0; padding:1rem 1.25rem;
    background:var(--primary-soft); color:var(--text);
    border-bottom:1px solid var(--line);
    font-weight:600;
  }
  .standorte-leer[hidden]{ display:none; }
  .standorte-leer a{ color:var(--heading); text-decoration:underline; }
  .map-frame{
    border-radius:var(--radius) var(--radius) 0 0;
    overflow:hidden;
    background:var(--card);
  }
  #standorte .map-fallback{
    margin:0;
    padding:1rem 1.25rem;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:var(--card);
  }
  #standorteMap{
    display:block;
    width:100%;
    height:480px;
    z-index:0;
  }
  .leaflet-container{ font-family:"Inter", system-ui, sans-serif; }
  .standort-popup strong{ display:block; margin-bottom:.4rem; font-size:.95rem; }
  .standort-popup .badge{
    display:inline-block;
    font-size:.78rem; font-weight:700;
    padding:.2rem .6rem; border-radius:999px; color:#fff;
  }
  .badge-oeffentlich{ background:#2a6fb0; }
  .badge-halboeffentlich{ background:#CC0200; }
  @media (max-width:640px){
    #standorteMap{ height:380px; }
  }

  /* ── Spenden ── */
  .spenden-grid{
    display:grid; gap:1.5rem;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    margin-top:2rem;
  }
  .iban{
    font-family:ui-monospace, "Courier New", monospace;
    font-size:1.05rem; font-weight:700; color:var(--text);
    background:var(--bg);
    padding:.6rem .9rem; border-radius:8px;
    display:inline-flex; align-items:center; gap:.5rem; margin:.5rem 0;
    letter-spacing:.04em;
    border:1.5px solid var(--line); cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .iban:hover{ border-color:var(--heading); }
  .iban .iban-copy-icon{ width:1rem; height:1rem; flex:none; opacity:.7; }
  .iban-hinweis{
    background:var(--primary-soft); color:var(--text);
    border-left:4px solid var(--heading); border-radius:8px;
    padding:.6rem .9rem; font-size:.92rem; margin-top:.75rem;
  }
  .iban.copied{ border-color:var(--success); background:var(--success-soft); color:var(--success); }

  /* ── Footer (Startseite nutzt .wrap statt .footer-inner, daher eigenes Padding) ── */
  footer{
    background:var(--heading-dark); color:#fff;
    padding:2.5rem 0; margin-top:2rem;
  }
  footer .wrap{
    max-width:none; padding:0 clamp(1.25rem,3vw,3rem);
    display:flex; flex-direction:column; gap:1rem;
  }

  /* ============================================================
     Fakten (Hintergrund) & Ablauf
     ============================================================ */

  .band-soft{ background:var(--paper-soft); }
  .band-dark{ background:#21213A; color:#fff; }
  .band-dark .eyebrow{ color:rgba(255,255,255,.72); }
  .band-dark h2{ color:#fff; }
  .band-dark > .wrap > p{ color:rgba(255,255,255,.85); }

  .stat-grid{
    display:grid; gap:1.25rem;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    margin:2rem 0 .75rem;
  }
  .stat-tile{
    background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:1.5rem 1.5rem 1.6rem;
    box-shadow:0 1px 2px rgba(36,26,31,.06);
  }
  .stat-tile .icon-circle{
    width:2.6rem; height:2.6rem; border-radius:50%;
    background:var(--primary-soft); color:var(--heading);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:.9rem;
  }
  .stat-tile .icon-circle svg{ width:1.3rem; height:1.3rem; }
  .stat-tile .num{
    display:block;
    font-family:"Work Sans", Georgia, serif;
    font-size:2.1rem; font-weight:600; color:var(--heading-dark);
    line-height:1; margin-bottom:.5rem;
  }
  .stat-tile p{ font-size:.92rem; color:var(--text-soft); margin:0; }
  .stat-source{ font-size:.82rem; color:var(--text-soft); margin-top:.5rem; }
  .stat-source a{ color:var(--text-soft); text-decoration:underline; }

  .pull-quote{
    position:relative; max-width:640px; margin:3rem auto 0;
    text-align:center; padding:0 1rem;
  }
  .pull-quote::before{
    content:"\201C";
    font-family:"Work Sans", Georgia, serif;
    font-size:5rem; color:var(--cta-soft);
    position:absolute; top:-2.3rem; left:50%;
    transform:translateX(-50%); line-height:1; z-index:0;
  }
  .pull-quote p{
    position:relative; z-index:1;
    font-family:"Work Sans", Georgia, serif;
    font-style:italic; font-weight:500;
    font-size:1.5rem; line-height:1.4;
    color:var(--heading-dark); margin:0;
  }
  .pull-quote cite{
    display:block; margin-top:.9rem; font-style:normal;
    font-size:.8rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--text-faint);
  }

  .process-grid{
    display:grid; gap:2rem;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    margin-top:2.25rem;
  }
  .process-step .icon-circle{
    width:3rem; height:3rem; border-radius:50%;
    background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.35);
    color:#fff; display:flex; align-items:center; justify-content:center;
    margin-bottom:1rem;
  }
  .process-step .icon-circle svg{ width:1.4rem; height:1.4rem; }
  .process-step .step-no{
    display:block; margin-bottom:.3rem;
    font-family:"Work Sans", Georgia, serif;
    font-size:.85rem; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--cta-soft);
  }
  .process-step h3{ color:#fff; font-size:1.2rem; margin-bottom:.5rem; }
  .process-step p{ color:rgba(255,255,255,.82); font-size:.95rem; margin:0; }
  .process-step a{ color:#fff; }