@font-face{font-family:"Radio Canada Big"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("schriften/radio-canada-big-latin-wght.woff2") format("woff2")}
@font-face{font-family:"Fira Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("schriften/fira-sans-400-latin.woff2") format("woff2")}
@font-face{font-family:"Fira Sans"; font-style:normal; font-weight:500; font-display:swap;
  src:url("schriften/fira-sans-500-latin.woff2") format("woff2")}
@font-face{font-family:"Fira Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("schriften/fira-sans-600-latin.woff2") format("woff2")}

:root{
  --gruen:#95C11C;
  --gruen-btn:#95C11C;
  --gruen-btn-hover:#86AE14;
  --btn-text:#1E2310;
  --gruen-tief:#557310;
  --gruen-blass:#F1F6E1;
  --braun:#4F0300;
  --titel:#222222;
  --text:#4F4C45;
  --sub:#6F6B62;
  --linie:#E6E1D6;
  --bg:#F8F6F0;
  --karte:#ffffff;
  --anthrazit:#262624;
  --rot:#B3261E;
  --schatten:0 8px 30px rgba(40,34,20,.07);
  --radius:14px;
  --font-titel:"Radio Canada Big",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font:"Fira Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
h1,h2,h3{margin:0 0 .45em; line-height:1.18; font-family:var(--font-titel); font-weight:600; letter-spacing:-.01em; color:var(--titel)}
h1{font-size:clamp(1.8rem,3.7vw,2.6rem)}
h2{font-size:clamp(1.4rem,3.2vw,2.1rem)}
h3{font-size:1.1rem}
p{margin:0 0 1em}
.wrap{max-width:1456px; margin:0 auto; padding:0 20px}
.block{padding:64px 0}
.weiss{background:var(--karte)}

/* Anthrazit-Sektionen: ueberschreiben die Farbtokens fuer alles darin */
.dunkel{
  --titel:#ffffff;
  --text:#C9C5BB;
  --sub:#A39F95;
  --karte:#30302D;
  --linie:#42413C;
  --bg:#262624;
  --gruen-tief:#B5D94A;
  --gruen-blass:#30302D;
  --schatten:0 10px 34px rgba(0,0,0,.28);
  background:var(--anthrazit);
  color:#C9C5BB;
}

.kicker{display:block; color:var(--gruen-tief); font-weight:600;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px}
.sub{font-size:1.05rem; max-width:780px; color:var(--sub)}
.mitte{text-align:center}
.mitte .sub{margin-left:auto; margin-right:auto}

/* Buttons */
.btn{display:inline-block; background:var(--gruen-btn); color:var(--btn-text); font-weight:600; font-family:inherit;
  padding:16px 32px; border-radius:12px; text-decoration:none; border:0; cursor:pointer; font-size:1.03rem;
  transition:background .12s ease, transform .1s ease}
.btn:hover{background:var(--gruen-btn-hover)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6; cursor:default}

/* Logo (weisse Fassung auf dunklem Grund) */
.logo{display:block; height:46px; width:auto}
.logo img{height:100%; width:auto}

/* Header */
header{position:sticky; top:0; z-index:50; background:rgba(38,38,36,.97); border-bottom:1px solid #42413C}
.kopf{display:flex; align-items:center; justify-content:space-between; gap:14px; max-width:1456px; margin:0 auto; padding:10px 20px}
.kopf-cta{background:var(--gruen-btn); color:var(--btn-text); font-weight:600; padding:10px 20px; border-radius:10px; text-decoration:none; font-size:.92rem; white-space:nowrap}
.kopf-cta:hover{background:var(--gruen-btn-hover)}

/* Bild-Platzhalter, werden durch echte Fotos ersetzt (Dateiname steht im data-datei) */
.ph{display:flex; align-items:center; justify-content:center; text-align:center; padding:18px;
  background:repeating-linear-gradient(135deg,#EDE8DC 0 14px,#E6E0D2 14px 28px);
  color:#6F6B62; font-size:.88rem; font-weight:500; line-height:1.4; min-height:200px}
.ph span{background:rgba(255,255,255,.82); border-radius:10px; padding:10px 14px; max-width:280px}
.ph strong{display:block; color:#4F4C45; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:3px}
.dunkel .ph{background:repeating-linear-gradient(135deg,#34342F 0 14px,#2E2E2A 14px 28px); color:#A39F95}
.dunkel .ph span{background:rgba(38,38,36,.85)}
.dunkel .ph strong{color:#C9C5BB}

/* Hero */
.hero{background:var(--karte); border-bottom:1px solid var(--linie)}
.hero-in{display:grid; grid-template-columns:1.03fr .97fr; gap:48px; align-items:center;
  max-width:1456px; margin:0 auto; padding:60px 20px 64px}
.hero h1{max-width:660px}
.hero .ort{font-size:.98rem; font-weight:500; color:var(--sub); margin:0 0 22px}
.hero .lead{font-size:clamp(1rem,2vw,1.14rem); max-width:610px; margin-bottom:26px}
.hero-bild{border-radius:18px; overflow:hidden; box-shadow:var(--schatten); position:relative; align-self:stretch; min-height:460px}
.hero-bild img,.hero-bild .ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sterne-zeile{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 22px; font-size:1.12rem; font-weight:600; color:var(--titel)}
.sterne{color:#E8A317; letter-spacing:2px; font-size:1.55rem; line-height:1}
.sterne-zeile a{color:inherit}
.haken{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:26px; font-weight:500; color:var(--titel); font-size:.95rem}
.haken span{display:flex; align-items:center; gap:9px}
.haken span::before{
  content:""; width:19px; height:19px; flex:0 0 auto;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378A012' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat}

/* Icons im Stil der Kundenseite */
.ico{flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--gruen); display:grid; place-items:center}
.ico svg{width:19px; height:19px; fill:#fff}

/* Perk-Zeile */
.perks{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:34px 0}
.perk{background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:18px 20px;
  display:flex; gap:14px; align-items:center; box-shadow:var(--schatten)}
.perk strong{display:block; color:var(--titel); font-size:1rem; font-weight:600; margin-bottom:2px}
.perk div span{font-size:.9rem; color:var(--sub); line-height:1.45}

/* Stimmen (Google-Bewertungen) */
.stimmen{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px}
.stimme{margin:0; background:var(--bg); border:1px solid var(--linie); border-radius:var(--radius); padding:24px 24px 20px; display:flex; flex-direction:column}
.stimme blockquote{margin:0 0 14px; font-size:1.02rem; color:var(--titel); line-height:1.55}
.stimme figcaption{margin-top:auto; font-size:.86rem; color:var(--sub); font-weight:500}
.auszeichnung{display:flex; gap:18px; align-items:center; margin-top:18px; padding:20px 24px; border:1px solid var(--linie); border-radius:var(--radius); background:var(--gruen-blass)}
.auszeichnung .zahl{font-family:var(--font-titel); font-weight:600; font-size:2.2rem; color:var(--titel); line-height:1}
.auszeichnung p{margin:0; color:var(--titel); font-weight:500}
.echtheit{margin:14px 0 0; font-size:.82rem; color:var(--sub)}

/* Karten-Raster */
.karten{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px}
.karte{background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--schatten)}
.karte h3{margin-bottom:.4em}
.karte p{margin:0; font-size:.97rem}
.karte .num{display:block; font-size:.74rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--gruen-tief); margin-bottom:10px}

/* Zwei-Spalter mit Bild */
.duo{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
.duo .bild{border-radius:18px; overflow:hidden; min-height:340px; position:relative; box-shadow:var(--schatten)}
.duo .bild img,.duo .bild .ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* Zitat */
.zitat{border-left:3px solid var(--gruen); padding:4px 0 4px 20px; margin:26px 0 0; max-width:620px}
.zitat p{font-size:1.1rem; font-weight:500; color:var(--titel); margin:0 0 6px; line-height:1.5}
.zitat cite{font-style:normal; font-size:.88rem; color:var(--gruen-tief); font-weight:600}

/* Arbeitsplatz-Bloecke */
.platz{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px}
.platz figure{margin:0; background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden; box-shadow:var(--schatten)}
.platz img,.platz .ph{width:100%; height:260px; object-fit:cover}
.platz figcaption{padding:22px 22px 24px}
.platz h3{margin-bottom:.4em}
.platz p{margin:0; font-size:.96rem}

/* Galerie */
.galerie{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px}
.galerie img,.galerie .ph{border-radius:12px; width:100%; height:290px; object-fit:cover}

/* Angebot und Profil */
.tarif{display:grid; grid-template-columns:1.1fr .9fr; gap:34px; margin-top:34px; align-items:stretch}
.tarif-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; height:100%}
.tarif-liste li{display:flex; gap:14px; align-items:center; flex:1; padding:13px 0; border-bottom:1px solid var(--linie); font-size:1rem}
.tarif-liste li:last-child{border-bottom:0}
.tarif-liste .ico{width:38px; height:38px}
.tarif-liste .ico svg{width:18px; height:18px}
.tarif-liste strong{color:var(--titel); font-weight:600}
.stufen{background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--schatten)}
.stufen p{font-size:.96rem}
.stufen ul{margin:0; padding:0; list-style:none}
.stufen li{padding:9px 0; border-bottom:1px solid var(--linie); font-size:.96rem; font-weight:500; color:var(--titel)}
.stufen li:last-child{border-bottom:0}
.cta-block{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px;
  margin-top:38px; padding:22px 26px; background:var(--gruen-blass); border:1px solid var(--linie);
  border-radius:var(--radius)}
.cta-block p{margin:0; font-weight:600; color:var(--titel); font-size:1.06rem}
.cta-block .btn{flex-shrink:0}
.hinweis{margin-top:26px; background:var(--gruen-blass); border:1px solid #DCE8B8; border-radius:12px; padding:18px 22px; font-size:.97rem}
.hinweis strong{color:var(--titel); font-weight:600}

/* Ablauf */
.schritte{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; counter-reset:schritt}
.schritt{background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--schatten); position:relative}
.schritt::before{counter-increment:schritt; content:counter(schritt); display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--gruen); color:var(--btn-text); font-weight:600; margin-bottom:14px; font-family:var(--font-titel)}
.schritt p{margin:0; font-size:.97rem}

/* FAQ */
.faq{max-width:820px; margin:32px auto 0}
.faq details{background:var(--karte); border:1px solid var(--linie); border-radius:12px; margin-bottom:10px; overflow:hidden}
.faq summary{cursor:pointer; padding:18px 46px 18px 20px; font-weight:600; color:var(--titel); position:relative; list-style:none; font-size:1.01rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; position:absolute; right:18px; top:15px; font-size:1.5rem; font-weight:400; color:var(--gruen-tief); line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq .antwort{padding:0 20px 18px; font-size:.97rem}
.faq .antwort p:last-child{margin-bottom:0}

/* Formular */
.formsec{background:var(--anthrazit); padding:64px 0; border-top:1px solid #42413C}
.formbox{max-width:660px; margin:0 auto; background:var(--karte); border:1px solid var(--linie); border-radius:20px; overflow:hidden; box-shadow:0 14px 44px rgba(0,0,0,.18)}
.formkopf{padding:28px 28px 0}
.formkopf h2{margin:0 0 6px; font-size:1.45rem}
.formkopf p{margin:0; color:var(--sub); font-size:.95rem}
.testmodus{margin:14px 0 0; padding:9px 12px; border-radius:8px; background:#FFF4D6; border:1px solid #F0D58A; color:#5C4300; font-size:.85rem; font-weight:500}
.zaehler{display:flex; justify-content:space-between; align-items:center; padding:20px 28px 0; font-size:.84rem; font-weight:500; color:var(--sub)}
.balken{height:6px; background:var(--bg); margin:8px 28px 0; border-radius:999px; overflow:hidden}
.balken div{height:100%; width:0; background:var(--gruen); border-radius:999px; transition:width .3s ease}
.formkoerper{padding:24px 28px 32px}
.step{display:none}
.step.aktiv{display:block; animation:auf .22s ease}
@keyframes auf{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.step .frage{font-size:1.24rem; margin-bottom:6px}
.step .tipp{font-size:.92rem; color:var(--sub); margin-bottom:18px}
.opt{display:block; width:100%; text-align:left; background:var(--karte); border:1.5px solid var(--linie); border-radius:12px;
  padding:15px 18px; margin-bottom:10px; font-size:1rem; font-weight:500; color:var(--titel); cursor:pointer;
  font-family:inherit; transition:border-color .12s ease, background .12s ease}
.opt:hover{border-color:var(--gruen); background:#FAFCF3}
.opt.gewaehlt{border-color:var(--gruen); background:var(--gruen-blass)}
.mehrfach{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.chk{display:flex; align-items:center; gap:10px; border:1.5px solid var(--linie); border-radius:12px; padding:13px 15px;
  cursor:pointer; font-weight:500; color:var(--titel); font-size:.95rem}
.chk.gewaehlt{border-color:var(--gruen); background:var(--gruen-blass)}
.chk input{width:18px; height:18px; accent-color:#78A012; flex:0 0 auto}
.feld{margin-bottom:14px}
.feld label{display:block; font-weight:500; color:var(--titel); margin-bottom:6px; font-size:.93rem}
.feld input,.feld textarea{width:100%; padding:13px 15px; border:1px solid var(--linie); border-radius:12px;
  font-size:1rem; font-family:inherit; color:var(--text); background:var(--karte)}
.feld textarea{min-height:96px; resize:vertical}
.feld input:focus,.feld textarea:focus{outline:none; border-color:var(--gruen); box-shadow:0 0 0 3px rgba(149,193,28,.2)}
.feld.paar{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.dsgvo{display:flex; gap:11px; align-items:flex-start; margin:16px 0 4px}
.dsgvo input{width:20px; height:20px; min-width:20px; margin-top:2px; accent-color:#78A012}
.dsgvo label{font-size:.86rem; color:var(--sub); line-height:1.5; cursor:pointer}
.dsgvo a{color:var(--gruen-tief)}
.trotzdem{margin:12px 0 0; font-size:.88rem; color:var(--sub)}
.nav{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:18px}
.zurueck{background:none; border:0; color:var(--sub); cursor:pointer; font-size:.93rem; font-weight:500; font-family:inherit; padding:8px 0}
.zurueck:hover{color:var(--titel)}
.fehler{color:var(--rot); font-size:.9rem; margin-top:10px; display:none; font-weight:500}
.sendefehler{display:none; margin-top:14px; padding:14px 16px; border-radius:10px; background:#FDECEA; border:1px solid #F3C2BD; color:#6B1A13; font-size:.92rem}
.sendefehler a{color:inherit; font-weight:600}
.danke,.stopp{display:none; text-align:center; padding:26px 6px 12px}
.danke .ok,.stopp .ok{width:66px; height:66px; border-radius:50%; background:var(--gruen-blass); color:var(--gruen-tief); font-size:2.2rem;
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-weight:700}
.danke h3,.stopp h3{font-size:1.4rem}
.stopp .ok{background:#FFF4D6; color:#5C4300}
.stopp p{color:var(--sub)}
.stopp a{color:var(--gruen-tief); font-weight:500}
.danke p{color:var(--sub)}

/* Footer */
footer{background:var(--anthrazit); color:#A39F95; padding:44px 0 30px; font-size:.93rem; border-top:1px solid #42413C}
.fuss{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
footer strong{color:#ffffff; display:block; margin-bottom:6px; font-weight:600}
footer a{color:#C9C5BB}
.fuss-logo{height:58px; width:auto; margin-bottom:14px}
.recht{border-top:1px solid #42413C; margin-top:26px; padding-top:16px; font-size:.83rem}
.recht a{text-decoration:underline; margin:0 4px}

/* Cookie-Banner */
#consent{position:fixed; left:14px; right:14px; bottom:14px; z-index:90; background:var(--karte);
  border:1px solid var(--linie); border-radius:14px; box-shadow:0 12px 40px rgba(40,34,20,.2);
  padding:18px 20px; max-width:540px; margin:0 auto; display:none}
#consent p{font-size:.87rem; margin:0 0 12px}
#consent a{color:var(--gruen-tief)}
#consent .reihe{display:flex; gap:10px; flex-wrap:wrap}
#consent button{flex:1; min-width:140px; padding:11px 14px; border-radius:10px; font-weight:600; cursor:pointer;
  border:1px solid var(--linie); font-size:.9rem; font-family:inherit}
#c-ok{background:var(--gruen-btn); color:var(--btn-text); border-color:var(--gruen-btn)}
#c-no{background:var(--karte); color:var(--titel)}

/* Rechtstexte (Impressum, Datenschutz) */
.rechtstext{max-width:820px; margin:0 auto; padding:44px 20px 64px}
.rechtstext .karte{padding:clamp(24px,4vw,44px)}
.rechtstext h1{font-size:clamp(1.6rem,3.4vw,2.1rem)}
.rechtstext h2{font-size:1.15rem; margin:1.9em 0 .5em}
.rechtstext h3{font-size:1.02rem; margin:1.5em 0 .4em}
.rechtstext ul{margin:0 0 1em; padding-left:1.25em}
.rechtstext li{margin:0 0 .4em}
.rechtstext a{color:var(--gruen-tief)}
.adresse{background:var(--gruen-blass); border-radius:10px; padding:16px 18px; margin:0 0 1.4em}
.adresse p{margin:0}
.widerruf{font:inherit; font-weight:600; color:var(--btn-text); background:var(--gruen-btn); border:0; border-radius:10px; padding:11px 18px; cursor:pointer}

/* Stellenuebersicht */
.stellen{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px}
.stelle{background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden; box-shadow:var(--schatten); display:flex; flex-direction:column}
.stelle .ph,.stelle .ph-bild{height:240px; width:100%; object-fit:cover}
.stelle-text{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1}
.stelle-text p{color:var(--sub)}
.stelle-text .btn{margin-top:auto; align-self:flex-start}

@media(max-width:1240px){
  .galerie img,.galerie .ph{height:240px}
  .platz img,.platz .ph{height:220px}
}
@media(max-width:980px){
  .hero-in{grid-template-columns:1fr; gap:32px; padding:44px 20px 50px}
  .hero-bild{min-height:280px; order:-1}
  .perks{grid-template-columns:1fr 1fr}
  .stimmen{grid-template-columns:1fr}
}
@media(max-width:900px){
  .karten{grid-template-columns:1fr 1fr}
  .duo{grid-template-columns:1fr; gap:28px}
  .duo .bild{min-height:240px; order:-1}
  .platz{grid-template-columns:1fr}
  .platz img,.platz .ph{height:200px}
  .tarif{grid-template-columns:1fr}
  .tarif-liste{height:auto}
  .tarif-liste li{flex:none}
  .schritte{grid-template-columns:1fr}
  .fuss{grid-template-columns:1fr 1fr}
  .stellen{grid-template-columns:1fr}
}
@media(max-width:620px){
  .block{padding:46px 0}
  .perks{grid-template-columns:1fr}
  .karten{grid-template-columns:1fr}
  .galerie{grid-template-columns:1fr 1fr; gap:10px}
  .galerie img,.galerie .ph{height:160px}
  .ph{font-size:.8rem; padding:10px}
  .mehrfach{grid-template-columns:1fr}
  .feld.paar{grid-template-columns:1fr}
  .fuss{grid-template-columns:1fr}
  .logo{height:38px}
  .kopf-cta{padding:9px 15px; font-size:.85rem}
  .formkoerper{padding:20px 18px 26px}
  .formkopf{padding:22px 18px 0}
  .zaehler{padding:18px 18px 0}
  .balken{margin:8px 18px 0}
  .btn{width:100%; text-align:center}
  .nav{flex-wrap:wrap-reverse}
  .auszeichnung{flex-direction:column; align-items:flex-start}
}