/* RettZV Corporate Design – öffentliche Seite (Variante B: Pressebereich) */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url("../fonts/IBMPlexSans-Regular/font.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-display:swap;src:url("../fonts/IBMPlexSans-Bold/font.ttf") format("truetype")}

:root{
  --rot:#fe0000; --schwarz:#000; --grau:#c6c6c6; --flaeche:#f2f2f2; --text-leise:#444;
  --max:1200px; --rand:32px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--schwarz);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
a:hover{color:#b80000}
a:focus-visible,button:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--rand)}
.slash{color:var(--rot)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopf */
.kopf{background:var(--schwarz);color:#fff}
.kopf a:hover{color:var(--grau)}
.kopf-leiste{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-block:28px;font-size:15px}
.kopf-leiste b{font-weight:700}
.kopf-leiste a{text-decoration:none}
.kopf-inhalt{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-end;justify-content:space-between;padding-block:88px 96px}
.kopf-text{flex:1 1 560px}
.kopf h1{margin:0;font-size:clamp(40px,6vw,80px);line-height:1;font-weight:700}
.kopf-text p{margin:24px 0 0;font-size:20px;max-width:620px;color:#e6e6e6}
.paket{flex:0 1 340px;display:flex;flex-direction:column;gap:12px}
.paket small{font-size:14px;color:var(--grau)}
.btn-paket{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:0 24px;background:var(--rot);color:#000;text-decoration:none;font-weight:700;font-size:18px}
.kopf .btn-paket:hover{background:#fff;color:#000}

/* Abschnitte */
.abschnitt{padding-block:80px 24px}
.abschnitt h2{margin:0 0 12px;font-size:32px;line-height:1.15}
.abschnitt > .wrap > p{margin:0 0 32px;font-size:18px;max-width:680px}

/* Welches Logo wofür */
.logo-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));column-gap:32px;border-top:2px solid var(--schwarz);margin:28px 0 0;padding:0;list-style:none}
.logo-liste li{display:flex;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--schwarz)}
.logo-bild{flex:none;width:160px;height:88px;display:flex;align-items:center;justify-content:center;background:var(--flaeche);padding:10px}
.logo-bild img{max-height:68px;width:auto;object-fit:contain}
.logo-liste b{font-size:18px}
.logo-liste p{margin:4px 0 8px;font-size:15px}
.dl{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;font-weight:700}
.dl a{text-decoration:none;border-bottom:1px solid currentColor}

/* Regeln */
.regeln{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.regel{border:1px solid var(--schwarz);padding:20px}
.regel-gut{border-width:2px}
.regel-bild{height:130px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.regel-bild img{max-width:70%;max-height:50px}
.regel-gut .regel-bild{outline:1px dashed #888;outline-offset:-16px}
.regel-verzerrt img{width:70%;height:28px;max-height:none}
.regel-farbe img{filter:hue-rotate(160deg)}
.regel-dreh{background:var(--grau)}
.regel-dreh img{transform:rotate(-12deg)}
.regel p{margin:16px 0 0;font-size:15px}
.regel b{display:block}
.zeichen{font-weight:700;margin-right:4px}

/* Unten */
.unten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;padding-bottom:80px}
.kasten{background:var(--flaeche);padding:32px}
.kasten-rand{background:#fff;border:2px solid var(--schwarz)}
.kasten h2{margin:0 0 16px;font-size:24px}
.kasten p{margin:0}
.farben{display:flex;gap:10px;margin-bottom:16px}
.farben span{width:56px;height:56px}
.kontakt{font-size:17px;line-height:1.7}
.hinweis{margin-top:16px !important;font-size:14px;color:var(--text-leise)}
.kasten .dl{margin-top:16px}

.fuss{border-top:1px solid var(--schwarz)}
.fuss .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:24px;font-size:14px}

@media (max-width:640px){
  :root{--rand:16px}
  .kopf-inhalt{padding-block:48px 56px}
  .abschnitt{padding-block:56px 16px}
  .logo-liste li{flex-direction:column;align-items:flex-start}
  .logo-bild{width:100%}
}

/* 1.2.0 – Pakete, Download-Zeilen, Kontakt per Klick */
.btn-paket span:first-child{display:flex;flex-direction:column;gap:2px}
.btn-paket small{font-size:13px;font-weight:400;color:#000}
.paket-teil{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:4px;font-size:15px}
.paket-teil a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid #fff}
.paket-teil a:hover{color:var(--grau);border-color:var(--grau)}
.leise{font-weight:400;opacity:.7}
.logo-info{min-width:0}
.dl-zeile{display:flex;gap:12px;align-items:baseline;margin-top:6px}
.dl-label{flex:none;width:52px;font-size:13px;color:var(--text-leise);text-transform:uppercase;letter-spacing:.04em}
.fussnote{margin:20px 0 0 !important;font-size:14px !important;color:var(--text-leise);max-width:820px !important}
.btn-kontakt{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:48px;padding:0 20px;margin-top:12px;background:#000;color:#fff;font:700 15px/1 "IBM Plex Sans",system-ui,sans-serif}
.btn-kontakt:hover{background:#b80000}
.btn-kontakt:focus-visible{outline:3px solid var(--rot);outline-offset:3px}
.btn-kontakt:disabled{opacity:.6;cursor:wait}
.kontakt-daten .kontakt{margin-top:8px}
@media (max-width:640px){.dl-zeile{flex-direction:column;gap:2px}}