/* ============================================================
   CROSSMEDIA ACADEMY — imported from the Claude Design project
   (index.html). Edit the design project, re-import; do not
   hand-patch this block.
   ============================================================ */
/* ============================================================
   CROSSMEDIA ACADEMY — SHARED STYLES (Unterseiten)
   CI: Rostrot #B84A2A · warmes Papier · Ink #1A1410
   Display: Bricolage Grotesque · Body: Manrope · Labels: JetBrains Mono
   ============================================================ */

:root{
  /* CI */
  --rust:#B2523A; --rust-dark:#8E3E28; --rust-deep:#6B2410;
  --rust-light:#E3C4B8; --rust-tint:#F2E0D9; --rust-pale:#FBF1EC;
  /* Warme Neutrale */
  --ink:#1A1410; --ink-soft:#4A3F37; --ink-mute:#7A6B62;
  --paper:#FBF8F4; --paper-2:#F5EFE7; --paper-3:#F0E6DA;
  --rule:#E8DDD2; --rule-soft:#F0E6DA; --rule-strong:#D6C7B8;
  --white:#FFFFFF;
  /* Semantische Aliase */
  --bg:var(--paper); --bg-2:var(--paper-2); --bg-3:var(--paper-3); --bg-4:var(--rule);
  --line:var(--rule); --line-2:var(--rule-strong); --glass:var(--white);
  --text:var(--ink); --text-muted:var(--ink-mute);
  --border:var(--rule); --off-white:var(--paper-2);
  --green:#2E5A36; --gold:#8A6A1F; --teal:#2E5A5A;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --display:'Archivo','Manrope',sans-serif;
  --shadow-sm:0 2px 10px rgba(26,20,16,0.05);
  --shadow-md:0 10px 30px rgba(26,20,16,0.08);
  --shadow-lg:0 22px 55px rgba(26,20,16,0.13);
  --c-social:#1F7A4D; --c-cam:#C98A08; --c-voice:#A5462C; --c-neutral:#5A4A40;
  --c-social-ink:#1A6640; --c-cam-ink:#7A5512; --c-voice-ink:#A83418; --c-neutral-ink:#4A3F37;
  --c-heart:#A5462C; --c-chat:#2F6F8F;
  --c-social-bg:#E2F0E8; --c-cam-bg:#FBEFD2; --c-voice-bg:#F8E2DA; --c-neutral-bg:#F0E9E3;
  --ic-like:var(--c-social); --ic-heart:var(--c-voice); --ic-cam:var(--c-cam); --ic-mic:var(--c-voice);
  --section-gap:112px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--paper)}
body{font-family:'Manrope',system-ui,sans-serif;font-size:17px;line-height:1.7;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);line-height:1.06;letter-spacing:-0.022em;font-weight:700;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.3rem,5vw,4rem);font-weight:700;letter-spacing:-0.03em}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.5rem)}
h4{font-size:1.05rem;letter-spacing:-0.015em}
em{font-style:normal;color:var(--rust)}
p{max-width:65ch;text-wrap:pretty}
a{color:inherit;text-decoration:none}
a:hover{color:var(--rust)}
::selection{background:var(--rust);color:var(--white)}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

.container{max-width:1200px;margin:0 auto;padding:0 2rem}
.container-narrow{max-width:880px;margin:0 auto;padding:0 2rem}
.rust,.italic-rust{color:var(--rust)}

/* ── Eyebrow / Tag ── */
.tag{display:inline-flex;align-items:center;gap:0.45rem;font-family:var(--mono);font-size:0.68rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--rust);background:var(--rust-pale);border:1px solid var(--rust-tint);padding:0.35rem 0.75rem;border-radius:999px;margin-bottom:1.25rem}
.tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--rust)}

/* ── Buttons ── */
.btn{display:inline-block;font-family:'Manrope',sans-serif;font-size:0.93rem;font-weight:600;letter-spacing:0.01em;padding:0.85rem 1.7rem;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .18s ease,background .18s,color .18s,border-color .18s,box-shadow .18s}
.btn-primary{background:var(--rust);color:var(--white);border-color:var(--rust);box-shadow:0 4px 16px rgba(184,74,42,0.22)}
.btn-primary:hover{background:var(--rust-dark);border-color:var(--rust-dark);color:var(--white);transform:translateY(-2px);box-shadow:0 8px 24px rgba(184,74,42,0.3)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn-outline:hover{color:var(--rust);border-color:var(--rust);background:var(--rust-pale);transform:translateY(-2px)}
.btn-white{background:var(--white);color:var(--rust-deep);border-color:var(--white)}
.btn-white:hover{background:var(--paper-2);color:var(--rust-deep);transform:translateY(-2px)}

/* ── Badges ── */
.badge{display:inline-block;font-family:var(--mono);font-size:0.66rem;font-weight:500;padding:0.25rem 0.6rem;border-radius:6px;letter-spacing:0.1em;text-transform:uppercase;border:1px solid var(--rule);background:var(--white);color:var(--ink-soft)}
.badge-online{background:#F0F6EE;color:var(--green);border-color:#C8DBC9}
.badge-inperson{background:var(--rust-pale);color:var(--rust);border-color:var(--rust-tint)}
.badge-group{background:var(--paper-2);color:var(--ink-mute)}
.badge-business{background:#FBF3DF;color:var(--gold);border-color:#E8DAB4}

/* ── Bild-Platzhalter (bis neue Fotos kommen) ── */
.img-slot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.25rem;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:repeating-linear-gradient(135deg,var(--paper-2) 0,var(--paper-2) 15px,var(--rule) 15px,var(--rule) 16px);border:1px solid var(--rule)}
.img-slot span{position:relative;z-index:1;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:0.5rem 0.9rem;line-height:1.4;box-shadow:var(--shadow-sm)}
.img-slot small{display:block;margin-top:0.35rem;font-family:'Manrope',sans-serif;font-size:0.7rem;letter-spacing:0.02em;text-transform:none;color:var(--ink-mute)}
.img-slot-wide{aspect-ratio:16/10}
.img-slot-square{aspect-ratio:1/1}

/* ============================================================ NAV ============================================================ */
nav.site{position:sticky;top:0;z-index:100;background:rgba(251,248,244,0.88);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--rule-soft)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0.9rem 2rem;max-width:1200px;margin:0 auto}
.nav-logo{font-family:var(--display);font-size:1.14rem;font-weight:700;letter-spacing:-0.02em;color:var(--ink);white-space:nowrap}
.nav-logo:hover{color:var(--ink)}
.nav-logo span{color:var(--ink)}
.nav-links{display:flex;gap:1.35rem;list-style:none;align-items:center}
.nav-links a{font-family:var(--mono);font-size:0.74rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;transition:color .18s}
.nav-links a:hover{color:var(--rust)}
.nav-links a.btn{font-family:'Manrope',sans-serif;text-transform:none;letter-spacing:0.01em;padding:0.55rem 1.2rem;font-size:0.85rem}
.nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:var(--white)}
.nav-cta{padding:0.55rem 1.2rem !important;font-size:0.85rem !important}
@media (min-width:901px) and (max-width:1180px){.nav-links{gap:0.85rem}.nav-links a{font-size:0.68rem}.nav-logo{font-size:1.02rem}}

/* Home-Button links von den Reitern */

/* Submenu */
.has-submenu{position:relative}
.has-submenu > a .caret{font-size:0.7em;margin-left:0.25em;color:var(--ink-mute);transition:transform .2s;display:inline-block}
.has-submenu:hover > a .caret{transform:rotate(180deg)}
.submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-4px);background:var(--white);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow-lg);list-style:none;padding:0.45rem;margin-top:0.7rem;min-width:290px;opacity:0;pointer-events:none;z-index:110}
.has-submenu::after{content:'';position:absolute;top:100%;left:0;right:0;height:1rem;z-index:109;pointer-events:none}
.has-submenu:hover::after,.has-submenu:focus-within::after{pointer-events:auto}
.has-submenu:hover .submenu,.has-submenu:focus-within .submenu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.submenu li a{display:block;padding:0.55rem 0.85rem;border-radius:9px;font-family:'Manrope',sans-serif;font-size:0.88rem;letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap;transition:background .15s,color .15s}
.submenu li a:hover{background:var(--rust-pale);color:var(--rust)}

/* Hamburger */
.nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--rule-strong);background:transparent;border-radius:999px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:16px;height:1.6px;background:var(--ink);position:relative;transition:transform .2s,opacity .2s,top .2s}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0}
.nav-toggle span::before{top:-5px}
.nav-toggle span::after{top:5px}
.nav-toggle.open span{background:transparent}
.nav-toggle.open span::before{top:0;transform:rotate(45deg)}
.nav-toggle.open span::after{top:0;transform:rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:0.5rem 1rem 1.5rem;border-bottom:1px solid var(--rule);box-shadow:var(--shadow-md);max-height:calc(100vh - 70px);overflow-y:auto;transform:translateY(-110%);visibility:hidden;transition:none}
  .nav-links.open{transform:translateY(0);visibility:visible}
  .nav-links > li > a{display:block;padding:0.9rem 0.5rem;border-bottom:1px solid var(--rule-soft);font-size:0.8rem;color:var(--ink)}
  .nav-links > li:last-child > a{border-bottom:none;margin-top:0.6rem;text-align:center}
  .has-submenu .submenu{position:static;opacity:1;pointer-events:auto;transform:none;box-shadow:none;border:none;background:var(--paper-2);border-radius:10px;min-width:0;padding:0.3rem 0.5rem;margin:0.3rem 0 0.6rem;display:none}
  .has-submenu.open .submenu{display:block}
  .has-submenu > a .caret{float:right}
}

/* ============================================================ BREADCRUMB ============================================================ */
.breadcrumb{padding:1.2rem 0;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);border-bottom:1px solid var(--rule-soft)}
.breadcrumb a{color:var(--ink-mute)}
.breadcrumb a:hover{color:var(--rust)}
.breadcrumb .sep{margin:0 0.5rem;opacity:0.5}
.breadcrumb .current{color:var(--ink)}

/* ============================================================ PAGE HERO ============================================================ */
.page-hero{padding:5rem 0 4rem;position:relative;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.page-hero-inner{position:relative;max-width:1200px;margin:0 auto;padding:0 2rem}
.page-hero h1{margin:1.1rem 0 1.4rem}
.page-hero .lead{font-size:1.18rem;color:var(--ink-soft);max-width:58ch;line-height:1.65;margin-bottom:1.9rem}
.page-hero-meta{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.8rem}
.page-hero-ctas{display:flex;gap:0.85rem;flex-wrap:wrap}

/* ============================================================ SECTIONS ============================================================ */
.content-section{padding:var(--section-gap) 0}
.content-section.alt{background:var(--paper-2)}
.section-header p{margin:1rem auto 0;color:var(--ink-soft);font-size:1.05rem;max-width:62ch}

/* Prose */
.prose h2{margin-top:2.5rem;margin-bottom:1rem;font-size:1.8rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:2rem;margin-bottom:0.6rem;font-family:'Manrope',sans-serif;font-weight:600;font-size:1.1rem;letter-spacing:0}
.prose p{color:var(--ink-soft);margin-bottom:1rem}
.prose ul{margin:0.5rem 0 1.5rem 1.5rem;color:var(--ink-soft)}
.prose ul li{margin-bottom:0.4rem}
.prose strong{color:var(--ink)}

.two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:4rem;align-items:start}
.two-col-sidebar{position:sticky;top:92px}
@media (max-width:900px){.two-col{grid-template-columns:1fr;gap:2.5rem}.two-col-sidebar{position:static}}

/* CTA-Block */
.cta-block{background:var(--ink);color:var(--paper);padding:3.2rem 2.5rem;border-radius:18px;text-align:center;position:relative;overflow:hidden;margin:4rem 0 0}
.cta-block h2{margin-bottom:0.8rem;color:var(--paper)}
.cta-block h2 em{color:var(--rust-light)}
.cta-block p{color:rgba(251,248,244,0.72);margin:0 auto 1.5rem;max-width:50ch}

/* Marquee-Band */
.marquee{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-2);padding:0.85rem 0}
.marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track > span{display:inline-flex;align-items:center;gap:2.5rem;font-family:var(--mono);font-size:0.74rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;padding-right:2.5rem}
.marquee-track > span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--rust)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================ FOOTER ============================================================ */
footer.site{background:var(--ink);color:rgba(251,248,244,0.65);padding:3.5rem 0 2rem;margin-top:auto}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem}
.footer-brand p{font-size:0.87rem;margin-top:0.75rem;max-width:30ch;color:rgba(251,248,244,0.6)}
.footer-col h5{font-family:var(--mono);font-size:0.68rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--paper);margin-bottom:1rem}
.footer-col ul li a:hover{color:var(--rust-light)}
.footer-bottom{max-width:1200px;margin:2.5rem auto 0;padding:1.5rem 2rem 0;border-top:1px solid rgba(251,248,244,0.16);display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.06em;color:rgba(251,248,244,0.55);flex-wrap:wrap;gap:0.5rem}
.footer-bottom a{color:rgba(251,248,244,0.72);text-decoration:underline;text-underline-offset:3px}
.footer-bottom a:hover{color:var(--rust-light)}
@media (max-width:900px){.footer-inner{grid-template-columns:1fr 1fr;gap:2rem}}
@media (max-width:600px){.footer-inner{grid-template-columns:1fr}:root{--section-gap:72px}}

/* Sticky Footer */
html,body{min-height:100vh}
body{display:flex;flex-direction:column}
body > footer.site{margin-top:auto}

/* ============================================================ LEGAL ============================================================ */
.legal-wrapper{max-width:760px;margin:0 auto;padding:4rem 2rem}
.legal-wrapper h1{margin-bottom:2rem}
.legal-wrapper h2{margin:2.4rem 0 0.6rem;font-size:1.35rem}
.legal-wrapper h3{margin:1.4rem 0 0.4rem;font-family:'Manrope',sans-serif;font-weight:600;font-size:1rem;letter-spacing:0}
.legal-wrapper p{color:var(--ink-soft);margin-bottom:0.9rem}
.legal-wrapper ul{margin-left:1.5rem;margin-bottom:1rem;color:var(--ink-soft)}
.legal-wrapper a{color:var(--rust);text-decoration:underline;text-underline-offset:3px}

