/* NOODLE EYES – Styles. Alle Markenwerte als Variablen. */
@font-face{font-family:"Caveat Brush";src:url(fonts/caveat-brush-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Space Mono";src:url(fonts/space-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url(fonts/space-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --ink:#171717; --cream:#F2EBDD; --lime:#D8FF3E; --concrete:#B8B5AD;
  --font-display:"Caveat Brush","Segoe Print","Comic Sans MS",cursive;
  --font-text:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Space Mono",ui-monospace,Consolas,monospace;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:7rem;
  --gutter:clamp(1rem,4vw,3rem);
  --line:3px;
  --edge:url(edge.svg);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:400 1.0625rem/1.55 var(--font-text);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--lime)}
.on-ink :focus-visible,.ink :focus-visible{outline-color:var(--lime);box-shadow:none}
.skip{position:absolute;left:var(--gutter);top:-4rem;background:var(--lime);color:var(--ink);padding:.6rem 1rem;z-index:100;font-family:var(--font-mono)}
.skip:focus{top:.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ---------- Typo ---------- */
.display{font-family:var(--font-display);font-weight:400;line-height:.88;letter-spacing:-.01em;text-transform:uppercase}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:.95;text-transform:uppercase}
h2{font-size:clamp(2.6rem,7vw,5.5rem)}
h3{font-size:clamp(2rem,4vw,3rem)}
.mono{font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.lead{font-size:clamp(1.15rem,2vw,1.4rem);max-width:30ch;line-height:1.35}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:.75rem var(--gutter);background:var(--cream)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:var(--cream);-webkit-mask:var(--edge) repeat-x top/300px 10px;mask:var(--edge) repeat-x top/300px 10px;transform:scaleY(-1);pointer-events:none}
.wordmark{font:400 1.9rem/.85 var(--font-display);text-transform:uppercase;text-decoration:none;display:block}
.wordmark span{display:block}
.nav{display:flex;gap:clamp(1rem,3vw,2.2rem);list-style:none;padding:0}
.nav a{font:400 .8125rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--ink);background:linear-gradient(transparent 55%,var(--lime) 55%)}
.menu-btn{display:none;font:700 .8125rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--cream);border:0;padding:.7rem 1rem;cursor:pointer}
@media (max-width:720px){
  .js .menu-btn{display:block}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--ink);color:var(--cream);padding:var(--s2) var(--gutter) var(--s3)}
  .js .nav.open{display:flex}
  .js .nav a{display:block;padding:.9rem 0;font-size:1rem;border-bottom:1px solid #333}
  .js .nav a:hover,.js .nav a[aria-current="page"]{background:none;color:var(--lime)}
  .nav{flex-wrap:wrap;gap:.2rem 1rem}
}

/* ---------- Buttons / Chips ---------- */
.btn{display:inline-block;font:700 .9rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;background:var(--ink);color:var(--cream);padding:1rem 1.6rem;border:2px solid var(--ink);transform:rotate(-1.2deg);transition:transform .15s,background .15s,color .15s}
.btn:hover{background:var(--lime);color:var(--ink);transform:rotate(.8deg)}
.btn.ghost{background:transparent;color:var(--ink)}
.on-ink .btn,.ink .btn{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.on-ink .btn:hover,.ink .btn:hover{background:var(--lime);border-color:var(--lime)}
.btn.is-off,.is-off{background:transparent!important;color:inherit!important;border:2px dashed currentColor;cursor:not-allowed;text-decoration:none;opacity:.75;transform:none!important}
.chip{display:inline-block;font:700 .75rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--lime);color:var(--ink);padding:.2rem .55rem;transform:rotate(-2deg)}
.chip.plain{background:transparent;border:1.5px solid currentColor}
.row{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}

/* ---------- Abschnitte ---------- */
section,.band{position:relative}
.band{padding:var(--s6) var(--gutter)}
.ink{background:var(--ink);color:var(--cream)}
.edge-top::before{content:"";position:absolute;left:0;right:0;top:-27px;height:28px;background:currentColor;-webkit-mask:var(--edge) repeat-x bottom/420px 28px;mask:var(--edge) repeat-x bottom/420px 28px;pointer-events:none;color:var(--cream);z-index:-1}
.ink.edge-top::before{color:var(--ink)}
.wrap{max-width:1280px;margin-inline:auto;position:relative;z-index:1}

/* durchlaufende Linie */
main{position:relative;isolation:isolate}
main .ink{background:none}
main .ink::after{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1}
#line{position:absolute;left:0;top:0;pointer-events:none;z-index:0;overflow:visible}
#line path{fill:none;stroke:var(--concrete);stroke-width:var(--line);stroke-linecap:round;stroke-linejoin:round}
.knot{position:absolute;width:1px;height:1px;pointer-events:none}

