/* Basti Brune · Visitenkarte
   Idee: Ein Auftrag läuft beim Scrollen durch die Firma, und der Tag wird zum Abend.
   Alles rund, nichts eckig. */

@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin.woff2') format('woff2-variations');font-weight:300 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-ext.woff2') format('woff2-variations');font-weight:300 900;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument';src:url('../fonts/instrument-latin.woff2') format('woff2-variations');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:'Instrument';src:url('../fonts/instrument-latin-ext.woff2') format('woff2-variations');font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#f7f2ea;      /* Karten, immer hell */
  --ink:#231e19;        /* Text */
  --muted:#5f574e;
  --brand:#2c6a61;      /* gedecktes Petrol */
  --brand-soft:#dcebe6;
  --lamp:#f0a868;       /* Sonne am Morgen, Lampen am Abend */
  --line:#e4dacb;
  --sky-a:#f4eee4; --sky-b:#efe2cf;  /* werden per JS mit dem Scroll verschoben */
  --r:28px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.6 'Instrument',system-ui,sans-serif;color:var(--ink);background:var(--sky-a);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-underline-offset:3px}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:560;line-height:1.1;margin:0 0 .5em;font-variation-settings:'SOFT' 100,'WONK' 0}
h1{font-size:clamp(2.6rem,11vw,4.6rem);letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,7vw,2.8rem)}
h3{font-size:1.3rem}

/* Sprache: ohne JS steht Deutsch da */
[data-lang="de"] [lang="en"],[data-lang="en"] [lang="de"]{display:none}

/* Himmel */
.sky{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,var(--sky-a),var(--sky-b));pointer-events:none}
.sun{position:absolute;width:42vmin;height:42vmin;left:58%;top:8%;border-radius:50%;
  background:radial-gradient(circle,var(--lamp) 0 38%,rgba(240,168,104,.25) 39%,rgba(240,168,104,0) 70%);
  transform:translate3d(0,var(--sun-y,0),0);opacity:var(--sun-o,1)}
