/* Layout: Werkstattbuch am Set. Nachtblau als Grund, Condensed-Versalien, eine Klappe pro Motiv.
   Drei Spalten, 32 px Spaltenabstand, 72 px Außenrand, 1-px-Linien zwischen Abschnitten. */
@font-face{font-family:"Barlow";src:url("/static/fonts/Barlow-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("/static/fonts/Barlow-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/static/fonts/BarlowCondensed-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/static/fonts/BarlowCondensed-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --nachtblau:#0D1A33; --pink:#E2447F; --rose:#F6A0C1; --papier:#FFFFFF;
  --nebel:#E3E9F4; --still:#1E2D4E; --rahmen:#475169;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --text:"Barlow","Helvetica Neue",Arial,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;
  --gutter:var(--s8); --maxw:1440px;
  color-scheme:dark;
}
@media (max-width:900px){:root{--gutter:var(--s5)}}
@media (max-width:480px){:root{--gutter:var(--s4)}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--nachtblau);color:var(--nebel);font:400 16px/24px var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.icon{width:24px;height:24px;flex:none}
.icon.sm{width:16px;height:16px}
.icon.lg{width:32px;height:32px}

/* Typografie nach Designrichtlinien */
.label{font:500 12px/16px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}
.meta{font:500 12px/16px var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--rose);font-variant-numeric:tabular-nums}
h1,h2,h3,.t-xl,.t{font-family:var(--display);font-weight:600;text-transform:uppercase;color:var(--papier);margin:0;text-wrap:balance}
h1{font-size:clamp(40px,5.2vw,64px);line-height:.92}
h2,.t-xl{font-size:40px;line-height:36px}
h3,.t{font-size:24px;line-height:28px}
@media (max-width:600px){h2,.t-xl{font-size:32px;line-height:30px}}
.pk{color:var(--pink)}
p{margin:0;max-width:65ch}
.lead{font-size:19px;line-height:30px;color:var(--nebel)}
.muted{color:var(--nebel);opacity:.86}
.stack{display:flex;flex-direction:column}
.g2{gap:var(--s2)} .g3{gap:var(--s3)} .g4{gap:var(--s4)} .g5{gap:var(--s5)} .g6{gap:var(--s6)}

/* Klappe: 8 px, Teilung 14 px, beidseitig durch Balkenmitte angeschnitten */
.klappe{display:block;height:8px;width:100%}
.klappe svg{display:block;width:100%;height:8px}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--nachtblau);border-bottom:1px solid var(--rahmen)}
.top .wrap{display:flex;align-items:center;gap:var(--s6);min-height:80px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand svg{display:block;height:auto}
.brand .logo-mono{width:52px}
.top .wrap{padding-block:var(--s2)}
@media (max-width:600px){.brand .logo-mono{width:44px}}
.nav{display:flex;gap:var(--s5);align-items:center;margin-left:auto}
.nav a{font:500 17px/20px var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--nebel);text-decoration:none;padding:var(--s2) 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--papier)}
.nav a[aria-current="page"]{color:var(--papier);border-bottom-color:var(--rose)}
.tools{display:flex;align-items:center;gap:var(--s4)}
.lang{display:flex;border:1px solid var(--rahmen)}
.lang a{display:block;color:var(--nebel);font:500 13px/16px var(--display);letter-spacing:.16em;padding:6px 10px;text-decoration:none}
.lang a[aria-current="true"]{background:var(--papier);color:var(--nachtblau)}
.menu-btn{display:none;background:none;border:0;color:var(--papier);padding:var(--s2);cursor:pointer}
@media (max-width:1180px){
  .nav{display:none}
  .menu-btn{display:block}
  .tools{margin-left:auto}
  .top .btn-cta{display:none}
}
.drawer{display:none;border-top:1px solid var(--rahmen)}
.drawer.open{display:block}
.drawer nav{display:flex;flex-direction:column;padding-block:var(--s4) var(--s5)}
.drawer a{font:600 24px/28px var(--display);text-transform:uppercase;color:var(--papier);text-decoration:none;padding:var(--s3) 0;border-bottom:1px solid var(--rahmen);display:flex;justify-content:space-between;align-items:center}
.drawer a .label{margin-left:var(--s3)}
.drawer .btn{margin-top:var(--s5)}

/* Buttons: Papier-Block als Transaktionselement, Pink bleibt Akzent */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font:600 19px/20px var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:14px 22px;border:1px solid var(--papier);cursor:pointer;border-radius:0}
.btn-cta{background:var(--papier);color:var(--nachtblau)}
.btn-cta:hover{background:var(--rose);border-color:var(--rose)}
.btn-line{background:transparent;color:var(--papier)}
.btn-line:hover{background:var(--still)}
.btn .icon{width:20px;height:20px}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s4)}

