/* Daniel Rowan — Redesign-Vorschlag Fassung 7 „Bis zum Meer“ · 12.10.2026
   Farben und Schrift wie live: Creme + Rot, Inter lokal. Keine dunklen Flächen, kein Gelb.
   Bewegung: einmalig, weich, an den Scroll nur interpoliert gekoppelt; Fließtext bewegt sich nie.
   Ohne JavaScript oder bei „Bewegung reduzieren“ ist alles sofort sichtbar und ruhig. */

@font-face{font-family:"Inter";src:url("../fonts/inter-roman.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --paper:#f2eee5;
  --sheet:#faf8f3;
  --ink:#1b1a17;
  --muted:#6f6a61;
  --line:#cfc8ba;
  --faint:#cbc3b4;
  --red:#b63f2d;
  --sans:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(1.25rem,4vw,4rem);
  --measure:96rem;
  --mh:4.5rem;
  /* nur drei Titelgrößen */
  --t1:clamp(2.5rem,4.6vw,4.9rem);
  --t2:clamp(1.9rem,3vw,3.1rem);
  --t3:clamp(1.3rem,1.6vw,1.6rem);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--mh) + 1rem)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.62;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:450;letter-spacing:-.03em;text-wrap:balance}
p{text-wrap:pretty}
.skip-link{position:absolute;left:1rem;top:-10rem;z-index:40;padding:.7rem 1rem;background:var(--sheet);color:var(--ink);border:1px solid var(--red);font-size:.85rem}
.skip-link:focus{top:1rem}

.frame{width:min(100% - 2*clamp(.5rem,1.6vw,1.5rem),var(--measure));margin:clamp(.5rem,1.6vw,1.5rem) auto;background:var(--sheet);border:1px solid var(--line)}
.pad{padding-inline:var(--gutter)}
.label{margin:0;font-size:.7rem;font-weight:760;letter-spacing:.19em;text-transform:uppercase;line-height:1.4;color:var(--red)}
.label .dim{color:var(--muted)}
.cap{font-size:.74rem;line-height:1.5;color:var(--muted)}
.cap a{text-decoration-color:var(--line)}

/* Bild-Detail: 3 % Zoom beim Überfahren */
.zoom{display:block;overflow:hidden;background:var(--paper)}
.zoom img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
a:hover .zoom img,a:focus-visible .zoom img,a.zoom:hover img{transform:scale(1.035)}

/* Links mit Linie, die sich von links zeichnet */
.read{display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:720;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding-bottom:.35rem;background:linear-gradient(var(--red),var(--red)) 0 100%/0 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat;transition:background-size .6s var(--ease),color .3s}
.read .arr{display:inline-block;transition:transform .5s var(--ease)}
.read:hover,.read:focus-visible{color:var(--red);background-size:100% 2px,100% 1px}
.read:hover .arr,.read:focus-visible .arr{transform:translateX(5px)}
.quiet{font-size:.74rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none}
a.quiet:hover{color:var(--red)}
.links{display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem 1.6rem;margin-top:1.6rem}

