/* ==========================================================================
   Rhön Harmonika · Bausteine für Startseite und Unterseiten
   ========================================================================== */

/* ---------- Held mit Video ---------- */
.held { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--weiss); background: var(--nacht); overflow: hidden; isolation: isolate; }
.held-medium { position: absolute; inset: 0; z-index: -2; }
.held-medium video, .held-medium img { width: 100%; height: 100%; object-fit: cover; }
.held::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,6,4,.72) 0%, rgba(10,6,4,.25) 55%, rgba(10,6,4,.1) 100%), linear-gradient(180deg, rgba(10,6,4,.35) 0%, rgba(10,6,4,0) 30%, rgba(10,6,4,.8) 100%); }
.held .innen { position: relative; padding-block: calc(var(--kopf-h) + 40px) clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; }
.held-claim { width: min(100%, 760px); margin: 0 0 clamp(18px, 2vw, 28px) -1.5%; }
.held-unter { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.45; max-width: 34ch; margin: 0 0 30px; color: rgba(255,255,255,.9); text-shadow: 0 1px 18px rgba(0,0,0,.4); }
.held-seite { display: grid; gap: 14px; justify-items: end; text-align: right; font-size: 14px; color: rgba(255,255,255,.75); }
.held-pause { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 6px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--weiss); font: 700 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.held-pause i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); }
.held-pause svg { width: 14px; height: 14px; fill: currentColor; }
.js .held-claim { opacity: 0; transform: scale(1.3) rotate(-5deg); transform-origin: 30% 60%; }
.js .ist-bereit .held-claim { animation: aufkleben .8s var(--ease-feder) .2s both; }
@keyframes aufkleben { 0% { opacity: 0; transform: scale(1.3) rotate(-5deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.js .held-unter, .js .held .knopfreihe, .js .held-seite { opacity: 0; transform: translateY(20px); }
.js .ist-bereit .held-unter { animation: rein .9s var(--ease) .65s both; }
.js .ist-bereit .held .knopfreihe { animation: rein .9s var(--ease) .8s both; }
.js .ist-bereit .held-seite { animation: rein .9s var(--ease) 1s both; }
@keyframes rein { to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .held .innen { grid-template-columns: minmax(0, 1fr); padding-bottom: 32px; }
  .held-seite { justify-items: start; text-align: left; }
  .held .knopfreihe .knopf { flex: 1 1 100%; }
  .held::after { background: linear-gradient(180deg, rgba(10,6,4,.4) 0%, rgba(10,6,4,.1) 30%, rgba(10,6,4,.85) 75%); }
}
/* Variante mit Holz */
.held--holz { background: var(--holz) url("../img/holz-bahn-klein.webp") center top / max(100%, 1100px) auto repeat-y; align-items: center; }
@media (min-width: 900px) { .held--holz { background-image: url("../img/holz-bahn.webp"); } }
.held--holz::after { background: radial-gradient(120% 90% at 25% 40%, rgba(10,6,4,.2), rgba(10,6,4,.6)); }
.held--holz .innen { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; }
.held--holz .held-medium { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 10; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--schatten-tief); transform: rotate(1.5deg); }
.held--holz .held-seite { grid-column: 1 / -1; justify-items: start; text-align: left; }
@media (max-width: 900px) { .held--holz .innen { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Einstieg: Satz mit Bildern ---------- */
.ansage { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(44px, 7.4vw, 124px); line-height: .96; letter-spacing: -.006em; margin: 0; max-width: 21ch; }
.ansage .bild-wort { display: inline-block; vertical-align: middle; width: 1.9em; height: .78em; margin: -.1em .02em 0 .06em; border-radius: 999px; overflow: hidden; background: var(--creme); box-shadow: var(--schatten); }
.ansage .bild-wort img { width: 100%; height: 100%; object-fit: cover; }
.ansage .bild-wort--rund { width: .9em; height: .9em; }
.ansage .gruen { color: var(--gruen-tief); }
.js .ansage .bild-wort { transform: scale(.4) rotate(-8deg); opacity: 0; transition: transform .9s var(--ease-feder), opacity .5s var(--ease); transition-delay: var(--verzug, 0ms); }
.js .ansage.ist-da .bild-wort { transform: none; opacity: 1; }
.ansage-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(40px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--linie); }
.ansage-fuss p { margin: 0; max-width: 52ch; color: var(--tinte-2); font-size: clamp(18px, 1.3vw, 21px); }

/* ---------- Weg als große Liste mit Bild beim Darüberfahren ---------- */
.wegliste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinte); counter-reset: weg; }
.wegliste li { border-bottom: 1px solid var(--linie); }
.wegliste a { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1.1fr) minmax(0, 1fr) 56px; align-items: center; gap: 24px; padding: clamp(22px, 2.6vw, 38px) 0; text-decoration: none; color: inherit; counter-increment: weg; }
.wegliste a::before { content: "0" counter(weg); font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .1em; color: var(--gruen-dunkel); }
.wegliste h3 { font-size: clamp(40px, 5.8vw, 116px); line-height: .94; transition: transform .5s var(--ease), color .3s var(--ease); }
.wegliste p { margin: 0; color: var(--tinte-2); font-size: 18px; max-width: 34ch; }
.wegliste p b { display: block; color: var(--tinte); font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.wegliste .weg-pfeil { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--tinte); transition: background-color .3s var(--ease), color .3s var(--ease), transform .4s var(--ease); }
.wegliste .weg-pfeil svg { width: 22px; height: 22px; }
.wegliste a:hover h3 { transform: translateX(18px); color: var(--gruen-tief); }
.wegliste a:hover .weg-pfeil { background: var(--gruen-tief); color: var(--weiss); box-shadow: none; transform: rotate(-45deg); }
.wegliste .weg-bild { display: none; }
.weg-folger { position: fixed; left: 0; top: 0; z-index: 5; width: 300px; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.7) rotate(-6deg); transition: opacity .35s var(--ease), transform .5s var(--ease); box-shadow: var(--schatten-tief); }
.weg-folger.ist-da { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
.weg-folger img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s var(--ease); }
.weg-folger img.ist-an { opacity: 1; }
@media (hover: none), (max-width: 900px) {
  .weg-folger { display: none; }
  .wegliste a { grid-template-columns: 84px minmax(0, 1fr) 44px; grid-template-areas: "bild titel titel" "bild text pfeil"; gap: 6px 18px; }
  .wegliste a::before { display: none; }
  .wegliste .weg-bild { display: block; grid-area: bild; width: 84px; height: 84px; border-radius: var(--r); overflow: hidden; }
  .wegliste .weg-bild img { width: 100%; height: 100%; object-fit: cover; }
  .wegliste h3 { grid-area: titel; font-size: clamp(36px, 10vw, 56px); }
  .wegliste p { grid-area: text; font-size: 16px; }
  .wegliste p b { font-size: 17px; }
  .wegliste .weg-pfeil { grid-area: pfeil; width: 44px; height: 44px; }
}

/* ---------- Karte mit Zoom ---------- */
@property --s { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --tx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ty { syntax: "<length>"; inherits: false; initial-value: 0px; }
.laeden-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.karte { position: sticky; top: calc(var(--kopf-h) + 20px); border-radius: var(--r-l); overflow: hidden; background: #DCE4E6; box-shadow: var(--schatten-tief); aspect-ratio: 1 / 1.02; isolation: isolate; }
.karte-flaeche { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1000 / 1283; transform-origin: 0 0; transform: translate(var(--tx), var(--ty)) scale(var(--s)); transition: --s 1.7s var(--ease-io), --tx 1.7s var(--ease-io), --ty 1.7s var(--ease-io); will-change: transform; }
.karte-flaeche > img, .karte-flaeche > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.karte-flaeche svg { overflow: visible; }
.ks { transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) scale(calc(1 / (var(--s) * var(--f, 1)))); }
.stadt circle { fill: #8C7E66; }
.stadt text { font-family: var(--text); font-size: 14px; font-weight: 700; fill: #6B5E4B; paint-order: stroke; stroke: #F8F4EC; stroke-width: 4px; stroke-linejoin: round; }
.stadt { transition: opacity .6s var(--ease); }
.stadt--gross text { font-size: 15px; font-weight: 800; fill: #574A3F; }
.karte[data-ebene="land"] .stadt--klein, .karte:not([data-ebene="land"]) .nur-land { opacity: 0; }
.region-name text { font-family: var(--display); font-size: 16px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; fill: #8FA55B; }
.region-name { transition: opacity .6s var(--ease); }
.karte[data-ebene="land"] .region-name { opacity: 0; }
.dreieck { fill: rgba(123,160,45,.12); stroke: var(--gruen-tief); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 1s var(--ease) .8s; }
.karte.ist-angekommen .dreieck { opacity: 1; }
.pin { cursor: pointer; outline: none; }
.pin-fall { transform: translateY(-90px); opacity: 0; transition: transform .9s var(--ease-feder), opacity .4s var(--ease); transition-delay: var(--verzug, 0s); }
.karte.ist-da .pin-fall { transform: none; opacity: 1; }
.pin-ring { fill: var(--gruen); opacity: 0; transform-box: fill-box; transform-origin: center; }
.karte.ist-angekommen .pin-ring { animation: puls 2.6s var(--ease) infinite; }
@keyframes puls { 0% { transform: scale(.4); opacity: .5; } 80% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }
.pin-nadel { fill: var(--gruen-tief); stroke: var(--weiss); stroke-width: 3; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); transition: fill .3s var(--ease); }
.pin.ist-aktiv .pin-nadel { fill: var(--holz); }
.pin-kopf { transition: transform .35s var(--ease-feder); transform-box: fill-box; transform-origin: 50% 100%; }
.pin:hover .pin-kopf, .pin.ist-aktiv .pin-kopf, .pin:focus-visible .pin-kopf { transform: scale(1.14); }
.pin-name { font-family: var(--display); font-weight: 900; font-size: 22px; fill: var(--tinte); text-transform: uppercase; letter-spacing: .02em; paint-order: stroke; stroke: rgba(255,255,255,.96); stroke-width: 5px; stroke-linejoin: round; }
.pin-zusatz { font-family: var(--text); font-weight: 700; font-size: 13px; fill: var(--tinte-2); paint-order: stroke; stroke: rgba(255,255,255,.96); stroke-width: 4px; }
.karte-knoepfe { position: absolute; left: 14px; top: 14px; display: flex; flex-wrap: wrap; gap: 8px; z-index: 3; }
.karte-knoepfe button { font: 800 15px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(255,255,255,.95); color: var(--tinte); box-shadow: 0 4px 12px -4px rgba(0,0,0,.35); cursor: pointer; }
.karte-knoepfe button[aria-pressed="true"], .karte-knoepfe button:hover { background: var(--tinte); color: var(--weiss); }
.laden-liste { border-top: 2px solid var(--tinte); }
.laden { border-bottom: 1px solid var(--linie); }
.laden-kopf { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 22px 0; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--tinte); }
.laden-name { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 4.4vw, 68px); line-height: .9; text-transform: uppercase; color: #B0A48F; transition: color .35s var(--ease), transform .45s var(--ease); }
.laden-kopf:hover .laden-name { color: var(--tinte); transform: translateX(8px); }
.laden-ort { grid-column: 1; font-weight: 700; font-size: 15.5px; color: var(--tinte-2); }
.laden-plus { grid-row: 1 / span 2; grid-column: 2; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--tinte); position: relative; transition: background-color .3s var(--ease), transform .45s var(--ease), box-shadow .3s var(--ease); }
.laden-plus::before, .laden-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; margin: -1.25px 0 0 -8px; background: var(--tinte); transition: background-color .3s var(--ease); }
.laden-plus::after { transform: rotate(90deg); }
.laden.ist-offen .laden-name { color: var(--gruen-tief); }
.laden.ist-offen .laden-plus { background: var(--gruen-tief); box-shadow: none; transform: rotate(45deg); }
.laden.ist-offen .laden-plus::before, .laden.ist-offen .laden-plus::after { background: var(--weiss); }
.laden-inhalt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.laden.ist-offen .laden-inhalt { grid-template-rows: 1fr; }
.laden-inhalt > div { overflow: hidden; }
.laden-karte { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding-bottom: 26px; }
.laden-karte img { width: 160px; height: 190px; object-fit: cover; border-radius: var(--r); }
.laden-karte p { margin: 0 0 10px; color: var(--tinte-2); font-size: 17px; }
.laden-karte dl { margin: 0 0 16px; display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 16px; }
.laden-karte dt { color: var(--tinte-2); }
.laden-karte dd { margin: 0; font-weight: 700; }
.laden-karte dd a { color: var(--gruen-dunkel); }
@media (max-width: 1000px) { .laeden-raster { grid-template-columns: minmax(0, 1fr); } .laden-name { font-size: clamp(28px, 8.2vw, 48px); } .karte { position: relative; top: 0; aspect-ratio: 1 / .95; } }
@media (max-width: 560px) { .karte { aspect-ratio: 1 / 1.12; } .laden-karte { grid-template-columns: minmax(0, 1fr); } .laden-karte img { width: 100%; height: 200px; } }

/* ---------- Partner-Band ---------- */
.band { overflow: hidden; padding-block: 34px; border-block: 1px solid var(--linie-dunkel); }
.band-spur { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); width: max-content; animation: band 42s linear infinite; }
.band:hover .band-spur { animation-play-state: paused; }
.band-spur img { height: clamp(64px, 6vw, 84px); width: auto; padding: 14px 26px; border-radius: 14px; background: #FFFFFF; transition: transform .35s var(--ease); }
.band-spur img:hover { transform: translateY(-4px); }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- Galerie zum Wischen ---------- */
.galerie-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.galerie-pfeile { display: flex; gap: 10px; }
.galerie-pfeile button { width: 56px; height: 56px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: var(--hell); cursor: pointer; display: grid; place-items: center; transition: background-color .25s var(--ease); }
.galerie-pfeile button:hover { background: var(--gruen-tief); }
.galerie-pfeile svg { width: 22px; height: 22px; }
.galerie { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(270px, 30vw, 440px); gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); padding-inline: max(var(--rand), calc((100% - var(--breite)) / 2)); padding-bottom: 12px; scrollbar-width: none; overscroll-behavior-x: contain; }
.galerie::-webkit-scrollbar { display: none; }
.flaeche-nacht a.galerie-karte, .galerie-karte { scroll-snap-align: start; position: relative; display: block; aspect-ratio: 4 / 5.2; border-radius: var(--r-l); overflow: hidden; color: var(--weiss); text-decoration: none; background: var(--nacht-2); isolation: isolate; }
.galerie-karte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease); }
.galerie-karte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,6,4,0) 45%, rgba(10,6,4,.85)); }
.galerie-karte:hover img { transform: scale(1.06); }
.galerie-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; }
.galerie-text b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 3vw, 48px); text-transform: uppercase; line-height: .9; }
.galerie-text span { display: block; margin-top: 6px; font-size: 16px; color: rgba(255,255,255,.82); }
.galerie-logo { position: absolute; top: 18px; left: 18px; background: rgba(255,255,255,.95); border-radius: 10px; padding: 8px 12px; }
.galerie-logo img { position: static; width: auto; height: 34px; z-index: auto; transform: none !important; }
.galerie-karte--mehr { display: grid; place-items: center; text-align: center; background: var(--gruen-tief); }
.galerie-karte--mehr::after { display: none; }
.galerie-karte--mehr b { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 4vw, 60px); line-height: .9; text-transform: uppercase; }

/* ---------- Festival-Bühne ---------- */
.ansage .zusammen { white-space: nowrap; }
.buehne { position: relative; min-height: 100svh; display: flex; align-items: center; color: var(--weiss); overflow: hidden; isolation: isolate; background: var(--nacht); }
.buehne-bild { position: absolute; inset: -10% 0; z-index: -2; }
.buehne-bild img { width: 100%; height: 100%; object-fit: cover; }
.buehne::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,6,4,.82) 0%, rgba(10,6,4,.45) 55%, rgba(10,6,4,.2)), linear-gradient(0deg, rgba(10,6,4,.6), rgba(10,6,4,0) 40%); }
.buehne-zahl { --z-luft: .16em; font-family: var(--display); font-weight: 900; font-size: clamp(120px, 22vw, 360px); line-height: .78; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.85); }
.buehne .zeile { margin-bottom: 8px; max-width: none; color: var(--gruen-licht); }
.buehne h2 + p { margin-top: 20px; }
.buehne h2 { font-size: clamp(44px, 5.6vw, 88px); margin-top: 12px; }
.buehne > .innen { padding-block: clamp(96px, 11vw, 160px); }
.eine-zeile { white-space: nowrap; }
.buehne p { max-width: 46ch; color: rgba(255,255,255,.86); font-size: clamp(18px, 1.3vw, 21px); }
.countdown { display: flex; gap: clamp(14px, 2vw, 28px); margin: 28px 0 32px; }
.countdown div { display: grid; }
.countdown b { font-family: var(--display); font-weight: 900; font-size: clamp(44px, 4.6vw, 72px); line-height: .9; font-variant-numeric: tabular-nums; }
.countdown span { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-licht); }
.countdown .tick { animation: tick .45s var(--ease); }
@keyframes tick { from { transform: translateY(-12px); opacity: .2; } }
.buehne-quelle { position: absolute; right: var(--rand); bottom: 22px; font-size: 13px; color: rgba(255,255,255,.65); }

/* ---------- Geteilte Abschnitte ---------- */
.geteilt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.geteilt--bild-rechts .geteilt-bild { order: 2; }
.geteilt-bild { position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--schatten-tief); }
.geteilt-bild img { width: 100%; height: 100%; object-fit: cover; }
.geteilt-bild figcaption { position: absolute; left: 16px; bottom: 14px; font-size: 13px; color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.geteilt h2 { font-size: clamp(48px, 6vw, 96px); }
.geteilt .einleitung { margin-top: 24px; }
@media (max-width: 900px) { .geteilt { grid-template-columns: minmax(0, 1fr); } .geteilt h2 { font-size: clamp(34px, 9.4vw, 72px); } .geteilt--bild-rechts .geteilt-bild { order: 0; } .geteilt-bild { aspect-ratio: 4 / 3.6; } }

.code-kasten { margin: 30px 0; padding: 22px 24px; border-radius: var(--r); background: var(--gruen-hauch); display: grid; gap: 10px; max-width: 520px; }
.flaeche-nacht .code-kasten, .flaeche-holz .code-kasten { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(169,199,112,.55); }
.code-kasten small { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-dunkel); }
.flaeche-nacht .code-kasten small, .flaeche-holz .code-kasten small { color: var(--gruen-licht); }
.code-kasten strong { font-family: var(--display); font-weight: 900; font-size: clamp(28px, 2.6vw, 38px); text-transform: uppercase; line-height: 1; }
.code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.code code { font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: .1em; background: var(--gruen); color: var(--weiss); padding: 6px 14px; border-radius: 8px; }
.code button { font: 800 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; background: none; border: 0; color: inherit; cursor: pointer; min-height: 44px; padding: 0 8px; text-decoration: underline; text-underline-offset: 4px; }
.hinweis-klein { font-size: 14.5px; color: var(--tinte-2); }
.flaeche-nacht .hinweis-klein, .flaeche-holz .hinweis-klein { color: var(--hell-2); }
.seitenheld .hinweis-klein { font-size: 14.5px; color: rgba(255,255,255,.75); }
.haken { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 12px; }
.haken li { position: relative; padding-left: 34px; }
.haken li::before { content: ""; position: absolute; left: 0; top: .22em; width: 22px; height: 22px; border-radius: 50%; background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* ---------- Großes Zitat ---------- */
.stimmen { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.stimmen-bild { margin: 0; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--schatten-tief); transform: rotate(2deg); }
.stimmen-bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .stimmen { grid-template-columns: minmax(0, 1fr); } .stimmen-bild { max-width: 420px; } }
.stimme { margin: 0; display: none; }
.stimme.ist-an { display: block; animation: stimme-rein .9s var(--ease) both; }
@keyframes stimme-rein { from { opacity: 0; transform: translateY(24px); } }
.stimme blockquote { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 4vw, 64px); line-height: 1; text-transform: uppercase; max-width: 22ch; }
.stimme blockquote::before { content: "\201E"; color: var(--gruen); }
.stimme blockquote::after { content: "\201C"; color: var(--gruen); }
.stimme figcaption { margin-top: 26px; font-size: 18px; color: var(--tinte-2); }
.stimme figcaption b { color: var(--tinte); }
.stimmen-steuer { display: flex; gap: 10px; margin-top: 40px; }
.stimmen-steuer button { position: relative; width: 64px; height: 4px; border: 0; padding: 0; background: var(--linie); cursor: pointer; overflow: hidden; border-radius: 2px; }
.stimmen-steuer button::before { content: ""; position: absolute; inset: -14px 0; }
.stimmen-steuer button::after { content: ""; position: absolute; inset: 0; background: var(--gruen-tief); transform: scaleX(0); transform-origin: left; }
.stimmen-steuer button[aria-current="true"]::after { animation: fortschritt 7s linear forwards; }
[data-stimmen].ist-pause .stimmen-steuer button[aria-current="true"]::after { animation-play-state: paused; }
@keyframes fortschritt { to { transform: scaleX(1); } }

/* ---------- Termine ---------- */
.termine { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinte); }
.flaeche-nacht .termine { border-color: var(--hell); }
.termin { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--linie); }
.flaeche-nacht .termin { border-color: var(--linie-dunkel); }
.termin-datum { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .9; }
.termin-datum b { display: block; font-size: 52px; }
.termin-datum span { font-size: 18px; letter-spacing: .06em; color: var(--gruen-dunkel); }
.flaeche-nacht .termin-datum span { color: var(--gruen-licht); }
.termin h3 { font-size: clamp(26px, 2.4vw, 38px); line-height: .95; }
.termin p { margin: 6px 0 0; color: var(--tinte-2); font-size: 16.5px; }
.flaeche-nacht .termin p { color: var(--hell-2); }
.termin-art { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-dunkel); margin-bottom: 6px; }
.flaeche-nacht .termin-art { color: var(--gruen-licht); }
@media (max-width: 700px) { .termin { grid-template-columns: minmax(0, 1fr); gap: 10px; } .termin-datum { display: flex; gap: 12px; align-items: baseline; } .termin-datum b { font-size: 40px; } }

/* ---------- Beiträge ---------- */
.beitraege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
.beitrag { text-decoration: none; color: inherit; display: grid; gap: 14px; align-content: start; }
.beitrag-bild { overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; background: var(--creme); }
.beitrag-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.beitrag:hover .beitrag-bild img { transform: scale(1.06); }
.beitrag time { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-dunkel); }
.beitrag h3 { font-size: clamp(26px, 2.2vw, 34px); line-height: .95; hyphens: auto; transition: color .3s var(--ease); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.beitrag:hover h3 { color: var(--gruen-tief); }
.beitrag p { margin: 0; color: var(--tinte-2); font-size: 16.5px; }
@media (max-width: 900px) { .beitraege { grid-template-columns: minmax(0, 1fr); } .beitrag { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "bild zeit" "bild titel"; align-items: start; gap: 6px 16px; } .beitrag-bild { grid-area: bild; aspect-ratio: 1; } .beitrag time { grid-area: zeit; } .beitrag h3 { grid-area: titel; font-size: 23px; } .beitrag p { display: none; } }

/* ---------- Abschnittskopf ---------- */
.kopfzeile { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(44px, 5vw, 80px); }
.kopfzeile h2 { font-size: clamp(48px, 6.4vw, 104px); }
.kopfzeile p { margin: 0; color: var(--tinte-2); font-size: clamp(18px, 1.3vw, 21px); max-width: 44ch; }
.flaeche-nacht .kopfzeile p, .flaeche-holz .kopfzeile p { color: var(--hell-2); }
@media (max-width: 900px) { .kopfzeile { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Infokarten, Preise, Fakten ---------- */
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 2px solid var(--tinte); }
.fakt { padding: 26px 24px 26px 0; border-bottom: 1px solid var(--linie); }
.fakt + .fakt { padding-left: 24px; border-left: 1px solid var(--linie); }
.fakt b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(40px, 4vw, 64px); line-height: .9; text-transform: uppercase; }
.fakt span { display: block; margin-top: 8px; color: var(--tinte-2); font-size: 16.5px; }
.preise { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.preis { padding: 30px; border-radius: var(--r-l); background: var(--weiss); box-shadow: var(--schatten); display: grid; gap: 8px; align-content: start; }
.preis--hervor { background: var(--nacht); color: var(--hell); }
.preis small { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-dunkel); }
.preis--hervor small { color: var(--gruen-licht); }
.preis b { font-family: var(--display); font-weight: 900; font-size: clamp(54px, 5vw, 76px); line-height: .9; }
.preis p { margin: 0; color: var(--tinte-2); font-size: 16.5px; }
.preis--hervor p { color: var(--hell-2); }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(20px, 3vw, 44px); counter-reset: schritt; }
.schritte li { counter-increment: schritt; border-top: 2px solid currentColor; padding-top: 22px; }
.schritte li::before { content: counter(schritt); display: block; font-family: var(--display); font-weight: 900; font-size: 64px; line-height: .8; color: var(--gruen); margin-bottom: 14px; }
.schritte h3 { font-size: 30px; margin-bottom: 10px; }
.schritte p { margin: 0; color: var(--tinte-2); font-size: 17px; }
.flaeche-nacht .schritte p, .flaeche-holz .schritte p { color: var(--hell-2); }

/* ---------- Häufige Fragen ---------- */
.fragen { border-top: 2px solid var(--tinte); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 24px 0; cursor: pointer; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2vw, 32px); text-transform: uppercase; line-height: 1; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--tinte); font-size: 26px; transition: transform .4s var(--ease); }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details > div { padding: 0 0 26px; color: var(--tinte-2); max-width: 70ch; }