/* ============================================================ WORKSHOP-DETAIL ============================================================ */
.ws-detail{padding:2.5rem 0 var(--section-gap)}
.ws-detail-grid{display:grid;grid-template-columns:390px 1fr;gap:3.5rem;align-items:start}
.ws-detail-media{position:relative;top:auto;top:96px;display:flex;flex-direction:column;gap:1rem}
.ws-detail-media > img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block;border:1px solid var(--rule)}
.ws-facts{background:var(--white);border:1px solid var(--rule);border-radius:14px;padding:1.3rem 1.4rem;list-style:none;display:flex;flex-direction:column;gap:0.9rem;box-shadow:var(--shadow-sm)}
.ws-facts strong{font-weight:600;color:var(--ink)}
.termine-box ul{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.termine-box li{position:relative;padding-left:1.3rem;font-weight:500;color:var(--ink);font-size:0.95rem}
.ws-detail-cta{width:100%;text-align:center;font-size:1rem;padding:1rem}
.ws-detail-notify{margin:0.9rem 0 0;text-align:center;font-size:0.85rem;color:var(--ink-mute)}
.ws-detail-notify a{color:var(--t-ink,var(--rust));text-decoration:underline;text-underline-offset:2px}
.ws-detail-body .tag{margin-bottom:1rem}
.ws-detail-body h1{font-size:clamp(2.1rem,4.2vw,3.3rem);margin-bottom:1.25rem}
.ws-detail-body .lead{font-size:1.2rem;line-height:1.6;color:var(--ink-soft);margin-bottom:1.75rem;max-width:58ch}

.ws-formats{display:flex;flex-wrap:wrap;gap:0.45rem;margin:0 0 1.5rem}
.ws-format-badge{display:inline-flex;align-items:center;gap:0.45rem;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.4rem 0.8rem;border-radius:999px;border:1px solid var(--rule);background:var(--white);color:var(--ink-mute)}
.ws-format-badge.is-on{border-color:var(--rust-tint);background:var(--rust-pale);color:var(--rust)}
.ws-format-badge.is-on::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--rust)}
.ws-format-badge.is-off{opacity:0.6;text-decoration:line-through}

.ws-block{margin:2.8rem 0 0;scroll-margin-top:100px}
.ws-block > .ws-block-sub{color:var(--ink-mute);font-size:0.93rem;margin:0 0 1.1rem;max-width:60ch}
.ws-list{list-style:none;margin:0;display:flex;flex-direction:column;gap:0.6rem}
.ws-list li{position:relative;padding-left:1.6rem;color:var(--ink-soft);line-height:1.55}
.ws-list-2col{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem 2rem}
@media (max-width:700px){.ws-list-2col{grid-template-columns:1fr}}
.ws-results .ws-list li{color:var(--ink)}
.ws-results p{margin:1rem 0 0;color:var(--ink-soft);font-size:0.96rem}
.ws-audience{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0 0 1rem}
.ws-audience-text{color:var(--ink-soft);line-height:1.7;max-width:62ch}
.ws-audience-note{color:var(--ink-mute);font-size:0.94rem;max-width:60ch}
.ws-audience-note strong{color:var(--ink)}
@media (max-width:900px){.ws-detail-grid{grid-template-columns:1fr;gap:2rem}.ws-detail-media{position:static}}


.badge-time{background:var(--c-voice-bg);color:var(--c-voice);border-color:var(--c-voice)}

/* ── Detailseiten: Grundgestalt (Maße, Typo) — Farbe kommt aus data-theme ── */
.ws-facts .ico{width:34px;height:34px;flex-shrink:0;border-radius:10px;border:1px solid currentColor;display:flex;align-items:center;justify-content:center}
.ws-facts .ico svg{width:17px;height:17px;stroke:var(--white)}
.ws-block > h2{display:flex;align-items:baseline;gap:0.6rem;font-size:1.5rem;margin:0 0 0.35rem}
.ws-block > h2::before{content:'';width:22px;height:2px;flex:0 0 22px}
.ws-list li::before{content:'\2192';position:absolute;left:0;top:0.02em;font-weight:700}
.ws-list.is-check li::before{content:'\2713'}
.ws-results{border:1px solid var(--rule);border-left-width:3px;border-radius:14px;padding:1.4rem 1.6rem}
.termine-box{border:1px solid var(--rule);border-radius:14px;padding:1.3rem 1.5rem}
.termine-box h3{font-family:var(--mono);font-weight:500;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:0.8rem}
.termine-box li::before{content:'';position:absolute;left:0;top:0.62em;width:7px;height:7px;border-radius:50%}
.ws-audience span{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;padding:0.42rem 0.85rem;border-radius:999px;border:1px solid currentColor}

/* ── Detailseiten: eine Themenfarbe pro Workshop ── */
[data-theme="social"]{--t:var(--c-social);--t-ink:var(--c-social-ink);--tb:var(--c-social-bg)}
[data-theme="cam"]{--t:var(--c-cam);--t-ink:var(--c-cam-ink);--tb:var(--c-cam-bg)}
[data-theme="voice"]{--t:var(--c-voice);--t-ink:var(--c-voice-ink);--tb:var(--c-voice-bg)}
[data-theme="heart"]{--t:var(--c-heart);--t-ink:#8E3E28;--tb:#F7E4DD}
.ws-card[data-theme="heart"]{--t:var(--c-heart);--t-ink:#8E3E28;--tb:#F7E4DD}
.ws-facts li{display:flex;gap:0.8rem;align-items:center;font-size:0.92rem;color:var(--ink-soft);white-space:nowrap}
.ws-facts li > span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-facts strong{font-weight:600;color:var(--ink)}
/* Kontaktformular auf dunkler Fläche */
#kontakt .contact-form-wrapper{background:var(--white);border:1px solid rgba(255,255,255,0.5);box-shadow:var(--shadow-lg)}
#kontakt .form-group label{color:var(--ink-mute)}
#kontakt .form-group input,#kontakt .form-group textarea,#kontakt .form-group select{background:var(--paper);border:1px solid var(--rule-strong);color:var(--ink)}
#kontakt .form-group input:focus,#kontakt .form-group textarea:focus{border-color:var(--rust);background:var(--white)}
#kontakt .form-group input::placeholder,#kontakt .form-group textarea::placeholder{color:#A8988C}
#kontakt .form-dsgvo{color:var(--ink-mute)}
#kontakt .form-dsgvo a{color:var(--ink-soft)}

[data-theme="chat"]{--t:var(--c-chat);--t-ink:#255A73;--tb:#E7F0F5}
.ws-card[data-theme="chat"]{--t:var(--c-chat);--t-ink:#255A73;--tb:#E7F0F5}
[data-theme="talk"]{--t:var(--c-neutral);--t-ink:var(--c-neutral-ink);--tb:var(--c-neutral-bg)}
.ws-detail .tag{color:var(--t-ink,var(--rust));background:var(--tb,var(--rust-pale));border-color:var(--t,var(--rust))}
.ws-detail .tag::before{background:var(--t,var(--rust))}
.ws-detail h1 em{color:var(--t-ink,var(--rust))}
.ws-block > h2{color:var(--t-ink,var(--rust))}
.ws-block > h2::before{background:var(--t,var(--rust))}
.ws-list li::before{color:var(--t-ink,var(--rust))}
.ws-results{border-left-color:var(--t,var(--rust));background:var(--tb,var(--rust-pale))}
.ws-results p strong{color:var(--t-ink,var(--rust))}
.ws-audience span{color:var(--t-ink,var(--rust));border-color:var(--t,var(--rust));background:var(--tb,var(--rust-pale))}
.termine-box{background:var(--tb,var(--rust-pale));border-color:var(--t,var(--rust))}
.termine-box h3{color:var(--t-ink,var(--rust))}
.termine-box li::before{background:var(--t,var(--rust))}
.ws-facts .ico{background:var(--t,var(--rust));border-color:var(--t,var(--rust));color:var(--t,var(--rust))}
.ws-facts .ico svg{stroke:var(--white)}
.ws-detail-cta.btn-primary{background:var(--t,var(--rust));border-color:var(--t,var(--rust))}
.ws-detail-cta.btn-primary:hover{background:var(--ink);border-color:var(--ink)}
.breadcrumb .current{color:var(--t-ink,var(--ink))}
.ws-list.is-check li::before{content:'✓'}

/* ── Workshop-Karten: klarer Aufbau, ein Ton pro Thema ── */

/* ── Workshop-Karten: eine Information pro Zeile, gleiche Höhe in der Reihe ── */

/* ── Abschnitte farbig hinterlegt ── */
.page-hero{background:var(--c-voice-bg)}
.ws-card,.faq-toggle,.hero-topic,.contact-form-wrapper{background:var(--white)}
.sub-live{font-family:var(--mono);font-size:0.85em;color:var(--c-cam-ink);letter-spacing:0.08em}

/* ── Themenfarben & Signale ── */

/* ── Workshop-Karten: kompakt und ruhig ── */
.ws-card-notify:hover{color:var(--t-ink,var(--rust))}
.ws-card-ask{grid-template-rows:auto;align-content:center;padding:1.6rem 1.4rem}
@media (max-width:700px){.ws-grid{grid-template-columns:1fr}.ws-card-title,.ws-card-text,.ws-card-facts{min-height:auto}.ws-card-foot{grid-template-columns:1fr}}

.ws-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--t,var(--rust));z-index:2}
.ws-card:hover{transform:translateY(-3px);border-color:var(--t,var(--rust));box-shadow:var(--shadow-md)}
/* Kontaktformular: klare Struktur, keine Umbrüche */
.contact-form-wrapper{max-width:620px;margin-left:auto;margin-right:auto}
.contact-form-wrapper form{display:grid;gap:0.9rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.9rem}
.form-group{margin:0}
.form-group label{white-space:nowrap}
.contact-form-wrapper .btn{width:100%;margin-top:0.3rem}
@media (max-width:600px){.form-row{grid-template-columns:1fr}.ws-card-facts{grid-template-columns:1fr 1fr}}

.ws-card:hover .ws-card-img img{transform:scale(1.05)}
.ws-card-title,.ws-card-text,.ws-card-line,.ws-card-foot{margin-left:1.1rem;margin-right:1.1rem}
.ws-card-title a:hover{color:var(--t-ink,var(--rust))}

/* ── Abschnitts-Fotos im Hintergrund ── */
#workshops .sec-photo::after{background:linear-gradient(180deg,var(--c-social-bg) 0%,rgba(226,240,232,0.93) 40%,var(--c-social-bg) 100%)}
#faq .sec-photo::after{background:linear-gradient(180deg,var(--c-voice-bg) 0%,rgba(248,226,218,0.94) 45%,var(--c-voice-bg) 100%)}

/* ── Home-Button ── */

/* ── Portrait ── */
.portrait-round{width:100%;max-width:300px;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;border-radius:50%;display:block;border:4px solid var(--white);box-shadow:var(--shadow-md)}
.kontakt-portrait{display:flex;justify-content:center;margin-bottom:1.75rem}
.kontakt-portrait img{width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:4px solid rgba(255,255,255,0.85);box-shadow:var(--shadow-md)}

/* ── Mobil ── */
@media (max-width:900px){
  .ws-detail-grid{grid-template-columns:1fr;gap:1.75rem}
  .ws-detail-media{position:static}
  .ws-list-2col{grid-template-columns:1fr}
}
@media (max-width:700px){
  .ws-detail-media{position:relative}
.ws-detail-photo{aspect-ratio:16/10}
  .footer-social span{width:30px;height:30px}
}

/* ── Themenfarben: grün = Social Media, gelb = Kamera, rot = Stimme & Podcast ── */
.ws-card[data-theme="social"]{--t:var(--c-social);--t-ink:var(--c-social-ink);--tb:var(--c-social-bg)}
.ws-card[data-theme="cam"]{--t:var(--c-cam);--t-ink:var(--c-cam-ink);--tb:var(--c-cam-bg)}
.ws-card[data-theme="voice"]{--t:var(--c-voice);--t-ink:var(--c-voice-ink);--tb:var(--c-voice-bg)}
.ws-card[data-theme="talk"]{--t:var(--c-neutral);--t-ink:var(--c-neutral-ink);--tb:var(--c-neutral-bg)}

/* ── Workshop-Karten: ein Ton pro Thema, ruhige Struktur ── */

/* ── Abschnittsflächen ruhig, Farbe tragen die Karten ── */

/* ============================================================ SCROLL REVEAL ============================================================ */
@keyframes revUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes revLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes revRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.js-anim .reveal,.js-anim .reveal-left,.js-anim .reveal-right{opacity:0}
.js-anim .reveal.is-visible{animation:revUp .7s cubic-bezier(0.22,1,0.36,1) both}
.js-anim .reveal-left.is-visible{animation:revLeft .75s cubic-bezier(0.22,1,0.36,1) both}
.js-anim .reveal-right.is-visible{animation:revRight .75s cubic-bezier(0.22,1,0.36,1) both}
.js-anim .is-visible[data-d="1"]{animation-delay:.08s}.js-anim .is-visible[data-d="2"]{animation-delay:.16s}.js-anim .is-visible[data-d="3"]{animation-delay:.24s}.js-anim .is-visible[data-d="4"]{animation-delay:.32s}.js-anim .is-visible[data-d="5"]{animation-delay:.4s}.js-anim .is-visible[data-d="6"]{animation-delay:.48s}
.js-anim .anim-done{opacity:1 !important;transform:none !important;animation:none !important}
@media (prefers-reduced-motion:reduce){
  .js-anim .reveal,.js-anim .reveal-left,.js-anim .reveal-right{opacity:1 !important;animation:none !important}
  .marquee-track{animation:none !important}
}

/* ============================================================ MOBILE POLISH ============================================================ */
img,svg,video{max-width:100%;height:auto}
@media (max-width:900px){
  .container,.container-narrow{padding:0 1.25rem}
  .nav-inner{padding:0.8rem 1.25rem}
  .page-hero{padding:3.5rem 0 3rem}
  .page-hero-inner{padding:0 1.25rem}
}
@media (max-width:700px){
  :root{--section-gap:64px}
  .container,.container-narrow{padding:0 1rem}
  input,textarea,select{font-size:16px !important}
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .legal-wrapper{padding:2.5rem 1rem}
  .footer-inner{padding:0 1rem}
}

/* ── Trenner: Icons auf einer Linie, Lichtpunkt + Puls ── */
.section-divider{display:flex;align-items:center;justify-content:center;padding:2.75rem 0;background:transparent}
/* ── Header: Marke und Icons eng zusammen, ohne Hover-Bewegung ── */
.nav-brand{display:flex;flex-direction:column;gap:0.2rem;align-items:flex-start}

/* ── Footer: Marke weiß, darunter die Icons ── */
.footer-brand .logo{color:var(--white)}
.footer-brand .logo span{color:var(--white)}
.footer-social{display:flex;gap:0.45rem;margin-top:1.25rem}
.footer-social span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;color:var(--white)}
.footer-social svg{width:15px;height:15px;stroke:var(--white)}
.footer-social .section-divider .divider-line-wrap{position:relative;width:100%;max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:center;min-height:46px}
.footer-social .section-divider .divider-line-wrap{position:relative;width:100%;max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:center;gap:1.25rem;min-height:46px}
.divider-rule{position:relative;flex:1;height:2px;border-radius:2px;overflow:hidden;background:rgba(26,20,16,0.07)}
.divider-rule i{position:absolute;inset:0;display:block;transform:scaleX(0);border-radius:2px}
.divider-rule.left i{transform-origin:right center;background:linear-gradient(270deg,var(--c-heart),var(--c-chat) 55%,rgba(26,20,16,0.05))}
.divider-rule.right i{transform-origin:left center;background:linear-gradient(90deg,var(--c-cam),var(--c-social) 55%,rgba(26,20,16,0.05))}
.divider-icons{position:relative;display:flex;align-items:center;gap:0.9rem;flex-shrink:0;padding:0}
.divider-icons span{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;border:1px solid currentColor;box-shadow:var(--shadow-sm);pointer-events:none;transform:none}
.divider-icons svg{width:19px;height:19px;display:block;stroke:var(--white)}
@media (max-width:600px){.section-divider .divider-line-wrap{gap:0.7rem;padding:0 1rem}.divider-icons{gap:0.5rem}.divider-icons span{width:34px;height:34px;border-radius:11px}.divider-icons svg{width:16px;height:16px}}
/* Portrait modern: Farbfläche, weiche Ecken, sanfter Zoom */

#kontakt{position:relative;background:var(--rust);color:var(--white);overflow:hidden}
#kontakt .kontakt-bg{position:absolute;inset:0;z-index:0;background-image:url('/assets/bg-beton.jpg');background-size:cover;background-position:center;opacity:1}
#kontakt .kontakt-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(150,60,38,0.93),rgba(178,82,58,0.9) 50%,rgba(150,60,38,0.94))}
#kontakt::before{content:none}
#workshops > .container,#faq > .container,#kontakt > .container{position:relative;z-index:1}
/* Abstände in den Sektionen gleichmäßig */
#workshops,#faq,#kontakt{padding:var(--section-gap) 0}
.section-header{margin-bottom:2.5rem}

.ic-chat{color:var(--c-chat);background:var(--c-chat) !important}


.ic-heart{background:var(--c-heart)}
.footer-social .ic-cam{background:var(--c-cam)}
.footer-social .ic-mic{background:var(--c-social)}

/* ── Trenner: nur Icons, keine Linie ── */
.section-divider[data-divider="plain"]{padding:1.5rem 0}
.ic-chat{color:var(--c-chat);background:var(--c-chat) !important}
.ic-heart{color:var(--c-heart);background:var(--c-heart) !important}
.ic-cam{color:var(--c-cam);background:var(--c-cam) !important}
.ic-mic{color:var(--c-social);background:var(--c-social) !important}
.nav-social{display:flex;gap:0.4rem}
.nav-social svg{width:14px;height:14px;display:block;stroke:var(--white)}
@media (max-width:520px){.nav-social span{width:22px;height:22px;border-radius:7px}.nav-social svg{width:12px;height:12px}}

/* ── Social-Icons in der Nav in denselben Farben ── */

/* ── Hero: Themen-Buttons ── */

/* ── Farbakzente: die vier Icon-Farben durchziehen die Seite ── */
.ws-grid .ws-card.is-soon .ws-card-price{color:var(--ink-mute)}
.badge-online{background:var(--c-social-bg);color:var(--c-social);border-color:var(--c-social)}
.badge-inperson{background:var(--c-social-bg);color:var(--c-social);border-color:var(--c-social)}
.badge-business{background:var(--c-cam-bg);color:var(--c-cam);border-color:var(--c-cam)}
.footer-col:nth-child(2) h5{color:var(--c-cam)}
.footer-col:nth-child(4) h5{color:var(--rust-light)}

.ws-detail{background:var(--paper)}
.content-section.alt{background:var(--c-social-bg)}
.ws-facts,.ws-card{background:var(--white)}

.ws-audience-text{color:var(--ink-soft);line-height:1.7;max-width:62ch}
.ws-facts .label-ort::before{content:''}

.ws-detail-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block;border:1px solid var(--rule)}