.stars{position:absolute;inset:0;opacity:var(--star-o,0);
  background-image:radial-gradient(2px 2px at 12% 18%,#fff8,transparent),radial-gradient(2px 2px at 72% 12%,#fff9,transparent),
  radial-gradient(1.5px 1.5px at 40% 30%,#fff7,transparent),radial-gradient(2px 2px at 86% 40%,#fff8,transparent),
  radial-gradient(1.5px 1.5px at 24% 52%,#fff6,transparent),radial-gradient(2px 2px at 60% 64%,#fff7,transparent)}

/* Kopfzeile */
.bar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;
  background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:0 0 22px 22px}
.bar__name{font-family:'Fraunces',serif;font-weight:600;color:var(--ink);text-decoration:none;font-size:1.1rem;min-height:44px;display:flex;align-items:center}
.lang{min-width:88px;min-height:44px;border:0;border-radius:999px;background:var(--brand-soft);font:600 .95rem 'Instrument',sans-serif;color:var(--muted);display:flex;gap:6px;justify-content:center;align-items:center;cursor:pointer}
[data-lang="de"] .lang__de,[data-lang="en"] .lang__en{color:var(--brand)}

main{max-width:760px;margin:0 auto;padding:64px 16px 0}
section{background:var(--paper);border-radius:var(--r);padding:32px 22px;margin:22px 0;box-shadow:0 10px 40px -24px rgba(35,30,25,.35)}
.kicker{font-weight:600;color:var(--brand);margin:0 0 .4em;font-size:.95rem}
.lead{font-size:1.15rem;color:var(--ink)}
.note{color:var(--muted)}

/* Start */
.hero{text-align:center;margin-top:28px;padding-top:40px}
.portrait{width:168px;height:168px;margin:0 auto 18px;border-radius:50%;overflow:hidden;background:var(--brand-soft);box-shadow:0 0 0 6px var(--paper),0 0 0 8px var(--lamp)}
.portrait img{width:100%;height:100%;object-fit:cover}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:22px 0 10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font:600 1rem 'Instrument',sans-serif;transition:transform .2s}
.btn--main{background:var(--brand);color:#fff}
.btn--soft{background:var(--brand-soft);color:var(--brand)}
.btn:active{transform:scale(.97)}
.hero .btn--main{flex:1 1 100%}
.more{display:inline-flex;min-height:44px;align-items:center;color:var(--muted);text-decoration:none}

/* Pipeline */
.pipe{position:relative;margin:28px 0;padding-left:44px}
.pipe__track{position:absolute;left:14px;top:6px;bottom:6px;width:8px;border-radius:99px;background:var(--line)}
.pipe__fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--pipe,0)*100%);border-radius:99px;background:var(--brand)}
.pipe__task{position:absolute;left:50%;top:calc(var(--pipe,0)*100%);width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 5px var(--paper),0 0 18px var(--lamp)}
.pipe__steps{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.pipe__steps li{display:flex;flex-direction:column;opacity:calc(.45 + .55*var(--on,0));transition:opacity .3s}
.pipe__steps b{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600}
.pipe__steps li>span{color:var(--muted)}
.facts{list-style:none;padding:0;margin:24px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.facts li{background:var(--brand-soft);border-radius:22px;padding:16px;display:flex;flex-direction:column}
.facts b{font-family:'Fraunces',serif;font-size:1.7rem;color:var(--brand)}
.facts li>span{font-size:.92rem;color:var(--muted)}

/* Projekte */
.cards{display:grid;gap:14px}
.card{border-radius:24px;padding:20px;background:#fff;border:1px solid var(--line)}
.card p:last-child{margin-bottom:0}
.tag{display:inline-block;margin:0 0 10px;padding:4px 12px;border-radius:99px;background:var(--brand-soft);color:var(--brand);font-weight:600;font-size:.85rem}

/* Weg */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.timeline li{display:grid;gap:6px;justify-items:start}
@media (min-width:600px){.timeline li{grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}}
.timeline b{font-family:'Fraunces',serif;font-weight:600;color:var(--brand);background:var(--brand-soft);border-radius:99px;padding:2px 14px;white-space:nowrap}

/* Kontakt */
.contact{text-align:center;position:relative;overflow:hidden}
.windows{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;max-width:300px;margin:0 auto 20px}
.windows i{aspect-ratio:1;border-radius:50%;background:var(--line);transition:background .4s}
.windows i.on{background:var(--lamp);box-shadow:0 0 12px var(--lamp)}
.form{text-align:left;display:grid;gap:14px;margin-top:24px}
.form label{display:grid;gap:6px;font-weight:600}
.form input,.form textarea{font:inherit;padding:14px 18px;border-radius:20px;border:1px solid var(--line);background:#fff;min-height:52px}
.form .consent{grid-template-columns:auto 1fr;font-weight:400;font-size:.92rem;align-items:start}
.consent input{width:24px;height:24px;min-height:0;margin:2px 0 0}
.hp{position:absolute;left:-9999px}

.foot{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;padding:20px 16px 40px;font-size:.92rem;color:var(--paper)}
.foot a{color:inherit;min-height:44px;display:inline-flex;align-items:center}

@media (min-width:768px){
  section{padding:48px 52px}
  .hero .btn--main{flex:0 0 auto}
  .cards{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sun{transform:none}
  .pipe__task,.pipe__fill{transition:none}
}
.card h3 a{display:inline-flex;min-height:44px;align-items:center}
.timeline a{display:inline-block;padding:10px 0;margin:-10px 0}
.foot a{padding:0 4px}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chip{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:600 .95rem 'Instrument',sans-serif;cursor:pointer;transition:background .2s,color .2s}
.chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}

/* Büro */
.office,.demo{margin:30px 0;padding:22px 18px;border-radius:24px;background:#fff;border:1px solid var(--line)}
.office h3,.demo h3{margin-bottom:14px}
.desks{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
.desk{aspect-ratio:1;min-height:44px;border:0;border-radius:50%;background:var(--brand-soft);color:var(--brand);font:700 .85rem 'Instrument',sans-serif;cursor:pointer;transition:transform .25s,background .25s,box-shadow .25s}
.desk.is-sel{background:var(--brand);color:#fff}
.desk.is-busy{background:var(--lamp);color:var(--ink);box-shadow:0 0 16px var(--lamp);transform:scale(1.12)}
.desk-info{min-height:3.2em;margin:14px 0 0;color:var(--muted)}
.desk-info b{color:var(--ink)}
.log{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.log li{display:grid;gap:2px;padding:12px 16px;border-radius:20px;background:var(--paper);animation:pop .35s ease-out both}
.log b{font-family:'Fraunces',serif;color:var(--brand)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.log li{animation:none}.desk{transition:none}}

/* Projekt-Kacheln */
.tile{position:relative;display:grid;gap:4px;padding:18px 48px 18px 20px;border-radius:24px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s}
.tile b{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:600}
.tile .tag{justify-self:start;margin:0 0 4px}
.tile__short{color:var(--muted);font-size:.95rem}
.tile__go{position:absolute;right:16px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);transition:transform .2s}
.tile:hover .tile__go,.tile:focus-visible .tile__go{transform:translateX(3px)}
@media (hover:hover){.tile:hover{transform:translateY(-2px);box-shadow:0 12px 30px -20px rgba(35,30,25,.5)}}

/* Unterseiten */
.sub__title{font-size:clamp(2.2rem,9vw,3.6rem)}
.sub__h{font-size:1.5rem;margin-top:1.4em}
.gallery{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding:6px 2px 14px;margin:20px 0;scroll-snap-type:x mandatory}
.shot{flex:0 0 auto;width:min(86%,620px);border-radius:20px;box-shadow:0 12px 34px -18px rgba(35,30,25,.5);scroll-snap-align:start}
.shot--m{width:min(46%,220px)}
.points{padding-left:1.2em;display:grid;gap:8px}
.points li::marker{color:var(--brand)}
.tech{color:var(--muted)}
.sub .foot{color:var(--muted)}
figure.shot{margin:0;box-shadow:none}
figure.shot img{width:100%;border-radius:20px;box-shadow:0 12px 34px -18px rgba(35,30,25,.5)}
figure.shot figcaption{font-size:.9rem;color:var(--muted);margin-top:8px;line-height:1.45}
.todo{background:#ffe6a8;border-radius:6px;padding:0 4px}

/* Schiene am Rand: der Auftrag fährt mit */
.rail{position:fixed;z-index:4;top:76px;bottom:24px;left:max(5px,calc(50% - 404px));width:4px;border-radius:9px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.rail__fill{position:absolute;left:0;right:0;top:0;height:calc(var(--p,0)*100%);border-radius:9px;background:var(--brand)}
.rail__puck{position:absolute;left:50%;top:calc(var(--p,0)*100%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 3px var(--paper),0 0 16px var(--lamp)}
@media (max-width:480px){.rail{left:3px;width:3px}.rail__puck{width:12px;height:12px;margin:-6px 0 0 -6px}}

/* Live-Anzeige */
.bar{gap:10px}
.live{display:flex;flex-direction:column;align-items:center;line-height:1.15;margin-right:auto;margin-left:6px;padding-left:12px;border-left:1px solid var(--line)}
.live__clock{font-family:'Fraunces',serif;font-weight:600;font-variant-numeric:tabular-nums;color:var(--brand);font-size:1rem}
.live__stop{font-size:.72rem;color:var(--muted);white-space:nowrap}

/* Ticker */
.ticker{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin:6px auto 4px;padding:8px 16px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:.9rem;font-weight:600}
.ticker__dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 0 var(--lamp);animation:pulse 1.6s ease-out infinite}
.ticker__line{transition:opacity .28s,transform .28s;text-align:left}
.ticker__line.is-out{opacity:0;transform:translateY(6px)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,168,104,.7)}100%{box-shadow:0 0 0 10px rgba(240,168,104,0)}}

/* Büro: Licht an beim Scrollen */
.desk{background:var(--line);color:var(--muted);transition:background .35s,color .35s,transform .25s,box-shadow .35s}
.desk.is-on{background:var(--brand-soft);color:var(--brand)}

/* Weg zeichnet sich */
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--line)}
.timeline::after{content:"";position:absolute;left:6px;top:6px;width:3px;border-radius:3px;height:calc(var(--draw,0)*(100% - 12px));background:var(--brand)}
.timeline li{position:relative;opacity:.35;transform:translateX(-6px);transition:opacity .4s,transform .4s}
.timeline li::before{content:"";position:absolute;left:-21px;top:.55em;width:11px;height:11px;border-radius:50%;background:var(--paper);border:3px solid var(--line);transition:border-color .4s,background .4s}
.timeline li.is-on{opacity:1;transform:none}
.timeline li.is-on::before{border-color:var(--brand);background:var(--lamp)}

@media (prefers-reduced-motion:reduce){
  .ticker__dot{animation:none}
  .timeline li{opacity:1;transform:none;transition:none}
}
.desk.is-sel{background:var(--brand);color:#fff}
.desk.is-busy{background:var(--lamp);color:var(--ink);box-shadow:0 0 16px var(--lamp);transform:scale(1.12)}

/* Auftragszettel auf der Schiene */
.rail__stops i{position:absolute;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--paper);border:2px solid color-mix(in srgb,var(--ink) 25%,transparent);transition:background .3s,border-color .3s}
.rail__stops i.is-done{background:var(--brand);border-color:var(--brand)}
.rail__ticket{position:absolute;top:calc(var(--p,0)*100%);right:50%;display:flex;align-items:center;gap:8px;transform:translate(19px,-50%);flex-direction:row;padding:4px 4px 4px 12px;border-radius:999px;background:var(--paper);box-shadow:0 6px 18px -8px rgba(35,30,25,.5);white-space:nowrap}
.rail__ticket b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lamp);color:var(--ink);font:700 .78rem 'Instrument',sans-serif;transition:background .3s}
.rail__ticket span{font-size:.78rem;font-weight:600;color:var(--brand)}
.rail__ticket.is-done b{background:var(--brand);color:#fff}
.rail__ticket.stamp b{animation:stamp .45s ease-out}
@keyframes stamp{0%{transform:scale(1.5) rotate(-12deg)}60%{transform:scale(.92) rotate(3deg)}100%{transform:none}}
.rail__puck{display:none}
/* Desktop: Zettel links neben der Schiene. Mobil: nur der runde Stempel */
@media (max-width:899px){.rail__ticket{padding:0;background:none;box-shadow:none;transform:translate(50%,-50%);right:50%}.rail__ticket span{display:none}.rail__ticket b{width:26px;height:26px;font-size:.7rem;box-shadow:0 0 0 3px var(--paper)}}
@media (prefers-reduced-motion:reduce){.rail__ticket.stamp b{animation:none}}
.form{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px 18px}
.form__head{display:grid;gap:2px;margin:0 0 4px}
.form__head b{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:600}
.form__head>span{color:var(--muted)}
.form__msg{margin:0;font-weight:600;color:var(--brand)}
.consent a{display:inline-block;padding:12px 2px;margin:-12px 0}
.open{display:inline-block;margin:4px 0 0;padding:10px 18px;border-radius:18px;background:#fff;border:1px dashed var(--brand);color:var(--ink);font-weight:600;font-size:.98rem}