/* ==========================================================================
   Frei nach Plan — Design-System
   Übersetzt die Inline-Styles der Design-Vorlagen (Home/Arbeiten/UeberUns/
   Journal/Kontakt.dc.html) in Tokens und wiederverwendbare Klassen.
   ========================================================================== */

/* ── Fonts (self-hosted, DSGVO-konform) ─────────────────────────────────── */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/Inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/Inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/assets/fonts/JetBrainsMono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/assets/fonts/JetBrainsMono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  --accent:#ea580c;
  --ink:#18181b;
  --ink-soft:#3f3f46;
  --muted:#71717a;
  --faint:#a1a1aa;
  --line:rgba(0,0,0,0.08);
  --surface:#f4f4f5;
  --surface-2:#e4e4e7;
  --bg:#ffffff;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:4vw;
  --max:1800px;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* Muss die Klassenregeln (z. B. .notice{display:flex}) schlagen. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,figure{margin:0}
button,input,textarea,select{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:.75rem 1.25rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;
}
.skip:focus{left:0}

/* ── Bausteine ──────────────────────────────────────────────────────────── */
.wrap{max-width:var(--max);margin:0 auto}
.mono{font-family:var(--mono)}
.eyebrow{
  display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--muted);font-weight:500;
}
.accent{color:var(--accent)}
.rule{border-top:1px solid var(--line)}

.btn{
  display:inline-flex;align-items:center;gap:.75rem;background:var(--ink);color:#fff;
  text-decoration:none;padding:1.1rem 2.2rem;font-size:.75rem;text-transform:uppercase;
  letter-spacing:.15em;font-weight:500;border:none;cursor:pointer;
  transition:background .18s ease;
}
.btn:hover,.btn:focus-visible{background:var(--accent)}

/* Bild-Slots: echtes Bild, Video oder Platzhalter in Design-Sprache */
.shot{position:absolute;inset:0;overflow:hidden;background:var(--surface)}
.shot img,.shot video,.shot iframe{width:100%;height:100%;object-fit:cover;display:block}
.shot iframe{border:0}

/* Eingebettetes Video: bis zum Klick nur Vorschaubild und Abspieltaste —
   an dieser Stelle war noch kein Request an Vimeo oder YouTube nötig. */
.embed{cursor:pointer}
.embed .embed__poster{position:absolute;inset:0}
.embed__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:72px;height:72px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(24,24,27,.72);color:#fff;backdrop-filter:blur(2px);
  transition:background .18s ease,transform .18s ease;
}
.embed:hover .embed__play,.embed__play:focus-visible{background:var(--accent);transform:translate(-50%,-50%) scale(1.06)}
.embed__play svg{margin-left:3px}
.shot--empty{display:flex;align-items:center;justify-content:center;background:var(--surface-2)}
/* In Kacheln bleibt der Platzhalter transparent, damit die Kachelfarbe wirkt. */
.tile .shot--empty{background:transparent}
.shot--empty span{
  font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--faint);text-align:center;padding:1rem;
}
/* Abdunklung nur im unteren Streifen, wo die Beschriftung liegt — darüber bleibt
   das Bild unangetastet und sieht aus wie unter „Arbeiten". */
.shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.55) 100%)}
.shade--soft{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}

/* ── Film-Korn / Flackern ───────────────────────────────────────────────── */
@keyframes fnp-flicker{
  0%{opacity:.03}8%{opacity:.08}9%{opacity:.02}20%{opacity:.06}32%{opacity:.02}
  40%{opacity:.09}52%{opacity:.03}60%{opacity:.07}70%{opacity:.02}82%{opacity:.08}
  90%{opacity:.03}100%{opacity:.05}
}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:1;mix-blend-mode:multiply;opacity:.05;
  animation:fnp-flicker .4s steps(2) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;left:0;width:100%;display:flex;justify-content:space-between;
  align-items:center;padding:2rem var(--pad);z-index:100;
  background:rgba(255,255,255,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.nav__brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink)}