/* ---------- Kopfzeile (bleibt oben stehen) ---------- */
.masthead{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem 2.5rem;height:var(--mh);background:var(--sheet);border-bottom:1px solid var(--line)}
.masthead h1.brand{display:contents}
.wordmark{font-size:.95rem;font-weight:780;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.masthead .tag{font-size:.68rem;font-weight:650;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;align-items:center;gap:.4rem 1.6rem}
.nav a{font-size:.74rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--muted);transition:color .3s}
.nav a:hover,.nav a:focus-visible{color:var(--red)}
.nav .lang{padding-left:1.6rem;border-left:1px solid var(--line);font-size:.74rem;font-weight:650;letter-spacing:.08em;color:var(--muted)}
.lang [aria-current]{color:var(--ink);border-bottom:1px solid currentColor}
.lang a{text-decoration:none}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- Cover ---------- */
.cover{position:relative}
.cover-media{position:relative;height:min(calc(100vh - var(--mh)),58rem);min-height:32rem;overflow:hidden;background:var(--paper)}
.cover-media .px{position:absolute;inset:-7% 0;will-change:transform}
.cover-media a{display:block;height:100%}
.cover-media img{width:100%;height:100%;object-fit:cover;object-position:62% 45%}
.cover-card{position:absolute;z-index:2;left:var(--gutter);top:clamp(2rem,6vh,4.5rem);width:min(40rem,calc(100% - 2*var(--gutter)));padding:clamp(1.6rem,2.8vw,2.6rem);background:var(--sheet);border-top:4px solid var(--red);box-shadow:0 40px 70px -40px rgba(27,26,23,.45)}
.cover-card h2{font-size:var(--t1);line-height:1;margin:.9rem 0 1rem}
.cover-card h2 a{text-decoration:none}
.cover-card .standfirst{margin:0;font-size:1.2rem;line-height:1.45;color:var(--muted);max-width:32rem}
.cover-credit{position:absolute;z-index:2;right:var(--gutter);bottom:.9rem;max-width:min(30rem,40%);margin:0;padding:.4rem .65rem;background:rgba(250,248,243,.9);font-size:.68rem;line-height:1.45;color:var(--muted)}

/* ---------- Leitsatz ---------- */
.manifest{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2rem clamp(2rem,6vw,6rem);align-items:end;padding-block:clamp(4.5rem,10vw,9rem);border-bottom:1px solid var(--line)}
.manifest h2{font-size:var(--t1);line-height:1.02;letter-spacing:-.035em;margin-top:1.2rem}
.manifest h2 .w{transition:color .6s var(--ease)}
.manifest .intro{margin:0 0 1.6rem;font-size:1.22rem;line-height:1.55;color:var(--muted)}

/* ---------- Die Schlei-Strecke ---------- */
.schlei{position:relative;border-bottom:1px solid var(--line);background:var(--paper)}
.schlei-pin{padding-block:clamp(4rem,8vw,7rem)}
.schlei-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,4vw,3.5rem);padding-inline:var(--gutter)}
.schlei-intro{grid-column:1/-1;max-width:40rem}
.schlei-intro h2{font-size:var(--t2);line-height:1.06;margin:1rem 0 1rem}
.schlei-intro p:not(.label){margin:0;color:var(--muted);font-size:1.1rem}
.route{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .8rem;margin-top:1.6rem;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.route i{flex:1 1 1.2rem;max-width:9rem;height:1px;background:var(--line)}
.route b{color:var(--red);font-weight:760}
.stop figure{margin:0}
.stop .frameimg{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--sheet)}
.stop.tall .frameimg{aspect-ratio:3/4}
.stop .frameimg .px{display:block;height:100%;will-change:transform}
.stop .frameimg img{width:100%;height:100%;object-fit:cover}
.stop .cap{margin-top:.6rem}
.stop .label{margin-top:1.4rem}
.stop h3{font-size:var(--t3);line-height:1.15;margin:.6rem 0 .6rem}
.stop h3 a{text-decoration:none}
.stop h3 a:hover{color:var(--red)}
.stop p.sf{margin:0;color:var(--muted);max-width:34rem}

/* Querfahrt nur auf großen Bildschirmen (Klasse .hz setzt das Skript) */
.schlei.hz .schlei-pin{position:sticky;top:var(--mh);height:calc(100vh - var(--mh));padding:0;overflow:hidden;display:flex;align-items:center}
.schlei.hz .schlei-track{display:flex;align-items:center;gap:clamp(3rem,5vw,6rem);padding-inline:var(--gutter) 12vw;will-change:transform}
.schlei.hz .schlei-intro{flex:0 0 min(30rem,32vw)}
.schlei.hz .stop{flex:0 0 auto;width:min(46rem,46vw)}
.schlei.hz .stop.tall{width:min(30rem,30vw)}
.schlei.hz .stop .frameimg{height:min(56vh,34rem);aspect-ratio:auto}
.schlei.hz .stop .frameimg .px{width:116%;margin-left:-8%}

