/* ============================================================
   Design 2 „Plakat“ (Vorschau) – liegt über style.css, aktiv mit ?design=2
   Bildsprache des Logos 2026: Signalgelb, echtes Schwarz, dicke Konturen,
   harte Schatten wie ein Aufkleber. Eine einzige laute Stelle: die gelbe
   Startfläche mit Warnband – alles andere bleibt ruhig.
   Selektoren mit html[data-design="2"] schlagen die :root-Regeln von style.css.
   ============================================================ */
html[data-design="2"]{
  --ink:#000;
  --asphalt:#1c1c1a;
  --asphalt-2:#262624;
  --paper:#e8e7e3;        /* Beton statt Beige */
  --card:#fff;
  --text:#1b1b1a;
  --muted:#55554f;
  --line:#c9c8c2;
  --gold-deep:#8a7000;    /* Gelb als Schrift auf Hell (Kontrast > 4,5) */
  --gold-dark:#8a7000;
  --surface:#fff;
  --surface-hl:#fff7c2;
  --surface-soft:#fafaf7;
  --tl-past:#b4b3ad;
  --kontur:#000;          /* Rand + Schatten der Karten */
  --d2-radius:6px;
}
html[data-design="2"][data-theme="dark"]{
  --ink:#f4f4f0; --asphalt:#0a0a09; --asphalt-2:#181816; --paper:#121211; --card:#1c1c1a;
  --text:#e4e4de; --muted:#a3a39b; --line:#34342f; --gold-deep:#f8d500; --gold-dark:#f8d500;
  --surface:#1a1a18; --surface-hl:#33300f; --surface-soft:#181816; --tl-past:#4c4c46; --kontur:#000;
}
@media (prefers-color-scheme:dark){
  html[data-design="2"]:not([data-theme="light"]){
    --ink:#f4f4f0; --asphalt:#0a0a09; --asphalt-2:#181816; --paper:#121211; --card:#1c1c1a;
    --text:#e4e4de; --muted:#a3a39b; --line:#34342f; --gold-deep:#f8d500; --gold-dark:#f8d500;
    --surface:#1a1a18; --surface-hl:#33300f; --surface-soft:#181816; --tl-past:#4c4c46; --kontur:#000;
  }
}