.ws-signal{display:flex;flex-direction:column;gap:0.5rem;align-items:flex-start;background:var(--white);border:1px solid var(--rule);border-radius:14px;padding:1rem 1.2rem;font-size:0.9rem;color:var(--ink-soft);line-height:1.5;max-width:none}

.nav-links li.nav-home-item .nav-home{width:36px;height:36px;border-radius:11px;border:1px solid var(--rust-tint);background:var(--rust-pale);color:var(--rust-dark);box-shadow:var(--shadow-sm);padding:0;transition:background .18s,color .18s,border-color .18s}
.nav-links li.nav-home-item .nav-home svg{display:block;width:17px;height:17px}
.nav-links li.nav-home-item .nav-home::after{content:none}
.nav-links li.nav-home-item .nav-home:hover{background:var(--rust);border-color:var(--rust);color:var(--white)}
@media (max-width:900px){
  .nav-links li.nav-home-item .nav-home{width:100%;border:none;box-shadow:none;justify-content:flex-start;gap:0.6rem;padding:0.9rem 0.5rem;border-bottom:1px solid var(--rule);border-radius:0}
  .nav-links li.nav-home-item .nav-home::after{content:'Startseite';font-family:var(--mono);font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase}
}
.nav-home{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--rust-tint);background:var(--rust-pale);color:var(--rust-dark);box-shadow:var(--shadow-sm);transition:background .18s,color .18s,border-color .18s}
.nav-home svg{width:18px;height:18px}
.nav-home:hover{background:var(--rust);border-color:var(--rust);color:var(--white)}
.nav-social span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;border:none;box-shadow:none;transition:none}
.nav-social span svg{width:14px;height:14px;display:block;stroke:#fff}

/* ── Hero: länger, dunkler Farbschleier, bunte Buttons ── */
#hero{position:relative;overflow:hidden;background-size:cover;background-position:center 35%;border-bottom:none;padding:0}
#hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(90,30,14,0.86),rgba(140,44,20,0.84) 55%,rgba(90,30,14,0.9))}
.hero-inner{position:relative;z-index:1;max-width:940px;margin:0 auto;padding:8.5rem 2rem 8rem;text-align:center;min-height:82vh;display:flex;flex-direction:column;justify-content:center}
.hero-text{display:flex;flex-direction:column;align-items:center;text-align:center}
#hero .hero-text h1 em{color:var(--rust-tint)}
#hero .hero-lead strong{color:var(--white)}
.hero-topics{display:flex;flex-wrap:wrap;justify-content:center;gap:0.4rem;margin-bottom:1.9rem}
.hero-topic{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.38rem 0.8rem;border-radius:999px;border:1px solid transparent;color:var(--white);transition:transform .18s ease}
.hero-topic:hover{color:var(--white);transform:translateY(-2px)}




.hero-ctas{display:flex;gap:0.7rem;flex-wrap:wrap;justify-content:center}
#hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70% 62% at 50% 50%,rgba(40,14,6,0.6),rgba(40,14,6,0.34) 62%,rgba(40,14,6,0.06) 88%,transparent 100%)}
#hero .hero-inner{position:relative;z-index:2}
#hero .hero-text h1{color:var(--white);text-shadow:0 3px 22px rgba(26,12,6,0.75),0 1px 3px rgba(26,12,6,0.5);font-weight:800;letter-spacing:-0.035em}
#hero .hero-lead{color:var(--white);font-weight:500;font-size:1.2rem;text-shadow:0 2px 14px rgba(26,12,6,0.65)}
#hero .hero-topic{background:transparent;border:1.5px solid currentColor;color:var(--white);text-shadow:0 1px 8px rgba(26,12,6,0.5)}

#hero .btn-primary{background:var(--white);color:var(--rust-dark);border-color:var(--white);box-shadow:0 8px 24px rgba(26,20,16,0.22)}
#hero .btn-primary:hover{background:var(--paper-2);border-color:var(--paper-2);color:var(--rust-deep)}
#hero .btn-outline{background:var(--rust-deep);color:var(--white);border-color:rgba(255,255,255,0.85)}
#hero .btn-outline:hover{background:var(--white);color:var(--rust-dark);border-color:var(--white)}
@media (max-width:900px){.hero-inner{padding:5.5rem 1.25rem 5rem;min-height:76vh}}

/* ── Moderne Abschnitts-Hintergründe ── */
#kontakt h2,#kontakt .section-header h2{color:var(--white)}
#kontakt h2 em{color:var(--rust-tint)}
#kontakt .tag{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.32);color:var(--white)}
#kontakt .tag::before{background:var(--rust-light)}
#kontakt .contact-form-wrapper .btn-primary{background:var(--rust);color:var(--white);border-color:var(--rust)}
#kontakt .contact-form-wrapper .btn-primary:hover{background:var(--rust-dark);border-color:var(--rust-dark);color:var(--white)}
#kontakt .btn-primary{background:var(--white);color:var(--rust-dark);border-color:var(--white);box-shadow:0 8px 24px rgba(26,20,16,0.22)}
#kontakt .btn-primary:hover{background:var(--paper-2);border-color:var(--paper-2);color:var(--rust-deep)}
#kontakt .contact-options .btn-outline,#kontakt .contact-options .btn-white{background:var(--white);color:var(--rust-dark);border-color:var(--white)}
#kontakt .contact-options .btn-outline:hover{background:var(--paper-2);color:var(--rust-deep)}

/* ── Workshop-Karten: lesbarer ── */

/* ── Start-Link statt Haus-Button ── */

/* ── Trenner: Video-Timeline mit Abspielkopf ── */
.section-divider .divider-head{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--white);border:3px solid var(--rust);box-shadow:0 3px 12px rgba(26,20,16,0.28);opacity:0}

/* ── Portrait: groß, animiert ── */

body.page-white,body.page-white .content-section,body.page-white .content-section.alt{background:var(--white)}
body.page-white .prose p{color:var(--ink-soft)}

/* ── Mobil ── */
@media (max-width:700px){
  :root{--section-gap:64px}
  .hero-topic{font-size:0.56rem;padding:0.3rem 0.62rem}
  .hero-ctas{width:100%;flex-direction:column}
  .hero-ctas .btn{width:100%}
  .section-header h2{font-size:clamp(1.6rem,7vw,2rem)}
  .faq-question{font-size:0.98rem;padding:1.2rem 0}
  .ws-detail-body h1{font-size:clamp(1.9rem,8vw,2.4rem)}
  .footer-inner{gap:1.6rem}
}
@media (max-width:420px){
  .container{padding:0 0.9rem}
}

.ws-card-ask .btn,.ws-card.ws-card-ask .btn{background:var(--rust);color:var(--white);border-color:var(--rust);box-shadow:none}
.ws-card-ask .btn:hover,.ws-card.ws-card-ask .btn:hover{background:var(--rust-dark);border-color:var(--rust-dark);color:var(--white)}

.ws-detail-media{position:relative}
.ws-detail-flag{position:absolute;left:0.9rem;top:0.9rem;z-index:3;margin:0}

.section-divider .divider-line-wrap{position:relative;flex:1 1 100%;width:100%;max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:center;gap:1.25rem;min-height:46px}

.about-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:4rem;align-items:start}
.portrait-cap{position:absolute;z-index:2;left:1rem;bottom:1rem;background:var(--ink);color:var(--white);font-family:var(--mono);font-size:0.56rem;letter-spacing:0.14em;text-transform:uppercase;padding:0.45rem 0.8rem;border-radius:999px;box-shadow:var(--shadow-md)}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:3rem}.portrait-frame{max-width:400px;margin:0 auto 1.5rem}.portrait-frame::before{left:-1rem;top:1rem;right:1rem;bottom:-1rem}}

.divider-icons span{overflow:visible}
.divider-icons .burst{position:absolute;left:50%;top:-2px;width:20px;height:20px;margin-left:-10px;opacity:0;pointer-events:none}
.divider-icons .burst svg{width:20px;height:20px;stroke:currentColor}

@media (max-width:900px){
  .hero-inner{padding:5rem 1.25rem 4.5rem;min-height:72vh}
  .about-grid{grid-template-columns:1fr}
  .ws-detail-grid{grid-template-columns:1fr;gap:1.75rem}
  .ws-detail-media{position:static}
}
@media (max-width:700px){
  :root{--section-gap:60px}
  .contact-form-wrapper{padding:1.2rem}
  .footer-inner{gap:1.5rem}
  .ws-facts li{white-space:normal}
  .ws-detail-body h1{font-size:clamp(1.85rem,8vw,2.3rem)}
}
@media (max-width:420px){
  .hero-topic{font-size:0.54rem;padding:0.28rem 0.55rem}
  .divider-icons span{width:32px;height:32px}
  .divider-icons svg{width:15px;height:15px}
}


