/* BUDEKO Website – Design „Das Ticket“ (ab 4.71, gewählt 09.11.2026)
 * Idee: Jede Meldung bekommt ein Ticket. Das Störungsticket ist das Bildmotiv der Startseite, das Anfrageformular ein leeres Ticket.
 * Markenfarben: Smart Green #00271D (Flächen), Frog Green #00DC82 (Knöpfe, Akzente), Papier #F7F8F5. Schrift Archivo (selbst gehostet, OFL).
 * Logo: Frosch + Wortmarke weiß im Kopf, groß im Fuß. Wird nach design.css geladen und überschreibt nur das Aussehen. */
@font-face{font-family:"Archivo";src:url("archivo-var.woff2?v=de2f1fe817") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}

:root{
  --t-nacht:#00271D; --t-nacht2:#0B3A2C; --t-frosch:#00DC82; --t-frosch2:#00B86C; --t-wald:#00754A;
  --t-papier:#F7F8F5; --t-tinte:#00271D; --t-leise:#4E6A5D; --t-r:22px;
  --paper:var(--t-papier); --card:#FFFFFF; --ink:var(--t-tinte); --muted:var(--t-leise); --line:#D9E2DD;
  --green:var(--t-frosch); --green-deep:var(--t-wald); --dark:var(--t-nacht); --dark-2:var(--t-nacht2);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--t-papier:#0F1814;--card:#16241D;--ink:#E4ECEE;--muted:#A3B5AC;--line:#2A3B33;--t-tinte:#E4ECEE;--t-leise:#A3B5AC;--t-wald:#5FE0A0}}
:root[data-theme="dark"]{--t-papier:#0F1814;--card:#16241D;--ink:#E4ECEE;--muted:#A3B5AC;--line:#2A3B33;--t-tinte:#E4ECEE;--t-leise:#A3B5AC;--t-wald:#5FE0A0}

body{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;font-stretch:100%;letter-spacing:0;background:var(--t-papier)}
h1,h2,h3,h4,h5,.btn,nav.main a,.eyebrow,.tag,.more,.kicker,.lbl,.cfield label{font-family:"Archivo",system-ui,sans-serif}
h1,h2,h3,h4{font-weight:800;font-stretch:80%;letter-spacing:-.01em;line-height:1.02}
.eyebrow{letter-spacing:.02em;text-transform:none;font-size:15px;font-weight:700;color:var(--t-wald)}
.eyebrow::before{display:none}
.shead h2{font-size:clamp(34px,4.4vw,56px);margin-top:8px}
.shead p{font-size:17px}

/* Knöpfe: Frog Green, ganz rund */
.btn{border-radius:999px;font-weight:700;font-size:16px;padding:15px 26px;border:0}
.btn-primary{background:var(--t-frosch);color:var(--t-nacht)}
.btn-primary:hover{background:#3BE89E;color:var(--t-nacht);box-shadow:none}
.btn-ghost,.btn-ghost-dark{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);color:#fff;background:transparent}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--t-frosch);outline-offset:3px}

/* Kopf: Smart Green, Frosch + Wortmarke weiß */
.topbar{background:#001A13}
header.site{background:var(--t-nacht);border-bottom:0}
header.site .wrap{height:84px}
header.site .wrap > a:first-child{display:flex;align-items:center;gap:12px}
header.site img.frosch{height:34px;width:auto}
header.site img.logo{height:34px;width:auto;filter:none}
header.site nav.main > a,header.site nav.main .has-sub > .top-link{color:#fff;opacity:.88;font-size:15.5px;font-weight:600}
header.site nav.main > a:hover,header.site nav.main .has-sub:hover > .top-link{opacity:1;color:var(--t-frosch)}
header.site nav.main > a.active,header.site nav.main .has-sub.active > .top-link{opacity:1;color:#fff}
header.site nav.main > a.active::after,header.site nav.main .has-sub.active > .top-link::after{background:var(--t-frosch);height:3px;border-radius:2px}
nav.main .submenu{background:var(--t-nacht2);border:0;border-radius:14px}
nav.main .submenu a{color:#fff;font-size:15px}
.menu-btn span{background:#fff}
header.site .cta-head{padding:12px 20px!important}
@media (max-width:720px){header.site .wrap{height:68px}header.site img.frosch{height:26px}header.site img.logo{height:26px}}
@media (max-width:600px){header.site .cta-head{display:none!important}}

/* Seitenkopf der Unterseiten: Smart Green mit Foto, Frosch als Stempel */
.page-header{background:linear-gradient(100deg,rgba(0,39,29,.97),rgba(0,39,29,.88) 50%,rgba(0,39,29,.62)),var(--kopfbild,url('../img/titelbild-hamburg.jpg?v=4e2a86ec36')) center/cover;padding:56px 0 60px}
.page-header h1{font-size:clamp(38px,5vw,64px);max-width:18ch}
.page-header p{color:#D4E3DC;font-size:17px}
.page-header .crumb{font-size:14px;color:#A9C4B8}
.page-header::after{opacity:.9}

/* ---------- Startseite ---------- */
body[data-seite="start"] main{background:var(--t-nacht);color:#fff}
.t-hero{background:var(--t-nacht);color:#fff;padding:72px 0 96px;overflow:hidden}
.t-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.t-hero h1{color:#fff;font-size:clamp(48px,6.6vw,96px);font-stretch:75%;line-height:.93;margin:0 0 26px;max-width:11ch}
.t-hero .lede{font-size:19px;line-height:1.55;color:#D4E3DC;max-width:44ch;margin-bottom:30px}
.t-hero .cta-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.t-link{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.t-link:hover{color:var(--t-frosch)}
.t-fakten{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;color:#B9CFC5;font-size:15px}
.t-fakten li{display:flex;align-items:center;gap:8px}
.t-fakten li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--t-frosch)}

/* Das Ticket (Bild in der Startseite und Anfrageformular) */
.t-ticket{position:relative;background:#F7F8F5;color:#00271D;border-radius:6px;padding:38px 44px;display:flex;flex-direction:column;gap:20px;
  -webkit-mask:radial-gradient(circle 16px at 0 68%,transparent 15.5px,#000 16px) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% 68%,transparent 15.5px,#000 16px) right/51% 100% no-repeat;
          mask:radial-gradient(circle 16px at 0 68%,transparent 15.5px,#000 16px) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% 68%,transparent 15.5px,#000 16px) right/51% 100% no-repeat}
.t-hero .t-ticket{transform:rotate(1.5deg)}
.t-kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:15px;color:#4E6A5D}
.t-marke{display:flex;align-items:center;gap:10px;font-weight:700;color:#00754A}
.t-marke img{width:32px;height:auto}
.t-titel{margin:0;font-size:clamp(30px,3.4vw,46px);font-weight:800;font-stretch:80%;line-height:1;color:#00271D}
.t-daten{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin:0;font-size:16px}
.t-daten dt{font-size:14px;color:#4E6A5D}
.t-daten dd{margin:0;color:#00271D}
.t-status{list-style:none;margin:30px 0 0;padding:26px 0 0;border-top:2px dashed #C9D5CF;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;font-size:15px}
.t-status li{display:flex;flex-direction:column;gap:6px}
.t-status li::before{content:"";height:8px;border-radius:4px;background:#D6DDD8}
.t-status li.ok::before{background:var(--t-frosch2)}
.t-status b{color:#00271D;line-height:1.2}
.t-status span{color:#4E6A5D}
/* Der Status füllt sich einmal beim Laden – Schritt für Schritt */
@media (prefers-reduced-motion:no-preference){
  .t-hero .t-status li.ok::before{animation:t-fuellen .5s cubic-bezier(.3,.7,.3,1) both;transform-origin:left}
  .t-hero .t-status li.ok:nth-child(1)::before{animation-delay:.5s}
  .t-hero .t-status li.ok:nth-child(2)::before{animation-delay:1.1s}
  .t-hero .t-status li.ok:nth-child(3)::before{animation-delay:1.7s}
  .t-hero .t-ticket{animation:t-rein .7s cubic-bezier(.2,.8,.2,1) .1s both}
}
@keyframes t-fuellen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes t-rein{from{opacity:0;transform:translateY(24px) rotate(4deg)}to{opacity:1;transform:rotate(1.5deg)}}

/* Zahlen und Gewerke auf Smart Green */
body[data-seite="start"] .zahlen{background:var(--t-nacht);border:0;padding:0 0 48px}
body[data-seite="start"] .zahl b,body[data-seite="start"] .zahl b span{color:var(--t-frosch);font-stretch:80%;font-weight:800}
body[data-seite="start"] .zahl > span{color:#B9CFC5}
body[data-seite="start"] .trust{background:var(--t-nacht2);border:0}
body[data-seite="start"] .trust .item{color:#fff;font-size:15px}
body[data-seite="start"] .trust .item .dot{background:var(--t-frosch)}

/* Leistungen: helle Karten auf Smart Green */
body[data-seite="start"] #leistungen{background:var(--t-nacht);padding-top:110px}
body[data-seite="start"] #leistungen .shead h2{color:#fff}
body[data-seite="start"] #leistungen .shead p{color:#B9CFC5}
body[data-seite="start"] #leistungen .eyebrow{color:var(--t-frosch)}
.pillar{border-radius:var(--t-r);box-shadow:none}
body[data-seite="start"] .pillar{background:#F7F8F5;color:#00271D}
body[data-seite="start"] .pillar h3{color:#00271D}
body[data-seite="start"] .pillar > p{color:#4E6A5D}
body[data-seite="start"] .pillar .more{color:#00754A}
body[data-seite="start"] .pillar:nth-child(2){background:var(--t-frosch)}
body[data-seite="start"] .pillar:nth-child(2) > p,body[data-seite="start"] .pillar:nth-child(2) .tag,body[data-seite="start"] .pillar:nth-child(2) .more{color:#00271D}
.pillar h3{font-size:30px}
.pillar .tag{letter-spacing:.02em;text-transform:none;font-size:14px}
.pillar-foto + .pillar-icon{box-shadow:0 0 0 5px currentColor;display:none}

/* Warum BUDEKO: Papier */
.why{background:var(--t-papier);color:var(--t-tinte)}
.why .shead h2{color:var(--t-tinte)}.why .shead p{color:var(--t-leise)}.why .eyebrow{color:var(--t-wald)}
.why-grid{gap:36px 32px!important}
.why-card{background:transparent;border:0;padding:0}
.why-card .num{display:none}
.why-card h4{color:var(--t-tinte);font-size:26px;margin:0 0 8px}
.why-card p{color:var(--t-leise);font-size:16.5px}
.why::before{opacity:.07}

/* Werte: Frog Green, Kritzel in Smart Green */
.werte{background:var(--t-frosch)}
.werte .shead h2,.werte .shead p,.wert span{color:#00271D}
.werte .eyebrow{color:#00271D}
.wert span{font-weight:800;font-stretch:80%;font-size:clamp(26px,2.8vw,38px)}
.wert .kritzel{filter:brightness(0) invert(1);opacity:.9}

/* So arbeiten wir: Status-Balken statt Nummern */
body[data-seite="start"] .process{background:var(--t-nacht)}
body[data-seite="start"] .process .shead h2{color:#fff}
body[data-seite="start"] .process .eyebrow{color:var(--t-frosch)}
.process ol{gap:10px}
.process li{padding:0}
.process li::after{display:none}
.process .step-num{width:auto;height:10px;border-radius:5px;background:var(--t-frosch);font-size:0;margin-bottom:18px}
.process h4{font-size:24px}
body[data-seite="start"] .process h4{color:#fff}
body[data-seite="start"] .process p{color:#B9CFC5;font-size:15.5px}

/* Qualität: Papier */
body[data-seite="start"] main > section:has(.split){background:var(--t-papier);color:var(--t-tinte)}
body[data-seite="start"] .split h2{color:var(--t-tinte);font-size:clamp(32px,3.6vw,48px)}
.checklist .mark{background:var(--t-frosch)}

/* Anfrage als leeres Ticket */
.t-anfrage{background:var(--t-nacht);color:#fff;padding:120px 0 130px}
.t-anfrage-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.t-anfrage h2{color:#fff;font-size:clamp(44px,5.4vw,76px);font-stretch:75%;line-height:.95;margin-bottom:20px;max-width:10ch}
.t-anfrage p{color:#D4E3DC;font-size:19px;line-height:1.5;max-width:40ch}
.t-anfrage .t-alt{margin-top:18px;font-size:16px}
.t-anfrage .t-alt a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.t-form{transform:rotate(-1deg);gap:6px}
.t-form .t-kopf{margin-bottom:12px}
.t-form .cfield{margin-bottom:14px}
.t-form .cfield label{color:#4E6A5D;font-size:14px;font-weight:600}
.t-form .cfield input,.t-form .cfield textarea{background:transparent!important;border:0!important;border-bottom:2px solid #00271D!important;border-radius:0!important;padding:10px 2px;color:#00271D!important;font-size:17px;font-family:inherit}
.t-form .cfield input:focus,.t-form .cfield textarea:focus{outline:0;border-bottom-color:#00B86C!important}
.t-form .btn{margin-top:22px;background:#00271D;color:var(--t-frosch);justify-content:center}
.t-form .btn:hover{background:#0B3A2C;color:var(--t-frosch)}
.t-form .form-err{color:#B3261E}.t-form .form-ok{color:#00271D}

/* Band „Kontakt“ der Unterseiten */
.cta-band{background:var(--t-nacht);color:#fff}
.cta-band h2{color:#fff;font-size:clamp(30px,3.4vw,44px)}.cta-band p{color:#D4E3DC}
.cta-band .btn-primary{background:var(--t-frosch);color:#00271D}

/* Unterseiten: Karten und Kästen rund und flach */
.pillars{gap:20px!important}
.why-card,.role-box,.org-card,.info-rows,.contact-grid,.faq details{border-radius:var(--t-r)}
.contact-grid .cell.dark{background:var(--t-nacht)}
.faq summary::after{color:var(--t-wald)}

/* Fuß: Frosch und Wortmarke groß */
footer{background:var(--t-nacht);color:#B9CFC5}
footer h5{letter-spacing:.02em;text-transform:none;font-size:16px}
footer a:hover{color:var(--t-frosch)}
.t-fussband{padding:8px 0 48px}
.t-fussband .wrap{display:flex;align-items:flex-end;gap:clamp(16px,3vw,40px)}
.t-fussband img.t-frosch-gross{width:clamp(96px,18vw,260px);height:auto}
.t-fussband img.t-wortmarke-gross{width:clamp(220px,52vw,720px);height:auto}
footer .foot-grid > div:first-child img.logo{display:none}
footer::after{display:none}

/* Handy */
@media (max-width:920px){
  .t-hero-grid,.t-anfrage-grid{grid-template-columns:1fr;gap:40px}
  .t-hero{padding:48px 0 72px}.t-hero h1{max-width:none}
  .t-ticket{padding:28px 24px}
  .t-anfrage{padding:80px 0 90px}
}
@media (max-width:560px){
  .t-daten{grid-template-columns:1fr}
  .t-status{grid-template-columns:1fr 1fr;row-gap:16px}
  .t-hero .t-ticket,.t-form{transform:none}
}
@media print{.t-hero,.t-anfrage,header.site,footer{background:#fff!important;color:#000!important}.t-ticket{-webkit-mask:none;mask:none;border:1px solid #999}}