/* serviceavatar.ai, zeit:raum Design System monochrom (06.11.2026). Vorlage: Canvas „serviceavatar.ai Redesign“.
   Dark Standard #000, Baender Warm-Dark #1A1612, Kontakt/Impressum Creme #F6F3EC. Haarlinien statt Karten, kein Schatten, kein Verlauf. */
@font-face{font-family:"Zeitraum Head";font-weight:700;font-display:swap;src:url("/assets/fonts/ZeitraumHead-Bold.woff2") format("woff2")}
@font-face{font-family:"Zeitraum Text";font-weight:300;font-display:swap;src:url("/assets/fonts/ZeitraumText-Light.woff2") format("woff2")}
@font-face{font-family:"Zeitraum Text";font-weight:400;font-display:swap;src:url("/assets/fonts/ZeitraumText-Regular.woff2") format("woff2")}
@font-face{font-family:"Zeitraum Text";font-weight:700;font-display:swap;src:url("/assets/fonts/ZeitraumText-Bold.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url("/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2")}

:root{--head:"Zeitraum Head",Arial,sans-serif;--text:"Zeitraum Text",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --gut:clamp(24px,4vw,64px);--ease:cubic-bezier(.2,.7,.2,1)}
.t-dark,.band{--bg:#000;--fg:#fff;--muted:rgba(255,255,255,.62);--faint:rgba(255,255,255,.46);--em:rgba(255,255,255,.5);--line:rgba(255,255,255,.14);--line2:rgba(255,255,255,.4);--inp:rgba(255,255,255,.3);--btn-fg:#000}
.band{--bg:#1A1612}
.t-cream,.cream{--bg:#F6F3EC;--fg:#1A1612;--muted:#5A5247;--faint:#5A5247;--em:#8A8378;--line:#E6E2D9;--line2:#B5AFA4;--inp:#B5AFA4;--btn-fg:#F6F3EC}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.band,.cream{background:var(--bg);color:var(--fg)}
img{display:block;max-width:100%;height:auto}
a{color:var(--fg);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
p,h1,h2,h3,figure,blockquote,dl,dd,ol{margin:0}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:999px}
.skip:focus{top:12px}

.wrap{max-width:1320px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.pad{padding-top:144px;padding-bottom:144px}
.pad-b{padding-bottom:144px}
.pad-t{padding-top:120px;padding-bottom:144px}
.pad-s{padding-top:120px;padding-bottom:120px}
.stack{display:flex;flex-direction:column;min-width:0}
.s16{gap:16px}.s20{gap:20px}.s24{gap:24px}.s28{gap:28px}.s48{gap:48px}.s64{gap:64px}.s80{gap:80px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:48px}
.split45{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:64px}
.g64{gap:64px}
.end{align-items:end}
.center{align-items:center}
.rule{padding-top:48px;border-top:1px solid var(--line)}
.self-start{align-self:flex-start}

/* Schrift */
.h{font-family:var(--head);font-weight:700}
.h em{font-style:normal;color:var(--em)}
.d1{font-size:clamp(42px,5.6vw,80px);line-height:.96;letter-spacing:-.018em;text-wrap:balance}
.d1a{font-size:clamp(36px,4.2vw,60px);line-height:1;letter-spacing:-.018em;text-wrap:balance}
.d2{font-size:clamp(34px,4.4vw,64px);line-height:.98;letter-spacing:-.018em;text-wrap:balance}
.d2m{font-size:clamp(28px,3.2vw,46px);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.d3{font-size:clamp(22px,1.8vw,26px);line-height:1.15;letter-spacing:-.012em}
.eb{font-family:var(--text);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.lede{font-size:20px;font-weight:300;line-height:1.5;color:var(--muted)}
.lede-w{color:var(--fg)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums;line-height:1.5}

/* Buttons: Pill, primaer in Textfarbe gefuellt */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--head);font-weight:700;font-size:16px;line-height:1.2;padding:15px 26px;border-radius:999px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:opacity 200ms var(--ease)}
.btn:hover{text-decoration:none;opacity:.86}
.btn-fill{background:var(--fg);color:var(--btn-fg);border-color:var(--fg)}
.btn-line{border-color:var(--line2);color:var(--fg);padding:14px 24px;gap:10px}
.btn-line:hover{opacity:1;border-color:var(--fg)}
.btn-sm{font-size:15px;padding:11px 22px}
.btn .ico{flex:none}

/* Navigation: Glas, sticky */
.nav{position:sticky;top:0;z-index:10;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.08)}
.t-cream .nav{background:rgba(246,243,236,.8);border-bottom-color:var(--line)}
.nav-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 40px;padding-top:18px;padding-bottom:18px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand:hover{text-decoration:none}
.brand .h{font-size:22px;letter-spacing:-.015em}
.brand-by{font-size:13px;color:var(--faint)}
.nav nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px;font-size:15px}
.nav-l[aria-current]{text-decoration:underline;text-underline-offset:4px}

/* Startseite */
.hero{padding-top:120px;padding-bottom:64px}
.hero-a{padding-bottom:96px}
.hero-r{padding-bottom:12px}
.hero-pic{padding-bottom:120px}
.hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:70% 50%}
.r12{border-radius:12px}
.intro{padding-top:24px}
.film .zrm-video{border-radius:12px;overflow:hidden;background:#000}
.avatar-img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;background:#000}
.hq-img{width:100%;aspect-ratio:16/10;object-fit:cover}
.list{display:flex;flex-direction:column}
.list .cell{padding-right:0}
.list .cell:last-child{border-bottom:1px solid var(--line)}
.cell{display:flex;flex-direction:column;gap:12px;padding:32px 32px 40px 0;border-top:1px solid var(--line);min-width:0}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.feats{padding-top:24px}

/* 8 Gruende: <details>, auf dem Desktop immer offen (sa.js), Text steht vollstaendig im HTML */
.feat-list{border-bottom:1px solid var(--line)}
.feat{border-top:1px solid var(--line)}
.feat summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:36px minmax(0,1fr) 16px;align-items:center;gap:8px;padding:16px 0;min-height:44px}
.feat summary::-webkit-details-marker{display:none}
.feat summary .h{font-size:20px;line-height:1.15;letter-spacing:-.012em;margin:0}
.feat .tog{color:var(--fg)}
.feat[open] .tog .v{display:none}
.feat p{margin:0 0 20px 44px}
@media (min-width:821px){
  .feat{display:flow-root;padding:32px 0}
  .feat summary{float:left;width:calc(80px + 64px + (100% - 80px - 64px) * 4 / 9);display:grid;grid-template-columns:80px minmax(0,1fr);gap:32px;padding:0 32px 0 0;min-height:0;align-items:start}
  .feat summary .mono{padding-top:6px}
  .feat summary .h{font-size:30px;line-height:1.08;letter-spacing:-.015em}
  .feat .tog{display:none}
  .feat p{margin:0 0 0 calc(80px + 64px + (100% - 80px - 64px) * 4 / 9)}
  .feats-static .feat summary{cursor:default}
}

/* Ueber uns */
.gallery{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:24px}
.gallery img{width:100%;object-fit:cover}
.g-a{grid-row:span 2;height:100%}
.g-b,.g-c{aspect-ratio:1}
.g-d{grid-column:span 2;aspect-ratio:2/1}
.portrait{width:100%;aspect-ratio:4/5;object-fit:cover}
.quote{display:flex;flex-direction:column;gap:32px}
.quote figcaption{display:flex;flex-direction:column;gap:2px}
.quote figcaption .h{font-size:18px}
.quote figcaption .muted{font-size:15px}
.history{padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px}
.history li{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid var(--inp)}
.history li:first-child{border-top-color:var(--fg)}
.history .mono{color:var(--fg)}
.cta-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px}

/* Kontakt und Formular: Inputs nur Unterstrich */
.facts{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px 32px;padding-top:32px;border-top:1px solid var(--line)}
.facts dt{padding-top:4px}
.contact-form{padding-top:44px}
.form{display:flex;flex-direction:column;gap:6px}
.form .field{font-size:14px;color:var(--muted);margin-top:18px}
.form .field:first-of-type{margin-top:0}
.form .opt{color:var(--faint);font-size:13px}
.inp{width:100%;background:transparent;border:0;border-bottom:1px solid var(--inp);border-radius:0;color:var(--fg);font:inherit;font-size:17px;padding:10px 0;outline:none;-webkit-appearance:none;appearance:none}
.inp:focus{border-bottom-color:var(--fg)}
.inp:focus-visible{outline:none;box-shadow:0 1px 0 0 var(--fg)}
textarea.inp{resize:vertical;min-height:120px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.5;margin-top:24px}
.consent input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--fg)}
.consent a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.form .btn{align-self:flex-start;margin-top:24px;font-family:var(--head);font-size:16px;padding:16px 28px}
.form .btn[disabled]{opacity:.6;cursor:progress}
.form-msg{font-size:17px;margin-top:16px}
.form-msg a{text-decoration:underline;text-underline-offset:3px}
.form-done{font-family:var(--head);font-weight:700;font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-.012em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Impressum, Datenschutz */
.legal-head{padding-bottom:48px}
.note{font-size:16px;color:var(--muted)}
.secs{max-width:1000px;border-bottom:1px solid var(--line)}
.sec{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;padding:20px 0;border-top:1px solid var(--line)}
.sec h2{padding-top:5px}
.sec p+p{margin-top:12px}
.sec a{text-decoration:underline;text-underline-offset:3px}
.simple{min-height:50vh;align-items:flex-start}

/* Fusszeile */
.foot{padding-top:64px;padding-bottom:48px;display:flex;flex-direction:column;gap:48px}
.foot-claim{font-size:clamp(26px,2.4vw,34px);line-height:1;letter-spacing:-.015em}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:15px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
.foot-s{background:#000;color:rgba(255,255,255,.46)}
.foot-s-in{padding-top:32px;padding-bottom:40px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;font-size:13px}
.foot-s .foot-nav{gap:12px 24px;font-size:13px}
.foot-s a{color:rgba(255,255,255,.62)}
.foot-s a:hover{color:#fff}

/* Player von film: grosser Knopf wie in der Vorlage (weisse Pille) */
.zrm-video .zrm-big{left:32px;bottom:32px;background:#fff;color:#000;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;min-height:0;padding:14px 24px 14px 20px;gap:12px;font-family:var(--head);font-weight:700;font-size:16px}
.zrm-video .zrm-big:hover{background:#fff}
.zrm-video .zrm-dot{width:auto;height:auto;background:none;color:#000}
.zrm-video .zrm-dot svg{width:14px;height:14px;margin:0;fill:#000;stroke:none}
.zrm-video .zrm-bigdur{color:rgba(0,0,0,.55);font-family:var(--mono);font-weight:400;font-size:13px}

/* Einblenden: hoechstens Fade + 20 px, 700 ms */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.btn{transition:none}}

/* Tablet */
@media (max-width:1100px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .history{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
}
/* Mobil: Wortmarke + Kontakt-Button, Sprungmarken entfallen */
@media (max-width:820px){
  body{font-size:16px;line-height:1.55}
  html{scroll-padding-top:72px}
  .nav-in{padding:14px 20px}
  .brand .h{font-size:20px}
  .brand-by,.nav-l{display:none}
  .btn-sm{font-size:14px;padding:11px 18px}
  .wrap{padding-left:20px;padding-right:20px}
  .pad{padding-top:56px;padding-bottom:56px}
  .pad-b{padding-bottom:56px}
  .pad-t{padding-top:48px;padding-bottom:56px}
  .pad-s{padding-top:56px;padding-bottom:56px}
  .split,.split45{grid-template-columns:minmax(0,1fr);gap:20px}
  .g64{gap:32px}
  .s64,.s80{gap:28px}
  .rule{padding-top:0;border-top:0}
  .lede{font-size:18px}
  .d1{font-size:42px;line-height:.98}
  .d1a{font-size:34px;line-height:1.02}
  .d2{font-size:34px;line-height:1}
  .d2m{font-size:28px}
  .d3{font-size:22px}
  .mono{font-size:12px}
  .cell{gap:8px;padding:20px 0}
  .grid3,.grid2{grid-template-columns:minmax(0,1fr)}
  .grid3 .cell:last-child,.grid2 .cell:last-child{border-bottom:1px solid var(--line)}
  .hero{padding-top:48px;padding-bottom:32px}
  .hero-a{padding-bottom:40px}
  .hero-r{padding-bottom:0}
  .hero .split{gap:28px}
  .hide-m{display:none}
  .btn{font-size:15px;padding:13px 20px}
  .hero-pic{padding-left:0;padding-right:0;padding-bottom:0}
  .hero-img{aspect-ratio:4/5;object-position:74% 50%;border-radius:0}
  .intro{padding-top:56px}
  .feats{padding-top:0}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .g-a{grid-row:auto;grid-column:span 2;height:auto;aspect-ratio:4/3}
  .history{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .facts{grid-template-columns:minmax(0,1fr);gap:4px}
  .facts dd{margin-bottom:16px}
  .contact-form{padding-top:16px}
  .form .btn{align-self:stretch;justify-content:center;min-height:48px}
  .sec{grid-template-columns:minmax(0,1fr);gap:8px;padding:16px 0}
  .legal-head{padding-bottom:28px}
  .foot{padding-top:32px;padding-bottom:40px;gap:24px}
  .foot .split{gap:16px}
  .foot-nav a{padding:10px 0}
  .foot-nav{gap:0 20px;font-size:14px}
  .zrm-video .zrm-big{left:12px;bottom:12px;font-size:14px;padding:10px 16px 10px 14px;gap:8px}
}