/* ===== Startseite ===== */

  /* ============================================================
     CROSSMEDIA ACADEMY — Startseite
     CI: Rostrot #B84A2A · warmes Papier · Ink #1A1410
     Display: Bricolage Grotesque · Body: Manrope · Labels: JetBrains Mono
     ============================================================ */
  :root{
    --rust:#B2523A; --rust-dark:#8E3E28; --rust-deep:#6B2410;
    --rust-light:#E3C4B8; --rust-tint:#F2E0D9; --rust-pale:#FBF1EC;
    --ink:#1A1410; --ink-soft:#4A3F37; --ink-mute:#7A6B62;
    --paper:#FBF8F4; --paper-2:#F5EFE7; --paper-3:#F0E6DA;
    --rule:#E8DDD2; --rule-soft:#F0E6DA; --rule-strong:#D6C7B8;
    --white:#FFFFFF;
    --bg:var(--paper); --bg-2:var(--paper-2); --bg-3:var(--paper-3);
    --line:var(--rule); --line-2:var(--rule-strong); --glass:var(--white);
    --text:var(--ink); --text-muted:var(--ink-mute); --border:var(--rule); --off-white:var(--paper-2);
    --green:#2E5A36; --gold:#8A6A1F; --teal:#2E5A5A;
    --mono:'JetBrains Mono',ui-monospace,monospace;
    --display:'Archivo','Manrope',sans-serif;
    --shadow-sm:0 2px 10px rgba(26,20,16,0.05);
    --shadow-md:0 10px 30px rgba(26,20,16,0.08);
    --shadow-lg:0 22px 55px rgba(26,20,16,0.13);
    --section-gap:120px;
    --c-social:#1F7A4D; --c-cam:#C98A08; --c-voice:#A5462C; --c-neutral:#5A4A40;
    --c-social-ink:#1A6640; --c-cam-ink:#7A5512; --c-voice-ink:#A83418; --c-neutral-ink:#4A3F37;
    --c-heart:#A5462C; --c-chat:#2F6F8F;
    --c-social-bg:#E2F0E8; --c-cam-bg:#FBEFD2; --c-voice-bg:#F8E2DA; --c-neutral-bg:#F0E9E3;
    --ic-like:var(--c-social); --ic-heart:var(--c-voice); --ic-cam:var(--c-cam); --ic-mic:var(--c-voice);
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{background:var(--paper)}
  body{font-family:'Manrope',system-ui,sans-serif;font-size:17px;line-height:1.7;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3,h4{font-family:var(--display);line-height:1.06;letter-spacing:-0.022em;font-weight:700;text-wrap:balance;color:var(--ink)}
  h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:700;letter-spacing:-0.03em}
  h2{font-size:clamp(1.9rem,3.5vw,2.7rem)}
  h3{font-size:clamp(1.25rem,2.2vw,1.55rem)}
  h4{font-size:1.05rem;letter-spacing:-0.015em}
  em{font-style:normal;color:var(--rust)}
  p{max-width:65ch;text-wrap:pretty}
  a{color:inherit;text-decoration:none}
  a:hover{color:var(--rust)}
  ::selection{background:var(--rust);color:var(--white)}
  :focus-visible{outline:2px solid var(--rust);outline-offset:3px}
  .container{max-width:1200px;margin:0 auto;padding:0 2rem}
  .rust{color:var(--rust)}
  section[id]{scroll-margin-top:5rem}

  .tag{display:inline-flex;align-items:center;gap:0.45rem;font-family:var(--mono);font-size:0.68rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--rust);background:var(--rust-pale);border:1px solid var(--rust-tint);padding:0.35rem 0.75rem;border-radius:999px;margin-bottom:1.25rem}
  .tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--rust)}

  /* ── Buttons ── */
  .btn{display:inline-block;font-family:'Manrope',sans-serif;font-size:0.93rem;font-weight:600;padding:0.85rem 1.7rem;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .18s ease,background .18s,color .18s,border-color .18s,box-shadow .18s}
  .btn-primary{background:var(--rust);color:var(--white);border-color:var(--rust);box-shadow:0 4px 16px rgba(184,74,42,0.22)}
  .btn-primary:hover{background:var(--rust-dark);border-color:var(--rust-dark);color:var(--white);transform:translateY(-2px);box-shadow:0 8px 24px rgba(184,74,42,0.3)}
  .btn-outline{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
  .btn-outline:hover{color:var(--rust);border-color:var(--rust);background:var(--rust-pale);transform:translateY(-2px)}
  .btn-white{background:var(--white);color:var(--rust-deep);border-color:var(--white)}
  .btn-white:hover{background:var(--paper-2);transform:translateY(-2px)}

  /* ── Bild-Platzhalter ── */
  .img-slot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.25rem;border-radius:16px;overflow:hidden;background:repeating-linear-gradient(135deg,var(--paper-2) 0,var(--paper-2) 15px,var(--rule) 15px,var(--rule) 16px);border:1px solid var(--rule)}
  .img-slot span{position:relative;z-index:1;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:0.5rem 0.9rem;line-height:1.4;box-shadow:var(--shadow-sm)}
  .img-slot small{display:block;margin-top:0.35rem;font-family:'Manrope',sans-serif;font-size:0.7rem;letter-spacing:0.02em;text-transform:none;color:var(--ink-mute)}

  /* ============================================================ NAV ============================================================ */
  nav[aria-label="Hauptnavigation"]{position:sticky;top:0;z-index:100;background:rgba(251,248,244,0.88);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--rule-soft);transition:box-shadow .25s}
  nav.is-scrolled{box-shadow:var(--shadow-sm)}
  nav.is-scrolled .nav-inner{padding-top:0.55rem;padding-bottom:0.55rem}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0.9rem 2rem;max-width:1200px;margin:0 auto;transition:padding .25s}
  .nav-logo{font-family:var(--display);font-size:1.14rem;font-weight:700;letter-spacing:-0.02em;color:var(--ink);white-space:nowrap}
  .nav-logo:hover{color:var(--ink)}
  .nav-logo span{color:var(--ink)}
  .nav-links{display:flex;gap:1.2rem;list-style:none;align-items:center}
  .nav-links a{font-family:var(--mono);font-size:0.74rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;transition:color .18s}
  .nav-links a:hover{color:var(--rust)}
  .nav-links a.btn{font-family:'Manrope',sans-serif;text-transform:none;letter-spacing:0.01em;font-size:0.85rem;padding:0.55rem 1.2rem}
  .nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:var(--white)}
  .nav-links a.nav-cta{padding:0.55rem 1.2rem;font-size:0.85rem}
  @media (min-width:901px) and (max-width:1180px){.nav-links{gap:0.8rem}.nav-links a{font-size:0.67rem}.nav-logo{font-size:1.02rem}}

  .has-submenu{position:relative}
  .has-submenu > a .caret{font-size:0.7em;margin-left:0.25em;color:var(--ink-mute);transition:transform .2s;display:inline-block}
  .has-submenu:hover > a .caret{transform:rotate(180deg)}
  .submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-4px);background:var(--white);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow-lg);list-style:none;padding:0.45rem;margin-top:0.7rem;min-width:290px;opacity:0;pointer-events:none;z-index:110}
  .has-submenu::after{content:'';position:absolute;top:100%;left:0;right:0;height:1rem;z-index:109;pointer-events:none}
  .has-submenu:hover::after,.has-submenu:focus-within::after{pointer-events:auto}
  .has-submenu:hover .submenu,.has-submenu:focus-within .submenu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  .submenu li a{display:block;padding:0.55rem 0.85rem;border-radius:9px;font-family:'Manrope',sans-serif;font-size:0.88rem;letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap;transition:background .15s,color .15s}
  .submenu li a:hover{background:var(--rust-pale);color:var(--rust)}

  .nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--rule-strong);background:transparent;border-radius:999px;cursor:pointer;align-items:center;justify-content:center;padding:0}
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:16px;height:1.6px;background:var(--ink);position:relative;transition:transform .2s,opacity .2s,top .2s}
  .nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0}
  .nav-toggle span::before{top:-5px}
  .nav-toggle span::after{top:5px}
  .nav-toggle.open span{background:transparent}
  .nav-toggle.open span::before{top:0;transform:rotate(45deg)}
  .nav-toggle.open span::after{top:0;transform:rotate(-45deg)}

  /* ============================================================ HERO ============================================================ */
  #faq .tag{background:var(--white);border-color:var(--rust-tint);color:var(--rust)}
  #faq .tag::before{background:var(--rust)}
  #faq .faq-item{border-bottom-color:var(--rule)}
  #faq .faq-question{color:var(--ink)}
  #faq .faq-question:hover,#faq .faq-item.open .faq-question{color:var(--rust)}
  #faq .faq-toggle{background:var(--white);border-color:var(--rule-strong);color:var(--ink-mute)}
  #faq .faq-item:hover .faq-toggle{color:var(--rust);border-color:var(--rust-tint)}
  #faq .faq-item.open .faq-toggle{background:var(--rust);color:var(--white);border-color:var(--rust)}
  #faq .faq-answer{color:var(--ink-soft)}
  #faq .faq-answer strong{color:var(--ink)}
  #faq .faq-answer a{color:var(--rust)}
  #faq .faq-item:hover{background:rgba(255,255,255,0.35)}

  @keyframes livePulse{0%,100%{opacity:1}50%{opacity:0.35}}
  .ws-card .btn-outline{border-color:var(--rule-strong);color:var(--ink)}
  .ws-card:hover .btn-outline{border-color:var(--t,var(--rust));color:var(--t-ink,var(--rust));background:var(--tb,var(--rust-pale))}
  .nav-links li.nav-home-item .nav-home{width:36px;height:36px;border-radius:11px;border:1px solid var(--rust-tint);background:var(--rust-pale);color:var(--rust-dark);box-shadow:var(--shadow-sm);padding:0;transition:background .18s,color .18s,border-color .18s}
  .nav-links li.nav-home-item .nav-home svg{display:block;width:17px;height:17px}
  .nav-links li.nav-home-item .nav-home::after{content:none}
  .nav-links li.nav-home-item .nav-home:hover{background:var(--rust);border-color:var(--rust);color:var(--white)}
  @media (max-width:900px){
    .nav-links li.nav-home-item .nav-home{width:100%;border:none;box-shadow:none;justify-content:flex-start;gap:0.6rem;padding:0.9rem 0.5rem;border-bottom:1px solid var(--rule);border-radius:0}
    .nav-links li.nav-home-item .nav-home::after{content:'Startseite';font-family:var(--mono);font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase}
  }
  .nav-home{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--rust-tint);background:var(--rust-pale);color:var(--rust-dark);box-shadow:var(--shadow-sm);transition:background .18s,color .18s,border-color .18s}
  .nav-home svg{width:18px;height:18px}
  .nav-home:hover{background:var(--rust);border-color:var(--rust);color:var(--white)}
  .nav-social span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;border:none;box-shadow:none;transition:none}
  .nav-social span svg{width:14px;height:14px;display:block;stroke:#fff}
  .nav-social span:hover{color:inherit}
  /* Portrait modern: versetzter Farbblock hinter dem Bild */
  /* 6. Kachel: Anfrage */
  .ws-card.ws-card-ask::before{background:var(--rust-light)}
  .ws-card-ask .btn,.ws-card.ws-card-ask .btn{background:var(--rust);color:var(--white);border-color:var(--rust);box-shadow:none}
  .ws-card-ask .btn:hover,.ws-card.ws-card-ask .btn:hover{background:var(--rust-dark);border-color:var(--rust-dark);color:var(--white)}

  .hero-eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:1.5rem}
  .hero-eyebrow::before{content:'';width:26px;height:1px;background:var(--rust)}
  .hero-text h1{margin-bottom:2rem;line-height:1}
  .hero-text p{font-size:1.14rem;color:var(--ink-soft);margin-bottom:1.75rem;max-width:52ch;line-height:1.65}
  .hero-text p strong{color:var(--ink);font-weight:600}
  .hero-chips{display:flex;gap:0.45rem;flex-wrap:wrap;margin-bottom:2rem}
  .hero-chip{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);background:var(--white);border:1px solid var(--rule);padding:0.38rem 0.75rem;border-radius:999px;transition:color .2s,border-color .2s}
  .hero-chip:hover{color:var(--rust);border-color:var(--rust-tint)}
  .hero-chip:nth-child(1),.hero-chip:nth-child(4){color:var(--rust);border-color:var(--rust-tint);background:var(--rust-pale)}
  .hero-facts{display:flex;flex-wrap:wrap;gap:0 1.75rem;padding-top:1.5rem;border-top:1px solid var(--rule);width:100%}
  .hero-facts div{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);padding:0.35rem 0}
  .hero-facts strong{display:block;font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:-0.02em;text-transform:none;color:var(--ink);margin-bottom:0.1rem}
  .hero-media{position:relative}
  .hero-media .img-slot{aspect-ratio:4/5;box-shadow:var(--shadow-md)}
  .hero-media-note{position:absolute;bottom:-0.9rem;left:-0.9rem;background:var(--rust);color:var(--white);font-family:var(--mono);font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.5rem 0.85rem;border-radius:999px;box-shadow:0 6px 20px rgba(184,74,42,0.28)}

  /* ── Hero: Themen-Buttons ── */

  /* ── Marquee ── */
  .marquee{overflow:hidden;border-bottom:1px solid var(--rule);background:var(--paper-2);padding:0.9rem 0}
  .marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-track > span{display:inline-flex;align-items:center;gap:2.5rem;font-family:var(--mono);font-size:0.74rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;padding-right:2.5rem}
  .marquee-track > span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--rust)}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}


  /* ── Trenner: Icons auf einer Linie, Lichtpunkt + Puls ── */
  .section-divider{display:flex;align-items:center;justify-content:center;padding:2.75rem 0;background:transparent}
  /* ── Header: Marke und Icons eng zusammen, ohne Hover-Bewegung ── */
  .nav-brand{display:flex;flex-direction:column;gap:0.2rem;align-items:flex-start}

  /* ── Footer: Marke weiß, darunter die Icons ── */
  .footer-brand .logo{color:var(--white)}
  .footer-brand .logo span{color:var(--white)}
  .footer-social{display:flex;gap:0.45rem;margin-top:1.25rem}
  .footer-social span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;color:var(--white)}
  .footer-social svg{width:15px;height:15px;stroke:var(--white)}
  .footer-social .ic-heart{background:var(--c-heart)}
  .footer-social .ic-chat{color:var(--c-chat);background:var(--c-chat) !important}
.ic-heart{background:var(--c-heart)}
  .footer-social .ic-cam{background:var(--c-cam)}
  .footer-social .ic-mic{background:var(--c-social)}

  /* ── Trenner: nur Icons, keine Linie ── */
  .section-divider[data-divider="plain"]{padding:1.5rem 0}
  .section-divider .divider-line-wrap{position:relative;flex:1 1 100%;width:100%;max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:center;gap:1.25rem;min-height:46px}
  .divider-rule{position:relative;flex:1;height:2px;border-radius:2px;overflow:hidden;background:rgba(26,20,16,0.07)}
  .divider-rule i{position:absolute;inset:0;display:block;transform:scaleX(0);border-radius:2px}
  .divider-rule.left i{transform-origin:right center;background:linear-gradient(270deg,var(--c-heart),var(--c-chat) 55%,rgba(26,20,16,0.05))}
  .divider-rule.right i{transform-origin:left center;background:linear-gradient(90deg,var(--c-cam),var(--c-social) 55%,rgba(26,20,16,0.05))}
  .divider-icons{position:relative;display:flex;align-items:center;gap:0.9rem;flex-shrink:0;padding:0}
  .divider-icons span{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;border:1px solid currentColor;box-shadow:var(--shadow-sm);pointer-events:none;transform:none}
  .divider-icons span{overflow:visible}
  .divider-icons .burst{position:absolute;left:50%;top:-2px;width:20px;height:20px;margin-left:-10px;opacity:0;pointer-events:none}
  .divider-icons .burst svg{width:20px;height:20px;stroke:currentColor}
  .divider-icons svg{width:19px;height:19px;display:block;stroke:var(--white)}
  @media (max-width:600px){.section-divider .divider-line-wrap{gap:0.7rem;padding:0 1rem}.divider-icons{gap:0.5rem}.divider-icons span{width:34px;height:34px;border-radius:11px}.divider-icons svg{width:16px;height:16px}}
  /* Portrait modern: Farbfläche, weiche Ecken, sanfter Zoom */

  #kontakt{position:relative;background:var(--rust);color:var(--white);overflow:hidden}
  #kontakt .kontakt-bg{position:absolute;inset:0;z-index:0;background-image:url('/assets/bg-beton.jpg');background-size:cover;background-position:center;opacity:1}
  #kontakt .kontakt-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(150,60,38,0.93),rgba(178,82,58,0.9) 50%,rgba(150,60,38,0.94))}
  #kontakt::before{content:none}
  #workshops > .container,#faq > .container,#kontakt > .container{position:relative;z-index:1}
  /* Abstände in den Sektionen gleichmäßig */
  #workshops,#faq,#kontakt{padding:var(--section-gap) 0}
  .section-header{margin-bottom:2.5rem}

  .ic-chat{color:var(--c-chat);background:var(--c-chat) !important}
