/* Franziska von Kotzebue – Onepager
   Layout: Startseite = Text links, schräg angeschnittene Collage rechts (Desktop); Collage oben, Text darunter (Handy) */

@font-face{font-family:"Inria Serif";src:url(../fonts/inria-serif-latin-300-italic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Inria Serif";src:url(../fonts/inria-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inria Serif";src:url(../fonts/inria-serif-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inria Serif";src:url(../fonts/inria-serif-latin-700-italic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Nothing You Could Do";src:url(../fonts/nothing-you-could-do-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --paper:#EFEDE9;      /* warmes Hellgrau */
  --ink:#121110;        /* Schrift */
  --ink-soft:#2A2826;   /* Fließtext */
  --signal:#D9512F;     /* Unterschrift */
  --night:#0D0C0C;      /* Collage-Grund */
  --tile:#1A1818;
  --serif:"Inria Serif",Georgia,"Times New Roman",serif;
  --hand:"Nothing You Could Do","Segoe Print","Bradley Hand",cursive;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

/* ---------- Startseite ---------- */
:root{--h:clamp(620px, min(100svh, 56.25vw), 1200px)}

.hero,.hero{
  /* Entwurf ist 1920 × 1080; alles skaliert über --h mit */
  --u:calc(var(--h) / 1080);
  --extra:max(0px, (100vw - var(--h) * 16 / 9) / 2);   /* Rand bei sehr breiten Bildschirmen */
  position:relative;height:var(--h);overflow:hidden;background:var(--paper);
}
.hero-text{
  position:relative;z-index:2;
  padding-left:calc(150 * var(--u) + var(--extra));
  padding-top:calc(190 * var(--u));
  max-width:calc(1000 * var(--u) + var(--extra));
}
.hero-title{margin:0;font-size:calc(116 * var(--u));line-height:1.16;letter-spacing:-.005em;font-weight:700}
.hero-title > span{display:block}
.hero-title .l1{font-weight:300;font-style:italic}
.hero-title .l2{font-weight:700;font-style:normal}
.hero-title .l3{font-weight:700;font-style:italic}
.hero-title .dash{display:inline;font-weight:300;font-style:normal}
.hero-lead{margin:calc(44 * var(--u)) 0 0 calc(6 * var(--u));font-size:calc(30 * var(--u));line-height:1.75;color:var(--ink-soft);max-width:calc(780 * var(--u))}
.signature{margin:calc(30 * var(--u)) 0 0 calc(250 * var(--u));font-family:var(--hand);color:var(--signal);font-size:calc(44 * var(--u));letter-spacing:.04em;line-height:1.3}

/* Collage: schräg angeschnittenes Feld rechts */
.hero-collage{
  position:absolute;top:0;bottom:0;right:0;
  width:calc(940 * var(--u) + var(--extra));
  background:var(--night);
  clip-path:polygon(calc(143 * var(--u)) 0,100% 0,100% 100%,calc(18 * var(--u)) 100%);
  filter:drop-shadow(-6px 0 18px rgba(0,0,0,.18));
}
.stage{
  position:absolute;left:calc(470 * var(--u) + var(--extra) / 2);top:50%;
  display:flex;gap:calc(10 * var(--u));align-items:flex-start;
  transform:translate(-50%,-50%) rotate(-8deg) scale(var(--s, 1));
}
.col{display:flex;flex-direction:column;gap:calc(10 * var(--u));margin-top:calc(var(--o) * 185 * var(--u))}
.tile{width:calc(150 * var(--u));height:calc(175 * var(--u));border-radius:calc(6 * var(--u));object-fit:cover;background:var(--tile)}
.tile.empty{visibility:hidden}

/* Handy und schmale Fenster: Collage oben, Text darunter */
@media (max-width:820px){
  .hero{--u:calc(min(100vw, 560px) / 700);height:auto;display:flex;flex-direction:column-reverse}
  .hero-collage{position:relative;width:100%;height:calc(100vw * .82);max-height:560px;clip-path:polygon(0 0,100% 0,100% 86%,0 100%);filter:none}
  .stage{left:50%;transform:translate(-50%,-50%) rotate(-8deg) scale(1.15)}
  .hero{--extra:0px}
  .hero-text{padding:28px 20px 56px;max-width:none}
  .hero-title{font-size:clamp(44px,13vw,72px)}
  .hero-lead{font-size:18px;margin:22px 0 0;max-width:34em}
  .signature{font-size:26px;margin:22px 0 0;text-align:right;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Projekte ---------- */
.scene{
  --u:calc(var(--h) / 1080);
  --extra:max(0px, (100vw - var(--h) * 16 / 9) / 2);
  position:relative;height:var(--h);overflow:hidden;background:var(--paper);
}
.scene-head{position:absolute;left:calc(240 * var(--u) + var(--extra));top:calc(48 * var(--u));margin:0;font-size:calc(104 * var(--u));line-height:1.1;font-weight:700;z-index:3}
.project{position:absolute;inset:0}
.project-text{position:absolute;left:calc(250 * var(--u) + var(--extra));top:calc(300 * var(--u));width:calc(400 * var(--u));font-size:calc(19 * var(--u));line-height:1.55;color:var(--ink-soft)}
.project-text p{margin:0 0 1.1em}
.project-meta{font-size:calc(18 * var(--u));color:var(--ink);margin-bottom:calc(22 * var(--u))!important}
.project-title{margin:0 0 calc(12 * var(--u));font-size:calc(40 * var(--u));font-weight:400;line-height:1.15;color:var(--ink)}
.lead,.g{position:absolute;margin:0;left:calc(var(--x) * var(--u) + var(--extra));top:calc(var(--y) * var(--u));width:calc(var(--gw) * var(--u))}
.lead img{width:100%;height:auto}
.g{height:auto;border-radius:calc(4 * var(--u))}
.g.multiply{mix-blend-mode:multiply}
.g.logo{background:#fff;aspect-ratio:1;object-fit:contain;padding:calc(18 * var(--u));box-sizing:border-box}
.laptop{perspective:calc(2400 * var(--u))}
.laptop .lid{transform-origin:50% 100%}
.laptop .base{margin-top:-1px}

/* ---------- Marc Galal Academy ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.login-hint{margin-top:calc(34 * var(--u))!important;color:var(--ink)}
.login{display:flex;flex-direction:column;gap:calc(20 * var(--u));margin-top:calc(46 * var(--u));width:calc(272 * var(--u))}
.login label{display:block}
.login input{width:100%;box-sizing:border-box;font:inherit;font-size:calc(17 * var(--u));padding:calc(16 * var(--u)) calc(13 * var(--u));border:1px solid #6E6862;border-radius:calc(7 * var(--u));background:transparent;color:var(--ink)}
.login input::placeholder{color:#8E8780}
.login button{margin-top:calc(10 * var(--u));font:inherit;font-size:calc(17 * var(--u));text-align:left;padding:calc(18 * var(--u)) calc(13 * var(--u));border:0;border-radius:calc(7 * var(--u));background:#000;color:#F2EFEA;cursor:pointer}
.login input:focus-visible,.login button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.login-note{margin:0!important;font-size:calc(15 * var(--u));min-height:1.4em}
.page-view{position:absolute;left:calc(600 * var(--u) + var(--extra));top:0;width:calc(1260 * var(--u));height:100%;perspective:calc(1500 * var(--u));perspective-origin:50% 100%}
.page-plane{position:absolute;left:calc(30 * var(--u));right:calc(-60 * var(--u));top:calc(-1500 * var(--u));bottom:0;transform:rotateX(34deg);transform-origin:50% 100%;overflow:hidden}
.page-sheet{display:block;width:100%;height:auto;will-change:transform}
.page-mobile{display:none}

/* ---------- Bewegung (nur Desktop, nur mit JavaScript) ---------- */
@property --w{syntax:"<percentage>";inherits:false;initial-value:120%}
.motion .scenes{height:calc(var(--h) + 150svh);position:relative}
.motion .pin{position:sticky;top:0;height:var(--h);overflow:hidden}
.motion .pin > *{position:absolute;inset:0}
.motion .hero{background:transparent;z-index:2}
.motion .scene.projects{z-index:1}
.motion .scene.projects .project-text,.motion .scene.projects .lead,.motion .scene.projects .g,.motion .scene-head,.motion .page-view{opacity:0}
.char,.word{display:inline-block}
.word{white-space:nowrap}
.sig-ink{display:inline-block;--w:120%;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--w) - 8%),transparent var(--w));
          mask-image:linear-gradient(90deg,#000 calc(var(--w) - 8%),transparent var(--w))}
.motion .sig-ink{--w:-10%}
.motion .sig-ink.writing{animation:write 2.1s cubic-bezier(.45,.1,.6,.95) forwards}
@keyframes write{to{--w:120%}}
.tile.has-shards{position:relative;background-size:cover;background-position:center}
.shard{position:absolute;inset:0;border-radius:inherit;background-size:cover;background-position:center;visibility:hidden}
.tile.has-shards.broken{background:transparent!important}
.tile.has-shards.broken .shard{visibility:visible}

/* Handy: keine Bewegung, alles untereinander */
@media (max-width:820px){
  .scenes,.pin{display:flex;flex-direction:column}
  .pin > .hero{order:-1}
  .scene{height:auto;padding:48px 20px 56px}
  .scene-head,.project,.project-text,.lead,.g{position:static;width:auto}
  .scene-head{font-size:clamp(44px,12vw,64px);margin-bottom:28px}
  .project{display:flex;flex-direction:column;gap:20px;margin-bottom:64px}
  .project-text{font-size:17px}
  .project-meta{font-size:15px}
  .project-title{font-size:30px}
  .gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .g{width:100%;border-radius:4px}
  .g.logo{padding:14px}
  .page-view{display:none}
  .page-mobile{display:block;width:100%;height:auto;border-radius:4px}
  .login{width:100%;max-width:320px}
  .login input,.login button{font-size:16px;padding:14px 12px}
}

/* Galerie-Bilder als Scherben-Behälter (nur mit Bewegung) */
.gbox{display:block;overflow:visible}
.gbox .gimg{width:100%;height:auto;display:block;border-radius:inherit}
.gbox.logo .gimg{width:100%;height:100%;object-fit:contain}
.gbox .shard{visibility:hidden}
.gbox.broken .gimg{visibility:hidden}
.gbox.broken .shard{visibility:visible}
.gbox.broken{background:transparent!important}
.motion .lead{transform-style:preserve-3d}

/* ---------- Eigene Projekte ---------- */
.personal{display:flex;align-items:center;justify-content:center}
.personal-intro{position:relative;z-index:2;text-align:center;margin-top:calc(-80 * var(--u))}
.personal-title{margin:0;font-size:calc(132 * var(--u));line-height:1.1;font-weight:700;color:var(--ink)}
.personal-lead{margin:calc(70 * var(--u)) 0 0;font-size:calc(34 * var(--u));line-height:1.3;color:var(--ink)}
.mosaic{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mosaic-full{width:100%;height:100%;object-fit:cover}
.piece{position:absolute;left:0;top:0;background-repeat:no-repeat;will-change:transform}
.motion .scene.personal{opacity:0;pointer-events:none;z-index:1;background:transparent}
.motion .mosaic-full{opacity:0}

@media (max-width:820px){
  .personal{display:block;padding:56px 20px 0}
  .personal-intro{margin:0 0 40px}
  .personal-title{font-size:clamp(40px,11vw,60px)}
  .personal-lead{font-size:17px;margin-top:22px}
  .mosaic{position:relative;inset:auto;margin:0 -20px}
  .mosaic-full{height:auto}
}

/* ---------- Kreatives (Videos) ---------- */
.creative-head{position:absolute;left:calc(176 * var(--u) + var(--extra));top:calc(100 * var(--u));margin:0;font-size:calc(40 * var(--u));line-height:1.2;color:var(--ink)}
.creative-text{position:absolute;left:calc(176 * var(--u) + var(--extra));top:calc(318 * var(--u));width:calc(470 * var(--u));font-size:calc(19 * var(--u));line-height:1.45;color:var(--ink-soft)}
.creative-text p{margin:0 0 1.1em}
.video{position:absolute;left:calc(var(--x) * var(--u) + var(--extra));top:calc(var(--y) * var(--u));width:calc(440 * var(--u));aspect-ratio:16/9;padding:calc(5 * var(--u));background:#F8F7F5;box-shadow:0 calc(6 * var(--u)) calc(22 * var(--u)) rgba(0,0,0,.08);display:block;cursor:pointer;transition:box-shadow .35s ease}
.video img{width:100%;height:100%;object-fit:cover;display:block}
.video:hover{box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.16)}
.video:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.motion .scene.creative{opacity:0;pointer-events:none;z-index:1;background:transparent}

/* Video-Fenster */
.lightbox{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(18,17,16,.72);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.lightbox.open{opacity:1;visibility:visible;transition:opacity .3s ease}
.lightbox-frame{position:relative;width:min(64vw,calc(68vh * 16 / 9),1180px);aspect-ratio:16/9;border:2px solid #F8F7F5;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lightbox-frame iframe,.lightbox-frame img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.lightbox-close{position:absolute;right:-6px;bottom:calc(100% + 14px);background:none;border:0;color:#F8F7F5;font:400 26px/1 var(--serif);cursor:pointer;padding:6px 8px}
.lightbox-close:focus-visible{outline:2px solid var(--signal)}
.lightbox-note{position:absolute;left:0;right:0;bottom:-44px;margin:0;text-align:center;color:#F8F7F5;font-size:16px}

@media (max-width:820px){
  .scene.personal{order:1}
  .scene.creative{order:2}
  .creative-head{display:none}
  .creative-text,.video{position:static;width:auto}
  .creative-text{font-size:17px;margin-bottom:24px}
  .videos{display:grid;grid-template-columns:1fr;gap:16px}
  .video{padding:4px}
  .lightbox-frame{width:94vw}
}

/* ---------- Kontakt ---------- */
.contact{display:flex;align-items:center;justify-content:center;text-align:center}
.contact-inner{margin-top:calc(-40 * var(--u))}
.contact-title{margin:0;font-size:calc(112 * var(--u));line-height:1.1;font-weight:700;color:var(--ink)}
.contact-lead{margin:calc(48 * var(--u)) 0 0;font-size:calc(38 * var(--u));line-height:1.3;font-style:italic;font-weight:300;color:var(--ink)}
.contact-mail{margin:calc(26 * var(--u)) 0 0;font-size:calc(34 * var(--u))}
.contact-mail a{color:var(--ink);text-decoration:none;background:linear-gradient(var(--signal),var(--signal)) 0 100%/100% 1px no-repeat;padding-bottom:.08em;transition:color .25s ease}
.contact-mail a:hover{color:var(--signal)}
.contact-mail a:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.contact-sig{margin:calc(64 * var(--u)) 0 0;font-family:var(--hand);color:var(--signal);font-size:calc(44 * var(--u));letter-spacing:.04em}
.motion .scene.contact{opacity:0;pointer-events:none;z-index:1;background:transparent}
.motion .contact-sig .sig-ink{--w:-10%}
.video.gbox .shard{background-size:100% 100%}
.video.broken{background:transparent!important;box-shadow:none}
.video.broken img{visibility:hidden}
.video.broken .shard{visibility:visible}
.lightbox-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:rgba(0,0,0,.55);color:#F8F7F5;text-align:center;padding:20px}
.lightbox-fallback a{color:#F8F7F5;border:1px solid #F8F7F5;padding:10px 18px;text-decoration:none;border-radius:4px}
@media (max-width:820px){
  .scene.contact{order:3;padding:72px 20px 96px}
  .contact-title{font-size:clamp(36px,10vw,56px)}
  .contact-lead{font-size:22px;margin-top:22px}
  .contact-mail{font-size:clamp(17px,5vw,22px);margin-top:14px}
  .contact-sig{font-size:clamp(20px,6.4vw,28px);margin-top:36px;white-space:nowrap}
}

/* ---------- Impressum & Datenschutz ---------- */
.video-note{position:absolute;left:calc(825 * var(--u) + var(--extra));top:calc(850 * var(--u));margin:0;font-size:calc(15 * var(--u));color:#6E6862}
.legal-links{position:fixed;right:22px;bottom:16px;z-index:40;font-size:14px;line-height:1;color:var(--ink-soft);background:rgba(239,237,233,.88);padding:8px 12px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.legal-links button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.legal-links button:hover{color:var(--signal)}
.legal-links button:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.legal{width:min(760px,calc(100vw - 32px));max-height:min(82vh,900px);padding:0;border:0;border-radius:6px;background:var(--paper);color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.35);overflow:hidden}
.legal::backdrop{background:rgba(18,17,16,.72)}
.legal[open]{display:flex;flex-direction:column;animation:legal-in .3s ease}
@keyframes legal-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.legal-body{overflow-y:auto;padding:48px 56px 44px;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.legal-body h2{margin:0 0 28px;font-size:40px;line-height:1.1;font-weight:700;color:var(--ink)}
.legal-body h3{margin:30px 0 8px;font-size:21px;font-weight:700;color:var(--ink)}
.legal-body h4{margin:18px 0 4px;font-size:17px;font-weight:700;color:var(--ink)}
.legal-body p{margin:0 0 12px}
.legal-body a{color:var(--ink);text-decoration-color:var(--signal);text-underline-offset:3px}
.legal-todo{color:var(--signal)}
.legal-source{margin-top:28px!important;font-size:13px;color:#8E8780}
.legal-close{position:absolute;top:14px;right:18px;background:none;border:0;font:400 24px/1 var(--serif);color:var(--ink);cursor:pointer;padding:6px 8px;z-index:1}
.legal-close:hover{color:var(--signal)}
.legal-close:focus-visible{outline:2px solid var(--signal)}
@media (max-width:820px){
  .video-note{position:static;font-size:14px;margin:0 0 12px}
  .legal-links{position:static;display:block;text-align:center;background:none;padding:0 0 40px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .legal-body{padding:44px 22px 32px;font-size:15px}
  .legal-body h2{font-size:30px}
}

/* Bereits angemeldet: Knopf statt Felder */
.login.is-in{gap:calc(14 * var(--u))}
.login-enter{display:block;font-size:calc(17 * var(--u));padding:calc(18 * var(--u)) calc(13 * var(--u));border-radius:calc(7 * var(--u));background:#000;color:#F2EFEA;text-decoration:none}
.login-enter:hover{background:var(--signal)}
.login-enter:focus-visible,.login-out:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.login .login-out{align-self:flex-start;font:inherit;font-size:calc(15 * var(--u));background:none;border:0;padding:0;margin:0;color:#6E6862;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.login .login-out:hover{color:var(--signal)}
@media (max-width:820px){.login-enter{font-size:16px;padding:14px 12px}.login-out{font-size:14px}}
.legal-links a{color:inherit;text-decoration:none}
.legal-links a:hover{color:var(--signal)}
.legal-links a:focus-visible{outline:2px solid var(--signal);outline-offset:3px}