@charset "utf-8";
/* JR Photo&Design — Sucherfeld-Bahnen mit Winkelmarken
   Farben aus dem Farbschema der alten Seite gemessen (Elementor-Globals). */

/* ---------- Schriften (lokal, keine externen Quellen) ---------- */
@font-face{font-family:"Newsreader";src:url("schriften/newsreader-v26-latin_latin-ext-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("schriften/newsreader-v26-latin_latin-ext-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("schriften/newsreader-v26-latin_latin-ext-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Commissioner";src:url("schriften/commissioner-v24-latin_latin-ext-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Commissioner";src:url("schriften/commissioner-v24-latin_latin-ext-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Commissioner";src:url("schriften/commissioner-v24-latin_latin-ext-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("schriften/dm-mono-v16-latin_latin-ext-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("schriften/dm-mono-v16-latin_latin-ext-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --papier:#F4F5EE;
  --leinen:#E6DED4;
  --oliv:#22251E;
  --oliv-hell:#2E3229;
  --salbei:#9AA185;
  --salbei-tief:#5C6446;
  --tinte:#1B1D18;
  --asche:#575A4F;
  --winkel:#B7B9AB;
  --winkel-dunkel:#5C6152;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Commissioner",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --kopf:64px;
  --rand:clamp(18px,5vw,64px);
  --breit:1240px;
  --lese:66ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  font-weight:400;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--salbei-tief);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--tinte)}
:focus-visible{outline:2px solid var(--salbei-tief);outline-offset:3px}
.oliv :focus-visible{outline-color:var(--salbei)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.12;margin:0 0 .5em;letter-spacing:-.005em}
h1{font-size:clamp(2.3rem,7vw,4.2rem);font-weight:300}
h2{font-size:clamp(1.8rem,4.6vw,2.9rem);font-weight:300}
h3{font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:500}
h4{font-size:1.05rem;font-weight:500}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
li{margin-bottom:.35em}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--winkel);margin:2.5rem 0}

/* ---------- Hilfsklassen ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.springlink{position:absolute;left:-9999px;top:0;background:var(--oliv);color:#fff;padding:12px 18px;z-index:200}
.springlink:focus{left:8px;top:8px}
.mitte{max-width:var(--breit);margin-inline:auto;padding-inline:var(--rand)}
.schmal{max-width:var(--lese)}
.daten{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--asche);margin:0 0 1.1rem}
.oliv .daten{color:var(--salbei)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.neben{color:var(--asche)}
.bahn-oliv .neben,.oliv .neben{color:var(--salbei)}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky;top:0;z-index:100;background:var(--papier);
  border-bottom:1px solid var(--winkel);
}
.kopf-innen{max-width:var(--breit);margin-inline:auto;padding:0 var(--rand);
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--kopf)}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinte);padding:8px 0}
.marke img{width:132px;height:54px;object-fit:contain}
.marke b{font-family:var(--serif);font-weight:400;font-size:1.15rem;letter-spacing:.01em}
.marke span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--asche)}

.brenner{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 9px;background:none;border:1px solid var(--winkel);cursor:pointer;
}
.brenner i{display:block;height:1px;background:var(--tinte);transition:transform .2s,opacity .2s}
.brenner[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.brenner[aria-expanded="true"] i:nth-child(2){opacity:0}
.brenner[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.hauptnav ul{list-style:none;margin:0;padding:0}
.hauptnav a{
  display:block;text-decoration:none;color:var(--tinte);
  font-size:.95rem;padding:12px 2px;border-bottom:1px solid transparent;
}
.hauptnav a[aria-current="page"]{border-bottom-color:var(--salbei-tief);color:var(--salbei-tief)}
.hauptnav a.knopf{color:var(--papier);border-bottom:1px solid var(--oliv)}
.hauptnav a.knopf:hover,.hauptnav a.knopf[aria-current="page"]{color:#fff;background:var(--salbei-tief);border-color:var(--salbei-tief)}
.hauptnav a:hover{border-bottom-color:var(--salbei)}
.nav-gruppe > span{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--asche);display:block;margin-top:18px}

@media (max-width:1039px){
  .hauptnav{
    position:fixed;left:0;right:0;top:var(--kopf);height:calc(100vh - var(--kopf));
    height:calc(100dvh - var(--kopf));background:var(--papier);z-index:99;
    padding:24px var(--rand) 64px;overflow-y:auto;display:none;
    border-top:1px solid var(--winkel);
  }
  .hauptnav.offen{display:block}
  .hauptnav a{padding:13px 0;min-height:44px;border-bottom:1px solid rgba(107,110,99,.16)}
  .hauptnav .knopf{margin-top:22px;display:inline-flex}
}
@media (min-width:1040px){
  :root{--kopf:76px}
  .brenner{display:none}
  .hauptnav{display:block!important}
  .hauptnav > ul{display:flex;align-items:center;gap:26px}
  .nav-gruppe{position:relative}
  .nav-gruppe > span{margin:0;color:var(--tinte);font-family:var(--sans);font-size:.95rem;
    letter-spacing:0;text-transform:none;cursor:default;padding:12px 2px;border-bottom:1px solid transparent}
  .nav-gruppe:hover > span,.nav-gruppe:focus-within > span{border-bottom-color:var(--salbei)}
  .nav-gruppe ul{
    position:absolute;top:100%;left:-14px;min-width:230px;background:var(--papier);
    border:1px solid var(--winkel);padding:8px 14px;display:none;
  }
  .nav-gruppe:hover ul,.nav-gruppe:focus-within ul{display:block}
  .nav-gruppe ul a{padding:9px 0;border-bottom:1px solid rgba(107,110,99,.14)}
  .nav-gruppe ul li:last-child a{border-bottom:0}
}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:11px 22px;background:var(--oliv);color:var(--papier);
  font-family:var(--sans);font-size:.92rem;font-weight:500;letter-spacing:.02em;
  border:1px solid var(--oliv);text-decoration:none;cursor:pointer;
}
.knopf:hover{background:var(--salbei-tief);border-color:var(--salbei-tief);color:#fff}
.knopf-leer{background:none;color:var(--tinte);border-color:var(--winkel-dunkel)}
.knopf-leer:hover{background:var(--oliv);color:var(--papier);border-color:var(--oliv)}
.oliv .knopf,.fuss .knopf{background:var(--salbei);border-color:var(--salbei);color:var(--oliv)}
.oliv .knopf:hover,.fuss .knopf:hover{background:var(--papier);border-color:var(--papier);color:var(--oliv)}
.oliv .knopf-leer{background:none;color:var(--papier);border-color:var(--salbei)}
.oliv .knopf-leer:hover{background:var(--salbei);color:var(--oliv)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}

/* ---------- Bahnen ---------- */
.bahn{padding:clamp(46px,8vw,96px) 0}
.bahn-leinen{background:var(--leinen)}
.bahn-oliv,.oliv{background:var(--oliv);color:#E9EAE2}
.bahn-oliv h1,.bahn-oliv h2,.bahn-oliv h3{color:#F2F3EA}
.bahn-oliv a{color:var(--salbei)}
.bahn-oliv a:hover{color:#fff}
.bahn-eng{padding-top:clamp(30px,5vw,54px);padding-bottom:clamp(30px,5vw,54px)}

/* ---------- Sucherfeld: nur vier Winkelmarken ---------- */
.sucher{
  position:relative;padding:clamp(22px,3.4vw,34px);
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--winkel),var(--winkel)),linear-gradient(var(--winkel),var(--winkel)),
    linear-gradient(var(--winkel),var(--winkel)),linear-gradient(var(--winkel),var(--winkel)),
    linear-gradient(var(--winkel),var(--winkel)),linear-gradient(var(--winkel),var(--winkel)),
    linear-gradient(var(--winkel),var(--winkel)),linear-gradient(var(--winkel),var(--winkel));
  background-size:26px 1px,1px 26px,26px 1px,1px 26px,26px 1px,1px 26px,26px 1px,1px 26px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
}
.bahn-oliv .sucher,.oliv .sucher{
  background-image:
    linear-gradient(var(--winkel-dunkel),var(--winkel-dunkel)),linear-gradient(var(--winkel-dunkel),var(--winkel-dunkel)),
    linear-gradient(var(--winkel-dunkel),var(--winkel-dunkel)),linear-gradient(var(--winkel-dunkel),var(--winkel-dunkel)),
    linear-gradient(var(--winkel-dunkel),var(--winkel-dunkel)),linear-gradient(var(--winkel-dunkel),var(--winkel-dunkel)),
    linear-gradient(var(--winkel-dunkel),var(--winkel-dunkel)),linear-gradient(var(--winkel-dunkel),var(--winkel-dunkel));
}

/* ---------- Einstieg ---------- */
.einstieg{padding-top:clamp(34px,6vw,72px);padding-bottom:0}
.einstieg h1{margin-bottom:.35em;max-width:16ch}
.einstieg .vorsatz{max-width:56ch;font-size:clamp(1rem,1.6vw,1.16rem)}
.einstieg-bild{margin-top:clamp(28px,5vw,52px)}
.einstieg-bild img{width:100%}

/* ---------- Raster ohne Karten: Spalten mit Haarlinien ---------- */
.spalten{display:grid;gap:clamp(26px,4vw,46px);margin-top:2.2rem}
@media (min-width:700px){.spalten-2{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.spalten-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:760px){.spalten-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.spalten-4{grid-template-columns:repeat(4,1fr)}}
.spalten h3{margin-top:.7rem}
.spalten p{font-size:.96rem}

.wechsel{display:grid;gap:clamp(24px,4vw,52px);align-items:center}
@media (min-width:860px){
  .wechsel{grid-template-columns:1fr 1fr}
  .wechsel-gedreht > *:first-child{order:2}
}

figure{margin:0}
figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--asche);margin-top:.55rem}
.bahn-oliv figcaption{color:var(--salbei)}

/* ---------- Vollbreites Bildband ---------- */
.bahn-band{display:block;background:var(--oliv)}
.bahn-band figure{margin:0}
.bahn-band img{width:100%;height:auto;display:block}

/* ---------- Kontaktbogen (Galerie in bündigen Reihen) ---------- */
.kontaktbogen{margin-top:2rem}
.kb-reihe{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.kb-reihe button{
  padding:0;border:0;background:#1A1C16;cursor:zoom-in;display:block;width:100%;
  flex:0 0 100%;position:relative;
}
.kb-reihe button img{width:100%;height:auto}
@media (min-width:700px){
  .kb-reihe{flex-wrap:nowrap}
  .kb-reihe button{flex:0 0 calc((100% - var(--gaps,0px)) * var(--p,1));min-width:0}
}
.kb-reihe button::after{
  content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,0);transition:box-shadow .18s
}
.kb-reihe button:hover::after,.kb-reihe button:focus-visible::after{box-shadow:inset 0 0 0 2px var(--salbei)}

/* ---------- Lichtkasten ---------- */
.lichtkasten{
  position:fixed;inset:0;z-index:300;background:#0C0D0A;
  display:none;flex-direction:column;padding:12px;
}
.lichtkasten[open],.lichtkasten.auf{display:flex}
.lk-buehne{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.lk-buehne img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lk-leiste{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px;color:#D8DACF}
.lk-zaehler{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em}
.lk-knopf{
  min-width:46px;min-height:46px;background:none;border:1px solid #4A4F43;color:#E6E7DE;
  font-size:1.15rem;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center
}
.lk-knopf:hover{background:var(--salbei);color:var(--oliv);border-color:var(--salbei)}
.lk-nav{display:flex;gap:8px}

/* ---------- Listen / Preise ---------- */
.preisliste{list-style:none;padding:0;margin:1.4rem 0 0}
.preisliste li{
  display:flex;align-items:baseline;gap:10px;padding:.62rem 0;
  border-bottom:1px solid rgba(107,110,99,.22);margin:0;
}
.bahn-oliv .preisliste li{border-bottom-color:#3B4034}
.preisliste .pos{flex:1 1 auto}
.preisliste .pkt{flex:1 1 auto;border-bottom:1px dotted var(--winkel);transform:translateY(-4px);min-width:18px}
.preisliste .pr{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.95rem}
.preisliste small{display:block;color:var(--asche);font-size:.84rem;line-height:1.45}
.bahn-oliv .preisliste small{color:var(--salbei)}

.merkmale{list-style:none;padding:0;margin:1.2rem 0 0}
.merkmale li{padding-left:22px;position:relative;margin-bottom:.45em}
.merkmale li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--salbei-tief)}
.bahn-oliv .merkmale li::before{background:var(--salbei)}

.stufen{list-style:none;padding:0;margin:1.6rem 0 0;counter-reset:s}
.stufen li{counter-increment:s;padding:1.1rem 0 1.1rem 62px;position:relative;border-top:1px solid rgba(107,110,99,.22)}
.stufen li:last-child{border-bottom:1px solid rgba(107,110,99,.22)}
.stufen li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.15rem;
  font-family:var(--mono);font-size:.8rem;color:var(--salbei-tief);letter-spacing:.1em
}
.stufen h3{font-size:1.15rem;margin-bottom:.3em}

/* ---------- Stimmen ---------- */
.stimmen{display:grid;gap:clamp(22px,3vw,34px);margin-top:2rem}
@media (min-width:720px){.stimmen{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.stimmen{grid-template-columns:repeat(3,1fr)}}
.stimme{display:flex;flex-direction:column;gap:.9rem;padding-top:1.3rem;border-top:1px solid rgba(107,110,99,.25)}
.bahn-oliv .stimme{border-top-color:#3B4034}
.stimme blockquote{margin:0;font-size:.95rem;line-height:1.6}
.stimme figcaption{display:flex;align-items:center;gap:12px;text-transform:none;letter-spacing:.04em;font-size:.75rem;margin:0}
.stimme figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px}

/* ---------- Vorher/Nachher ---------- */
.vn{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vn figcaption{margin-top:.4rem}

/* ---------- Formular ---------- */
.formular{margin-top:1.8rem;max-width:620px}
.feld{margin-bottom:1.15rem}
.feld label{display:block;font-size:.86rem;font-weight:500;margin-bottom:.35rem}
.feld .hinweis{display:block;font-size:.78rem;color:var(--asche);font-weight:400;margin-top:.2rem}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;min-height:46px;padding:11px 13px;font-family:var(--sans);font-size:1rem;
  color:var(--tinte);background:#FCFCF8;border:1px solid var(--winkel-dunkel);border-radius:0;
}
textarea{min-height:150px;resize:vertical}
.oliv input,.oliv select,.oliv textarea{background:#191B15;color:#E9EAE2;border-color:#4A4F43}
.wahl{display:flex;gap:10px;align-items:flex-start;margin-bottom:.7rem;font-size:.9rem}
.wahl input{margin-top:.28rem;width:20px;height:20px;flex:0 0 20px;accent-color:var(--salbei-tief)}
.pflicht{color:var(--salbei-tief);font-weight:600}
.demo-hinweis{
  margin:1.6rem 0 0;padding:16px 18px;border:1px dashed var(--winkel-dunkel);
  font-size:.88rem;color:var(--asche);background:rgba(154,161,133,.09)
}

/* ---------- Rechner ---------- */
.rechner{margin-top:2rem}
.rechner-summe{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--winkel-dunkel)
}
.rechner-summe b{font-family:var(--mono);font-size:1.6rem;font-weight:500}
.rechner-text{width:100%;min-height:170px;margin-top:1rem;font-family:var(--mono);font-size:.82rem;line-height:1.55}

/* ---------- Lageplan ---------- */
.lageplan{margin-top:1.6rem;border:1px solid var(--winkel-dunkel);background:#EDEEE4;padding:14px}
.lageplan svg{width:100%;height:auto;display:block}
.lageplan p{font-size:.85rem;color:var(--asche);margin:.9rem 0 0}

/* ---------- Fuß ---------- */
.fuss{background:var(--oliv);color:#C9CCC0;padding:clamp(42px,6vw,72px) 0 32px;font-size:.92rem}
.fuss h2{font-size:1.5rem;color:#F2F3EA}
.fuss a{color:#D9DCCF;text-decoration:none;border-bottom:1px solid transparent}
.fuss a:hover{border-bottom-color:var(--salbei);color:#fff}
.fuss-raster{display:grid;gap:32px}
@media (min-width:760px){.fuss-raster{grid-template-columns:1.4fr 1fr 1fr}}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.45em}
.fuss .titel{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--salbei);margin:0 0 .9rem}
.fuss-unten{margin-top:34px;padding-top:20px;border-top:1px solid #3B4034;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.82rem;color:#9DA192}

/* ---------- Druck ---------- */
@media print{
  .kopf,.brenner,.hauptnav,.lichtkasten,.knopfreihe{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .bahn-oliv,.oliv{background:#fff!important;color:#000!important}
}