.nav__brand svg,.nav__logo{display:block;flex:0 0 auto}
.nav__logo{width:auto;max-width:280px;object-fit:contain}
.nav__brand span{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;
}
.nav__links{display:flex;gap:1rem;align-items:center}
.nav__links a{
  text-decoration:none;color:var(--ink);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:500;white-space:nowrap;transition:color .15s ease;
}
.nav__links a:hover{color:var(--accent)}
.nav__links a[aria-current="page"]{color:var(--accent)}
.nav__links a.is-cta{color:var(--accent)}
.nav__links a.is-cta:hover{color:var(--ink)}
.nav__toggle{
  display:none;background:none;border:none;padding:.5rem;cursor:pointer;color:var(--ink);
  font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;
}

.page{position:relative;min-height:100vh}
main{position:relative;z-index:2}

/* ── Hero (Startseite) ──────────────────────────────────────────────────── */
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad) 8vh;max-width:var(--max);margin:0 auto;
}
.hero__row{display:flex;gap:2.5rem;align-items:stretch}
/* Ohne Medium daneben trägt die Typografie die Fläche allein. */
.hero__row--solo .hero__lead{max-width:52ch;font-size:1.25rem}
/* Film als breites Band unter dem Text — auf dem Telefon bleibt er dadurch
   groß genug, statt neben der Überschrift zur Briefmarke zu schrumpfen. */
.hero__film{position:relative;width:100%;overflow:hidden;margin-top:3.5rem;background:var(--surface)}
.hero__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
.hero__text .eyebrow{margin-bottom:2rem}
.hero__title{
  font-size:clamp(2.2rem,5.5vw,6rem);letter-spacing:-.04em;text-transform:uppercase;
  font-weight:500;line-height:.98;
}
.hero__word{color:var(--accent);display:inline-block;transition:opacity .25s ease}
.hero__lead{max-width:620px;font-size:1.15rem;color:var(--muted);margin-top:2rem}

.diptych{flex:0 0 clamp(240px,34vw,460px);align-self:stretch;display:flex;gap:.4rem}
.diptych__tile{flex:1 1 0;position:relative;overflow:hidden;min-height:240px}
.diptych__tile--offset{margin-top:2.5rem}
.diptych__top{
  position:absolute;top:1.2rem;left:1.2rem;right:1.2rem;display:flex;
  justify-content:space-between;pointer-events:none;z-index:2;
}
.diptych__top span:first-child{
  font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.85);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.diptych__cap{
  position:absolute;bottom:1.2rem;left:1.2rem;right:1.2rem;font-family:var(--mono);
  font-size:.7rem;color:rgba(255,255,255,.9);pointer-events:none;z-index:2;
}

.metabar{
  display:flex;justify-content:space-between;border-top:1px solid var(--line);
  padding-top:1rem;margin-top:4rem;flex-wrap:wrap;gap:2rem;
}
.metabar div{display:flex;flex-direction:column;gap:.25rem}
.metabar .val{font-family:var(--mono);font-size:.75rem}