/* ---------- Weiter weg ---------- */
.section{padding-block:clamp(4.5rem,9vw,8rem);border-bottom:1px solid var(--line)}
.tint{background:var(--paper)}
.feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,5vw,5.5rem);align-items:center}
.feature figure{margin:0}
.feature .media{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--paper)}
.feature .media .px{display:block;height:116%;margin-top:-8%;will-change:transform}
.feature .media img{width:100%;height:100%;object-fit:cover;object-position:center 72%}
.feature h2{font-size:var(--t2);line-height:1.06;margin:1rem 0}
.feature h2 a{text-decoration:none}
.feature .standfirst{margin:0;font-size:1.15rem;line-height:1.5;color:var(--muted)}
.quote{position:relative;margin:2.2rem 0 0;padding-left:2.2rem}
.quote::before{content:"“";position:absolute;left:0;top:-.35em;font-size:3.4rem;line-height:1;color:var(--red)}
.quote p{margin:0;font-size:var(--t3);line-height:1.3;letter-spacing:-.02em}
.quote cite{display:block;margin-top:.8rem;font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.head h2{font-size:var(--t2);line-height:1.06;margin-top:1rem}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.card > a{display:block;text-decoration:none}
.card .zoom{aspect-ratio:4/3}
.card .label{display:flex;justify-content:space-between;margin-top:1.2rem}
.card h3{font-size:var(--t3);line-height:1.15;margin:.6rem 0 .5rem;transition:color .3s}
.card > a:hover h3{color:var(--red)}
.card p{margin:0;color:var(--muted)}
.card .more{display:flex;gap:1.4rem;margin-top:1rem;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.card .more a{text-decoration:none}
.card .more a:first-child{color:var(--red)}

/* ---------- Über, Aufträge, Kontakt ---------- */
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.portrait{margin:0}
.portrait .media{overflow:hidden;aspect-ratio:4/5}
.portrait .media .px{display:block;height:114%;margin-top:-7%;will-change:transform}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait .cap{display:flex;justify-content:space-between;gap:1rem;margin-top:.6rem}
.about h2{font-size:var(--t2);line-height:1.06;margin:1rem 0 1.4rem}
.about .large{font-size:1.25rem;line-height:1.55;margin:0 0 1.2rem}
.about .s{color:var(--muted);margin:0 0 1rem;max-width:36rem}
.signoff{display:flex;align-items:center;gap:1.2rem;margin-top:2rem}
.stamp{display:grid;place-items:center;width:3.4rem;height:3.4rem;border:1.5px solid var(--red);border-radius:50%;color:var(--red);font-size:.8rem;font-weight:780;letter-spacing:.12em;transform:rotate(-8deg)}
.signoff p{margin:0;font-weight:600;line-height:1.35}

.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.terms article{padding-top:1.4rem;border-top:1px solid var(--ink)}
.terms .no{font-size:.8rem;font-weight:760;color:var(--red)}
.terms h3{font-size:var(--t3);margin:.7rem 0 .6rem}
.terms p{margin:0;color:var(--muted)}

.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 5rem;align-items:end}
.contact-grid h2{font-size:var(--t2);line-height:1.06;margin-top:1rem}
.contact-grid p{margin:0;color:var(--muted);font-size:1.1rem}
.mail{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.2rem;font-size:var(--t2);letter-spacing:-.03em;text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(var(--red),var(--red)) 0 100%/0 3px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat;transition:background-size .8s var(--ease),color .3s}
.mail .arr{display:inline-block;color:var(--red);transition:transform .6s var(--ease)}
.mail:hover,.mail:focus-visible{color:var(--red);background-size:100% 3px,100% 1px}
.mail:hover .arr,.mail:focus-visible .arr{transform:translate(6px,-6px)}

/* ---------- Fußzeile (mit der Randbemerkung) ---------- */
.colophon{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1rem;align-items:center;padding-block:1.8rem;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.colophon .aside{text-transform:none;letter-spacing:.01em;font-size:.82rem;cursor:default}
.colophon .aside .then{display:none}
.colophon .aside:hover .now,.colophon .aside:focus .now{display:none}
.colophon .aside:hover .then,.colophon .aside:focus .then{display:inline;color:var(--red)}
.colophon .legal{justify-self:end;display:flex;gap:1.4rem;flex-wrap:wrap}
.colophon a{text-decoration:none}
.colophon a:hover{color:var(--red)}

/* ================= Bewegung (nur mit .js) ================= */
.js [data-fill] .w{color:var(--faint)}
.js [data-fill] .w.on{color:var(--ink)}
.js [data-fill] .w.on.last{color:var(--red)}
.js .words .w{display:inline-block;opacity:0;transform:translateY(.45em);animation:wordIn .9s var(--ease) forwards;animation-delay:calc(.25s + var(--i)*55ms)}
@keyframes wordIn{to{opacity:1;transform:none}}
.js .cover-media img{animation:coverIn 2.6s var(--ease) both}
@keyframes coverIn{from{transform:scale(1.1)}to{transform:none}}
.js .cover-card{animation:rise 1.1s var(--ease) .15s both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}


.js [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--d,0)*110ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-wipe]{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease);transition-delay:calc(var(--d,0)*110ms)}
.js [data-wipe].in{clip-path:inset(0 0 0 0)}
.js [data-wipe] > .px,.js [data-wipe] > a > .px{transition:scale 1.8s var(--ease);scale:1.12}
.js [data-wipe].in > .px,.js [data-wipe].in > a > .px{scale:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .zoom img{transform:none!important}
}