.ic-heart{color:var(--c-heart);background:var(--c-heart) !important}
  .ic-cam{color:var(--c-cam);background:var(--c-cam) !important}
  .ic-mic{color:var(--c-social);background:var(--c-social) !important}
  .nav-social{display:flex;gap:0.4rem}
  .nav-social svg{width:14px;height:14px;display:block;stroke:var(--white)}
  @media (max-width:520px){.nav-social span{width:22px;height:22px;border-radius:7px}.nav-social svg{width:12px;height:12px}}

  /* Social-Icons in der Nav in denselben Farben */


  /* ============================================================ WORKSHOPS ============================================================ */
  #workshops .container,#faq .container{position:relative;z-index:1}
  .section-header p{margin:1rem auto 0;color:var(--ink-soft);font-size:1.05rem;max-width:64ch}
  .section-header p strong{color:var(--ink);font-weight:600}


  /* Filter */

  /* Karten */
  .ws-card[data-group~="online"]::before{background:var(--green)}
  .ws-card[data-group~="praesenz"]::before{background:var(--rust)}

  .ws-card[data-group~="online"]:not([data-group~="praesenz"]) .ws-card-price{color:var(--green)}
  .badge{display:inline-block;font-family:var(--mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.22rem 0.5rem;border-radius:6px;border:1px solid var(--rule);background:var(--paper);color:var(--ink-soft)}
  .badge-online{background:#F0F6EE;color:var(--green);border-color:#C8DBC9}
  .badge-inperson{background:var(--rust-pale);color:var(--rust);border-color:var(--rust-tint)}
  .badge-group{background:var(--paper-2);color:var(--ink-mute)}
  .badge-business{background:#FBF3DF;color:var(--gold);border-color:#E8DAB4}
  .ws-card > p strong{color:var(--ink);font-weight:600}

  /* ── Workshop-Karten: klarer Aufbau, ein Ton pro Thema ── */

  /* ── Workshop-Karten: eine Information pro Zeile, gleiche Höhe in der Reihe ── */

  /* ── Themenfarben & Signale ── */

  /* ── Workshop-Karten: kompakt und ruhig ── */
  .ws-card-notify:hover{color:var(--t-ink,var(--rust))}
  .ws-card-ask{grid-template-rows:auto;align-content:center;padding:1.6rem 1.4rem}
  @media (max-width:700px){.ws-grid{grid-template-columns:1fr}.ws-card-title,.ws-card-text,.ws-card-facts{min-height:auto}.ws-card-foot{grid-template-columns:1fr}}

  .ws-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--t,var(--rust));z-index:2}
  .ws-card:hover{transform:translateY(-3px);border-color:var(--t,var(--rust));box-shadow:var(--shadow-md)}
  /* Kontaktformular: klare Struktur, keine Umbrüche */
  .contact-form-wrapper{max-width:620px;margin-left:auto;margin-right:auto}
  .contact-form-wrapper form{display:grid;gap:0.9rem}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.9rem}
  .form-group{margin:0}
  .form-group label{white-space:nowrap}
  .contact-form-wrapper .btn{width:100%;margin-top:0.3rem}
  @media (max-width:600px){.form-row{grid-template-columns:1fr}.ws-card-facts{grid-template-columns:1fr 1fr}}

  .ws-card:hover .ws-card-img img{transform:scale(1.05)}
  .ws-card-title,.ws-card-text,.ws-card-line,.ws-card-foot{margin-left:1.1rem;margin-right:1.1rem}
  .ws-card-title a:hover{color:var(--t-ink,var(--rust))}

  /* ── Abschnitts-Fotos im Hintergrund ── */
  #workshops .sec-photo::after{background:linear-gradient(180deg,var(--c-social-bg) 0%,rgba(226,240,232,0.93) 40%,var(--c-social-bg) 100%)}
  #faq .sec-photo::after{background:linear-gradient(180deg,var(--c-voice-bg) 0%,rgba(248,226,218,0.94) 45%,var(--c-voice-bg) 100%)}

  /* ── Home-Button ── */

  /* ── Portrait ── */
  .portrait-round{width:100%;max-width:300px;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;border-radius:50%;display:block;border:4px solid var(--white);box-shadow:var(--shadow-md)}
  .kontakt-portrait{display:flex;justify-content:center;margin-bottom:1.75rem}
  .kontakt-portrait img{width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:4px solid rgba(255,255,255,0.85);box-shadow:var(--shadow-md)}

  /* ── Mobil ── */
  @media (max-width:900px){
    .ws-detail-grid{grid-template-columns:1fr;gap:1.75rem}
    .ws-detail-media{position:static}
    .ws-list-2col{grid-template-columns:1fr}
  }
  @media (max-width:700px){
    .ws-detail-media{position:relative}
  .ws-detail-photo{aspect-ratio:16/10}
    .footer-social span{width:30px;height:30px}
  }

  /* ── Abschnitte farbig hinterlegt ── */
  .page-hero{background:var(--c-voice-bg)}
  .ws-card,.faq-toggle,.hero-topic,.contact-form-wrapper{background:var(--white)}
  .sub-live{font-family:var(--mono);font-size:0.85em;color:var(--c-cam-ink);letter-spacing:0.08em}

  /* ── Themenfarben: grün = Social Media, gelb = Kamera, rot = Stimme & Podcast ── */
  [data-theme="heart"]{--t:var(--c-heart);--t-ink:#8E3E28;--tb:#F7E4DD}
  .ws-card[data-theme="heart"]{--t:var(--c-heart);--t-ink:#8E3E28;--tb:#F7E4DD}
  .ws-facts li{display:flex;gap:0.8rem;align-items:center;font-size:0.92rem;color:var(--ink-soft);white-space:nowrap}
  .ws-facts li > span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ws-facts strong{font-weight:600;color:var(--ink)}
  /* Kontaktformular auf dunkler Fläche */
  #kontakt .contact-form-wrapper{background:var(--white);border:1px solid rgba(255,255,255,0.5);box-shadow:var(--shadow-lg)}
  #kontakt .form-group label{color:var(--ink-mute)}
  #kontakt .form-group input,#kontakt .form-group textarea,#kontakt .form-group select{background:var(--paper);border:1px solid var(--rule-strong);color:var(--ink)}
  #kontakt .form-group input:focus,#kontakt .form-group textarea:focus{border-color:var(--rust);background:var(--white)}
  #kontakt .form-group input::placeholder,#kontakt .form-group textarea::placeholder{color:#A8988C}
  #kontakt .form-dsgvo{color:var(--ink-mute)}
  #kontakt .form-dsgvo a{color:var(--ink-soft)}

  [data-theme="chat"]{--t:var(--c-chat);--t-ink:#255A73;--tb:#E7F0F5}
  .ws-card[data-theme="chat"]{--t:var(--c-chat);--t-ink:#255A73;--tb:#E7F0F5}
  .ws-card[data-theme="social"]{--t:var(--c-social);--t-ink:var(--c-social-ink);--tb:var(--c-social-bg)}
  .ws-card[data-theme="cam"]{--t:var(--c-cam);--t-ink:var(--c-cam-ink);--tb:var(--c-cam-bg)}
  .ws-card[data-theme="voice"]{--t:var(--c-voice);--t-ink:var(--c-voice-ink);--tb:var(--c-voice-bg)}
  .ws-card[data-theme="talk"]{--t:var(--c-neutral);--t-ink:var(--c-neutral-ink);--tb:var(--c-neutral-bg)}

  /* ── Workshop-Karten: ein Ton pro Thema, ruhige Struktur ── */

  /* ── Abschnittsflächen ruhig, Farbe tragen die Karten ── */

  /* ── Hero: länger, dunkler Farbschleier, bunte Buttons ── */
  #hero{position:relative;overflow:hidden;background-size:cover;background-position:center 35%;border-bottom:none;padding:0}
  #hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(90,30,14,0.86),rgba(140,44,20,0.84) 55%,rgba(90,30,14,0.9))}
  .hero-inner{position:relative;z-index:1;max-width:940px;margin:0 auto;padding:8.5rem 2rem 8rem;text-align:center;min-height:82vh;display:flex;flex-direction:column;justify-content:center}
  .hero-text{display:flex;flex-direction:column;align-items:center;text-align:center}
  #hero .hero-text h1 em{color:var(--rust-tint)}
  #hero .hero-lead strong{color:var(--white)}
  .hero-topics{display:flex;flex-wrap:wrap;justify-content:center;gap:0.4rem;margin-bottom:1.9rem}
  .hero-topic{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.38rem 0.8rem;border-radius:999px;border:1px solid transparent;color:var(--white);transition:transform .18s ease}
  .hero-topic:hover{color:var(--white);transform:translateY(-2px)}
  
  .hero-ctas{display:flex;gap:0.7rem;flex-wrap:wrap;justify-content:center}
  #hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70% 62% at 50% 50%,rgba(40,14,6,0.6),rgba(40,14,6,0.34) 62%,rgba(40,14,6,0.06) 88%,transparent 100%)}
  #hero .hero-inner{position:relative;z-index:2}
  #hero .hero-text h1{color:var(--white);text-shadow:0 3px 22px rgba(26,12,6,0.75),0 1px 3px rgba(26,12,6,0.5);font-weight:800;letter-spacing:-0.035em}
  #hero .hero-lead{color:var(--white);font-weight:500;font-size:1.2rem;text-shadow:0 2px 14px rgba(26,12,6,0.65)}
  #hero .hero-topic{background:transparent;border:1.5px solid currentColor;color:var(--white);text-shadow:0 1px 8px rgba(26,12,6,0.5)}

  #hero .btn-primary{background:var(--white);color:var(--rust-dark);border-color:var(--white);box-shadow:0 8px 24px rgba(26,20,16,0.22)}
  #hero .btn-primary:hover{background:var(--paper-2);border-color:var(--paper-2);color:var(--rust-deep)}
  #hero .btn-outline{background:var(--rust-deep);color:var(--white);border-color:rgba(255,255,255,0.85)}
  #hero .btn-outline:hover{background:var(--white);color:var(--rust-dark);border-color:var(--white)}
  @media (max-width:900px){.hero-inner{padding:5.5rem 1.25rem 5rem;min-height:76vh}}

  /* ── Moderne Abschnitts-Hintergründe ── */
  #kontakt h2,#kontakt .section-header h2{color:var(--white)}
  #kontakt h2 em{color:var(--rust-tint)}
  #kontakt .tag{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.32);color:var(--white)}
  #kontakt .tag::before{background:var(--rust-light)}
  #kontakt .btn-primary{background:var(--white);color:var(--rust-dark);border-color:var(--white);box-shadow:0 8px 24px rgba(26,20,16,0.22)}
  #kontakt .btn-primary:hover{background:var(--paper-2);border-color:var(--paper-2);color:var(--rust-deep)}
  #kontakt .contact-options .btn-outline,#kontakt .contact-options .btn-white{background:var(--white);color:var(--rust-dark);border-color:var(--white)}
  #kontakt .contact-options .btn-outline:hover{background:var(--paper-2);color:var(--rust-deep)}

  /* ── Workshop-Karten: lesbarer ── */

  /* ── Start-Link statt Haus-Button ── */

  /* ── Trenner: Video-Timeline mit Abspielkopf ── */
  .section-divider .divider-head{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--white);border:3px solid var(--rust);box-shadow:0 3px 12px rgba(26,20,16,0.28);opacity:0}

  /* ── Portrait: groß, animiert ── */
  @media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:2.5rem}.portrait-frame{max-width:420px;margin:0 auto}.portrait-frame::before{left:12px;top:12px;right:-12px;bottom:-12px}}

  body.page-white,body.page-white .content-section,body.page-white .content-section.alt{background:var(--white)}
  body.page-white .prose p{color:var(--ink-soft)}

  /* ── Mobil ── */
  @media (max-width:700px){
    :root{--section-gap:64px}
    .hero-topic{font-size:0.56rem;padding:0.3rem 0.62rem}
    .hero-ctas{width:100%;flex-direction:column}
    .hero-ctas .btn{width:100%}
    .section-header h2{font-size:clamp(1.6rem,7vw,2rem)}
    .faq-question{font-size:0.98rem;padding:1.2rem 0}
    .ws-detail-body h1{font-size:clamp(1.9rem,8vw,2.4rem)}
    .footer-inner{gap:1.6rem}
  }
  @media (max-width:420px){
    .container{padding:0 0.9rem}
  }

  /* ============================================================ FAQ ============================================================ */
  .faq-list{max-width:820px;margin:3rem auto 0;border-top:1px solid var(--rule-strong)}
  .faq-item{border-bottom:1px solid var(--rule);transition:background .18s}
  .faq-question{padding:1.5rem 0.25rem 1.5rem 0;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.08rem;letter-spacing:-0.02em;line-height:1.3;color:var(--ink);transition:color .15s}
  .faq-question:hover,.faq-item.open .faq-question{color:var(--rust)}
  .faq-toggle{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--rule-strong);background:var(--white);color:var(--ink-mute);display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;line-height:1;transition:transform .3s cubic-bezier(0.4,0,0.2,1),background .2s,color .2s,border-color .2s}
  .faq-item:hover .faq-toggle{color:var(--rust);border-color:var(--rust-tint)}
  .faq-item.open .faq-toggle{background:var(--rust);color:var(--white);border-color:var(--rust);transform:rotate(45deg)}
  .faq-answer{max-height:0;overflow:hidden;color:var(--ink-soft);line-height:1.7;padding:0;font-size:0.97rem;max-width:66ch;}
  .faq-item.open .faq-answer{max-height:820px;padding:0 0 1.7rem}
  .faq-answer a{color:var(--rust);text-decoration:underline;text-underline-offset:3px}
  .faq-answer strong{color:var(--ink);font-weight:600}

  /* ============================================================ KONTAKT ============================================================ */
  .form-group input,.form-group select,.form-group textarea{width:100%;background:var(--paper);border:1px solid var(--rule-strong);border-radius:10px;padding:0.8rem 1rem;color:var(--ink);font-family:'Manrope',sans-serif;font-size:0.95rem;transition:border-color .2s,background .2s}
  .form-group input::placeholder,.form-group textarea::placeholder{color:#A8988C}
  .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--rust);background:var(--white)}
  .form-group select option{background:var(--white);color:var(--ink)}
  .form-group textarea{min-height:120px;resize:vertical}
  .contact-form-wrapper .btn,#kontakt .contact-form-wrapper .btn{background:var(--rust);color:var(--white);border-color:var(--rust);box-shadow:0 6px 20px rgba(184,74,42,0.22)}
  .contact-form-wrapper .btn:hover,#kontakt .contact-form-wrapper .btn:hover{background:var(--rust-dark);color:var(--white);border-color:var(--rust-dark)}
  .form-dsgvo{font-size:0.76rem;color:var(--ink-mute);margin-top:0.6rem;max-width:none}
  .form-dsgvo a{color:var(--ink-soft);text-decoration:underline}

  /* ============================================================ FOOTER ============================================================ */
  footer{background:var(--ink);border-top:1px solid rgba(251,248,244,0.12);color:rgba(251,248,244,0.65);padding:3.5rem 0 2rem}
  .footer-inner{max-width:1200px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem}
  .footer-brand p{font-size:0.87rem;margin-top:0.75rem;max-width:30ch;color:rgba(251,248,244,0.6)}
  .footer-col h5{font-family:var(--mono);font-size:0.68rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--paper);margin-bottom:1rem}
  .footer-col ul li a:hover{color:var(--rust-light)}
  .footer-bottom{max-width:1200px;margin:2.5rem auto 0;padding:1.5rem 2rem 0;border-top:1px solid rgba(251,248,244,0.16);display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.06em;color:rgba(251,248,244,0.55);flex-wrap:wrap;gap:0.5rem}
  .footer-bottom a{color:rgba(251,248,244,0.72);text-decoration:underline;text-underline-offset:3px}
  .footer-bottom a:hover{color:var(--rust-light)}

  /* ============================================================ STICKY CTA ============================================================ */
  .sticky-cta{position:fixed;bottom:1.5rem;right:1.5rem;z-index:90;background:var(--ink);color:var(--paper);border-radius:999px;padding:0.75rem 1.35rem;display:inline-flex;align-items:center;gap:0.75rem;box-shadow:var(--shadow-lg);font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;transform:translateY(120%);opacity:0;transition:background .2s}
  .sticky-cta:hover{background:var(--rust);color:var(--white)}
  .sticky-cta.is-visible{transform:translateY(0);opacity:1}
  .sticky-cta-action{font-weight:500;color:var(--rust-light)}
  .sticky-cta:hover .sticky-cta-action{color:var(--white)}
  @media (max-width:600px){.sticky-cta{bottom:1rem;right:1rem;padding:0.65rem 1rem;font-size:0.66rem}.sticky-cta-text{display:none}}

  /* ============================================================ MODAL ============================================================ */
  .modal-backdrop{position:fixed;inset:0;background:rgba(26,20,16,0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:1000;opacity:0;pointer-events:none}
  .modal-backdrop.is-open{opacity:1;pointer-events:auto}
  .modal-backdrop[hidden]{display:none}
  .modal-dialog{background:var(--paper);border:1px solid var(--rule);border-radius:18px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;padding:clamp(1.5rem,4vw,2.25rem);box-shadow:0 40px 90px rgba(26,20,16,0.28);position:relative}
  .modal-close{position:absolute;top:0.85rem;right:0.85rem;width:36px;height:36px;border-radius:50%;background:var(--white);border:1px solid var(--rule);color:var(--ink-mute);font-size:1.2rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .18s,color .18s}
  .modal-close:hover{border-color:var(--rust);color:var(--rust)}
  .modal-eyebrow{display:inline-block;font-family:var(--mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--rust);margin-bottom:0.6rem}
  .modal-title{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,3vw,1.6rem);letter-spacing:-0.03em;line-height:1.2;margin:0 0 0.4rem;color:var(--ink)}
  .modal-workshop{color:var(--rust);display:block;margin-top:0.25rem}
  .modal-lead{color:var(--ink-soft);font-size:0.94rem;line-height:1.6;margin:0 0 1.5rem}
  .modal-lead strong{color:var(--ink)}
  .modal-dialog form{display:flex;flex-direction:column;gap:0.85rem}
  .modal-dialog label{font-family:var(--mono);font-size:0.66rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:0.25rem;display:block}
  .modal-dialog input[type="text"],.modal-dialog input[type="email"]{width:100%;padding:0.75rem 0.9rem;border:1px solid var(--rule-strong);border-radius:10px;font-size:1rem;font-family:'Manrope',sans-serif;background:var(--white);color:var(--ink)}
  .modal-dialog input:focus{outline:none;border-color:var(--rust)}
  .modal-consent{display:flex;gap:0.55rem;align-items:flex-start;font-size:0.84rem;color:var(--ink-soft);line-height:1.5;margin-top:0.25rem;font-family:'Manrope',sans-serif;letter-spacing:0;text-transform:none}
  .modal-consent input{margin-top:0.25rem;flex-shrink:0;accent-color:var(--rust)}
  .modal-consent strong{color:var(--ink)}
  .modal-dsgvo{font-size:0.74rem;color:var(--ink-mute);line-height:1.5;margin:0.5rem 0 0}
  .modal-dsgvo a{color:var(--rust);text-decoration:underline}


  /* ── Farbakzente: die vier Icon-Farben durchziehen die Seite ── */
  /* Workshop-Detailseiten: jeder Block bekommt eine eigene Farbe */
  .ws-results{border-left-color:var(--c-cam);background:var(--c-cam-bg)}
  .ws-results p strong{color:var(--c-cam)}
  .termine-box{background:var(--c-social-bg);border-color:var(--c-social)}
  .termine-box h3{color:var(--c-social)}
  .termine-box li::before{background:var(--c-social)}
  .badge-online{background:var(--c-social-bg);color:var(--c-social);border-color:var(--c-social)}
  .badge-inperson{background:var(--c-social-bg);color:var(--c-social);border-color:var(--c-social)}
  .badge-business{background:var(--c-cam-bg);color:var(--c-cam);border-color:var(--c-cam)}
  .footer-col:nth-child(2) h5{color:var(--c-cam)}
  .footer-col:nth-child(4) h5{color:var(--rust-light)}


  .ws-grid .ws-card.is-soon .ws-card-price{color:var(--ink-mute)}


  .section-divider{background:transparent}
  .faq-toggle{background:var(--white)}


  .badge-time{background:var(--c-voice-bg);color:var(--c-voice);border-color:var(--c-voice)}

  /* ============================================================ REVEAL ============================================================ */
  /* Alles ist per CSS sichtbar. Bewegung setzt ausschließlich JS als Inline-Style — 
     so bleibt der Inhalt lesbar, wenn Animationen in der Umgebung nicht laufen. */
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
    html.js-anim .reveal,html.js-anim .reveal-left,html.js-anim .reveal-right,html.js-anim .reveal-zoom,html.js-anim .reveal-stagger > *{opacity:1 !important;transform:none !important}
  }

  /* ============================================================ MOBILE ============================================================ */
  @media (max-width:900px){
    .container{padding:0 1.25rem}
    .nav-inner{padding:0.8rem 1.25rem}
    .nav-toggle{display:inline-flex}
    .nav-links{position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:0.5rem 1rem 1.5rem;border-bottom:1px solid var(--rule);box-shadow:var(--shadow-md);max-height:calc(100vh - 70px);overflow-y:auto;transform:translateY(-110%);visibility:hidden;transition:none}
    .nav-links.open{transform:translateY(0);visibility:visible}
    .nav-links > li > a{display:block;padding:0.9rem 0.5rem;border-bottom:1px solid var(--rule-soft);font-size:0.8rem;color:var(--ink)}
    .nav-links > li:last-child > a{border-bottom:none;margin-top:0.6rem;text-align:center}
    .has-submenu .submenu{position:static;opacity:1;pointer-events:auto;transform:none;box-shadow:none;border:none;background:var(--paper-2);border-radius:10px;min-width:0;padding:0.3rem 0.5rem;margin:0.3rem 0 0.6rem;display:none}
    .has-submenu.open .submenu{display:block}
    .has-submenu > a .caret{float:right}
    .footer-inner{grid-template-columns:1fr 1fr;gap:2rem}
  }
  @media (max-width:700px){
    :root{--section-gap:70px}
    .container{padding:0 1rem}
    input,textarea,select{font-size:16px !important}
    .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
    #kontakt form > div[style*="grid-template-columns"]{grid-template-columns:1fr !important}
    .footer-inner{grid-template-columns:1fr;gap:1.75rem;padding:0 1rem}
    .footer-bottom{padding:1.5rem 1rem 0}
  }


