/* ============================================================================
   Webschmiede — die zehn Stilwelten.
   Alle arbeiten auf derselben HTML-Struktur; nur Farben, Schriften und
   Layout-Charakter unterscheiden sich. Die Farbwerte --akzent/--akzent2 werden
   pro Betrieb überschrieben (Farbwelt aus dessen Branche/Auftritt).
============================================================================ */

/* ---------- Grundstruktur, die jedes Thema erbt ---------- */
.ws-hero{position:relative;display:grid;place-items:center;text-align:center;overflow:hidden}
.ws-hero .hero-bg{position:absolute;inset:0;background-position:center;background-size:cover}
.ws-hero .hero-in{position:relative;z-index:2;padding:56px 20px}
.ws-hero .kicker{font-size:.72rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:12px}
.ws-hero h1{line-height:1.08;margin-bottom:10px}
.ws-hero .claim{font-size:1.06rem;max-width:30em;margin:0 auto}
.ws-hero .ort{margin-top:10px;font-size:.86rem;opacity:.85}
.ws-hero .cta{display:inline-block;margin-top:22px;padding:14px 28px;font-weight:700;
  border-radius:var(--radius,10px);background:var(--akzent);color:var(--akzentTxt,#fff)}
.ws-hero .bildnote{position:absolute;bottom:7px;left:0;right:0;z-index:2;font-size:.66rem;
  letter-spacing:.4px;opacity:.62}

.ws-sek{padding:44px 0}
.ws-sek.alt{background:var(--bg2)}
.ws-sek h2{font-size:clamp(1.5rem,4vw,2.05rem);text-align:center;margin-bottom:6px;color:var(--akzent)}
.ws-sek .sub{text-align:center;color:var(--muted);margin-bottom:20px;font-size:.96rem}

.liste{max-width:620px;margin:0 auto}
.liste .zeile{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:12px 0;border-bottom:1px dotted var(--linie)}
.liste .zeile b{font-weight:700}
.liste .zeile small{display:block;color:var(--muted);font-size:.86rem;font-weight:400}
.liste .zeile .pr{color:var(--akzent);font-weight:700;white-space:nowrap}
.ph{color:var(--muted);font-style:italic}

.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:860px;margin:0 auto}
.karte{background:var(--bg);border:1px solid var(--linie);border-radius:var(--radius,14px);
  overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.07)}
.karte img{width:100%;aspect-ratio:4/3;object-fit:cover}
.karte .k-in{padding:13px 15px}
.karte .k-in b{font-size:1rem;display:block}
.karte .k-in small{display:block;color:var(--muted);margin-top:2px}
@media(max-width:760px){.karten{grid-template-columns:1fr;max-width:400px}}

.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:860px;margin:0 auto}
.galerie figure{border-radius:var(--radius,12px);overflow:hidden;border:1px solid var(--linie)}
.galerie img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .5s ease}
.galerie figcaption{font-size:.68rem;color:var(--muted);padding:6px 8px;background:var(--bg2)}
@media(max-width:700px){.galerie{grid-template-columns:1fr 1fr}}

.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:860px;margin:0 auto}
.stimme{background:var(--bg);border:1px solid var(--linie);border-radius:var(--radius,14px);padding:16px}
.stimme .st{color:#e0a11f;letter-spacing:3px;font-size:.92rem}
.stimme p{font-size:.9rem;margin:7px 0 5px}
.stimme small{color:var(--muted);font-size:.78rem}
@media(max-width:760px){.stimmen{grid-template-columns:1fr}}

.zeiten{max-width:620px;margin:0 auto}
.zeiten .z{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--linie);font-size:.95rem}
.zeiten .z:last-child{border-bottom:0}
.kontaktbox{max-width:620px;margin:18px auto 0;text-align:center;color:var(--muted);font-size:.94rem;line-height:1.9}
.kontaktbox b{color:var(--txt)}
.anfrage{max-width:440px;margin:0 auto 18px;background:var(--bg);border:1px solid var(--linie);
  border-radius:var(--radius,14px);padding:20px}