/* Seiten */
.page[hidden]{display:none}
.section{padding-block:var(--s7)}
.rule{border-top:1px solid var(--rahmen)}
.pagehead{padding-block:var(--s7) var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.pagehead .lead{max-width:60ch}

/* Hero: Loop-Slot 20:9, mobil 4:5 */
.hero{background:var(--still);position:relative;width:100%;aspect-ratio:20/9;max-height:calc(100vh - 220px);min-height:280px;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.hero{aspect-ratio:4/5;max-height:none}}
.hero .ph{position:absolute;inset:0;display:grid;place-items:center}
.hero .frame{position:absolute;inset:6%;pointer-events:none}
.hero .frame i{position:absolute;width:28px;height:28px;border-color:var(--rose);border-style:solid;border-width:0}
.hero .frame i:nth-child(1){top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.hero .frame i:nth-child(2){top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.hero .frame i:nth-child(3){bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.hero .frame i:nth-child(4){bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.hero .hud{position:absolute;left:6%;right:6%;display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s4) var(--s5)}
.hero .hud.t{top:6%} .hero .hud.b{bottom:6%}
.hero .center{display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center;padding:var(--s5)}
.hero .center .fmt{font:600 clamp(56px,10vw,140px)/.9 var(--display);color:var(--papier);letter-spacing:.02em}
.hero .center .fmt .x{color:var(--rahmen)}
.hero .fmt-m{display:none}
@media (max-width:700px){.hero .fmt-d{display:none}.hero .fmt-m{display:inline}.hero .hud{padding:var(--s3)}}
.hero .scrub{position:absolute;left:6%;right:6%;bottom:calc(6% - 1px);height:1px;background:var(--rahmen)}
.hero .scrub b{display:block;height:1px;width:0;background:var(--rose)}
.hero .pp{position:absolute;right:calc(6% + var(--s5));bottom:calc(6% + 48px);background:var(--nachtblau);border:1px solid var(--rahmen);color:var(--papier);width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
@media (max-width:700px){.hero .pp{right:calc(6% + var(--s3));bottom:calc(6% + 40px)}}

/* Start: USP direkt unter dem Loop */
.usp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);padding-block:var(--s7)}
.usp .head{grid-column:span 2;display:flex;flex-direction:column;gap:var(--s5)}
.usp .side{display:flex;flex-direction:column;gap:var(--s4);justify-content:flex-end}
@media (max-width:900px){.usp{grid-template-columns:1fr}.usp .head{grid-column:auto}}
.together{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin-top:var(--s7);align-items:center}
.together .mark img{display:block;width:clamp(200px,18vw,280px);height:auto}
.together p{grid-column:span 2}
@media (max-width:700px){.together{grid-template-columns:1fr}.together p{grid-column:auto}.together .mark img{width:180px}}
.next{display:flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--papier);font:500 17px/20px var(--display);letter-spacing:.06em;text-transform:uppercase;width:max-content}
.next .icon{transform:rotate(90deg);color:var(--rose)}
.next:hover span{border-bottom:1px solid var(--rose)}

.tags{display:flex;flex-wrap:wrap;gap:var(--s2)}
.tag{font:500 13px/16px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--rose);border:1px solid var(--rose);padding:6px 10px}

/* Raster & Karten */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
@media (max-width:1000px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.grid3,.grid2{grid-template-columns:1fr}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}}
.card{border:1px solid var(--rahmen);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.card .icon{color:var(--rose)}
.sec-head{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin-bottom:var(--s6)}
.sec-head .h{display:flex;flex-direction:column;gap:var(--s3)}
.sec-head p{grid-column:span 2;align-self:end}
@media (max-width:900px){.sec-head{grid-template-columns:1fr}.sec-head p{grid-column:auto}}

/* Ablauf */
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--rahmen)}
.steps li{display:grid;grid-template-columns:88px minmax(0,220px) minmax(0,1fr);gap:var(--s6);padding-block:var(--s5);border-bottom:1px solid var(--rahmen);align-items:baseline}
.steps .no{font:600 32px/30px var(--display);color:var(--pink);font-variant-numeric:tabular-nums}
@media (max-width:700px){.steps li{grid-template-columns:56px minmax(0,1fr);gap:var(--s2) var(--s4)}.steps li p{grid-column:2}}

.timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--rahmen)}
.timeline > div{padding:var(--s5) var(--s4);border-right:1px solid var(--rahmen);display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.timeline > div:last-child{border-right:0}
.timeline .t{font-size:20px;line-height:22px}
@media (max-width:1000px){.timeline{grid-template-columns:repeat(3,minmax(0,1fr))}.timeline > div:nth-child(3){border-right:0}.timeline > div:nth-child(-n+3){border-bottom:1px solid var(--rahmen)}}
@media (max-width:520px){.timeline{grid-template-columns:1fr}.timeline > div{border-right:0;border-bottom:1px solid var(--rahmen)}.timeline > div:last-child{border-bottom:0}}

.person .role{margin-top:calc(-1 * var(--s2))}

/* Filme */
.films{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
@media (max-width:1000px){.films{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.films{grid-template-columns:1fr}}
.film{display:flex;flex-direction:column;gap:var(--s4);text-decoration:none;color:inherit;min-width:0}
.film .shot{position:relative;aspect-ratio:16/9;background:var(--still);overflow:hidden;max-width:100%}
.film .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film .card-ph{position:absolute;inset:0;padding:var(--s4) var(--s5);display:flex;flex-direction:column;justify-content:space-between}
.film .card-ph .row{display:flex;justify-content:space-between}
.film .card-ph .t{font-size:22px;line-height:24px}
.film .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:var(--nachtblau);display:grid;place-items:center;color:var(--papier);border:1px solid var(--rahmen)}
.film:hover .play{background:var(--papier);color:var(--nachtblau)}
.film .info{display:flex;flex-direction:column;gap:var(--s2)}
.film .src{display:flex;gap:var(--s2);align-items:center;color:var(--nebel);font-size:14px}
.film.todo .shot{background:transparent;border:1px solid var(--rahmen)}
.film.todo{cursor:default}
.yt{position:fixed;inset:0;z-index:50;background:rgba(13,26,51,.94);display:grid;place-items:center;padding:var(--s4)}
.yt-box{width:min(1100px,100%);border:1px solid var(--rahmen);background:var(--nachtblau)}
.yt-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4);border-bottom:1px solid var(--rahmen)}
.yt-x{background:none;border:0;color:var(--papier);cursor:pointer;padding:var(--s2)}
.yt-stage{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--still)}
.yt-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-consent{position:absolute;inset:0;padding:var(--s5);display:flex;flex-direction:column;justify-content:center;gap:var(--s4);overflow:auto}
@media (max-width:600px){.yt-stage{aspect-ratio:auto;min-height:420px}}
.note{border-left:2px solid var(--rose);padding:var(--s2) var(--s4);font-size:14px;line-height:22px;color:var(--nebel);max-width:80ch}

/* Formulare */
form{display:flex;flex-direction:column;gap:var(--s5)}
.f-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
@media (max-width:600px){.f-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.field label,.field .lbl{font:500 13px/16px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
input,select,textarea{font:400 16px/24px var(--text);color:var(--papier);background:var(--nachtblau);border:1px solid var(--rahmen);border-radius:0;padding:12px 14px;width:100%}
input:hover,select:hover,textarea:hover{border-color:var(--nebel)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-color:var(--papier)}
textarea{min-height:150px;resize:vertical}
.check{display:flex;gap:var(--s3);align-items:flex-start;font-size:14px;line-height:22px}
.check input{width:20px;height:20px;padding:0;margin-top:2px;accent-color:var(--pink);flex:none}
.req{color:var(--rose)}
.done{border:1px solid var(--rose);padding:var(--s5);display:flex;gap:var(--s4);align-items:flex-start}
.done .icon{color:var(--rose)}
.err{color:var(--rose);font-size:14px}
.hint{font-size:14px;line-height:20px;color:var(--nebel);opacity:.8}
[aria-invalid="true"]{border-color:var(--rose)}
.mini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.mini li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s3)}
.mini .no{font:600 24px/24px var(--display);color:var(--pink);font-variant-numeric:tabular-nums}

.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s7) var(--s6)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.ways{display:flex;flex-direction:column;border-top:1px solid var(--rahmen)}
.way{display:flex;gap:var(--s4);padding-block:var(--s4);border-bottom:1px solid var(--rahmen);align-items:flex-start}
.way .icon{color:var(--rose);margin-top:2px}
.way strong{display:block;font:600 20px/24px var(--display);color:var(--papier);text-transform:uppercase;letter-spacing:.02em}
.way a{text-decoration:none;border-bottom:1px solid var(--rahmen)}
.way a:hover{border-bottom-color:var(--rose)}
.copy{background:none;border:1px solid var(--rahmen);color:var(--nebel);font:500 12px/16px var(--display);letter-spacing:.16em;text-transform:uppercase;padding:4px 8px;cursor:pointer;margin-top:var(--s2)}

/* Rechtstexte */
.legal{display:flex;flex-direction:column;gap:var(--s5);max-width:72ch;padding-bottom:var(--s7)}
.legal h3{font-size:22px;line-height:26px;margin-top:var(--s4)}
.legal p, .legal li{color:var(--nebel)}
.legal ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:var(--s2)}
.ph-text{color:var(--rose)}