/* Sektions-Überschriften wirklich mittig */
.section-header{text-align:center;max-width:760px;margin:0 auto 2.4rem}
.section-header h2,.section-header p{margin-left:auto;margin-right:auto}
.section-header p{max-width:60ch}
#kontakt > .container{text-align:center}
#kontakt .contact-form-wrapper{text-align:left}

/* FAQ: klare Karte, ruhige Typo */
#faq .faq-item{border-bottom:1px solid var(--rule-soft)}
#faq .faq-item:last-child{border-bottom:none}
#faq .faq-question{padding:1.25rem 0;font-size:1.02rem;gap:1rem}
#faq .faq-answer{font-size:0.94rem;line-height:1.65;max-width:64ch}

/* Kontaktformular: aufgeräumtes Raster */
.contact-form-wrapper{max-width:620px;margin-left:auto;margin-right:auto;padding:1.6rem}
.contact-form-wrapper form{display:grid;gap:0.85rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.85rem}
.form-group label{display:block;margin-bottom:0.35rem}
.form-group input,.form-group textarea{width:100%;padding:0.75rem 0.9rem;border-radius:10px}
.form-group textarea{min-height:120px}
.contact-form-wrapper .btn{width:100%;margin-top:0.2rem}
.form-dsgvo{font-size:0.74rem;line-height:1.5;margin:0.2rem 0 0}

/* Kacheln kompakter */

.cookie-banner[hidden]{display:none}
.cookie-banner a{color:var(--rust);text-decoration:underline;text-underline-offset:3px}


@media (max-width:600px){body.has-cookie-banner #hero .hero-inner{min-height:calc(72vh - 126px);padding-bottom:calc(4.5rem + 126px)}}

body.has-cookie-banner{padding-bottom:0}


.cookie-banner{position:fixed;left:auto;right:1rem;bottom:1rem;z-index:1200;display:flex;align-items:center;gap:0.75rem;max-width:min(520px,calc(100vw - 2rem));background:var(--white);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow-lg);padding:0.65rem 0.9rem;opacity:0;transform:translateY(12px);pointer-events:none}
.cookie-banner.is-in{opacity:1;transform:none;pointer-events:auto}
.cookie-banner p{font-size:0.74rem;line-height:1.4;margin:0;max-width:44ch;color:var(--ink-soft)}
.cookie-actions{display:flex;gap:0.4rem;flex-shrink:0}
.cookie-actions .btn{padding:0.45rem 0.85rem;font-size:0.76rem;white-space:nowrap}
@media (max-width:700px){.cookie-banner{left:1rem;right:1rem;max-width:none;flex-wrap:wrap}.cookie-actions{width:100%}.cookie-actions .btn{width:100%}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.about-h1{font-family:var(--display);font-size:clamp(2rem,4.5vw,2.9rem);font-weight:800;letter-spacing:-0.03em;color:var(--ink);margin:0 0 2rem}
.portrait-frame:hover img{transform:scale(1.03)}
/* Kacheln noch kompakter */
/* Verfügbarkeits-Status */
.ws-card-status.is-full{color:var(--rust-dark)}
.ws-card-status.is-full::before{background:var(--rust-dark)}

@media (max-width:900px){.portrait-frame{max-width:400px;margin:0 auto 2.5rem}.portrait-frame::before{left:-1.25rem;top:1.25rem;right:1.25rem;bottom:-1.25rem}}
.about-h1{grid-column:1/-1}

#kontakt > .container > p,#kontakt .section-header p{text-align:center;margin-left:auto;margin-right:auto;max-width:56ch}


.contact-options{justify-content:center;gap:1rem;margin-bottom:3rem}
.contact-options .btn{padding:0.95rem 2rem;font-size:0.95rem}



.ws-card-ask h3,.ws-card-ask p,.ws-card-ask .btn{grid-row:auto}

.about-h1 em{color:var(--rust);font-style:normal}
.ws-card.is-full .ws-card-status{color:var(--rust-dark)}
.ws-card.is-full .ws-card-status::before{background:var(--rust-dark)}



.ws-card-status::before{content:'';display:block;width:7px;height:7px;border-radius:50%;background:var(--c-social);flex:0 0 7px}
.ws-card-notify svg{width:13px;height:13px;flex:0 0 13px}


/* Sektionsflächen in den Icon-Farben */

/* Kacheln: aufgeräumt, Preis prominent */
.ws-card-status{display:inline-flex;align-items:center;gap:0.35rem;margin:0.7rem 0.85rem 0.3rem;font-family:var(--mono);font-size:0.6rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--c-social)}



.ws-card-notify{display:flex;align-items:center;gap:0.38rem;text-align:left;appearance:none;background:none;border:none;padding:0;cursor:pointer;margin:0.42rem 0.85rem 0;font-family:var(--mono);font-size:0.66rem;letter-spacing:0.06em;text-transform:uppercase;line-height:1.3;color:var(--ink-mute)}

#workshops > .container{text-align:center}
#workshops .ws-grid{text-align:left}

#kontakt .section-header h2,#kontakt h2{margin-bottom:1rem}
#kontakt > .container > p{margin:0 auto 2.5rem;text-align:center;max-width:56ch;color:rgba(255,255,255,0.86)}

#workshops{position:relative;background:var(--paper-2);overflow:hidden;padding-top:calc(var(--section-gap) * 0.4)}
#workshops .sec-bg{display:none}
#workshops .section-header{margin-bottom:1.4rem;display:block;background:none;border-radius:0;padding:0;max-width:none}
#workshops .section-header h2,#workshops .section-header p{color:var(--ink);text-shadow:none}
#workshops .section-header h2 em{color:var(--rust)}
#workshops .section-header .tag{background:var(--white);border-color:var(--rust-tint);color:var(--rust)}
#workshops .section-header .tag::before{background:var(--rust)}
#faq{position:relative;background:var(--c-cam-bg);overflow:hidden}
#faq .sec-bg{display:block;position:absolute;inset:0;z-index:0;background-image:url('/assets/bg-streaks.jpg');background-size:cover;background-position:center;opacity:1}
#faq > .container{text-align:center}
#faq .faq-list{text-align:left;background:rgba(255,255,255,0.94);border-radius:18px;padding:0.4rem 1.6rem;box-shadow:var(--shadow-md)}


#faq .sec-bg::after{content:'';position:absolute;inset:0;background:rgba(251,239,210,0.72)}

.ws-card.is-full .ws-when .is-time{display:none}




#faq .section-header{display:block;background:none;border-radius:0;padding:0;max-width:none}
#faq .section-header h2,#faq .section-header p{color:var(--ink);text-shadow:0 1px 10px rgba(255,255,255,0.85)}
#faq .section-header h2 em{color:var(--rust)}
#faq .section-header .tag{background:var(--white);border-color:var(--rust-tint);color:var(--rust)}
#faq .section-header .tag::before{background:var(--rust)}
#hero .hero-topic:nth-child(1){background:rgba(140,44,26,0.5);border-color:rgba(255,255,255,0.7)}
#hero .hero-topic:nth-child(2){background:rgba(31,74,95,0.5);border-color:rgba(255,255,255,0.7)}
#hero .hero-topic:nth-child(3){background:rgba(110,76,10,0.5);border-color:rgba(255,255,255,0.7)}
#hero .hero-topic:nth-child(4){background:rgba(20,84,52,0.5);border-color:rgba(255,255,255,0.7)}
.ws-card-img{display:block;position:relative;overflow:hidden;background:var(--paper-2);height:clamp(118px,12vw,140px)}
.ws-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ws-card-foot{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin:0 1rem;align-items:center}
.ws-card-cta{padding:0.58rem 0.6rem;font-size:0.78rem;text-align:center;display:flex;align-items:center;justify-content:center}
.ws-card-ask .btn:hover{background:var(--rust-dark);border-color:var(--rust-dark);color:var(--white)}

