@font-face{font-family:"Architects Daughter";font-style:normal;font-weight:400;font-display:swap;src:url("architects-daughter-latin.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("inter-latin.woff2") format("woff2")}
/* ideenbüdchen — Entwurf C (14.09.2026), Stand nach Yvonnes zweiter Vorlage:
   Auf Nachtblau baut sich das Zeichen auf: Tresen · Haus · Punkt · Schrift.
   Das Blau wird durchsichtig, das Zeichen wechselt auf Nachtblau, die Texte
   erscheinen. Das Zeichen zieht sich auseinander (Haus links, Punkt rechts,
   groß) und fügt sich wieder zusammen — mittig. Dann stehen links und rechts
   davon die zwei Wege: dein raum · deine produkte, mit Kupferpfeil.
   Kein Claim auf der Seite. Unten: warum es das gibt · kontakt · fuß, mittig.
   Ohne Bewegung: sofort der Endzustand.

   ZEITEN   0,6 Tresen · 1,4 Haus · 3,6 Punkt · 4,2 Schrift (steht bei 6,2)
            9,2 das Blau wird über 4,5 s durchsichtig — darunter die fertige Seite
           T2b: Ziehen bei 12,7, also 1 s bevor das Blau ganz weg ist — keine Pause
           14,5 auseinanderziehen, Punkt wächst — und so bleibt es · 16,5 Wege darunter */
:root {
  --nachtblau:#222E3A; --offwhite:#FDFBF7; --creme:#EDE4D3; --grau:#60666A;
  --linie:#DDD5C6; --kupfer:#A87D28;
  --satz:576px; --rand:24px;
  --zeichen:160px;            /* Bühne, Handy */
  --se:37; --s:calc(var(--se) * 1px);   /* Auseinanderziehen, in Zeichen-Einheiten (70 = Zeichenbreite) */
  --wachs:1.6;                          /* Punkt wächst beim Herausziehen */
  --tresen-h:2.25px;
  --t-weg:7.8s; --t-zieh:10.1s; --t-wege:11.9s;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--offwhite);color:var(--nachtblau)}
/* Solange das Blau steht, lässt sich die Seite nicht scrollen — sonst verschiebt sich das
   Zeichen der Seite gegen sein Spiegelbild im Blau (Handy: Wischen während des Intros). */
html{overflow:hidden;animation:frei 1ms linear calc(var(--t-weg) + 4.5s) forwards}
@keyframes frei{from{overflow:hidden}to{overflow:auto}}
html:has(#seite:target){overflow:auto;animation:none}
@media (prefers-reduced-motion:reduce){html{overflow:auto;animation:none}}
body{font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:26px;-webkit-font-smoothing:antialiased;padding:0 var(--rand) 48px}
a{color:inherit;text-decoration:none}
.versal{font-size:14px;line-height:24px;letter-spacing:.18em;text-transform:uppercase}

/* ------------------------------------------------------------ das Blau
   Das Blau ist ein Spiegel der Bühne: dieselbe Anordnung, das Zeichen in Offwhite,
   die Texte unsichtbar als Platzhalter. Darunter liegt die fertige Seite in Nachtblau.
   Das Zeichen baut sich im Blau auf. Dann öffnet sich ab dem Punkt ein Loch im Blau,
   das nach außen wächst — die Idee entweicht, darunter erscheint das Offwhite.
   Kein Überblenden: die Kante läuft übers Zeichen, Nachtblau auf Offwhite bleibt scharf. */
.blau{position:fixed;inset:0;background:var(--nachtblau);z-index:5;color:var(--offwhite);overflow:hidden;padding:0 var(--rand);
  animation:durchsichtig 4.5s cubic-bezier(.4,0,.2,1) var(--t-weg) forwards}
@keyframes durchsichtig{to{opacity:0;visibility:hidden}}
@keyframes unsichtbar{to{visibility:hidden}}
.skip{position:absolute;right:var(--rand);bottom:24px;color:var(--offwhite);border-bottom:1px solid currentColor;padding-bottom:2px}
/* Überspringen: der Link setzt #seite als Ziel, dann ist das Blau weg und die Seite im Endzustand */
body:has(#seite:target) .blau{display:none}
/* Nach dem Überspringen läuft das Aufgehen trotzdem — nur ohne Wartezeit.
   Eigene Keyframe-Namen, damit die laufende Animation neu startet. */
@keyframes links-s{to{transform:translateX(calc(var(--s) * -1))}}
@keyframes rechts-s{to{transform:translateX(calc(var(--s) - 20px)) scale(var(--wachs))}}
@keyframes auf-s{to{opacity:1}}
@keyframes zeichnen-s{to{stroke-dashoffset:0}}
/* Nach dem Überspringen baut sich das Zeichen auf der Seite selbst auf — in Nachtblau,
   zügiger als im Blau: Tresen 0,2 · Haus 0,8 · Punkt 2,2 · Schrift 2,6 · steht bei 3,6 ·
   dann geht es auf (3,8) · Skizze ab 5,8. */
@keyframes ziehen-s{to{transform:scaleX(1)}}
@keyframes punkt-s{to{transform:scale(1)}}
body:has(#seite:target) .seite .tresen{transform-origin:2px 0;transform:scaleX(0);animation:ziehen-s .8s cubic-bezier(.45,.05,.3,1) .2s forwards}
body:has(#seite:target) .seite .dach{stroke-dasharray:129.98;stroke-dashoffset:129.98;animation:zeichnen-s 1.8s cubic-bezier(.4,0,.6,1) .8s forwards}
body:has(#seite:target) .seite .punkt{transform-origin:55px 39.56px;transform:scale(0);animation:punkt-s .7s cubic-bezier(.3,.7,.3,1) 2.2s forwards, rechts-s 2.4s cubic-bezier(.45,0,.25,1) 3.8s forwards}
body:has(#seite:target) .seite .wand,body:has(#seite:target) .seite .wort > g{opacity:0;animation:auf-s 1.6s cubic-bezier(.4,0,.6,1) 2.6s forwards}
body:has(#seite:target) .seite .haus-wort{animation:links-s 2.4s cubic-bezier(.45,0,.25,1) 3.8s forwards}
body:has(#seite:target) .skizze,body:has(#seite:target) .wege-handy{animation:auf-s 1.2s cubic-bezier(.4,0,.6,1) 5.8s forwards}
body:has(#seite:target) .skizze .linie{animation:zeichnen-s 1.1s cubic-bezier(.4,0,.4,1) 6.1s forwards}
body:has(#seite:target) .skizze .spitze{animation:auf-s .3s ease 7.1s forwards}
.blau .kopf,.blau h1,.blau .absaetze,.blau .frage{visibility:hidden}
.blau h1::before{content:"willkommen im ideenbüdchen."}
.blau .absaetze p:nth-of-type(1)::before{content:"hier wird gedruckt, graviert und gelasert, auch ab einem stück. und hier gibt es einen raum für workshops, kurse und eigene projekte."}
.blau .absaetze p:nth-of-type(2)::before{content:"eine idee darf hier erst mal klein anfangen. und dann sehen wir, was daraus wird."}
.blau .frage::before{content:"wo willst du anfangen?"}
.blau .dach{stroke:var(--offwhite);stroke-dasharray:129.98;stroke-dashoffset:129.98;animation:zeichnen 2.2s cubic-bezier(.4,0,.6,1) 1.4s forwards}
.blau .tresen{fill:var(--offwhite);transform-origin:2px 0;transform:scaleX(0);animation:ziehen .9s cubic-bezier(.45,.05,.3,1) .6s forwards}
.blau .wand,.blau .wort > g{fill:var(--offwhite);opacity:0;animation:auf 3.0s cubic-bezier(.4,0,.6,1) 4.2s forwards}
.blau .punkt{transform-origin:55px 39.56px;transform:scale(0);animation:punkt .8s cubic-bezier(.3,.7,.3,1) 3.6s forwards}
@keyframes ziehen{to{transform:scaleX(1)}}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes auf{to{opacity:1}}
@keyframes punkt{to{transform:scale(1)}}


/* ------------------------------------------------------------ S: Wege als Handskizze am Haus und am Punkt
   Position nach dem Auseinanderziehen: Haus+Wort um s nach links, Punkt um s−20 nach rechts.
   Der Pfeil zeichnet sich, dann steht das Wort. */
.skizze{position:absolute;display:none;flex-direction:column;gap:0;white-space:nowrap;font-family:"Architects Daughter","Segoe Print","Bradley Hand",cursive;font-size:24px;line-height:30px;font-weight:400;letter-spacing:0;
  opacity:0;animation:auf 1.2s cubic-bezier(.4,0,.6,1) var(--t-wege) forwards}
.skizze svg{width:64px;height:28px;overflow:visible;fill:none;stroke:var(--nachtblau);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.skizze .linie{stroke-dasharray:60;stroke-dashoffset:60;animation:zeichnen 1.1s cubic-bezier(.4,0,.4,1) calc(var(--t-wege) + .3s) forwards}
.skizze .spitze{opacity:0;animation:auf .3s ease calc(var(--t-wege) + 1.3s) forwards}
.skizze.raum{right:calc(100% + var(--se) / 70 * var(--zeichen) + 8px);top:46%;align-items:flex-end}
.skizze.raum svg{margin-right:-4px}
.skizze.produkte{left:calc(100% + (var(--se) - 20) / 70 * var(--zeichen) + 4px);top:26%;align-items:flex-start}
.skizze.produkte svg{margin-left:-4px}
.skizze:hover span{text-decoration:underline;text-underline-offset:.2em}
@media (min-width:640px){
  .skizze{display:flex}
  .buehne .wege-handy{display:none}
}

/* ------------------------------------------------------------ Kopfzeile */
.kopf{max-width:960px;margin:0 auto;padding:24px 0 0;display:flex;justify-content:flex-end;align-items:baseline}
.kopf .ort{margin:0;color:var(--grau);font-size:17px;line-height:24px;letter-spacing:.12em}
.kopf nav{display:flex;gap:32px;font-size:17px;line-height:24px}
.kopf nav a:hover{text-decoration:underline;text-underline-offset:.2em}

/* ------------------------------------------------------------ die Bühne (die Seite selbst, fertig gesetzt) */
.buehne{position:relative;max-width:640px;margin:0 auto;text-align:center;padding:32px 0 0;display:flex;flex-direction:column;align-items:center}
.buehne > *{width:100%}
.buehne h1{margin:0;font-size:clamp(32px,7vw,52px);line-height:1.08;font-weight:400;letter-spacing:-.03em;text-wrap:balance}
.buehne h1 b{font-weight:600}
.buehne .absaetze{width:100%}
.buehne .absaetze p{margin:24px auto 0;max-width:34em;color:inherit}
.buehne .absaetze p+p{margin-top:16px}
.buehne .frage{margin:48px auto 0;font-weight:400;font-size:16px;letter-spacing:.14em;color:var(--nachtblau)}

/* das Zeichen und die zwei Wege daneben */
.marke{position:relative;width:var(--zeichen);margin:32px auto 0}
.buehne > .marke{width:var(--zeichen)}
.marke .zeichen{display:block;width:100%;height:auto;overflow:visible}
.seite .dach{stroke:var(--nachtblau)}
.seite .tresen,.seite .wand,.seite .wort > g{fill:var(--nachtblau)}
.seite .punkt{transform-origin:55px 39.56px;animation:rechts 2.4s cubic-bezier(.45,0,.25,1) var(--t-zieh) forwards}
.seite .haus-wort{animation:links 2.4s cubic-bezier(.45,0,.25,1) var(--t-zieh) forwards}
/* Auseinanderziehen in Zeichen-Einheiten: Haus+Wort um s nach links, der Punkt
   um s−20 nach rechts und auf ×2,4 — die Idee wird groß, sobald sie draußen ist.
   Danach zurück in die Mitte. */
@keyframes links{to{transform:translateX(calc(var(--s) * -1))}}
@keyframes rechts{to{transform:translateX(calc(var(--s) - 20px)) scale(var(--wachs))}}

/* die zwei Wege: links und rechts vom Zeichen, auf Punkthöhe (40,2 % der Zeichenhöhe) */
.weg{position:absolute;top:40.2%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;white-space:nowrap;
  opacity:0;animation:auf 1.4s cubic-bezier(.4,0,.6,1) var(--t-wege) forwards}
.weg.raum{right:calc(100% + 48px);align-items:flex-start}
.weg.produkte{left:calc(100% + 48px);align-items:flex-start}
.weg strong{font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.02em}
.weg .pfeil{position:relative;width:100%;height:12px}
.weg .pfeil::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.4px;margin-top:-.7px;background:var(--kupfer)}
.weg .pfeil::after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;margin-top:-4.7px;border-top:1.4px solid var(--kupfer);border-right:1.4px solid var(--kupfer);transform:rotate(45deg)}
.weg:hover strong{text-decoration:underline;text-underline-offset:.15em}

/* Handy: die Wege unter dem Zeichen nebeneinander */
/* C2: die Wege stehen unter den Hälften, Spaltenmitte = ±s · Zeichen/70 */
.wege-handy{display:grid;grid-template-columns:1fr 1fr;width:calc(var(--se) * 4 / 70 * var(--zeichen));max-width:100%;margin:32px auto 0;padding:0;list-style:none;justify-items:center;
  opacity:0;animation:auf 1.4s cubic-bezier(.4,0,.6,1) var(--t-wege) forwards}
.wege-handy .weg{position:static;transform:none;opacity:1;animation:none;align-items:center;padding:8px 16px}
@media (max-width:639px){
  .buehne .absaetze{order:9;margin-top:40px}
  .buehne .frage{margin-top:32px}
  .wege-handy .weg{position:static;transform:none;opacity:1;animation:none;white-space:normal}
  /* Handy: Handschrift wie am Rechner, Pfeil zeigt nach oben zum Haus bzw. zum Punkt */
  .wege-handy{margin-top:16px}
  .wege-handy .weg{gap:4px;font-family:"Architects Daughter","Segoe Print","Bradley Hand",cursive}
  .wege-handy .weg strong{font-size:22px;line-height:28px;font-weight:400;letter-spacing:0;white-space:nowrap}
  .wege-handy .hoch{width:28px;height:64px;fill:none;stroke:var(--nachtblau);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .wege-handy .hoch .linie{stroke-dasharray:70;stroke-dashoffset:70;animation:zeichnen 1.1s cubic-bezier(.4,0,.4,1) calc(var(--t-wege) + .3s) forwards}
  .wege-handy .hoch .spitze{opacity:0;animation:auf .3s ease calc(var(--t-wege) + 1.3s) forwards}
  body:has(#seite:target) .wege-handy .hoch .linie{animation:zeichnen-s 1.1s cubic-bezier(.4,0,.4,1) 6.1s forwards}
  body:has(#seite:target) .wege-handy .hoch .spitze{animation:auf-s .3s ease 7.1s forwards}
  .kopf nav{gap:20px;font-size:14px}
}
@media (min-width:640px){
  :root{--zeichen:220px;--se:48;--rand:32px}
  body{font-size:20px;line-height:32px;padding-bottom:64px}
  .kopf{padding-top:32px}
  .buehne{padding-top:80px}
  .marke{margin-top:80px}
  .buehne .frage{margin-top:48px}
}

/* ------------------------------------------------------------ warum, kontakt, fuß — mittig */
main{max-width:640px;margin:0 auto;text-align:center}
.block{padding:128px 0 0}
.block h2{margin:0 0 32px;font-weight:400}
.warum blockquote{margin:0 auto 24px;padding:0;max-width:24em;font-size:24px;line-height:32px;font-weight:400;letter-spacing:-.012em}
.warum p{margin:0 auto;max-width:34em}
.fuss{max-width:960px;margin:128px auto 0;padding-top:12px;border-top:1px solid var(--linie);font-size:17px;line-height:24px}
.wege-fuss{display:flex;justify-content:center;flex-wrap:nowrap;margin:0;padding:0;list-style:none;font-size:16px}
@media (max-width:899px){.wege-fuss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center}}
/* Handy: eine Spalte, sonst sprengen „whatsapp schreiben“ und „@ideenbuedchen.andernach“ die Breite */
@media (max-width:639px){.wege-fuss{grid-template-columns:1fr;justify-items:start;width:max-content;max-width:100%;margin:0 auto}}
.wege-fuss li{padding:0 14px;line-height:24px;display:flex;align-items:center}
.wege-fuss a{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.ikon{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ikon .voll{fill:currentColor;stroke:none}
.wege-fuss .klein{display:block;font-size:13px;line-height:20px;color:var(--grau)}
.wege-fuss a:hover{text-decoration:underline;text-underline-offset:.2em}
.zeile{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:12px;padding-top:16px;border-top:1px solid var(--linie);font-size:14px;line-height:24px;letter-spacing:.02em;color:var(--grau)}
.zeile a:hover{text-decoration:underline;text-underline-offset:.2em}
.nochmal{position:fixed;left:16px;bottom:16px;font-size:12px;line-height:20px;padding:6px 12px;border:1px solid var(--linie);background:var(--offwhite);color:var(--grau);cursor:pointer;font-family:inherit;z-index:20}
@media (min-width:640px){
  .warum blockquote{font-size:28px;line-height:40px}
}

/* ohne Bewegung: gleich der Endzustand */
/* Große Bildschirme: der Rahmen wächst mit, die Zeile bleibt lesbar (max. ~70 Zeichen) */
@media (min-width:1200px){
  :root{--zeichen:264px;--se:56}
  .kopf,.fuss{max-width:1200px}
  .buehne,main{max-width:760px}
  body{font-size:21px;line-height:34px}
  .buehne h1{font-size:60px}
  .buehne .absaetze p,.warum p{max-width:34em}
  .skizze{font-size:28px;line-height:34px}
  .skizze svg{width:76px;height:32px}
  .warum blockquote{font-size:32px;line-height:44px;max-width:22em}
  .kopf{padding-top:40px}
  .buehne{padding-top:96px}
  .marke{margin-top:96px}
  .block{padding-top:144px}
  .fuss{margin-top:144px}
  .wege-fuss{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  .blau{display:none}
  .buehne *,.wege-handy{animation:none!important;opacity:1}
  .seite .punkt{transform:translateX(calc(var(--s) - 20px)) scale(var(--wachs))}
  .seite .haus-wort{transform:translateX(calc(var(--s) * -1))}
}

.m0{margin:0}
.hinweis{margin-top:24px}
.tueren-handy .tuer.raum{background:var(--raumgrau)}
.tueren-handy .tuer.produkte{background:var(--creme)}