/* =====================================================================
   SCHATTENRISS - Tattoo-Atelier fuer Schwarz-Weiss-Realismus, Hannover
   Fiktive Demo. Haltung: fast schwarz, ein einziges kraeftiges Rot,
   Riesenversalien, rote Haarlinien als Raster.
   Schrift: Archivo Black (Anzeige) + Inter (Lauftext), lokal.
   ===================================================================== */

@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/archivoblack-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/archivoblack-400-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+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 var";font-style:normal;font-weight:400 700;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+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter var";font-style:normal;font-weight:400 700;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}

:root{
  --schwarz:#0A0A0B;
  --kohle:#121215;
  --kohle-hoch:#191A1E;
  --rot:#FF2E1F;          /* Schrift auf Schwarz, 5.3:1 */
  --rot-tief:#C8140B;     /* Knopfflaeche, weisse Schrift 5.9:1 */
  --rot-glut:#8A0F08;
  --weiss:#F6F4F1;
  --grau:#ABA8A4;         /* Fliesstext auf Schwarz, 8.4:1 */
  --grau-tief:#8C8A86;
  --linie:rgba(255,46,31,.30);
  --linie-matt:rgba(246,244,241,.12);

  --anzeige:"Archivo Black","Arial Black",Impact,sans-serif;
  --lauf:"Inter var",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --huelle:1400px;
  --rand:clamp(18px,5vw,64px);
  --luft:clamp(72px,10vw,152px);
  --takt:.5s;
  --kurve:cubic-bezier(.2,.75,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--schwarz);color:var(--grau);
  font:400 clamp(15px,1.05vw,17px)/1.7 var(--lauf);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--anzeige);font-weight:400;color:var(--weiss);
  text-transform:uppercase;letter-spacing:-.025em;line-height:.92}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
::selection{background:var(--rot);color:#fff}

.huelle{max-width:var(--huelle);margin:0 auto;padding-inline:var(--rand)}
.springen{position:absolute;left:-9999px;top:0;background:var(--rot-tief);color:#fff;
  padding:12px 20px;z-index:200;font-weight:700}
.springen:focus{left:12px;top:12px}

/* ---------- Kopfleiste ---------- */
.kopf{position:fixed;inset:0 0 auto;z-index:90;
  display:flex;align-items:center;gap:clamp(14px,3vw,40px);
  padding:14px var(--rand);
  background:rgba(10,10,11,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--takt),padding var(--takt),background var(--takt)}
.kopf.fest{border-bottom-color:var(--linie);padding-block:9px;background:rgba(10,10,11,.94)}
.marke{font-family:var(--anzeige);font-size:12px;line-height:1.05;letter-spacing:.02em;
  color:var(--weiss);text-decoration:none;white-space:nowrap;flex:0 0 auto}
.marke span{display:block;color:var(--rot)}
.kopf nav{margin-left:auto;display:flex;gap:clamp(12px,2vw,30px)}
.kopf nav a{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--weiss);text-decoration:none;padding:6px 0;position:relative}
.kopf nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--rot);transition:right .3s var(--kurve)}
.kopf nav a:hover::after,.kopf nav a:focus-visible::after{right:0}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--rot-tief);color:#fff;text-decoration:none;font-weight:700;
  font-size:13px;letter-spacing:.02em;padding:12px 22px;border:0;cursor:pointer;
  transition:background .25s,transform .25s var(--kurve)}
.knopf:hover{background:var(--rot);transform:translateY(-2px)}
.knopf.gross{padding:18px 34px;font-size:15px}
.knopf.hohl{background:transparent;color:var(--weiss);border:2px solid var(--rot);
  padding:10px 20px}
