/* =========================================================
   ZIDANO — Design System
   Marke: Orange #FF8429 · Anthrazit #444444
   ========================================================= */

/* ---------------------------------------------------------
   Schrift: lokal ausgeliefert, KEIN Google Fonts.
   Es wird keine Verbindung zu Google hergestellt — deshalb
   braucht die Datenschutzerklärung dazu auch keinen Abschnitt.
   Inter ist ein Variable Font, eine Datei deckt 100–900 ab.
   latin-ext wird für č ć š ž đ gebraucht.
   Lizenz: SIL Open Font License 1.1
   --------------------------------------------------------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --orange:#FF8429;
  --orange-600:#F06E10;
  --orange-700:#D25B05;
  --orange-tint:#FFF3E8;
  --orange-tint-2:#FFE6CE;

  --ink:#1B1A18;
  --grey:#444444;
  --muted:#6F6A64;
  --muted-2:#938D86;
  --line:#E7E2DC;
  --line-soft:#F1EDE8;

  --bg:#FFFFFF;
  --bg-warm:#FBF8F4;
  --dark:#1A1A1D;
  --dark-2:#232327;
  --dark-line:#33333A;

  /* Erfolgsmeldung in Formularen */
  --ok:#1F9D63;
  --ok-tint:#E8F6EF;

  --r-sm:8px;
  --r:14px;
  --r-lg:22px;
  --r-xl:30px;

  --shadow-sm:0 1px 2px rgba(27,26,24,.06), 0 2px 8px rgba(27,26,24,.04);
  --shadow:0 4px 12px rgba(27,26,24,.06), 0 18px 40px -18px rgba(27,26,24,.18);
  --shadow-lg:0 8px 24px rgba(27,26,24,.08), 0 40px 80px -30px rgba(27,26,24,.28);

  --maxw:1180px;
  --pad:clamp(20px, 5vw, 48px);
  --nav-h:76px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
  /* clip statt hidden: "hidden" auf html oder body macht daraus einen
     Scroll-Container und bricht dadurch Ankersprünge (#formular) und
     position:sticky. "clip" schneidet nur ab, ohne das zu tun. */
  overflow-x:clip;
}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; color:var(--grey);
  background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{color:var(--ink); margin:0 0 .5em; line-height:1.14; letter-spacing:-.022em; font-weight:700}