@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
#hero .hero-text{animation:heroIn .85s cubic-bezier(0.22,1,0.36,1) both}
#hero .hero-topics{animation:heroIn .8s cubic-bezier(0.22,1,0.36,1) both;animation-delay:.12s}
#hero .hero-text h1{animation:heroIn .85s cubic-bezier(0.22,1,0.36,1) both;animation-delay:.2s}
#hero .hero-lead{animation:heroIn .85s cubic-bezier(0.22,1,0.36,1) both;animation-delay:.32s}
#hero .hero-ctas{animation:heroIn .85s cubic-bezier(0.22,1,0.36,1) both;animation-delay:.44s}
@media (prefers-reduced-motion:reduce){#hero .hero-text,#hero .hero-topics,#hero .hero-text h1,#hero .hero-lead,#hero .hero-ctas{animation:none}}





.ws-card-notify.is-ghost{visibility:hidden;pointer-events:none}

.ws-card-ask{text-align:center}
.ws-card-ask h3,.ws-card-ask p{text-align:center}


.ws-lead-plain{font-size:1.0625rem;line-height:1.7;color:var(--ink-soft);margin-bottom:1.75rem;max-width:62ch}
.ws-lead-plain strong{color:var(--ink)}

#hero .hero-topic:hover{color:var(--white)}
#hero .hero-topic:nth-child(1):hover{background:rgba(140,44,26,0.8);border-color:var(--white)}
#hero .hero-topic:nth-child(2):hover{background:rgba(31,74,95,0.8);border-color:var(--white)}
#hero .hero-topic:nth-child(3):hover{background:rgba(110,76,10,0.8);border-color:var(--white)}
#hero .hero-topic:nth-child(4):hover{background:rgba(20,84,52,0.8);border-color:var(--white)}

.ws-card{display:grid;grid-template-rows:auto auto auto auto auto auto auto;background:var(--white);border:1px solid var(--rule);border-radius:14px;padding:0 0 1rem;box-shadow:var(--shadow-sm);overflow:hidden;position:relative;scroll-margin-top:110px}
@supports (grid-template-rows: subgrid){
  .ws-card{grid-row:span 7;grid-template-rows:subgrid}
}
.ws-card-facts{display:flex;align-items:center;justify-content:space-between;gap:0.85rem;margin:0 1rem 0.8rem;padding:0.7rem 0;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}

.ws-card.ws-card-ask{display:grid;background:var(--ink);border-color:var(--ink);text-align:center;padding:0 1.2rem 1rem}
.ws-card-ask p{font-size:0.85rem;line-height:1.5;margin:0 0 1rem;color:rgba(251,248,244,0.78);text-align:center}
.ws-card-ask .btn{align-self:center;width:100%;text-align:center;padding:0.58rem 0.6rem;font-size:0.78rem;background:var(--rust);color:var(--white);border-color:var(--rust);display:flex;align-items:center;justify-content:center;margin:0}
.ws-card-ask .ws-card-notify{margin:0.6rem 0 0}

.ws-card-ask .ask-spacer{display:block;height:0;min-height:0;padding:0;margin:0}






.footer-col:nth-of-type(2) ul li a{color:#FFFFFF !important}
.footer-col:nth-of-type(2) ul li a:hover{color:var(--rust-light) !important}

.ws-card .ws-price{display:flex;flex-direction:column;align-items:flex-end;gap:0.05rem;margin:0;flex:0 0 auto;max-width:none;text-align:right}
.ws-card .ws-price b{font-family:var(--display);font-size:1.18rem;font-weight:700;letter-spacing:-0.02em;color:var(--t-ink,var(--rust));white-space:nowrap}
.ws-card .ws-price s{display:block;font-family:var(--mono);font-size:0.72rem;font-weight:400;color:var(--ink-mute);margin:0;white-space:nowrap}
.ws-card{padding:0 0 0.85rem}

.ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));column-gap:0.9rem;row-gap:0;align-items:stretch}

.ws-card-foot{margin:0 1rem}
.ws-card-flag{position:absolute;left:0.7rem;top:0.7rem;right:auto;bottom:auto;z-index:2;margin:0}
.badge-live,.badge-online-pill{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--mono);font-size:0.74rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;padding:0.5rem 1rem;border-radius:999px;box-shadow:0 8px 22px rgba(26,20,16,0.45);white-space:nowrap}
.badge-live{background:var(--rust-dark);color:var(--white)}
.badge-online-pill{background:var(--white);color:var(--ink)}
.badge-live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--white)}
/* Mobil */
@media (max-width:900px){
  .nav-links li.nav-home-item{display:none}
  .nav-links{padding:0.5rem 1rem 1.25rem}
  .nav-links > li > a{padding:0.85rem 0.5rem}
  .has-submenu .submenu{background:rgba(255,255,255,0.06);border-radius:10px;margin:0.2rem 0 0.5rem;padding:0.25rem 0.5rem}
  .has-submenu .submenu li a{padding:0.6rem 0.4rem;font-size:0.9rem;border-bottom:1px solid var(--rule-soft)}
  .has-submenu .submenu li:last-child a{border-bottom:none}
}
@media (max-width:700px){
  .ws-grid{grid-template-columns:1fr}
  .ws-card-foot{grid-template-columns:1fr 1fr}
  .badge-live,.badge-online-pill{font-size:0.68rem;padding:0.42rem 0.8rem}
}
@media (max-width:420px){
  .ws-card-foot{grid-template-columns:1fr;gap:0.4rem}
  .ws-card-cta{width:100%}
}

@media (max-width:900px){.lang-switch{margin:0.6rem 0 0;justify-content:center;width:100%}}

.ws-when{display:flex;flex-direction:column;gap:0.18rem;margin:0;min-width:0;font-family:var(--mono);font-weight:500;color:var(--ink);max-width:none;flex:1 1 auto}
.ws-when .ws-pin{display:none}
.ws-when span{font-size:0.76rem;line-height:1.4;white-space:nowrap}
.ws-when .is-tn{color:var(--ink-mute);font-size:0.7rem;letter-spacing:0.04em;text-transform:uppercase}
.ws-card-ask h3{font-size:1.08rem;margin:1rem 0 0.75rem;color:var(--paper);align-self:end}
.footer-col ul li a{color:#FFFFFF}
.footer-col ul li a{font-size:0.85rem;line-height:1.35}
.lang-switch{gap:0.15rem;margin-left:0.35rem}
.lang-switch a{padding:0.24rem 0.42rem;color:var(--ink-mute);border-color:var(--rule)}
.lang-switch a.is-active{background:var(--ink-mute);border-color:var(--ink-mute);color:var(--white)}
.lang-switch a:hover{border-color:var(--ink-soft);color:var(--ink-soft)}
.lang-switch a.is-active:hover{color:var(--white)}
.page-hero{text-align:center}
.page-hero .lead,.page-hero p{margin-left:auto;margin-right:auto}
.page-hero-ctas{justify-content:center}
@media (max-width:900px){
  .nav-links{padding:0.5rem 1rem 1.25rem;text-align:left}
  .nav-links > li{width:100%}
  .has-submenu .submenu{position:static;width:100%;transform:none;left:auto;right:auto;margin:0.2rem 0 0.6rem;padding:0.25rem 0.6rem;min-width:0}
  .has-submenu .submenu li a{display:block;width:100%;padding:0.6rem 0.2rem}
  .nav-links li.nav-home-item{order:-1}
  .nav-links li.nav-home-item .nav-home{width:100%;justify-content:flex-start;border:none;box-shadow:none;background:none;padding:0.85rem 0.5rem;border-bottom:1px solid var(--rule-soft);border-radius:0}
  .nav-links li.nav-home-item .nav-home::after{content:'Startseite';margin-left:0.6rem;font-family:var(--mono);font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase}
  .footer-inner{grid-template-columns:1fr;gap:1.6rem;text-align:left}
  .about-grid{grid-template-columns:1fr;gap:2rem}
  .about-h1{text-align:center}
  .container-narrow,.container{padding-left:1.1rem;padding-right:1.1rem}
}


.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.32rem;margin:0;padding:0}
.footer-col ul li{list-style:none;display:block;margin:0;padding:0}
.footer-col ul li::marker{content:''}
.ws-card{margin-bottom:0.9rem;padding:0 0 1.15rem}
.ws-card-status{margin:0.85rem 1rem 0.55rem}
.ws-card-facts{margin:0 1rem 0.95rem;padding:0.8rem 0}
.ws-card.ws-card-ask{padding:0 1.2rem 1.15rem}
.ws-card-ask h3{margin:1rem 0 0.6rem}
.ws-card-ask p{margin:0 0 0.9rem;padding-bottom:0}

@media (max-width:900px){
  .nav-links{position:absolute;left:0;right:0;width:100%;box-sizing:border-box;padding:0.5rem 1rem 1.25rem}
  .nav-links > li{width:100%;position:static}
  .has-submenu{position:static}
  .has-submenu .submenu{position:static;left:auto;right:auto;transform:none;width:100%;min-width:0;max-width:none;box-sizing:border-box;margin:0.2rem 0 0.6rem;padding:0.25rem 0.6rem;box-shadow:none;border:none;background:rgba(26,20,16,0.05)}
  .has-submenu .submenu li{width:100%}
  .has-submenu .submenu li a{display:block;width:100%;padding:0.6rem 0.2rem;white-space:normal}
}

.portrait-frame::before{content:'';position:absolute;left:-2rem;top:2rem;right:2rem;bottom:-2rem;border-radius:24px;background:var(--rust);z-index:0}
.portrait-wrap::before{content:'';position:absolute;left:-2rem;top:2rem;right:2rem;bottom:-2rem;border-radius:24px;background:var(--rust);z-index:0}
.portrait-wrap .portrait-frame{margin:0;z-index:1}
.portrait-wrap .portrait-frame::before{content:none}

.portrait-frame{position:relative;display:block;margin:0;overflow:hidden;border-radius:24px;aspect-ratio:4/5}
.portrait-frame img{position:absolute;inset:-14px 0;z-index:1;display:block;width:100%;height:calc(100% + 28px);aspect-ratio:auto;object-fit:cover;object-position:50% 15%;box-shadow:none}
.portrait-wrap{position:relative;display:block;margin:0 0 2rem 2rem;box-shadow:var(--shadow-lg);border-radius:24px}

.ws-card-title{margin:0 1rem 0.4rem;line-height:1.24;min-height:2.48em;display:flex;align-items:flex-start}

.ws-card-text{margin:0 1rem 0.95rem;font-size:0.78rem;line-height:1.5;color:var(--ink-soft);min-height:4.5em}
.ws-card-notify{margin:0.7rem 1rem 0;min-height:2.6em;align-items:flex-start}


/* ============================================================
   POST-IMPORT OVERRIDES
   ============================================================ */
/* The design animates the divider rules in from scaleX(0) via JS.
   We render dividers statically, so they start fully drawn. */
.divider-rule i{transform:scaleX(1)}

/* Mobile submenu: the design's mobile block resets the dropdown to
   `transform:none`, but its own `.has-submenu:focus-within .submenu` rule is
   one specificity step higher and keeps the desktop `translateX(-50%)` — which
   drags the open submenu off the left edge as soon as tapping the parent link
   focuses it. Re-apply the reset at matching specificity. */
@media (max-width:900px){
  .has-submenu:hover .submenu,
  .has-submenu:focus-within .submenu{transform:none}
}


/* ============================================================
   PAGE-SPECIFIC STYLES (older pages not covered by the design)
   ============================================================ */