.knopf.hohl:hover{background:var(--rot);color:#fff}
.kopf>.knopf{flex:0 0 auto}
.kopf nav .knopf{display:none}
.schalter{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.schalter i{display:block;width:26px;height:2px;background:var(--weiss);margin:5px 0;
  transition:transform .3s var(--kurve),opacity .2s}
.schalter[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.schalter[aria-expanded="true"] i:nth-child(2){opacity:0}
.schalter[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1020px){
  .kopf nav,.kopf>.knopf{display:none}
  .schalter{display:block}
  .kopf nav.offen{display:flex;position:fixed;inset:58px 0 auto;flex-direction:column;
    gap:0;background:var(--schwarz);border-bottom:1px solid var(--linie);padding:8px var(--rand) 26px}
  .kopf nav.offen a{font-size:20px;font-family:var(--anzeige);letter-spacing:-.01em;
    padding:14px 0;border-bottom:1px solid var(--linie-matt)}
  .kopf nav.offen .knopf{display:inline-flex;margin-top:20px;align-self:flex-start}
}

/* ---------- Deko: rote Haarlinien ---------- */
.deko{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.deko b{position:absolute;background:var(--linie);display:block}
.senkrecht{top:0;bottom:0;width:1px;left:clamp(56px,13vw,196px)}
.diagonal{width:1px;height:340px;transform-origin:top center}

/* ---------- Startbild ---------- */
.start{position:relative;min-height:min(104vh,1000px);display:flex;align-items:flex-end;
  padding-top:120px;overflow:hidden;isolation:isolate}
.start-bild{position:absolute;inset:0 0 0 auto;width:min(62%,880px);z-index:-2}
.start-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:grayscale(1) contrast(1.14) brightness(.92)}
.start-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--schwarz) 2%,rgba(10,10,11,.72) 34%,rgba(10,10,11,0) 78%),
             linear-gradient(0deg,var(--schwarz) 1%,rgba(10,10,11,0) 34%)}
.start .huelle{width:100%;padding-bottom:clamp(40px,7vw,90px);position:relative}
.start-titel{display:grid;grid-template-columns:auto 1fr;
  column-gap:clamp(8px,1.6vw,26px);align-items:end;
  font-size:clamp(38px,9.1vw,148px);letter-spacing:-.045em;margin-bottom:.06em}
.start-titel i{font-style:normal;color:var(--rot)}
.start-titel .z1{grid-column:1/-1;grid-row:1}
.start-titel .z2{grid-column:2;grid-row:2}
.start-titel .ort{grid-column:1;grid-row:2;align-self:end;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:clamp(16px,2.9vw,44px);letter-spacing:-.01em;line-height:1;
  padding-bottom:.1em}
.start-titel .ort em{font-style:normal;font-family:var(--lauf);font-weight:400;
  font-size:.58em;color:var(--rot);letter-spacing:0}
.start-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,42px);
  margin-top:clamp(22px,4vw,48px)}
.start-fuss p{max-width:38ch;font-size:clamp(14px,1.1vw,17px);color:var(--grau);margin:0}
.pfeil{font-family:var(--anzeige);text-transform:uppercase;text-decoration:none;
  color:var(--weiss);font-size:clamp(26px,4.4vw,58px);letter-spacing:-.03em;
  display:inline-flex;align-items:center;gap:.28em;transition:color .25s}
.pfeil::before{content:"";width:0;height:0;border-left:.56em solid var(--rot);
  border-top:.33em solid transparent;border-bottom:.33em solid transparent;
  transition:transform .3s var(--kurve)}
.pfeil:hover{color:var(--rot)}
.pfeil:hover::before{transform:translateX(.22em)}

@media (max-width:820px){
  .start{min-height:auto;padding-top:104px}
  .start-bild{width:100%;opacity:.5}
  .start-bild::after{background:linear-gradient(180deg,rgba(10,10,11,.5),var(--schwarz) 92%)}
  .start-titel{grid-template-columns:1fr}
  .start-titel .ort{grid-column:1;grid-row:1;writing-mode:horizontal-tb;transform:none;
    font-size:clamp(17px,5.4vw,28px);margin-bottom:10px;padding-bottom:0}
  .start-titel .z1{grid-column:1;grid-row:2}
  .start-titel .z2{grid-column:1;grid-row:3}
  .start .huelle{padding-block:34px 54px}
}

/* ---------- Abschnitte ---------- */
.abschnitt{position:relative;padding-block:var(--luft)}
.abschnitt.hell{background:var(--kohle)}
.titel{font-size:clamp(38px,8.6vw,132px);letter-spacing:-.04em;
  margin-bottom:clamp(24px,4vw,56px)}
.titel::before{content:"";display:inline-block;width:0;height:0;margin-right:.18em;
  vertical-align:.04em;
  border-left:.42em solid var(--rot);border-top:.26em solid transparent;
  border-bottom:.26em solid transparent}