/* ---------- Partner-Raster ---------- */
.partner-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.partner-zelle { position: relative; display: grid; grid-template-rows: 150px auto; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--weiss); text-decoration: none; color: inherit; overflow: hidden; }
.partner-zelle .logo { display: grid; place-items: center; padding: 24px 32px; }
.partner-zelle .logo img { max-height: 78px; width: auto; transition: transform .6s var(--ease); }
.partner-zelle:hover .logo img { transform: scale(1.06); }
.partner-zelle div:last-child { padding: 0 26px 28px; }
.partner-zelle b { font-family: var(--display); font-weight: 900; font-size: 30px; text-transform: uppercase; display: block; }
.partner-zelle span { display: block; font-size: 14.5px; font-weight: 700; color: var(--gruen-dunkel); text-transform: uppercase; letter-spacing: .08em; margin: 2px 0 8px; }
.partner-zelle p { margin: 0; font-size: 16.5px; color: var(--tinte-2); }
.partner-zelle::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gruen); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.partner-zelle:hover::after { transform: scaleX(1); }
@media (max-width: 900px) { .partner-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .partner-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Formular ---------- */
.formular { display: grid; gap: 20px; }
.formular-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feld { display: grid; gap: 8px; }
.feld label, .feld legend { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.feld input, .feld textarea, .feld select { width: 100%; font: inherit; font-size: 17px; color: var(--tinte); background: var(--weiss); border: 1.5px solid #CDBFA9; border-radius: 10px; padding: 14px 16px; min-height: 56px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.feld textarea { min-height: 150px; resize: vertical; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-color: var(--gruen-tief); box-shadow: 0 0 0 4px rgba(123,160,45,.22); }
.feld fieldset { border: 0; margin: 0; padding: 0; }
.feld-fehler { display: none; color: #A3341F; font-size: 15px; font-weight: 600; }
.feld.hat-fehler input, .feld.hat-fehler textarea { border-color: #A3341F; }
.feld.hat-fehler .feld-fehler { display: block; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wahl label { position: relative; font-family: var(--text); text-transform: none; font-size: 16px; font-weight: 700; letter-spacing: 0; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--weiss); box-shadow: inset 0 0 0 1.5px #CDBFA9; cursor: pointer; transition: background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease); }
.wahl span:hover { box-shadow: inset 0 0 0 2px var(--gruen-tief); }
.wahl input:checked + span { background: var(--gruen-tief); color: var(--weiss); box-shadow: none; }
.wahl input:focus-visible + span { outline: 3px solid var(--gruen); outline-offset: 2px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-meldung { padding: 18px 20px; border-radius: var(--r); font-weight: 600; }
.formular-meldung--gut { background: var(--gruen-hauch); color: var(--gruen-dunkel); }
.formular-meldung--schlecht { background: #F6DED6; color: #8A2A17; }
@media (max-width: 600px) { .formular-zeile { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Videos, Podcast ---------- */
.video { position: relative; border-radius: var(--r); overflow: hidden; background: var(--nacht); aspect-ratio: 16 / 9; }
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.video:hover img { transform: scale(1.05); }
.video button { position: absolute; inset: 0; z-index: 1; width: 100%; border: 0; padding: 0; background: linear-gradient(180deg, rgba(10,6,4,0) 40%, rgba(10,6,4,.85)); color: var(--weiss); cursor: pointer; display: flex; align-items: flex-end; text-align: left; font: inherit; }
.video-titel { padding: 18px 20px; font-family: var(--display); font-weight: 800; font-size: clamp(20px, 1.6vw, 26px); text-transform: uppercase; line-height: 1; }
.video-play { position: absolute; top: 50%; left: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: var(--gruen); display: grid; place-items: center; transition: transform .35s var(--ease-feder); }
.video button:hover .video-play { transform: scale(1.12); }
.video-play svg { width: 30px; height: 30px; fill: #fff; margin-left: 4px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }

/* ---------- Zeitleiste ---------- */
.zeitleiste-rahmen { position: relative; }
.zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: 120px; top: 8px; bottom: 8px; width: 3px; background: var(--linie); }
.zeitleiste-fortschritt { position: absolute; left: 120px; top: 8px; width: 3px; height: var(--fort, 0%); background: var(--gruen); transition: height .2s linear; }
.zeitleiste li { position: relative; display: grid; grid-template-columns: 100px 1fr; gap: 60px; padding: 26px 0; }
.zeitleiste li::after { content: ""; position: absolute; left: 113px; top: 36px; width: 17px; height: 17px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 3px var(--gruen); }
.zeitleiste time { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1; color: var(--gruen-tief); }
.zeitleiste h3 { font-size: clamp(28px, 2.6vw, 40px); margin-bottom: 8px; }
.zeitleiste p { margin: 0; color: var(--tinte-2); max-width: 56ch; }
@media (max-width: 600px) { .zeitleiste::before, .zeitleiste-fortschritt { left: 8px; } .zeitleiste li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-left: 40px; } .zeitleiste li::after { left: 1px; top: 32px; } .zeitleiste time { font-size: 34px; } }

/* ---------- Mietrechner ---------- */
.rechner { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-l); background: var(--nacht); color: var(--hell); display: grid; gap: 24px; }
.rechner label { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.rechner input[type="range"] { width: 100%; accent-color: var(--gruen); height: 32px; }
.rechner-ergebnis { display: flex; flex-wrap: wrap; gap: 28px; }
.rechner-ergebnis div b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(54px, 6vw, 88px); line-height: .9; font-variant-numeric: tabular-nums; }
.rechner-ergebnis div span { color: var(--hell-2); font-size: 15px; }

/* ---------- Ladenfinder per Postleitzahl ---------- */
.ladenfinder { margin-bottom: 28px; padding: 22px 24px; border-radius: var(--r-l); background: var(--weiss); box-shadow: var(--schatten); }
.ladenfinder label { display: block; font-family: var(--display); font-weight: 800; font-size: 21px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 12px; }
.ladenfinder-zeile { display: flex; gap: 10px; }
.ladenfinder input { flex: 1; min-width: 0; font: inherit; font-size: 20px; font-weight: 700; letter-spacing: .12em; padding: 0 18px; min-height: 52px; border: 1.5px solid #CDBFA9; border-radius: 999px; background: var(--papier); color: var(--tinte); }
.ladenfinder input:focus { outline: none; border-color: var(--gruen-tief); box-shadow: 0 0 0 4px rgba(123,160,45,.22); }
.ladenfinder-ergebnis { margin: 14px 0 0; font-size: 16.5px; color: var(--tinte-2); }
.ladenfinder-ergebnis:empty { display: none; }
.ladenfinder-ergebnis b { color: var(--tinte); }
.ladenfinder-ergebnis ol { margin: 8px 0 0; padding-left: 1.2em; }

/* Beitrag ohne Titelbild: Holz mit Logo statt leerer Fläche */
.beitrag-bild:empty { position: relative; background: var(--nacht) url("../img/holz.webp") center / cover; }
.beitrag-bild:empty::after { content: ""; position: absolute; inset: 22%; background: url("../img/logos/rhh-logo-hell-240.png") center / contain no-repeat; }


/* ==========================================================================
   Neuer Look für alle Seiten (Stand November 2026)
   ========================================================================== */
:root {
  --koerner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E");
}
/* ---------- Etiketten und Abschnittsköpfe ---------- */
.etikett { display: inline-block; margin: 0 0 22px; padding: .42em .8em .36em; border-radius: 5px; background: var(--gruen); color: var(--weiss) !important; font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 0 2px var(--gruen-tief), 0 10px 18px -10px rgba(10,6,4,.6); }
.etikett--dreh { transform: rotate(-2.5deg); transform-origin: left center; }
.js .etikett--dreh[data-zeigen] { transform: translateY(24px) rotate(-8deg); }
.js .etikett--dreh[data-zeigen].ist-da { transform: rotate(-2.5deg); transition-timing-function: var(--ease-feder); }

.s-kopf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; gap: 24px 64px; margin-bottom: clamp(40px, 5vw, 72px); }
.s-kopf h2 { font-size: clamp(44px, 6.2vw, 104px); line-height: .96; }
.s-kopf > p { margin: 0 0 8px; font-size: clamp(18px, 1.3vw, 21px); color: var(--tinte-2); max-width: 40ch; }
@media (max-width: 900px) { .s-kopf { grid-template-columns: minmax(0, 1fr); } }


/* ---------- Herstellerkarten ---------- */
.s-hersteller-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(34px, 3.4vw, 52px) clamp(18px, 2vw, 28px); }
@media (max-width: 1000px) { .s-hersteller-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .s-hersteller-raster { grid-template-columns: minmax(0, 1fr); } }
.hersteller { position: relative; display: grid; gap: 0; height: 100%; grid-template-rows: auto 1fr; border-radius: 20px; overflow: hidden; background: var(--weiss); color: var(--tinte); text-decoration: none; box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 30px 50px -34px rgba(10,6,4,.75); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.hersteller:hover, .hersteller:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 40px 60px -34px rgba(10,6,4,.8); }
.hersteller-bild { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden; background: var(--nacht-2); isolation: isolate; }
.hersteller-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s var(--ease); filter: saturate(.92); }
.hersteller-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(15,10,7,.45)); pointer-events: none; }
.hersteller-seit { position: absolute; z-index: 2; right: 14px; bottom: 12px; padding: .38em .7em .32em; border-radius: 5px; background: var(--gruen); color: var(--weiss); font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 0 2px var(--gruen-tief), 0 10px 18px -10px rgba(10,6,4,.7); transform: rotate(-3deg); transition: opacity .3s var(--ease); }
.hersteller-mehr { position: absolute; z-index: 3; inset: auto 0 0 0; display: grid; gap: 12px; padding: 22px 22px 20px; background: linear-gradient(180deg, rgba(23,17,13,0), rgba(23,17,13,.9) 34%); color: var(--hell); font-size: 16px; line-height: 1.45; transform: translateY(101%); transition: transform .5s var(--ease); }
.hersteller-mehr i { display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen-licht); }
.hersteller-mehr .pfeil { width: 18px; height: 18px; }
.hersteller:hover .hersteller-bild img, .hersteller:focus-visible .hersteller-bild img { transform: scale(1.06); filter: saturate(1.05); }
.hersteller:hover .hersteller-mehr, .hersteller:focus-visible .hersteller-mehr { transform: none; }
.hersteller:hover .hersteller-seit, .hersteller:focus-visible .hersteller-seit { opacity: 0; }
@media (hover: none) { .hersteller-mehr { display: none; } }
.hersteller-fuss { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px 20px; }
.hersteller-logo { flex: none; display: grid; place-items: center end; width: 34%; max-width: 128px; height: 50px; transition: transform .4s var(--ease-feder); }
.hersteller-logo img { max-height: 50px; max-width: 100%; width: auto; height: auto; }
.hersteller:hover .hersteller-logo { transform: scale(1.06); }
.hersteller-name { display: grid; gap: 4px; min-width: 0; }
.hersteller b { font-family: var(--display); font-weight: 900; font-size: clamp(28px, 2.4vw, 38px); text-transform: uppercase; line-height: .9; transition: color .25s var(--ease); }
.hersteller:hover b { color: var(--gruen-dunkel); }
.hersteller small { font-size: 15px; line-height: 1.35; color: var(--tinte-2); }
.s-hersteller-raster--klein { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.s-hersteller-raster--klein .hersteller b { font-size: 26px; }
.s-hersteller-raster--klein .hersteller-mehr { display: none; }
.s-hersteller-raster--klein .hersteller-seit { font-size: 12px; right: 10px; bottom: 9px; }
.s-hersteller-raster--klein .hersteller-logo { width: auto; max-width: 110px; height: 36px; place-items: center start; }
.s-hersteller-raster--klein .hersteller-logo img { max-height: 36px; }
@media (max-width: 1100px) { .s-hersteller-raster--klein { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .s-hersteller-raster--klein { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flaeche-creme .hersteller, .abschnitt:not(.flaeche-nacht):not(.flaeche-holz) .hersteller { color: var(--tinte); }

/* ---------- Kopf der Unterseiten: Holz links, Bild rechts ---------- */
.kopf2 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(86svh, 820px); background: var(--holz-tief) url("../img/holz-bahn-klein.webp") center top / max(100%, 1100px) auto repeat-y; color: var(--hell); isolation: isolate; overflow: clip; }
@media (min-width: 900px) { .kopf2 { background-image: url("../img/holz-bahn.webp"); } }
.kopf2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 20% 30%, rgba(23,17,13,.4), rgba(15,10,7,.84)); }
.kopf2-text { align-self: center; padding: calc(var(--kopf-h) + 40px) 0 64px max(var(--rand), calc((100vw - var(--breite)) / 2)); max-width: 640px; position: relative; z-index: 2; }
.kopf2 h1 { font-size: clamp(56px, 7.4vw, 128px); line-height: .93; margin: 0 0 14px; }
.kopf2-logo { display: inline-grid; place-items: center; min-height: 72px; padding: 10px 18px; margin-bottom: 26px; border-radius: 12px; background: var(--papier); box-shadow: 0 16px 30px -16px rgba(0,0,0,.7); transform: rotate(-3deg); }
.kopf2-logo img { max-height: 56px; max-width: 200px; width: auto; height: auto; }
.kopf2-ort { margin: 0 0 18px; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-licht); }
.kopf2-unter { font-size: clamp(19px, 1.45vw, 23px); line-height: 1.45; color: var(--hell-2); max-width: 34ch; margin: 0 0 30px; }
.kopf2-bild { position: relative; margin: 0; min-height: inherit; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%); }
.kopf2-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .kopf2-bild img { animation: kopf2-rein 1.6s var(--ease) both; }
@keyframes kopf2-rein { from { transform: scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 900px) {
  .kopf2 { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .kopf2-bild { grid-row: 1; aspect-ratio: 4 / 3; min-height: 0; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
  .kopf2-text { padding: 0 var(--rand) 56px; margin-top: -30px; }
  .kopf2-bild::before { content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--kopf-h) + 30px); z-index: 1; background: linear-gradient(180deg, rgba(15,10,7,.6), transparent); }
}

/* ---------- Steckbrief ---------- */
.steckbrief-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .steckbrief-raster { grid-template-columns: minmax(0, 1fr); } }
/* Steckbrief als Datenblatt: eine Karte, feine Trennlinien, Werte brechen nur zwischen Wörtern um */
.steckbrief { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: 18px; overflow: hidden; background: var(--linie); box-shadow: 0 0 0 1px rgba(30,23,18,.07), 0 24px 50px -36px rgba(30,23,18,.6); }
.steckbrief > div { min-width: 0; padding: clamp(18px, 1.8vw, 24px) clamp(18px, 2vw, 26px); background: var(--weiss); }
.steckbrief dt { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--gruen-dunkel); white-space: nowrap; margin-bottom: 8px; }
.steckbrief dd { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(23px, 2vw, 29px); line-height: 1.08; overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; }
.steckbrief dd small { display: block; margin-top: 6px; font-family: var(--text); font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--tinte-2); text-wrap: pretty; }
.steckbrief dd a { color: var(--tinte); white-space: nowrap; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.steckbrief dd a::after { content: "↗"; display: inline-block; margin-left: .3em; font-size: .7em; color: var(--gruen-tief); transition: transform .25s var(--ease); }
.steckbrief dd a:hover::after { transform: translate(2px, -2px); }
/* Hersteller: Sitz und Website bekommen die ganze Breite, Gründungsjahr und Betrieb teilen sich eine Zeile */
.steckbrief--hersteller > div:first-child, .steckbrief--hersteller > div:last-child { grid-column: 1 / -1; }
.steckbrief--hersteller > div:nth-child(2) dd { font-size: clamp(30px, 2.8vw, 40px); line-height: 1; }
.lesetext .detail { padding: 18px 22px; border-radius: 14px; background: var(--gruen-hauch); }
.lesetext .claim { margin-top: 28px; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3vw, 46px); line-height: 1; text-transform: uppercase; color: var(--gruen-dunkel); }
.lesetext .claim small { display: block; margin-top: 8px; font-family: var(--text); font-weight: 600; font-size: 15px; text-transform: none; color: var(--tinte-2); }

/* ---------- Punkte (was einen Hersteller ausmacht) ---------- */
.punkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .punkte { grid-template-columns: minmax(0, 1fr); } }
.punkte li { padding: 26px 24px; border-radius: 18px; background: var(--weiss); box-shadow: 0 20px 44px -34px rgba(30,23,18,.6); }
.punkte span { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%; background: var(--gruen); color: var(--weiss); font-family: var(--display); font-weight: 900; font-size: 18px; transform: rotate(-6deg); }
.punkte h3 { font-size: 26px; line-height: .95; margin-bottom: 10px; }
.punkte p { margin: 0; font-size: 16.5px; color: var(--tinte-2); }

/* ---------- Modelle ---------- */
.modelle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
@media (max-width: 1000px) { .modelle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .modelle { grid-template-columns: minmax(0, 1fr); } }
.modell { display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 30px 50px -40px rgba(30,23,18,.7); }
.modell-bild { position: relative; margin: 0; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 9% 9% 11%; background: radial-gradient(80% 70% at 50% 42%, #FFFFFF 0%, var(--papier) 55%, var(--creme) 100%); overflow: hidden; }
.modell-bild::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 9%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(30,23,18,.28), transparent); filter: blur(4px); z-index: 0; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.modell-bild img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(30,23,18,.18)); transition: transform .7s var(--ease); }
.modell:hover .modell-bild img { transform: translateY(-6px) rotate(-1.5deg) scale(1.03); }
.modell:hover .modell-bild::after { transform: scale(.88); opacity: .7; }
.modell-text { display: grid; align-content: start; gap: 8px; padding: 20px 22px 24px; border-top: 1px solid var(--linie); }
.modell-nr { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .1em; color: var(--gruen-dunkel); }
.modell h3 { margin: 0; font-size: clamp(26px, 2.2vw, 34px); line-height: .95; }
.modell p { margin: 0; color: var(--tinte-2); font-size: 16.5px; line-height: 1.5; }
.modell-im-bild { margin-top: 4px; font-size: 13.5px; color: var(--tinte-2); opacity: .85; }
.modell--ohne-bild .modell-text { border-top: 0; }
.modelle-quelle { margin: 18px 0 0; font-size: 14px; color: var(--tinte-2); }
.modelle-fuss { margin-top: 40px; }
.flaeche-nacht a.hersteller, .flaeche-holz a.hersteller { color: var(--tinte); } /* weiße Karten, auch auf dunklem Grund */
.flaeche-nacht a.hersteller:hover b, .flaeche-holz a.hersteller:hover b { color: var(--gruen-dunkel); }
.flaeche-nacht .s-kopf > p, .flaeche-holz .s-kopf > p { color: var(--hell-2); }

/* Kopf mit freigestelltem Foto statt Vollbild */
.kopf2--frei .kopf2-bild { -webkit-mask-image: none; mask-image: none; display: flex; align-items: flex-end; justify-content: center; padding-top: calc(var(--kopf-h) + 20px); }
.kopf2--frei .kopf2-bild img { position: relative; inset: auto; width: auto; height: auto; max-height: min(78svh, 740px); max-width: 92%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.kopf2--frei .kopf2-bild::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, 45%); background: radial-gradient(circle, rgba(123,160,45,.35), transparent 65%); z-index: -1; }
@media (max-width: 900px) { .kopf2--frei .kopf2-bild { aspect-ratio: auto; padding-top: calc(var(--kopf-h) + 10px); } .kopf2--frei .kopf2-bild img { max-height: 52svh; } .kopf2--frei .kopf2-bild::before { display: none; } .kopf2--frei .kopf2-text { margin-top: 24px; } }

/* Miete */
.miete { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .miete { grid-template-columns: minmax(0, 1fr); } }
.miete-preis { position: relative; padding: clamp(28px, 3vw, 40px); border-radius: 24px; background: var(--gruen); color: var(--weiss); box-shadow: 0 0 0 3px var(--gruen-tief), 0 40px 70px -46px rgba(30,23,18,.8); transform: rotate(-1.5deg); }
.miete-preis small { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; }
.miete-preis b { --z-luft: .14em; display: block; font-family: var(--display); font-weight: 900; font-size: clamp(96px, 10vw, 150px); line-height: .82; margin: 8px 0 6px; }
.miete-preis > span { font-size: 19px; font-weight: 600; }
.miete-preis ul { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.3); display: grid; gap: 8px; }
.miete-preis li { position: relative; padding-left: 28px; font-size: 17px; }
.miete-preis li::before { content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; border-radius: 50%; background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%235E7D1F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.miete-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.miete-schritte li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 18px; padding: 24px; border-radius: 18px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 20px 44px -34px rgba(30,23,18,.6); }
.miete-schritte span { grid-row: 1 / 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--tinte); color: var(--weiss); font-family: var(--display); font-weight: 900; font-size: 20px; }
.miete-schritte h3 { font-size: 28px; line-height: 1; align-self: end; }
.miete-schritte p { margin: 0; color: var(--tinte-2); }

/* Lernen */
.workshop { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px clamp(32px, 5vw, 88px); align-items: center; }
.workshop-bild { position: relative; display: grid; justify-items: center; }
.workshop-bild::before { content: ""; position: absolute; left: 50%; bottom: 4%; width: 86%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: var(--gruen-hauch); z-index: -1; }
.workshop-bild img { width: min(100%, 420px); height: auto; filter: drop-shadow(0 26px 30px rgba(30,23,18,.25)); }
@media (max-width: 900px) { .workshop { grid-template-columns: minmax(0, 1fr); } .workshop-bild img { width: min(70%, 300px); } }
.vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 800px) { .vergleich { grid-template-columns: minmax(0, 1fr); } }
.vergleich-karte { padding: clamp(26px, 3vw, 40px); border-radius: 22px; background: var(--weiss); box-shadow: 0 24px 50px -38px rgba(30,23,18,.6); }
.vergleich-karte--gruen { background: var(--gruen); color: var(--weiss); }
.vergleich-titel { display: inline-block; margin: 0 0 14px; padding: .35em .7em .3em; border-radius: 5px; background: var(--tinte); color: var(--weiss); font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-2deg); }
.vergleich-karte--gruen .vergleich-titel { background: var(--weiss); color: var(--gruen-dunkel); }
.vergleich-karte h3 { font-size: clamp(30px, 2.8vw, 44px); line-height: .95; margin-bottom: 14px; }
.vergleich-karte p { color: var(--tinte-2); }
.vergleich-karte--gruen p, .vergleich-karte--gruen li { color: rgba(255,255,255,.9); }
.vergleich-karte ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.vergleich-karte li { position: relative; padding-left: 28px; }
.vergleich-karte li::before { content: "?"; position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--weiss); color: var(--gruen-dunkel); font-family: var(--display); font-weight: 900; font-size: 13px; }
.seminare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 800px) { .seminare { grid-template-columns: minmax(0, 1fr); } }
.seminar { position: relative; padding: clamp(26px, 3vw, 38px); border-radius: 22px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 24px 50px -40px rgba(30,23,18,.6); overflow: hidden; }
.seminar-nr { position: absolute; right: 22px; top: 10px; font-family: var(--display); font-weight: 900; font-size: 84px; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--gruen); opacity: .45; }
.seminar h3 { font-size: clamp(32px, 3vw, 46px); line-height: .92; margin-bottom: 10px; padding-right: 90px; }
.seminar-fuer { display: inline-block; margin: 0 0 14px; padding: .3em .65em; border-radius: 6px; background: var(--gruen-hauch); color: var(--gruen-dunkel); font-weight: 700; font-size: 15.5px; }
.seminar p:last-child { margin: 0; color: var(--tinte-2); }
.werkzeuge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .werkzeuge { grid-template-columns: minmax(0, 1fr); } }
.werkzeug-karte { --marke: var(--tinte); --marke-text: var(--weiss); display: grid; grid-template-rows: auto 1fr auto; border-radius: 22px; overflow: hidden; background: var(--weiss); color: var(--tinte); text-decoration: none; box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 24px 50px -40px rgba(30,23,18,.6); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
a.werkzeug-karte:hover { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--marke), 0 30px 60px -40px rgba(30,23,18,.7); }
.werkzeug-karte--griffbereit { --marke: #2B4BA8; }
.werkzeug-karte--qa { --marke: #F2C230; --marke-text: #1E1712; }
.werkzeug-karte--bald { --marke: var(--creme); --marke-text: var(--tinte-2); }
.werkzeug-kopf { position: relative; display: flex; align-items: center; gap: 14px; min-height: 110px; padding: 22px 24px; background: var(--marke); color: var(--marke-text); }
.werkzeug-kopf img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.werkzeug-kopf b, .werkzeug-wort { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: .9; text-transform: uppercase; }
.werkzeug-kopf i { position: absolute; right: 18px; top: 18px; padding: .3em .6em; border-radius: 5px; background: var(--gruen); color: var(--weiss); font-style: normal; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; transform: rotate(4deg); }
.werkzeug-text { display: block; padding: 22px 24px 8px; color: var(--tinte-2); font-size: 16.5px; }
.werkzeug-text small { display: block; margin-bottom: 6px; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte); }
.werkzeug-los { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px 24px; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte); }
.werkzeug-los .pfeil { width: 16px; height: 16px; transition: transform .3s var(--ease); }
a.werkzeug-karte:hover .werkzeug-los .pfeil { transform: translateX(4px); }
.vergleich-karte .vergleich-titel { color: var(--weiss); }
.vergleich-karte--gruen .vergleich-titel { color: var(--gruen-dunkel); }

/* Termine als Tickets */
.tickets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
@media (max-width: 1000px) { .tickets { grid-template-columns: minmax(0, 1fr); } }
.ticket-flaeche { --loch: 13px; position: relative; display: grid; grid-template-rows: auto 1fr auto; height: 100%; color: var(--tinte); text-decoration: none; background: var(--papier); border-radius: 16px; filter: drop-shadow(0 26px 30px rgba(0,0,0,.45)); transition: transform .4s var(--ease-feder); -webkit-mask: radial-gradient(circle var(--loch) at 0 calc(100% - 84px), transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--loch) at 100% calc(100% - 84px), transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--loch) at 0 calc(100% - 84px), transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--loch) at 100% calc(100% - 84px), transparent 98%, #000) right / 51% 100% no-repeat; }
.ticket:nth-child(2) .ticket-flaeche { transform: rotate(1deg); } .ticket:nth-child(odd) .ticket-flaeche { transform: rotate(-1deg); }
.ticket-datum { display: grid; padding: 24px 26px 18px; background: var(--gruen); color: var(--weiss); border-radius: 16px 16px 0 0; }
.ticket-datum small { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.ticket-datum b { font-family: var(--display); font-weight: 900; font-size: clamp(56px, 5vw, 76px); line-height: .85; }
.ticket-datum span { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.ticket-inhalt { display: grid; align-content: start; gap: 6px; padding: 20px 26px 22px; }
.ticket-art { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-dunkel); }
.ticket-titel { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 2.2vw, 32px); line-height: .95; text-transform: uppercase; hyphens: auto; }
.ticket-ort { font-size: 15.5px; color: var(--tinte-2); line-height: 1.4; }
.ticket-abriss { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 84px; padding: 0 26px; border-top: 2px dashed var(--linie); }
.ticket-preis { font-family: var(--display); font-weight: 900; font-size: 24px; }
.ticket-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--tinte); color: var(--weiss); font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; transition: background-color .25s var(--ease); }
a.ticket-flaeche:hover .ticket-knopf { background: var(--gruen-tief); }
.ticket-knopf .pfeil { width: 16px; height: 16px; }

.kopf2-quelle { position: absolute; right: 16px; bottom: 14px; z-index: 2; font-size: 12.5px; color: rgba(255,255,255,.75); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.ticket a.ticket-flaeche, .flaeche-holz .ticket a.ticket-flaeche, .flaeche-nacht .ticket a.ticket-flaeche { color: var(--tinte); }
.ticket-titel { hyphens: manual; overflow-wrap: normal; }
/* Über mich */
.auftritt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px clamp(32px, 5vw, 88px); align-items: center; }
.auftritt-bild { margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; transform: rotate(-2deg); box-shadow: 0 40px 70px -40px rgba(0,0,0,.8); }
.auftritt-bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .auftritt { grid-template-columns: minmax(0, 1fr); } .auftritt-bild { max-width: 420px; } }
.podcast-bild { position: relative; display: grid; justify-items: center; }
.podcast-bild::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 80%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: #1DB954; opacity: .9; z-index: 0; }
.podcast-bild img { position: relative; z-index: 1; width: min(100%, 400px); height: auto; filter: drop-shadow(0 26px 30px rgba(0,0,0,.4)); }
.kopf2--kurz { min-height: min(64svh, 620px); }
.kopf2--kurz.kopf2--frei .kopf2-bild img { max-height: min(56svh, 520px); }
.kontakt-wege2 { display: grid; gap: 14px; }
.kontakt-weg { display: grid; gap: 4px; padding: 22px 24px; border-radius: 18px; background: var(--weiss); color: var(--tinte); text-decoration: none; box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 20px 44px -34px rgba(30,23,18,.6); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.kontakt-weg:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--gruen), 0 26px 50px -34px rgba(30,23,18,.6); }
.kontakt-weg small { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-dunkel); }
.kontakt-weg b { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3vw, 44px); line-height: 1; white-space: nowrap; }
.kontakt-weg--mail b { font-size: clamp(22px, 2.2vw, 30px); white-space: normal; overflow-wrap: anywhere; }
.kontakt-weg span { font-size: 15.5px; color: var(--tinte-2); }
/* Community im Look von harmonika-community.de */
:root { --orange: #D9773A; --orange-tief: #B85F27; --petrol: #2F5B5B; --petrol-tief: #234646; }
.knopf--orange { --hg: var(--orange); }
.knopf--orange::after { background: var(--orange-tief); }
.etikett--orange { background: var(--orange); box-shadow: 0 0 0 2px var(--orange-tief), 0 10px 18px -10px rgba(10,6,4,.6); }
.kopf2--gemeinschaft { background: var(--petrol); }
.kopf2--gemeinschaft::before { background: radial-gradient(120% 90% at 20% 30%, rgba(35,70,70,.2), rgba(25,52,52,.75)), var(--koerner); opacity: 1; }
.kopf2--gemeinschaft .kopf2-bild::after { background: radial-gradient(circle, rgba(217,119,58,.45), transparent 65%); }
.kopf2--gemeinschaft .knopf--linie { --fuell: #F4EDE2; --fuell-text: var(--petrol-tief); }
.kopf2-marke { width: clamp(200px, 22vw, 290px); height: auto; margin: 0 0 22px -6px; }
.kopf2-marke--rund { width: clamp(110px, 10vw, 150px); margin: 0 0 18px; transform: rotate(-6deg); filter: drop-shadow(0 14px 18px rgba(10,6,4,.4)); }
.kopf2-preis { margin: 16px 0 0; font-size: 14.5px; color: rgba(244,237,226,.75); }
.zahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zahlen li { padding: 22px; border-radius: 18px; background: var(--weiss); box-shadow: 0 18px 40px -32px rgba(30,23,18,.6); }
.zahlen b { --z-luft: .1em; display: block; font-family: var(--display); font-weight: 900; font-size: clamp(48px, 5vw, 72px); line-height: .9; color: var(--petrol); }
.zahlen span { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-2); }
.gemeinschaft-zahlen { padding-block: 56px; background: var(--creme); }
.punkte--gemeinschaft span { background: var(--orange); }
.gemeinschaft-gaeste { background: var(--petrol); color: #F4EDE2; }
.gemeinschaft-gaeste .s-kopf > p { color: rgba(244,237,226,.8); }
.gaeste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.gaeste li { padding: 12px 20px; border-radius: 999px; background: rgba(244,237,226,.1); box-shadow: inset 0 0 0 1.5px rgba(244,237,226,.3); font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
.gaeste li:nth-child(odd) { background: var(--orange); box-shadow: none; transform: rotate(-1.5deg); }
.gemeinschaft-schritte span { background: var(--petrol); }
/* Blogbeitrag */
.artikel-kopf { position: relative; padding: calc(var(--kopf-h) + clamp(40px, 6vw, 80px)) 0 clamp(48px, 6vw, 80px); background: var(--holz-tief) url("../img/holz-bahn-klein.webp") center top / max(100%, 1100px) auto repeat-y; color: var(--hell); isolation: isolate; }
@media (min-width: 900px) { .artikel-kopf { background-image: url("../img/holz-bahn.webp"); } }
.artikel-kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,17,13,.6), rgba(23,17,13,.82)); }
.artikel-kopf--mit-bild { padding-bottom: clamp(140px, 14vw, 220px); }
.artikel-kopf h1 { font-size: clamp(40px, 5.2vw, 84px); line-height: .97; max-width: 22ch; }
.artikel-zurueck { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-licht); text-decoration: none; }
.artikel-zurueck .pfeil { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.artikel-zurueck:hover .pfeil { transform: translateX(-4px); }
.artikel-meta { margin: 0 0 16px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--hell-2); }
.artikel-bild { position: relative; z-index: 2; margin-top: calc(-1 * clamp(110px, 11vw, 180px)); margin-bottom: 0; }
.artikel-bild img { width: 100%; max-height: min(72svh, 720px); object-fit: cover; border-radius: 22px; box-shadow: 0 40px 70px -44px rgba(30,23,18,.8); background: var(--creme); }
.artikel-raster { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 300px); justify-content: space-between; gap: 48px; align-items: start; }
.artikel-text { max-width: 720px; }
.artikel-seite { position: sticky; top: calc(var(--kopf-h) + 24px); padding: 24px; border-radius: 20px; background: var(--creme); }
.artikel-seite p { font-size: 16px; color: var(--tinte-2); margin: 16px 0; }
.artikel-autor { display: flex; align-items: center; gap: 14px; }
.artikel-autor img { width: 64px; height: 64px; object-fit: cover; object-position: 50% 8%; border-radius: 50%; background: var(--gruen-hauch); }
.artikel-autor b { display: block; font-family: var(--display); font-weight: 900; font-size: 22px; text-transform: uppercase; line-height: 1; }
.artikel-autor span { display: block; font-size: 14px; color: var(--tinte-2); line-height: 1.35; }
.artikel-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--linie); }
@media (max-width: 900px) { .artikel-raster { grid-template-columns: minmax(0, 1fr); } .artikel-seite { position: static; } }
.kopf2--ohne-bild { grid-template-columns: minmax(0, 1fr); min-height: min(52svh, 520px); }
.kopf2--ohne-bild .kopf2-text { max-width: 900px; }

/* Landkarte und Ladenkarten (Startseite und Läden) */
.s-laeden-raster { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 3.4vw, 56px); align-items: start; }
.s-laeden-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (max-width: 1000px) { .s-laeden-raster { grid-template-columns: minmax(0, 1fr); } }

