/* BAWIEPC – direkt an den Farben der drei Original-Skizzen orientiert.
   Grau #c5c0c4 / Nachtblau #282c45 / Kreide #e7e5e7 / Skizzenrot #c72224 */
:root{--paper:#c5c0c4;--ink:#282c45;--ink-soft:#323553;--chalk:#e9e8e9;--red:#c52127;--line:#d9d3d6;--gap:6px;--banner-h:129px;--nav-h:31px;--font-chalk:'Cabin Sketch','Courier New',cursive;--font-notes:'Caveat',cursive;--font-body:'DM Sans',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:200px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:15px;min-width:300px;overflow-x:hidden}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--red);outline-offset:3px}
img,video{display:block;max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
.skip-link{position:fixed;z-index:100;top:-200px;left:14px;padding:10px;background:white;color:black}
.skip-link:focus{top:8px}
.chalk-title{font-family:var(--font-chalk);font-weight:700;letter-spacing:.075em;color:var(--chalk);line-height:1.05;text-transform:uppercase}
.site-header{position:fixed;left:0;right:0;top:0;z-index:30;padding:8px var(--gap) 0;background:var(--paper)}
.film-banner{width:100%;height:var(--banner-h);position:relative;overflow:hidden;background:var(--ink);margin-bottom:6px}
.film-banner__video{width:100%;height:100%;object-fit:cover;object-position:center center}
.film-banner__tint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,44,69,.79) 0%,rgba(40,44,69,.57) 53%,rgba(40,44,69,.18) 100%);pointer-events:none}
.film-banner__logo{position:absolute;left:3.8%;top:2px;height:calc(100% - 6px);max-width:69%;display:flex;align-items:center;justify-content:flex-start}
.film-banner__logo img{display:block;width:auto;height:96%;max-width:100%;object-fit:contain;object-position:left center}
.film-banner__controls{position:absolute;right:11px;bottom:9px;display:flex;align-items:center;gap:7px;color:var(--chalk)}
.film-banner__label{font-size:9px;letter-spacing:.16em;font-weight:600;text-shadow:0 1px 3px #000}
.play-banner,.banner-pause{background:rgba(40,44,69,.9);border:1px solid rgba(255,255,255,.66);color:#fff;min-height:34px}
.play-banner{display:flex;align-items:center;gap:8px;padding:0 12px;font-size:10px;font-weight:700;letter-spacing:.08em}
.play-banner:hover,.banner-pause:hover{background:var(--red)}
.banner-pause{width:34px;display:grid;place-items:center}
.nav-bar{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--ink);color:var(--chalk);padding:0 10px}
.nav-bar__secondary{display:flex;align-items:center;gap:8px;flex:none;font:400 14px var(--font-chalk);letter-spacing:.03em}
.nav-bar__secondary a{text-decoration:none;opacity:.84}
.nav-bar__secondary a:hover,.nav-bar__secondary a[aria-current='page']{opacity:1;color:white;text-decoration:underline;text-underline-offset:3px}
.nav-divider{opacity:.55}
.nav-bar__tabs{display:flex;align-items:stretch;height:100%;gap:4px;min-width:0}
.page-tab{font:700 11px var(--font-chalk);letter-spacing:.05em;color:var(--chalk);opacity:.65;border:0;border-bottom:2px solid transparent;background:transparent;padding:1px 8px;white-space:nowrap}
.page-tab:hover{opacity:1}
.page-tab.is-selected{opacity:1;border-bottom-color:var(--chalk);background:rgba(255,255,255,.07)}
main{padding-top:calc(8px + var(--banner-h) + 6px + var(--nav-h) + 5px);min-height:calc(100dvh - 120px)}
.portfolio-page{padding-bottom:2px}
.page-title{margin:0 var(--gap);height:43px;display:flex;align-items:center;justify-content:center;background:var(--ink);font-size:clamp(26px,6.7vw,40px);text-align:center;white-space:nowrap}
.page-body{padding:18px 16px 44px;max-width:1450px;margin:0 auto}
.project-folder{margin:0 0 29px;padding:0}
.project-folder summary{list-style:none}
.project-folder summary::-webkit-details-marker{display:none}
.folder-trigger{min-height:36px;display:flex;align-items:center;gap:6px;color:var(--red);font:600 clamp(20px,5.2vw,26px) / .97 var(--font-notes);cursor:pointer;user-select:none}
.folder-icon{width:34px;height:27px;flex:0 0 34px;display:grid;place-items:center;position:relative}
.folder-icon svg{width:34px;height:27px;fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.folder-chevron{font-size:27px;line-height:1;display:inline-block;transition:transform .25s;margin-left:3px}
.project-folder:not([open]) .folder-chevron{transform:rotate(-90deg)}
.folder-equals{white-space:normal}
.project-heading{background:var(--ink);min-height:44px;display:flex;align-items:center;justify-content:center;margin:0 0 4px;padding:4px 7px 2px;text-align:center;font-size:clamp(20px,4.75vw,29px);white-space:normal;overflow-wrap:anywhere}
.artwork-button{background:var(--ink);border:0;padding:0;display:block;position:relative;width:100%;line-height:0;overflow:hidden;text-align:left}
.artwork-button img{display:block;width:100%;height:auto;transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.artwork-button:hover img{transform:scale(1.018)}
.artwork-button .image-expand{position:absolute;right:8px;top:8px;background:rgba(40,44,69,.88);color:var(--chalk);font:20px var(--font-body);width:28px;height:28px;display:grid;place-items:center;line-height:1;opacity:0;transition:opacity .2s}
.artwork-button:hover .image-expand,.artwork-button:focus-visible .image-expand{opacity:1}
.hero-art{margin:0}
.sketch-note{font:500 clamp(20px,4.4vw,28px) / 1.13 var(--font-notes);color:var(--red);margin:6px 3px 3px}
.sketch-note .note-arrow{font-size:27px}
.project-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.hand-link{border:0;background:none;color:var(--red);padding:5px 2px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;font:600 clamp(18px,3vw,23px) var(--font-notes)}
.hand-link:hover{color:#8e141a}
.project-subnote{font-size:10px;letter-spacing:.03em;color:#62616a}
.story-closing{text-align:center;margin:26px 0 60px}
/* Animation */
.posters-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.poster-item{min-width:0}
.poster-item .project-heading{font-size:clamp(14px,3vw,23px);min-height:42px;max-height:60px;margin-bottom:4px;line-height:1.05;letter-spacing:.025em}
.poster-art{height:auto}
.poster-art img{width:100%;height:auto;aspect-ratio:207/309;object-fit:cover;object-position:top}
.film-play-marker{width:52px;height:52px;display:grid;place-items:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid white;border-radius:100%;background:rgba(0,0,0,.64);color:white;font:20px var(--font-body);line-height:1;opacity:.9;transition:background .2s}
.artwork-button:hover .film-play-marker{background:var(--red)}
.personal-folder{margin-top:28px}
.personal-grid{display:grid;grid-template-areas:'dancer witch' 'sketch witch' 'monster monster';grid-template-columns:1.21fr 1fr;gap:4px;align-items:stretch}
.personal-grid .artwork-button img{width:100%;height:100%;object-fit:cover}
.personal-dancer{grid-area:dancer;aspect-ratio:238/120}
.personal-sketch{grid-area:sketch;aspect-ratio:238/135}
.personal-witch{grid-area:witch}
.personal-monster{grid-area:monster;aspect-ratio:442/156}
.gallery-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:4px}
.gallery-nav .sketch-note{font-size:19px}
.gallery-launch{background:none;border:0;color:var(--red);font:600 22px var(--font-notes);text-decoration:underline;text-underline-offset:4px}
/* Character */
.char-trigger{justify-content:space-between;gap:5px;margin-bottom:5px}
.folder-caption{display:flex;align-items:center;gap:3px;min-width:0;white-space:nowrap}
.char-inline-title{font-size:clamp(19px,4.8vw,29px);margin:0;min-height:43px;flex:1;text-align:center;white-space:nowrap;padding-inline:4px}
.witch-art{background:#000}
.concept-boards{display:grid;gap:8px;margin-top:7px}
.research-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
.research-last{grid-column:1/-1;width:50.5%;justify-self:center}
.characters-gallery-folder{margin-top:30px}
/* Sliders */
.carousel-section{margin-top:23px}
.carousel-head{display:flex;align-items:center;gap:10px;background:var(--ink);margin-bottom:7px;min-height:44px;justify-content:space-between}
.carousel-head .project-heading{margin:0;min-height:44px;flex:1;justify-content:flex-start;padding-left:12px}
.carousel-controls{display:flex;align-items:center;gap:5px;padding:3px 6px;flex:none;color:var(--chalk)}
.carousel-counter{font:15px var(--font-chalk);white-space:nowrap;letter-spacing:.06em;margin-right:6px}
.carousel-controls button{background:transparent;color:var(--chalk);border:1px solid #9799ab;width:31px;height:30px;font-size:18px}
.carousel-controls button:hover{background:var(--chalk);color:var(--ink)}
.slider-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.slider-viewport::-webkit-scrollbar{display:none}
.slider-track{display:flex;gap:10px;align-items:stretch}
.slider-card{flex:0 0 clamp(180px,39%,330px);display:flex;flex-direction:column;border:0;background:var(--ink);padding:0;scroll-snap-align:start;color:var(--chalk);text-align:left;overflow:hidden}
.slider-card img{width:100%;height:170px;object-fit:cover;object-position:center top;transition:transform .3s}
.slider-card:hover img{transform:scale(1.025)}
.slider-card span{padding:12px 10px;font:700 18px var(--font-chalk);letter-spacing:.03em;min-height:49px}
.slider-dots{display:flex;gap:7px;justify-content:center;margin:11px 0 3px}
.slider-dots button{width:8px;height:8px;border:1px solid var(--ink);background:transparent;border-radius:50%;padding:0}
.slider-dots button.is-active{background:var(--red);border-color:var(--red);transform:scale(1.2)}
/* Footer – genauso dunkle Leiste und handgezeichnete Scroll-Pfeile */
.site-footer{padding:0 var(--gap) 10px;margin-top:4px}
.footer-strip{min-height:33px;background:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:4px 10px;gap:5px;font-size:clamp(12px,3.1vw,19px);letter-spacing:.065em;white-space:nowrap}
.footer-pipe{font:26px var(--font-chalk);opacity:.9}
.footer-actions{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 7px 0}
.scroll-action{background:none;border:0;color:var(--red);display:flex;align-items:center;gap:8px;font:600 clamp(17px,3.7vw,23px) var(--font-notes)}
.scroll-action>span:first-child,.scroll-action>span:last-child{font-weight:700}
.scroll-action>span[aria-hidden]{font:43px var(--font-notes);line-height:1}
.scroll-action:hover{text-decoration:underline}
/* Contact, CV: gleiche Tafeln und handschriftliche Akzente */
.simple-page{max-width:1020px;min-height:60vh}
.simple-page>.project-heading{margin-top:5px}
.simple-note{text-align:left;margin:16px 0 20px;font-size:29px}
.simple-panel{padding:clamp(18px,4vw,38px);background:#dad5d9;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);margin-bottom:40px}
.simple-panel>p:first-child{max-width:560px;line-height:1.7}
#contact-form{display:grid;gap:16px;margin-top:22px}
#contact-form label{display:grid;gap:7px;font:700 20px var(--font-chalk);letter-spacing:.05em}
#contact-form input,#contact-form select,#contact-form textarea{font:15px var(--font-body);background:#f1edef;border:1px solid var(--ink);color:var(--ink);padding:11px 12px;width:100%;min-width:0;border-radius:0}
#contact-form textarea{resize:vertical}
.form-buttons{display:flex;gap:10px;flex-wrap:wrap}
.filled-button,.outline-button{background:var(--ink);color:var(--chalk);border:2px solid var(--ink);padding:11px 15px;font:700 17px var(--font-chalk);letter-spacing:.03em}
.outline-button{background:transparent;color:var(--ink)}
.filled-button:hover,.outline-button:hover{background:var(--red);border-color:var(--red);color:white}
.edit-note{font-size:12px!important;opacity:.65;line-height:1.6;margin-top:22px}
.form-status{font-size:13px;margin:0}
.cv-top{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding-bottom:22px;border-bottom:2px solid var(--ink)}
.cv-top h3{font:700 clamp(35px,6vw,65px) var(--font-chalk);line-height:1;margin:10px 0}
.eyebrow{font:700 13px var(--font-body);letter-spacing:.16em}
.cv-columns{display:grid;grid-template-columns:1.3fr 1fr;gap:30px}
.cv-columns h4{margin-top:24px;min-height:34px;justify-content:flex-start;padding-left:10px;font-size:22px}
.cv-columns p,.cv-columns li{line-height:1.65}
/* Black box viewer must cover the entire window, NOT a small inline modal */
.cinema-dialog,.lightbox-dialog{max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;border:0;padding:0;background:#000;color:white;overflow:hidden}
.cinema-dialog::backdrop,.lightbox-dialog::backdrop{background:#000}
.cinema-dialog[open],.lightbox-dialog[open]{display:flex;flex-direction:column}
.cinema-top,.lightbox-top{height:66px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px clamp(16px,3vw,34px);flex:0 0 auto;color:#eee;font:700 17px var(--font-chalk);letter-spacing:.055em}
.cinema-close{color:white;border:1px solid #696969;background:#151515;padding:9px 14px;display:flex;gap:10px;align-items:center;font:700 14px var(--font-body)}
.cinema-close:hover{background:var(--red);border-color:var(--red)}
.cinema-center{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;background:#000}
.cinema-center video{width:100%;height:100%;object-fit:contain;background:#000}
.cinema-bottom{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:7px clamp(16px,3vw,34px);color:#aaa;font:10px var(--font-body);letter-spacing:.09em;flex:0 0 auto}
.lightbox-center{flex:1;min-height:0;display:grid;grid-template-columns:minmax(34px,7vw) 1fr minmax(34px,7vw);align-items:center;gap:5px;padding:5px}
.lightbox-center img{max-width:100%;max-height:calc(100dvh - 125px);height:auto;width:auto;object-fit:contain;justify-self:center}
.lightbox-arrow{height:72px;border:0;background:#181818;color:white;font-size:25px;align-self:center}
.lightbox-arrow:hover{background:var(--red)}
@media (min-width:760px){
  :root{--banner-h:clamp(180px,22vw,290px);--nav-h:43px;--gap:12px}
  .site-header{padding-top:12px}
  main{padding-top:calc(12px + var(--banner-h) + 6px + var(--nav-h) + 12px)}
  .film-banner__logo{max-width:42%;left:3%;top:4%}
  .film-banner__label{font-size:12px}
  .film-banner__controls{right:20px;bottom:19px;gap:12px}
  .play-banner{font-size:12px;min-height:43px}
  .banner-pause{height:43px;width:43px}
  .nav-bar__secondary{font-size:19px}
  .page-tab{font-size:16px;padding-inline:16px}
  .page-title{height:70px;font-size:52px}
  .page-body{padding:32px clamp(25px,5vw,65px) 70px}
  .folder-trigger{font-size:29px;min-height:48px}
  .folder-icon{width:45px;height:33px;flex-basis:45px}
  .folder-icon svg{width:43px;height:32px}
  .project-heading{min-height:54px;font-size:37px;margin-bottom:9px}
  .sketch-note{font-size:27px}
  #page-storyboard .page-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 23px;align-items:start}
  #page-storyboard .project-folder{margin:0}
  #page-storyboard .story-closing{grid-column:1/-1;margin:5px}
  .posters-two{max-width:980px;margin:22px auto 0;gap:22px}
  #page-animation>.page-body>.project-folder:first-child .hero-art{max-width:1060px;margin:0 auto}
  .poster-item .project-heading{font-size:27px;max-height:none;min-height:57px}
  .poster-art img{max-height:570px;object-fit:contain;background:var(--paper)}
  .personal-grid{max-width:960px;margin:0 auto;gap:7px}
  .char-trigger{max-width:none}
  .char-inline-title{font-size:38px}
  .witch-art{max-width:1060px;margin:0 auto}
  .concept-boards{grid-template-columns:1fr 1fr;margin-top:14px;gap:15px}
  .research-grid{max-width:1060px;margin:18px auto 0;gap:12px}
  .research-last{width:50%}
  .carousel-head .project-heading{font-size:30px}
  .slider-card{flex-basis:30%}
  .slider-card img{height:225px}
  .footer-strip{min-height:50px;font-size:23px;padding:7px 30px}
  .footer-actions{padding:15px 25px}
  .scroll-action{font-size:25px}
}
@media (max-width:560px){
  .film-banner__label{display:none}
  .play-banner__text{display:none}
  .play-banner{padding:0;width:34px;justify-content:center;min-height:34px;font-size:12px}
  .film-banner__logo{max-width:90%;left:3.2%}
  .film-banner__controls{right:7px;bottom:5px}
  .nav-bar{padding:0 9px}
  .nav-bar__secondary{font-size:14px;gap:6px}
  .page-tab{font-size:16px;padding:0 8px}
  .tab-name{display:none}
  .page-body{padding-inline:16px}
  .project-folder{margin-bottom:26px}
  .folder-trigger{font-size:22px}
  .folder-icon{width:31px;flex-basis:31px}
  .folder-icon svg{width:31px}
  .folder-chevron{font-size:24px;margin-left:0}
  .char-trigger{gap:3px}
  .char-trigger .folder-caption{font-size:20px}
  .char-inline-title{font-size:clamp(18px,4.9vw,24px);min-height:42px;letter-spacing:.035em}
  .carousel-head .project-heading{font-size:clamp(17px,4vw,23px)}
  .carousel-counter{font-size:11px;margin-right:1px}
  .carousel-controls button{width:25px;height:26px}
  .slider-card{flex-basis:67%}
  .slider-card img{height:145px}
  .cv-columns{grid-template-columns:1fr;gap:4px}
  .cv-top{flex-direction:column}
  .simple-panel{box-shadow:4px 4px var(--ink)}
  .footer-strip{font-size:clamp(10px,3.05vw,15px);gap:2px;padding-inline:9px}
}
@media (max-width:370px){
  .page-body{padding-inline:10px}
  .page-title{font-size:24px}
  .folder-trigger{font-size:19px}
  .char-trigger .folder-caption{font-size:16px}
  .char-inline-title{font-size:18px}
  .nav-bar__secondary{font-size:12px}
  .page-tab{padding:0 5px;font-size:15px}
  .poster-item .project-heading{font-size:13px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.film-banner__video{display:none}.film-banner{background:var(--ink) url('../assets/images/animation-till-death.png') center/cover}}
@media print{.site-header,.site-footer,.cinema-dialog,.lightbox-dialog,#print-cv{display:none!important}main{padding-top:0}.portfolio-page{display:none!important}#page-cv{display:block!important}.page-title{color:#fff}.simple-panel{box-shadow:none;border:0}.simple-page{padding:0}.cv-panel{font-size:11pt}}

/* Zusätzlicher Abstand vor dem ersten Film, wie in der 2D-Skizze. */
#page-animation > .page-body > .project-folder:first-child .folder-body { padding-top: 15px; }