.titel i{font-style:normal;color:var(--rot)}
.titel.rechts{text-align:right}
.vorsatz{font-family:var(--lauf);font-weight:700;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rot);margin-bottom:16px;display:block}

/* Versetzte Textbloecke wie in der Vorlage */
.raster{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,26px)}
.block{font-size:clamp(15px,1.25vw,19px);line-height:1.62;color:var(--grau)}
.block.hell{color:var(--weiss)}
.block.gross{font-family:var(--anzeige);text-transform:uppercase;color:var(--weiss);
  font-size:clamp(26px,4.6vw,62px);line-height:.98;letter-spacing:-.03em}
.block.gross i{font-style:normal;color:var(--rot)}

.sp1-6{grid-column:1/7} .sp1-5{grid-column:1/6} .sp2-7{grid-column:2/8}
.sp5-10{grid-column:5/11} .sp6-12{grid-column:6/13} .sp7-13{grid-column:7/13}
.sp1-13{grid-column:1/13} .sp3-9{grid-column:3/10} .sp4-9{grid-column:4/10}
.sp1-8{grid-column:1/9} .sp5-13{grid-column:5/13}
@media (max-width:820px){
  .raster{grid-template-columns:1fr;gap:18px}
  .raster>*{grid-column:1/-1 !important}
}

/* ---------- Ueber mich ---------- */
.hallo{font-size:clamp(30px,5.4vw,74px);margin-bottom:.3em}
.ich{display:grid;grid-template-columns:minmax(240px,.9fr) 1.4fr;
  gap:clamp(20px,4vw,60px);align-items:start;margin-block:clamp(26px,4vw,52px)}
.ich-bild{position:relative}
.ich-bild img{width:100%;aspect-ratio:9/11.5;object-fit:cover;
  filter:grayscale(1) contrast(1.1);border:1px solid var(--linie)}
.ich-bild::after{content:"";position:absolute;inset:14px -14px -14px 14px;
  border:1px solid var(--rot);z-index:-1}
@media (max-width:820px){.ich{grid-template-columns:1fr}}

/* ---------- Bildraster ---------- */
.gitter{display:grid;gap:clamp(6px,.9vw,12px)}
.gitter.drei{grid-template-columns:repeat(3,1fr)}
.gitter.vier{grid-template-columns:repeat(4,1fr)}
.gitter.zwei{grid-template-columns:repeat(2,1fr)}
.kachel{position:relative;overflow:hidden;background:var(--kohle-hoch);
  border:0;padding:0;cursor:zoom-in;display:block;width:100%}
.kachel img{width:100%;height:100%;object-fit:cover;aspect-ratio:9/11.5;
  filter:grayscale(1) contrast(1.08) brightness(.92);
  transition:filter .45s var(--kurve),transform .55s var(--kurve)}
.kachel::after{content:"";position:absolute;inset:0;border:0 solid var(--rot);
  transition:border-width .25s var(--kurve)}
.kachel:hover img,.kachel:focus-visible img{filter:grayscale(.1) contrast(1.06) brightness(1);
  transform:scale(1.05)}
.kachel:hover::after,.kachel:focus-visible::after{border-width:3px}
.gitter.vier .kachel img{aspect-ratio:2/3}
.notiz{background:var(--kohle-hoch);border:1px solid var(--linie-matt);border-radius:18px;
  display:flex;align-items:center;padding:clamp(18px,2.4vw,34px);
  font-size:clamp(15px,1.2vw,18px);color:var(--weiss);line-height:1.5}