/* unregelmäßige Ausschnitte */
.rough-a:not(.ph),.ph.rough-a img{clip-path:polygon(2% 3%,18% 0,40% 2%,63% 0,85% 2%,100% 1%,98% 22%,100% 48%,97% 73%,100% 97%,76% 100%,50% 98%,24% 100%,3% 98%,0 74%,2% 50%,0 24%)}
.rough-b:not(.ph),.ph.rough-b img{clip-path:polygon(0 4%,22% 1%,47% 4%,71% 0,100% 3%,97% 30%,100% 55%,98% 80%,100% 99%,72% 96%,48% 100%,20% 97%,2% 100%,4% 70%,0 44%,3% 20%)}
.rough-c:not(.ph),.ph.rough-c img{clip-path:polygon(3% 0,30% 3%,55% 0,80% 3%,100% 0,98% 28%,100% 60%,97% 85%,99% 100%,70% 97%,42% 100%,15% 96%,0 99%,2% 66%,0 38%,3% 14%)}
.ph{position:relative}
.card .ph{max-width:19rem}
.card:nth-child(2) .ph{margin-left:auto}
.ph img{width:100%}
.ph figcaption{position:absolute;left:.6rem;bottom:.6rem;z-index:2}

/* ---------- Startseite: Hero ---------- */
.hero{padding:var(--s4) var(--gutter) 0;min-height:min(86vh,52rem)}
.hero .wrap{display:grid;grid-template-columns:repeat(12,1fr);align-items:start}
.hero h1{grid-column:1/9;grid-row:1;font-size:clamp(4.6rem,15.5vw,13.5rem);line-height:.8;margin-top:var(--s3);position:relative;z-index:5}
.hero h1 span{display:block}
.hero h1 span+span{margin-left:.55em}
.hero-face{grid-column:6/13;grid-row:1;justify-self:end;width:min(100%,46rem);margin-top:-.5rem;margin-bottom:-9rem;position:relative;z-index:3;transform:rotate(3deg)}
.hero-copy{grid-column:1/6;grid-row:2;position:relative;z-index:6;margin-top:var(--s3);padding-bottom:var(--s5)}
.hero-copy .lead{margin-bottom:var(--s3)}
.hero-photo{grid-column:1/-1;grid-row:3}
@media (max-width:860px){
  .hero{padding-top:var(--s3)}
  .hero h1{grid-column:1/-1;font-size:clamp(4.2rem,22vw,9rem)}
  .hero-face{grid-column:3/13;grid-row:2;margin:-1rem 0 -3rem;width:100%}
  .hero-copy{grid-column:1/-1;grid-row:3}
}

/* ---------- Designs-Streifen ---------- */
.designs{padding-top:calc(var(--s6) + 4rem)}
.designs-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5) var(--s3);align-items:start}
.card{position:relative;display:block;text-decoration:none;color:inherit}
.card:nth-child(1){grid-column:1/7;transform:rotate(-1deg)}
.card:nth-child(2){grid-column:7/13;margin-top:var(--s6);transform:rotate(1.2deg)}
.card:nth-child(3){grid-column:1/7;transform:rotate(-.6deg)}
.card:nth-child(4){grid-column:7/13;margin-top:var(--s6);transform:rotate(.8deg)}
.card .ph{background:var(--concrete)}
.card .mono{display:block;opacity:.75;margin-top:var(--s2)}
.card h3{margin:.2rem 0 .4rem}
.card:hover h3{background:var(--lime);color:var(--ink);display:inline-block;padding:0 .2em;margin-left:-.2em}
.card .price{margin-top:.5rem}
.card .pair{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s2);align-items:end}
.sketch{background:var(--cream);padding:1.2rem;color:var(--ink)}
.sketch.dark{background:var(--ink)}
@media (max-width:760px){
  .card:nth-child(n){grid-column:1/-1;margin-top:0}
  .designs{padding-top:calc(var(--s5) + 3rem)}
}

/* ---------- Haltung ---------- */
.stance .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s3);align-items:center}
.stance .lines{grid-column:1/8}
.stance .lines p{font:400 clamp(2.4rem,7vw,5.6rem)/.95 var(--font-display);text-transform:uppercase}
.stance .lines p:nth-child(2){margin-left:1.2em}
.stance .lines p:nth-child(3){margin-left:.4em}
.stance .figure{grid-column:8/13;transform:rotate(-2deg);width:100%;max-width:26rem;justify-self:center}
.stance .small{grid-column:1/7;max-width:34ch;margin-top:var(--s3)}
@media (max-width:860px){.stance .lines,.stance .figure,.stance .small{grid-column:1/-1}.stance .figure{max-width:20rem;margin:0 0 0 auto}}

