/* Leihenseder — Bildbogen mit Ausführungsleiste
   Glut auf Kalkweiß. Alles lokal, keine fremden Ressourcen. */

@font-face{font-family:"Archivo";src:url("schriften/archivo-var-latin.woff2") format("woff2");
  font-weight:100 900;font-display:swap;font-style:normal;
  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}
@font-face{font-family:"Archivo";src:url("schriften/archivo-var-latin-ext.woff2") format("woff2");
  font-weight:100 900;font-display:swap;font-style:normal;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson";src:url("schriften/atkinson-400-latin.woff2") format("woff2");
  font-weight:400;font-display:swap;font-style:normal;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson";src:url("schriften/atkinson-400-latin-ext.woff2") format("woff2");
  font-weight:400;font-display:swap;font-style:normal;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F}
@font-face{font-family:"Atkinson";src:url("schriften/atkinson-700-latin.woff2") format("woff2");
  font-weight:700;font-display:swap;font-style:normal;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson";src:url("schriften/atkinson-700-latin-ext.woff2") format("woff2");
  font-weight:700;font-display:swap;font-style:normal;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F}

:root{
  --kalk:#F3F0EA;
  --kalk-tief:#E7E2D8;
  --schwarz:#15161A;
  --glut:#BF3B0B;
  --glut-dunkel:#8E2B07;
  --grau:#5F646B;
  --linie:#C9C3B6;
  --bahn:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--kalk);color:var(--schwarz);
  font-family:"Atkinson",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:1.0625rem;line-height:1.65;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--glut-dunkel)}
a:hover{color:var(--glut)}
:focus-visible{outline:3px solid var(--glut);outline-offset:2px}

h1,h2,h3,.oberzeile,.knopf,.werkstoff,.ausf-titel,.leistung-name,.stellentitel,.menue-schalter{
  font-family:"Archivo",-apple-system,Arial,sans-serif;
}
h1{font-size:clamp(1.85rem,1.2rem + 2.6vw,3.1rem);line-height:1.1;font-weight:700;
   letter-spacing:.005em;margin:0 0 .6em;text-wrap:balance}
h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,2.05rem);line-height:1.15;font-weight:700;margin:0 0 .5em;text-wrap:balance}
h3{font-size:1.075rem;line-height:1.25;font-weight:700;margin:0 0 .4em;
   text-transform:uppercase;letter-spacing:.09em}
