:root{
  color-scheme:light;

  --akzent:#820909;
  --auf-akzent:#FFFFFF;
  --grund:#f6f6f6;
  --flaeche:#FFFFFF;
  --text:#171823;
  --text-leise:#707176;
  --linie:#dfdfe0;
  --akzent-lesbar:#820909;
  
  --balken:#171823;
  --auf-balken:#FFFFFF;
  --auf-balken-leise:#b0b0b4;

  --breite:min(100% - 32px, 62rem);
  --schmal:min(100% - 32px, 40rem);
  --radius:14px;
  
  --treffer:52px;
  
  --lesebreite:37em;
  
}



*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
}

h1,h2,h3{line-height:1.25;margin:0 0 .4em;letter-spacing:-.01em;hyphens:auto;overflow-wrap:break-word}

h1{font-size:clamp(1.5rem,8vw,1.9rem)}
h2{font-size:1.35rem}
h3{font-size:1.05rem}
p{margin:0 0 1em}
a{color:var(--akzent-lesbar)}
img{max-width:100%;height:auto}

.mitte{width:var(--breite);margin-inline:auto}

.schmal{width:var(--schmal);margin-inline:0}

.mitte.schmal{margin-inline:auto}
section{padding:34px 0}


.ueberspringen{
  position:absolute;left:-9999px;top:0;z-index:9;
  background:var(--akzent);color:var(--auf-akzent);
  padding:12px 18px;border-radius:0 0 var(--radius) 0;
}
.ueberspringen:focus{left:0}


.kopf{
  background:var(--flaeche);
  border-bottom:1px solid var(--linie);
  position:sticky;top:0;z-index:5;
}
.kopf-reihe{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 0}

.marke{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  text-decoration:none;color:var(--text);
  min-width:0;flex:1 1 auto;min-height:var(--treffer);
}
.marke-text{display:flex;flex-direction:column;justify-content:center;min-width:0}


.marke-zeichen{display:block;width:34px;height:34px;flex:0 0 auto}
.marke-name{font-weight:700;font-size:clamp(.95rem,4.2vw,1.05rem);letter-spacing:.01em}
.marke-zusatz{font-size:14px;color:var(--text-leise)}

@media (max-width:419px){
  .marke-zusatz{display:none}
  .marke{gap:8px}
  .marke-zeichen{width:30px;height:30px}
}

.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--treffer);padding:0 18px;border-radius:var(--radius);
  background:var(--akzent);color:var(--auf-akzent);
  font-weight:650;text-decoration:none;
}
.knopf-tel{flex:0 0 auto;padding:0 16px}
.knopf-tel span{white-space:nowrap}
.knopf-gross{width:100%;font-size:1.02rem;padding:14px 18px}
.knopf svg{flex:0 0 auto}
.hinweis-extern .aussen{vertical-align:-2px;margin-right:6px;opacity:.75}
.knopf:active{filter:brightness(.93)}
a:focus-visible,.knopf:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}


.aufmacher{padding:30px 0 22px}
.aufmacher .zeile{font-size:1.15rem;margin:0 0 .3em}
.aufmacher .unterzeile{color:var(--text-leise);margin:0}
.aufmacher-klein{padding:26px 0 6px}


.kachel-scout{
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius);padding:20px 18px;
}
.kachel-scout p{margin:0 0 16px}
.hinweis-extern{
  margin:12px 0 0;font-size:14px;color:var(--text-leise);text-align:center;
}


.gruendeliste{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.gruendeliste li{
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius);padding:16px 18px;
  border-left:3px solid var(--akzent);
}
.gruendeliste h3{margin:0 0 .25em}
.gruendeliste p{margin:0;color:var(--text-leise)}


.ablauf{margin:0;padding-left:1.3em;display:grid;gap:10px}
.ablauf li{padding-left:.2em}


.kontaktblock{
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius);padding:18px;
}
.kdaten{margin:0;display:grid;gap:4px}
.kdaten dt{
  font-size:14px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-leise);margin-top:14px;
}
.kdaten dt:first-child{margin-top:0}
.kdaten dd{margin:0}

.kdaten a{display:inline-block;min-height:var(--treffer);line-height:var(--treffer);text-decoration-thickness:1px}
.verweis-karte{display:block;margin-top:2px;font-size:15px}
.zeiten{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}

.zeiten li{display:grid;gap:0;
  padding:6px 0;border-bottom:1px solid var(--linie);font-size:15px}
.zeiten li:last-child{border-bottom:0}
.zeiten .std{color:var(--text-leise);font-variant-numeric:tabular-nums}