/* ==== services/crossmedia-strategie.html ==== */
/* ==== services/format-entwicklung.html ==== */
/* ==== services/index.html ==== */
  /* ============================================================
     EINZELLEISTUNGEN-ÜBERSICHT — eigene visuelle Sprache
     ============================================================ */
  .services-overview-hero {
    background: linear-gradient(180deg, var(--rust-pale) 0%, transparent 100%);
    padding: 4rem 0 3rem;
  }
  .services-overview-hero-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3.5rem;
    align-items: end;
  }
  .services-overview-hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    margin: 1rem 0 1.25rem;
    line-height: 1.1;
  }
  .services-overview-hero h1 em {
    color: var(--rust);
    font-style: italic;
    font-weight: 700;
  }
  .services-overview-hero .lead {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 56ch;
    margin-bottom: 2rem;
  }
  .services-overview-aside {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem 1.6rem;
  }
  .services-overview-aside h6 {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rust);
    margin-bottom: 1rem;
  }
  .services-overview-aside ul {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }
  .services-overview-aside ul li {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.45;
  }
  .services-overview-aside ul li strong { color: var(--text); }
  .services-overview-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    margin: 0;
  }

  /* Tiles grid */
  .services-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
  }
  .service-tile {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem 1.8rem 1.8rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    position: relative;
  }
  .service-tile:hover {
    transform: translateY(-3px);
    border-color: var(--rust);
    box-shadow: 0 14px 36px rgba(184,74,42,0.08);
  }
  .service-tile-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--rust-pale);
    color: var(--rust);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    transition: background 0.18s, color 0.18s;
  }
  .service-tile:hover .service-tile-icon {
    background: var(--rust);
    color: var(--white);
  }
  .service-tile-icon svg { width: 24px; height: 24px; }
  .service-tile-tag {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rust);
    background: var(--rust-pale);
    padding: 0.25rem 0.6rem;
    border-radius: 3px;
    align-self: flex-start;
    margin-bottom: 0.8rem;
  }
  .service-tile h3 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-bottom: 0.7rem;
    color: var(--text);
  }
  .service-tile p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 1.4rem;
    flex-grow: 1;
  }
  .service-tile-price {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-bottom: 1rem;
  }
  .service-tile-price strong {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 1.4rem;
    color: var(--rust);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .service-tile-price span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
  }
  .service-tile-link {
    align-self: flex-start;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--rust);
    border-bottom: 1px solid var(--rust);
    padding-bottom: 0.15rem;
    transition: gap 0.18s ease;
    display: inline-flex;
    gap: 0.35rem;
    text-decoration: none;
  }
  .service-tile-link:hover { gap: 0.7rem; }

  /* Price table */
  .price-table {
    margin-top: 5rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem 2.25rem;
  }
  .price-table-head { margin-bottom: 1.5rem; }
  .price-table h3 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
  }
  .price-table-head p {
    color: var(--text-muted);
    font-size: 0.95rem;
  }
  .price-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
  }
  .price-table th,
  .price-table td {
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
  }
  .price-table th {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
  }
  .price-table tbody tr {
    transition: background 0.15s;
  }
  .price-table tbody tr:hover { background: var(--rust-pale); }
  .price-table tbody tr:last-child td { border-bottom: none; }
  .price-table td a {
    color: var(--rust);
    font-weight: 600;
    font-size: 0.85rem;
  }
  .price-table td a:hover { text-decoration: underline; }

  /* Helper box at bottom */
  .services-overview-helper {
    margin-top: 4rem;
    background: var(--rust);
    color: var(--white);
    border-radius: 12px;
    padding: 2.5rem 2.75rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .services-overview-helper::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -8%;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    pointer-events: none;
  }
  .services-overview-helper > div:first-child { position: relative; z-index: 1; }
  .services-overview-helper h3 {
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 0.6rem;
  }
  .services-overview-helper p {
    color: rgba(255,255,255,0.88);
    font-size: 0.95rem;
    margin: 0;
    max-width: 60ch;
  }
  .services-overview-helper p strong { color: var(--white); }
  .services-overview-helper-cta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
  }
  .services-overview-helper-cta .btn {
    text-align: center;
  }
  .btn-onrust-ghost {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.5);
  }
  .btn-onrust-ghost:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--white);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px) {
    .services-overview-hero-inner { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
    .services-overview-grid { grid-template-columns: repeat(2, 1fr); }
    .services-overview-helper { grid-template-columns: 1fr; padding: 2rem 1.75rem; }
    .price-table { padding: 1.5rem 1.5rem; }
  }
  @media (max-width: 640px) {
    .services-overview-grid { grid-template-columns: 1fr; }
    .hide-mobile { display: none; }
    .price-table th,
    .price-table td { padding: 0.65rem 0.5rem; font-size: 0.88rem; }
  }

/* ==== services/podcast-produktion.html ==== */
/* ==== services/social-media-redaktion.html ==== */
/* ==== services/text-journalismus.html ==== */
/* ==== services/videoproduktion.html ==== */
/* ==== coaching/content.html ==== */
/* ==== coaching/index.html ==== */
/* ==== coaching/kamera.html ==== */
/* ==== pakete.html ==== */
  /* Pakete-spezifische Styles */
  .packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto auto auto 1fr auto;
    gap: 1.5rem;
    margin-top: 3rem;
  }
  .package-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2.75rem 2rem 2.25rem;
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: 0;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .package-card > * { min-width: 0; margin: 0; }
  .package-card h3 { align-self: end; font-family: 'Manrope',sans-serif; font-weight:700; font-size:1.7rem; line-height:1.2; letter-spacing:-0.02em; margin-bottom:0.7rem; }
  .package-card.featured { background: var(--rust); color: var(--white); border-color: var(--rust); }
  .package-card.featured h3 { color: var(--white); }
  .package-flag { position:absolute; top:-0.7rem; left:50%; transform:translateX(-50%); background:var(--rust-dark); color:var(--white); font-size:0.7rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; padding:0.3rem 0.85rem; border-radius:50px; }
  .package-eyebrow { font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--rust); margin-bottom:0.7rem; }
  .package-card.featured .package-eyebrow { color:rgba(255,255,255,0.85); }
  .package-card > p { color:var(--text-muted); font-size:0.95rem; line-height:1.55; margin-bottom:1.5rem; }
  .package-card.featured > p { color:rgba(255,255,255,0.88); }
  .package-price { font-family:'Manrope',sans-serif; font-size:2.4rem; font-weight:700; color:var(--rust); line-height:1; letter-spacing:-0.025em; margin-bottom:0.3rem; }
  .package-card.featured .package-price { color:var(--white); }
  .package-price small { font-size:0.85rem; color:var(--text-muted); margin-left:0.4rem; font-weight:400; }
  .package-card.featured .package-price small { color:rgba(255,255,255,0.78); }
  .package-meta { font-size:0.85rem; color:var(--text-muted); margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--border); }
  .package-card.featured .package-meta { color:rgba(255,255,255,0.78); border-bottom-color:rgba(255,255,255,0.22); }
  .package-features { list-style:none; display:flex; flex-direction:column; gap:0.7rem; padding:0; }
  .package-features li { font-size:0.92rem; padding-left:1.6rem; position:relative; line-height:1.5; }
  .package-features li::before { content:'✓'; position:absolute; left:0; color:var(--rust); font-weight:700; }
  .package-card.featured .package-features li { color:rgba(255,255,255,0.94); }
  .package-card.featured .package-features li::before { color:var(--white); }
  .package-card .btn { align-self:center; width:100%; text-align:center; }
  @media (max-width: 900px) {
    .packages-grid { grid-template-columns: 1fr; grid-template-rows: none; }
    .package-card { grid-template-rows: none; grid-row: auto; display: flex; flex-direction: column; }
  }

/* ==== ueber-mich.html ==== */
/* ==== blog.html ==== */
/* ==== datenschutz.html ==== */
/* ==== impressum.html ==== */
/* ==== newsletter-abgemeldet.html ==== */
  .confirm-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 5rem) 1.5rem;
    text-align: center;
  }
  .confirm-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--rust-pale, #fbe9e2);
    color: var(--rust, #b8492a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
  }
  .confirm-icon svg { width: 36px; height: 36px; }
  .confirm-wrap h1 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
  }
  .confirm-wrap p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-muted, #5a5550);
    margin: 0 0 1rem;
  }
  .confirm-wrap .lead {
    font-size: 1.15rem;
    color: var(--text, #1f1d1b);
  }
  .confirm-steps {
    text-align: left;
    margin: 2.5rem auto 0;
    max-width: 480px;
    counter-reset: step;
    list-style: none;
    padding: 0;
  }
  .confirm-steps li {
    position: relative;
    padding: 0.85rem 0 0.85rem 3rem;
    border-bottom: 1px solid var(--border, #e9e3dd);
    counter-increment: step;
    color: var(--text, #1f1d1b);
  }
  .confirm-steps li:last-child { border-bottom: none; }
  .confirm-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.95rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rust, #b8492a);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .confirm-note {
    margin-top: 2.5rem;
    font-size: 0.9rem;
    color: var(--text-muted, #5a5550);
  }
  .confirm-actions { margin-top: 2rem; }

/* ==== newsletter-abmelden.html ==== */
  .unsub-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 5rem) 1.5rem;
  }
  .unsub-wrap h1 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
  }
  .unsub-wrap > p {
    color: var(--text-muted, #5a5550);
    line-height: 1.65;
    margin: 0 0 1.75rem;
  }
  .unsub-form {
    background: var(--off-white, #f6f4ef);
    border: 1px solid var(--border, #e9e3dd);
    border-radius: 10px;
    padding: clamp(1.5rem, 4vw, 2rem);
  }
  .unsub-form label {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted, #5a5550);
    margin-bottom: 0.5rem;
  }
  .unsub-form input[type="email"] {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border, #e9e3dd);
    border-radius: 6px;
    font-size: 1rem;
    background: #fff;
    font-family: inherit;
  }
  .unsub-form input[type="email"]:focus { outline: none; border-color: var(--rust, #b8492a); }
  .unsub-form .reason {
    margin-top: 1.25rem;
  }
  .unsub-form textarea {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid var(--border, #e9e3dd);
    border-radius: 6px;
    font-size: 0.95rem;
    background: #fff;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
  }
  .unsub-form button {
    margin-top: 1.5rem;
    width: 100%;
  }
  .unsub-note {
    margin-top: 1.75rem;
    font-size: 0.85rem;
    color: var(--text-muted, #5a5550);
    line-height: 1.6;
  }

/* ==== newsletter-bestaetigen.html ==== */
  .confirm-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 5rem) 1.5rem;
    text-align: center;
  }
  .confirm-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--rust-pale, #fbe9e2);
    color: var(--rust, #b8492a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
  }
  .confirm-icon svg { width: 36px; height: 36px; }
  .confirm-wrap h1 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
  }
  .confirm-wrap p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-muted, #5a5550);
    margin: 0 0 1rem;
  }
  .confirm-wrap .lead {
    font-size: 1.15rem;
    color: var(--text, #1f1d1b);
  }
  .confirm-steps {
    text-align: left;
    margin: 2.5rem auto 0;
    max-width: 480px;
    counter-reset: step;
    list-style: none;
    padding: 0;
  }
  .confirm-steps li {
    position: relative;
    padding: 0.85rem 0 0.85rem 3rem;
    border-bottom: 1px solid var(--border, #e9e3dd);
    counter-increment: step;
    color: var(--text, #1f1d1b);
  }
  .confirm-steps li:last-child { border-bottom: none; }
  .confirm-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.95rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rust, #b8492a);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .confirm-note {
    margin-top: 2.5rem;
    font-size: 0.9rem;
    color: var(--text-muted, #5a5550);
  }
  .confirm-actions { margin-top: 2rem; }

/* ==== warteliste-bestaetigen.html ==== */
  .confirm-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 5rem) 1.5rem;
    text-align: center;
  }
  .confirm-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--rust-pale, #fbe9e2);
    color: var(--rust, #b8492a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
  }
  .confirm-icon svg { width: 36px; height: 36px; }
  .confirm-wrap h1 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
  }
  .confirm-wrap p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-muted, #5a5550);
    margin: 0 0 1rem;
  }
  .confirm-wrap .lead {
    font-size: 1.15rem;
    color: var(--text, #1f1d1b);
  }
  .confirm-steps {
    text-align: left;
    margin: 2.5rem auto 0;
    max-width: 480px;
    counter-reset: step;
    list-style: none;
    padding: 0;
  }
  .confirm-steps li {
    position: relative;
    padding: 0.85rem 0 0.85rem 3rem;
    border-bottom: 1px solid var(--border, #e9e3dd);
    counter-increment: step;
    color: var(--text, #1f1d1b);
  }
  .confirm-steps li:last-child { border-bottom: none; }
  .confirm-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.95rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rust, #b8492a);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .confirm-note {
    margin-top: 2.5rem;
    font-size: 0.9rem;
    color: var(--text-muted, #5a5550);
  }
  .confirm-actions { margin-top: 2rem; }



/* ---- carried over from the previous design for pages the new
     design does not cover (/services/*, /coaching/*) ---- */

/* Services / offering cards (used by /coaching) */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
  }

  .service-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2.2rem 1.8rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 100%;
    background: var(--rust);
    opacity: 0;
    transition: opacity 0.2s;
  }

  .service-card:hover { border-color: var(--rust); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(184,74,42,0.1); }
  .service-card:hover::before { opacity: 1; }

  .service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--rust-pale);
    color: var(--rust);
    margin: 0 auto 1.4rem;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .service-card:hover .service-icon {
    background: var(--rust);
    color: var(--white);
  }
  .service-icon svg { width: 26px; height: 26px; display: block; }

  .service-card h4 {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
  }
  .service-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    margin-left: auto;
    margin-right: auto;
  }
  .service-card-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--rust);
    letter-spacing: 0.02em;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--rust);
    transition: gap 0.18s ease;
  }
  .service-card-link:hover { gap: 0.7rem; }


/* Sub-page building blocks (curriculum, fact box, related) */
.curriculum {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}
.curriculum-item {
  display: flex;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  align-items: flex-start;
}
.curriculum-num {
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  font-size: 1.8rem;
  color: var(--rust);
  line-height: 1;
  flex-shrink: 0;
}
.curriculum-item h4 { margin-bottom: 0.3rem; font-size: 1rem; }
.curriculum-item p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }

@media (max-width: 700px) {
  .curriculum { grid-template-columns: 1fr; }
}

/* Sidebar-style fact box */
.fact-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fact-box h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.fact-box .price {
  font-family: 'Manrope', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--rust);
  line-height: 1;
}
.fact-box .price small {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-left: 0.3rem;
}
.fact-list { list-style: none; }
.fact-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.fact-list li:last-child { border-bottom: none; }
.fact-list li span { color: var(--text-muted); }
.fact-list li strong { color: var(--text); font-weight: 600; text-align: right; }

/* Two-col layout for detail pages */
.two-col {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: start;
}
.two-col-sidebar { position: sticky; top: 90px; }

@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: 2.5rem; }
  .two-col-sidebar { position: static; }
}

/* CTA block */
.cta-block {
  background: var(--rust);
  color: var(--white);
  padding: 3.5rem 2.5rem;
  border-radius: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 4rem 0 0;
}
.cta-block::after {
  content: '';
  position: absolute;
  bottom: -40%;
  right: -10%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}
.cta-block h2 { color: var(--white); margin-bottom: 0.8rem; }
.cta-block p { color: rgba(255,255,255,0.85); margin: 0 auto 1.5rem; max-width: 50ch; }
.cta-block .btn { position: relative; z-index: 1; }

/* Related */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.related-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.75rem;
  transition: all 0.2s;
  background: var(--white);
}
.related-card:hover {
  border-color: var(--rust);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(184,74,42,0.08);
}
.related-card h4 { margin-bottom: 0.4rem; }
.related-card h4 a { color: var(--text); }
.related-card h4 a:hover { color: var(--rust); }
.related-card p { font-size: 0.9rem; color: var(--text-muted); }
@media (max-width: 900px) {
  .related-grid { grid-template-columns: 1fr; }
}

/* ── Weitere Termine ────────────────────────────────────────────────────────
   Not from the imported design: it assumed one fixed date per workshop, while
   we sync as many Termine per variant as exist in Stripe. Listed under the
   detail page's facts box, each with its own Payment Link. */
.ws-more-title{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute);margin:1.4rem 0 0.6rem}
.ws-more-dates{list-style:none;margin:0;display:flex;flex-direction:column;gap:0.6rem}
.ws-more-dates li{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:0.7rem 0.9rem;font-size:0.9rem;color:var(--ink-soft)}
.ws-more-dates .btn{padding:0.45rem 0.8rem;font-size:0.8rem;white-space:nowrap}
@media (max-width:900px){.ws-more-dates li{flex-direction:column;align-items:flex-start}}

/* ── Karten-Faktenzeile: Umbruch statt Überlauf ────────────────────────────
   The design's `.ws-when span` is `white-space:nowrap`, which worked because
   its card copy was hand-written and short ("online, max. 4 TN"). Ours comes
   from Stripe metadata and can be much longer ("München – genaue Location
   folgt, max. 6 TN"), which overflowed the card and got clipped. Let those
   two lines wrap instead. */
.ws-card-facts .ws-when span{white-space:normal;overflow-wrap:break-word}

/* ── Kartenpreise: eine Farbe statt fünf ───────────────────────────────────
   The design ties `.ws-price b` to `var(--t-ink)`, so each card's price took
   its own `data-theme` accent. Pin every card price to the "heart" ink
   (Creator Sprechstunde's) so the grid reads as one price list. Detail-page
   prices keep their theme colour. */
.ws-card .ws-price b{color:#8E3E28}