/* ================= Tablet / Handy ================= */
@media (max-width:980px){
  .masthead .tag{display:none}
  .masthead{grid-template-columns:auto minmax(0,1fr)}
  .nav{justify-self:end}
  .nav > a:not(.keep){display:none}
  .manifest,.feature,.about,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .cards,.terms{grid-template-columns:minmax(0,1fr)}
  .cards{gap:3rem}
}
@media (max-width:760px){
  :root{--mh:3.9rem}
  .wordmark{font-size:.82rem;letter-spacing:.14em}
  .cover-media{height:62vh;min-height:24rem}
  .cover-card{position:relative;left:auto;top:auto;width:auto;margin:-4.5rem var(--gutter) 0}
  .cover-credit{position:static;max-width:none;padding:.9rem var(--gutter) 0;background:none}
  .schlei-track{grid-template-columns:minmax(0,1fr)}
  .stop.tall .frameimg{aspect-ratio:4/5}
  .colophon{grid-template-columns:minmax(0,1fr)}
  .colophon .legal{justify-self:start}
}

/* ---------- Rechtstexte ---------- */
.legal-page{width:min(100% - 2*var(--gutter),48rem);margin:0 auto;padding-block:clamp(3rem,7vw,6rem) clamp(4rem,8vw,7rem);font-size:1.05rem;line-height:1.75}
.legal-page .section-label{margin:0 0 1rem;font-size:.7rem;font-weight:760;letter-spacing:.19em;text-transform:uppercase;color:var(--red)}
.legal-page h1{font-size:var(--t1);line-height:1;margin:0 0 2rem}
.legal-page h2{font-size:var(--t3);line-height:1.2;margin:3rem 0 1rem}
.legal-page h3{font-size:1.1rem;margin:2rem 0 .75rem}
.legal-page address{font-style:normal;margin:0 0 2rem}
.legal-page a{text-decoration-color:var(--red);overflow-wrap:anywhere}
.legal-page .legal-note{border-top:1px solid var(--line);padding-top:1.5rem;margin-top:3rem}