/* ── Leistungs-/Prozess-Liste ───────────────────────────────────────────── */
.split{
  padding:12vh var(--pad);max-width:var(--max);margin:0 auto;display:flex;gap:3rem;flex-wrap:wrap;
}
.split--rule{border-top:1px solid var(--line)}
.split__head{flex:0 0 260px;display:flex;flex-direction:column;gap:1rem}
.split__head h2{font-size:1.8rem;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.split__body{flex:1 1 480px;border-top:1px solid var(--line)}

.row{
  display:grid;grid-template-columns:.5fr 3fr 2fr;align-items:center;padding:1.75rem 0;
  border-bottom:1px solid var(--line);gap:1rem;cursor:crosshair;
  transition:background-color .15s ease,padding-left .15s ease;
}
.row:last-child{border-bottom:none}
.row:hover{background-color:var(--surface-2);padding-left:1rem}
.row__num{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.row h3{font-size:1.5rem;text-transform:uppercase;font-weight:500}
.row p{color:var(--muted);font-family:var(--mono);font-size:.8rem;max-width:280px;justify-self:end}
.split--process .row h3{font-size:1.4rem}

/* ── Arbeiten-Grid ──────────────────────────────────────────────────────── */
.section{padding:12vh var(--pad);max-width:var(--max);margin:0 auto}
.section--tight{padding-top:0}
.section__head{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2rem;
  flex-wrap:wrap;gap:1rem;
}
.section__head a{font-family:var(--mono);font-size:.8rem;color:var(--ink);text-decoration:none}
.section__head a:hover{color:var(--accent)}

.grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:2px;background:var(--line);
  border:1px solid var(--line);
}
.tile{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;padding:2rem;text-decoration:none;background:var(--surface);
}
.tile--dark{background:var(--ink)}
.tile--accent{background:var(--accent)}
/* Die Tonfarbe ist der Hintergrund der Kachel — sie darf ein vorhandenes Bild
   nicht einfärben. Sonst sähe dasselbe Bild auf der Startseite anders aus als
   unter „Arbeiten". Sichtbar wird sie nur dort, wo kein Bild liegt. */
.tile--accent .shot{opacity:1}
.tile__kicker{
  position:relative;z-index:2;font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;
  color:rgba(255,255,255,.85);font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.tile__foot{
  position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;
  gap:1rem;pointer-events:none;
}
/* Der leichte Schatten trägt die Lesbarkeit auf hellen Bildern mit — dadurch
   darf die Abdunklung dezent bleiben. */
.tile__foot h3{
  color:#fff;text-transform:uppercase;font-size:1.5rem;font-weight:500;max-width:70%;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.tile__foot span{
  color:rgba(255,255,255,.85);font-family:var(--mono);font-size:.75rem;text-align:right;
  white-space:nowrap;text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.tile:hover .shot img{transform:scale(1.03)}
.shot img{transition:transform .5s ease}

/* Ohne Bild fehlt die Abdunklung — Beschriftung muss dann dunkel bleiben. */
.tile--noimg:not(.tile--dark):not(.tile--accent) .tile__kicker{color:var(--muted);text-shadow:none}
.tile--noimg:not(.tile--dark):not(.tile--accent) .tile__foot h3{color:var(--ink);text-shadow:none}
.tile--noimg:not(.tile--dark):not(.tile--accent) .tile__foot span{color:var(--muted);text-shadow:none}
.diptych__tile.is-empty .diptych__top span:first-child,
.diptych__tile.is-empty .diptych__cap{color:var(--muted)}

/* ── Landingpages ───────────────────────────────────────────────────────── */
.hero--lp{min-height:92vh}
.hero__actions{display:flex;gap:1rem;margin-top:2.5rem;flex-wrap:wrap}
.btn--outline{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--outline:hover,.btn--outline:focus-visible{background:var(--surface-2);color:var(--ink)}

.hero__aside{
  flex:0 0 clamp(200px,26vw,340px);align-self:stretch;position:relative;overflow:hidden;
  min-height:260px;
}
.hero__aside.is-empty .diptych__cap{color:var(--muted)}

.section__head--wide{margin-bottom:3rem}
.section__title{font-size:1.8rem;font-weight:500;letter-spacing:-.02em}

/* Karten-Raster für „Ablauf“ und „Preise“ — Fugen wie im Projekt-Raster. */
.cards{
  display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);
}
.cards__item{background:#fff;padding:2rem;display:flex;flex-direction:column;gap:1rem}
.cards__item h3{font-size:1.1rem;font-weight:500}
.cards__item p{color:var(--muted);font-size:.85rem}
.cards__item--pad{padding:2.5rem;gap:1.25rem}
.cards__item.is-dark{background:var(--ink);color:#fff}
.cards__item.is-dark p{color:#d4d4d8}
.cards__label{
  font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);
}
.cards__item.is-dark .cards__label{color:var(--accent)}
.cards__price{font-size:2.2rem;font-weight:500;letter-spacing:-.02em}
.split__body--prose{padding-top:2rem}
.split__body--prose .prose{padding:0;font-size:1rem}

@media (max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

/* ── Preislisten ────────────────────────────────────────────────────────── */
.pagehead--prices{padding:14vh var(--pad) 8vh}
.pagehead--prices h1{max-width:1100px;font-size:clamp(2.4rem,6vw,6rem);line-height:.98;letter-spacing:-.04em}
.pagehead--prices .hero__lead{margin-top:2rem}
.section--plans{padding-top:6vh}

.plans{
  display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);
}
.plan{
  background:#fff;padding:3rem 2.5rem;display:flex;flex-direction:column;gap:1.5rem;
  position:relative;
}
.plan--dark{background:var(--ink);color:#fff}
.plan__badge{
  position:absolute;top:1.5rem;right:1.5rem;font-family:var(--mono);font-size:.6rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--accent);border:1px solid var(--accent);
  padding:.3rem .6rem;
}
.plan__label{
  font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);
}
.plan--dark .plan__label{color:var(--accent)}
.plan__price{font-size:2.6rem;font-weight:500;letter-spacing:-.02em;display:block}
.plan__period{font-family:var(--mono);font-size:.8rem;color:var(--muted);display:block;margin-top:.25rem}
.plan--dark .plan__period{color:#d4d4d8}
.plan__desc{color:var(--muted);font-size:.9rem}
.plan--dark .plan__desc{color:#d4d4d8}
.plan__features{
  display:flex;flex-direction:column;gap:.75rem;border-top:1px solid var(--line);
  padding-top:1.5rem;margin-top:.5rem;
}
.plan--dark .plan__features{border-top-color:rgba(255,255,255,.15)}
.plan__features span{font-size:.85rem;color:var(--ink-soft)}
.plan__features span.is-out{color:var(--faint)}
.plan--dark .plan__features span{color:var(--surface-2)}
.plan--dark .plan__features span.is-out{color:#a1a1aa}
.plan__btn{
  margin-top:auto;text-align:center;text-decoration:none;background:transparent;color:var(--ink);
  border:1px solid var(--ink);padding:.9rem 1.5rem;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.15em;font-weight:500;transition:background .18s ease,color .18s ease;
}
.plan__btn:hover{background:var(--ink);color:#fff}
.plan--dark .plan__btn{background:var(--accent);color:#fff;border-color:var(--accent)}
.plan--dark .plan__btn:hover{background:#fff;color:var(--ink);border-color:#fff}

/* Kundenzitat */
.quote{display:flex;gap:3rem;align-items:center;flex-wrap:wrap;padding:10vh var(--pad)}
.quote__portrait{
  flex:0 0 clamp(160px,20vw,240px);aspect-ratio:1/1;position:relative;overflow:hidden;
}
.quote__body{flex:1 1 400px;margin:0}
.quote__mark{font-family:var(--mono);font-size:2rem;color:var(--accent);line-height:1}
.quote blockquote{
  font-size:1.4rem;letter-spacing:-.01em;margin:.5rem 0 1.5rem;max-width:640px;
}
.quote__name{font-weight:500;display:block}
.quote__role{font-family:var(--mono);font-size:.8rem;color:var(--muted)}

/* FAQ */
.faq{max-width:1000px;padding:10vh var(--pad) 12vh}
.faq .eyebrow{margin-bottom:3rem}
.faq__list{border-top:1px solid var(--line)}
.faq__item{padding:1.75rem 0;border-bottom:1px solid var(--line)}
.faq__item:last-child{border-bottom:none}
.faq__item h2{font-size:1.1rem;font-weight:500;margin-bottom:.6rem}
.faq__item p{color:var(--muted);font-size:.9rem;max-width:700px}

@media (max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .plan{padding:2.25rem 1.75rem}
  .quote{gap:2rem;padding:8vh var(--pad)}
  .quote blockquote{font-size:1.15rem}
}
@media (max-width:600px){.plans{grid-template-columns:1fr}}

/* ── Arbeiten: Editorial-Liste ──────────────────────────────────────────── */
/* Bewusst anders als das Kachelraster der Startseite: große Zeilen, im
   Wechsel gespiegelt, mit allen Eckdaten direkt daneben. */
.worklist{border-top:1px solid var(--line)}
.workrow{
  display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:center;
  padding:7vh 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.workrow:nth-child(even) .workrow__media{order:2}
.workrow__media{position:relative;min-width:0}
.workrow__body{display:flex;flex-direction:column;gap:1rem;min-width:0}
.workrow__num{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.workrow h2{
  font-size:clamp(1.8rem,4vw,3.4rem);text-transform:uppercase;font-weight:500;
  letter-spacing:-.03em;line-height:1;transition:color .18s ease;
}
.workrow:hover h2{color:var(--accent)}
.workrow__cat{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.workrow__lead{color:var(--muted);max-width:52ch}
.workrow__facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem;
  border-top:1px solid var(--line);padding-top:1.25rem;margin-top:.5rem;
}
.workrow__facts div{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.workrow__facts .val{font-family:var(--mono);font-size:.75rem}
.workrow__link{
  font-family:var(--mono);font-size:.8rem;margin-top:.5rem;transition:color .18s ease;
}
.workrow:hover .workrow__link{color:var(--accent)}
.workrow .frame{background:var(--surface)}
.workrow:hover .shot img{transform:scale(1.03)}

@media (max-width:900px){
  .workrow{grid-template-columns:1fr;gap:1.75rem;padding:5vh 0}
  .workrow:nth-child(even) .workrow__media{order:0}
  .workrow__facts{gap:.75rem 1.5rem}
}
@media (max-width:600px){
  .workrow__facts{grid-template-columns:1fr}
}

/* ── CTA ────────────────────────────────────────────────────────────────── */
.cta{
  padding:14vh var(--pad);border-top:1px solid var(--line);max-width:var(--max);margin:0 auto;
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:2rem;
}
.cta .eyebrow{margin-bottom:1.5rem}
.cta h2{
  font-size:clamp(2rem,5vw,4rem);letter-spacing:-.03em;text-transform:uppercase;
  font-weight:500;line-height:1;white-space:pre-line;
}

/* ── Seitenkopf (Unterseiten) ───────────────────────────────────────────── */
.pagehead{padding:14vh var(--pad) 6vh;max-width:var(--max);margin:0 auto}
.pagehead__row{
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;
  margin-top:1rem;
}
.pagehead h1,.h-xl{
  font-size:clamp(2.5rem,6vw,5rem);letter-spacing:-.03em;text-transform:uppercase;
  font-weight:500;line-height:1.02;white-space:pre-line;
}
.pagehead__meta{font-family:var(--mono);font-size:.85rem;color:var(--muted)}
.pagehead--split{display:flex;gap:4rem;flex-wrap:wrap}
.pagehead--split>*{flex:1 1 460px}
.pagehead--split .lead{font-size:1.1rem;color:var(--muted);align-self:flex-end}

/* ── Über uns: Team ─────────────────────────────────────────────────────── */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem;padding-top:6vh}
.team__photo{width:100%;aspect-ratio:4/5;overflow:hidden;position:relative}
.team__name{margin-top:1.5rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.team__name h2{font-size:1.5rem;font-weight:500;text-transform:uppercase;letter-spacing:-.01em}
.team__name span{font-family:var(--mono);font-size:.75rem;color:var(--muted);white-space:nowrap}
.team p{color:var(--muted);font-family:var(--mono);font-size:.8rem;margin-top:.5rem;max-width:420px}

/* ── Journal-Liste ──────────────────────────────────────────────────────── */
.posts{border-top:1px solid var(--line)}
.post-row{
  display:grid;grid-template-columns:140px .5fr 3fr 2fr;align-items:center;padding:1.5rem 0;
  border-bottom:1px solid var(--line);gap:1.5rem;text-decoration:none;color:var(--ink);
  cursor:crosshair;transition:background-color .15s ease,padding-left .15s ease;
}
.post-row:last-child{border-bottom:none}
.post-row:hover{background-color:var(--surface-2);padding-left:1rem}
.post-row__thumb{width:140px;aspect-ratio:4/3;overflow:hidden;position:relative}
.post-row__date{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.post-row h2{font-size:1.6rem;font-weight:500;letter-spacing:-.01em}
.post-row p{color:var(--muted);font-family:var(--mono);font-size:.8rem;max-width:300px;justify-self:end}
.post-row .badge{
  font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent);border:1px solid var(--accent);padding:.1rem .4rem;margin-left:.5rem;
}

/* ── Artikel / Case ─────────────────────────────────────────────────────── */
.article{max-width:900px;margin:0 auto;padding-top:8vh}
.article__head{padding:4vh var(--pad) 6vh}
.back{font-family:var(--mono);font-size:.75rem;color:var(--muted);text-decoration:none}
.back:hover{color:var(--ink)}
.article__meta{
  margin-top:1.5rem;display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:1rem;font-family:var(--mono);font-size:.75rem;color:var(--muted);
}
.article h1{
  font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.02em;font-weight:500;margin-top:1rem;
  line-height:1.08;
}
.article__cover{padding:0 var(--pad) 6vh}
.frame{width:100%;overflow:hidden;position:relative;background:var(--surface)}
.frame--16x9{aspect-ratio:16/9}
.frame--21x9{aspect-ratio:21/9}
.frame--4x3{aspect-ratio:4/3}
/* Auf Textbreite statt über die ganze Seite — für Videos im Lesefluss. */
.frame--prose{max-width:900px;margin-inline:auto}
.frame__cap{
  font-family:var(--mono);font-size:.75rem;color:var(--muted);
  margin-top:.9rem;text-align:center;
}
.prose{padding:0 var(--pad) 14vh;font-size:1.1rem;color:var(--ink-soft)}
.prose>*+*{margin-top:1.4rem}
.prose h2{font-size:1.5rem;font-weight:500;color:var(--ink);letter-spacing:-.01em;margin-top:2.5rem}
.prose h3{font-size:1.2rem;font-weight:500;color:var(--ink);margin-top:2rem}
.prose a{color:var(--accent)}
.prose ul,.prose ol{padding-left:1.2rem}
.prose li+li{margin-top:.5rem}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--surface);padding:.1em .35em}
/* Offene Platzhalter in Rechtstexten — sollen unübersehbar sein. */
.prose mark{background:#fef08a;color:var(--ink);padding:.05em .3em;font-weight:500}
.prose img{margin:2rem 0}

/* Case-Seite */
.case{max-width:var(--max);margin:0 auto}
.case__head{padding:12vh var(--pad) 4vh}
.case__facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;border-top:1px solid var(--line);
  padding-top:1.5rem;margin-top:3rem;
}
.case__facts div{display:flex;flex-direction:column;gap:.35rem}
.case__facts .val{font-family:var(--mono);font-size:.8rem}
.case__media{padding:0 var(--pad)}
.case__body{max-width:900px;margin:0 auto;padding:8vh var(--pad)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;padding:0 var(--pad) 8vh}
.gallery .frame{aspect-ratio:4/3}
.gallery .frame:first-child:nth-last-child(odd){grid-column:span 2;aspect-ratio:16/9}
.case__next{
  border-top:1px solid var(--line);padding:6vh var(--pad);display:flex;
  justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;
}
.case__next h2{font-size:clamp(1.6rem,4vw,3rem);text-transform:uppercase;font-weight:500;letter-spacing:-.02em}

/* ── Kontakt ────────────────────────────────────────────────────────────── */
.contact{padding:16vh var(--pad) 8vh;max-width:var(--max);margin:0 auto;display:flex;gap:4rem;flex-wrap:wrap}
.contact__left{flex:1 1 500px}
.contact__mail{
  display:inline-block;margin-top:2.5rem;font-size:clamp(1.3rem,4vw,2.8rem);color:var(--ink);
  text-decoration:none;letter-spacing:-.02em;word-break:break-word;
}
.contact__mail:hover{color:var(--accent)}
.contact__facts{
  display:flex;flex-direction:column;gap:.5rem;margin-top:2.5rem;
  border-top:1px solid var(--line);padding-top:1.5rem;
}
.contact__facts span{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.contact__intro{margin-top:1.5rem;color:var(--muted);max-width:520px}
.contact__right{flex:1 1 420px}

.form{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.form>*{width:100%}
.form .btn{width:auto;margin-top:.5rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field>label{font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);font-weight:500}
.field input,.field textarea,.field select{
  border:none;border-bottom:1px solid rgba(0,0,0,.15);background:transparent;padding:.6rem 0;
  font-family:var(--sans);font-size:1rem;color:var(--ink);outline:none;border-radius:0;
}
.field textarea{resize:vertical;min-height:6rem}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;color:var(--muted)}
.consent input{margin-top:.2rem;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{background:var(--surface);padding:3rem 2rem;display:flex;flex-direction:column;gap:1rem}
.notice .kicker{font-family:var(--mono);font-size:.8rem;color:var(--accent)}
.notice p{font-size:1.1rem}
.error{color:#b91c1c;font-size:.85rem;font-family:var(--mono)}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer{
  position:relative;z-index:2;border-top:1px solid var(--line);padding:8vh var(--pad) 4vh;
  max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;gap:6vh;
}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.footer__col{display:flex;flex-direction:column;gap:.9rem}
.footer__col a,.footer__col span.v{
  color:var(--muted);text-decoration:none;font-family:var(--mono);font-size:.8rem;
}
.footer__col a:hover{color:var(--ink)}
.footer__bottom{
  display:flex;justify-content:space-between;align-items:flex-end;
  border-top:1px solid var(--line);padding-top:2rem;flex-wrap:wrap;gap:1rem;
}
.footer__bottom .eyebrow{letter-spacing:.15em}
.wordmark{
  font-size:clamp(4rem,15vw,15rem);line-height:.8;letter-spacing:-.05em;color:var(--surface-2);
  font-weight:500;user-select:none;
}

/* ── Ladeanimation ──────────────────────────────────────────────────────── */
/* Unsichtbar, bis das Inline-Script im <head> `is-loading` setzt. Ohne
   JavaScript bleibt sie damit komplett aus dem Weg. */
.loader{display:none}
html.is-loading{overflow:hidden}
html.is-loading .loader{
  display:flex;position:fixed;inset:0;z-index:300;align-items:center;justify-content:center;
  background:var(--bg);padding:0 var(--pad);
  transition:opacity .35s ease,visibility .35s ease;
}
html.is-loading .loader--dark{background:var(--ink);color:#fff}
.loader.is-done{opacity:0;visibility:hidden}
.loader__line{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .35em;
  font-size:clamp(2rem,7vw,5.5rem);letter-spacing:-.04em;text-transform:uppercase;
  font-weight:500;line-height:1;max-width:1800px;width:100%;
}
.loader__word{color:var(--accent);display:inline-block}
/* Verhindert, dass die Zeile bei langen Wörtern springt. */
@media (min-width:601px){.loader__line{white-space:nowrap}}

/* ── Consent-Banner ─────────────────────────────────────────────────────── */
.consent-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--ink);color:#fff;
  padding:1.25rem var(--pad);display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;
  justify-content:space-between;
}
.consent-bar p{font-size:.85rem;max-width:60ch;color:rgba(255,255,255,.8)}
.consent-bar strong{
  display:block;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.1em;color:#fff;margin-bottom:.35rem;font-weight:500;
}
.consent-bar a{color:var(--accent)}
.consent-bar__actions{display:flex;gap:.75rem;flex-wrap:wrap}
.consent-bar button{
  border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;padding:.7rem 1.4rem;
  font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;font-weight:500;cursor:pointer;
}
.consent-bar button.is-primary{background:var(--accent);border-color:var(--accent)}
.consent-bar button:hover{background:rgba(255,255,255,.12)}
.consent-bar button.is-primary:hover{background:#c2410c}

/* ── Bearbeiten-Knopf (nur für angemeldete Benutzer) ────────────────────── */
.editbtn{
  position:fixed;top:calc(2rem + 40px + .75rem);right:var(--pad);z-index:120;
  display:inline-flex;align-items:center;gap:.45rem;background:var(--ink);color:#fff;
  text-decoration:none;padding:.5rem .85rem;font-size:.62rem;text-transform:uppercase;
  letter-spacing:.12em;font-weight:500;box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:background .18s ease;
}
.editbtn:hover,.editbtn:focus-visible{background:var(--accent)}
.editbtn svg{flex:0 0 auto}
@media (max-width:900px){
  .editbtn{top:calc(1.25rem + 40px + .5rem);padding:.45rem .7rem}
  .editbtn span{display:none}
}
@media print{.editbtn{display:none}}

/* ── Vorschau-Hinweis ───────────────────────────────────────────────────── */
.previewbar{
  position:fixed;left:0;right:0;bottom:0;z-index:160;background:var(--ink);color:#fff;
  padding:.7rem var(--pad);display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.8rem;border-top:3px solid var(--accent);
}
.previewbar__tag{
  font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;
  background:var(--accent);color:#fff;padding:.25rem .5rem;
}
.previewbar__name{font-weight:500}
.previewbar__note{color:rgba(255,255,255,.7)}
.previewbar a{color:var(--accent);margin-left:auto;white-space:nowrap}
/* Platz schaffen, damit die Leiste nichts verdeckt. */
body:has(.previewbar) .footer{padding-bottom:calc(4vh + 4rem)}
@media (max-width:600px){
  .previewbar{gap:.5rem;font-size:.75rem}
  .previewbar__note{flex:1 1 100%}
  .previewbar a{margin-left:0}
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .row{grid-template-columns:.5fr 2.4fr}
  .row p{grid-column:2;justify-self:start;max-width:none;margin-top:.5rem}
  .post-row{grid-template-columns:120px 1fr}
  .post-row__thumb{width:120px}
  .post-row__date{grid-column:2}
  .post-row h2{grid-column:2}
  .post-row p{grid-column:2;justify-self:start;max-width:none}
  .case__facts{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  :root{--pad:6vw}
  .nav{padding:1.25rem var(--pad)}
  .nav__toggle{display:block}
  .nav__links{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;padding:.5rem var(--pad) 1.5rem;
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:.9rem 0;font-size:.8rem;width:100%;border-bottom:1px solid var(--line)}
  .nav__links a:last-child{border-bottom:none}

  .hero,.hero--lp{min-height:auto;padding-top:6vh}
  .hero__row{flex-direction:column;gap:2.5rem}
  .hero__aside{flex:1 1 auto;width:100%;height:56vw;max-height:340px;min-height:0}
  .hero__actions .btn{flex:1 1 auto;justify-content:center}
  .diptych{flex:1 1 auto;width:100%;height:52vw;max-height:380px}
  .diptych__tile{min-height:0}
  .diptych__tile--offset{margin-top:1.5rem}
  .hero__lead{font-size:1.05rem}
  .metabar{margin-top:3rem;gap:1.5rem}

  .split{padding:8vh var(--pad);gap:2rem;flex-direction:column}
  .split__head{flex:1 1 auto}
  .section{padding:8vh var(--pad)}
  .cta{padding:10vh var(--pad)}
  .pagehead{padding:8vh var(--pad) 4vh}
  .article{padding-top:2vh}

  .grid{grid-template-columns:1fr}
  .tile{grid-column:1/-1 !important;aspect-ratio:4/3 !important;padding:1.5rem}
  .team{grid-template-columns:1fr;gap:2.5rem}
  .gallery{grid-template-columns:1fr}
  .gallery .frame:first-child:nth-last-child(odd){grid-column:span 1;aspect-ratio:4/3}
  .footer__cols{grid-template-columns:repeat(2,1fr);gap:2.5rem}
  .contact{padding:8vh var(--pad) 6vh;gap:3rem}
}

@media (max-width:600px){
  .row{grid-template-columns:2.5rem 1fr;gap:.5rem 1rem;padding:1.25rem 0}
  .row h3{font-size:1.15rem}
  .split--process .row h3{font-size:1.15rem}
  .post-row{grid-template-columns:88px 1fr;gap:1rem;padding:1.25rem 0}
  .post-row__thumb{width:88px}
  .post-row h2{font-size:1.15rem}
  .case__facts{grid-template-columns:1fr;gap:1.25rem}
  .footer__cols{grid-template-columns:1fr;gap:2rem}
  .footer{gap:4vh}
  .consent-bar{padding:1rem var(--pad)}
  .consent-bar__actions{width:100%}
  .consent-bar button{flex:1 1 auto}
}

/* ── Rücksicht auf Systemeinstellungen ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .grain{animation:none;opacity:.04}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

@media print{
  .grain,.nav,.consent-bar,.footer{display:none}
}