/* ---------- Schrift: durchgehend Archivo ---------- */
html[data-design="2"] body{font-family:"Archivo",system-ui,sans-serif;font-weight:500;font-size:1.05rem;line-height:1.6}
html[data-design="2"] h1,html[data-design="2"] h2,html[data-design="2"] .page-head h1{font-weight:900;letter-spacing:-.025em}
html[data-design="2"] h2,html[data-design="2"] .page-head h1,html[data-design="2"] .prose>h1{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1}
html[data-design="2"] h3{font-weight:800;letter-spacing:-.01em}
html[data-design="2"] .prose strong{font-weight:800}
/* Etiketten: keine Schreibmaschine, keine Großbuchstaben – kleiner Gelb-Marker */
html[data-design="2"] .eyebrow{font-family:"Archivo",sans-serif;font-weight:800;font-size:.9rem;letter-spacing:0;text-transform:none;
  color:#000;background:var(--gold);padding:.15rem .55rem;border-radius:3px;gap:0}
html[data-design="2"] .eyebrow::before{display:none}
html[data-design="2"] .on-dark .eyebrow{color:#000}

/* ---------- Kontaktleiste + Kopfzeile: schwarz, großes Logo ---------- */
html[data-design="2"] .utility{background:#000;font-family:"Archivo",sans-serif;font-size:.85rem;font-weight:500;color:#d6d6d0}
html[data-design="2"] .utility a{color:#d6d6d0}
html[data-design="2"] .theme-toggle{border-color:#3a3a36;color:#d6d6d0}
html[data-design="2"] .site-head{background:#000;border-bottom:0}
html[data-design="2"] .site-head .wrap{padding-block:.55rem}
html[data-design="2"] .brand img{height:60px}
/* Name steht im Logo – Text nur noch für Screenreader (Link hat aria-label) */
html[data-design="2"] .brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html[data-design="2"] .nav a{color:#f0f0ea;font-weight:700;font-size:.92rem;border-radius:var(--d2-radius)}
html[data-design="2"] .nav a:hover{color:var(--gold)}
html[data-design="2"] .nav a.active{background:var(--gold);color:#000}
html[data-design="2"] .submenu{background:#111;border:2px solid var(--gold);border-radius:var(--d2-radius)}
html[data-design="2"] .burger,html[data-design="2"] .nav-close{border-color:#4a4a44;border-radius:var(--d2-radius)}
@media (max-width:1240px){
  html[data-design="2"] .nav{background:#000;border-left:3px solid var(--gold)}
  html[data-design="2"] .nav-head{border-bottom-color:#2e2e2a}
  html[data-design="2"] .brand img{height:52px}
}

/* ---------- Startseite: dunkle Fläche, das Logo ist der Blickfang ---------- */
html[data-design="2"] .hero{background:#000;color:#fff;padding-bottom:8px}
/* Titelbild nur als Struktur im Hintergrund (schwarz-weiß, gedämpft) */
html[data-design="2"] .hero-bg{opacity:.16;filter:grayscale(1) contrast(1.15)}
/* schmales Warnband unten (Dreieck im Logo = Warnschild) */
html[data-design="2"] .hero::after{inset:auto 0 0 0;height:8px;
  background:repeating-linear-gradient(-45deg,#000 0 10px,var(--gold) 10px 20px)}
html[data-design="2"] .hero .wrap{max-width:var(--maxw);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:center;column-gap:clamp(24px,5vw,72px);padding-block:clamp(48px,8vw,104px)}
html[data-design="2"] .hero .wrap>*{grid-column:1}
html[data-design="2"] .hero .eyebrow{justify-self:start}
/* Logo als Aufkleber, leicht schräg */
html[data-design="2"] .hero .wrap::after{content:"";grid-column:2;grid-row:1 / span 4;align-self:center;
  aspect-ratio:683/560;width:100%;max-width:420px;justify-self:center;
  background:url(zak-logo-gross.png) center/contain no-repeat;transform:rotate(-4deg)}
html[data-design="2"] .hero h1{font-size:clamp(2.6rem,6.6vw,5.4rem);line-height:.94;letter-spacing:-.035em;color:#fff;margin:.6rem 0 1.1rem}
html[data-design="2"] .hero h1 em{color:#fff}
html[data-design="2"] .hero p.lead{color:#d9d9d3;font-weight:500;max-width:46ch}
html[data-design="2"] .hero .on-dark .btn-gold{background:var(--gold);color:#000;border-color:var(--gold);box-shadow:4px 4px 0 #3a3a36}
html[data-design="2"] .hero .btn-ghost{border:2px solid #6a6a64;color:#fff;background:transparent}
html[data-design="2"] .hero .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
@media (max-width:760px){
  html[data-design="2"] .hero .wrap{grid-template-columns:1fr}
  /* Logo steht direkt darüber in der Kopfzeile – hier nicht doppelt */
  html[data-design="2"] .hero .wrap::after{display:none}
}

/* ---------- Buttons: eckiger, mit Kontur ---------- */
html[data-design="2"] .btn{border-radius:var(--d2-radius);border:2px solid transparent;font-size:.98rem;padding:.75rem 1.4rem}
html[data-design="2"] .btn:hover{transform:translate(-2px,-2px)}
html[data-design="2"] .btn-gold{border-color:#000;box-shadow:4px 4px 0 #000}
html[data-design="2"] .btn-gold:hover{box-shadow:6px 6px 0 #000}
html[data-design="2"] .on-dark .btn-gold,html[data-design="2"] .section.dark .btn-gold{box-shadow:4px 4px 0 var(--gold);border-color:var(--gold);background:#000;color:var(--gold)}
html[data-design="2"] .btn-ghost{border-color:#5c5c56}
html[data-design="2"] .btn-join{border-radius:var(--d2-radius)}

/* ---------- Abschnitte ---------- */
html[data-design="2"] .section.dark{background:var(--asphalt);color:#ecece6}
html[data-design="2"] .page-head{border-bottom:3px solid var(--ink)}
html[data-design="2"] .prose a,html[data-design="2"] .linklist a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:3px}
html[data-design="2"] .on-dark .prose a{color:#fff}

/* ---------- Karten: Kontur + harter Schatten wie das Logo ---------- */
html[data-design="2"] .card,html[data-design="2"] .person,html[data-design="2"] .inv-card,html[data-design="2"] .fb-q,
html[data-design="2"] .mform-sec{border:2px solid var(--kontur);border-radius:var(--d2-radius);box-shadow:6px 6px 0 var(--kontur)}
html[data-design="2"] .section.dark .card{box-shadow:6px 6px 0 #000;border-color:#000}
html[data-design="2"] .card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--gold)}
html[data-design="2"] .card .thumb{border-bottom:2px solid var(--kontur);background:var(--asphalt)}
html[data-design="2"] .card:hover .thumb img{transform:none}
html[data-design="2"] .card h3{font-size:1.25rem;line-height:1.15}
html[data-design="2"] .card p{font-size:.95rem}
html[data-design="2"] .card .go{font-family:"Archivo",sans-serif;font-weight:800;font-size:.92rem;letter-spacing:0;text-transform:none;
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:4px}
html[data-design="2"] .figure,html[data-design="2"] .article-img{border:2px solid var(--kontur);border-radius:var(--d2-radius)}

/* ---------- Termine: dicke Linie, eckige Marken ---------- */
html[data-design="2"] .timeline::before{width:4px;left:8px;background:var(--ink)}
html[data-design="2"] .tl-item::before{border-radius:3px;width:20px;height:20px;left:0;top:3px;
  background:var(--gold);border:3px solid var(--ink);box-shadow:none}
html[data-design="2"] .tl-item.past::before{background:var(--tl-past);box-shadow:none}
html[data-design="2"] .tl-date{font-family:"Archivo",sans-serif;font-weight:800;font-size:.95rem;letter-spacing:0;color:var(--ink)}
html[data-design="2"] .tl-title{font-weight:800;font-size:1.3rem}
html[data-design="2"] .tl-past,html[data-design="2"] .cal-add>summary,html[data-design="2"] .person .vcard-save{font-family:"Archivo",sans-serif;
  letter-spacing:0;text-transform:none;font-size:.82rem;border-radius:var(--d2-radius)}
html[data-design="2"] .tl-year span{border-radius:var(--d2-radius);color:#000;font-weight:900;font-size:1.2rem}

/* ---------- Kleinteile ohne Schreibmaschinenschrift ---------- */
html[data-design="2"] .person .role,html[data-design="2"] .groupline,html[data-design="2"] .album-date,
html[data-design="2"] .mform-sec legend,html[data-design="2"] .mform-reqnote,html[data-design="2"] .article-date,
html[data-design="2"] .person .tel,html[data-design="2"] .person .mail{font-family:"Archivo",sans-serif;letter-spacing:0;text-transform:none}
html[data-design="2"] .person .role,html[data-design="2"] .album-date{font-weight:800;font-size:.85rem;color:var(--gold-deep)}
html[data-design="2"] .mform-sec legend{font-weight:900;font-size:1.05rem;color:var(--ink)}
html[data-design="2"] .mform-sec legend::before{display:none}
html[data-design="2"] .groupline{font-weight:900;font-size:1.3rem;color:var(--ink);border-top:3px solid var(--ink)}
html[data-design="2"] .mform input[type=text],html[data-design="2"] .mform input[type=tel],html[data-design="2"] .mform input[type=email],
html[data-design="2"] .mform input[type=date],html[data-design="2"] .mform textarea,html[data-design="2"] .mform-opt,
html[data-design="2"] .mform-choice span,html[data-design="2"] .mform-privacy,html[data-design="2"] .mform .field-hint{font-family:"Archivo",sans-serif}
html[data-design="2"] .callout,html[data-design="2"] .fb-thanks{border-radius:var(--d2-radius);border-left-width:8px}

/* ---------- Fuß: schwarz mit gelber Kante ---------- */
html[data-design="2"] .site-foot{background:#000;border-top:6px solid var(--gold);color:#cfcfc8}
html[data-design="2"] .site-foot a{color:#cfcfc8}
html[data-design="2"] .site-foot h4{letter-spacing:0;text-transform:none;font-size:1rem;font-weight:900}
html[data-design="2"] .foot-brand b{display:block;width:120px;height:98px;font-size:0;color:transparent;
  background:url(zak-logo-gross.png) left center/contain no-repeat}
html[data-design="2"] .foot-bottom{font-family:"Archivo",sans-serif;font-size:.82rem;border-top-color:#262624}


/* Knöpfe in Fließtext nicht wie Textlinks unterstreichen */
html[data-design="2"] .prose a.btn,html[data-design="2"] .prose a.vcard-save,html[data-design="2"] .prose a.share-btn{text-decoration:none}
html[data-design="2"] .mform .btn-gold{border-radius:var(--d2-radius);box-shadow:4px 4px 0 #000}
html[data-design="2"] .mform .btn-gold:hover{background:#ffe033}

/* ---------- Menü: übergeordneter Punkt der offenen Seite nur unterstrichen ---------- */
html[data-design="2"] .nav a.active.is-parent{background:none;color:#fff;box-shadow:inset 0 -3px 0 var(--gold)}
@media (min-width:1241px){
  /* einzeilig halten, damit „Legenden der Straße“ & Co. nicht umbrechen */
  html[data-design="2"] .nav{gap:0}
  html[data-design="2"] .nav a{white-space:nowrap;font-size:.86rem;padding:.5rem .6rem}
  html[data-design="2"] .site-head .wrap{gap:.8rem}
}

/* ---------- Karten auf dunklem Grund: Schatten sichtbar, aber ruhig ---------- */
html[data-design="2"] .section.dark .card{box-shadow:6px 6px 0 #4a4a44}
html[data-design="2"] .section.dark .card:hover{box-shadow:9px 9px 0 var(--gold)}

/* ---------- Kontaktleiste am Handy: eine Zeile mit Symbolen ---------- */
@media (max-width:640px){
  html[data-design="2"] .utility .wrap{flex-wrap:nowrap;padding-block:.35rem}
  html[data-design="2"] .utility .u-contact,html[data-design="2"] .utility .u-social{gap:.25rem;flex-wrap:nowrap}
  html[data-design="2"] .utility a,html[data-design="2"] .theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;
    min-height:40px;padding:0;border-radius:var(--d2-radius)}
  html[data-design="2"] .utility a:hover,html[data-design="2"] .utility a:focus-visible{background:#1c1c1a}
  html[data-design="2"] .utility .u-ico{display:block;width:20px;height:20px}
  html[data-design="2"] .theme-toggle svg{width:20px;height:20px}
  html[data-design="2"] .utility .u-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- 404-Seite ---------- */
html[data-design="2"] .prose a.btn-nf{border:2px solid var(--ink);color:var(--ink);background:var(--card)}
html[data-design="2"] .prose a.btn-nf:hover{box-shadow:4px 4px 0 var(--ink)}

/* ---------- Verleih + Beitragsseite ---------- */
html[data-design="2"] .prose a.inv-nav{text-decoration:none;border:2px solid var(--ink);border-radius:var(--d2-radius)}
html[data-design="2"] .inv-cell,html[data-design="2"] .inv-form input,html[data-design="2"] .inv-form select,
html[data-design="2"] .fb-form textarea,html[data-design="2"] .fb-form input[type=text]{border-radius:4px}
html[data-design="2"] .prose a.share-btn{border:2px solid var(--ink);border-radius:var(--d2-radius)}
html[data-design="2"] .prose a.share-btn:hover,html[data-design="2"] .prose a.share-btn:focus-visible{border-color:var(--ink);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}

/* ---------- Handy-Menü: Unterpunkte ohne Rahmen, Überschrift ohne Großbuchstaben ---------- */
@media (max-width:1240px){
  html[data-design="2"] .submenu{border:0;background:transparent}
  html[data-design="2"] .nav-head-label{letter-spacing:0;text-transform:none;font-weight:800;font-size:.95rem;color:#d6d6d0}
}

/* Gelbe Knöpfe immer mit schwarzer Schrift – die Linkfarbe im Fließtext (.prose a = var(--ink)) ist im dunklen Modus hell */
html[data-design="2"] .prose a.btn-gold,html[data-design="2"] .btn-gold{color:#000}
html[data-design="2"] .on-dark .btn-gold,html[data-design="2"] .section.dark .btn-gold{color:var(--gold)}
html[data-design="2"] .hero .on-dark .btn-gold{color:#000}

/* ---------- Fuß: eine Schriftfarbe (Überschriften weiß, alles andere hellgrau) ---------- */
html[data-design="2"] .site-foot,html[data-design="2"] .site-foot a,html[data-design="2"] .foot-brand p,
html[data-design="2"] .foot-addr,html[data-design="2"] .foot-bottom{color:#cfcfc8}
html[data-design="2"] .site-foot a:hover,html[data-design="2"] .site-foot a:focus-visible{color:var(--gold)}

/* ---------- Kontakte: Gruppen-Trennlinie mit Abstand zu den Kartenschatten, volle Breite ----------
   (.prose p setzt sonst margin-top:0 und max-width:72ch – die Linie läge unter dem 6-px-Schatten) */
html[data-design="2"] .prose .groupline{margin:2.8rem 0 .4rem;max-width:none;padding-top:1.4rem}
html[data-design="2"] .prose .vcard-hint + .groupline{margin-top:1.8rem}