.platzhalter{
  border:1.5px dashed var(--linie);border-radius:var(--radius);
  padding:16px 18px;color:var(--text-leise);background:transparent;
}
.platzhalter-flaeche{display:grid;gap:8px;justify-items:center;text-align:center;padding:30px 20px}
.platzhalter p{margin:0;max-width:34rem}
.ph-marke{
  display:inline-block;font-size:14px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--akzent-lesbar);
  border:1px solid var(--akzent-lesbar);border-radius:99px;padding:3px 10px;
  margin-right:8px;
}
.platzhalter-flaeche .ph-marke{margin-right:0}


.text h2{margin-top:1.6em;font-size:1.15rem}
.text h2:first-child{margin-top:0}
.text p{color:var(--text-leise)}
.text strong{color:var(--text)}



.fuss{
  background:var(--balken);border-top:none;
  padding:30px 0 36px;margin-top:44px;font-size:15px;color:var(--auf-balken-leise);
}
.fuss-firma{margin:0;color:var(--auf-balken);font-weight:650}
.fuss-zeile{margin:2px 0 0}
.fuss-verweise{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:8px}
.fuss-verweise a{min-height:var(--treffer);line-height:var(--treffer);color:var(--auf-balken)}


@media (min-width:700px){
  body{font-size:17.5px}
  h1{font-size:2.3rem}
  h2{font-size:1.55rem}
  section{padding:44px 0}
  .gruendeliste{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
  .knopf-gross{width:auto;min-width:22rem}
  .kdaten{grid-template-columns:11rem 1fr;gap:6px 20px;align-items:baseline}
  .kdaten dt{margin-top:10px}
  .kdaten dd{margin-top:10px}
  .kdaten dt:first-child,.kdaten dt:first-child + dd{margin-top:0}
  .zeiten li{grid-template-columns:1fr auto;gap:4px 16px;align-items:baseline}
  .zeiten .std{text-align:right}
}


@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}


.wege{list-style:none;margin:0 0 1.4rem;padding:0;border-top:1px solid var(--linie)}
.wege li{border-bottom:1px solid var(--linie)}
.wege a{display:flex;align-items:center;min-height:52px;padding:6px 2px;text-decoration:none}
.wege a:hover,.wege a:focus-visible{text-decoration:underline}


@media (max-width:419px){
  .knopf-tel{padding:0 10px;gap:6px}
}


main p, main li, main dd{max-width:var(--lesebreite)}

main .platzhalter p{margin-inline:auto}


@media (min-width:800px){
  .kachel-scout{
    display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:28px;padding:24px 26px;
  }
  .kachel-scout p{margin:0}
  .kachel-scout .knopf-gross{width:auto;white-space:nowrap}
  .kachel-scout .hinweis-extern{
    grid-column:2;margin:8px 0 0;text-align:center;max-width:22em;
  }
}

@media (max-width:799px){
  main p.hinweis-extern{margin-inline:auto}
}

main .zeiten li{max-width:none}


.feldreihe{margin-bottom:18px}
.feldreihe label{display:block;font-size:14px;color:var(--text-leise);margin-bottom:6px}

.feldreihe input[type=text],
.feldreihe input[type=email],
.feldreihe input[type=tel],
.feldreihe input[type=number],
.feldreihe select,
.feldreihe textarea{
  width:100%;min-height:var(--treffer);
  padding:12px 14px;border-radius:10px;
  background:var(--flaeche);border:1px solid var(--linie);color:var(--text);
  font-family:inherit;font-size:16px;line-height:1.4;
}
.feldreihe textarea{resize:vertical;min-height:120px}
.feldreihe input:focus-visible,
.feldreihe select:focus-visible,
.feldreihe textarea:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}

.feldreihe .pflicht{font-weight:600}
.feldreihe .pflicht::after{content:" (Pflichtfeld)";font-weight:400;color:var(--text-leise)}

.feld-fehler{display:block;margin-top:6px;font-size:14px;color:var(--akzent-lesbar);font-weight:600}
.feldreihe.hat-fehler input,
.feldreihe.hat-fehler select,
.feldreihe.hat-fehler textarea{border-color:var(--akzent-lesbar);border-width:2px}
.formular-fuss{margin-top:22px}
.formular-hinweis{font-size:14px;color:var(--text-leise);margin:14px 0 0;max-width:var(--lesebreite)}


.aufmacher-reihe{display:flex;flex-direction:column;gap:18px}
.aufmacher-zeichen{width:72px;height:72px;flex:0 0 auto}
@media (min-width:700px){
  .aufmacher-reihe{flex-direction:row;align-items:center;gap:32px}
  .aufmacher-zeichen{width:108px;height:108px}
}
.aufmacher-text{min-width:0}


.stimmung img{display:block;width:100%;height:auto;border-radius:var(--radius)}


.kartenfeld img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--linie)}
.kartenfeld a{display:block;border-radius:10px}
.kartenfeld a:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.kartennennung{margin:6px 0 0;font-size:14px;color:var(--text-leise)}