h1{font-size:clamp(2.35rem, 1.4rem + 3.6vw, 4.15rem); font-weight:800; letter-spacing:-.034em}
h2{font-size:clamp(1.85rem, 1.2rem + 2.2vw, 2.9rem); font-weight:800; letter-spacing:-.028em}
h3{font-size:clamp(1.15rem, 1rem + .55vw, 1.42rem)}
h4{font-size:1.03rem; letter-spacing:-.012em}
p{margin:0 0 1.1em}
a{color:var(--orange-700); text-decoration:none; transition:color .18s var(--ease)}
a:hover{color:var(--orange-600)}
ul,ol{margin:0 0 1.1em; padding-left:1.25em}
li{margin-bottom:.42em}
strong{color:var(--ink); font-weight:650}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:4px}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.wrap-narrow{max-width:820px; margin-inline:auto; padding-inline:var(--pad)}
section{padding:clamp(64px, 8vw, 116px) 0}
section.tight{padding:clamp(44px, 5vw, 72px) 0}
.bg-warm{background:var(--bg-warm)}
.bg-dark{background:var(--dark); color:#C9C6C1}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{color:#fff}
.bg-dark strong{color:#fff}

.grid{display:grid; gap:clamp(18px,2.4vw,28px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:680px){ .g2,.g3,.g4{grid-template-columns:1fr} }

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.split.lead-left{grid-template-columns:1.05fr .95fr}
@media(max-width:900px){ .split,.split.lead-left{grid-template-columns:1fr; gap:40px} }

/* ---------- Typo-Helfer ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.775rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange-700); margin-bottom:16px;
}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--orange); border-radius:2px}
.bg-dark .eyebrow{color:var(--orange)}
.lead{font-size:clamp(1.06rem,1rem + .38vw,1.24rem); color:var(--muted); line-height:1.6; max-width:62ch}
.bg-dark .lead{color:#A9A5A0}
.section-head{max-width:66ch; margin-bottom:clamp(34px,4vw,56px)}
.section-head.center{margin-inline:auto; text-align:center}
.section-head.center .eyebrow{justify-content:center}
.small{font-size:.9rem}
.tiny{font-size:.82rem; color:var(--muted-2); line-height:1.55}
.mark{color:var(--orange-700)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:.965rem; font-weight:650; letter-spacing:-.008em;
  padding:14px 26px; border-radius:var(--r); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .22s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px; height:17px; flex:none; transition:transform .22s var(--ease)}
.btn:hover svg.arr{transform:translateX(3px)}

.btn-primary{background:var(--orange); color:#fff; box-shadow:0 2px 6px rgba(255,132,41,.28), 0 12px 26px -12px rgba(255,132,41,.6)}
.btn-primary:hover{background:var(--orange-600); color:#fff; box-shadow:0 4px 12px rgba(255,132,41,.34), 0 18px 34px -14px rgba(255,132,41,.7)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:#000; color:#fff}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); color:var(--ink); background:#fff}
.bg-dark .btn-ghost{background:transparent; color:#fff; border-color:var(--dark-line)}
.bg-dark .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.05); color:#fff}
.btn-lg{padding:17px 32px; font-size:1.02rem; border-radius:16px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5; pointer-events:none}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* ---------- Kopfzeile ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.scrolled{border-bottom-color:var(--line); box-shadow:0 1px 16px rgba(27,26,24,.05)}
.nav{display:flex; align-items:center; gap:18px; height:var(--nav-h)}
.brand{display:flex; align-items:center; flex:none; margin-right:8px}
.brand img{height:34px; width:auto}
.nav-links{display:flex; align-items:center; gap:2px; margin-left:auto}
.nav-links a{
  color:var(--grey); font-size:.935rem; font-weight:550; padding:9px 13px; border-radius:9px;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.nav-links a:hover{background:var(--line-soft); color:var(--ink)}
.nav-links a.active{color:var(--ink); font-weight:650}
.nav-actions{display:flex; align-items:center; gap:10px; flex:none}

.lang{display:flex; align-items:center; background:var(--line-soft); border-radius:10px; padding:3px; gap:2px}
.lang button{
  font-family:inherit; font-size:.775rem; font-weight:700; letter-spacing:.045em;
  padding:6px 11px; border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}

.burger{display:none; width:44px; height:44px; border:1px solid var(--line); background:#fff; border-radius:11px; cursor:pointer; padding:0; place-items:center}
.burger span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; margin:3px auto; transition:transform .25s var(--ease), opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.nav-links .nav-cta-mobile{display:none}

@media(max-width:1030px){
  .burger{display:grid}
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:12px var(--pad) 22px;
    box-shadow:0 20px 40px -20px rgba(27,26,24,.3);
    transform:translateY(-14px); opacity:0; pointer-events:none; transition:.24s var(--ease); margin-left:0;
    max-height:calc(100dvh - var(--nav-h)); overflow-y:auto;
  }
  .nav-links.open{transform:none; opacity:1; pointer-events:auto}
  .nav-links a{padding:13px 4px; font-size:1.03rem; border-bottom:1px solid var(--line-soft); border-radius:0}
  .nav-links a:last-child{border-bottom:0}
  .nav-actions .btn-cta{display:none}
  .nav-links .nav-cta-mobile{display:inline-flex; margin-top:16px; padding:14px 26px; border-radius:var(--r); border-bottom:0}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--dark); color:#B8B4AF;
  padding:clamp(72px,9vw,124px) 0 clamp(64px,8vw,108px);
}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(720px 460px at 78% 8%, rgba(255,132,41,.20), transparent 62%),
    radial-gradient(560px 420px at 12% 96%, rgba(255,132,41,.09), transparent 66%);
}
.hero-z{
  position:absolute; right:-7%; top:50%; transform:translateY(-50%) rotate(-7deg);
  width:min(560px,52vw); opacity:.055; pointer-events:none;
}
.hero .wrap{position:relative; z-index:1}
.hero h1{color:#fff; max-width:15ch; margin-bottom:22px}
.hero h1 em{font-style:normal; color:var(--orange)}
.hero .lead{color:#A8A49F; max-width:54ch; font-size:clamp(1.08rem,1rem + .45vw,1.3rem); margin-bottom:34px}
.hero-badges{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; font-size:.83rem; font-weight:550; color:#CFCBC6;
  background:rgba(255,255,255,.055); border:1px solid var(--dark-line); padding:8px 15px; border-radius:100px;
}
.hero-badge svg{width:14px; height:14px; color:var(--orange); flex:none}

.hero-split{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(36px,5vw,72px); align-items:center}
@media(max-width:940px){ .hero-split{grid-template-columns:1fr; gap:44px} .hero-z{opacity:.04} }

/* Zwei-Wege-Karten im Hero */
.pathcards{display:grid; gap:14px}
.pathcard{
  display:block; background:rgba(255,255,255,.045); border:1px solid var(--dark-line);
  border-radius:var(--r-lg); padding:24px 26px; text-decoration:none;
  transition:transform .24s var(--ease), background .24s var(--ease), border-color .24s var(--ease);
}
.pathcard:hover{transform:translateY(-3px); background:rgba(255,255,255,.075); border-color:rgba(255,132,41,.5)}
.pathcard-top{display:flex; align-items:center; gap:12px; margin-bottom:9px}
.pathcard-ico{width:38px; height:38px; border-radius:11px; background:var(--orange); display:grid; place-items:center; flex:none}
.pathcard-ico svg{width:19px; height:19px; color:#fff}
.pathcard h3{color:#fff; margin:0; font-size:1.11rem}
.pathcard p{color:#9C9893; font-size:.925rem; margin:0 0 12px; line-height:1.55}
.pathcard .go{display:inline-flex; align-items:center; gap:7px; color:var(--orange); font-weight:650; font-size:.9rem}
.pathcard .go svg{width:15px; height:15px; transition:transform .22s var(--ease)}
.pathcard:hover .go svg{transform:translateX(4px)}

/* ---------- Karten ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,32px);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.card.hover:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-soft)}
.card h3{margin-bottom:.45em}
.card p:last-child{margin-bottom:0}
.card-ico{
  width:46px; height:46px; border-radius:13px; background:var(--orange-tint);
  display:grid; place-items:center; margin-bottom:18px;
}
.card-ico svg{width:22px; height:22px; color:var(--orange-700)}
.bg-dark .card{background:var(--dark-2); border-color:var(--dark-line)}
.bg-dark .card-ico{background:rgba(255,132,41,.14)}
.bg-dark .card-ico svg{color:var(--orange)}
.bg-dark .card p{color:#9C9893}

/* ---------- Ablauf / Schritte ---------- */
.steps{counter-reset:s; display:grid; gap:0}
.step{
  counter-increment:s; position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,34px);
  padding:clamp(26px,3.4vw,38px) 0; border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step-num{
  width:54px; height:54px; border-radius:16px; flex:none; display:grid; place-items:center;
  background:var(--orange-tint); color:var(--orange-700); font-weight:800; font-size:1.16rem; letter-spacing:-.02em;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.step-num::before{content:'0' counter(s)}
.step:hover .step-num{background:var(--orange); color:#fff; transform:scale(1.05)}
.step h3{margin-bottom:.35em}
.step p{margin-bottom:0; color:var(--muted); max-width:64ch}
.bg-dark .step{border-color:var(--dark-line)}
.bg-dark .step-num{background:rgba(255,132,41,.14); color:var(--orange)}

/* ---------- Berufe / Branchen ---------- */
.trades{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:clamp(16px,2.2vw,24px)}
.trade{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 26px 22px; transition:border-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease)}
.trade:hover{border-color:var(--orange); transform:translateY(-3px); box-shadow:var(--shadow)}
.trade-head{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.trade-head svg{width:24px; height:24px; color:var(--orange); flex:none}
.trade-head h3{margin:0; font-size:1.08rem}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{font-size:.815rem; font-weight:550; color:var(--muted); background:var(--bg-warm); border:1px solid var(--line-soft); padding:5px 11px; border-radius:100px; white-space:nowrap}

/* ---------- Portraitfoto ----------
   Bewusst kleiner gehalten und rechts ausgerichtet, damit der Text
   die Seite trägt und das Bild nicht die halbe Höhe einnimmt.
   Der Ausschnitt kommt aus object-fit, das Ausgangsbild darf also
   auch quer sein. */
.portrait{margin:0 0 0 auto; position:relative; max-width:330px; width:100%}
.portrait img{
  width:100%; border-radius:var(--r-lg); display:block;
  aspect-ratio:4/5; object-fit:cover; object-position:center 22%;
  background:var(--line-soft);
}
.portrait figcaption{
  position:absolute; left:14px; right:14px; bottom:14px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-radius:var(--r-sm); padding:11px 14px;
  display:grid; gap:1px; box-shadow:var(--shadow-sm);
}
.portrait figcaption strong{font-size:.95rem; color:var(--ink); font-weight:650; letter-spacing:-.012em}
.portrait figcaption span{font-size:.8rem; color:var(--muted)}
@media(max-width:900px){ .portrait{max-width:280px; margin-inline:auto} }

/* ---------- Video ---------- */
.videorahmen{
  border-radius:var(--r-xl); overflow:hidden; background:#000;
  border:1px solid var(--dark-line); box-shadow:var(--shadow-lg);
  max-width:900px;
}
.videorahmen video{width:100%; height:auto; display:block; aspect-ratio:16/9; background:#000}

/* ---------- Aktuell gesuchte Gewerke ---------- */
.stellen{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:clamp(16px,2.2vw,24px)}
.stelle{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,30px); display:flex; flex-direction:column;
  transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.stelle:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-soft)}
.stelle.dringend{border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,132,41,.1)}
.stelle-kopf{display:flex; align-items:flex-start; gap:13px; margin-bottom:14px}
.stelle-ico{
  width:42px; height:42px; border-radius:12px; background:var(--orange-tint);
  display:grid; place-items:center; flex:none;
}
.stelle-ico svg{width:21px; height:21px; color:var(--orange-700)}
.stelle-kopf h3{margin:0 0 2px; font-size:1.14rem; letter-spacing:-.018em}
.stelle-region{margin:0; font-size:.84rem; color:var(--muted-2); font-weight:550}
.stelle-marke{
  margin-left:auto; flex:none; align-self:flex-start;
  font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#fff; background:var(--orange); padding:5px 10px; border-radius:100px; white-space:nowrap;
}
.stelle-text{color:var(--muted); font-size:.935rem; line-height:1.6; flex:1; margin-bottom:20px}
.stelle-knopf{align-self:flex-start}

/* Leere Liste – kein Fehler, sondern ein gültiger Zustand */
.leerhinweis{
  text-align:center; max-width:60ch; margin-inline:auto;
  background:var(--bg-warm); border:1px dashed var(--line);
  border-radius:var(--r-xl); padding:clamp(34px,5vw,56px);
}
.leerhinweis-ico{
  width:54px; height:54px; border-radius:16px; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; margin:0 auto 20px;
}
.leerhinweis-ico svg{width:24px; height:24px; color:var(--muted-2)}
.leerhinweis h3{margin-bottom:.5em}
.leerhinweis p{color:var(--muted); margin-bottom:26px}

/* Vorbelegtes Berufsfeld nach Klick aus der Stellenliste */
input.vorbelegt{border-color:var(--orange); background:var(--orange-tint)}
.beruf-hinweis{font-size:.82rem; color:var(--orange-700); font-weight:600}

/* Anforderungs-Hinweis */
.anford-hinweis{
  font-size:.92rem; color:var(--muted); line-height:1.65;
  border-left:3px solid var(--line); padding:4px 0 4px 20px; max-width:70ch;
}

/* ---------- Zitat ---------- */
.quote{border-left:3px solid var(--orange); padding:4px 0 4px 26px; margin:0}
.quote p{font-size:clamp(1.12rem,1rem + .6vw,1.42rem); color:var(--ink); font-weight:500; line-height:1.5; letter-spacing:-.014em}
.quote footer{font-size:.9rem; color:var(--muted); font-weight:550}

/* ---------- CTA-Band ---------- */
.cta-band{position:relative; overflow:hidden; background:var(--dark); border-radius:var(--r-xl); padding:clamp(40px,5.5vw,72px); color:#B8B4AF}
.cta-band::before{content:''; position:absolute; inset:0; background:radial-gradient(620px 400px at 88% 12%, rgba(255,132,41,.22), transparent 64%)}
.cta-band > *{position:relative}
.cta-band h2{color:#fff; margin-bottom:.4em; max-width:19ch}
.cta-band .lead{color:#A8A49F; margin-bottom:28px}
.cta-z{position:absolute; right:-40px; bottom:-70px; width:290px; opacity:.06; pointer-events:none}

/* ---------- Formulare ---------- */
.form{display:grid; gap:24px}
.fieldset{border:0; padding:0; margin:0; display:grid; gap:16px}
.fieldset > legend{
  font-size:.775rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--orange-700);
  padding:0; margin-bottom:2px;
}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.frow.f3{grid-template-columns:repeat(3,1fr)}
@media(max-width:680px){ .frow,.frow.f3{grid-template-columns:1fr} }
.field{display:grid; gap:7px}
.field label,.field .lbl{font-size:.885rem; font-weight:600; color:var(--ink); letter-spacing:-.006em}
.field .hint{font-size:.8rem; color:var(--muted-2); line-height:1.5}
.field .req{color:var(--orange-700)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=url],select,textarea{
  font-family:inherit; font-size:.965rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r); padding:12px 14px; width:100%;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  appearance:none;
}
textarea{min-height:130px; resize:vertical; line-height:1.6}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6A64' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:17px; padding-right:42px; cursor:pointer;
}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--orange); box-shadow:0 0 0 4px rgba(255,132,41,.14)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#DC2626; box-shadow:0 0 0 4px rgba(220,38,38,.1)}
.err{font-size:.815rem; color:#DC2626; font-weight:550; display:none}
.err.show{display:block}
/* Pflicht-Auswahlgruppe ohne Treffer */
[data-pflichtgruppe][aria-invalid="true"] .opts{
  outline:2px solid #DC2626; outline-offset:6px; border-radius:var(--r);
}

/* Auswahl-Kacheln (Radio/Checkbox) */
.opts{display:grid; gap:9px}
.opts.o2{grid-template-columns:1fr 1fr}
.opts.o3{grid-template-columns:repeat(3,1fr)}
.opts.o4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){ .opts.o3,.opts.o4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:460px){ .opts.o2,.opts.o3,.opts.o4{grid-template-columns:1fr} }
.opt{
  position:relative; display:flex; align-items:flex-start; gap:11px;
  border:1.5px solid var(--line); border-radius:var(--r); padding:13px 15px; cursor:pointer; background:#fff;
  transition:border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.opt:hover{border-color:var(--muted-2)}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt .box{
  flex:none; width:20px; height:20px; border:1.5px solid var(--line); border-radius:6px; margin-top:1px; background:#fff;
  transition:.16s var(--ease); display:grid; place-items:center;
}
.opt input[type=radio] ~ .box{border-radius:50%}
.opt .box::after{
  content:''; width:10px; height:10px; background:#fff; transform:scale(0); transition:transform .16s var(--ease);
  clip-path:polygon(14% 44%, 0 58%, 39% 100%, 100% 22%, 86% 8%, 39% 71%);
}
.opt input[type=radio] ~ .box::after{clip-path:none; border-radius:50%; width:8px; height:8px}
.opt-txt{display:grid; gap:2px; min-width:0}
.opt-txt b{font-size:.915rem; font-weight:600; color:var(--ink); letter-spacing:-.006em}
.opt-txt span{font-size:.8rem; color:var(--muted); line-height:1.45}
.opt:has(input:checked){border-color:var(--orange); background:var(--orange-tint); box-shadow:0 0 0 3px rgba(255,132,41,.12)}
.opt:has(input:checked) .box{background:var(--orange); border-color:var(--orange)}
.opt:has(input:checked) .box::after{transform:scale(1)}
.opt:has(input:focus-visible){outline:3px solid var(--orange); outline-offset:2px}

/* Datei-Upload */
input[type=file]{
  font-family:inherit; font-size:.9rem; color:var(--muted);
  border:1.5px dashed var(--line); border-radius:var(--r); padding:14px;
  width:100%; background:var(--bg-warm); cursor:pointer;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
input[type=file]:hover{border-color:var(--orange); background:var(--orange-tint)}
input[type=file]:focus{outline:0; border-color:var(--orange); box-shadow:0 0 0 4px rgba(255,132,41,.14)}
input[type=file][aria-invalid="true"]{border-color:#DC2626; background:#FEF0F0}
input[type=file]::file-selector-button{
  font-family:inherit; font-size:.88rem; font-weight:600; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:9px;
  padding:8px 15px; margin-right:14px; cursor:pointer;
  transition:border-color .16s var(--ease);
}
input[type=file]::file-selector-button:hover{border-color:var(--ink)}
.dateiliste{font-size:.82rem; color:var(--orange-700); font-weight:550; line-height:1.5; word-break:break-word}
.dateiliste:empty{display:none}

/* Einwilligung */
.consent{display:flex; gap:11px; align-items:flex-start; font-size:.865rem; color:var(--muted); line-height:1.55}
.consent input{margin-top:3px; width:18px; height:18px; accent-color:var(--orange); flex:none; cursor:pointer}
.consent a{text-decoration:underline; text-underline-offset:2px}

/* Formular-Panel */
.form-panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(26px,3.6vw,44px); box-shadow:var(--shadow)}

/* Status-Meldung */
.form-status{display:none; border-radius:var(--r); padding:16px 18px; font-size:.93rem; line-height:1.55; gap:12px; align-items:flex-start}
.form-status.show{display:flex}
.form-status svg{width:20px; height:20px; flex:none; margin-top:1px}
.form-status.ok{background:var(--ok-tint); color:#14603D; border:1px solid #B9E2CE}
.form-status.ok svg{color:var(--ok)}
.form-status.bad{background:#FEF0F0; color:#9B1C1C; border:1px solid #F7CACA}
.form-status.bad svg{color:#DC2626}

/* ---------- Akkordeon ---------- */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-weight:650; font-size:1.03rem; color:var(--ink); letter-spacing:-.012em; line-height:1.45;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:''; position:absolute; right:6px; top:50%; width:13px; height:13px; margin-top:-7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8429' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .28s var(--ease);
}
.acc details[open] summary::after{transform:rotate(135deg)}
.acc summary:hover{color:var(--orange-700)}
.acc .acc-body{padding:0 44px 24px 0; color:var(--muted); font-size:.96rem}
.acc .acc-body p:last-child{margin-bottom:0}

/* ---------- Kontakt-Zeilen ---------- */
.contact-list{display:grid; gap:2px; list-style:none; padding:0; margin:0}
.contact-list li{display:flex; gap:14px; align-items:flex-start; padding:15px 0; border-bottom:1px solid var(--line-soft)}
.contact-list li:last-child{border-bottom:0}
.contact-list svg{width:19px; height:19px; color:var(--orange); flex:none; margin-top:3px}
.contact-list .k{font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); margin-bottom:2px}
.contact-list .v{color:var(--ink); font-weight:550; font-size:1rem; line-height:1.5}
.contact-list .v a{color:var(--ink)}
.contact-list .v a:hover{color:var(--orange-700)}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.page-head{background:var(--bg-warm); border-bottom:1px solid var(--line); padding:clamp(48px,6vw,86px) 0 clamp(40px,5vw,64px); position:relative; overflow:hidden}
.page-head::after{
  content:''; position:absolute; right:-60px; top:50%; transform:translateY(-50%) rotate(-7deg);
  width:340px; height:340px; opacity:.045; pointer-events:none;
  background:url('../img/zidano_bildzeichen_farbe.svg') center/contain no-repeat;
}
.page-head .wrap{position:relative}
.page-head h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.3rem); max-width:17ch; margin-bottom:16px}
.page-head .lead{margin-bottom:0}
.crumb{font-size:.83rem; color:var(--muted-2); margin-bottom:14px; font-weight:550}
.crumb a{color:var(--muted-2)} .crumb a:hover{color:var(--orange-700)}

/* ---------- Rechtstexte ---------- */
.legal{font-size:.96rem}
.legal h2{font-size:1.4rem; margin-top:2.2em; margin-bottom:.6em}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.06rem; margin-top:1.6em; margin-bottom:.5em}
.legal p,.legal li{color:var(--muted)}
.legal .ph{background:var(--orange-tint); color:var(--orange-700); padding:1px 7px; border-radius:5px; font-weight:600; font-size:.9em; white-space:nowrap}

/* ---------- Fußzeile ---------- */
.site-footer{background:var(--dark); color:#8E8A85; padding:clamp(52px,6vw,80px) 0 34px; font-size:.925rem}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(28px,4vw,48px); margin-bottom:44px}
@media(max-width:880px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .footer-grid{grid-template-columns:1fr; gap:32px} }
.footer-brand img{height:32px; margin-bottom:18px}
.footer-brand p{color:#8E8A85; font-size:.92rem; max-width:34ch; line-height:1.6}
.site-footer h4{color:#fff; font-size:.775rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:16px; font-weight:700}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin-bottom:.62em}
.site-footer a{color:#8E8A85}
.site-footer a:hover{color:var(--orange)}
.footer-bottom{
  border-top:1px solid var(--dark-line); padding-top:26px;
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
  font-size:.85rem; color:#6E6A66;
}
.footer-bottom nav{display:flex; flex-wrap:wrap; gap:20px}

/* ---------- Scroll-Reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s} .rv-d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
}

/* ---------- Utilities ---------- */
.mt0{margin-top:0} .mb0{margin-bottom:0}
.mt-s{margin-top:16px} .mt-m{margin-top:28px} .mt-l{margin-top:44px}
.center{text-align:center}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
[hidden]{display:none !important}
.skip{position:absolute; left:-9999px; top:0; background:var(--orange); color:#fff; padding:12px 20px; z-index:200; border-radius:0 0 10px 0; font-weight:650}
.skip:focus{left:0; color:#fff}