@media (max-width:700px){
  .gitter.drei{grid-template-columns:repeat(2,1fr)}
  .gitter.vier{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Cover-up-Paare ---------- */
.paare{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,34px);
  margin-top:clamp(20px,3vw,42px)}
.paar{background:var(--kohle-hoch);border:1px solid var(--linie-matt);padding:10px}
.paar .zwei-bilder{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.paar figure{margin:0;position:relative}
.paar img{width:100%;aspect-ratio:9/11.5;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.paar figcaption{position:absolute;left:0;top:0;background:var(--rot-tief);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;padding:5px 9px;text-transform:uppercase}
.paar figure.vorher figcaption{background:#2A2A2E;color:var(--weiss)}
.paar>p{margin:12px 4px 4px;font-size:13.5px;color:var(--grau-tief)}
@media (max-width:900px){.paare{grid-template-columns:1fr}}

/* ---------- Preise ---------- */
.preisliste{border-top:2px solid var(--linie)}
.preiszeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  padding:clamp(16px,2.2vw,26px) 0;border-bottom:1px solid var(--linie-matt)}
.preiszeile dt{font-family:var(--anzeige);text-transform:uppercase;color:var(--weiss);
  font-size:clamp(17px,2vw,27px);letter-spacing:-.02em}
.preiszeile .fuellung{flex:1;height:1px;background:var(--linie-matt);min-width:20px}
.preiszeile dd{margin:0;font-family:var(--anzeige);color:var(--rot);
  font-size:clamp(17px,2vw,27px);white-space:nowrap}
.preiszeile small{display:block;width:100%;color:var(--grau-tief);font-size:13.5px;
  font-family:var(--lauf);margin-top:6px}
.preis-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:20px;
  margin-top:clamp(24px,3vw,40px)}
.preis-fuss p{margin:0;max-width:46ch;font-size:14.5px;color:var(--grau-tief)}

/* ---------- Ablauf ---------- */
.stufen{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);
  margin-top:clamp(24px,3vw,44px)}
.stufe{position:relative;padding-top:clamp(38px,5vw,64px);border-top:2px solid var(--linie)}
.stufe span{position:absolute;top:clamp(-22px,-2vw,-14px);left:-4px;
  font-family:var(--anzeige);font-size:clamp(46px,6vw,86px);line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(255,46,31,.82)}
.stufe h3{font-size:clamp(17px,1.7vw,23px);margin-bottom:.6em}
.stufe p{font-size:14.5px;color:var(--grau)}
@media (max-width:900px){.stufen{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stufen{grid-template-columns:1fr}}
.breitbild{margin-top:clamp(30px,4vw,56px);position:relative;overflow:hidden}
.breitbild img{width:100%;aspect-ratio:16/10;object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.86)}
.breitbild figcaption{position:absolute;left:0;bottom:0;right:0;
  padding:clamp(16px,3vw,34px);background:linear-gradient(0deg,rgba(10,10,11,.94),rgba(10,10,11,0));
  font-family:var(--anzeige);text-transform:uppercase;color:var(--weiss);
  font-size:clamp(15px,2.4vw,32px);letter-spacing:-.02em;line-height:1.05}
.breitbild figcaption i{font-style:normal;color:var(--rot)}

/* ---------- Stimmen ---------- */
.stimmen{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,26px)}
.stimme{background:var(--kohle-hoch);border:1px solid var(--linie-matt);
  padding:clamp(20px,2.6vw,34px);position:relative}
.stimme::before{content:"";position:absolute;left:0;top:0;width:3px;height:52px;background:var(--rot)}
.sterne{color:var(--rot);letter-spacing:.18em;font-size:13px;margin-bottom:12px}
.stimme blockquote{margin:0 0 16px;color:var(--weiss);font-size:clamp(15px,1.25vw,18px);
  line-height:1.6}
.stimme footer{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau-tief)}
@media (max-width:760px){.stimmen{grid-template-columns:1fr}}

/* ---------- Fragen ---------- */
.frage{border-bottom:1px solid var(--linie-matt)}
.frage summary{list-style:none;cursor:pointer;padding:clamp(16px,2.2vw,24px) 46px clamp(16px,2.2vw,24px) 0;
  position:relative;font-family:var(--anzeige);text-transform:uppercase;color:var(--weiss);
  font-size:clamp(15px,1.6vw,22px);letter-spacing:-.015em;line-height:1.2}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;
  margin-top:-7px;border-right:3px solid var(--rot);border-bottom:3px solid var(--rot);
  transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--kurve)}
.frage[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.frage summary:hover{color:var(--rot)}
.frage .antwort{padding:0 46px 24px 0;font-size:15px;color:var(--grau);max-width:78ch}

/* ---------- Kontaktformular ---------- */
.formular{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)}
.feld{display:flex;flex-direction:column;gap:8px}
.feld.weit{grid-column:1/-1}
.feld label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--weiss)}
.feld label span{color:var(--rot)}
.feld input,.feld textarea{background:var(--kohle-hoch);border:1px solid var(--linie-matt);
  color:var(--weiss);padding:14px 16px;font:400 15px/1.5 var(--lauf);border-radius:0;
  transition:border-color .25s,background .25s}