.anfrage label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin:9px 0 4px}
.anfrage input,.anfrage select{width:100%;padding:11px 12px;border:1px solid var(--linie);
  border-radius:8px;font-family:inherit;font-size:.95rem;background:var(--bg2);color:var(--txt)}
.anfrage button{width:100%;margin-top:14px;background:var(--akzent);color:var(--akzentTxt,#fff);
  border:0;border-radius:8px;padding:13px;font-weight:700;font-size:1rem;cursor:pointer;font-family:inherit}
.anfrage .hin{font-size:.74rem;color:var(--muted);margin-top:7px;text-align:center}

.ws-fuss{padding:22px 20px 100px;text-align:center;font-size:.78rem;color:var(--muted);
  border-top:1px solid var(--linie);line-height:1.9;background:var(--bg2)}
.ws-fuss a{text-decoration:underline}

/* Bewegte Effekte erst ab Business — das ist selbst ein Verkaufsargument */
.pkt-business .ws-hero .hero-bg,.pkt-premium .ws-hero .hero-bg{animation:wsKen 26s ease-in-out infinite alternate}
@keyframes wsKen{from{transform:scale(1)}to{transform:scale(1.12) translate(1.5%,-1.5%)}}
.pkt-business .karte,.pkt-premium .karte{transition:transform .25s ease,box-shadow .25s ease}
.pkt-business .karte:hover,.pkt-premium .karte:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,0,0,.16)}
.pkt-business .galerie figure:hover img,.pkt-premium .galerie figure:hover img{transform:scale(1.06)}
.pkt-premium .stimme .st{animation:wsSterne 1.6s ease both}
@keyframes wsSterne{0%{opacity:0;letter-spacing:14px}100%{opacity:1;letter-spacing:3px}}
@media(prefers-reduced-motion:reduce){
  .pkt-business .ws-hero .hero-bg,.pkt-premium .ws-hero .hero-bg,.pkt-premium .stimme .st{animation:none}
}