/* ---------- Produktseite ---------- */
.product{padding-top:var(--s4)}
.product .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4) var(--s3);align-items:start}
.gallery{grid-column:1/8;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)}
.gallery > *:nth-child(1){grid-column:1/5;transform:rotate(-1.5deg)}
.gallery > *:nth-child(2){grid-column:4/7;grid-row:1;margin-top:5rem;transform:rotate(2deg);z-index:2}
.gallery > *:nth-child(3){grid-column:1/4;margin-top:-1rem;transform:rotate(1deg)}
.gallery > *:nth-child(4){grid-column:4/7;margin-top:1rem;transform:rotate(-1.5deg)}
.buy{grid-column:8/13;position:sticky;top:6rem}
.buy h1{font-size:clamp(3.4rem,8vw,6.5rem);margin:.4rem 0 var(--s2)}
.buy .meta{list-style:none;padding:0;margin:var(--s3) 0;border-top:2px solid currentColor}
.buy .meta li{display:flex;justify-content:space-between;gap:var(--s2);padding:.6rem 0;border-bottom:1.5px solid var(--concrete)}
.buy .price{font:700 1.5rem var(--font-mono)}
.buy .etsy-note{margin-top:.8rem;font-size:.9rem;opacity:.8}
.buy .details{margin-top:var(--s3)}
@media (max-width:900px){.gallery,.buy{grid-column:1/-1}.buy{position:static;order:-1}}
.sketch-tile{background:var(--cream);color:var(--ink);padding:1.5rem;aspect-ratio:1/1;display:grid;place-items:center;position:relative}
.sketch-tile.dark{background:var(--ink);color:var(--cream)}
.sketch-tile img{width:78%}
.sketch-tile figcaption{position:absolute;left:.6rem;bottom:.6rem}
.product.on-ink .sketch-tile{outline:2px solid var(--cream)}

/* ---------- Marke / Textseiten ---------- */
.page-head{padding:var(--s5) var(--gutter) var(--s4)}
.page-head h1{font-size:clamp(3.6rem,12vw,10rem);line-height:.82}
.about .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4) var(--s3);align-items:start}
.about .doodles{grid-column:1/9;transform:rotate(-1deg)}
.about .text{grid-column:9/13;max-width:36ch}
.about .text p+p{margin-top:var(--s2)}
.about .third{grid-column:2/8;display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:end;margin-top:var(--s5)}
.about .third .ph:first-child{transform:rotate(1.5deg)}
.about .third .ph:last-child{transform:rotate(-2deg);margin-bottom:-2rem}
.about .third-copy{grid-column:8/13;align-self:center}
@media (max-width:860px){.about .doodles,.about .text,.about .third,.about .third-copy{grid-column:1/-1}}
.legal{padding:var(--s4) var(--gutter) var(--s6)}
.legal .wrap{max-width:46rem}
.legal h2{font-size:2.2rem;margin:var(--s4) 0 var(--s1)}
.legal p,.legal li{margin-top:.6rem}
.legal ul{padding-left:1.2rem}
.todo{background:var(--lime);color:var(--ink);padding:.05em .35em;font-family:var(--font-mono);font-size:.9em}
.notice{border:2px dashed var(--ink);padding:var(--s2);margin-top:var(--s3);font-size:.95rem}

/* ---------- Footer ---------- */
.site-footer{padding:var(--s6) var(--gutter) var(--s4);margin-top:var(--s6)}
.site-footer .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4) var(--s3)}
.site-footer .brand{grid-column:1/6}
.site-footer .brand .display{font-size:clamp(3.2rem,8vw,6rem)}
.site-footer .col{grid-column:span 2}
.site-footer .col:nth-of-type(2){grid-column:7/10}
.site-footer .col:nth-of-type(3){grid-column:10/13}
.site-footer h2{font:700 .75rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s1);color:var(--lime)}
.site-footer ul{list-style:none;padding:0}
.site-footer li{margin-bottom:.4rem}
.site-footer a{text-decoration:none;border-bottom:1.5px solid transparent}
.site-footer a:hover{border-bottom-color:var(--lime)}
.site-footer small{display:block;margin-top:var(--s4);grid-column:1/-1;opacity:.7;font-size:.8125rem}
.site-footer .is-off small{display:inline;margin:0 0 0 .4rem;opacity:.7}
@media (max-width:860px){.site-footer .brand,.site-footer .col,.site-footer .col:nth-of-type(n){grid-column:1/-1}}

@media (max-width:760px){.designs-head p{flex-basis:100%}#line path{stroke-width:2px}}

.gallery > *:nth-child(1){grid-column:1/5;grid-row:1}
.gallery > *:nth-child(2){grid-column:4/7;grid-row:1;margin-top:7rem}
.gallery > *:nth-child(3){grid-row:2}
.gallery > *:nth-child(4){grid-row:2}
.gallery > *{align-self:start}
.buy > .mono:first-child{position:relative;z-index:2;margin-bottom:.6rem}
@media (min-width:901px){
  .gallery{max-width:40rem}
  .about .third{max-width:30rem}
}

.card .sketch-tile{max-width:19rem}
.card .sketch-tile.dark{outline:2px solid var(--cream);outline-offset:-2px}