.feld textarea{min-height:150px;resize:vertical}
.feld input:focus,.feld textarea:focus{border-color:var(--rot);outline:none;background:#1E1F23}
.feld .fehler{font-size:12.5px;color:var(--rot);font-weight:600}
.feld .fehler[hidden]{display:none}
.zustimmung{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;
  font-size:13.5px;color:var(--grau)}
.zustimmung input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--rot-tief);margin-top:2px}
.zustimmung a{color:var(--rot)}
.form-fuss{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.danke{grid-column:1/-1;border:2px solid var(--rot);padding:16px 20px;color:var(--weiss);
  font-weight:600;font-size:15px}
.danke[hidden]{display:none}
@media (max-width:700px){.formular{grid-template-columns:1fr}}

/* ---------- Ratgeber ---------- */
.beitraege{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,26px)}
.beitrag{position:relative;display:block;text-decoration:none;overflow:hidden;
  background:var(--kohle-hoch)}
.beitrag img{width:100%;aspect-ratio:25/16;object-fit:cover;
  filter:grayscale(.75) contrast(1.08) brightness(.72);
  transition:transform .6s var(--kurve),filter .45s}
.beitrag:hover img,.beitrag:focus-visible img{transform:scale(1.05);
  filter:grayscale(.3) contrast(1.06) brightness(.85)}
.beitrag .text{position:absolute;inset:auto 0 0;padding:clamp(16px,2vw,26px);
  background:linear-gradient(0deg,rgba(10,10,11,.96) 26%,rgba(10,10,11,0))}
.beitrag h3{font-size:clamp(15px,1.5vw,21px);line-height:1.14;margin-bottom:8px}
.beitrag .meta{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rot);
  font-weight:700}
@media (max-width:700px){.beitraege{grid-template-columns:1fr}}

/* ---------- Kontaktkasten ---------- */
.kontaktkasten{background:var(--kohle);border-radius:clamp(20px,3vw,40px);
  padding:clamp(24px,4vw,64px);border:1px solid var(--linie-matt)}
.kontaktkasten h2{font-size:clamp(40px,9vw,140px);text-align:center;letter-spacing:-.045em;
  margin-bottom:clamp(20px,3vw,40px)}
.kontaktkasten h2 i{font-style:normal;color:var(--rot)}
.karte{position:relative;overflow:hidden;border-radius:clamp(12px,1.6vw,20px)}
.karte img{width:100%;aspect-ratio:12/7.6;object-fit:cover;filter:grayscale(1) brightness(.7) contrast(1.2)}
.nadel{position:absolute;left:50%;top:48%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;background:var(--rot);box-shadow:0 0 0 8px rgba(255,46,31,.24)}
.nadel::after{content:"";position:absolute;inset:-18px;border:1px solid var(--rot);
  border-radius:50%;animation:puls 2.6s infinite}
@keyframes puls{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.nadel::after{animation:none;opacity:.5}}
.karte-hinweis{position:absolute;left:14px;bottom:14px;background:rgba(10,10,11,.9);
  border:1px solid var(--linie);padding:10px 14px;font-size:12.5px;color:var(--weiss)}
.adresse{text-align:center;margin-top:clamp(20px,3vw,36px);color:var(--weiss);font-size:16px}
.adresse strong{display:block;font-family:var(--anzeige);text-transform:uppercase;
  font-size:clamp(16px,2vw,24px);margin-bottom:8px;letter-spacing:-.015em}
.adresse a{color:var(--weiss);text-decoration:none;border-bottom:1px solid var(--linie)}
.adresse a:hover{color:var(--rot)}
.kanaele{display:flex;justify-content:center;gap:16px;margin-top:22px}
.kanaele a{width:52px;height:52px;border:1px solid var(--linie);display:grid;place-items:center;
  border-radius:50%;color:var(--weiss);transition:background .25s,color .25s,transform .25s}