/* Landkarte */
.landkarte { position: sticky; top: calc(var(--kopf-h) + 20px); margin: 0; border-radius: 24px; overflow: hidden; background: #F4EEE2; box-shadow: 0 0 0 1px rgba(30,23,18,.08), 0 40px 80px -50px rgba(30,23,18,.55); }
@media (max-width: 1000px) { .landkarte { position: relative; top: auto; } }
.lk { display: block; width: 100%; height: auto; font-family: var(--text); }
.lk-grund { fill: #F4EEE2; }
.lk-laender path { stroke: #CDBFA6; stroke-width: 1.1; stroke-dasharray: 5 4; stroke-linejoin: round; }
.lk-he { fill: #F1EADC; } .lk-th { fill: #EDE7D5; } .lk-by { fill: #F6F0E4; } .lk-andere { fill: #E9E1D1; }
.lk-laendername text { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: .5em; text-transform: uppercase; fill: #B9AA8E; opacity: .55; text-anchor: middle; }
.lk-gebirge text { font-style: italic; font-weight: 600; font-size: 15px; letter-spacing: .14em; fill: #8F9C6A; text-anchor: middle; }
.lk-wasser path { fill: none; stroke: #9DBBC9; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lk-ab-rand { fill: none; stroke: #FFFFFF; stroke-width: 5.2; stroke-linecap: round; stroke-linejoin: round; }
.lk-ab { fill: none; stroke: #C89B47; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lk-schilder rect { fill: #2F5DA8; stroke: #FFFFFF; stroke-width: 1.5; }
.lk-schilder text { fill: #FFFFFF; font-family: var(--display); font-weight: 800; font-size: 13px; text-anchor: middle; }
.lk-ort circle { fill: var(--tinte); stroke: #F4EEE2; stroke-width: 1.5; }
.lk-ort text { font-size: 13.5px; font-weight: 600; fill: var(--tinte-2); paint-order: stroke; stroke: #F4EEE2; stroke-width: 4px; stroke-linejoin: round; }
.lk-ort--1 text { font-size: 17px; font-weight: 800; fill: var(--tinte); }
.lk-ort--3 text { font-size: 12.5px; font-weight: 500; }
.lk-berg path { fill: #6E7F45; }
.lk-berg text { font-size: 12.5px; font-weight: 700; fill: #5B6B36; paint-order: stroke; stroke: #F4EEE2; stroke-width: 4px; }
.lk-berg tspan { font-weight: 500; }
.lk-hof { opacity: .9; transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.lk-pin { cursor: pointer; outline: none; }
.lk-pin-nadel { fill: var(--gruen); stroke: var(--gruen-tief); stroke-width: 2; transition: fill .25s var(--ease); }
.lk-pin-punkt { fill: var(--weiss); }
.lk-pin-puls { fill: none; stroke: var(--gruen); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lk-pin-name { font-family: var(--display); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; fill: var(--tinte); paint-order: stroke; stroke: #F4EEE2; stroke-width: 6px; stroke-linejoin: round; }
.lk-pin-innen { transition: transform .4s var(--ease-feder); }
.lk-pin:hover .lk-pin-innen, .lk-pin:focus-visible .lk-pin-innen, .lk-pin.ist-aktiv .lk-pin-innen { transform: scale(1.18); }
.lk-pin:hover .lk-pin-nadel, .lk-pin.ist-aktiv .lk-pin-nadel { fill: var(--gruen-tief); }
.lk-pin:focus-visible .lk-pin-nadel { stroke: var(--tinte); stroke-width: 3; }
.lk-pin.ist-aktiv .lk-pin-puls { animation: puls 1.8s var(--ease) infinite; }
@keyframes puls { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }
.lk-massstab path { fill: none; stroke: var(--tinte-2); stroke-width: 1.6; }
.lk-massstab text { font-size: 12.5px; font-weight: 700; fill: var(--tinte-2); text-anchor: middle; letter-spacing: .06em; }
.lk-mini { position: absolute; left: 16px; bottom: 34px; width: clamp(64px, 9%, 96px); height: auto; filter: drop-shadow(0 6px 10px rgba(30,23,18,.18)); }
.lk-mini path { fill: #E6DDCB; stroke: #CDBFA6; stroke-width: .6; }
.lk-mini rect { fill: rgba(123,160,45,.25); stroke: var(--gruen-tief); stroke-width: 1.6; }
@media (max-width: 700px) {
  .lk-ort--3, .lk-ort--handy-aus, .lk-gebirge, .lk-massstab { display: none; }
  .lk-ort text { font-size: 30px; stroke-width: 7px; }
  .lk-ort--1 text { font-size: 34px; }
  .lk-ort circle { transform-box: fill-box; transform-origin: center; transform: scale(1.8); }
  .lk-laendername text { font-size: 32px; }
  .lk-pin-name { font-size: 44px; stroke-width: 10px; transform: translate(14px, -26px); }
  .lk-pin-name[text-anchor="end"] { transform: translate(-14px, -26px); }
  .lk-pin-gross { transform: scale(1.8); }
  .lk-schild { transform: scale(1.9); }
  .lk-berg { display: none; }
  .lk-ab { stroke-width: 4.5; } .lk-ab-rand { stroke-width: 8; }
  .lk-wasser path { stroke-width: 3.4; }
  .lk-mini { display: none; }
  .landkarte figcaption { position: static; padding: 6px 14px 10px; text-align: right; }
}
.landkarte figcaption { position: absolute; right: 12px; bottom: 8px; font-size: 11px; color: var(--tinte-2); opacity: .8; }
.landkarte figcaption a { color: inherit; }
/* Aufbau beim ersten Auftauchen */
.js .landkarte .lk-maske-kreis { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 2s var(--ease-io) .1s; }
.js .landkarte.ist-da .lk-maske-kreis { transform: scale(1); }
.js .landkarte .lk-ort, .js .landkarte .lk-schilder g, .js .landkarte .lk-gebirge text, .js .landkarte .lk-berg { opacity: 0; transition: opacity .6s var(--ease); transition-delay: calc(600ms + var(--i, 0) * 30ms); }
.js .landkarte.ist-da .lk-ort, .js .landkarte.ist-da .lk-schilder g, .js .landkarte.ist-da .lk-gebirge text, .js .landkarte.ist-da .lk-berg { opacity: 1; }
.js .landkarte .lk-schilder g { transition-delay: 1.3s; }
.js .landkarte .lk-pin-innen { opacity: 0; transform: translateY(-60px) scale(.6); transition: opacity .3s var(--ease), transform .9s var(--ease-feder); transition-delay: calc(1.4s + var(--i) * 160ms); }
.js .landkarte .lk-pin-name { opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(1.8s + var(--i) * 160ms); }
.js .landkarte.ist-da .lk-pin-innen, .js .landkarte.ist-da .lk-pin-name { opacity: 1; transform: none; }
.js .landkarte.ist-da .lk-pin:hover .lk-pin-innen, .js .landkarte.ist-da .lk-pin.ist-aktiv .lk-pin-innen { transform: scale(1.18); transition-delay: 0s; }
.js .landkarte .lk-hof { opacity: 0; transform: scale(.3); transition-delay: calc(1.7s + var(--i, 0) * 160ms); }
.js .landkarte.ist-da .lk-hof { opacity: .9; transform: none; }

/* Ladenkarten */
.ladenkarte { position: relative; padding: clamp(22px, 2.4vw, 30px); border-radius: 20px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 24px 50px -36px rgba(30,23,18,.55); transition: box-shadow .35s var(--ease), transform .35s var(--ease); scroll-margin-top: calc(var(--kopf-h) + 24px); }
.ladenkarte.ist-aktiv { box-shadow: 0 0 0 3px var(--gruen), 0 30px 60px -36px rgba(30,23,18,.6); }
.ladenkarte-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.ladenkarte-nr { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--gruen); color: var(--weiss); font-family: var(--display); font-weight: 900; font-size: 22px; box-shadow: 0 0 0 2px var(--gruen-tief); transform: rotate(-6deg); }
.ladenkarte h3 { font-size: clamp(30px, 2.6vw, 40px); line-height: .9; }
.ladenkarte-kopf p { margin: 4px 0 0; font-size: 15px; color: var(--tinte-2); }
.ladenkarte-text { color: var(--tinte-2); font-size: 17px; margin-bottom: 16px; }
.ladenkarte-daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0 0 16px; padding: 16px 0; border-block: 1px solid var(--linie); }
.ladenkarte-daten div { min-width: 0; }
.ladenkarte-daten dt { font-family: var(--display); font-weight: 700; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-dunkel); white-space: nowrap; }
.ladenkarte-daten dd { margin: 2px 0 0; font-size: 16px; line-height: 1.4; }
.ladenkarte-daten a { color: var(--tinte); font-weight: 700; white-space: nowrap; }
.ladenkarte-umgebung { font-size: 15.5px; color: var(--tinte-2); line-height: 1.5; }
.ladenkarte-umgebung b { display: block; font-family: var(--display); font-weight: 700; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-dunkel); white-space: nowrap; }
@media (max-width: 480px) { .ladenkarte-daten { grid-template-columns: minmax(0, 1fr); } }
/* Ladenkarten als Stapel: beim Scrollen legt sich die nächste Karte über die vorige */
.s-laeden-liste { gap: 24px; }
@media (min-width: 1001px) {
  .s-laeden-liste { gap: 0; }
  .s-laeden-liste .ladenkarte { position: sticky; top: calc(var(--kopf-h) + 24px + var(--stapel, 0) * 20px); margin-bottom: 22vh; transform-origin: 50% 0; transform: scale(calc(1 - var(--weg, 0) * .06)); transition: box-shadow .35s var(--ease); box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 -18px 40px -30px rgba(30,23,18,.35), 0 30px 60px -40px rgba(30,23,18,.55); }
  .s-laeden-liste .ladenkarte.ist-aktiv { box-shadow: 0 0 0 3px var(--gruen), 0 -18px 40px -30px rgba(30,23,18,.35), 0 30px 60px -36px rgba(30,23,18,.6); }
  .s-laeden-liste .ladenkarte::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--nacht); opacity: calc(var(--weg, 0) * .18); pointer-events: none; }
  .s-laeden-liste .ladenkarte:last-of-type { margin-bottom: 40px; }
}
.s-laeden .ladenfinder { margin-top: 6px; padding: 22px; border-radius: 20px; background: var(--gruen-hauch); box-shadow: none; min-width: 0; }
@media (max-width: 480px) { .s-laeden .ladenfinder { padding: 18px 16px; } .s-laeden .ladenfinder label { font-size: 18px; } .s-laeden .ladenfinder input { font-size: 17px; letter-spacing: .06em; padding: 0 14px; } }
/* Handy und Tablet: Postleitzahl-Feld direkt unter der Karte (Startseite: unter den Laden-Reitern), damit man Strecke und Kamerafahrt beim Tippen sieht */
@media (max-width: 1000px) {
  .s-laeden-liste > .laden-reiter { order: -2; }
  .s-laeden-liste > .ladenfinder { order: -1; margin: 0; }
}

.steckbrief--laden dd { font-size: clamp(22px, 1.8vw, 27px); }
.steckbrief--laden dd small a { color: var(--tinte); font-weight: 700; font-size: 16px; }

/* Kurzer Draht zu den Herstellern */
.draht { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 5vw, 88px); margin-top: clamp(64px, 7vw, 104px); padding: clamp(28px, 4vw, 64px); border-radius: 28px; background: radial-gradient(120% 90% at 100% 0%, rgba(123,160,45,.16), transparent 60%), rgba(246,239,226,.04); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.draht .etikett { margin-bottom: 18px; }
.draht-titel { margin: 0 0 18px; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 3.6vw, 54px); line-height: .95; text-transform: uppercase; color: var(--hell); text-wrap: balance; }
.draht-text p:not(.etikett) { margin: 0; max-width: 54ch; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--hell); }
.draht-text p.draht-klein { margin-top: 16px; font-size: 16.5px; color: var(--hell-2); }


/* Instrumente: Hersteller als Aufkleber rund um Adrian */
.marken-ring { position: absolute; inset: calc(var(--kopf-h) + 10px) 0 0 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.marken-ring li { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: clamp(116px, 10vw, 156px); transform: translate(-50%, -50%) rotate(var(--dreh)); pointer-events: auto; animation: marke-rein 1s var(--ease-feder) both; animation-delay: calc(var(--i) * 110ms + 500ms); }
@keyframes marke-rein { from { opacity: 0; transform: translate(calc(-50% + (50 - var(--x)) * 3px), calc(-50% + (50 - var(--y)) * 3px)) scale(.4) rotate(0deg); } }
.marken-ring a { display: grid; justify-items: center; gap: 6px; padding: 14px 12px 10px; border-radius: 14px; background: var(--papier); text-decoration: none; box-shadow: 0 0 0 1px rgba(30,23,18,.08), 0 22px 36px -20px rgba(0,0,0,.85); transition: transform .4s var(--ease-feder), box-shadow .3s var(--ease); }
.marken-ring a:hover, .marken-ring a:focus-visible { transform: translateY(-5px) rotate(calc(var(--dreh) * -1)) scale(1.06); box-shadow: 0 0 0 2px var(--gruen), 0 28px 40px -18px rgba(0,0,0,.9); }
.marken-ring img { width: auto; max-width: 100%; height: 46px; object-fit: contain; }
.marken-ring small { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-dunkel); }
@media (max-width: 900px) {
  .kopf2--marken .kopf2-bild { flex-direction: column; align-items: center; }
  .marken-ring { position: relative; inset: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; padding: 22px var(--rand) 30px; }
  .marken-ring li { position: relative; left: auto; top: auto; width: auto; transform: rotate(var(--dreh)); }
  @keyframes marke-rein { from { opacity: 0; transform: translateY(20px) scale(.9); } }
  .marken-ring img { height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .marken-ring li { animation: none; } }

/* Über mich: Show-Einlage */
.show { position: relative; isolation: isolate; padding-block: var(--abschnitt); background: var(--holz-tief) url("../img/holz-bahn-klein.webp") center top / max(100%, 1100px) auto repeat-y; color: var(--hell); overflow: clip; }
@media (min-width: 900px) { .show { background-image: url("../img/holz-bahn.webp"); } }
.show::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 80% at 28% 40%, rgba(23,17,13,.15), rgba(12,8,6,.86)); }
.show-raster { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px clamp(32px, 5vw, 88px); align-items: center; }
.show-buehne { position: relative; display: grid; justify-items: center; align-items: end; min-height: min(78svh, 720px); }
/* Scheinwerfer: weicher Lichtkegel, der von oben schwenkt und unten ausläuft, mit Lichtfleck am Boden */
.show-licht { position: absolute; inset: -16% -30% -2%; z-index: -1; pointer-events: none; }
.show-kegel, .show-staub { position: absolute; left: 50%; top: 0; width: 100%; height: 100%; translate: -50% 0; transform-origin: 50% 0; animation: kegel 10s ease-in-out infinite alternate; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); }
.show-kegel { filter: blur(18px); }
.show-kegel i, .show-staub { clip-path: polygon(47.8% 0, 52.2% 0, 80% 100%, 20% 100%); }
.show-kegel i { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,243,214,.6), rgba(255,234,186,.3) 35%, rgba(255,228,176,.16) 70%, rgba(255,226,170,.08)); }
.show-staub { opacity: .7; background-image: radial-gradient(circle, rgba(255,246,222,.9) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(255,246,222,.6) 0 .8px, transparent 1.3px), radial-gradient(circle, rgba(255,246,222,.75) 0 1.2px, transparent 1.8px); background-size: 97px 131px, 61px 83px, 149px 173px; background-position: 0 0, 30px 40px, 70px 10px; animation: kegel 10s ease-in-out infinite alternate, staub 26s linear infinite; }
.show-quelle { position: absolute; left: 50%; top: 0; width: 120px; height: 44px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,251,238,.95), rgba(255,236,190,.4) 45%, transparent); filter: blur(3px); }
.show-boden { position: absolute; left: 50%; bottom: 0; width: 78%; height: 15%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,228,175,.42), rgba(255,228,175,.14) 55%, transparent); animation: boden 10s ease-in-out infinite alternate; }
@keyframes kegel { from { rotate: -2.6deg; } to { rotate: 2.6deg; } }
@keyframes boden { from { translate: calc(-50% + 30px) 0; } to { translate: calc(-50% - 30px) 0; } }
@keyframes staub { from { background-position: 0 0, 30px 40px, 70px 10px; } to { background-position: 0 -262px, 30px -126px, 70px -336px; } }
.show-person-schatten { position: relative; display: flex; justify-content: center; max-width: 92%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.show-person { position: relative; display: block; width: auto; max-width: 100%; max-height: min(74svh, 680px); height: auto; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.show-anlaesse { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.show-anlaesse li { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); padding: .5em .9em .44em; border-radius: 6px; background: var(--papier); color: var(--tinte); font-family: var(--display); font-weight: 900; font-size: clamp(16px, 1.4vw, 21px); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 18px 30px -16px rgba(0,0,0,.85); transform: translate(-50%, -50%) rotate(var(--dreh)); }
.show-anlaesse li:nth-child(2n) { background: var(--gruen); color: var(--weiss); box-shadow: 0 0 0 2px var(--gruen-tief), 0 18px 30px -16px rgba(0,0,0,.85); }
.js .show-buehne .show-anlaesse li { opacity: 0; transform: translate(calc(-50% + (50 - var(--x)) * 3px), calc(-50% + (50 - var(--y)) * 3px)) scale(.4); transition: opacity .5s var(--ease), transform 1s var(--ease-feder); transition-delay: calc(var(--i) * 110ms + 400ms); }
.js .show-buehne.ist-da .show-anlaesse li { opacity: 1; transform: translate(-50%, -50%) rotate(var(--dreh)); }
.show-text h2 { font-size: clamp(48px, 6vw, 104px); line-height: .95; color: var(--weiss); margin-bottom: 26px; }
.show-text .einleitung { color: var(--hell); }
.show-text p:not(.etikett):not(.einleitung) { color: var(--hell-2); max-width: 46ch; }
.show-sets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 34px 0 36px; padding: 0; list-style: none; }
.show-sets li { display: grid; justify-items: start; gap: 2px; padding: 22px 20px 20px; border-radius: 18px; background: var(--papier); color: var(--tinte); box-shadow: 0 24px 40px -26px rgba(0,0,0,.9); transition: transform .35s var(--ease-feder); }
.show-sets li:nth-child(2) { background: var(--gruen); color: var(--weiss); transform: rotate(-2deg) translateY(-6px); box-shadow: 0 0 0 2px var(--gruen-tief), 0 24px 40px -22px rgba(0,0,0,.9); }
.show-sets li:hover { transform: translateY(-6px) rotate(-1deg); }
.show-sets b { --z-luft: .12em; font-family: var(--display); font-weight: 900; font-size: clamp(56px, 5.6vw, 84px); line-height: .85; }
.show-sets span { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .1em; text-transform: uppercase; }
.show-sets small { font-size: 15px; line-height: 1.35; color: var(--tinte-2); }
.show-sets li:nth-child(2) small { color: rgba(255,255,255,.9); }
.knopf--gross { min-height: 66px; padding: 0 2em; font-size: 21px; }
.show-hinweis { margin-top: 16px; font-size: 15px; }
@media (max-width: 900px) {
  .show-raster { grid-template-columns: minmax(0, 1fr); }
  .show-buehne { min-height: 0; padding-top: 40px; }
  .show-person { max-height: 62svh; }
}
@media (max-width: 520px) { .show-sets { grid-template-columns: minmax(0, 1fr); } .show-sets li { grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; } .show-sets li:nth-child(2) { transform: none; } }
@media (prefers-reduced-motion: reduce) { .show-kegel, .show-staub, .show-boden { animation: none; } }

/* Über mich: Podcast-Komposition mit Spotify */
.podcast-komposition { position: relative; display: block; width: min(100%, 520px); aspect-ratio: 1 / 1.05; margin-inline: auto; text-decoration: none; isolation: isolate; }
.pk-logo { position: absolute; left: 50%; top: 4%; width: 84%; height: auto; aspect-ratio: 1; transform: translateX(-50%) rotate(-10deg); fill: #1DB954; filter: drop-shadow(0 30px 50px rgba(29,185,84,.25)); transition: transform 1.2s var(--ease); z-index: -1; }
.podcast-komposition:hover .pk-logo { transform: translateX(-50%) rotate(4deg) scale(1.03); }
.pk-person { position: absolute; right: 2%; bottom: 0; width: auto; height: 92%; max-width: 78%; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(0,0,0,.5)); }
.pk-cover { position: absolute; left: 0; bottom: 6%; z-index: 2; display: grid; gap: 8px; width: 46%; padding: 18px 16px 16px; border-radius: 12px; background: var(--holz-tief) url("../img/holz-klein.webp") center / 360px; color: var(--weiss); box-shadow: inset 0 0 0 1px rgba(255,214,160,.18), 0 26px 40px -20px rgba(0,0,0,.9); transform: rotate(-6deg); transition: transform .5s var(--ease-feder); }
.podcast-komposition:hover .pk-cover { transform: rotate(-2deg) translateY(-6px); }
.pk-cover small { justify-self: start; padding: .3em .6em .26em; border-radius: 4px; background: var(--gruen); font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.pk-cover b { font-family: var(--display); font-weight: 900; font-size: clamp(19px, 1.9vw, 26px); line-height: .95; text-transform: uppercase; }
.pk-welle { display: flex; align-items: flex-end; gap: 4px; height: 26px; }
.pk-welle i { flex: 1; height: 30%; border-radius: 2px; background: #1DB954; animation: welle 1.1s ease-in-out infinite alternate; }
.pk-welle i:nth-child(2) { animation-delay: -.3s; } .pk-welle i:nth-child(3) { animation-delay: -.6s; } .pk-welle i:nth-child(4) { animation-delay: -.15s; } .pk-welle i:nth-child(5) { animation-delay: -.8s; } .pk-welle i:nth-child(6) { animation-delay: -.45s; } .pk-welle i:nth-child(7) { animation-delay: -.95s; }
@keyframes welle { from { height: 18%; } to { height: 100%; } }
.pk-folgen { position: absolute; right: 0; top: 8%; z-index: 2; display: grid; justify-items: center; padding: 14px 18px 12px; border-radius: 14px; background: var(--papier); color: var(--tinte); font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; transform: rotate(6deg); box-shadow: 0 22px 36px -18px rgba(0,0,0,.85); }
.pk-folgen b { --z-luft: .12em; font-size: 54px; font-weight: 900; line-height: .85; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .pk-welle i { animation: none; height: 60%; } }

/* Kontakt: Anfrage in vier Schritten */
.anfrage-bereich { background: var(--papier); }
.anfrage-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.anfrage { display: grid; gap: clamp(22px, 2.4vw, 32px); }
.anfrage-block { display: grid; gap: 18px; margin: 0; padding: clamp(22px, 2.6vw, 34px); border: 0; border-radius: 24px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 30px 60px -46px rgba(30,23,18,.5); }
.anfrage-block .anfrage-titel { display: flex; align-items: center; gap: 16px; padding: 0; margin-bottom: 6px; font-family: var(--display); font-weight: 900; font-size: clamp(24px, 2.2vw, 32px); line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.anfrage-block .anfrage-titel small { display: block; margin-top: 6px; font-family: var(--text); font-weight: 400; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--tinte-2); }
.anfrage-nr { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--creme); color: var(--tinte); font-size: 22px; transition: background-color .3s var(--ease), color .3s var(--ease); }
.anfrage-block.ist-fertig .anfrage-nr { background: var(--gruen); color: var(--weiss); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kachel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px 16px 15px; border-radius: 16px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); cursor: pointer; transition: box-shadow .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); }
.kachel:hover { box-shadow: inset 0 0 0 2px var(--gruen-tief); }
.kachel:active { transform: scale(.98); }
.kachel input { position: absolute; opacity: 0; pointer-events: none; }
.kachel-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--weiss); color: var(--gruen-dunkel); box-shadow: 0 0 0 1px rgba(30,23,18,.06); }
.kachel-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kachel b { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; }
.kachel small { font-size: 14px; line-height: 1.35; color: var(--tinte-2); }
.kachel--ort { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 18px 46px 16px 18px; }
.kachel-haken { position: absolute; right: 12px; top: 12px; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--linie); background: var(--weiss); transition: all .2s var(--ease); }
.kachel-haken::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid var(--weiss); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--ease-feder); }
.kachel:has(input:checked) { background: var(--gruen-hauch); box-shadow: inset 0 0 0 2px var(--gruen-tief); }
.kachel:has(input:checked) .kachel-ico { background: var(--gruen); color: var(--weiss); }
.kachel input:checked ~ .kachel-haken { background: var(--gruen-tief); box-shadow: none; }
.kachel input:checked ~ .kachel-haken::after { transform: rotate(45deg) scale(1); }
.kachel:has(input:focus-visible) { outline: 3px solid var(--gruen); outline-offset: 2px; }
.anfrage .feld label { font-size: 16px; }
.anfrage .feld input, .anfrage .feld textarea { background: var(--papier); border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--linie); }
.anfrage .feld input:focus, .anfrage .feld textarea:focus { background: var(--weiss); box-shadow: inset 0 0 0 2px var(--gruen-tief), 0 0 0 4px rgba(123,160,45,.18); }
.nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.anfrage-senden { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.anfrage-senden .hinweis-klein { flex: 1 1 260px; margin: 0; }
.anfrage-seite { position: sticky; top: calc(var(--kopf-h) + 24px); display: grid; gap: 14px; }
.anfrage-karte { position: relative; overflow: hidden; padding: 26px 26px 24px; border-radius: 24px; background: var(--holz-tief) url("../img/holz-klein.webp") center / cover; color: var(--hell); isolation: isolate; }
.anfrage-karte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(23,17,13,.4), rgba(15,10,7,.85)); }
.anfrage-foto { position: absolute; right: -14px; bottom: -40px; width: 41%; height: auto; z-index: -1; filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
.anfrage-gruss { max-width: 24ch; margin: 0 0 18px; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.1; text-transform: uppercase; color: var(--weiss); }
.anfrage-stand { display: grid; gap: 10px; max-width: 60%; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--hell-2); }
.anfrage-stand li { display: flex; align-items: center; gap: 10px; }
.anfrage-stand li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(246,239,226,.35); transition: all .25s var(--ease); }
.anfrage-stand li.ist-fertig { color: var(--weiss); }
.anfrage-stand li.ist-fertig::before { background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: none; }
@media (max-width: 1000px) { .anfrage-raster { grid-template-columns: minmax(0, 1fr); } .anfrage-seite { position: static; } }
@media (max-width: 480px) { .kacheln { grid-template-columns: minmax(0, 1fr); } }

/* Termine: Jahresband */
.jahr { --stammtisch: var(--gruen); --seminar: #E0A53A; --workshop: #6FB2B0; --festival: var(--orange); --infoabend: #C9B7E8; margin-bottom: clamp(48px, 6vw, 88px); }
.jahr-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.jahr-filter button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(246,239,226,.1); color: var(--hell); font: 800 14.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background-color .2s var(--ease); }
.jahr-filter button:hover { background: rgba(246,239,226,.2); }
.jahr-filter button[aria-pressed="true"] { background: var(--papier); color: var(--tinte); }
.jahr-farbe { width: 10px; height: 10px; border-radius: 50%; background: var(--farbe, var(--gruen)); }
[data-art="Stammtisch"] { --farbe: var(--stammtisch); } [data-art="Seminar"] { --farbe: var(--seminar); } [data-art="Workshop"] { --farbe: var(--workshop); } [data-art="Festival"] { --farbe: var(--festival); } [data-art="Infoabend"] { --farbe: var(--infoabend); }
.jahr-band { position: relative; height: 520px; padding-inline: 8px; border-radius: 24px; background: rgba(15,10,7,.38); box-shadow: inset 0 0 0 1px var(--linie-dunkel); }
.jahr-monate, .jahr-pins { position: absolute; inset: 0 32px; margin: 0; padding: 0; list-style: none; }
.jahr-monate li { position: absolute; top: 0; bottom: 0; left: var(--pos); border-left: 1px dashed rgba(246,239,226,.12); }
.jahr-monate span { position: absolute; bottom: 14px; left: 8px; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--hell-2); background: transparent; }
.jahr-monate small { position: absolute; bottom: 34px; left: 8px; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .1em; color: var(--gruen-licht); }
.jahr-linie { position: absolute; left: 32px; right: 32px; top: 44%; height: 3px; margin-top: 14px; border-radius: 2px; background: linear-gradient(90deg, var(--gruen), var(--gruen-licht)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.6s var(--ease); }
.jahr.ist-da .jahr-linie, .ohne-quer .jahr-linie { transform: none; }
.jahr-heute { position: absolute; top: 44%; left: 32px; right: 32px; height: 0; pointer-events: none; }
.jahr-heute::before, .jahr-heute small { margin-left: var(--pos); }
.jahr-heute small { position: absolute; left: 0; top: 26px; transform: translateX(-50%); display: none; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-licht); }
.jahr-heute::before { content: ""; position: absolute; left: -6px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--gruen-licht); box-shadow: 0 0 0 6px rgba(169,199,112,.2); animation: puls 2s ease-out infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(169,199,112,.5); } 100% { box-shadow: 0 0 0 14px rgba(169,199,112,0); } }
.jahr-pin { position: absolute; left: var(--pos); top: 44%; width: 0; height: 0; margin-top: 15px; }
.jahr-pin a { position: absolute; left: 0; top: 0; text-decoration: none; color: var(--tinte); }
.jahr-punkt { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--farbe); box-shadow: 0 0 0 4px rgba(15,10,7,.6), 0 0 0 6px var(--farbe); transition: transform .3s var(--ease-feder); }
.jahr-karte { position: absolute; left: -14px; display: grid; gap: 2px; width: max-content; max-width: 178px; padding: 10px 13px 11px; border-radius: 12px; background: var(--papier); box-shadow: inset 4px 0 0 var(--farbe), 0 18px 30px -16px rgba(0,0,0,.85); transition: transform .3s var(--ease-feder), box-shadow .3s var(--ease); }
.jahr-karte::before { content: ""; position: absolute; left: 13px; width: 2px; background: rgba(246,239,226,.35); }
.jahr-pin--o1 .jahr-karte { bottom: 22px; } .jahr-pin--o1 .jahr-karte::before { top: 100%; height: 13px; }
.jahr-pin--o2 .jahr-karte { bottom: 124px; } .jahr-pin--o2 .jahr-karte::before { top: 100%; height: 115px; }
.jahr-pin--u1 .jahr-karte { top: 22px; } .jahr-pin--u1 .jahr-karte::before { bottom: 100%; height: 13px; }
.jahr-pin--u2 .jahr-karte { top: 132px; } .jahr-pin--u2 .jahr-karte::before { bottom: 100%; height: 123px; }
.jahr-pin--rechts .jahr-karte { left: auto; right: -14px; } .jahr-pin--rechts .jahr-karte::before { left: auto; right: 13px; }
.jahr-karte small { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2) !important; }
.jahr-karte b { font-family: var(--display); font-weight: 900; font-size: 18px; line-height: 1; text-transform: uppercase; color: var(--tinte) !important; }
.jahr-karte span { font-size: 14px; line-height: 1.3; color: var(--tinte-2) !important; }
.jahr-pin a:hover .jahr-karte, .jahr-pin a:focus-visible .jahr-karte { transform: translateY(-4px) scale(1.04); box-shadow: inset 4px 0 0 var(--farbe), 0 0 0 2px var(--farbe), 0 24px 36px -16px rgba(0,0,0,.9); }
.jahr-pin a:hover .jahr-punkt { transform: scale(1.3); }
.js .jahr .jahr-pin { opacity: 0; transform: translateY(-14px); transition: opacity .5s var(--ease), transform .7s var(--ease-feder); transition-delay: calc(var(--i) * 120ms + 600ms); }
.js .jahr.ist-da .jahr-pin, .ohne-quer .jahr .jahr-pin { opacity: 1; transform: none; }
.jahr-pin.ist-aus { opacity: .18 !important; filter: grayscale(1); }
.ticket.ist-aus { display: none; }
.ticket:target .ticket-flaeche { box-shadow: 0 0 0 3px var(--gruen-licht); }
@media (max-width: 900px) {
  .jahr-band { height: auto; padding: 22px 18px 22px 30px; }
  .jahr-monate, .jahr-linie, .jahr-heute { display: none; }
  .jahr-pins { position: relative; inset: auto; display: grid; gap: 12px; border-left: 3px solid var(--gruen); padding-left: 22px; }
  .jahr-pin { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 0; }
  .jahr-pin a { position: relative; display: block; }
  .jahr-punkt { left: -34px; top: 16px; }
  .jahr-pin .jahr-karte { position: relative; inset: auto !important; max-width: none; width: 100%; }
  .jahr-karte::before { display: none; }
}
.s-hersteller-raster > li { min-width: 0; }
.s-hersteller-raster--klein .hersteller-fuss { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px 16px; }
.s-hersteller-raster--klein .hersteller small { font-size: 14px; }

/* Ladenkarten: echtes Ladenfoto oben auf der Karte */
.ladenkarte-foto { --rand: clamp(22px, 2.4vw, 30px); position: relative; margin: calc(var(--rand) * -1) calc(var(--rand) * -1) 18px; height: clamp(150px, 22vh, 230px); border-radius: 20px 20px 0 0; overflow: hidden; background: var(--creme-dunkel, #e0d5c8); }
.ladenkarte-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 55%; transform: scale(1.001); transition: transform .9s var(--ease); }
.ladenkarte-foto::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(30,23,18,.18)); pointer-events: none; }
.ladenkarte:hover .ladenkarte-foto img { transform: scale(1.035); }
.ladenkarte-foto + .ladenkarte-kopf { position: relative; padding-left: 72px; min-height: 34px; }
/* Nummer genau zur Hälfte im Foto: Mitte des Kreises liegt auf der Fotokante (Foto hat 18px Abstand nach unten) */
.ladenkarte-foto + .ladenkarte-kopf .ladenkarte-nr { position: absolute; z-index: 1; left: 0; top: -44px; transform: none; box-shadow: 0 0 0 4px var(--weiss), 0 0 0 6px var(--gruen-tief), 0 10px 18px -8px rgba(30,23,18,.5); }
#laden-creuzburg .ladenkarte-foto img { object-position: 35% 55%; }
#laden-trabelsdorf .ladenkarte-foto img { object-position: 45% 28%; }
@media (max-width: 1000px) { .ladenkarte-foto { height: auto; aspect-ratio: 16 / 9; } }

/* Ausverkauft: der ganze Abriss wird rot und führt zur Warteliste */
.ticket--aus, .termin, .jahr, .seite-warteliste { --rot: #C0302A; --rot-tief: #9E2620; }
.ticket-abriss--aus { position: relative; justify-content: space-between; gap: 12px; margin-top: -2px; padding: 0 22px 0 26px; border-top: 2px dashed rgba(255,255,255,.55); border-radius: 0 0 16px 16px; background: var(--rot); color: var(--weiss); overflow: hidden; }
.ticket-abriss--aus::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 10px, transparent 10px 20px); pointer-events: none; }
.ticket-aus { position: relative; display: grid; gap: 3px; }
.ticket-aus b { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: .9; letter-spacing: .08em; text-transform: uppercase; }
.ticket-aus small { font-size: 14px; font-weight: 600; opacity: .92; }
.ticket-abriss--aus .pfeil { position: relative; flex: none; width: 40px; height: 40px; padding: 11px; border-radius: 50%; background: rgba(255,255,255,.18); transition: background-color .25s var(--ease), transform .3s var(--ease); }
.ticket--aus a.ticket-flaeche:hover .ticket-abriss--aus .pfeil, .ticket--aus a.ticket-flaeche:focus-visible .ticket-abriss--aus .pfeil { background: var(--weiss); color: var(--rot); transform: translateX(3px); }
.ticket--aus .ticket-datum { background: linear-gradient(180deg, rgba(23,17,13,.12), rgba(23,17,13,.12)), var(--gruen); }
.termin-aus { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--rot); font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--weiss) !important; text-decoration: none; }
.jahr-aus { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: var(--rot); color: var(--weiss); font-style: normal; font-size: 11px; letter-spacing: .1em; vertical-align: 1px; }

/* Warteliste */
.kacheln--termine { grid-template-columns: minmax(0, 1fr); }
.kachel--termin { grid-template-columns: auto minmax(0, 1fr); padding: 14px 48px 14px 14px; }
.kachel-datum { grid-row: 1 / 3; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 14px; background: var(--rot); color: var(--weiss); font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.kachel-datum b { font-size: 28px; font-weight: 900; letter-spacing: 0; }
.kachel--termin:has(input:checked) .kachel-datum { background: var(--gruen-tief); }
.warteliste-leer { margin: 0; padding: 18px 20px; border-radius: 14px; background: var(--papier); font-size: 17px; }
.warteliste-fehler-termin { display: none; margin: 0; }
[data-block="termin"].hat-fehler .warteliste-fehler-termin { display: block; }
.zaehler { display: inline-flex; align-items: center; gap: 10px; }
.zaehler button { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); font: 700 26px/1 var(--text); color: var(--tinte); cursor: pointer; transition: background-color .2s var(--ease), transform .15s var(--ease); }
.zaehler button:hover { background: var(--gruen-hauch); box-shadow: inset 0 0 0 2px var(--gruen-tief); }
.zaehler button:active { transform: scale(.94); }
.zaehler input { width: 76px; height: 64px; border: 0; border-radius: 16px; background: var(--gruen-hauch); box-shadow: inset 0 0 0 2px var(--gruen-tief); text-align: center; font-family: var(--display); font-weight: 900; font-size: 34px; color: var(--tinte); -moz-appearance: textfield; }
.zaehler input::-webkit-outer-spin-button, .zaehler input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zaehler-wort { font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; }
.warteliste-ablauf { display: grid; gap: 16px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: wl; }
.warteliste-ablauf li { position: relative; padding-left: 44px; font-size: 16px; line-height: 1.45; color: var(--hell-2); counter-increment: wl; }
.warteliste-ablauf li::before { content: counter(wl); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gruen); color: var(--weiss); font-family: var(--display); font-weight: 900; font-size: 17px; }
.warteliste-ablauf b { display: block; color: var(--weiss); font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .02em; }
.warteliste-tel { margin: 0; font-size: 15px; color: var(--hell-2); }
.warteliste-tel a { font-family: var(--display); font-weight: 900; font-size: 26px; color: var(--weiss); text-decoration: none; }
.warteliste-platz { display: grid; gap: 4px; justify-items: start; }
.warteliste-platz b { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; text-transform: uppercase; }
@media (max-width: 600px) { .show-anlaesse li { left: clamp(58px, calc(var(--x) * 1%), calc(100% - 58px)); font-size: 13.5px; } }