/* ======================= A · EDITORIAL ======================= */
.thema-a{--bg:#f7f2e9;--bg2:#f1ead9;--txt:#1c1a14;--muted:#7d7563;--linie:#ded4c0;--radius:4px;
  --akzentTxt:#fff;font-family:Georgia,'Times New Roman',serif;line-height:1.66}
.thema-a .ws-hero{min-height:52vh}
.thema-a .ws-hero .hero-in{max-width:900px}
.thema-a .ws-hero h1{font-size:clamp(2.3rem,6.4vw,4rem);font-weight:400;letter-spacing:-.01em}
.thema-a .ws-hero .kicker::before{content:"";display:inline-block;width:28px;height:1px;
  background:currentColor;vertical-align:middle;margin-right:10px}
.thema-a .ws-sek h2{font-weight:400}
.thema-a .liste .zeile b{font-weight:400;font-size:1.25rem}
.thema-a .pill,.thema-a .boxwahl,.thema-a .fakt,.thema-a .teaser,.thema-a .ws-stilbar,
.thema-a .ws-paketbar,.thema-a .anfrage label{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}

/* ======================= B · BOLD ======================= */
.thema-b{--bg:#12351f;--bg2:#0d2716;--txt:#f5efdd;--muted:#a9bda0;--linie:rgba(245,239,221,.22);
  --radius:0px;--akzentTxt:#12351f;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.55}
.thema-b .ws-hero{min-height:60vh}
.thema-b .ws-hero .hero-bg{opacity:.28}
.thema-b .ws-hero h1{font-size:clamp(2.8rem,11vw,7rem);font-weight:900;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.92}
.thema-b .ws-sek h2{font-size:clamp(1.8rem,5vw,3rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
.thema-b .karte{border-width:3px;box-shadow:9px 9px 0 var(--akzent)}
.thema-b .liste .zeile b{font-size:clamp(1.3rem,4vw,2rem);font-weight:900;text-transform:uppercase}
.thema-b .ws-hero .cta{border:3px solid var(--akzentTxt);box-shadow:6px 6px 0 rgba(0,0,0,.35);
  text-transform:uppercase;letter-spacing:1px}
.thema-b .stimme,.thema-b .anfrage{background:rgba(255,255,255,.05)}

/* ======================= C · ABENDROBE ======================= */
.thema-c{--bg:#0d0e0b;--bg2:#141510;--txt:#ece5d8;--muted:#948d7d;--linie:rgba(236,229,216,.16);
  --radius:2px;--akzentTxt:#0d0e0b;font-family:Georgia,'Times New Roman',serif;line-height:1.7}
.thema-c .ws-hero{min-height:78vh}
.thema-c .ws-hero .hero-bg{filter:brightness(.85)}
.thema-c .ws-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 55%,rgba(6,7,5,.5),rgba(6,7,5,.9))}
.thema-c .ws-hero .hero-in{color:#fff}
.thema-c .ws-hero h1{font-size:clamp(2.4rem,7vw,4.6rem);font-weight:400;letter-spacing:.05em}
.thema-c .ws-hero .kicker{color:var(--akzent);letter-spacing:5px}
.thema-c .ws-sek h2{font-weight:400;letter-spacing:.04em}
.thema-c .karte,.thema-c .stimme,.thema-c .anfrage{background:rgba(255,255,255,.04)}
.thema-c .ws-hero .cta{letter-spacing:3px;text-transform:uppercase;font-size:.8rem}

/* ======================= D · FRISCH & SOCIAL ======================= */
.thema-d{--bg:#fffdf8;--bg2:#eef7f0;--txt:#26221c;--muted:#857c6c;--linie:#e8e0cf;--radius:18px;
  --akzentTxt:#fff;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.6}
.thema-d .ws-hero{min-height:46vh;background:linear-gradient(180deg,var(--bg2),var(--bg))}
.thema-d .ws-hero .hero-bg{opacity:.16}
.thema-d .ws-hero h1{font-size:clamp(2rem,6vw,3.4rem);font-weight:800;letter-spacing:-.02em}
.thema-d .ws-hero .kicker{display:inline-block;background:#fff;border:2px solid var(--akzent);
  color:var(--akzent);border-radius:999px;padding:6px 15px;letter-spacing:.6px;font-weight:700;text-transform:none}
.thema-d .ws-hero .cta{border-radius:999px;box-shadow:0 5px 0 rgba(0,0,0,.16)}
.thema-d .ws-sek h2{font-weight:800}
.thema-d .karte{box-shadow:0 10px 26px rgba(60,45,20,.1)}
.thema-d .karte:nth-child(1){transform:rotate(-1.2deg)}
.thema-d .karte:nth-child(2){transform:rotate(.9deg)}
.thema-d .karte:nth-child(3){transform:rotate(-.6deg)}
.thema-d .galerie figure{border-radius:16px}

/* ======================= E · WEISSRAUM ======================= */
.thema-e{--bg:#fcfcfa;--bg2:#f6f6f3;--txt:#161511;--muted:#8f8c84;--linie:#e8e6df;--radius:0px;
  --akzentTxt:#fff;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.75}
.thema-e .ws-hero{min-height:40vh}
.thema-e .ws-hero .hero-bg{display:none}
.thema-e .ws-hero h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(2rem,5.4vw,3.3rem);line-height:1.2}
.thema-e .ws-hero .kicker{letter-spacing:5px}
.thema-e .ws-sek{padding:64px 0}
.thema-e .ws-sek h2{font-family:Georgia,serif;font-weight:400}
.thema-e .karten{grid-template-columns:1fr;max-width:560px;gap:34px}
.thema-e .karte{border:0;box-shadow:none;text-align:center}
.thema-e .karte img{aspect-ratio:16/10}
.thema-e .galerie{grid-template-columns:1fr 1fr;max-width:640px;gap:20px}
.thema-e .galerie figure{border:0}
.thema-e .liste .zeile{justify-content:center;text-align:center;flex-direction:column;gap:2px;padding:20px 0}

/* ======================= F · PAPIER & STEMPEL ======================= */
.thema-f{--bg:#f1e8d3;--bg2:#e9dec4;--txt:#3a2d1c;--muted:#7d6a4c;--linie:#c9bc9c;--radius:0px;
  --akzentTxt:#f1e8d3;font-family:Georgia,'Times New Roman',serif;line-height:1.62}
.thema-f .ws-hero{min-height:44vh;border-bottom:3px double var(--txt)}
.thema-f .ws-hero .hero-bg{opacity:.22;filter:sepia(.3)}
.thema-f .ws-hero h1{font-size:clamp(2.2rem,7vw,4.2rem);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.thema-f .ws-hero .kicker{letter-spacing:4px}
.thema-f .ws-hero .claim{font-style:italic}
.thema-f .ws-sek h2{font-weight:700;text-transform:uppercase;letter-spacing:2px}
.thema-f .liste{border:1px solid var(--txt);background:rgba(255,252,242,.5);padding:6px 18px}
.thema-f .karte{border:1px solid var(--linie);background:#fffdf6;padding:8px;box-shadow:0 4px 14px rgba(58,45,28,.16)}
.thema-f .karte img{filter:sepia(.14)}
.thema-f .karte:nth-child(odd){transform:rotate(-.8deg)}
.thema-f .karte:nth-child(even){transform:rotate(.7deg)}
.thema-f .ws-hero .cta{border:2px solid var(--txt);background:transparent;color:var(--txt);
  letter-spacing:2px;text-transform:uppercase;font-size:.82rem}

/* ======================= G · SOFT APP ======================= */
.thema-g{--bg:#faf8f5;--bg2:rgba(255,255,255,.62);--txt:#232028;--muted:#7d7686;--linie:rgba(255,255,255,.85);
  --radius:20px;--akzentTxt:#fff;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.62;
  background:radial-gradient(60% 42% at 12% 6%,#ffd7e6 0%,transparent 60%),
             radial-gradient(52% 40% at 92% 18%,#d3f2e0 0%,transparent 60%),
             radial-gradient(60% 45% at 50% 96%,#ffe8cf 0%,transparent 60%),#faf8f5;
  background-attachment:fixed}
.thema-g .ws-sek.alt{background:rgba(255,255,255,.35)}
.thema-g .ws-hero{min-height:42vh}
.thema-g .ws-hero .hero-bg{opacity:.2}
.thema-g .ws-hero h1{font-size:clamp(1.9rem,5.6vw,3.2rem);font-weight:800;letter-spacing:-.02em}
.thema-g .ws-hero .kicker{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.7);
  border:1px solid #fff;border-radius:999px;padding:7px 15px;text-transform:none;letter-spacing:.4px;
  font-weight:700;box-shadow:0 6px 22px rgba(120,80,90,.1);backdrop-filter:blur(10px)}
.thema-g .ws-hero .cta{border-radius:999px;box-shadow:0 8px 26px rgba(0,0,0,.18)}
.thema-g .karte,.thema-g .stimme,.thema-g .anfrage,.thema-g .fakt,.thema-g .teaser{
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 12px 34px rgba(120,80,90,.11);backdrop-filter:blur(12px)}
.thema-g .galerie figure{border:1px solid rgba(255,255,255,.9)}

/* ======================= H · BENTO ======================= */
.thema-h{--bg:#f4f4f1;--bg2:#ffffff;--txt:#1c1d1a;--muted:#82817a;--linie:#e6e5df;--radius:20px;
  --akzentTxt:#fff;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.55}
.thema-h .ws-hero{min-height:38vh;margin:14px 14px 0;border-radius:22px;overflow:hidden}
.thema-h .ws-hero h1{font-size:clamp(1.8rem,5vw,3rem);font-weight:800;letter-spacing:-.03em}
.thema-h .ws-sek{padding:20px 0}
.thema-h .ws-sek.alt{background:transparent}
.thema-h .ws-sek .wrap>h2{text-align:left;padding-left:4px}
.thema-h .ws-sek .sub{text-align:left;padding-left:4px}
.thema-h .karten{gap:14px}
.thema-h .karte{background:#fff;box-shadow:0 2px 10px rgba(30,30,20,.05)}
.thema-h .liste{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:8px 20px;max-width:none}
.thema-h .zeiten{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:10px 20px}
.thema-h .galerie figure{border-radius:18px}
.thema-h .stimme{border-radius:18px}

/* ======================= I · KINO ======================= */
.thema-i{--bg:#0b0b0a;--bg2:#121210;--txt:#f6f4ef;--muted:#918b7e;--linie:rgba(246,244,239,.14);
  --radius:0px;--akzentTxt:#0b0b0a;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.55}
.thema-i .ws-hero{min-height:88vh}
.thema-i .ws-hero .hero-bg{filter:brightness(.7)}
.thema-i .ws-hero h1{font-size:clamp(2.6rem,10vw,6.4rem);font-weight:900;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.95;text-shadow:0 4px 30px rgba(0,0,0,.55)}
.thema-i .ws-hero .kicker{color:var(--akzent);letter-spacing:4px}
.thema-i .ws-sek{padding:60px 0}
.thema-i .ws-sek h2{font-size:clamp(1.9rem,6vw,3.4rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
.thema-i .karte{background:#151513;border-color:rgba(255,255,255,.1)}
.thema-i .karte img{aspect-ratio:3/2}
.thema-i .galerie img{aspect-ratio:16/10}
.thema-i .galerie{grid-template-columns:1fr;max-width:760px}
.thema-i .stimme,.thema-i .anfrage{background:rgba(255,255,255,.05)}
.thema-i .ws-hero .cta{text-transform:uppercase;letter-spacing:2px;font-weight:800}

/* ======================= J · STUDIO MONO ======================= */
.thema-j{--bg:#f2f2ee;--bg2:#eaeae4;--txt:#151513;--muted:#79786f;--linie:#151513;--radius:0px;
  --akzentTxt:#f2f2ee;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  line-height:1.62;font-size:15px}
.thema-j .ws-hero{min-height:36vh;border-bottom:1px solid var(--linie)}
.thema-j .ws-hero .hero-bg{opacity:.14;filter:grayscale(.5)}
.thema-j .ws-hero h1{font-size:clamp(2rem,7vw,4.6rem);font-weight:700;text-transform:uppercase;letter-spacing:-.04em}
.thema-j .ws-hero .kicker{letter-spacing:2px}
.thema-j .ws-sek h2{font-size:1.1rem;text-transform:uppercase;letter-spacing:2px;text-align:left;
  border-bottom:1px solid var(--linie);padding-bottom:8px}
.thema-j .ws-sek .sub{text-align:left}
.thema-j .liste{max-width:none}
.thema-j .liste .zeile{border-bottom:1px solid var(--linie)}
.thema-j .liste .zeile b{text-transform:uppercase;letter-spacing:-.01em}
.thema-j .karte{border:1px solid var(--linie);background:#fff;padding:7px;box-shadow:none}
.thema-j .karte img{filter:grayscale(.25) contrast(1.04);aspect-ratio:1}
.thema-j .karte:hover img{filter:none}
.thema-j .galerie figure{border:1px solid var(--linie);border-radius:0}
.thema-j .zeiten .z{border-bottom:1px solid var(--linie)}
.thema-j .ws-hero .cta{border-radius:0;letter-spacing:2px;text-transform:uppercase;font-size:.8rem}