.kanaele a:hover{background:var(--rot);border-color:var(--rot);color:#fff;transform:translateY(-3px)}
.kanaele svg{width:24px;height:24px;fill:currentColor}

/* ---------- Fuss ---------- */
.fuss{border-top:1px solid var(--linie-matt);padding-block:clamp(30px,4vw,54px);
  font-size:13px;color:var(--grau-tief)}
.fuss .huelle{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;justify-content:space-between}
.fuss a{color:var(--grau);text-decoration:none}
.fuss a:hover{color:var(--rot)}
.fuss nav{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- Leuchtkasten ---------- */
.leuchtkasten{position:fixed;inset:0;z-index:120;background:rgba(6,6,7,.96);
  display:grid;place-items:center;padding:clamp(20px,5vw,70px);opacity:0;
  transition:opacity .3s}
.leuchtkasten[hidden]{display:none}        /* schlaegt display:grid der Klasse */
.leuchtkasten:not(.auf){pointer-events:none}
.leuchtkasten.auf{opacity:1}
.leuchtkasten img{max-height:84vh;width:auto;max-width:100%;border:1px solid var(--linie)}
.leuchtkasten .zu,.leuchtkasten .vor,.leuchtkasten .zurueck{position:absolute;
  background:rgba(18,18,21,.9);border:1px solid var(--linie);color:var(--weiss);
  width:52px;height:52px;cursor:pointer;font-size:22px;line-height:1;display:grid;place-items:center;
  transition:background .25s}
.leuchtkasten .zu:hover,.leuchtkasten .vor:hover,.leuchtkasten .zurueck:hover{background:var(--rot-tief)}
.leuchtkasten .zu{top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px)}
.leuchtkasten .zurueck{left:clamp(10px,2vw,26px);top:50%;margin-top:-26px}
.leuchtkasten .vor{right:clamp(10px,2vw,26px);top:50%;margin-top:-26px}
.lk-zaehler{position:absolute;bottom:clamp(14px,3vw,26px);left:50%;transform:translateX(-50%);
  font-size:12.5px;letter-spacing:.16em;color:var(--grau)}

/* ---------- Einblenden ---------- */
.js .zeigen{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--kurve),transform .7s var(--kurve)}
.js .zeigen.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .zeigen{opacity:1;transform:none;transition:none}
}

/* ---------- Unterseiten (Ratgeber, Recht) ---------- */
.seitenkopf{padding:clamp(120px,15vw,190px) 0 clamp(30px,4vw,56px);position:relative}
.seitenkopf h1{font-size:clamp(32px,6.4vw,88px);letter-spacing:-.04em;max-width:20ch}
.seitenkopf h1 i{font-style:normal;color:var(--rot)}
.seitenkopf .meta{margin-top:18px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rot);font-weight:700}
.krume{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau-tief);
  margin-bottom:20px}
.krume a{color:var(--grau);text-decoration:none}
.krume a:hover{color:var(--rot)}
.text-seite{max-width:74ch;font-size:clamp(15px,1.15vw,17.5px);line-height:1.78}
.text-seite h2{font-size:clamp(22px,3vw,38px);margin:clamp(34px,4vw,58px) 0 16px}
.text-seite h2 i{font-style:normal;color:var(--rot)}
.text-seite h3{font-size:clamp(17px,2vw,23px);margin:30px 0 12px}
.text-seite ul,.text-seite ol{padding-left:22px;margin:0 0 1.1em}
.text-seite li{margin-bottom:.5em}
.text-seite li::marker{color:var(--rot)}
.text-seite a{color:var(--rot)}
.text-seite strong{color:var(--weiss)}
.merksatz{border-left:3px solid var(--rot);background:var(--kohle);padding:18px 22px;
  margin:28px 0;color:var(--weiss)}
.beitragsbild{margin:0 0 clamp(24px,3vw,40px)}
.beitragsbild img{width:100%;aspect-ratio:25/12;object-fit:cover;filter:grayscale(.7) contrast(1.06)}
.weiter{margin-top:clamp(40px,5vw,70px);border-top:1px solid var(--linie-matt);padding-top:26px}

/* ---------- Sprungziele unter der festen Kopfleiste ---------- */
section[id],main[id]{scroll-margin-top:96px}

/* Knopf im Fliesstext: die spaetere Elternregel .text-seite a faerbt sonst rot auf rot */
.text-seite a.knopf{color:#fff;text-decoration:none}
.text-seite a.knopf:hover{color:#fff}