/* Podcast: die neuesten Folgen als Playlist */
.podcast-neu-titel { margin: 26px 0 12px; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-licht); }
.podcast-folgen { display: grid; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; counter-reset: none; }
.podcast-folgen a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 14px 12px 12px; border-radius: 16px; background: rgba(246,239,226,.06); box-shadow: inset 0 0 0 1px var(--linie-dunkel); color: var(--hell) !important; text-decoration: none; transition: background-color .25s var(--ease), transform .3s var(--ease); }
.podcast-folgen a:hover, .podcast-folgen a:focus-visible { background: rgba(246,239,226,.12); transform: translateX(4px); }
.pf-nr { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 12px; background: var(--gruen); color: var(--weiss); font-family: var(--display); font-weight: 900; font-size: 26px; line-height: .9; }
.pf-nr small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.podcast-folgen li:not(:first-child) .pf-nr { background: rgba(246,239,226,.12); }
.pf-text { display: grid; gap: 4px; min-width: 0; }
.pf-text b { font-size: 17.5px; line-height: 1.3; color: var(--weiss); }
.pf-text small { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--hell-2); }
.pf-neu { padding: 2px 8px; border-radius: 999px; background: #1ED760; color: #0B2A14; font-style: normal; font-weight: 800; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.pf-play { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #1ED760; transition: transform .3s var(--ease-feder); }
.pf-play svg { width: 18px; height: 18px; fill: #0B2A14; margin-left: 2px; }
.podcast-folgen a:hover .pf-play { transform: scale(1.1); }
@media (max-width: 420px) { .podcast-folgen a { gap: 12px; } .pf-nr { width: 50px; height: 50px; font-size: 22px; } .pf-play { width: 36px; height: 36px; } }

/* Abgesagt: grauer Abriss, nicht anklickbar */
.ticket--abgesagt .ticket-flaeche { filter: drop-shadow(0 26px 30px rgba(0,0,0,.35)) grayscale(.6); }
.ticket--abgesagt .ticket-titel { text-decoration: line-through; text-decoration-thickness: 3px; }
.ticket-abriss--abgesagt { margin-top: -2px; border-top: 2px dashed rgba(255,255,255,.4); border-radius: 0 0 16px 16px; background: var(--tinte); color: var(--weiss); }
.ticket-abriss--abgesagt b { font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: .08em; text-transform: uppercase; }
.ticket-abriss--abgesagt small { font-size: 14px; opacity: .85; }
.jahr-aus--abgesagt { background: var(--tinte); }
.termin-aus--abgesagt { background: var(--tinte); }

/* Kurzer Draht: Handy mit WhatsApp-Chat, der beim Hinscrollen live abläuft */
.handy-buehne { --wa-gruen: #1DAA61; --wa-ich: #D9FDD3; --wa-grau: #667781; position: relative; margin: 0; display: grid; justify-items: center; gap: 14px; }
.handy-buehne::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: 130%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(123,160,45,.28), transparent 62%); pointer-events: none; }
.handy { width: clamp(270px, 24vw, 320px); aspect-ratio: 9 / 18.6; padding: 11px; border-radius: 48px; background: linear-gradient(145deg, #3A3A3C, #1C1C1E 40%, #2C2C2E); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.6), 0 50px 80px -30px rgba(0,0,0,.9); rotate: 2deg; }
.handy-schirm { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 38px; background: #EFEAE2; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; color: #111B21; }
.handy-status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 6px 26px 0 30px; background: #F7F7F7; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.handy-insel { position: absolute; left: 50%; top: 9px; width: 88px; height: 25px; translate: -50% 0; border-radius: 20px; background: #000; }
.handy-icons { display: flex; align-items: center; gap: 5px; }
.handy-icons svg { height: 10.5px; width: auto; fill: currentColor; }
.wa-kopf { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px 8px; background: #F7F7F7; border-bottom: 1px solid rgba(0,0,0,.08); }
.wa-zurueck { width: 11px; height: 19px; fill: none; stroke: var(--wa-gruen); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-right: 2px; }
.wa-bild { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #DFE5E7; }
.wa-bild svg { width: 20px; height: 20px; fill: none; stroke: #54656F; stroke-width: 1.6; stroke-linejoin: round; }
.wa-wer { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.wa-wer b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-wer small { font-size: 11.5px; color: var(--wa-grau); }
.wa-wer small.ist-schreibt { color: var(--wa-gruen); }
.wa-icon { width: 21px; height: 21px; fill: none; stroke: var(--wa-gruen); stroke-width: 1.7; stroke-linejoin: round; }
.wa-verlauf { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 10px 9px 8px; overflow: hidden; background-color: #EFEAE2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.045' stroke-width='1.2'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M38 8l6 6m0-6l-6 6M10 40q5-6 10 0t10 0M44 38h8v8h-8z'/%3E%3C/g%3E%3C/svg%3E"); }
.wa-tag { align-self: center; margin-bottom: 4px; padding: 3px 9px; border-radius: 7px; background: rgba(255,255,255,.9); font-size: 11px; color: var(--wa-grau); box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-msg { position: relative; max-width: 82%; padding: 5px 8px 4px; border-radius: 8px; font-size: 13.5px; line-height: 1.32; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-msg p { margin: 0; }
.wa-msg--ich { align-self: flex-end; background: var(--wa-ich); border-top-right-radius: 2px; }
.wa-msg--die { align-self: flex-start; background: #FFFFFF; border-top-left-radius: 2px; }
.wa-msg--ich + .wa-msg--ich, .wa-msg--die + .wa-msg--die { border-radius: 8px; }
.wa-zeit { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 1px; font-size: 10.5px; color: var(--wa-grau); }
.wa-haken { width: 15px; height: 10px; fill: none; stroke: #8696A0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.wa-msg.ist-gelesen .wa-haken, .wa-statisch .wa-haken { stroke: #53BDEB; }
.wa-msg--video { padding: 3px; }
.wa-video { position: relative; display: grid; place-items: center; width: 168px; aspect-ratio: 4 / 3; border-radius: 6px; background: linear-gradient(135deg, rgba(0,0,0,.15), rgba(0,0,0,.55)), url("../img/instrumente/harmonika-frei-900.webp") 60% 40% / 150% auto no-repeat, #6B4A32; }
.wa-video svg { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: rgba(0,0,0,.5); fill: #FFF; }
.wa-video em { position: absolute; left: 7px; bottom: 5px; font-style: normal; font-size: 11px; font-weight: 600; color: #FFF; }
.wa-msg--video .wa-zeit { position: absolute; right: 9px; bottom: 7px; color: #FFF; }
.wa-system { align-self: center; margin: 4px 0; }
.wa-system span { display: inline-block; padding: 4px 10px; border-radius: 7px; background: #FFF6C5; font-size: 11.5px; font-weight: 600; color: #54656F; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-tippt { align-self: flex-start; display: inline-flex; gap: 4px; padding: 11px 12px; border-radius: 8px; border-top-left-radius: 2px; background: #FFF; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa-tippt i { width: 6px; height: 6px; border-radius: 50%; background: #8696A0; animation: wa-punkt 1s ease-in-out infinite; }
.wa-tippt i:nth-child(2) { animation-delay: .15s; } .wa-tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-punkt { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes wa-rein { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
.wa-msg.ist-neu, .wa-system.ist-neu, .wa-tippt { animation: wa-rein .32s cubic-bezier(.2, .9, .3, 1.2) both; }
.wa-versteckt { display: none !important; }
.wa-eingabe { display: flex; align-items: center; gap: 8px; padding: 7px 9px 18px; background: #F7F7F7; border-top: 1px solid rgba(0,0,0,.06); }
.wa-plus { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--wa-gruen); stroke-width: 2; stroke-linecap: round; }
.wa-feld { position: relative; flex: 1; min-width: 0; min-height: 32px; display: flex; align-items: center; padding: 5px 11px; border-radius: 17px; background: #FFF; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); font-size: 13.5px; line-height: 1.3; }
.wa-platzhalter { color: #A0A8AE; }
.wa-cursor { display: none; width: 1.5px; height: 16px; margin-left: 1px; background: var(--wa-gruen); animation: wa-blink 1s steps(1) infinite; }
.wa-feld.ist-aktiv .wa-cursor { display: inline-block; }
@keyframes wa-blink { 50% { opacity: 0; } }
.wa-senden { position: relative; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; }
.wa-senden svg { position: absolute; width: 20px; height: 20px; transition: opacity .2s, transform .25s; }
.wa-mic { fill: none; stroke: var(--wa-gruen); stroke-width: 1.8; stroke-linecap: round; }
.wa-pfeil { fill: #FFF; opacity: 0; transform: scale(.5); }
.wa-senden.ist-bereit { background: var(--wa-gruen); }
.wa-senden.ist-bereit .wa-mic { opacity: 0; transform: scale(.5); }
.wa-senden.ist-bereit .wa-pfeil { opacity: 1; transform: none; }
.handy-nochmal { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(246,239,226,.08); color: var(--hell-2); font: 600 14px var(--text); cursor: pointer; transition: background-color .2s, color .2s; }
.handy-nochmal:hover { background: rgba(246,239,226,.16); color: var(--weiss); }
.handy-nochmal svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ruhig .handy-nochmal { display: none; }
@media (max-width: 900px) { .draht { grid-template-columns: minmax(0, 1fr); } .handy { rotate: 0deg; } }

/* Herstellerseite: Logo als runde Plakette auf der Kante zwischen Text und Foto */
.kopf2-plakette { position: absolute; z-index: 4; left: 50%; bottom: 9%; width: clamp(150px, 13vw, 184px); aspect-ratio: 1; translate: -50% 0; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFDF8, #F3ECDD 70%); box-shadow: 0 0 0 1px rgba(30,23,18,.08), inset 0 0 0 7px #FFFDF8, inset 0 0 0 8.5px rgba(150,115,60,.55), 0 26px 40px -16px rgba(0,0,0,.7); rotate: -8deg; animation: plakette-rein 1s var(--ease-feder) .6s both; }
.kp-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: plakette-dreh 60s linear infinite; }
.kp-ring text { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; fill: #7A5A33; }
.kp-logo { position: relative; width: 58%; max-height: 34%; height: auto; object-fit: contain; }
@keyframes plakette-rein { from { opacity: 0; scale: .6; rotate: -30deg; } to { opacity: 1; scale: 1; rotate: -8deg; } }
@keyframes plakette-dreh { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .kopf2-plakette, .kp-ring { animation: none; } }
@media (max-width: 900px) { .kopf2-plakette { left: auto; right: var(--rand); bottom: auto; top: calc(75vw - 96px); translate: none; width: 128px; } }
.werkzeug-karte--qa .werkzeug-kopf img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 8px 16px -8px rgba(30,23,18,.6); rotate: -6deg; }

/* Hinweise wie „Partnerlink“ auf dunklem Grund lesbar */
.kopf2 .hinweis-klein, .flaeche-holz .hinweis-klein, .flaeche-nacht .hinweis-klein { color: var(--hell-2); }
.code-hinweis { margin: 10px 0 0; font-size: 13.5px; color: var(--tinte-2); }
.handy-hinweis { font-size: 13px; color: var(--hell-2); }

/* Ticket: knappe Plätze aus DITIX */
.ticket-preis { display: grid; gap: 2px; }
.ticket-knapp { font-family: var(--text); font-weight: 700; font-size: 13px; letter-spacing: 0; color: var(--rot, #C0302A); }
.ticket-knapp::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: knapp-puls 1.6s ease-in-out infinite; }
@keyframes knapp-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ticket-knapp::before { animation: none; } }

/* Lernen: Kinder-Hinweis */
.kinder-hinweis { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 22px; align-items: center; margin-top: 26px; padding: 18px 24px; border-radius: 16px; background: #fff; border: 1.5px dashed var(--gruen); }
.kinder-hinweis b { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 22px; color: var(--gruen-dunkel); line-height: 1; }
.kinder-hinweis p { margin: 0; }
@media (max-width: 760px) { .kinder-hinweis { grid-template-columns: 1fr; } }

/* Modellkarten: Preisschild als Anhänger an der Ecke */
.modell { position: relative; }
.modell-preis { position: absolute; top: 16px; right: 14px; z-index: 2; display: grid; justify-items: end; gap: 1px;
  margin: 0; padding: 9px 14px 9px 30px; color: #3a2818 !important; line-height: 1.05;
  background: linear-gradient(180deg, #f6e6bf, #ecd49c); border-radius: 4px 8px 8px 4px;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  filter: drop-shadow(0 6px 8px rgba(30,23,18,.22)); transform: rotate(3deg); transform-origin: 0 50%;
  transition: transform .5s var(--ease); }
.modell-preis::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--papier, #faf6ee); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.modell-preis b { font-family: var(--display); font-weight: 900; font-size: 21px; letter-spacing: .01em; white-space: nowrap; }
.modell-preis small { font-size: 13px; font-weight: 600; white-space: nowrap; opacity: .85; }
.modell-preis--frage b { font-size: 16px; }
.modell:hover .modell-preis { transform: rotate(-2deg); }
.modell--ohne-bild .modell-preis { position: static; justify-self: start; transform: none; }
@media (prefers-reduced-motion: reduce) { .modell-preis, .modell:hover .modell-preis { transition: none; transform: none; } }

/* Instrumente: Preisleiter aller Hersteller */
.preisleiter { margin: clamp(26px, 4vw, 44px) 0 0; padding: clamp(18px, 3vw, 34px); border-radius: 22px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 30px 50px -40px rgba(30,23,18,.6); }
/* Legende: was Punkt und Balken bedeuten */
.pl-legende { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 22px; font-size: 15px; color: var(--tinte-2); }
.pl-legende > span { display: inline-flex; align-items: center; gap: 10px; }
.pl-l-punkt { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--weiss); box-shadow: 0 0 0 3px var(--gruen-dunkel); }
.pl-l-band { width: 30px; height: 10px; flex: none; border-radius: 5px; background: linear-gradient(90deg, #9cc14a, var(--gruen-dunkel)); }
.pl-l-hinweis { flex-basis: 100%; font-weight: 600; color: var(--tinte); }
.pl-l-tipp { display: none; }
@media (hover: none) { .pl-l-maus { display: none; } .pl-l-tipp { display: inline; } }
.preisleiter ul { list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 6px; }
.preisleiter li { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; gap: 22px; padding: 12px 10px; border-radius: 12px; transition: background .25s; }
.preisleiter li:hover { background: var(--papier); }
.pl-name { color: inherit; text-decoration: none; }
.pl-name b { display: block; font-family: var(--display); font-weight: 900; font-size: 24px; text-transform: uppercase; line-height: 1; transition: color .2s; }
.pl-name:hover b { color: var(--gruen-tief); }
.pl-name small { display: block; margin-top: 4px; font-size: 14px; color: var(--tinte-2); white-space: nowrap; }
.pl-skala { position: relative; height: 22px; margin-left: calc(230px + 32px); margin-right: 10px; border-bottom: 1px solid var(--linie); }
.pl-skala span { position: absolute; bottom: 4px; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: var(--tinte-2); white-space: nowrap; }
.pl-skala span::after { content: " €"; }
.pl-spur { position: relative; height: 34px; background: linear-gradient(90deg, var(--linie) 1px, transparent 1px) 0 0 / calc(100% / var(--teile, 4)) 100%; }
.pl-spur::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--creme); }
.pl-band { position: absolute; top: 50%; height: 12px; margin-top: -6px; border-radius: 6px; background: linear-gradient(90deg, #9cc14a, var(--gruen-dunkel)); opacity: .55; transition: opacity .25s; }
.preisleiter li:hover .pl-band { opacity: .8; }
/* Eine Modellreihe: Punkt, Spanne und Infokärtchen liegen auf einer eigenen Ebene über der Spur */
.pl-reihe { position: absolute; inset: 0; pointer-events: none; color: inherit; text-decoration: none; outline: none; }
.pl-punkt { position: absolute; top: calc(50% + var(--y, 0px)); left: var(--ab); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--weiss); box-shadow: 0 0 0 3px var(--gruen-dunkel), 0 3px 6px rgba(30,23,18,.25); pointer-events: auto; cursor: pointer; transition: transform .2s var(--ease), background-color .2s; }
.pl-punkt::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.pl-strecke { position: absolute; top: 50%; left: var(--ab); right: calc(100% - var(--bis)); height: 6px; margin-top: -3px; border-radius: 3px; background: var(--tinte); opacity: 0; transform-origin: left center; transform: scaleX(.2); transition: opacity .2s, transform .35s var(--ease); }
.pl-tipp { position: absolute; z-index: 6; bottom: calc(50% + 20px - var(--y, 0px)); left: var(--ab); width: max-content; max-width: min(280px, 80vw); display: grid; gap: 3px; padding: 12px 15px 13px; border-radius: 12px; background: var(--nacht); color: var(--hell); font-size: 14px; line-height: 1.35; text-align: left; box-shadow: 0 18px 30px -12px rgba(10,6,4,.6); opacity: 0; visibility: hidden; transform: translate(var(--pl-x, -50%), 6px); transition: opacity .18s, transform .25s var(--ease), visibility 0s .25s; pointer-events: none; }
.pl-tipp::after { content: ""; position: absolute; top: 100%; left: var(--pfeil, 50%); margin-left: -7px; border: 7px solid transparent; border-top-color: var(--nacht); }
.pl-tipp b { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; color: var(--weiss); }
.pl-tipp > span { color: var(--hell-2); }
.pl-tipp em { font-style: normal; font-weight: 700; color: var(--gruen-licht); }
.pl-tipp small { font-size: 13px; color: var(--hell-2); }
.pl-tipp small::after { content: " →"; }
.pl-reihe--links { --pl-x: -22px; --pfeil: 22px; }
.pl-reihe--rechts { --pl-x: calc(-100% + 22px); --pfeil: calc(100% - 22px); }
.pl-reihe:hover, .pl-reihe:focus-visible, .pl-reihe.ist-offen { z-index: 5; }
.pl-reihe:hover .pl-punkt, .pl-reihe:focus-visible .pl-punkt, .pl-reihe.ist-offen .pl-punkt { transform: scale(1.3); background: var(--gruen-licht); }
.pl-reihe:focus-visible .pl-punkt { box-shadow: 0 0 0 3px var(--gruen-dunkel), 0 0 0 6px var(--weiss), 0 0 0 8px var(--tinte); }
.pl-reihe:hover .pl-strecke, .pl-reihe:focus-visible .pl-strecke, .pl-reihe.ist-offen .pl-strecke { opacity: 1; transform: none; }
.pl-reihe:hover .pl-tipp, .pl-reihe:focus-visible .pl-tipp, .pl-reihe.ist-offen .pl-tipp { opacity: 1; visibility: visible; transform: translate(var(--pl-x, -50%), 0); transition: opacity .18s, transform .25s var(--ease), visibility 0s; }
.pl-fuss { margin: 18px 10px 0; font-size: 14px; color: var(--tinte-2); }
.js .preisleiter li[data-zeigen] .pl-band { transform-origin: left center; transform: scaleX(0); transition: transform 1.1s var(--ease) .15s, opacity .25s; }
.js .preisleiter li[data-zeigen].ist-da .pl-band { transform: none; }
@media (max-width: 760px) {
  .preisleiter li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 4px; }
  .pl-skala { margin-left: 4px; margin-right: 4px; }
  .pl-tipp { max-width: min(250px, 72vw); }
}
@media (prefers-reduced-motion: reduce) { .js .preisleiter li[data-zeigen] .pl-band { transform: none; transition: none; } .pl-tipp, .pl-strecke, .pl-punkt { transition: none; } }
.preis-wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(18px, 3vw, 28px); }
@media (max-width: 900px) { .preis-wege { grid-template-columns: minmax(0, 1fr); } }
.preis-weg { display: grid; align-content: start; gap: 8px; padding: 22px 24px; border-radius: 18px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.06); }
.preis-weg b { font-family: var(--display); font-weight: 900; font-size: 24px; text-transform: uppercase; line-height: 1; color: var(--gruen-dunkel); }
.preis-weg p { margin: 0; font-size: 17px; }

/* ==========================================================================
   Kopf-Typen (November 2026): nicht mehr jede Unterseite gleich
   ========================================================================== */
/* A. Läden: Schaufenster über die ganze Breite, Text unten links, Türschild rechts */
.kopf2--panorama { grid-template-columns: minmax(0, 1fr); min-height: min(94svh, 940px); }
.kopf2--panorama .kopf2-bild { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: none; mask-image: none; }
.kopf2--panorama .kopf2-bild img { object-position: 50% 40%; }
.kopf2--panorama::before { z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(15,10,7,.9) 0%, rgba(15,10,7,.62) 38%, rgba(15,10,7,.08) 72%), linear-gradient(0deg, rgba(15,10,7,.78) 0%, rgba(15,10,7,0) 46%), linear-gradient(180deg, rgba(15,10,7,.55), rgba(15,10,7,0) 22%); }
.kopf2--panorama .kopf2-text { z-index: 1; align-self: end; padding-bottom: clamp(56px, 8vw, 110px); }
@media (prefers-reduced-motion: no-preference) {
  .kopf2--panorama .kopf2-bild img { animation: schaufenster 16s cubic-bezier(.2, .6, .3, 1) both; }
  @keyframes schaufenster { from { transform: scale(1.12); } to { transform: scale(1.02); } }
}
.laden-schild { position: absolute; z-index: 2; right: max(var(--rand), calc((100vw - var(--breite)) / 2)); bottom: clamp(70px, 9vw, 130px); display: grid; justify-items: center; gap: 2px; min-width: 210px; max-width: 260px; padding: 18px 22px 16px; border-radius: 12px; background: linear-gradient(180deg, #fbf7ee, #eee5d3); color: var(--holz-tief); text-align: center; box-shadow: 0 0 0 4px var(--holz), 0 0 0 6px #6b4a35, 0 30px 50px -20px rgba(0,0,0,.7); transform: rotate(2.5deg); transform-origin: 50% -60px; }
.laden-schild-haken { position: absolute; left: 50%; top: -58px; width: 120px; height: 58px; translate: -50% 0; border: 2px solid rgba(240,232,216,.75); border-bottom: 0; border-radius: 60px 60px 0 0 / 58px 58px 0 0; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.laden-schild-haken::after { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #c9b48e; box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.laden-schild small { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: var(--tinte-2); }
.laden-schild b { font-family: var(--display); font-weight: 900; font-size: 40px; line-height: .95; text-transform: uppercase; color: var(--gruen-dunkel); }
.laden-schild span:not(.laden-schild-haken) { font-size: 15px; line-height: 1.35; color: var(--tinte-2); margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .laden-schild { animation: schild-pendel 4.5s ease-in-out 1.2s 2 alternate both; }
  @keyframes schild-pendel { from { transform: rotate(2.5deg); } to { transform: rotate(-1.5deg); } }
}
@media (max-width: 900px) { .laden-schild { display: none; } .kopf2--panorama { min-height: min(88svh, 760px); } .kopf2--panorama::before { background: linear-gradient(0deg, rgba(15,10,7,.92) 0%, rgba(15,10,7,.55) 55%, rgba(15,10,7,.35) 100%); } }

/* B. Hersteller: drei Modelle als Fächer an der Unterkante */
.kopf2--faecher { overflow: visible; z-index: 2; }
.modell-faecher { position: absolute; z-index: 5; right: max(calc(var(--rand) + 40px), calc((100vw - var(--breite)) / 2 + 40px)); bottom: clamp(-90px, -6vw, -40px); width: clamp(260px, 30vw, 440px); aspect-ratio: 4 / 3; pointer-events: none; }
.modell-faecher img { position: absolute; left: 50%; bottom: 0; width: 56%; height: auto; transform-origin: 50% 120%; translate: -50% 0; filter: drop-shadow(0 24px 22px rgba(10,6,4,.5)); }
.modell-faecher img:nth-child(1) { rotate: -24deg; translate: -96% 4%; }
.modell-faecher img:nth-child(2) { rotate: 0deg; z-index: 2; translate: -50% -6%; }
.modell-faecher img:nth-child(3) { rotate: 23deg; translate: -6% 4%; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .modell-faecher img { animation: faecher-auf 1.1s var(--ease-feder) both; animation-delay: calc(.5s + var(--i) * .08s); }
  @keyframes faecher-auf { from { rotate: 0deg; translate: -50% 18%; opacity: 0; } }
}
@media (max-width: 900px) { .modell-faecher { position: relative; right: auto; bottom: auto; grid-column: 1; width: min(360px, 78vw); margin: -30px auto -70px; } }

/* C. Kopf mit Aufklebern rund um Adrian (Instrumente und Lernen): Fäden und Umlaufbahn wie beim Kosmos der Startseite */
.ring-faeden { position: absolute; inset: calc(var(--kopf-h) + 10px) 0 0 0; z-index: 0; width: 100%; height: calc(100% - var(--kopf-h) - 10px); overflow: visible; pointer-events: none; }
.ring-faeden ellipse { fill: none; stroke: rgba(246,239,226,.18); stroke-width: 1; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; }
.ring-faeden line { stroke: rgba(246,239,226,.55); stroke-width: 1.4; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; transition: stroke .25s, stroke-width .25s, opacity .25s; animation: faden-rein .8s var(--ease) both; animation-delay: calc(var(--i) * 110ms + 700ms); }
@keyframes faden-rein { from { opacity: 0; } }
.kopf2--marken .kopf2-bild img { z-index: 1; }
.kopf2-bild:has(.marken-ring li:nth-child(1) a:is(:hover, :focus-visible)) .ring-faeden line:nth-child(3) { stroke: var(--gruen-licht); stroke-dasharray: none; stroke-width: 2.4; opacity: 1; }
.kopf2-bild:has(.marken-ring li:nth-child(2) a:is(:hover, :focus-visible)) .ring-faeden line:nth-child(4) { stroke: var(--gruen-licht); stroke-dasharray: none; stroke-width: 2.4; opacity: 1; }
.kopf2-bild:has(.marken-ring li:nth-child(3) a:is(:hover, :focus-visible)) .ring-faeden line:nth-child(5) { stroke: var(--gruen-licht); stroke-dasharray: none; stroke-width: 2.4; opacity: 1; }
.kopf2-bild:has(.marken-ring li:nth-child(4) a:is(:hover, :focus-visible)) .ring-faeden line:nth-child(6) { stroke: var(--gruen-licht); stroke-dasharray: none; stroke-width: 2.4; opacity: 1; }
.kopf2-bild:has(.marken-ring li:nth-child(5) a:is(:hover, :focus-visible)) .ring-faeden line:nth-child(7) { stroke: var(--gruen-licht); stroke-dasharray: none; stroke-width: 2.4; opacity: 1; }
.kopf2-bild:has(.marken-ring li:nth-child(6) a:is(:hover, :focus-visible)) .ring-faeden line:nth-child(8) { stroke: var(--gruen-licht); stroke-dasharray: none; stroke-width: 2.4; opacity: 1; }
/* Lernen: jeder Aufkleber ist ein Link mit Rubrik, Zahl und Pfeil */
.fakten-ring a { position: relative; gap: 3px; padding: 13px 12px 15px; color: var(--tinte); text-align: center; }
.fakten-ring small { font-family: var(--display); font-weight: 800; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gruen-dunkel); }
.fakten-ring b { font-family: var(--display); font-weight: 900; font-size: clamp(28px, 2.4vw, 38px); line-height: .9; color: var(--tinte); white-space: nowrap; }
.fakten-ring span { font-weight: 600; font-size: 13.5px; line-height: 1.25; color: var(--tinte-2); }
.fakten-ring li:nth-child(3n+2) a { background: var(--gruen-tief); }
.fakten-ring li:nth-child(3n+2) b, .fakten-ring li:nth-child(3n+2) span { color: var(--weiss); }
.fakten-ring li:nth-child(3n+2) small { color: var(--gruen-hauch); }
.ring-pfeil { position: absolute; right: -11px; bottom: -11px; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--nacht); color: var(--weiss); fill: currentColor; box-shadow: 0 0 0 2px var(--papier); opacity: 0; transform: scale(.6) rotate(-45deg); transition: opacity .2s, transform .35s var(--ease-feder), background-color .2s; }
.fakten-ring a:hover .ring-pfeil, .fakten-ring a:focus-visible .ring-pfeil { opacity: 1; transform: none; background: var(--gruen-tief); }
@media (hover: none) { .ring-pfeil { opacity: 1; transform: scale(.8); } }
@media (max-width: 900px) { .ring-faeden { display: none; } .ring-pfeil { right: -6px; bottom: -6px; width: 26px; height: 26px; padding: 6px; } }
@media (prefers-reduced-motion: reduce) { .ring-faeden line { animation: none; } }

/* D. Termine: ein Ticket liegt quer über dem Foto */
.kopf-ticket { position: absolute; z-index: 3; right: max(var(--rand), calc((100vw - var(--breite)) / 2)); bottom: clamp(48px, 7vw, 96px); display: flex; width: min(430px, 40vw); border-radius: 14px; color: var(--tinte); text-decoration: none; transform: rotate(-5deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); transition: transform .5s var(--ease-feder); }
.kopf-ticket:hover { transform: rotate(-2deg) translateY(-6px); }
.kopf-ticket-haupt, .kopf-ticket-abriss { display: grid; align-content: center; gap: 2px; padding: 22px 24px; background: #fbf7ee; }
.kopf-ticket-haupt { flex: 1; border-radius: 14px 0 0 14px; -webkit-mask: radial-gradient(circle 12px at 100% 50%, transparent 98%, #000); mask: radial-gradient(circle 12px at 100% 50%, transparent 98%, #000); }
.kopf-ticket-abriss { width: 34%; border-radius: 0 14px 14px 0; background: var(--gruen); color: var(--weiss); border-left: 2px dashed rgba(255,255,255,.7); -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000); mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000); text-align: center; }
.kopf-ticket small { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.kopf-ticket b { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3vw, 46px); line-height: .9; text-transform: uppercase; }
.kopf-ticket-abriss b { font-size: clamp(22px, 2vw, 30px); }
.kopf-ticket-haupt > span { font-size: 15px; color: var(--tinte-2); margin-top: 4px; }
@media (max-width: 900px) { .kopf-ticket { position: relative; right: auto; bottom: auto; grid-column: 1; width: min(400px, 88vw); margin: -60px auto 40px; } }

/* E. Community: Holz statt Petrol */
.kopf2--gemeinschaft { background: var(--holz-tief) url("../img/holz-bahn-klein.webp") center top / max(100%, 1100px) auto repeat-y; }
.kopf2--gemeinschaft::before { background: radial-gradient(120% 90% at 20% 30%, rgba(23,17,13,.35), rgba(15,10,7,.84)); }
.kopf2--gemeinschaft .kopf2-bild::after { background: radial-gradient(circle, rgba(123,160,45,.4), transparent 65%); }
.kopf2--gemeinschaft .knopf--linie { --fuell: var(--hell); --fuell-text: var(--tinte); }
/* Community-Seite im Markenlook: Holz und Grün statt Petrol und Orange */
.zahlen b { color: var(--gruen-dunkel); }
.punkte--gemeinschaft span { background: var(--gruen); }
.gemeinschaft-gaeste { position: relative; isolation: isolate; background: var(--holz-tief) url("../img/holz-bahn-klein.webp") center top / max(100%, 1100px) auto repeat-y; color: var(--hell); }
.gemeinschaft-gaeste::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,17,13,.6), rgba(23,17,13,.78)); }
.gaeste li:nth-child(odd) { background: var(--gruen); }
.gemeinschaft-schritte span { background: var(--gruen-tief); }
/* Panorama-Kopf am Handy: Bild oben, Text darunter (wie die übrigen Köpfe) */
@media (max-width: 900px) {
  .kopf2--panorama { min-height: 0; }
  .kopf2--panorama .kopf2-bild { position: relative; inset: auto; z-index: auto; }
  .kopf2--panorama::before { z-index: -1; background: radial-gradient(120% 90% at 20% 30%, rgba(23,17,13,.4), rgba(15,10,7,.84)); }
  .kopf2--panorama .kopf2-text { padding-bottom: 56px; }
  .kopf2--panorama .kopf2-quelle { top: calc(75vw - 62px); bottom: auto; }
  .kopf-ticket { margin-top: -8px; }
  .modell-faecher { margin: -10px auto -46px; }
}

/* ==========================================================================
   Prüferfunde (Gutachten 8/10)
   ========================================================================== */
/* Kontrast: weiße Schrift steht auf dem tieferen Grün (4,75:1). Das helle Markengrün bleibt für Akzente und große Flächen ohne Text. */
.etikett, .hersteller-seit, .miete-preis, .vergleich-karte--gruen, .werkzeug-kopf i, .ticket-datum, .show-anlaesse li:nth-child(2n), .show-sets li:nth-child(2),
.pk-cover small, .kopf-ticket-abriss, .gaeste li:nth-child(odd), .punkte span, .pf-nr, .ladenkarte-nr, .anfrage-block.ist-fertig .anfrage-nr { background-color: var(--gruen-tief); }
.etikett { box-shadow: 0 0 0 2px var(--gruen-dunkel), 0 10px 18px -10px rgba(10,6,4,.6); }
/* Kontaktseite: Titel der Kacheln mit Abstand zum Auswahlkreis */
.kachel { padding-right: 42px; }
/* Hersteller-Fächer bleibt am Handy innerhalb der Seite */
@media (max-width: 900px) { .modell-faecher { max-width: calc(100vw - 40px); } }
/* Deutschland-Ausschnitt in der Karte: als weißes Kärtchen mit Rand */
.lk-mini { padding: 6px; border-radius: 8px; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px var(--linie), 0 8px 16px -8px rgba(30,23,18,.35); filter: none; }
.lk-mini path { fill: #E3D8C2; stroke: #B9A887; stroke-width: .9; }
.lk-mini rect { fill: rgba(94,125,31,.35); stroke: var(--gruen-dunkel); stroke-width: 2.2; }
/* Ladenseiten: Abstand zwischen Etikett und Überschrift, Steckbrief am Handy einspaltig */
.lesetext .etikett + h2, .lesetext .zeile + h2 { margin-top: 0; }
@media (max-width: 520px) { .steckbrief { grid-template-columns: minmax(0, 1fr) !important; } .steckbrief > div { grid-column: auto !important; } }
/* Kleinschrift: Informationen mindestens 15 px */
.modell-im-bild { font-size: 15px; }
.kachel small { font-size: 15px; }
.ladenkarte-daten dt, .ladenkarte-umgebung b { font-size: 14.5px; }
/* Ruhige Zeilen-Etiketten auch auf dunklen Sonderflächen lesbar */
.gemeinschaft-gaeste .zeile, .show .zeile, .s-spiel.flaeche-nacht .zeile { color: var(--gruen-licht); }
/* Erster Handy-Bildschirm: Kopfbilder kleiner, schwebende Karten als eine Reihe zum Wischen */
@media (max-width: 600px) {
  .kopf2--frei .kopf2-bild img { max-height: 36svh; }
  .marken-ring { display: flex !important; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 16px var(--rand) 22px !important; }
  .marken-ring::-webkit-scrollbar { display: none; }
  .marken-ring li { flex: 0 0 34%; scroll-snap-align: start; }
}
/* WebKit schneidet bei overflow-x: clip auch die Unterkante ab, darum bleibt der Hersteller-Kopf ganz offen.
   Quer hält #inhalt die Seite ruhig (siehe Handy-Runde, Punkt 6). */
@media (max-width: 900px) { .kopf2--faecher { overflow: visible; } }
/* Ladenseiten: drei Google-Bewertungen als Zettel */
.laden-stimmen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
@media (max-width: 900px) { .laden-stimmen { grid-template-columns: minmax(0, 1fr); } }
.laden-stimmen li { position: relative; display: grid; align-content: start; gap: 8px; padding: 30px 26px 24px; border-radius: 4px; background: #FBF7EC; box-shadow: 0 1px 2px rgba(30,23,18,.08), 0 22px 34px -24px rgba(30,23,18,.55); rotate: var(--dreh); }
.laden-stimmen li > i { position: absolute; left: 50%; top: -10px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #D6EBA8, var(--gruen) 55%, var(--gruen-dunkel)); box-shadow: 0 4px 6px rgba(0,0,0,.3); }
.ls-sterne { color: #E5A00D; letter-spacing: .1em; font-size: 18px; }
.laden-stimmen blockquote { margin: 0; }
.laden-stimmen p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--tinte); }
.laden-stimmen b { margin-top: 6px; font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
.laden-stimmen small { font-size: 15px; color: var(--tinte-2); }
.laden-stimmen-mehr { margin: 26px 0 0; }
.steckbrief dd small a { display: inline; white-space: normal; }
.steckbrief dd small a::after { content: none; }

/* Läden: die drei Orte als gelbe Ortstafeln rund um Adrian (Zeichen 310, Schrift wie DIN-Engschrift) */
.orts-ring li { width: clamp(158px, 13.5vw, 206px); }
.orts-ring a.ortsschild { position: relative; gap: 1px; padding: 13px 12px 12px; border-radius: 9px; background: #F5C400; color: #141414; text-align: center;
  box-shadow: inset 0 0 0 4px #F5C400, inset 0 0 0 6.5px #141414, 0 2px 0 rgba(0,0,0,.25), 0 22px 36px -20px rgba(0,0,0,.9); }
.orts-ring .ortsschild b { font-family: var(--display); font-weight: 700; font-size: clamp(23px, 1.9vw, 30px); line-height: 1.02; letter-spacing: .005em; color: #141414; }
.orts-ring .ortsschild small { font-family: var(--display); font-weight: 600; font-size: 13.5px; line-height: 1.15; letter-spacing: .02em; text-transform: none; color: #141414; }
.orts-seit { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%) rotate(-2deg); padding: 3px 9px 2px; border-radius: 4px; background: var(--gruen-tief); color: var(--weiss); font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 10px -6px rgba(0,0,0,.6); transition: transform .35s var(--ease-feder); }
.orts-ring a:hover .orts-seit, .orts-ring a:focus-visible .orts-seit { transform: translateX(-50%) rotate(0deg) scale(1.06); }
.orts-ring a:hover, .orts-ring a:focus-visible { box-shadow: inset 0 0 0 4px #F5C400, inset 0 0 0 6.5px #141414, 0 0 0 3px var(--gruen-licht), 0 28px 40px -18px rgba(0,0,0,.9); }
@media (max-width: 900px) {
  .orts-ring li { width: auto; }
  .orts-ring .ortsschild b { font-size: clamp(15px, 4.4vw, 22px); }
  .orts-ring .ortsschild small { font-size: 11px; }
  .orts-ring a.ortsschild { padding: 11px 6px 14px; }
  .orts-seit { font-size: 10.5px; padding: 2px 6px; }
}

/* Mieten: ein Leihschein-Anhänger hängt an der Harmonika und führt zum Mietrechner */
.miet-anhaenger { position: absolute; z-index: 3; left: max(-70px, -4%); top: 46%; width: clamp(170px, 14vw, 210px); display: grid; justify-items: center; gap: 2px; padding: 34px 16px 18px; color: var(--tinte); text-align: center; text-decoration: none;
  background: #EAD9B8 radial-gradient(circle at 50% 17px, #2a1d14 0 6px, #c9b48f 6.5px 9px, transparent 9.5px);
  clip-path: polygon(22% 0, 78% 0, 100% 13%, 100% 100%, 0 100%, 0 13%);
  filter: drop-shadow(0 22px 22px rgba(0,0,0,.55)); transform-origin: 50% 0; transform: rotate(-9deg); transition: transform .6s var(--ease-feder); }
.miet-anhaenger small { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--gruen-dunkel); }
.miet-anhaenger b { font-family: var(--display); font-weight: 900; font-size: clamp(44px, 3.8vw, 58px); line-height: .9; }
.miet-anhaenger > span { font-weight: 700; font-size: 15px; }
.miet-anhaenger em { margin-top: 8px; padding-top: 9px; border-top: 1.5px dashed rgba(30,23,18,.35); font-style: normal; font-size: 13.5px; line-height: 1.3; color: var(--tinte-2); }
.miet-anhaenger i { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen-tief); }
.miet-anhaenger i .pfeil { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.miet-anhaenger:hover, .miet-anhaenger:focus-visible { transform: rotate(-2deg) translateY(-4px); }
.miet-anhaenger:hover i .pfeil { transform: translateX(4px); }
.js .miet-anhaenger { animation: anhaenger-schwingt 1.6s var(--ease-feder) .9s both; }
@keyframes anhaenger-schwingt { 0% { opacity: 0; transform: rotate(-30deg) translateY(-20px); } 30% { opacity: 1; } 100% { transform: rotate(-9deg); } }
@media (max-width: 900px) { .miet-anhaenger { left: auto; right: 3%; top: auto; bottom: 0; width: 138px; padding: 28px 10px 12px; } .miet-anhaenger b { font-size: 34px; } .miet-anhaenger em { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .js .miet-anhaenger { animation: none; } .miet-anhaenger { transition: none; } }
.ladenfinder input::placeholder { letter-spacing: .02em; font-weight: 600; color: #8a7b6a; }
/* Beitragsbilder: viele sind Flyer mit Schrift. Das Bild steht ganz drin, dahinter dasselbe Bild weich verschwommen */
.beitrag-bild[style] { position: relative; isolation: isolate; }
.beitrag-bild[style]::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--bild) center / cover; filter: blur(20px) saturate(1.1) brightness(.8); }
.beitrag-bild[style] img { object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
/* Jahresband: mehr Luft zwischen den Kartenspuren, Monatsnamen oben, damit keine Karte sie verdeckt */
@media (min-width: 901px) {
  .jahr-band { height: 640px; }
  .jahr-monate span { bottom: auto; top: 14px; }
  .jahr-monate small { bottom: auto; top: 34px; }
  .jahr-pin--o2 .jahr-karte { bottom: 158px; } .jahr-pin--o2 .jahr-karte::before { height: 149px; }
  .jahr-pin--u2 .jahr-karte { top: 158px; } .jahr-pin--u2 .jahr-karte::before { height: 149px; }
}
/* Am Handy und Tablet stehen die Termine schon als Tickets darunter: dort nur die Filter zeigen */
@media (max-width: 900px) { .jahr-band { display: none; } .jahr-filter { margin-bottom: 0; } }
/* Kontakt: am Handy gleich unter dem Kopf anrufen oder schreiben, Text in der Seitenkarte neben dem Foto */
.kontakt-schnell { display: none; }
@media (max-width: 1000px) {
  .kontakt-schnell { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
  .kontakt-schnell > span { flex-basis: 100%; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-licht); }
  .kontakt-schnell .knopf { min-height: 48px; font-size: 16px; }
  .kontakt-schnell .knopf--wa { background: #1f8f4e; color: #fff; }
  .kontakt-schnell .knopf--wa .symbol { color: #fff; }
}
.anfrage-gruss, .anfrage-stand { position: relative; max-width: 58%; }

/* Modellraster ohne Waisen: die letzte Reihe wird immer voll */
@media (min-width: 1001px) {
  .modelle:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modelle:has(> li:nth-child(3n+2):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .modelle:has(> li:nth-child(3n+2):last-child) > li { grid-column: span 2; }
  .modelle:has(> li:nth-child(3n+2):last-child) > li:nth-last-child(-n+2) { grid-column: span 3; }
  .modelle:has(> li:nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .modelle:has(> li:nth-child(7):last-child) > li { grid-column: span 4; }
  .modelle:has(> li:nth-child(7):last-child) > li:nth-last-child(-n+4) { grid-column: span 3; }
}
@media (min-width: 621px) and (max-width: 1000px) {
  .modelle > li:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; align-items: center; }
}
/* Fünf Schritte: am Desktop in einer Reihe, am Tablet zwei und zwei plus einer über die volle Breite */
@media (min-width: 1000px) { .schritte:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); } }
@media (min-width: 600px) and (max-width: 999px) { .schritte:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .schritte:has(> li:nth-child(5):last-child) > li:last-child { grid-column: 1 / -1; } }
/* Herstellerkopf am Handy: Plakette oben im Foto, lange Namen passen in eine Zeile */
@media (max-width: 900px) { .kopf2-plakette { top: calc(var(--kopf-h) + 12px); width: 112px; } }
@media (max-width: 520px) { .kopf2--faecher h1 { font-size: clamp(40px, 13vw, 60px); } }
/* Breite Modellkarten (Zweierreihe) bekommen ein flacheres Bildfeld, damit sie nicht höher werden als die anderen */
@media (min-width: 1001px) {
  .modelle:has(> li:nth-child(4):last-child) .modell-bild,
  .modelle:has(> li:nth-child(3n+2):last-child) > li:nth-last-child(-n+2) .modell-bild { aspect-ratio: 16 / 9; }
}
/* Lernen, Workshop: Überschrift im selben System wie alle Abschnittsköpfe, Text in einer Breite */
.workshop h2 { font-size: clamp(44px, 5.4vw, 92px); line-height: .95; margin: 0 0 24px; }
.workshop .einleitung, .workshop p { max-width: 58ch; }
/* Videos: Titel unter dem Vorschaubild, damit er nicht mit der Schrift im YouTube-Bild kollidiert */
.video-kachel { margin: 0; display: grid; gap: 12px; }
.video-kachel .video button { background: radial-gradient(circle at 50% 50%, rgba(10,6,4,.35), rgba(10,6,4,0) 60%); }
.video-kachel figcaption { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.05; text-transform: uppercase; color: var(--hell); }
/* Landkarte: Ländernamen liegen über den Straßen, mit einem Rand in Papierfarbe */
.lk-laendername text { paint-order: stroke; stroke: #F4EEE2; stroke-width: 6px; stroke-linejoin: round; opacity: .8; }
/* Ortsschilder am Handy: nur Ortsname und „Laden seit“, dafür groß genug */
@media (max-width: 520px) { .orts-ring .ortsschild small { display: none; } .orts-ring .ortsschild b { font-size: clamp(16px, 4.6vw, 21px); } .orts-ring a.ortsschild { padding: 14px 6px 18px; } .orts-seit { font-size: 10px; } }
@media (max-width: 760px) { .pl-spur { margin-top: 16px; } }
.video-kachel .video-play { top: auto; left: 14px; bottom: 14px; width: 56px; height: 56px; margin: 0; box-shadow: 0 8px 18px -6px rgba(0,0,0,.6); }
.video-kachel .video-play svg { width: 24px; height: 24px; }
.video-kachel .video button { background: linear-gradient(20deg, rgba(10,6,4,.45), rgba(10,6,4,0) 45%); }
/* Modellbilder sitzen in jeder Kartengröße vollständig und mittig im Bildfeld */
.modell-bild img { position: absolute; z-index: 1; left: 9%; top: 8%; width: 82%; height: 80%; object-fit: contain; object-position: 50% 50%; }
@media (min-width: 1001px) {
  .modelle:has(> li:nth-child(4):last-child) .modell-bild img,
  .modelle:has(> li:nth-child(3n+2):last-child) > li:nth-last-child(-n+2) .modell-bild img { left: 14%; width: 72%; top: 9%; height: 78%; }
}
.werkzeug-probe { display: block; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--gruen-hauch); font-style: normal; font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--gruen-dunkel); }
@media (min-width: 901px) { .werkzeuge { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr); align-items: stretch; } }

/* Auftrittslängen als Stoppuhren: der Bogen zeigt die Dauer, 60 Minuten sind eine volle Runde */
.show-sets li { justify-items: center; text-align: center; gap: 4px; padding: 26px 20px 24px; transform: none; }
.show-sets li:nth-child(2) { transform: translateY(-10px); }
.show-sets li:hover { transform: translateY(-6px); }
.show-sets li:nth-child(2):hover { transform: translateY(-14px); }
.set-uhr { position: relative; display: block; width: clamp(120px, 11vw, 150px); aspect-ratio: 1; margin-bottom: -6px; }
.set-uhr svg { width: 100%; height: 100%; overflow: visible; }
.su-ticks { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 1; opacity: .35; }
.su-grund { fill: none; stroke: currentColor; stroke-width: 9; opacity: .12; }
.su-bogen { fill: none; stroke: var(--gruen); stroke-width: 9; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; stroke-dasharray: var(--teil) 100; transition: stroke-dasharray 1.4s var(--ease) .3s, stroke-width .3s; }
.su-bogen--innen { stroke-width: 7; opacity: .75; transition-delay: 1.5s; }
.show-sets li:nth-child(2) .su-bogen { stroke: var(--weiss); }
.js .show-sets[data-zeigen]:not(.ist-da) .su-bogen { stroke-dasharray: 0 100; }
.show-sets li:hover .su-bogen { stroke-width: 12; }
.show-sets b { position: absolute; display: block; width: 100%; left: 0; top: calc(clamp(120px, 11vw, 150px) / 2 + 26px); transform: translateY(-50%); font-size: clamp(38px, 3.4vw, 50px); line-height: 1; }
.show-sets li { position: relative; }
.show-sets b > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.show-sets b::after { content: "Minuten"; display: block; margin-top: 2px; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.show-sets em { margin-top: 10px; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
.show-sets small { max-width: 24ch; }
@media (max-width: 520px) { .show-sets li { grid-template-columns: none; } .show-sets li:nth-child(2) { transform: none; } }
@media (prefers-reduced-motion: reduce) { .su-bogen { transition: none; } }

/* Ladenseiten: Anfahrt und Parken mit Autobahnschild und gelbem Wegweiser */
.anfahrt { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.anf-schilder { display: grid; justify-items: center; gap: 26px; padding: clamp(28px, 4vw, 52px) 20px; border-radius: 24px; background: var(--holz-tief) url("../img/holz-klein.webp") center / cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -40px rgba(23,17,13,.8); }
.anf-autobahn { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 10px; background: #1F4FA3; color: #fff; box-shadow: inset 0 0 0 3px #1F4FA3, inset 0 0 0 5.5px #fff, 0 18px 30px -16px rgba(0,0,0,.8); transform: rotate(-2deg); }
.anf-nr { display: grid; place-items: center; min-width: 58px; height: 42px; padding: 0 8px; border-radius: 8px; border: 3px solid #fff; font-family: var(--display); font-weight: 700; font-size: 28px; }
.anf-aus { display: grid; line-height: 1.05; font-family: var(--display); }
.anf-aus small { font-weight: 600; font-size: 14px; letter-spacing: .06em; opacity: .9; }
.anf-aus b { font-weight: 700; font-size: clamp(22px, 2vw, 28px); }
.anf-pfeil { font-size: 34px; line-height: 1; font-weight: 700; }
.anf-wegweiser { display: flex; align-items: baseline; gap: 18px; padding: 14px 54px 14px 22px; background: #F5C400; color: #141414; font-family: var(--display); clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%); filter: drop-shadow(0 16px 20px rgba(0,0,0,.6)); transform: rotate(1.5deg); }
.anf-wegweiser b { font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); }
.anf-wegweiser span { font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); }
.anf-text h2 { font-size: clamp(40px, 4.4vw, 72px); margin: 0 0 10px; }
.anf-adresse { margin: 0 0 22px; font-weight: 700; font-size: 18px; }
.anf-liste { margin: 0 0 24px; display: grid; gap: 14px; }
.anf-liste div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding-top: 14px; border-top: 1px solid var(--linie); }
.anf-liste dt { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-dunkel); }
.anf-liste dd { margin: 0; line-height: 1.5; }
.anf-zeiten ul { list-style: none; margin: 8px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.anf-zeiten li { display: inline-flex; gap: 8px; align-items: baseline; padding: 7px 13px; border-radius: 999px; background: var(--creme); font-size: 15px; }
.anf-zeiten b { font-weight: 700; }
.weitere-laeden { margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.weitere-laeden .zeile { margin: 0; }
@media (max-width: 900px) { .anfahrt { grid-template-columns: minmax(0, 1fr); } .anf-liste div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ==========================================================================
   Festivalseite: Plan, Bands, Mitmachen, Meile, Tickets, Anreise
   ========================================================================== */
.festplan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(28px, 4vw, 48px); }
.fp-tag { display: grid; align-content: start; border-radius: 20px; overflow: hidden; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 30px 50px -40px rgba(30,23,18,.6); }
.fp-tag header { position: relative; padding: 22px 24px 18px; background: var(--holz-tief) url("../img/holz-klein.webp") center / cover; color: var(--hell); }
.fp-tag h3 { font-size: clamp(34px, 3vw, 46px); color: var(--weiss); }
.fp-tag header p { margin: 2px 0 0; font-weight: 600; color: var(--hell-2); }
.fp-hinweis { position: absolute; right: 18px; top: 20px; padding: 4px 10px 3px; border-radius: 5px; background: var(--gruen-tief); color: var(--weiss); font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; rotate: 3deg; }
.fp-tag ol { list-style: none; margin: 0; padding: 8px 24px 22px; }
.fp-tag li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--linie); line-height: 1.4; }
.fp-tag li:last-child { border-bottom: 0; }
.fp-tag time { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .02em; color: var(--gruen-dunkel); }
.fp-highlight span { font-weight: 700; }
.fp-highlight { position: relative; }
.fp-highlight::before { content: ""; position: absolute; left: -24px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 3px 3px 0; background: var(--gruen); }
.festplan-fuss { margin-top: 18px; }
@media (max-width: 1000px) { .festplan { grid-template-columns: minmax(0, 1fr); } }

.bands { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.fband { display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; background: rgba(246,239,226,.06); box-shadow: inset 0 0 0 1px var(--linie-dunkel); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.fband:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(169,199,112,.5), 0 30px 50px -30px rgba(0,0,0,.9); }
.fband figure { margin: 0; aspect-ratio: 720 / 501; overflow: hidden; }
.fband img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.fband:hover img { transform: scale(1.05); }
.fband > div { padding: 16px 18px 20px; }
.band-zeit { margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-licht); }
.fband h3 { font-size: clamp(22px, 1.8vw, 27px); line-height: 1; color: var(--weiss); margin-bottom: 8px; }
.fband p:not(.band-zeit) { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--hell-2); }
.band-quelle { margin-top: 16px; color: var(--hell-2); }
@media (max-width: 1100px) { .bands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bands { grid-template-columns: minmax(0, 1fr); } }

.mitmach { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: mm; }
.mitmach li { counter-increment: mm; position: relative; padding: 58px 22px 22px; border-radius: 18px; background: var(--creme); }
.mitmach li::before { content: counter(mm); position: absolute; left: 22px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gruen-tief); color: var(--weiss); font-family: var(--display); font-weight: 900; font-size: 18px; }
.mitmach b { display: block; margin-bottom: 6px; font-family: var(--display); font-weight: 900; font-size: 22px; line-height: 1; text-transform: uppercase; }
.mitmach p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--tinte-2); }
.mitmach-fuss { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
@media (max-width: 1000px) { .mitmach { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mitmach { grid-template-columns: minmax(0, 1fr); } }

.preisgeld { width: 100%; max-width: 520px; margin: 4px 0 14px; border-collapse: collapse; font-size: 16px; }
.preisgeld caption { text-align: left; margin-bottom: 8px; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen-dunkel); }
.preisgeld th, .preisgeld td { padding: 9px 10px; border-bottom: 1px solid var(--linie); text-align: right; font-variant-numeric: tabular-nums; }
.preisgeld th:first-child { text-align: left; }
.preisgeld thead th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); }
.preisgeld tbody tr:last-child td:nth-child(2) { font-weight: 800; color: var(--gruen-dunkel); }

.meile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.meile-bild { position: sticky; top: calc(var(--kopf-h) + 24px); margin: 0; border-radius: 22px; overflow: hidden; }
.meile-bild img { width: 100%; height: auto; display: block; }
.meile-bild figcaption { position: absolute; left: 14px; bottom: 12px; padding: 3px 9px; border-radius: 5px; background: rgba(15,10,7,.6); color: var(--hell); font-size: 13px; }
.aussteller { list-style: none; margin: 22px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aussteller li { display: grid; padding: 10px 14px; border-radius: 12px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.07); }
.aussteller b { font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 1.1; }
.aussteller span { font-size: 14px; color: var(--tinte-2); }
@media (max-width: 900px) { .meile { grid-template-columns: minmax(0, 1fr); } .meile-bild { position: relative; top: auto; } }
@media (max-width: 420px) { .aussteller { grid-template-columns: minmax(0, 1fr); } }

.fest-tickets { list-style: none; margin: clamp(28px, 4vw, 44px) 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fest-tickets li { display: grid; align-content: start; gap: 4px; padding: 22px 22px 20px; border-radius: 16px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 24px 40px -32px rgba(30,23,18,.6); }
.fest-tickets small { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-dunkel); }
.fest-tickets b { font-family: var(--display); font-weight: 900; font-size: clamp(38px, 3.4vw, 52px); line-height: 1; }
.fest-tickets span { font-size: 15.5px; line-height: 1.45; color: var(--tinte-2); }
.fest-tickets-best { background: var(--gruen-tief) !important; color: var(--weiss); }
.fest-tickets-best small, .fest-tickets-best span { color: rgba(255,255,255,.9); }
.fest-tickets-fuss { max-width: 70ch; margin: 0 0 22px; color: var(--tinte-2); }
@media (max-width: 1000px) { .fest-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fest-tickets { grid-template-columns: minmax(0, 1fr); } }

.anreise-wege { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: clamp(28px, 4vw, 44px) 0 24px; }
.anreise-wege > div { padding: 22px; border-top: 3px solid var(--gruen); background: var(--papier); border-radius: 0 0 14px 14px; }
.anreise-wege b { display: block; margin-bottom: 8px; font-family: var(--display); font-weight: 900; font-size: 21px; text-transform: uppercase; }
.anreise-wege p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--tinte-2); }
@media (max-width: 1000px) { .anreise-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .anreise-wege { grid-template-columns: minmax(0, 1fr); } }
.meile h2, .fruehschoppen h2 { font-size: clamp(44px, 5vw, 84px); line-height: .95; margin: 0 0 22px; }
.fruehschoppen h2 { color: var(--hell); }
.meile .einleitung { max-width: 52ch; }
@media (min-width: 901px) { .anfahrt { align-items: start; } .anf-schilder { position: sticky; top: calc(var(--kopf-h) + 24px); min-height: 340px; align-content: center; } }
/* Zählwerk: die Ziffern übernehmen immer die Schrift der Zahl (sonst schrumpfen sie in Listen mit eigener span-Regel) */
[data-zahl] .z-ziffer, [data-zahl] .z-rest, [data-zahl] .z-platz, [data-zahl] .z-leser, [data-zahl] .z-band, [data-zahl] .z-band > span { font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
[data-zahl] .z-ziffer, [data-zahl] .z-band > span { line-height: 1.1; }

/* Tickets mit Gesicht: der Künstler (oder ich beim Seminar) steht im grünen Datumsfeld und ragt oben aus dem Ticket */
.ticket { position: relative; }
.tickets:has(.ticket--bild) { padding-top: 44px; row-gap: clamp(64px, 6vw, 80px); }
.ticket--bild .ticket-datum { min-height: 152px; align-content: end; padding-right: 48%; background: radial-gradient(120% 110% at 100% 100%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), var(--gruen); }
.ticket-gesicht { position: absolute; z-index: 2; right: 12px; bottom: calc(100% - 152px); height: 200px; width: auto; max-width: 64%; object-fit: contain; object-position: right bottom; pointer-events: none;
  filter: drop-shadow(0 16px 14px rgba(15,10,7,.38)); -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent); mask-image: linear-gradient(180deg, #000 90%, transparent); transition: transform .45s var(--ease-feder); }
.ticket:nth-child(odd) .ticket-gesicht { rotate: -1deg; } .ticket:nth-child(2) .ticket-gesicht { rotate: 1deg; }
.ticket-gesicht--logo { height: 128px; bottom: calc(100% - 140px); right: 18px; max-width: 46%; -webkit-mask-image: none; mask-image: none; rotate: 6deg !important; filter: drop-shadow(0 12px 16px rgba(15,10,7,.45)); }
.ticket--aus .ticket-gesicht, .ticket--abgesagt .ticket-gesicht { filter: drop-shadow(0 16px 14px rgba(15,10,7,.38)) saturate(.6); }
@media (max-width: 480px) { .ticket-gesicht { height: 176px; } }
@media (prefers-reduced-motion: reduce) { .ticket-gesicht { transition: none; } }

/* ==========================================================================
   Community: Skool-Plakette, Geschichte, App-Fenster mit Reitern
   ========================================================================== */
.skool-plakette { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 8px 14px 8px 12px; border-radius: 999px; background: var(--weiss); box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
.skool-plakette span { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); }
.skool-plakette img { width: 74px; height: auto; }
.kreis-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.kreis-raster h2 { font-size: clamp(42px, 4.8vw, 80px); line-height: .95; margin: 0; }
.kreis-text p { max-width: 54ch; }
@media (max-width: 900px) { .kreis-raster { grid-template-columns: minmax(0, 1fr); } }

.einblick { margin-top: clamp(28px, 4vw, 48px); border-radius: 22px; overflow: hidden; background: #F4F4F2; box-shadow: 0 0 0 1px rgba(30,23,18,.08), 0 50px 90px -50px rgba(30,23,18,.7); }
.eb-leiste { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: var(--weiss); border-bottom: 1px solid #E6E2DA; }
.eb-punkte { display: flex; gap: 6px; } .eb-punkte i { width: 11px; height: 11px; border-radius: 50%; background: #E2DDD3; }
.eb-punkte i:nth-child(1) { background: #E8796B; } .eb-punkte i:nth-child(2) { background: #EDC25E; } .eb-punkte i:nth-child(3) { background: #7FC07A; }
.eb-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.eb-name img { width: 64px; height: auto; padding: 4px 6px; border-radius: 8px; background: #2C6463; }
.eb-skool { margin-left: auto; width: 64px; height: auto; }
.eb-reiter { display: flex; gap: 4px; padding: 0 16px; background: var(--weiss); border-bottom: 1px solid #E6E2DA; overflow-x: auto; scrollbar-width: none; }
.eb-reiter::-webkit-scrollbar { display: none; }
.eb-reiter button { flex: none; position: relative; padding: 14px 14px 13px; border: 0; background: none; font: 600 16px/1 var(--text); color: #8A8580; cursor: pointer; }
.eb-reiter button[aria-selected="true"] { color: var(--tinte); }
.eb-reiter button[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--tinte); }
.eb-reiter button:focus-visible { outline: 3px solid var(--gruen); outline-offset: -3px; }
.eb-flaechen { padding: clamp(18px, 3vw, 34px); min-height: 420px; }
.einblick:not(.eb-js) .eb-flaeche + .eb-flaeche { margin-top: 34px; }
.eb-flaeche h3 { text-transform: none; font-family: var(--text); font-weight: 800; letter-spacing: 0; }
.eb-feed { display: grid; gap: 14px; max-width: 760px; }
.eb-schreib { margin: 0; padding: 16px 20px; border-radius: 12px; background: var(--weiss); color: #9A958F; box-shadow: 0 2px 10px -4px rgba(0,0,0,.15); }
.eb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.eb-chips span { padding: 7px 14px; border-radius: 999px; border: 1px solid #DEDAD2; background: var(--weiss); font-size: 14px; color: #5D5852; }
.eb-chips .ist-an { background: #8A8580; border-color: #8A8580; color: var(--weiss); }
.eb-post { padding: 18px 22px; border-radius: 12px; background: var(--weiss); box-shadow: 0 0 0 2px #F3D58C; }
.eb-post small { font-size: 13px; color: #8A8580; }
.eb-post h3 { margin: 4px 0 6px; font-size: 21px; }
.eb-post p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; color: #4A4540; }
.eb-zahlen { font-size: 13.5px; color: #8A8580; }
.eb-kurse { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.eb-kurse li { border-radius: 12px; overflow: hidden; background: var(--weiss); box-shadow: 0 0 0 1px #E6E2DA; }
.eb-kurse h3 { margin: 12px 16px 4px; font-size: 18px; }
.eb-kurse p { margin: 0 16px 16px; font-size: 15px; line-height: 1.45; color: #5D5852; }
.eb-kurs-bild { display: grid; place-content: center; justify-items: center; gap: 6px; aspect-ratio: 16 / 9; background: radial-gradient(70% 90% at 80% 20%, rgba(255,255,255,.12), transparent 60%), #2C6463; color: var(--weiss); }
.eb-kurs-bild b { font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2vw, 30px); letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.eb-kurs-bild i { padding: 4px 12px; border-radius: 6px; background: #C49A63; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 15px; text-transform: uppercase; transform: rotate(-2deg); }
.eb-kurs-bild--kino { background: radial-gradient(60% 80% at 25% 30%, rgba(255,214,120,.35), transparent 60%), #1E4746; }
.eb-kurs-bild--rec { background: linear-gradient(90deg, #141414 0 30%, #2C6463 30%); }
.eb-kurs-bild--rec::before { content: "● REC"; font-family: var(--display); font-weight: 800; font-size: 13px; color: #F05A4F; letter-spacing: .1em; }
@media (max-width: 900px) { .eb-kurse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eb-monat { margin: 0 0 14px; font-weight: 700; color: #5D5852; }
.eb-termine { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.eb-termine li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--weiss); box-shadow: 0 0 0 1px #E6E2DA; }
.eb-termine time { display: grid; justify-items: center; padding: 6px 0; border-radius: 10px; background: #2C6463; color: var(--weiss); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.eb-termine time b { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; }
.eb-termine span { display: grid; gap: 2px; font-weight: 700; font-size: 17px; line-height: 1.3; }
.eb-termine small { font-weight: 600; font-size: 13px; color: #8A8580; }
.eb-karte-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.eb-karte { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px #E6E2DA; background: #F8F4EC; }
.eb-karte-flaeche { position: relative; aspect-ratio: calc(var(--w) / var(--h)); overflow: hidden; }
.eb-karte-flaeche img { position: absolute; width: calc(1000 / var(--w) * 100%); max-width: none; height: auto; left: calc(var(--x0) / var(--w) * -100%); top: calc(var(--y0) / var(--h) * -100% * 1); }
.eb-karte-flaeche i { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--tinte); box-shadow: 0 0 0 3px var(--weiss), 0 4px 8px rgba(0,0,0,.3); }
.eb-js .eb-flaeche:not([hidden]) .eb-karte-flaeche i { animation: pin-rein .5s var(--ease-feder) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes pin-rein { from { transform: translateY(-14px) scale(.4); opacity: 0; } }
.eb-karte-flaeche b { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #E9B949; box-shadow: 0 0 0 3px var(--weiss), 0 4px 10px rgba(0,0,0,.35); }
.eb-karte-flaeche b span { position: absolute; left: 24px; top: -3px; padding: 2px 7px; border-radius: 5px; background: var(--weiss); font-size: 12.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.eb-karte-text h3 { font-size: 22px; margin: 0 0 8px; }
.eb-karte-text p { font-size: 16px; line-height: 1.55; color: #4A4540; }
.eb-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px !important; }
.eb-legende i, .eb-legende b { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--tinte); }
.eb-legende b { background: #E9B949; margin-left: 10px; }
@media (max-width: 900px) { .eb-karte-raster { grid-template-columns: minmax(0, 1fr); } }
.eb-level-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: center; }
.eb-level-raster h3 { font-size: 24px; margin: 0 0 8px; }
.eb-level-raster p { font-size: 16px; line-height: 1.55; color: #4A4540; }
.eb-level { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.eb-level li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--weiss); box-shadow: 0 0 0 1px #E6E2DA; }
.eb-level b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #F6E3A9; font-family: var(--display); font-weight: 900; font-size: 18px; }
.eb-level li:nth-child(n+7) b { background: #2C6463; color: var(--weiss); }
.eb-level span { display: grid; font-weight: 700; font-size: 15px; line-height: 1.2; }
.eb-level small { font-weight: 600; font-size: 12.5px; color: #8A8580; }
@media (max-width: 900px) { .eb-level-raster { grid-template-columns: minmax(0, 1fr); } .eb-level { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eb-flaeche--feed:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.eb-info { border-radius: 12px; overflow: hidden; background: var(--weiss); box-shadow: 0 0 0 1px #E6E2DA; }
.eb-info-bild { display: grid; place-items: center; padding: 22px; background: #2C6463; }
.eb-info-bild img { width: 78%; height: auto; }
.eb-info h3 { margin: 16px 18px 6px; font-size: 19px; }
.eb-info p { margin: 0 18px 14px; font-size: 15px; line-height: 1.5; color: #4A4540; }
.eb-info .knopf { margin: 0 18px 18px; }
@media (max-width: 900px) { .eb-flaeche--feed:not([hidden]) { grid-template-columns: minmax(0, 1fr); } }

/* Community: Standard und Premium nebeneinander */
.stufen { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(28px, 4vw, 44px); align-items: start; }
.stufe { position: relative; display: grid; gap: 6px; padding: clamp(26px, 3vw, 38px); border-radius: 22px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.08), 0 30px 50px -40px rgba(30,23,18,.6); }
.stufe-name { margin: 0; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-dunkel); }
.stufe-preis { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.stufe-preis b { font-family: var(--display); font-weight: 900; font-size: clamp(60px, 6vw, 88px); line-height: .9; }
.stufe-preis span { font-weight: 700; color: var(--tinte-2); }
.stufe-jahr { margin: 0 0 12px; font-size: 15px; color: var(--tinte-2); }
.stufe-plus { margin: 4px 0 0; font-weight: 700; }
.stufe-liste { list-style: none; margin: 4px 0 20px; padding: 0; display: grid; gap: 10px; }
.stufe-liste li { position: relative; padding-left: 32px; line-height: 1.4; }
.stufe-liste li::before { content: ""; position: absolute; left: 0; top: .1em; width: 22px; height: 22px; border-radius: 50%; background: var(--gruen-tief) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.stufe .knopf { justify-self: start; }
.stufe--premium { background: var(--holz-tief) url("../img/holz-klein.webp") center / cover; color: var(--hell); box-shadow: 0 0 0 2px var(--gruen), 0 40px 70px -40px rgba(15,10,7,.9); }
.stufe--premium .stufe-name { color: var(--gruen-licht); }
.stufe--premium .stufe-preis span, .stufe--premium .stufe-jahr { color: var(--hell-2); }
.stufe--premium .stufe-preis b { color: var(--weiss); }
.stufe--premium .stufe-liste li::before { background-color: var(--gruen); }
.stufe-krone { position: absolute; right: 24px; top: -22px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #E9B949; box-shadow: 0 10px 20px -8px rgba(0,0,0,.6); rotate: 8deg; }
.stufe-krone svg { width: 28px; height: 28px; fill: var(--tinte); }
.stufe-gruss { max-width: 62ch; margin: 26px 0 0; font-size: 18px; color: var(--tinte-2); }
@media (max-width: 860px) { .stufen { grid-template-columns: minmax(0, 1fr); } }
.stufe--premium { background: linear-gradient(160deg, rgba(23,17,13,.62), rgba(23,17,13,.86)), var(--holz-tief) url("../img/holz-klein.webp") center / cover; }

/* ==========================================================================
   Community: Live-Call-Szene (nachgestellt)
   ========================================================================== */
.livecall { padding-block: var(--abschnitt); color: var(--hell); overflow: clip; }
.livecall-raster { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.livecall-text h2 { font-size: clamp(46px, 5.4vw, 92px); line-height: .95; margin: 0 0 22px; color: var(--weiss); }
.livecall-text .einleitung { color: var(--hell); }
.livecall-text p { color: var(--hell-2); max-width: 46ch; }
.lc-schirm { margin: 0; border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 60px 100px -40px rgba(0,0,0,.95); rotate: 1deg; }
.lc-leiste { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #1B1B1B; color: #DADADA; font-size: 14px; }
.lc-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 3px; border-radius: 6px; background: #E5332A; color: #fff; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.lc-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: lc-puls 1.4s ease-in-out infinite; }
@keyframes lc-puls { 50% { opacity: .25; } }
.lc-titel { font-weight: 600; }
.lc-zeit { margin-left: auto; font-variant-numeric: tabular-nums; color: #A8A8A8; }
.lc-mitte { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 30%, 270px); }
.lc-buehne { position: relative; min-height: clamp(300px, 30vw, 420px); height: 100%; overflow: hidden; background: radial-gradient(55% 70% at 50% 35%, rgba(255,196,120,.38), rgba(255,196,120,0) 70%), linear-gradient(180deg, rgba(20,13,9,.35), rgba(20,13,9,.7)), #3a2618 url("../img/holz-klein.webp") center / cover; }
.lc-adrian { position: absolute; left: 50%; bottom: 0; height: 94%; width: auto; transform: translateX(-50%); filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
.lc-name { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lc-welle { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.lc-welle b { width: 3px; height: 100%; border-radius: 2px; background: var(--gruen-licht); transform-origin: 50% 50%; animation: lc-welle .9s ease-in-out infinite; }
.lc-welle b:nth-child(2) { animation-delay: -.3s; } .lc-welle b:nth-child(3) { animation-delay: -.6s; } .lc-welle b:nth-child(4) { animation-delay: -.15s; }
@keyframes lc-welle { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.lc-applaus { position: absolute; right: 18px; bottom: 12px; width: 60px; height: 70%; pointer-events: none; }
.lc-applaus i { position: absolute; bottom: 0; left: 50%; font-style: normal; font-size: 26px; opacity: 0; animation: lc-steigt 4.5s ease-out infinite; }
.lc-applaus i:nth-child(1) { animation-delay: .4s; margin-left: -18px; } .lc-applaus i:nth-child(2) { animation-delay: 1.3s; margin-left: 4px; } .lc-applaus i:nth-child(3) { animation-delay: 2.1s; margin-left: -6px; } .lc-applaus i:nth-child(4) { animation-delay: 3s; margin-left: 10px; } .lc-applaus i:nth-child(5) { animation-delay: 3.8s; margin-left: -14px; }
@keyframes lc-steigt { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; transform: translateY(-20%) scale(1); } 100% { opacity: 0; transform: translateY(-260px) scale(1.1) rotate(12deg); } }
.lc-chat { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 14px; background: #181818; color: #E6E6E6; border-left: 1px solid #262626; }
.lc-chat-kopf { margin: 0; font-weight: 700; font-size: 14px; color: #A8A8A8; }
.lc-chat ol { list-style: none; margin: 0; padding: 0; display: grid; align-content: end; gap: 10px; }
.lc-nachricht { display: grid; gap: 2px; padding: 9px 11px; border-radius: 12px 12px 12px 4px; background: #262626; font-size: 14px; line-height: 1.35; }
.lc-nachricht b { font-size: 12px; font-weight: 700; color: #9C9C9C; }
.lc-nachricht--ich { border-radius: 12px 12px 4px 12px; background: var(--gruen-tief); color: #fff; }
.lc-nachricht--ich b { color: rgba(255,255,255,.8); }
.js .lc-schirm:not(.ist-da) .lc-nachricht { opacity: 0; }
.js .lc-schirm.ist-da .lc-nachricht { animation: lc-nachricht .5s var(--ease-feder) both; animation-delay: calc(var(--n) * 1.5s + .9s); }
@keyframes lc-nachricht { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.lc-tippt { display: flex; gap: 4px; margin: 0; padding: 8px 11px; width: max-content; border-radius: 12px; background: #262626; }
.lc-tippt i { width: 6px; height: 6px; border-radius: 50%; background: #8C8C8C; animation: lc-tippt 1.2s ease-in-out infinite; }
.lc-tippt i:nth-child(2) { animation-delay: .2s; } .lc-tippt i:nth-child(3) { animation-delay: .4s; }
@keyframes lc-tippt { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.lc-kacheln { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; background: #111; }
.lc-kachel { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 6px 10px; border-radius: 10px; background: #222; }
.lc-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #5E7D1F; color: #fff; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .04em; }
.lc-kachel:nth-child(2) .lc-avatar { background: #8C5A2E; } .lc-kachel:nth-child(3) .lc-avatar { background: #2C6463; } .lc-kachel:nth-child(4) .lc-avatar { background: #7A3B5E; } .lc-kachel:nth-child(5) .lc-avatar { background: #4A5A7A; }
.lc-kachel small { font-size: 12px; color: #A8A8A8; text-align: center; line-height: 1.2; }
.lc-kachel--spricht { box-shadow: 0 0 0 2px var(--gruen-licht); animation: lc-spricht 2.4s ease-in-out infinite; }
@keyframes lc-spricht { 50% { box-shadow: 0 0 0 2px rgba(169,199,112,.35); } }
.lc-hand { position: absolute; right: 6px; top: 6px; font-style: normal; font-size: 18px; animation: lc-hand 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes lc-hand { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.lc-schirm figcaption { padding: 8px 16px 10px; background: #111; color: #8C8C8C; font-size: 13px; }
@media (max-width: 1000px) { .livecall-raster { grid-template-columns: minmax(0, 1fr); } .lc-schirm { rotate: 0deg; } }
@media (max-width: 640px) { .lc-mitte { grid-template-columns: minmax(0, 1fr); } .lc-chat { border-left: 0; border-top: 1px solid #262626; } .lc-kacheln { grid-template-columns: repeat(5, minmax(64px, 1fr)); overflow-x: auto; } .lc-avatar { width: 36px; height: 36px; font-size: 15px; } .lc-titel { display: none; } }
@media (prefers-reduced-motion: reduce) { .lc-welle b, .lc-applaus i, .lc-tippt i, .lc-hand, .lc-kachel--spricht, .lc-live::before { animation: none; } .lc-applaus { display: none; } .js .lc-schirm .lc-nachricht { opacity: 1; animation: none; } }
.skool-zeile { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; }
.skool-zeile span { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--hell-2); }
.skool-zeile img { width: 64px; height: auto; opacity: .92; translate: 0 2px; }

/* ==========================================================================
   Community, Runde 2 nach drei Gutachten
   ========================================================================== */
/* Kopf: kompakter, Knopf über der Falz, Logo als Aufkleber im Bild, weicher Übergang */
.kopf2--gemeinschaft .kopf2-text { max-width: 720px; }
.kopf2--gemeinschaft h1 { font-size: clamp(52px, 6vw, 92px); text-wrap: balance; }
.kopf2--gemeinschaft .kopf2-unter { max-width: 44ch; }
.kopf2--gemeinschaft .kopf2-preis { font-size: 16px; opacity: 1; color: var(--hell-2); }
.kopf2--gemeinschaft .kopf2-preis a { white-space: nowrap; color: var(--gruen-licht); }
/* Community-Logo als Aufkleber unten rechts neben mir (vorher überschrieb .kopf2--frei die Lage, das Logo wurde riesig und lief aus dem Bild) */
.kopf2--frei .kopf2-bild img.kopf2-sticker { position: absolute; z-index: 4; inset: auto 3% 9% auto; width: clamp(150px, 14vw, 210px); max-width: none; max-height: none; height: auto; rotate: -8deg; animation: none; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 14px 18px rgba(10,6,4,.5)); }
.kopf2--gemeinschaft .kopf2-bild img:not(.kopf2-sticker) { -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 99%); mask-image: linear-gradient(180deg, #000 82%, transparent 99%); filter: drop-shadow(0 0 1px rgba(255,236,190,.55)) drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.kopf2--gemeinschaft .kopf2-bild::after { background: radial-gradient(circle, rgba(255,200,120,.32), transparent 65%); }
@media (max-width: 900px) { .kopf2--frei .kopf2-bild img.kopf2-sticker { inset: calc(var(--kopf-h) + 34px) auto auto 5%; width: 108px; } }

/* Live-Call in Holztönen statt Grau */
.livecall { background: #120D0A; }
.livecall::before { display: none; }
.lc-schirm { rotate: 0deg; background: #17110D; }
.lc-leiste { background: #221811; color: #F4EDE2; }
.lc-zeit { color: #C8BAA6; }
.lc-chat { background: #1C140F; border-left-color: #2E2219; color: #F4EDE2; }
.lc-nachricht { background: #2E2219; font-size: 15.5px; }
.lc-nachricht b { color: #C8BAA6; font-size: 12.5px; }
.lc-tippt { background: #2E2219; }
.lc-kacheln { background: #17110D; }
.lc-kachel { background: #251A13; }
.lc-kachel small { color: #C8BAA6; font-size: 13px; }
.lc-kachel:nth-child(2) .lc-avatar { background: #8C5A2E; } .lc-kachel:nth-child(3) .lc-avatar { background: #D9773A; } .lc-kachel:nth-child(4) .lc-avatar { background: var(--gruen-tief); } .lc-kachel:nth-child(5) .lc-avatar { background: #8C5A2E; }
.lc-schirm figcaption { background: #17110D; color: #A89880; }
.knopf .pfeil, .knopf .symbol { flex: none; }
@media (max-width: 640px) { .lc-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } .lc-kachel:nth-child(5) { display: none; } .lc-nachricht:first-child { display: none; } }

/* Gäste als Archiv-Plakate */
.gast-plakate { list-style: none; margin: clamp(36px, 5vw, 60px) 0 0; padding: 50px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 22px; }
.gast { position: relative; display: grid; align-content: start; gap: 4px; padding: 0 0 22px; border-radius: 14px; background: var(--papier); color: var(--tinte); box-shadow: 0 30px 50px -30px rgba(0,0,0,.85); }
.gast:nth-child(odd) { rotate: -1.2deg; } .gast:nth-child(even) { rotate: .8deg; }
.gast-buehne { position: relative; display: block; height: 170px; margin-bottom: 12px; border-radius: 14px 14px 0 0; background: radial-gradient(70% 90% at 60% 100%, rgba(255,255,255,.22), transparent 60%), var(--gruen); }
.gast-buehne img { position: absolute; left: 50%; bottom: 0; height: 125%; width: auto; max-width: 110%; transform: translateX(-50%); object-fit: contain; object-position: bottom; filter: drop-shadow(0 14px 14px rgba(15,10,7,.35)); }
.gast-buehne--initialen { display: grid; place-items: center; overflow: hidden; }
.gast-buehne--initialen i { font-style: normal; font-family: var(--display); font-weight: 900; font-size: 130px; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.75); letter-spacing: -.02em; }
.gast-rec { justify-self: start; margin: 0 18px; padding: 3px 9px 2px; border-radius: 5px; background: #E5332A; color: #fff; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.gast-rec::before { content: "● "; }
.gast b { margin: 6px 18px 0; font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2vw, 30px); line-height: 1; text-transform: uppercase; }
.gast small { margin: 0 18px; font-size: 15px; color: var(--tinte-2); }
.gast--haupt { grid-column: span 2; grid-row: span 2; }
.gast--haupt .gast-buehne { height: 420px; }
.gast--haupt b { font-size: clamp(34px, 3.4vw, 52px); }
.gast--haupt small { font-size: 18px; font-weight: 700; color: var(--gruen-tief); }
@media (max-width: 1000px) { .gast-plakate { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gast--haupt { grid-column: span 2; grid-row: auto; } .gast--haupt .gast-buehne { height: 300px; } }
@media (max-width: 560px) { .gast-plakate { display: flex; gap: 16px; margin-inline: calc(-1 * var(--rand)); padding: 50px var(--rand) 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; } .gast { flex: 0 0 74vw; scroll-snap-align: start; } .gast--haupt .gast-buehne { height: 220px; } }

/* Hier spielen Leute wie du: zwei Fotos wie aufgelegte Abzüge */
.gemeinschaft-kreis { padding-bottom: clamp(48px, 6vw, 96px); }
.kreis-raster { align-items: center; }
.kreis-text h2 { font-size: clamp(44px, 5vw, 84px); line-height: .95; margin: 0 0 22px; }
.kreis-text .einleitung { color: var(--tinte); }
.kreis-text p:not(.einleitung):not(.zeile) { color: var(--tinte-2); }
.kreis-fotos { position: relative; min-height: clamp(380px, 38vw, 540px); }
.kf { position: absolute; margin: 0; padding: 12px 12px 44px; background: #FFFDF8; box-shadow: 0 30px 50px -28px rgba(30,23,18,.55); }
.kf img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kf figcaption { position: absolute; left: 14px; right: 14px; bottom: 12px; font-family: var(--text); font-style: italic; font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--tinte-2); }
.kf--gross { left: 0; top: 0; width: 66%; aspect-ratio: 1 / 1.1; rotate: -4deg; }
.kf--klein { right: 0; bottom: 0; width: 42%; aspect-ratio: .78; rotate: 4deg; }
.kf-sticker { position: absolute; right: 30%; top: 4%; width: 120px; height: auto; rotate: -10deg; filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)); }
@media (max-width: 900px) { .kreis-fotos { min-height: 0; aspect-ratio: 1 / .85; } }
@media (max-width: 560px) { .kf--klein { width: 36%; } .kf figcaption { font-size: 17px; } .kf-sticker { width: 96px; } }

/* Preise: Premium vorne, mit mir dahinter und grünem Stempel */
.stufen { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: stretch; margin-top: clamp(80px, 9vw, 130px); }
.stufe { display: flex; flex-direction: column; gap: 6px; }
.stufe .knopf { margin-top: auto; align-self: flex-start; }
.stufe-liste { margin-bottom: 26px; }
.stufe-liste li { text-wrap: pretty; }
.stufen { isolation: isolate; }
@media (max-width: 860px) { .stufen { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } .stufe--premium { padding-top: 50px; } }
.stufe--premium { overflow: visible; }
/* Ich stehe hinter der Premium-Karte wie hinter einer Theke: die Kartenkante schneidet mich unter der Harmonika an */
.stufen { --ah: clamp(250px, 24vw, 340px); margin-top: calc(var(--ah) * .63 + 14px); }
.stufe-adrian { position: absolute; z-index: -1; right: clamp(24px, 4%, 48px); bottom: calc(100% - var(--ah) * .37); height: var(--ah); width: auto; filter: drop-shadow(0 16px 22px rgba(30,20,12,.22)); pointer-events: none; }
.stufe-krone { display: none; }
.stufe-stempel { position: absolute; left: clamp(26px, 3vw, 38px); top: -16px; padding: 7px 14px 6px; border-radius: 6px; background: var(--gruen); box-shadow: 0 0 0 2px var(--gruen-tief), 0 10px 18px -8px rgba(0,0,0,.6); color: var(--weiss); font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; rotate: -4deg; }
.stufe--premium .stufe-preis b { font-size: clamp(72px, 7vw, 116px); }
.stufe:not(.stufe--premium) { background: transparent; box-shadow: 0 0 0 1.5px var(--linie); }
.stufe-fuss { max-width: 72ch; margin: 22px 0 0; font-size: 15px; color: var(--tinte-2); }
.stufe-gruss { display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 44px 0 0; }
.stufe-gruss img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--creme); box-shadow: 0 0 0 3px var(--weiss), 0 10px 20px -10px rgba(0,0,0,.4); }
.stufe-gruss p { margin: 0; font-size: 19px; line-height: 1.5; color: var(--tinte); }
.stufe-gruss b { display: block; margin-top: 4px; font-family: var(--text); font-style: italic; font-size: 24px; font-weight: 700; color: var(--gruen-tief); }
@media (max-width: 860px) { .stufen { --ah: 236px; } .stufe-adrian { right: 18px; } }

/* Drei Schritte ohne Kästen, große Umrissziffern */
.start-schritte { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.start-schritte li { position: relative; display: grid; align-content: start; gap: 6px; }
.start-schritte span { font-family: var(--display); font-weight: 900; font-size: clamp(96px, 10vw, 160px); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--gruen); }
.start-schritte h3 { font-size: clamp(26px, 2.4vw, 34px); margin-top: 8px; }
.start-schritte p { margin: 0; color: var(--tinte-2); max-width: 30ch; }
.start-schritte li:not(:last-child)::after { content: ""; position: absolute; left: clamp(80px, 9vw, 130px); right: 10%; top: clamp(40px, 4.5vw, 70px); border-top: 2px dashed rgba(94,125,31,.45); }
.start-knopf { margin-top: clamp(30px, 4vw, 48px); }
@media (max-width: 760px) { .start-schritte { grid-template-columns: minmax(0, 1fr); } .start-schritte li::after { display: none; } }

/* Einblick: Fläche ruhiger, Reiter-Wechsel ohne Springen */
.eb-feed { max-width: none; }
@media (min-width: 901px) { .eb-flaeche--feed:not([hidden]) { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (min-width: 900px) { .eb-flaechen { min-height: 640px; } }
.eb-chips .ist-an { background: var(--tinte); border-color: var(--tinte); }
@media (max-width: 600px) { .eb-punkte { display: none; } .eb-name { min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eb-reiter { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }

/* Tickets: Datum bleibt lesbar */
.ticket-datum > * { position: relative; z-index: 3; }
.ticket-gesicht { max-width: min(64%, calc(100% - 170px)); }
.fuss-ruf h2 { line-height: .98; }
.fuss-ruf p { text-wrap: balance; }

/* ===== Community: Stimmen und Willkommensvideo ===== */
.stimmen-wertung { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 16px; justify-self: end; }
.stimmen-wertung b { grid-row: span 2; font-family: var(--display); font-weight: 900; font-size: clamp(64px, 6vw, 96px); line-height: .9; color: var(--tinte); letter-spacing: -.01em; }
.stimmen-wertung span { font-size: 26px; letter-spacing: 3px; color: #D99A1E; line-height: 1; }
.stimmen-wertung small { font-size: 15px; line-height: 1.35; color: var(--tinte-2); max-width: 22ch; }
@media (max-width: 900px) { .stimmen-wertung { justify-self: start; } }

.stimmen-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.stimmen-raster .gstimmen { display: contents; }
.video--vimeo { grid-column: span 2; align-self: start; box-shadow: 0 2px 6px rgba(23,17,13,.12), 0 30px 60px -36px rgba(10,6,4,.6); border-radius: var(--r-l); }
.video--vimeo button { background: linear-gradient(180deg, rgba(10,6,4,0) 45%, rgba(10,6,4,.82)); }
.video-unter { display: grid; gap: 6px; padding: clamp(18px, 2.2vw, 30px); }
.video-unter b { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.4vw, 38px); line-height: .95; text-transform: uppercase; }
.video-unter small { font-size: 15px; color: rgba(246,239,226,.82); }
.video--vimeo .video-play { width: 92px; height: 92px; margin: -46px 0 0 -46px; box-shadow: 0 0 0 10px rgba(123,160,45,.28), 0 18px 36px -10px rgba(0,0,0,.7); }
.video--vimeo .video-play svg { width: 34px; height: 34px; }

.gstimme { position: relative; margin: 0; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2vw, 30px); background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-l); box-shadow: var(--schatten); }
.gstimme-sterne { color: #D99A1E; font-size: 19px; letter-spacing: 2px; line-height: 1; }
.gstimme blockquote { margin: 0; flex: 1; }
.gstimme blockquote p { margin: 0; font-size: 17.5px; line-height: 1.5; color: var(--tinte); text-wrap: pretty; }
.gstimme figcaption { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 0 12px; padding-top: 14px; border-top: 1px solid var(--linie); }
.gstimme figcaption i { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gruen-hauch); color: var(--gruen-dunkel); font-style: normal; font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.gstimme figcaption b { font-size: 16.5px; line-height: 1.2; }
.gstimme figcaption small { font-size: 14px; color: var(--tinte-2); }

/* erste Stimme neben dem Video: groß und grün */
.gstimmen > .gstimme:first-child { background: var(--gruen-tief); border-color: transparent; color: var(--hell); position: relative; overflow: hidden; }
.gstimmen > .gstimme:first-child::before { content: "\201E"; position: absolute; right: 14px; top: -34px; font-family: var(--display); font-weight: 900; font-size: 220px; line-height: 1; color: rgba(255,255,255,.1); pointer-events: none; }
.gstimmen > .gstimme:first-child blockquote p { color: var(--weiss); font-family: var(--display); font-weight: 700; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.12; }
.gstimmen > .gstimme:first-child .gstimme-sterne { color: #F2C14E; }
.gstimmen > .gstimme:first-child figcaption { border-top-color: rgba(255,255,255,.18); }
.gstimmen > .gstimme:first-child figcaption i { background: rgba(255,255,255,.16); color: var(--weiss); }
.gstimmen > .gstimme:first-child figcaption small { color: rgba(246,239,226,.78); }

@media (max-width: 1100px) {
  .stimmen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video--vimeo { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .stimmen-raster { grid-template-columns: minmax(0, 1fr); }
  .video--vimeo .video-play { top: auto; left: auto; right: 14px; bottom: 16px; width: 58px; height: 58px; margin: 0; box-shadow: 0 0 0 7px rgba(123,160,45,.28), 0 12px 24px -8px rgba(0,0,0,.7); }
  .video--vimeo .video-play svg { width: 26px; height: 26px; }
  .video-unter { padding: 14px 84px 14px 16px; gap: 3px; }
  .video-unter b { font-size: 21px; }
  .video-unter small { font-size: 13px; }
  .gstimme blockquote p { font-size: 17px; }
}

/* Gästewand: zwölfte Karte als Einladung */
.gast--wunsch { background: transparent; color: var(--hell); box-shadow: inset 0 0 0 2px rgba(246,239,226,.35); }
.gast--wunsch .gast-buehne { display: grid; place-items: center; background: rgba(246,239,226,.06); border-bottom: 2px dashed rgba(246,239,226,.28); }
.gast--wunsch svg { width: 64px; height: 64px; fill: none; stroke: var(--gruen-licht); stroke-width: 3; stroke-linecap: round; }
.gast--wunsch small { color: var(--hell-2); }

/* Gästewand, Runde 3: Hauptkarte als grünes Plakat, Wunschgast über zwei Spalten */
.gast--haupt { display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 34px) 0 0; overflow: hidden; background: radial-gradient(90% 70% at 50% 100%, rgba(255,255,255,.22), transparent 62%), var(--gruen); color: var(--weiss); }
.gast--haupt .gast-buehne { order: 9; height: auto; margin: auto 3% 0; padding-top: 18px; background: none; border-radius: 0; }
.gast--haupt .gast-buehne img { position: relative; left: auto; bottom: auto; display: block; width: 100%; height: auto; max-width: none; transform: none; filter: drop-shadow(0 18px 22px rgba(15,10,7,.35)); }
.gast--haupt .gast-rec { align-self: flex-start; margin-inline: clamp(20px, 2.4vw, 34px); }
.gast--haupt b { margin-inline: clamp(20px, 2.4vw, 34px); color: var(--weiss); font-size: clamp(40px, 5.4vw, 84px); line-height: .92; margin-top: 10px; }
.gast--haupt small { margin-inline: clamp(20px, 2.4vw, 34px); color: var(--hell); font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; }
.gast--wunsch { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 22px; padding: 22px 26px; }
.gast--wunsch .gast-buehne { grid-row: span 2; width: 96px; height: 96px; margin: 0; border-radius: 50%; border: 2px dashed rgba(246,239,226,.35); background: rgba(246,239,226,.05); }
.gast--wunsch b { margin: 0; align-self: end; }
.gast--wunsch small { margin: 4px 0 0; align-self: start; font-size: 16px; }
@media (max-width: 1000px) { .gast--haupt .gast-buehne { padding-top: 10px; } }
@media (max-width: 560px) { .gast--haupt { flex: 0 0 86vw; } .gast--haupt .gast-buehne { height: auto; } .gast--wunsch { flex: 0 0 74vw; grid-template-columns: minmax(0, 1fr); text-align: left; } .gast--wunsch .gast-buehne { grid-row: auto; width: 72px; height: 72px; margin-bottom: 14px; } }
@media (min-width: 1001px) and (max-width: 1180px) { .gast--haupt { grid-row: auto; } .gast--wunsch { grid-column: 1 / -1; } .gast:not(.gast--haupt) { align-self: start; } }
@media (max-width: 900px) { .fakten-ring { padding-inline: calc(var(--rand) + 6px); } }

/* Gästewand, Runde 4: Tablet mit drei Spalten, Wunschgast als Link, Handy-Karussell ohne Leerflächen */
.gast:not(.gast--haupt) .gast-buehne { margin-bottom: 16px; }
.gast-link { color: inherit; text-decoration: none; }
.gast-link::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.gast--wunsch { transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.gast--wunsch:hover, .gast--wunsch:focus-within { background-color: rgba(246,239,226,.06); box-shadow: inset 0 0 0 2px var(--gruen-licht); }
.gast--wunsch:focus-within { outline: 3px solid var(--gruen-licht); outline-offset: 4px; }
.gast--wunsch b { text-decoration: underline; text-decoration-color: rgba(246,239,226,.35); text-underline-offset: 6px; text-decoration-thickness: 2px; }
@media (min-width: 1001px) and (max-width: 1180px) {
  .gast-plakate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gast--haupt { grid-column: span 2; grid-row: span 2; }
  .gast:not(.gast--haupt) { align-self: stretch; }
  .gast--wunsch { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; }
  .gast--wunsch .gast-buehne { grid-row: auto; width: 84px; height: 84px; margin-bottom: 14px; }
}
@media (max-width: 560px) {
  .gast-plakate { align-items: flex-start; }
  .gast { flex-basis: 68vw; }
  .gast--haupt { flex-basis: 84vw; align-self: stretch; }
  .gast--wunsch { flex-basis: 68vw; align-self: stretch; }
}
/* Foto endet oben an der Bildkante (Tschernko): Bild schließt bündig mit der Bühne ab, statt herauszuragen */
.gast--rand .gast-buehne { overflow: hidden; }
.gast--rand .gast-buehne img { height: 100%; max-width: 100%; }

/* ===== Community, Runde 4: Feinschliff nach den Prüfberichten ===== */
/* Kopf: Logo unten links neben mir, weicher Übergang in den Live-Call */
@media (min-width: 901px) { .kopf2--frei .kopf2-bild img.kopf2-sticker { inset: auto auto 8% 1%; } }
.kopf2--gemeinschaft::after { content: ""; position: absolute; z-index: 0; inset: auto 0 0 0; height: clamp(90px, 12vw, 170px); background: linear-gradient(180deg, rgba(18,13,10,0), #120D0A 92%); pointer-events: none; }
.kopf2--gemeinschaft > * { position: relative; z-index: 1; }
.kopf2--gemeinschaft + .livecall { padding-top: clamp(36px, 5vw, 80px); }
/* Faktenkarten: Tablet in einer Reihe, Handy 2 × 2 ohne Wischen, größere Schrift */
.fakten-ring small { font-size: 13.5px; letter-spacing: .12em; }
.fakten-ring span { font-size: 14.5px; }
@media (max-width: 900px) { .kopf2--gemeinschaft .fakten-ring { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .kopf2--gemeinschaft .kopf2-bild img:not(.kopf2-sticker) { max-height: 31svh; }
  .kopf2--gemeinschaft .fakten-ring { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px; overflow: visible; scroll-snap-type: none; padding: 18px calc(var(--rand) + 4px) 8px !important; }
  .kopf2--gemeinschaft .fakten-ring li { flex: none; }
  .kopf2--gemeinschaft .fakten-ring a { padding: 11px 10px 12px; }
  .kopf2--gemeinschaft .fakten-ring b { font-size: 28px; }
}
/* Video: Abspielknopf unten rechts, das Gesicht bleibt frei */
.video--vimeo .video-play { top: auto; left: auto; right: clamp(16px, 2vw, 26px); bottom: clamp(16px, 2vw, 26px); width: 76px; height: 76px; margin: 0; }
.video--vimeo .video-play svg { width: 30px; height: 30px; }
.video--vimeo .video-unter { padding-right: clamp(110px, 12vw, 130px); }
/* Zitatzeichen der grünen Stimme oben rechts, frei vom Text */
.gstimmen > .gstimme:first-child::before { content: "\201C"; top: -14px; right: 16px; font-size: 150px; color: rgba(255,255,255,.13); }
.gstimmen > .gstimme:first-child blockquote p { padding-right: 18px; }
/* Live-Call-Szene und App-Fenster: Kleinschrift lesbarer */
.lc-nachricht b { font-size: 13.5px; }
.lc-kachel small { font-size: 14px; }
.lc-schirm figcaption { font-size: 14.5px; }
.eb-post small, .eb-termine small { font-size: 14px; color: #6E6862; }
.eb-zahlen { font-size: 14px; color: #6E6862; }
.eb-level small { font-size: 13.5px; color: #6E6862; }
.eb-reiter button { color: #6E6862; }
.eb-kurse h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; }
.eb-name > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Nummern und Adressen brechen nicht mitten durch */
a[href^="tel:"], footer li > a[href^="mailto:"] { white-space: nowrap; }
/* Gästewand am Handy: nächste Karte deutlicher angeschnitten */
@media (max-width: 560px) { .gast--haupt { flex-basis: 78vw; } }
/* Polaroid-Unterschrift bleibt auf einer Zeile */
.kf--klein figcaption { white-space: nowrap; }
@media (max-width: 560px) { .kf--klein figcaption { left: 10px; right: 6px; font-size: 16px; } }

/* Gästewand, Mouseover „Bühnenlicht“: Der Gast unter der Maus steht im Spot und tritt aus dem Bild, die anderen gehen ins Halbdunkel. Die rote Aufnahmelampe zeigt, dass der Call im Archiv liegt. */
.gast-rec--schwebe { display: none; }
@media (hover: hover) and (pointer: fine) {
  .gast-plakate > .gast { --licht-verzug: .14s; --z-verzug: .5s; transition: opacity .5s var(--ease) var(--verzug, 0ms), transform .5s var(--ease) var(--verzug, 0ms), translate .5s var(--ease), rotate .5s var(--ease), box-shadow .5s var(--ease), background-color .3s var(--ease), filter .45s var(--ease) var(--licht-verzug), z-index 0s linear var(--z-verzug); }
  .gast-plakate > .gast:hover { --licht-verzug: 0s; --z-verzug: 0s; z-index: 3; rotate: 0deg; translate: 0 -6px; box-shadow: 0 44px 60px -28px rgba(0,0,0,.95); }
  .gast-plakate:has(> .gast:hover) > .gast:not(:hover) { --licht-verzug: 0s; filter: brightness(.68) sepia(.16); }

  /* Spot: Lichtkegel von oben, Lichtpfütze am Boden, Rest der Bühne dunkler. Folgt der Maus (--mx aus site.js). */
  .gast:not(.gast--haupt):not(.gast--wunsch) .gast-buehne::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease);
    background:
      radial-gradient(34% 22% at var(--mx, 50%) 100%, rgba(255,250,222,.5), rgba(255,250,222,0) 72%),
      radial-gradient(58% 95% at var(--mx, 50%) 28%, rgba(232,255,170,.5), rgba(232,255,170,.16) 52%, rgba(232,255,170,0) 76%); }
  .gast-plakate > .gast:hover .gast-buehne::before { opacity: 1; }
  .gast--haupt::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); background: radial-gradient(40% 55% at var(--mx, 50%) var(--my, 45%), rgba(255,247,215,.3), rgba(255,247,215,0) 70%); }
  .gast--haupt > * { position: relative; }
  .gast-plakate > .gast--haupt:hover::before { opacity: 1; }

  /* Der Gast tritt nach vorn */
  .gast:not(.gast--wunsch) .gast-buehne img { transform-origin: 50% 100%; transition: transform .5s var(--ease), filter .5s var(--ease); }
  .gast-plakate > .gast:hover .gast-buehne img { transform: translateX(-50%) scale(1.06); filter: drop-shadow(0 20px 18px rgba(15,10,7,.5)); }
  .gast-plakate > .gast.gast--rand:hover .gast-buehne img { transform: translateX(-50%) scale(1.03); }
  .gast-plakate > .gast.gast--haupt:hover .gast-buehne img { transform: scale(1.025); filter: drop-shadow(0 24px 26px rgba(15,10,7,.45)); }

  /* Aufnahmelampe */
  .gast-rec--schwebe { display: block; position: absolute; z-index: 2; top: 12px; left: 12px; margin: 0; opacity: 0; translate: 0 -6px; box-shadow: 0 8px 16px -8px rgba(0,0,0,.6); pointer-events: none; transition: opacity .3s var(--ease), translate .4s var(--ease); }
  .gast-plakate > .gast:hover .gast-rec--schwebe { opacity: 1; translate: 0 0; transition-delay: .08s; }
  .gast-plakate > .gast:hover .gast-rec::before { animation: rec-lampe 1.6s ease-in-out infinite; }

  /* Wunschgast: das Plus dreht sich auf und der Kreis füllt sich */
  .gast--wunsch .gast-buehne { transition: border-color .3s var(--ease), background-color .3s var(--ease); }
  .gast--wunsch svg { transition: rotate .5s var(--ease-feder), scale .5s var(--ease-feder); }
  .gast-plakate > .gast--wunsch:hover .gast-buehne { border-style: solid; border-color: var(--gruen-licht); background-color: rgba(123,160,45,.2); }
  .gast-plakate > .gast--wunsch:hover svg { rotate: 90deg; scale: 1.12; }
}
@keyframes rec-lampe { 50% { opacity: .25; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .gast-plakate > .gast:hover { translate: none; }
  .gast-plakate > .gast:nth-child(odd):hover { rotate: -1.2deg; } .gast-plakate > .gast:nth-child(even):hover { rotate: .8deg; }
  .gast-plakate > .gast:hover .gast-buehne img, .gast-plakate > .gast.gast--rand:hover .gast-buehne img { transform: translateX(-50%); }
  .gast-plakate > .gast.gast--haupt:hover .gast-buehne img { transform: none; }
  .gast-plakate > .gast:hover .gast-rec::before { animation: none; }
  .gast-plakate > .gast--wunsch:hover svg { rotate: none; scale: none; }
}

/* Go-Live-Prüfung, Runde 1: Handy-Fehler aus dem Grafik-Gutachten */
/* Faktenzeile: steht sie untereinander, keine halb offene Box mehr */
@media (max-width: 500px) { .fakt + .fakt { padding-left: 0; border-left: 0; } }
/* Mieten: Preisschild bleibt trotz Schräglage im Bild */
@media (max-width: 900px) { .miet-anhaenger { right: max(34px, 9%); } }
/* Freigestellte Köpfe am Handy: Beine laufen weich ins Holz aus statt hart abzubrechen */
@media (max-width: 900px) { .kopf2--frei .kopf2-bild img:not(.kopf2-sticker) { -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 98%); mask-image: linear-gradient(180deg, #000 74%, transparent 98%); } }
/* Seminarkarten am Handy: Nummer kleiner, Zielgruppen-Etikett liegt darüber */
@media (max-width: 600px) { .seminar-nr { font-size: 60px; top: 12px; right: 16px; } .seminar h3 { padding-right: 64px; } .seminar-fuer { position: relative; z-index: 1; } }

/* ---------- Go-Live-Runde 2 ---------- */
/* Hinweis über älteren Blogbeiträgen (z. B. Preise von damals) */
.blog-hinweis { margin: 0 0 1.8em; padding: 16px 20px 15px; border-radius: 14px; background: var(--creme); border: 1px solid var(--linie); font-size: 17px; line-height: 1.5; color: var(--tinte-2); }
.blog-hinweis b { display: block; margin-bottom: 4px; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--holz); }
.blog-hinweis a { color: var(--gruen-dunkel); }
/* „Veranstaltungen.“ am Handy in einer Zeile statt mitten im Wort getrennt */
@media (max-width: 600px) { .kopf2-text h1.h1-ein-wort { font-size: min(56px, calc((100vw - 2 * var(--rand)) / 7.6)); } }
/* Logo-Reihe am Handy rastet am Seitenrand ein, nicht am Bildschirmrand */
@media (max-width: 600px) { .marken-ring { scroll-padding-inline: var(--rand); } }

/* ==========================================================================
   Perlknopf-Ziffern: Jede Nummer der Seite sitzt auf einem Knopf wie auf der Diskantseite einer Steirischen.
   Perlmutt mit leichtem Schimmer, dunkles Knopfloch rundherum. Ersetzt die fünf alten Nummernstile.
   ========================================================================== */
:root {
  /* Perlmutt mit Schimmer, gefasst in einen Ring aus Chrom wie die Knöpfe im Griffbrett */
  --perl-flaeche:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.7) 0 6%, rgba(255,255,255,0) 22%) padding-box,
    conic-gradient(from 200deg, rgba(255,186,214,.13), rgba(186,222,255,.13), rgba(206,246,196,.11), rgba(255,236,186,.13), rgba(255,186,214,.13)) padding-box,
    radial-gradient(circle at 40% 34%, #FBF8F2 0%, #EFE8DC 48%, #DCD1BF 86%, #CBBEA8 100%) padding-box,
    conic-gradient(from 140deg, #FBFAF7, #A39C91, #EEEAE3, #857D72, #F5F3EF, #9A9286, #FBFAF7) border-box;
  --perl-schatten: inset 0 -2px 4px rgba(84,62,40,.22), inset 0 1px 1px rgba(255,255,255,.8), 0 1px 1px rgba(20,14,10,.22), 0 5px 9px -6px rgba(20,14,10,.38);
}
.punkte span, .ladenkarte-nr, .anfrage-nr, .seminar-nr, .modell-nr {
  display: inline-grid; place-items: center; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; border: 3px solid transparent;
  background: var(--perl-flaeche); box-shadow: var(--perl-schatten);
  color: #3A2A1E; -webkit-text-stroke: 0; opacity: 1;
  font-family: var(--display); font-weight: 900; line-height: 1; letter-spacing: -.01em; text-shadow: 0 1px 0 rgba(255,255,255,.75);
}
.punkte span { width: 52px; height: 52px; font-size: 21px; margin-bottom: 18px; background-color: transparent; }
.ladenkarte-nr { background-color: transparent; }
.anfrage-nr { width: 46px; height: 46px; font-size: 21px; }
.modell-nr { width: 36px; height: 36px; font-size: 15px; letter-spacing: 0; margin-bottom: 4px; }
.seminar-nr { position: absolute; right: 20px; top: 18px; width: 64px; height: 64px; font-size: 26px; }
@media (max-width: 600px) { .seminar-nr { width: 46px; height: 46px; font-size: 19px; top: 12px; right: 12px; } .seminar h3 { padding-right: 52px; } }
/* Erledigter Schritt im Formular: grüner Knopf, eingedrückt */
.anfrage-block.ist-fertig .anfrage-nr {
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.7) 0 7%, rgba(255,255,255,0) 26%) padding-box, radial-gradient(circle at 40% 34%, #A9CC62 0%, #7BA02D 55%, #5C7E1E 100%) padding-box, conic-gradient(from 140deg, #FBFAF7, #A39C91, #EEEAE3, #857D72, #F5F3EF, #9A9286, #FBFAF7) border-box;
  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); box-shadow: inset 0 -2px 4px rgba(30,40,10,.35), inset 0 2px 3px rgba(255,255,255,.4), 0 1px 1px rgba(20,14,10,.25), 0 4px 6px -4px rgba(20,14,10,.5); transform: translateY(1px);
}
.ladenkarte-foto + .ladenkarte-kopf .ladenkarte-nr { box-shadow: var(--perl-schatten); }

/* Knopfdruck: Knöpfe haben einen sichtbaren Sockel und sinken beim Drücken hinein wie eine Taste */
.knopf:not(.knopf--linie) { box-shadow: 0 3px 0 -1px rgba(20,14,10,.34), inset 0 1px 0 rgba(255,255,255,.16), 0 12px 18px -14px rgba(20,14,10,.55); }
.knopf:not(.knopf--linie):active { transform: translateY(2px); box-shadow: 0 1px 0 -1px rgba(20,14,10,.34), inset 0 1px 3px rgba(0,0,0,.2), 0 4px 8px -8px rgba(20,14,10,.55); transition-duration: .08s; }
.knopf--linie:active { transform: translateY(2px); transition-duration: .08s; }
.kachel:active, .wahl span:active, .pinnwand-filter button:active, .eb-reiter button:active, .laden-reiter button:active, .s-weg-leiste button:active { transform: translateY(2px) scale(.985); transition-duration: .06s; }
@media (prefers-reduced-motion: reduce) { .knopf:active, .kachel:active { transform: none !important; } }
/* Breite Bildschirme (ab etwa 1500 px): Die Textspalte im Seitenkopf behält ihre 576 px, statt vom großen Rand aufgefressen zu werden */
@media (min-width: 901px) { .kopf2-text { max-width: calc(576px + max(var(--rand), calc((100vw - var(--breite)) / 2))); } }
/* „Veranstaltungen.“ passt auf jedem Bildschirm in eine Zeile */
@media (min-width: 601px) { .kopf2-text h1.h1-ein-wort { font-size: min(clamp(56px, 7.4vw, 128px), 76px); } }
@media (min-width: 1514px) { .kopf2 h1 { font-size: 112px; } }

/* Instrumente: sechs Harmonikas als Fächer, eine je Hersteller. Überfahren zeigt Name, Jahr und Region, Klick führt zum Porträt */
.balg-faecher { --b: clamp(150px, 21vw, 290px); --schritt: clamp(70px, 13.4vw, 168px); margin: 0 0 clamp(40px, 5vw, 72px); }
.balg-faecher ul { list-style: none; margin: 0; padding: 0; position: relative; height: calc(var(--b) * .7 + 80px); }
.balg-faecher li { --d: calc(var(--i) - 2.5); --hoch: 0px; position: absolute; left: 50%; top: 50px; width: var(--b); translate: calc(-50% + var(--d) * var(--schritt)) calc(var(--d) * var(--d) * 5px - var(--hoch)); rotate: calc(var(--d) * 4deg); transition: translate .28s var(--ease), rotate .28s var(--ease); }
.balg-faecher a { display: block; position: relative; border-radius: 14px; outline-offset: 6px; }
.balg-faecher img { display: block; width: 100%; height: auto; }
.balg-faecher li:hover, .balg-faecher li:focus-within { --hoch: 24px; z-index: 10; }
.balg-info { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 8px; rotate: calc(var(--d) * -4deg); display: grid; justify-items: center; gap: 2px; padding: 9px 16px 10px; border-radius: 10px; background: #fbf7ee; color: var(--tinte); white-space: nowrap; box-shadow: 0 14px 26px -12px rgba(0,0,0,.7); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), translate .2s var(--ease); }
.balg-info b { font-family: var(--display); font-weight: 900; font-size: 24px; line-height: 1; text-transform: uppercase; color: var(--gruen-dunkel); }
.balg-info small { font-size: 14px; line-height: 1.2; color: var(--tinte-2); }
.balg-faecher li:hover .balg-info, .balg-faecher a:focus-visible .balg-info { opacity: 1; translate: -50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .balg-faecher li { animation: balg-auf .9s var(--ease-feder) backwards paused; animation-delay: calc(.2s + var(--i) * 70ms); }
  .js .balg-faecher.ist-da li { animation-play-state: running; }
  /* Ohne Ausblenden: halbdurchsichtige, übereinanderliegende Harmonikas sahen beim Auffächern wie ein Röntgenbild aus. Jetzt liegt ein Stapel da, der sich auffächert. */
  @keyframes balg-auf { from { translate: -50% 40px; rotate: 0deg; } }
}
@media (max-width: 700px) { .balg-faecher { --b: 31vw; --schritt: 11.4vw; } .balg-faecher ul { height: calc(var(--b) * .7 + 60px); } .balg-faecher li { top: 34px; } .balg-info { display: none; } }

/* Warteliste: Ticket im Seitenkopf mit Stempel „Ausverkauft“. Es zeigt Termin und Kartenzahl aus dem Formular, nach dem Eintragen den Platz */
.wl-ticket { right: auto; left: calc(max(var(--rand), calc((100vw - var(--breite)) / 2)) + clamp(360px, 29vw, 440px)); bottom: clamp(40px, 5vw, 72px); width: min(420px, 29vw); transform: rotate(-4deg); pointer-events: none; }
.wl-ticket .kopf-ticket-haupt { position: relative; padding: 20px 22px 20px 24px; min-height: 150px; align-content: center; }
.wl-ticket .kopf-ticket-haupt b { font-size: clamp(20px, 1.75vw, 26px); line-height: .98; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wl-ticket .kopf-ticket-haupt small { font-size: 12.5px; letter-spacing: .16em; }
.wl-ticket .kopf-ticket-abriss { width: 27%; }
.wl-ticket .kopf-ticket-abriss b { font-size: clamp(44px, 4vw, 60px); line-height: .85; }
.wl-stempel { position: absolute; right: 10px; bottom: 12px; padding: 5px 10px 4px; border: 3px double currentColor; border-radius: 6px; color: #b8432b; font-family: var(--display); font-style: normal; font-weight: 900; font-size: 19px; letter-spacing: .1em; text-transform: uppercase; line-height: 1; rotate: -11deg; opacity: .88; mix-blend-mode: multiply; }
.wl-ticket.ist-eingetragen .wl-stempel { color: var(--gruen-dunkel); }
@media (prefers-reduced-motion: no-preference) {
  .wl-stempel { animation: stempel-drauf .45s cubic-bezier(.3, 1.4, .5, 1) 1.1s backwards; }
  @keyframes stempel-drauf { from { scale: 1.8; opacity: 0; } }
}
@media (max-width: 1100px) { .wl-ticket { display: none; } }

/* Schnur am Türschild: zwei feine Linien vom Nagel zu den Ösen (vorher schnitt die Maske die Schnur fast ganz weg) */
.laden-schild-haken { border: 0; border-radius: 0; clip-path: none; top: -54px; width: 128px; height: 56px;
  background:
    linear-gradient(to top left, transparent calc(50% - 2.2px), rgba(30,20,12,.45) calc(50% - 1.8px), #e6d6b6 calc(50% - 1px) calc(50% + 1px), rgba(30,20,12,.45) calc(50% + 1.8px), transparent calc(50% + 2.2px)) left / 50% 100% no-repeat,
    linear-gradient(to top right, transparent calc(50% - 2.2px), rgba(30,20,12,.45) calc(50% - 1.8px), #e6d6b6 calc(50% - 1px) calc(50% + 1px), rgba(30,20,12,.45) calc(50% + 1.8px), transparent calc(50% + 2.2px)) right / 50% 100% no-repeat; }
.laden-schild-haken::before { content: ""; position: absolute; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: #8a7a62; box-shadow: inset 0 1px 1px rgba(0,0,0,.5), 120px 0 0 #8a7a62; left: -3px; }
.laden-schild-haken::after { top: -5px; }

/* Kamerafahrt nach der Postleitzahl: Pin-Namen behalten beim Hineinfahren ihre Größe, dazu Strecke, Du-Punkt und Fahrzeit */
.lk-pin-name { transform-box: view-box; transform-origin: var(--ox, 0) var(--oy, 0); transform: scale(calc(1 / var(--z, 1))); }
@media (max-width: 700px) {
  .lk-pin-name { transform: scale(calc(1 / var(--z, 1))) translate(14px, -26px); }
  .lk-pin-name[text-anchor="end"] { transform: scale(calc(1 / var(--z, 1))) translate(-14px, -26px); }
}
.lk-route { opacity: 0; transition: opacity .5s var(--ease); }
.lk-route.ist-da { opacity: 1; }
.lk-route-linie { fill: none; stroke: var(--tinte); stroke-width: 2.6; stroke-dasharray: 1 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lk-du-hof { fill: rgba(123,160,45,.24); }
.lk-du-punkt { fill: var(--tinte); stroke: #F4EEE2; stroke-width: 3.5; }
.lk-du text { font-family: var(--display); font-weight: 900; font-size: 18px; letter-spacing: .05em; text-transform: uppercase; fill: var(--tinte); paint-order: stroke; stroke: #F4EEE2; stroke-width: 6px; stroke-linejoin: round; }
.lk-strecke rect { fill: var(--gruen-tief); filter: url(#lk-schatten); }
.lk-strecke text { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; fill: var(--weiss); }
.lk-ganz { position: absolute; z-index: 2; top: 14px; right: 14px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--weiss); color: var(--tinte); font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 16px -6px rgba(30,23,18,.35); cursor: pointer; }
.lk-ganz:hover { background: var(--papier); }
.lk-ganz:active { translate: 0 2px; }
.lk-massstab { transition: opacity .4s var(--ease); }
.ist-gezoomt .lk-massstab { opacity: 0; }
/* stärker als die Einblend-Regel (.js .landkarte.ist-da …), damit die Pin-Namen beim Hineinfahren klein bleiben */
.landkarte .lk-pin .lk-pin-name, .js .landkarte.ist-da .lk-pin .lk-pin-name { transform: scale(calc(1 / var(--z, 1))); }
@media (max-width: 700px) {
  .landkarte .lk-pin .lk-pin-name, .js .landkarte.ist-da .lk-pin .lk-pin-name { transform: scale(calc(1 / var(--z, 1))) translate(14px, -26px); }
  .landkarte .lk-pin .lk-pin-name[text-anchor="end"], .js .landkarte.ist-da .lk-pin .lk-pin-name[text-anchor="end"] { transform: scale(calc(1 / var(--z, 1))) translate(-14px, -26px); }
}
/* Ortsnamen wachsen beim Hineinfahren nur gebremst mit, damit die Läden die größten Namen behalten */
/* Drehpunkt ist der Ankerpunkt des Namens (x, Mitte der Schrifthöhe), gesetzt von site.js. Safari ignoriert transform-box: fill-box bei SVG-Text
   und skaliert sonst um die linke obere Kartenecke, dann wandern die Namen beim Hineinfahren weg von ihren Punkten. */
.lk-ort text, .lk-laendername text, .lk-gebirge text { transform-box: view-box; transform-origin: var(--ox, 0px) calc(var(--oy, 0px) - .35em); transform: scale(calc(1 / sqrt(var(--z, 1)))); }

/* Lernen: „Welcher Einstieg passt zu dir?“ Drei Fragen, die passende Karte tritt nach vorn, die anderen gehen ins Halbdunkel */
.einstieg-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.einstieg-fragen h2 { font-size: clamp(42px, 4.6vw, 76px); line-height: .94; margin-bottom: 18px; }
.einstieg-unter { color: var(--tinte-2); margin: 0 0 26px; max-width: 42ch; }
.einstieg-frage { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.einstieg-frage legend { padding: 0; font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .03em; text-transform: uppercase; color: var(--tinte); }
.einstieg-tipp { margin: 8px 0 0; padding: 18px 20px; border-radius: 16px; background: var(--weiss); box-shadow: inset 0 0 0 2px var(--gruen-tief); font-size: 17.5px; line-height: 1.5; color: var(--tinte); max-width: 46ch; }
.einstieg-tipp b { color: var(--gruen-dunkel); }
.einstieg-neu { margin-top: 12px; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--tinte-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.einstieg-neu:hover { color: var(--gruen-dunkel); }
.einstieg-karten { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.einstieg-karten li { transition: opacity .35s var(--ease), filter .35s var(--ease), transform .35s var(--ease); }
.einstieg-karten a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 18px; background: var(--weiss); color: var(--tinte); text-decoration: none; box-shadow: 0 1px 0 rgba(30,23,18,.06), 0 14px 30px -22px rgba(30,23,18,.45); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.einstieg-karten a:hover { box-shadow: 0 0 0 2px var(--gruen), 0 18px 34px -22px rgba(30,23,18,.5); }
.einstieg-text { display: grid; gap: 1px; min-width: 0; }
.einstieg-text small { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-dunkel); }
.einstieg-text b { font-family: var(--display); font-weight: 900; font-size: clamp(24px, 2.2vw, 30px); line-height: 1; text-transform: uppercase; }
.einstieg-text > span { font-size: 15.5px; color: var(--tinte-2); line-height: 1.35; margin-top: 3px; }
.einstieg-preis { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; color: var(--tinte); white-space: nowrap; }
.einstieg-marke { position: absolute; top: -11px; right: 18px; padding: 5px 11px 4px; border-radius: 999px; font-family: var(--display); font-style: normal; font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; line-height: 1; opacity: 0; translate: 0 4px; transition: opacity .3s var(--ease), translate .3s var(--ease); }
.einstieg-marke:empty { display: none; }
.einstieg-karten .ist-erste { transform: translateX(-10px) scale(1.02); }
.einstieg-karten .ist-erste a { box-shadow: 0 0 0 2.5px var(--gruen-tief), 0 24px 40px -24px rgba(30,23,18,.6); }
.einstieg-karten .ist-erste .einstieg-marke { background: var(--gruen-tief); color: var(--weiss); opacity: 1; translate: 0 0; }
.einstieg-karten .ist-zweite a { box-shadow: 0 0 0 1.5px var(--gruen), 0 14px 30px -22px rgba(30,23,18,.45); }
.einstieg-karten .ist-zweite .einstieg-marke { background: var(--weiss); color: var(--gruen-dunkel); box-shadow: inset 0 0 0 1.5px var(--gruen); opacity: 1; translate: 0 0; }
.einstieg-karten .ist-hinten { opacity: .38; filter: saturate(.4); }
.einstieg-karten .ist-hinten:hover { opacity: .8; }
@media (max-width: 900px) {
  .einstieg-raster { grid-template-columns: 1fr; }
  .einstieg-karten .ist-erste { transform: scale(1.015); }
  .einstieg-karten a { padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .einstieg-karten li, .einstieg-marke { transition: none; } }
/* Kamerafahrt: Ortsnamen und Schilder unter „Du“ und dem Streckenschild treten zurück */
.landkarte .lk-weg { opacity: 0 !important; transition: opacity .3s var(--ease) !important; }
/* Handy: Kartennachweis unter der Karte statt über Ortsnamen und Pins (die spätere Grundregel hatte ihn wieder über die Karte gelegt) */
@media (max-width: 700px) { .landkarte figcaption { position: static; padding: 6px 14px 10px; text-align: right; opacity: 1; } }
/* Warteliste-Ticket nach der Prüfung: echter Abriss mit gerissener Kante, mehr Luft zum Foto, kräftigerer Stempel */
.wl-ticket { left: auto; right: calc(25vw + 225px); width: min(400px, 26vw); gap: 10px; }  /* rechte Kante gut 50 px vor der Harmonika im Foto */
@media (max-width: 1339px) { .wl-ticket { display: none; } }
.wl-ticket .kopf-ticket-haupt { -webkit-mask: none; mask: none; border-radius: 14px 0 0 14px; padding-bottom: 58px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 7%, 100% 13%, calc(100% - 5px) 21%, calc(100% - 1px) 28%, calc(100% - 6px) 36%, calc(100% - 2px) 44%, 100% 51%, calc(100% - 5px) 59%, calc(100% - 1px) 66%, calc(100% - 6px) 74%, calc(100% - 2px) 82%, calc(100% - 4px) 90%, 100% 100%, 0 100%); }
.wl-ticket .kopf-ticket-abriss { -webkit-mask: none; mask: none; border-left: 0; border-radius: 0 14px 14px 0; translate: 6px 10px; rotate: 6deg; align-content: center; gap: 4px;
  clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 4px 90%, 2px 82%, 6px 74%, 1px 66%, 5px 59%, 0 51%, 2px 44%, 6px 36%, 1px 28%, 5px 21%, 0 13%, 4px 7%); }
.wl-ticket .kopf-ticket-abriss small { opacity: .9; letter-spacing: .18em; }
.wl-stempel { right: 14px; bottom: 14px; font-size: clamp(18px, 1.45vw, 23px); border-width: 4px; opacity: .95; }
/* Fächer jetzt als Aufmacher bei „Meine Partner“ auf hellem Grund: weicher Schatten, dunkles Schild, die anderen treten zurück statt schwarz zu werden */
.balg-info { background: var(--holz-tief); color: var(--hell); box-shadow: 0 14px 26px -12px rgba(30,20,12,.55); }
.balg-info b { color: var(--gruen-licht); }
.balg-info small { color: var(--hell-2); }
@media (max-width: 700px) { .balg-faecher { display: none; } }
.balg-faecher { --schritt: clamp(90px, 14.6vw, 206px); }  /* weniger Überlappung: jedes Instrument bleibt als Ganzes lesbar */
/* Kamerafahrt nach der Prüfung: Läden im Zoom größer beschriftet als jeder Ortsname, Pfeil statt Punkt für Orte außerhalb der Karte */
.landkarte .lk-pin .lk-pin-name, .js .landkarte.ist-da .lk-pin .lk-pin-name { transform: scale(calc(1 / sqrt(var(--z, 1)))); }
@media (max-width: 700px) {
  .landkarte .lk-pin .lk-pin-name, .js .landkarte.ist-da .lk-pin .lk-pin-name { transform: scale(calc(1 / sqrt(var(--z, 1)))) translate(14px, -26px); }
  .landkarte .lk-pin .lk-pin-name[text-anchor="end"], .js .landkarte.ist-da .lk-pin .lk-pin-name[text-anchor="end"] { transform: scale(calc(1 / sqrt(var(--z, 1)))) translate(-14px, -26px); }
}
.lk-du-pfeil { fill: var(--tinte); stroke: #F4EEE2; stroke-width: 3; stroke-linejoin: round; }
.balg-faecher { margin-bottom: clamp(56px, 6vw, 96px); }
/* Handy: „Ganze Karte“ hat einen festen Platz unter der Karte, links neben dem Kartennachweis, und verdeckt nie einen Ort */
@media (max-width: 700px) {
  .lk-ganz { top: auto; right: auto; bottom: 8px; left: 10px; min-height: 34px; padding: 0 14px; font-size: 13px; }
  .landkarte figcaption { box-sizing: border-box; min-height: 50px; padding: 9px 14px 9px 136px; }
}
/* Einstieg nach der Prüfung: die Tipp-Karte zeigt den nächsten Schritt, am Handy steht sie oben */
.einstieg-los { display: none; grid-column: 1 / -1; justify-self: start; align-items: center; gap: 10px; margin-top: 2px; padding: 11px 20px 10px; border-radius: 999px; background: var(--gruen-tief); color: var(--weiss); font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; box-shadow: 0 3px 0 -1px rgba(20,14,10,.3); }
.einstieg-los .pfeil { width: 16px; height: 16px; transition: translate .25s var(--ease); }
.einstieg-karten .ist-erste .einstieg-los { display: inline-flex; }
.einstieg-karten .ist-erste a:hover .einstieg-los .pfeil { translate: 4px 0; }
@media (max-width: 900px) {
  .einstieg-karten .ist-erste { order: -2; transform: none; }
  .einstieg-karten .ist-zweite { order: -1; }
}
/* Perlknöpfe auch für die Schritte (So läuft der Kauf, Miete): eine Nummernart auf der ganzen Seite */
.schritte li::before { content: counter(schritt, decimal-leading-zero); display: grid; place-items: center; width: 52px; height: 52px; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; border: 3px solid transparent; background: var(--perl-flaeche); box-shadow: var(--perl-schatten); color: #3A2A1E; font-family: var(--display); font-weight: 900; font-size: 21px; line-height: 1; letter-spacing: -.01em; text-shadow: 0 1px 0 rgba(255,255,255,.75); margin-bottom: 16px; }
/* Seitenköpfe nach der Prüfung: „Veranstaltungen.“ am Rechner so kräftig wie die anderen Unterseiten, Text liegt ruhiger auf dem Foto, Fotonachweis lesbar */
@media (min-width: 1100px) { .kopf2-text h1.h1-ein-wort { font-size: clamp(72px, 5vw, 100px); max-width: none; white-space: nowrap; } }
@media (min-width: 901px) { .kopf2--panorama::before { background: linear-gradient(90deg, rgba(15,10,7,.92) 0%, rgba(15,10,7,.8) 30%, rgba(15,10,7,.5) 48%, rgba(15,10,7,.06) 74%), linear-gradient(0deg, rgba(15,10,7,.78) 0%, rgba(15,10,7,0) 46%), linear-gradient(180deg, rgba(15,10,7,.55), rgba(15,10,7,0) 22%); } }
.kopf2-quelle { padding: 3px 9px; border-radius: 6px; background: rgba(15,10,7,.62); color: rgba(255,255,255,.88); text-shadow: none; }

/* Gebirgsnamen liegen über Straßen und Flüssen, mit hellem Hof wie die Ortsnamen */
.lk-gebirge text { paint-order: stroke; stroke: #F4EEE2; stroke-width: 4px; stroke-linejoin: round; }

/* Warteliste-Ticket: unregelmäßige Reißkante, Stempel frei unter dem Titel, Luft zur Überschrift */
.wl-ticket { bottom: 26px; }
.wl-ticket .kopf-ticket-haupt { padding-bottom: 80px; clip-path: polygon(0 0, 100% 0, calc(100% - 1px) 2.6%, calc(100% - 2px) 7.3%, calc(100% - 7px) 11.9%, 100% 17.4%, calc(100% - 1px) 20.6%, calc(100% - 5px) 23.7%, calc(100% - 3px) 28.6%, calc(100% - 9px) 33.2%, calc(100% - 9px) 36.4%, calc(100% - 2px) 41.1%, calc(100% - 4px) 44.7%, calc(100% - 2px) 49.7%, calc(100% - 1px) 52.4%, calc(100% - 8px) 55.4%, calc(100% - 8px) 60.8%, calc(100% - 1px) 64.3%, calc(100% - 2px) 67.4%, calc(100% - 2px) 72.5%, calc(100% - 8px) 77.0%, calc(100% - 8px) 79.7%, calc(100% - 7px) 83.9%, calc(100% - 2px) 88.5%, calc(100% - 1px) 91.3%, calc(100% - 4px) 95.9%, 100% 100%, 0 100%); }
.wl-ticket .kopf-ticket-abriss { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 4px 95.9%, 1px 91.3%, 2px 88.5%, 7px 83.9%, 8px 79.7%, 8px 77.0%, 2px 72.5%, 2px 67.4%, 1px 64.3%, 8px 60.8%, 8px 55.4%, 1px 52.4%, 2px 49.7%, 4px 44.7%, 2px 41.1%, 9px 36.4%, 9px 33.2%, 3px 28.6%, 5px 23.7%, 1px 20.6%, 0 17.4%, 7px 11.9%, 2px 7.3%, 1px 2.6%); gap: 2px; }
.wl-ticket .kopf-ticket-abriss small { font-size: 12px; letter-spacing: .14em; }
.wl-ticket .kopf-ticket-abriss b { margin-bottom: 4px; }
/* Veranstaltungen: Ticket mit dem nächsten Termin, rechts neben Adrian im Foto */
.kopf-ticket--termin .kopf-ticket-haupt { padding: 20px 22px 20px 24px; }
.kopf-ticket--termin .kopf-ticket-haupt small { font-size: 12.5px; letter-spacing: .16em; }
.kopf-ticket--termin .kopf-ticket-haupt b { font-size: clamp(20px, 1.75vw, 26px); line-height: .98; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kopf-ticket--termin .kopf-ticket-abriss { width: 30%; }
.kopf-ticket--termin .kopf-ticket-abriss small { font-size: 12px; letter-spacing: .16em; }
@media (min-width: 901px) { .kopf-ticket--termin { right: auto; left: calc(69vw + 10px); width: min(400px, calc(31vw - 10px - var(--rand))); } }
@media (min-width: 901px) and (max-width: 1149px) { .kopf-ticket--termin { display: none; } }
/* Einstieg: Abzeichen mit Luft zur Karte darüber, zurückgetretene Karten bleiben gut lesbar */
.einstieg-karten { gap: 22px; }
.einstieg-karten .ist-hinten { opacity: .62; filter: saturate(.5); }
/* Poppenhausen: Bildausschnitt etwas tiefer, damit das Logo im Schaufenster unter dem Namen liegt statt dahinter */
@media (min-width: 901px) { .kopf2--laden-poppenhausen .kopf2-bild img { object-position: 50% 0%; transform: scale(1.12); transform-origin: 0 70%; } }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .kopf2--laden-poppenhausen .kopf2-bild img { animation-name: schaufenster-pop; }
  @keyframes schaufenster-pop { from { transform: scale(1.22); } to { transform: scale(1.12); } }
}
/* Ladenseiten: Ortsnamen etwas kleiner, damit sie im Foto nicht auf Fensterschrift und Plakaten liegen */
@media (min-width: 901px) { .kopf2[class*="kopf2--laden-"] h1 { font-size: clamp(56px, 6.4vw, 104px); } }

/* Runde 30: Ticketgesichter. Safari zeichnet drop-shadow und mask-image auf demselben Element als grauen Kasten.
   Deshalb drei Ebenen: außen (span.ticket-gesicht) Lage, Drehung und die Ausblend-Maske, die wie früher auch den Schatten
   an der Unterkante abschneidet; in der Mitte (.ticket-schatten) der Schatten; innen das Bild. */
span.ticket-gesicht { display: flex; justify-content: flex-end; align-items: flex-end; filter: none; }
.ticket--aus span.ticket-gesicht, .ticket--abgesagt span.ticket-gesicht, span.ticket-gesicht--logo { filter: none; }
.ticket-schatten { display: flex; justify-content: flex-end; align-items: flex-end; height: 100%; min-width: 0; max-width: 100%; filter: drop-shadow(0 16px 14px rgba(15,10,7,.38)); }
.ticket--aus .ticket-schatten, .ticket--abgesagt .ticket-schatten { filter: drop-shadow(0 16px 14px rgba(15,10,7,.38)) saturate(.6); }
span.ticket-gesicht--logo .ticket-schatten { filter: drop-shadow(0 12px 16px rgba(15,10,7,.45)); }
span.ticket-gesicht img { display: block; height: 100%; width: auto; max-width: 100%; min-width: 0; object-fit: contain; object-position: right bottom; -webkit-mask-image: none; mask-image: none; }

/* Runde 31: Auch Maske außen und Schatten innen malt das echte Safari über die Grafikkarte als Kasten (die Software-Vorschau zeigt
   ihn nicht). Deshalb stecken Schatten und Ausblendung jetzt fest im Bild (werkzeuge/ticketbilder.py), und keine Ebene trägt mehr
   eine Maske. Das fertige Bild hat Rand für den Schatten: seitlich 11 %, oben 4 % der Personenhöhe. Mit Containereinheiten sitzt die
   Person genau wie vorher (höchstens 64 % der Ticketbreite, rechts unten); ohne sie zeigt object-fit das Bild etwas kleiner. */
span.ticket-gesicht { -webkit-mask-image: none; mask-image: none; }
.ticket--aus span.ticket-gesicht--fertig img, .ticket--abgesagt span.ticket-gesicht--fertig img { filter: saturate(.6); }
@supports (width: 1cqw) {
  .ticket--bild { container-type: inline-size; }
  span.ticket-gesicht--fertig { --gh: 200px; --h: min(var(--gh), calc(min(64cqw, 100cqw - 170px) / var(--ar))); display: block; height: var(--h); width: calc(var(--h) * var(--ar)); max-width: none; }
  span.ticket-gesicht--fertig img { position: absolute; right: calc(var(--h) * -.11); bottom: 0; width: auto; height: calc(var(--h) * 1.04); max-width: none; }
  @media (max-width: 480px) { span.ticket-gesicht--fertig { --gh: 176px; } }
}

/* Runde 30: Fächer ohne CSS-Filter. Safari malt drop-shadow auf bewegten Bildern als dunklen Kasten, bis die Animation steht.
   Schatten und Grauversion sind deshalb fertige Bilder (werkzeuge/faecherbilder.py); bewegt werden nur noch Lage und Deckkraft. */
.balg-faecher .balg-farbe { position: relative; }
.balg-faecher .balg-schatten, .balg-faecher .balg-grau { position: absolute; left: 0; top: 0; pointer-events: none; transition: opacity .28s var(--ease); }
.balg-faecher .balg-schatten { width: 116%; max-width: none; height: auto; margin: -4% 0 0 -8%; }  /* Ränder wie RAND_SEITE und RAND_OBEN im Werkzeug */
.balg-faecher .balg-grau { opacity: 0; }
.balg-faecher ul:hover li:not(:hover) .balg-grau { opacity: 1; }
.balg-faecher ul:hover li:not(:hover) .balg-schatten { opacity: .42; }

/* Runde 30: Perlknöpfe geben nach. Fährt die Maus über den Knopf oder seine Karte, sinkt er ein wie ein Diskantknopf,
   und das Licht wandert über Perlmutt und Chromring. Nur mit Maus; Touch und reduzierte Bewegung bleiben ruhig. */
@property --perl-dreh { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.punkte span, .ladenkarte-nr, .anfrage-nr, .seminar-nr, .modell-nr, .s-weg-nr, .schritte li::before {
  --perl-flaeche:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.7) 0 6%, rgba(255,255,255,0) 22%) padding-box,
    conic-gradient(from calc(200deg + var(--perl-dreh)), rgba(255,186,214,.13), rgba(186,222,255,.13), rgba(206,246,196,.11), rgba(255,236,186,.13), rgba(255,186,214,.13)) padding-box,
    radial-gradient(circle at 40% 34%, #FBF8F2 0%, #EFE8DC 48%, #DCD1BF 86%, #CBBEA8 100%) padding-box,
    conic-gradient(from calc(140deg + var(--perl-dreh)), #FBFAF7, #A39C91, #EEEAE3, #857D72, #F5F3EF, #9A9286, #FBFAF7) border-box;
  transition: translate .16s var(--ease), scale .16s var(--ease), box-shadow .16s var(--ease), --perl-dreh .9s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  :is(.punkte span, .ladenkarte-nr, .anfrage-nr, .seminar-nr, .modell-nr, .s-weg-nr):hover,
  :is(li, article):hover :is(.punkte span, .ladenkarte-nr, .seminar-nr, .modell-nr, .s-weg-nr),
  .schritte li:hover::before {
    --perl-dreh: 80deg;
    --perl-schatten: inset 0 2px 5px rgba(84,62,40,.3), inset 0 -1px 1px rgba(255,255,255,.6), 0 1px 1px rgba(20,14,10,.16), 0 2px 4px -3px rgba(20,14,10,.3);
    translate: 0 2px; scale: .96;
  }
}
@media (prefers-reduced-motion: reduce) {
  .punkte span, .ladenkarte-nr, .anfrage-nr, .seminar-nr, .modell-nr, .s-weg-nr, .schritte li::before { transition: box-shadow .16s linear; }
  :is(.punkte span, .ladenkarte-nr, .anfrage-nr, .seminar-nr, .modell-nr, .s-weg-nr):hover,
  :is(li, article):hover :is(.punkte span, .ladenkarte-nr, .seminar-nr, .modell-nr, .s-weg-nr),
  .schritte li:hover::before { translate: none; scale: none; --perl-dreh: 0deg; }
}

/* Runde 30: Beschriftungen mit hellem Rand ohne Zeichenabstand. Safari malt bei Zeichenabstand jeden Buchstaben einzeln
   samt Rand, und der Rand des nächsten Buchstaben schneidet den vorigen an. Weit gesperrte Namen (Länder, Gebirge) sind nicht betroffen. */
.lk-pin-name, .lk-du text, .pin-name { letter-spacing: 0; }
/* Runde 30: Kärntnerland-Betriebsführung. Statt eines Gesichts steht eine ihrer Harmonikas auf der Bühne, quer und etwas kleiner */
.gast--instrument .gast-buehne img { height: auto; width: 80%; max-width: 80%; bottom: 12px; rotate: -4deg; }

/* Runde 30: Harmonikameile mit Logos. Alle Logos in einer Tinte, rechts in der Kachel, damit die Liste ruhig bleibt.
   Quelle der Logos: Partnerlogos der Website und die Ausstellerseite von harmonika-festival.de. */
.aussteller { gap: 10px; }
.aussteller li { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 14px; align-content: stretch; min-height: 74px; padding: 14px 14px 12px 16px; }
.aussteller li b, .aussteller li span { grid-column: 1; }
/* Logos nach Fläche statt nach Kastenbreite: --lw steht je Logo im HTML, so wirken breite Wortmarken und runde Siegel gleich schwer */
.aussteller li img { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; width: var(--lw, 104px); height: auto; max-height: 48px; object-fit: contain; object-position: 100% 50%; opacity: .9; }
/* Wo die Kacheln schmal werden, steht das Logo oben über dem Namen */
@media (min-width: 901px) and (max-width: 1180px), (min-width: 421px) and (max-width: 600px) {
  .aussteller li { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: start; padding-top: 18px; }
  .aussteller li img { grid-column: 1; grid-row: 1; justify-self: start; width: min(var(--lw, 104px), 100%); height: 48px; object-position: 0 50%; margin-bottom: 10px; }
  .aussteller li b { grid-row: 2; } .aussteller li span { grid-row: 3; }
}

/* Runde 32: echte Strecke vom Routendienst, durchgezogen mit hellem Rand. Der gepunktete Bogen bleibt für den Fall ohne Antwort. */
.lk-route-rand { fill: none; stroke: #F4EEE2; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lk-route-linie--echt { stroke: #4F6B18; stroke-width: 5.5; stroke-dasharray: none; stroke-linejoin: round; }
@media (max-width: 700px) { .lk-route-rand { stroke-width: 9; } .lk-route-linie--echt { stroke-width: 4.5; } }
.ladenfinder-hinweis { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--tinte-2); }
.ladenfinder-ergebnis:not(:empty) + .ladenfinder-hinweis { display: none; }
.ladenfinder-quelle { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--tinte-2); }
.ladenfinder-hinweis a, .ladenfinder-quelle a { color: inherit; }

/* Runde 33: Personenbilder stehen scharf und genau auf der Unterkante des grünen Datumsfelds (ohne Ausblendung, werkzeuge/ticketbilder.py).
   Das Feld ist immer 156 px hoch (der Inhalt braucht höchstens 153 px), das Bild endet genau dort. Gedreht wird das Bild um dieselbe
   senkrechte Achse wie das Ticket (dessen Mitte), so bleibt seine Unterkante deckungsgleich mit der gedrehten Feldkante. */
.ticket--bild .ticket-datum { min-height: 156px; }
span.ticket-gesicht--fertig { bottom: calc(100% - 156px); }
@supports (width: 1cqw) { span.ticket-gesicht--fertig { transform-origin: calc(100% + 12px - 50cqw) 100%; } }

/* Runde 33: Festival-Logo mit fest eingerechnetem Schatten, ohne CSS-Filter (Safari malte dahinter einen dunklen Kasten).
   Rand im Bild: seitlich 20 %, oben 6 %, unten 30 % der Logohöhe. Das Logo bleibt 128 px hoch und an seiner Stelle,
   auch am Handy (vorher wuchs es dort auf 176 px und stieß an das Datum). */
span.ticket-gesicht--logo { --lh: 128px; height: calc(var(--lh) * 1.36); bottom: calc(100% - 140px - var(--lh) * .30); right: calc(18px - var(--lh) * .20); max-width: none; }
span.ticket-gesicht--logo .ticket-schatten { filter: none; max-width: none; }
.ticket--aus span.ticket-gesicht--logo .ticket-schatten, .ticket--abgesagt span.ticket-gesicht--logo .ticket-schatten { filter: saturate(.6); }
span.ticket-gesicht--logo img { max-width: none; }

/* Runde 33: Kärntnerland-Karte zeigt die zwei Spieler aus dem Herstellerfoto. Das Bild ist breit, deshalb bleibt es seitlich in der Karte. */
.gast--gruppe .gast-buehne img { max-width: 96%; }

/* Runde 33: Werkzeuge für zu Hause, meine eigenen zuerst (b_werkzeuge in bauen.py). Community-Karte auf dunklem Holz mit Schriftlogo. */
.werkzeug-karte--community { --marke: var(--holz-tief); --marke-text: var(--hell); }
.werkzeug-karte--community .werkzeug-kopf { background: var(--holz-tief) url("../img/holz-bahn-klein.webp") center / 900px auto; }
.werkzeug-karte--community .werkzeug-kopf::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(23,17,13,.55), rgba(23,17,13,.82)); }
.werkzeug-karte--community a:hover, a.werkzeug-karte--community:hover { box-shadow: 0 0 0 2px var(--gruen), 0 30px 60px -40px rgba(30,23,18,.7); }
.werkzeug-kopf img.werkzeug-logo-breit { position: relative; width: auto; height: 66px; border-radius: 0; box-shadow: none; }
@media (min-width: 901px) {
  .werkzeuge--4, .werkzeuge--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .werkzeuge--4 .werkzeug-karte--qa, .werkzeuge--4 .werkzeug-karte--bald { grid-template-rows: auto 1fr auto; }
}
@media (min-width: 1200px) { .werkzeuge--4 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); } }
/* „bald“ stieß in der schmalen vierten Karte an das Wort Nachschlag: dort steht es jetzt hinter oder unter dem Wort */
.werkzeuge--4 .werkzeug-karte--bald .werkzeug-kopf { flex-wrap: wrap; align-content: center; gap: 8px 12px; }
.werkzeuge--4 .werkzeug-karte--bald .werkzeug-kopf i { position: static; }

/* Runde 33: Blogbeiträge zeigen in der Seitenleiste meine eigenen Sachen */
.artikel-angebote { display: grid; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie); }
.artikel-seite .artikel-angebote-titel { margin: 0 0 2px; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-dunkel); }
.artikel-angebot { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 14px; background: var(--weiss); color: var(--tinte); text-decoration: none; box-shadow: 0 0 0 1px rgba(30,23,18,.06); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.artikel-angebot:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--gruen); }
.artikel-angebot img { flex: none; width: 52px; height: 52px; object-fit: contain; border-radius: 12px; }
.artikel-angebot b { display: block; font-family: var(--display); font-weight: 900; font-size: 19px; line-height: 1; text-transform: uppercase; }
.artikel-angebot small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.3; color: var(--tinte-2); }

/* Runde 34: Hover bei Personen seitenweit wie in der Gästeliste auf /community/. Die Karte bleibt liegen, wie sie liegt (vorher hoben sich
   Ticket und Person getrennt um 6 px, mit verschiedenen Kurven, dazwischen blitzte eine Lücke auf). Nur das Bild wächst, Drehpunkt unten
   in der Mitte, so bleibt die Unterkante der Person genau auf der grünen Kante. Kein Filter am bewegten Bild (Schatten steckt im Bild). */
@media (hover: hover) and (pointer: fine) {
  span.ticket-gesicht img { transform-origin: 50% 100%; transition: transform .5s var(--ease); }
  .ticket:hover span.ticket-gesicht img, .ticket:focus-within span.ticket-gesicht img { transform: scale(1.06); }
  .ticket:hover span.ticket-gesicht--logo img, .ticket:focus-within span.ticket-gesicht--logo img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { span.ticket-gesicht img { transition: none; } .ticket:hover span.ticket-gesicht img, .ticket:focus-within span.ticket-gesicht img { transform: none; } }

/* Runde 34: Martin Tschernko. Der aufgezogene Balg ragt oben über das grüne Feld, wie bei den anderen Gästen. Das Bild ist genau so breit
   wie die Karte (der angeschnittene Arm endet an der linken Kartenkante), die Höhe ergibt sich aus dem Seitenverhältnis. Beim Überfahren
   wächst es von unten links aus, so bleibt der Arm an der Kante und nichts schiebt sich über den Kartenrand nach links. */
.gast--rand .gast-buehne { overflow: visible; }
.gast--rand .gast-buehne img { left: 0; width: 100%; height: auto; max-width: 100%; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .gast-plakate > .gast.gast--rand .gast-buehne img { transform-origin: 0 100%; }
  .gast-plakate > .gast.gast--rand:hover .gast-buehne img { transform: scale(1.03); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) { .gast-plakate > .gast.gast--rand:hover .gast-buehne img { transform: none; } }
/* Sein Gesicht sitzt oben links, dort, wo bei den anderen die Aufnahmelampe hängt. Bei ihm hängt sie deshalb unten links. */
@media (hover: hover) and (pointer: fine) { .gast--rand .gast-rec--schwebe { top: auto; bottom: 12px; translate: 0 6px; } .gast-plakate > .gast--rand:hover .gast-rec--schwebe { translate: 0 0; } }

/* Runde 35: Skool-Logo in seinen Originalfarben, etwas größer, ohne Abdunkeln */
.skool-zeile img { width: 82px; opacity: 1; }

/* Runde 35: Hauptsponsor beim Deutschen Harmonika-Wettbewerb (Festivalseite) */
.sponsor-zeile { display: flex; align-items: center; gap: 18px; width: fit-content; margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(30,23,18,.14); color: inherit; text-decoration: none; }
.sponsor-zeile span { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); }
.sponsor-zeile img { width: 168px; height: auto; transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .sponsor-zeile:hover img { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .sponsor-zeile img { transition: none; } .sponsor-zeile:hover img { transform: none; } }

/* Runde 36: Martin Tschernko mit Hut und aufgezogener Harmonika. Er ragt etwas höher aus seiner Karte als die anderen,
   in Richtung der Karte darüber, damit er gleich groß wirkt.
   Auf dem Handy bleibt er wie die anderen, dort schneidet die Wischleiste oben sonst den Hut ab. */
@media (min-width: 561px) { .gast--hoch .gast-buehne img { left: 55%; height: 133%; max-width: 120%; } }

/* Runde 36: Interessenliste für die Seminare (/seminar-interesse/). Baut auf dem Anfrageformular und der Warteliste auf. */
.kacheln--seminare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .kacheln--seminare { grid-template-columns: minmax(0, 1fr); } }
.interesse-fehler-seminar { display: none; margin: 0; }
[data-block="seminar"].hat-fehler .interesse-fehler-seminar { display: block; }
.interesse-mehr { margin: 0; font-size: 15px; color: var(--tinte-2); }
.interesse-termine { margin: 0; font-size: 15px; line-height: 1.5; color: var(--hell-2); }
.interesse-termine a { color: var(--weiss); font-weight: 700; text-underline-offset: 3px; }
.formular-meldung.interesse-gut b { display: block; margin-bottom: 4px; }
/* Unter jeder Seminarkarte auf /lernen/: Link zur Interessenliste */
.seminar p:not(.seminar-fuer) { color: var(--tinte-2); }
.seminar { display: flex; flex-direction: column; align-items: flex-start; }
.seminar p.seminar-weiter { margin: auto 0 -8px; padding-top: 0; }
.seminar-weiter .textlink { font-size: 17px; }
/* Nach dem Absenden (Warteliste, Seminar-Interesse) verschwinden Formular und Knopf. Ohne diese Zeile hält display: grid/flex sie sichtbar. */
.anfrage-block[hidden], .anfrage-senden[hidden] { display: none; }

/* ==========================================================================
   Handy-Runde (13.11.2026, nach Adrians Test am iPhone)
   ========================================================================== */

/* 1. Keine Schattenkästen am Handy. WebKit (Safari und Chrome auf dem iPhone) malt drop-shadow als Kasten,
      sobald das Bild eine Ausblendung (mask-image) trägt oder beim Laden einfliegt. Am Handy laufen Freisteller
      deshalb ohne CSS-Schatten. Fest eingerechnete Schatten (Tickets, Mieten-Karte, Hoodie) bleiben. */
.ring-faeden--handy { display: none; }
@media (max-width: 900px) {
  .kopf2.kopf2--frei .kopf2-bild > img:not(.kopf2-sticker),
  .workshop-bild img, .podcast-bild img, .lc-adrian, .stufe-adrian, .gast-buehne img, .gast--haupt .gast-buehne img,
  .pk-person, .anfrage-foto, .s-kosmos-mitte img, .s-24h-buehne img, .show-person-schatten, .beitrag-bild[style] img, .s-fest-logo, .qa-logo,
  .modell-faecher img, .modell-bild img, .pk-logo, .kopf2-marke--rund { filter: none; }
}

/* 2. Läden am Handy: Abstand zwischen den Ladenkarten */
@media (max-width: 1000px) { .ladenkarten { display: grid; gap: 28px; } }

/* 3. Kosmos am Handy: Aufkleber links und rechts rund um Adrian, mit Fäden wie am Rechner
      (Instrumente, Lernen, Läden, Community). Lagen kommen aus bauen.py (--mx, --my, --mdreh). */
@media (max-width: 900px) {
  .kopf2.kopf2--marken .kopf2-bild { flex-direction: row; align-items: flex-end; justify-content: center; min-height: calc(var(--kopf-h) + 8px + clamp(400px, 112vw, 640px)); padding-top: calc(var(--kopf-h) + 8px); }
  .kopf2.kopf2--marken .kopf2-bild > img:not(.kopf2-sticker) { max-height: clamp(380px, 104vw, 600px); max-width: 70%; }
  .kopf2.kopf2--marken .ring-faeden--handy { display: block; inset: calc(var(--kopf-h) + 8px) 0 0 0; height: calc(100% - var(--kopf-h) - 8px); }
  .kopf2.kopf2--marken .ring-faeden--handy ellipse { stroke: rgba(246,239,226,.16); }
  .kopf2.kopf2--marken .marken-ring { position: absolute; inset: calc(var(--kopf-h) + 8px) 0 0 0; display: block !important; width: auto; padding: 0 !important; overflow: visible; z-index: 3; }
  .kopf2.kopf2--marken .marken-ring li { --kw: clamp(96px, 26vw, 150px); position: absolute; left: clamp(calc(var(--kw) / 2 + 12px), calc(var(--mx) * 1%), calc(100% - var(--kw) / 2 - 12px)); top: calc(var(--my) * 1%); width: var(--kw); flex: none; transform: translate(-50%, -50%) rotate(var(--mdreh)); animation: marke-handy .9s var(--ease-feder) both; animation-delay: calc(var(--i) * 120ms + 350ms); }
  .kopf2.kopf2--marken .fakten-ring li { --kw: clamp(104px, 29vw, 156px); }
  .kopf2.kopf2--marken .orts-ring li { --kw: clamp(124px, 34vw, 190px); }
  @keyframes marke-handy { from { opacity: 0; transform: translate(calc(-50% + (50 - var(--mx)) * 2.4px), calc(-50% + (52 - var(--my)) * 1.4px)) scale(.4) rotate(0deg); } }
  /* Logos: ohne Ausblendung, Schatten und Einflug des großen Fotos */
  .kopf2.kopf2--marken .marken-ring img { position: static; max-height: none; max-width: 100%; -webkit-mask-image: none; mask-image: none; filter: none; animation: none; }
  .kopf2.kopf2--marken .marken-ring:not(.fakten-ring):not(.orts-ring) a { padding: 10px 8px 8px; gap: 4px; border-radius: 12px; }
  .kopf2.kopf2--marken .marken-ring:not(.fakten-ring):not(.orts-ring) img { height: clamp(24px, 7vw, 36px); }
  .kopf2.kopf2--marken .marken-ring:not(.fakten-ring):not(.orts-ring) small { font-size: 10.5px; letter-spacing: .1em; }
  /* Fakten */
  .kopf2.kopf2--marken .fakten-ring a { gap: 2px; padding: 10px 8px 12px; border-radius: 12px; }
  .kopf2.kopf2--marken .fakten-ring small { font-size: 10.5px; letter-spacing: .1em; }
  .kopf2.kopf2--marken .fakten-ring b { font-size: clamp(22px, 6.6vw, 34px); }
  .kopf2.kopf2--marken .fakten-ring span { font-size: clamp(11.5px, 3.2vw, 14px); line-height: 1.2; }
  /* Ortstafeln */
  .kopf2.kopf2--marken .orts-ring a.ortsschild { padding: 12px 6px 16px; }
  .kopf2.kopf2--marken .orts-ring .ortsschild b { font-size: clamp(16px, 4.7vw, 24px); }
  /* Community-Logo unten links neben mir */
  .kopf2.kopf2--gemeinschaft .kopf2-bild img.kopf2-sticker { inset: auto auto 2% 3%; width: clamp(84px, 24vw, 130px); }
  .kopf2.kopf2--frei .kopf2-text { margin-top: 18px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .kopf2.kopf2--marken .marken-ring li { animation: none; } }

/* 4. Menü am Handy: öffnet sich als Kreis aus dem grünen Knopf, die Einträge rollen nacheinander herein */
.menue { clip-path: circle(0px at var(--mk-x, calc(100% - 44px)) var(--mk-y, 36px)); transition: clip-path .5s cubic-bezier(.7, 0, .84, 0), visibility 0s linear .5s; }
.menue.ist-offen { clip-path: circle(150% at var(--mk-x, calc(100% - 44px)) var(--mk-y, 36px)); transition: clip-path .95s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.menue a { opacity: 0; transform: translateY(105%) rotate(4deg); transform-origin: 0 100%; transition: transform .2s, opacity .2s; }
.menue a small { opacity: 0; transform: translateX(-12px); transition: opacity .2s, transform .2s; }
.menue.ist-offen a { opacity: 1; transform: none; transition: transform .8s var(--ease), opacity .4s var(--ease); }
.menue.ist-offen a small { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.menue.ist-offen li:nth-child(1) a { transition-delay: .2s; } .menue.ist-offen li:nth-child(1) a small { transition-delay: .5s; }
.menue.ist-offen li:nth-child(2) a { transition-delay: .26s; } .menue.ist-offen li:nth-child(2) a small { transition-delay: .56s; }
.menue.ist-offen li:nth-child(3) a { transition-delay: .32s; } .menue.ist-offen li:nth-child(3) a small { transition-delay: .62s; }
.menue.ist-offen li:nth-child(4) a { transition-delay: .38s; } .menue.ist-offen li:nth-child(4) a small { transition-delay: .68s; }
.menue.ist-offen li:nth-child(5) a { transition-delay: .44s; } .menue.ist-offen li:nth-child(5) a small { transition-delay: .74s; }
.menue.ist-offen li:nth-child(6) a { transition-delay: .5s; } .menue.ist-offen li:nth-child(6) a small { transition-delay: .8s; }
.menue.ist-offen li:nth-child(7) a { transition-delay: .56s; } .menue.ist-offen li:nth-child(7) a small { transition-delay: .86s; }
.menue.ist-offen li:nth-child(8) a { transition-delay: .62s; } .menue.ist-offen li:nth-child(8) a small { transition-delay: .92s; }
.menue:not(.ist-offen) li a { transition-delay: 0s !important; }
.menue li { border-bottom-color: transparent; background: linear-gradient(var(--linie-dunkel), var(--linie-dunkel)) 0 100% / 0 1px no-repeat; transition: background-size .2s; }
.menue.ist-offen li { background-size: 100% 1px; transition: background-size .9s var(--ease) .3s; }
.menue-fuss > * { opacity: 0; transform: translateY(16px); transition: opacity .2s, transform .2s; }
.menue.ist-offen .menue-fuss > * { opacity: 1; transform: none; transition: opacity .6s var(--ease) .7s, transform .8s var(--ease) .7s; }
.menue.ist-offen .menue-fuss > * + * { transition-delay: .8s; }
@media (prefers-reduced-motion: reduce) {
  .menue, .menue.ist-offen { transition: visibility 0s; }
  .menue a, .menue a small, .menue-fuss > *, .menue.ist-offen a, .menue.ist-offen a small, .menue.ist-offen .menue-fuss > * { opacity: 1; transform: none; transition: none; }
}

/* 5. Mehr Bewegung am Handy: Karten und Bilder fliegen beim Scrollen von links oder rechts herein (Seite per site.js) */
@media (max-width: 900px) {
  .js [data-zeigen].von-links, .js [data-zeigen].von-rechts { transition: opacity .7s var(--ease), transform 1s var(--ease); transition-delay: var(--verzug, 0ms); }
  .js [data-zeigen].von-links:not(.ist-da) { transform: translateX(-64px) rotate(-2deg); }
  .js [data-zeigen].von-rechts:not(.ist-da) { transform: translateX(64px) rotate(2deg); }
  /* Abschnittsüberschriften steigen am Handy wieder Wort für Wort auf */
  .js h2[data-woerter] .wort > span { transform: translateY(140%); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
  .js h2[data-woerter].ist-da .wort > span { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .js [data-zeigen].von-links, .js [data-zeigen].von-rechts, .js h2[data-woerter] .wort > span { transform: none !important; } }
/* Einflug von der Seite darf die Seite nie breiter machen, auch nicht bei offenem Menü (body bekommt dann overflow: hidden) */
#inhalt, .fuss { overflow-x: clip; }

/* 6. Hersteller am Handy: alle drei Harmonikas ganz im Bild. Etwas schmaler, damit die äußeren innerhalb des Bildschirms
      bleiben, und ein flacher Kasten, damit der Fächer näher an den Knöpfen sitzt. Unten steht er wie am Rechner
      über der Holzkante und taucht ein Stück in den hellen Teil. */
@media (max-width: 900px) {
  .modell-faecher { width: min(340px, 68vw); aspect-ratio: 2 / 1; margin: -24px auto; }
}