p{margin:0 0 1.05em}
.vorspann{font-size:clamp(1.06rem,1rem + .35vw,1.28rem);max-width:62ch}
.einleitung{max-width:66ch;color:var(--grau)}
.bogen-dunkel .einleitung{color:#C7CACE}

.sprung{position:absolute;left:-9999px;top:0;z-index:99;background:var(--schwarz);color:#fff;
  padding:.85rem 1.2rem;text-decoration:none}
.sprung:focus{left:0}

.bahn{width:min(100% - 2.4rem,var(--bahn));margin-inline:auto}

/* --- Kopf ------------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:40;background:var(--kalk);border-bottom:1px solid var(--linie)}
.kopf-innen{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.55rem 0}
.marke{flex:0 0 auto;display:block;background:var(--schwarz);padding:.5rem .85rem;line-height:0}
.marke img{width:132px;height:auto}
@media (min-width:1000px){.marke img{width:185px}}
.ruf{margin-left:auto;order:2;font-weight:700;font-size:.92rem;text-decoration:none;color:var(--schwarz);
  border:2px solid var(--schwarz);padding:.5rem .7rem;min-height:44px;display:inline-flex;align-items:center;gap:.35rem}
.ruf:hover{background:var(--schwarz);color:var(--kalk)}
.menue-schalter{order:3;display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;padding:.55rem .75rem;background:var(--schwarz);color:var(--kalk);border:0;
  font-size:.95rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.balken{width:20px;height:2px;background:currentColor;box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor}
.hauptnav{order:4;flex-basis:100%;display:none}
.hauptnav.ist-offen{display:block}
.hauptnav ul{list-style:none;margin:0;padding:0}
.hauptnav a{display:block;padding:.72rem .2rem;text-decoration:none;color:var(--schwarz);
  border-bottom:1px solid var(--linie);font-weight:700}
.hauptnav a:hover{color:var(--glut)}
.unternav{margin:.4rem 0 .8rem;padding-left:.9rem;border-left:3px solid var(--glut)}
.unternav a{font-weight:400;border-bottom:0;padding:.5rem .2rem}
@media (max-width:640px){
  .marke img{width:105px}
  .marke{padding:.45rem .6rem}
  .ruf{font-size:.88rem;padding:.5rem .6rem}
  .menue-schalter{font-size:0;letter-spacing:0;gap:0;padding:.6rem .75rem}
}
.unternav-titel{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--grau);padding:.5rem .2rem 0}

@media (min-width:1000px){
  .menue-schalter{display:none}
  .hauptnav{display:block;order:2;flex-basis:auto;margin-left:1.4rem}
  .hauptnav>ul{display:flex;gap:1.4rem}
  .hauptnav a{border-bottom:0;padding:.4rem 0}
  .hauptnav>ul>li>a{position:relative}
  .hauptnav>ul>li>a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--glut);transition:right .15s}
  .hauptnav>ul>li>a:hover::after{right:0}
  .hauptnav .unternav{display:none}
  .ruf{order:3}
}

/* --- Bogen ------------------------------------------------------------ */
.bogen{position:relative;padding:clamp(2.4rem,1.4rem + 3vw,4.2rem) 0}
.glut{height:4px;position:absolute;top:0;left:0;right:0;
  background:linear-gradient(90deg,#5B1400 0%,var(--glut) 28%,#E8811A 58%,#F3C34B 82%,#FFF3D2 100%)}
.bogen-hell{background:var(--kalk-tief)}
.bogen-dunkel{background:var(--schwarz);color:#EFECE5}
.bogen-dunkel a{color:#F2A25C}
.bogen-dunkel a:hover{color:#FFC48A}
.bogen-bild{padding:0}
.bogen-bild .glut{z-index:2}

/* --- Einstieg --------------------------------------------------------- */
.einstieg{padding:0;display:grid}
.einstieg-bild{position:relative}
.einstieg-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(15,16,19,.94) 0%,rgba(15,16,19,.86) 42%,rgba(15,16,19,.55) 78%,rgba(15,16,19,.4) 100%)}
.einstieg-bild img{width:100%;height:clamp(220px,42vw,430px);object-fit:cover;filter:saturate(.85)}
.einstieg-text{padding:clamp(1.6rem,1rem + 3vw,3rem) 0 clamp(2rem,1rem + 3vw,3.4rem)}
@media (min-width:900px){
  .einstieg{position:relative}
  .einstieg-bild{position:absolute;inset:0}
  .einstieg-bild img{height:100%}
  .einstieg-text{position:relative;min-height:min(78vh,620px);display:flex;flex-direction:column;justify-content:center}
}
.oberzeile{font-size:.78rem;text-transform:uppercase;letter-spacing:.2em;color:#F3C34B;margin-bottom:.9rem;font-weight:600}
.einstieg-text h1{max-width:16ch}
.einstieg .vorspann{max-width:58ch;color:#E6E2DA}

/* --- Knöpfe ----------------------------------------------------------- */
.knopfreihe{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.3rem 0 0}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:.7rem 1.35rem;font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.07em;
  text-decoration:none;border:2px solid var(--schwarz);color:var(--schwarz);background:transparent;cursor:pointer}
.knopf:hover{background:var(--schwarz);color:var(--kalk)}
.knopf-glut{background:var(--glut);border-color:var(--glut);color:#fff}
.knopf-glut:hover{background:var(--glut-dunkel);border-color:var(--glut-dunkel);color:#fff}
.bogen-dunkel .knopf{border-color:#EFECE5;color:#EFECE5}
.bogen-dunkel .knopf:hover{background:#EFECE5;color:var(--schwarz)}
.bogen-dunkel .knopf-glut,.knopf-hell{border-color:var(--glut);background:var(--glut);color:#fff}
.knopf-hell:hover{background:var(--glut-dunkel);border-color:var(--glut-dunkel);color:#fff}

/* --- Bildreihe -------------------------------------------------------- */
.bildreihe{display:grid;gap:2px;grid-auto-flow:column;grid-auto-columns:78%;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;background:var(--linie)}
.bildreihe figure{margin:0;position:relative;scroll-snap-align:start;background:var(--kalk)}
.bildreihe img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bildreihe figcaption{font-size:.82rem;color:var(--grau);padding:.5rem .7rem .7rem}
@media (min-width:760px){
  .bildreihe{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}

/* --- Leistungsbahn (Start) -------------------------------------------- */
.leistungsbahn{display:grid;gap:2px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  background:var(--linie);margin-top:1.6rem}
.leistung{position:relative;display:block;text-decoration:none;background:var(--schwarz)}
.leistung img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:opacity .2s}
.leistung:hover img,.leistung:focus-visible img{opacity:.55}
.leistung-name{position:absolute;left:0;right:0;bottom:0;background:rgba(21,22,26,.86);color:#fff;
  padding:.7rem .85rem;font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.06em}
.leistung:hover .leistung-name{background:var(--glut)}

/* --- Spalten ---------------------------------------------------------- */
.zweispalt{display:grid;gap:clamp(1.4rem,1rem + 2vw,2.8rem)}
@media (min-width:860px){.zweispalt{grid-template-columns:1fr 1fr;align-items:start}
  .zweispalt-bild{grid-template-columns:42% 1fr}}
.viererbahn{display:grid;gap:1px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  background:var(--linie);border:1px solid var(--linie);margin-top:1.6rem}
.posten{background:var(--kalk);padding:1.2rem}
.posten h3{color:var(--glut-dunkel)}
.posten p{margin:0;font-size:.96rem;color:var(--grau)}
.posten-bahn{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie)}
@media (min-width:860px){.posten-bahn{grid-template-columns:1fr 1fr}}
.posten-gross{background:var(--kalk);padding:clamp(1.2rem,.9rem + 1vw,1.9rem)}
.posten-gross h2{font-size:1.25rem;color:var(--glut-dunkel)}
.posten-gross p:last-child{margin-bottom:0}

/* --- Ausführungsleiste ------------------------------------------------ */
.ausfuehrung{margin:1.6rem 0 0;border-top:2px solid var(--schwarz)}
.ausf-gruppe{border-bottom:1px solid var(--linie);padding:1rem 0}
.ausf-titel{color:var(--grau);margin-bottom:.7rem;font-size:.78rem}
.ausf-liste{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));background:var(--linie);border:1px solid var(--linie)}
.feld{display:flex;align-items:center;gap:.65rem;width:100%;min-height:48px;text-align:left;
  padding:.7rem .8rem;background:var(--kalk);border:0;cursor:pointer;font:inherit;font-size:.96rem;color:var(--schwarz)}
.bogen-hell .feld{background:var(--kalk-tief)}
.feld:hover{background:#fff}
.marke-quadrat{flex:0 0 auto;width:16px;height:16px;border:2px solid var(--grau);background:transparent}
.feld[aria-pressed="true"]{background:#fff;font-weight:700;box-shadow:inset 4px 0 0 var(--glut)}
.feld[aria-pressed="true"] .marke-quadrat{background:var(--glut);border-color:var(--glut)}
.feld.ist-treffer .marke-quadrat{border-color:var(--glut)}
.feld.ist-treffer{color:var(--glut-dunkel);font-weight:700}

/* --- Werkstoffleiste / Filter ----------------------------------------- */
.werkstoffleiste{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.6rem 0 .4rem;
  padding:.9rem;border:2px solid var(--schwarz);background:var(--kalk-tief)}
.werkstoff-titel{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--grau)}
.werkstoff{min-height:44px;padding:.5rem .95rem;border:1px solid var(--grau);background:var(--kalk);
  color:var(--schwarz);cursor:pointer;font-size:.9rem;font-weight:600;letter-spacing:.02em}
.werkstoff:hover{border-color:var(--schwarz)}
.werkstoff.ist-aktiv{background:var(--glut);border-color:var(--glut);color:#fff}
.filter-meldung{font-size:.9rem;color:var(--grau);margin:.6rem 0 0;min-height:1.6em}
.bereich.ist-aus{display:none}

/* --- Anfrage ---------------------------------------------------------- */
.anfrage{margin-top:2rem;border:2px solid var(--schwarz);padding:clamp(1.1rem,.9rem + 1vw,1.7rem);background:var(--kalk)}
.bogen-dunkel .anfrage{background:#1D1F24;border-color:#3A3D44}
.anfrage-hinweis{font-size:.92rem;color:var(--grau);max-width:62ch}
.bogen-dunkel .anfrage-hinweis{color:#C7CACE}
.anfrage-wahl{font-weight:700;border-left:4px solid var(--glut);padding-left:.9rem;margin-bottom:0}

/* --- Listen / Text ---------------------------------------------------- */
.strichliste{list-style:none;margin:0 0 1.1em;padding:0;max-width:66ch}
.strichliste li{padding-left:1.4rem;position:relative;margin-bottom:.35rem}
.strichliste li::before{content:"";position:absolute;left:0;top:.72em;width:.85rem;height:2px;background:var(--glut)}
.weiterliste{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.weiterliste a{display:block;padding:.75rem .9rem;border:1px solid #3A3D44;text-decoration:none;min-height:48px}
.weiterliste a:hover{background:var(--glut);border-color:var(--glut);color:#fff}
.brotkrume{margin-bottom:1.4rem;font-size:.86rem;color:var(--grau)}
.brotkrume ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.brotkrume li+li::before{content:"›";margin-right:.5rem;color:var(--linie)}
.stellentitel{font-size:1.5rem;font-weight:700;color:var(--glut-dunkel);margin-bottom:.5em}
.hinweiskasten{font-size:.9rem;color:var(--grau);border-left:3px solid var(--linie);padding-left:.9rem;max-width:70ch}
.bogen-dunkel .hinweiskasten{color:#C7CACE;border-color:#3A3D44}
.kontaktkasten{background:var(--kalk);border:2px solid var(--schwarz);padding:clamp(1.1rem,.9rem + 1vw,1.7rem)}
.bogen-dunkel .kontaktkasten{background:#1D1F24;border-color:#3A3D44;color:#EFECE5}
address{font-style:normal;margin-bottom:1.05em}
.zeiten{border-collapse:collapse;width:100%;margin-bottom:1.05em}
.zeiten th,.zeiten td{text-align:left;padding:.55rem 0;border-bottom:1px solid var(--linie);font-weight:400}
.zeiten th{font-weight:700}

/* --- Formular --------------------------------------------------------- */
.formular{max-width:640px;margin-top:1.4rem}
.feldzeile{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.1rem}
.feldzeile label{font-weight:700;font-size:.95rem}
.formular input,.formular textarea{font:inherit;padding:.7rem .8rem;border:2px solid var(--grau);
  background:var(--kalk);color:var(--schwarz);min-height:48px;width:100%}
.formular input:focus,.formular textarea:focus{border-color:var(--glut)}
.feldzeile-haken{flex-direction:row;align-items:flex-start;gap:.7rem}
.feldzeile-haken input{width:24px;height:24px;min-height:24px;flex:0 0 auto;margin-top:.2rem;accent-color:var(--glut)}
.feldzeile-haken label{font-weight:400;font-size:.92rem}

/* --- Karte ------------------------------------------------------------ */
.karte{border:2px solid #3A3D44;padding:clamp(1.1rem,.9rem + 1vw,1.7rem);background:#1D1F24;margin-top:1.4rem}
.karte iframe{width:100%;height:min(70vw,420px);border:0;display:block;margin-top:1rem;background:#EFECE5}

/* --- Fuß -------------------------------------------------------------- */
.fuss{background:var(--schwarz);color:#EFECE5;border-top:4px solid var(--glut);padding:clamp(2.2rem,1.4rem + 2vw,3.4rem) 0 1.4rem}
.fuss a{color:#F2A25C}
.fuss-innen{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fuss h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:#9AA0A8;margin-bottom:.9rem}
.fuss-zeile{margin-bottom:.8em}
.fuss-liste{list-style:none;margin:0;padding:0}
.fuss-liste a{display:block;padding:.35rem 0;text-decoration:none}
.fuss-liste a:hover{text-decoration:underline}
.fuss-schluss{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid #3A3D44;
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;font-size:.86rem;color:#9AA0A8}
.fuss-schluss p{margin:0}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.kopf,.knopfreihe,.werkstoffleiste,.karte{display:none}body{background:#fff}}