/* Abspann: Transaktionselement am Fuß jeder Seite */
.abspann{border-top:1px solid var(--rahmen);padding-block:var(--s7)}
.abspann .in{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s6);align-items:end}
@media (max-width:900px){.abspann .in{grid-template-columns:1fr}}
.foot{border-top:1px solid var(--rahmen);padding-block:var(--s7) var(--s6)}
.foot .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s6)}
@media (max-width:900px){.foot .in{grid-template-columns:1fr}}
.foot .mark img{width:200px;height:auto;display:block}
.foot nav{display:flex;flex-direction:column;gap:var(--s2)}
.foot nav a{text-decoration:none;color:var(--nebel)}
.foot nav a:hover{color:var(--papier)}
.foot .small{font-size:14px;line-height:22px}

/* Variante: einzelne Abschnitte auf Papier (CI-Regeln für Druck: Nachtblau auf Weiß, Erläuterungen Grau, kein Rosé auf Weiß) */
html[data-variant="paper"] .paperable{--papier:#0D1A33;--nebel:#0D1A33;--rose:#5B6478;--rahmen:#C5CCDA;--nachtblau:#FFFFFF;--still:#E3E9F4;color:var(--nebel);background:#FFFFFF;box-shadow:0 0 0 100vmax #FFFFFF;clip-path:inset(0 -100vmax)}
html[data-variant="paper"] .paperable .card .icon{color:#0D1A33}

/* Ergänzungen für die Server-Version */
.yt-stage video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.film .shot .card-ph{z-index:0}
.film .shot img{z-index:1}
.film .play{z-index:2}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.film.nolink{cursor:default}
.film{cursor:pointer}
.empty{border:1px dashed var(--rahmen);padding:var(--s6);color:var(--nebel)}
button.film{background:none;border:0;padding:0;text-align:left;font:inherit}
.skip{position:absolute;left:-10000px;top:0;background:var(--papier);color:var(--nachtblau);padding:var(--s3) var(--s4);z-index:100}
.skip:focus{left:var(--s4);top:var(--s4)}

/* Einwilligungs-Banner */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.cb-back{position:fixed;inset:0;z-index:60;background:rgba(13,26,51,.94)}
.cb{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--nachtblau);border-top:1px solid var(--rahmen);max-height:92vh;max-height:92dvh;overflow:auto;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -12px 40px rgba(0,0,0,.45)}
.cb[hidden],.cb-back[hidden]{display:none}
.cb.is-modal{top:50%;bottom:auto;left:50%;right:auto;transform:translate(-50%,-50%);width:min(760px,100%);border:1px solid var(--rahmen)}
.cb-in{max-width:var(--maxw);margin:0 auto;padding:var(--s5) var(--gutter)}
.cb.is-modal .cb-in{padding:var(--s5)}
.cb-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-bottom:var(--s3)}
.cb-x{background:none;border:0;color:var(--papier);cursor:pointer;padding:var(--s2)}
.cb-body{display:flex;flex-direction:column;gap:var(--s4);max-width:96ch}
.cb-body p{margin:0;font-size:15px;line-height:24px;color:var(--nebel)}
.cb-body a{color:var(--papier)}
.cb-body a:hover{color:var(--rose)}
.cb-cat{border:0;margin:0;padding:0;display:flex;flex-direction:column}
.cb-row{padding:var(--s4) 0;border-top:1px solid var(--rahmen);display:flex;flex-direction:column;gap:var(--s2)}
.cb-row:last-child{border-bottom:1px solid var(--rahmen)}
.cb-row .check{font-size:16px;color:var(--papier)}
.cb-row .check input:disabled{opacity:.7}
.cb-row .cb-d{padding-left:calc(20px + var(--s3));font-size:14px;line-height:22px}
.cb-more{display:flex;flex-direction:column;gap:var(--s4)}
.cb-more[hidden]{display:none}
.cb-actions .btn{flex:0 1 auto}
.cb-links{margin:0}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--nebel);text-align:left;cursor:pointer;text-decoration:none}
.link-btn:hover{color:var(--papier)}
.foot .link-btn{font-size:14px;line-height:22px}
@media (max-width:700px){
  .cb-actions{flex-direction:column}
  .cb-actions .btn{width:100%}
  .cb-in{padding-block:var(--s4)}
  .cb-body{gap:var(--s3)}
}
@media (prefers-reduced-motion:no-preference){.cb:not([hidden]){animation:cb-in .28s ease-out}@keyframes cb-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}}

/* hCaptcha im Kontaktformular */
.captcha{display:flex;flex-direction:column;gap:var(--s3);max-width:60ch}
.captcha[hidden],.captcha-gate[hidden],.captcha-box[hidden]{display:none}
.captcha-gate{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.captcha-box{min-height:78px}