/* werbeagentur-marina.de – Druckbogen in vier Farben */
@font-face{font-family:"Chivo";src:url("/assets/fonts/chivo.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Spline Sans";src:url("/assets/fonts/spline-sans.woff2") format("woff2");font-weight:300 700;font-display:swap}

:root{
  --cyan:#0b8cc0;--cyan-tief:#08668d;--magenta:#c71f5d;--magenta-tief:#a5174c;--gelb:#f1bf1a;--key:#18191b;
  --papier:#f7f5ef;--bogen:#fff;--grau:#d8d4c8;--hell:#efece3;--text:#26272a;--leise:#5d5c57;
  --kopf:"Chivo",Arial Narrow,sans-serif;--lauf:"Spline Sans",system-ui,sans-serif;
  --breite:1160px;--rand:clamp(16px,4vw,40px)
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--text);font:400 1.0625rem/1.68 var(--lauf)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--magenta-tief);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--key);text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--kopf);color:var(--key);line-height:1.15;letter-spacing:-.012em}
h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:800;margin:.2em 0 .35em}
h2{font-size:clamp(1.45rem,2.6vw,1.95rem);font-weight:750;margin:2.1em 0 .5em}
h3{font-size:1.2rem;font-weight:700;margin:0 0 .4em}

/* Druckkontrollstreifen */
.kontrollstreifen{display:flex;height:8px}
.kontrollstreifen span{flex:1}
.kontrollstreifen span:nth-child(1){background:var(--cyan)}
.kontrollstreifen span:nth-child(2){background:var(--magenta)}
.kontrollstreifen span:nth-child(3){background:var(--gelb)}
.kontrollstreifen span:nth-child(4){background:var(--key)}
.kontrollstreifen span:nth-child(5){background:#7cc3e0}
.kontrollstreifen span:nth-child(6){background:#e38fae}
.kontrollstreifen span:nth-child(7){background:#f8df8c}
.kontrollstreifen span:nth-child(8){background:#8b8c8e}

/* Kopf */
.bogenkopf{max-width:var(--breite);margin:0 auto;padding:18px var(--rand);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
.bogenkopf__marke{display:flex;align-items:center;gap:10px;font:800 1.25rem/1 var(--kopf);color:var(--key);text-decoration:none;letter-spacing:-.02em}
.bogenkopf__marke em{font-style:normal;color:var(--magenta)}
.bogenkopf__passer{width:26px;height:26px;border:2px solid var(--key);border-radius:50%;position:relative;flex:none}
.bogenkopf__passer::before,.bogenkopf__passer::after{content:"";position:absolute;background:var(--key)}
.bogenkopf__passer::before{left:50%;top:-6px;bottom:-6px;width:2px;margin-left:-1px}
.bogenkopf__passer::after{top:50%;left:-6px;right:-6px;height:2px;margin-top:-1px}
.bogenkopf__navi{display:flex;flex-wrap:wrap;gap:4px 22px}
.bogenkopf__navi a{color:var(--key);text-decoration:none;font-weight:500;padding:4px 0;border-bottom:3px solid transparent}
.bogenkopf__navi a:hover,.bogenkopf__navi a[aria-current]{border-bottom-color:var(--gelb)}

main{display:block}

/* Schnittmarken für Bild-Abzüge */
.abzug,.auftakt__bild,.vorort__bild{position:relative;margin:2rem 0}
.abzug img,.auftakt__bild img,.vorort__bild img{background:var(--hell)}
.abzug figcaption,.auftakt__bild figcaption,.vorort__bild figcaption{font-size:.88rem;color:var(--leise);margin-top:.6rem;line-height:1.5}
.abzug__nachweis{display:block;font-size:.8rem}
.abzug__nachweis a{color:var(--leise)}
.abzug--grafik{background:var(--bogen);padding:clamp(12px,3vw,28px);border:1px solid var(--grau)}
.abzug--grafik svg{margin:0 auto;max-height:420px}

/* Startseite */
.auftakt{max-width:var(--breite);margin:0 auto;padding:clamp(24px,5vw,64px) var(--rand) 24px;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,64px);align-items:center}
.auftakt__lead{font-size:1.18rem;max-width:36em}
.auftakt__wege{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}
.auftakt__bild{margin:0}
.auftakt__bild img{box-shadow:12px 12px 0 var(--cyan),24px 24px 0 var(--gelb)}
.auftakt__bild figcaption{margin-top:34px}

.knopf{display:inline-block;background:var(--key);color:#fff;text-decoration:none;font-weight:600;padding:.7em 1.15em;border:2px solid var(--key)}
.knopf:hover{background:var(--magenta);border-color:var(--magenta);color:#fff}
.knopf--leer{background:transparent;color:var(--key)}
.knopf--leer:hover{background:var(--gelb);border-color:var(--key);color:var(--key)}

.farbauszuege{max-width:var(--breite);margin:0 auto;padding:24px var(--rand) 8px}
.farbauszuege__kopf{max-width:46em}
.auszuege{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:1.4rem}
.auszug{background:var(--bogen);padding:20px 20px 16px;border-top:12px solid var(--key)}
.auszug--c{border-top-color:var(--cyan)}.auszug--m{border-top-color:var(--magenta)}.auszug--y{border-top-color:var(--gelb)}
.auszug p{font-size:.95rem;color:var(--leise);margin:0 0 .8rem}
.auszug ul{list-style:none;margin:0;padding:0}
.auszug li{border-top:1px solid var(--hell);padding:.45rem 0;line-height:1.35}
.auszug a{color:var(--key);text-decoration:none;font-weight:500}
.auszug a:hover{color:var(--magenta-tief);text-decoration:underline}

.strecke{max-width:var(--breite);margin:0 auto;padding:24px var(--rand)}
.strecke__liste{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.strecke__liste::before{content:"";position:absolute;left:22px;right:22px;top:22px;height:2px;background:var(--key)}
.strecke__liste li{position:relative;padding-right:16px;display:flex;flex-direction:column;gap:6px}
.strecke__nr{width:46px;height:46px;border-radius:50%;background:var(--gelb);border:2px solid var(--key);display:grid;place-items:center;font:800 1.15rem/1 var(--kopf);color:var(--key)}
.strecke__liste li:nth-child(2) .strecke__nr{background:var(--cyan);color:#fff}
.strecke__liste li:nth-child(3) .strecke__nr{background:var(--magenta);color:#fff}
.strecke__liste li:nth-child(4) .strecke__nr{background:var(--key);color:#fff}
.strecke__liste li:nth-child(5) .strecke__nr{background:#fff}
.strecke__liste strong{font-family:var(--kopf);font-size:1.1rem;color:var(--key);margin-top:6px}
.strecke__liste span:last-child{font-size:.95rem;color:var(--leise)}
.strecke__mehr{margin-top:1.4rem}

.vorort{max-width:var(--breite);margin:24px auto;padding:clamp(20px,4vw,44px) var(--rand);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,4vw,48px);align-items:center;background:var(--bogen);border-left:12px solid var(--magenta)}
.vorort__bild{margin:0}
.vorort__text h2{margin-top:0}

.kurzfragen{max-width:780px;margin:0 auto;padding:12px var(--rand)}
.kurzfragen details{border-bottom:1px solid var(--grau);padding:.2rem 0}
.kurzfragen summary{cursor:pointer;list-style:none;padding:.8rem 2rem .8rem 0;font-weight:600;color:var(--key);position:relative}
.kurzfragen summary::-webkit-details-marker{display:none}
.kurzfragen summary::after{content:"+";position:absolute;right:4px;top:.55rem;font:700 1.4rem/1 var(--kopf);color:var(--magenta)}
.kurzfragen details[open] summary::after{content:"–"}
.kurzfragen details p{margin:0 0 1rem}
.kurzfragen--lang{padding:0}

.ueberseite{max-width:780px;margin:0 auto 48px;padding:12px var(--rand)}

/* Blätter (Sonderseiten) */
.blatt{max-width:var(--breite);margin:0 auto;padding:clamp(20px,4vw,40px) var(--rand) 56px}
.blatt--schmal{max-width:820px}
.blatt__lead{font-size:1.15rem;max-width:40em}
.blatt--recht h2{font-size:1.25rem;margin-top:1.8em}
.register{margin-top:2.6rem;padding-top:1rem;border-top:10px solid var(--key)}
.register--c{border-top-color:var(--cyan)}.register--m{border-top-color:var(--magenta)}.register--y{border-top-color:var(--gelb)}
.register h2{margin-top:.2em}
.kontaktzeile{font:700 clamp(1.15rem,3vw,1.5rem)/1.3 var(--kopf);word-break:break-word}
.fehlbogen__zahl{font:900 clamp(5rem,18vw,9rem)/1 var(--kopf);margin:0;color:transparent;-webkit-text-stroke:2px var(--key);text-shadow:6px 6px 0 var(--cyan),12px 12px 0 var(--magenta)}

/* Proben-Karten */
.probenreihe{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:1rem}
.probe{display:flex;flex-direction:column;gap:6px;background:var(--bogen);padding:18px;border-top:6px solid var(--key);text-decoration:none;color:var(--text);transition:transform .15s}
.probe:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--grau);color:var(--text)}
.probe--c{border-top-color:var(--cyan)}.probe--m{border-top-color:var(--magenta)}.probe--y{border-top-color:var(--gelb)}
.probe__rubrik{font-size:.82rem;color:var(--leise);font-weight:600}
.probe__titel{font:700 1.08rem/1.25 var(--kopf);color:var(--key)}
.probe__text{font-size:.93rem;color:var(--leise);line-height:1.5}

/* Brotkrumen */
.krume ol{list-style:none;margin:0 0 .6rem;padding:0;display:flex;flex-wrap:wrap;gap:4px;font-size:.88rem;color:var(--leise)}
.krume li+li::before{content:"/";margin:0 6px 0 2px;color:var(--grau)}
.krume a{color:var(--leise)}

/* Beitrag */
.andruck{max-width:var(--breite);margin:0 auto;padding:clamp(20px,4vw,40px) var(--rand) 56px}
.andruck__kopf{max-width:820px}
.andruck__rubrik{margin:0}
.andruck__rubrik a{display:inline-block;font-weight:600;font-size:.9rem;padding:2px 10px;color:#fff;background:var(--key);text-decoration:none}
.andruck--c .andruck__rubrik a{background:var(--cyan-tief)}
.andruck--m .andruck__rubrik a{background:var(--magenta)}
.andruck--y .andruck__rubrik a{background:var(--gelb);color:var(--key)}
.andruck__meta{font-size:.9rem;color:var(--leise);margin:0 0 1rem}
.andruck__lead{font-size:1.2rem;line-height:1.6;color:var(--key)}
.andruck > .abzug{max-width:900px}
.andruck__spalten{display:grid;grid-template-columns:220px minmax(0,700px);gap:clamp(24px,5vw,64px);margin-top:1rem}
.andruck__inhalt{position:sticky;top:20px;align-self:start;font-size:.92rem;border-left:3px solid var(--gelb);padding-left:14px}
.andruck__inhalt p{font-weight:700;margin:0 0 .4rem;color:var(--key)}
.andruck__inhalt ol{margin:0;padding-left:1.1rem}
.andruck__inhalt li{margin:.25rem 0;line-height:1.35}
.andruck__inhalt a{color:var(--text);text-decoration:none}
.andruck__inhalt a:hover{color:var(--magenta-tief);text-decoration:underline}
.andruck__text h2:first-child{margin-top:.4em}
.andruck__text ul,.andruck__text ol{padding-left:1.3rem}
.andruck__text li{margin:.35rem 0}
.andruck__text li::marker{color:var(--magenta);font-weight:700}

/* Passer-Kasten */
.passer{position:relative;background:var(--bogen);border-left:6px solid var(--cyan);padding:16px 20px 14px 58px;margin:1.8rem 0}
.passer::before{content:"";position:absolute;left:18px;top:18px;width:22px;height:22px;border:2px solid var(--cyan);border-radius:50%;
  background:linear-gradient(var(--cyan),var(--cyan)) center/2px 100% no-repeat,linear-gradient(var(--cyan),var(--cyan)) center/100% 2px no-repeat}
.passer--achtung{border-left-color:var(--magenta)}
.passer--achtung::before{border-color:var(--magenta);background:linear-gradient(var(--magenta),var(--magenta)) center/2px 100% no-repeat,linear-gradient(var(--magenta),var(--magenta)) center/100% 2px no-repeat}
.passer__titel{font:700 1.05rem/1.3 var(--kopf);color:var(--key);margin:0 0 .3rem}
.passer p:last-child{margin-bottom:0}

/* Tabellen */
.tabelle{overflow-x:auto;margin:1.4rem 0;background:var(--bogen)}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:480px}
th{font-family:var(--kopf);text-align:left;background:var(--key);color:#fff;padding:.6rem .8rem;font-weight:700}
td{padding:.6rem .8rem;border-bottom:1px solid var(--hell);vertical-align:top}
tbody tr:nth-child(even){background:#fbfaf6}

/* Blättern + Verwandtes */
.blaettern{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:3rem;border-top:2px solid var(--key);padding-top:1.2rem}
.blaettern a{text-decoration:none;color:var(--key);font:700 1.05rem/1.3 var(--kopf)}
.blaettern span{display:block;font:500 .85rem/1.4 var(--lauf);color:var(--leise);margin-bottom:4px}
.blaettern__nach{text-align:right}
.verwandt h2{font-size:1.4rem}

/* Fuß */
.bogenfuss{background:var(--key);color:#d9d7d0;margin-top:40px;border-top:8px solid var(--gelb)}
.bogenfuss__innen{max-width:var(--breite);margin:0 auto;padding:40px var(--rand) 20px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.bogenfuss__marke{font:800 1.2rem/1.2 var(--kopf);color:#fff;margin:0 0 .5rem}
.bogenfuss__kopf{font:700 1rem/1.2 var(--kopf);color:var(--gelb);margin:0 0 .6rem}
.bogenfuss ul{list-style:none;margin:0;padding:0}
.bogenfuss li{margin:.3rem 0}
.bogenfuss a{color:#fff;text-decoration:none}
.bogenfuss a:hover{text-decoration:underline;color:#fff}
.bogenfuss p{font-size:.95rem}
.bogenfuss__stand{max-width:var(--breite);margin:0 auto;padding:0 var(--rand) 28px;font-size:.85rem;color:#9a988f}

@media (max-width:980px){
  .auszuege{grid-template-columns:repeat(2,1fr)}
  .strecke__liste{grid-template-columns:1fr;gap:18px}
  .strecke__liste::before{left:22px;right:auto;top:22px;bottom:22px;width:2px;height:auto}
  .strecke__liste li{display:grid;grid-template-columns:46px 1fr;column-gap:16px}
  .strecke__liste li .strecke__nr{grid-row:span 2}
  .strecke__liste strong{margin-top:8px}
  .andruck__spalten{grid-template-columns:minmax(0,1fr)}
  .andruck__inhalt{position:static}
}
@media (max-width:760px){
  .auftakt,.vorort{grid-template-columns:1fr}
  .auftakt__bild img{box-shadow:8px 8px 0 var(--cyan),16px 16px 0 var(--gelb)}
  .vorort{border-left-width:8px}
  .auszuege{grid-template-columns:1fr}
  .bogenfuss__innen{grid-template-columns:1fr}
  .blaettern{grid-template-columns:1fr}
  .blaettern__nach{text-align:left}
  body{font-size:1rem}
}