/* ==========================================================================
   Tüftel3D: site stylesheet
   Concept: two doors. "Ich will einen 3D-Drucker ausprobieren." / "Ich habe eine
   Idee, die ich bauen will." One shape language, one continuous strand from the
   printer's nozzle into the pencil sketch: one studio, without saying so.
   Mobile-first (360–430 px), doors side by side from 48em (768 px).
   Versioned filename: bump "-v1" when this file changes (long-cached, see /_headers).
   ========================================================================== */

/* ---------- Fonts: Bricolage Grotesque (SIL OFL 1.1), self-hosted, subset Latin + German ---------- */
@font-face {
  font-family: "Bricolage Display";
  src: url("../fonts/bricolage-display-v1.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  /* static instance: opsz 96, wdth 75, wght 800 */
}
@font-face {
  font-family: "Bricolage Text";
  src: url("../fonts/bricolage-text-v1.woff2") format("woff2");
  font-weight: 400 650; font-style: normal; font-display: swap;
  /* variable instance: opsz 14, wdth 100, wght 400–650 */
}
/* Metric-adjusted fallbacks keep layout shift small while the WOFF2 loads */
@font-face {
  font-family: "Display Fallback";
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Roboto Condensed Bold"), local("Arial Bold");
  font-weight: 800; size-adjust: 92%; ascent-override: 98%; descent-override: 26%;
}
@font-face {
  font-family: "Text Fallback"; src: local("Arial"), local("Roboto"), local("Helvetica");
  size-adjust: 102%; ascent-override: 92%; descent-override: 25%;
}

/* ---------- Palette ----------
   Sanzo Wada, A Dictionary of Color Combinations (Seigensha 2010), No. 276
   Source: github.com/mattdesl/dictionary-of-colour-combinations (colors.json),
   cross-checked at sanzo-wada.dmbk.io/combination/276
   Only these four colours plus opacity variants of them are used.
   Text pairs: ink/ground 13.60 · ink/try 11.08 · ink/design 7.34 · ground/ink 13.60 */
:root {
  --c-ground: #fdd4bd; /* Seashell Pink: page ground, paper, hands */
  --c-ink:    #111314; /* Black: text, linework, extrusions, buttons */
  --c-try:    #afd472; /* Yellow Green: door 1, Try Before You Buy */
  --c-design: #f37f94; /* Eosine Pink: door 2, Design Your Idea */

  --c-ink-a07: rgb(17 19 20 / .07);
  --c-ink-a12: rgb(17 19 20 / .12);
  --c-ink-a22: rgb(17 19 20 / .22);

  --f-display: "Bricolage Display", "Display Fallback", "Arial Narrow", sans-serif;
  --f-text: "Bricolage Text", "Text Fallback", Arial, sans-serif;

  /* type scale (fluid) */
  --t-door:  clamp(1.75rem, 2.8vw + 1.15rem, 3rem);   /* the first-person line: biggest text on the page */
  --t-claim: clamp(1.875rem, 2.2vw + 1.25rem, 2.75rem);
  --t-body:  1.0625rem;
  --t-label: .8125rem;

  /* spacing */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 3rem;  --s-8: 4rem;
  --gutter:   max(1rem, env(safe-area-inset-left, 0px));
  --gutter-r: max(1rem, env(safe-area-inset-right, 0px));
  --door-r: 28px;        /* door corner radius */
  --door-px: 20px;       /* door text inset */
  --ex: 6px;             /* soft extrusion depth */
  --maxw: 75rem;         /* 1200 px */
  --line: 1.5px;

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.5;
  font-weight: 400;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
  text-rendering: optimizeLegibility;
  font-synthesis: none; /* never fake bold/italic */
}
h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; border-radius: 2px; }
svg { display: block; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 50;
  background: var(--c-ground); color: var(--c-ink); padding: var(--s-3) var(--s-4);
  font-weight: 600; text-decoration: none; border: var(--line) solid var(--c-ink); border-radius: 999px;
}
.skip:focus { top: var(--s-3); }

.wrap {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-left: var(--gutter); padding-right: var(--gutter-r);
}
.label {
  font-size: var(--t-label); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; line-height: 1.2; hyphens: manual;
}

/* ---------- Brand bar (≤ 64 px) ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 3.25rem; }

.wordmark {
  display: inline-flex; align-items: center; gap: .14em;
  font-family: var(--f-display); font-weight: 800; font-size: 1.75rem; line-height: 1;
  letter-spacing: -.005em; text-decoration: none; hyphens: manual;
  min-height: 48px;
}
.wordmark:hover { text-decoration: none; }
/* the "3D" block is extruded in the two door colours: one block, two halves */
.wordmark .wm-3d {
  display: inline-block; background: var(--c-ink); color: var(--c-ground);
  padding: .09em .14em .05em; font-size: .78em; line-height: 1; border-radius: .12em;
  box-shadow: .07em .07em 0 var(--c-try), .14em .14em 0 var(--c-design);
  transform: translateY(-.04em);
}

/* ==========================================================================
   The two doors
   Geometry: the doors container is a size container. 1u = 1/320 of a door's width
   (stacked) or 1/696 of the container (side by side). Artwork, the padding next to
   it and the gap are all set in u, so the strand's SVG (same units) lines up
   exactly at every width. Text never sits between the two artworks.
   ========================================================================== */
.doors {
  container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin-top: var(--s-1);
}
.doors > * { --u: calc(100cqw / 320); min-width: 0; }

.door {
  position: relative;
  border-radius: var(--door-r);
  box-shadow: var(--ex) var(--ex) 0 var(--c-ink);
  transition: box-shadow .16s ease-out;
}
/* door 1 sits above door 2 so the strand (drawn inside door 1) crosses over it */
.door--try {
  z-index: 2;
  background-color: var(--c-try);
  background-image: repeating-linear-gradient(0deg, var(--c-ink-a07) 0 1px, transparent 1px 6px); /* layer lines */
}
.door--design {
  z-index: 1;
  background-color: var(--c-design);
  background-image: radial-gradient(circle at 1px 1px, var(--c-ink-a12) 1.1px, transparent 1.4px); /* sketch-paper dots */
  background-size: 12px 12px;
}
/* "the door gives way" */
.door:has(summary:hover) { box-shadow: calc(var(--ex) + 3px) calc(var(--ex) + 3px) 0 var(--c-ink); }
.door:has(summary:active) { box-shadow: 2px 2px 0 var(--c-ink); }

.door summary {
  display: flex; flex-direction: column; gap: var(--s-3);
  list-style: none; cursor: pointer; border-radius: var(--door-r);
  -webkit-tap-highlight-color: transparent;
}
.door summary::-webkit-details-marker { display: none; }
.door summary:focus-visible { outline-offset: 4px; border-radius: calc(var(--door-r) + 4px); }

/* stacked: both doors start with label + toggle (same tap target). Door 1 then has its line
   and the art at the bottom; door 2 has the art next, then its line. The two artworks face
   each other across the gap. Everything between them (padding, door 2's label row, gap) is
   set in u, so the strand's geometry scales exactly. */
@media (max-width: 47.99em) {
  .door summary { padding-top: calc(12 * var(--u)); gap: var(--s-2); }
  .door-meta { height: calc(36 * var(--u)); }
  .door--try summary { flex-direction: column-reverse; padding-bottom: calc(12 * var(--u)); }
  .door--design summary { gap: 0; padding-bottom: var(--s-4); }
  .door--design .door-meta { order: -1; }
  .door--design .door-art { margin-top: calc(6 * var(--u)); }
  .door--design .door-q { margin-top: var(--s-2); }
}

.door-art { position: relative; display: block; width: 100%; aspect-ratio: 5 / 2; }
.door-art > .art, .door-art > img { width: 100%; height: 100%; object-fit: cover; }

.door-q {
  display: block; padding-inline: var(--door-px);
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-door);
  line-height: 1; letter-spacing: -.005em; hyphens: manual; text-wrap: balance;
}
.door-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-inline: var(--door-px); }
.pill {
  display: inline-flex; align-items: center; min-height: 1.875rem; padding: 0 .85rem;
  border-radius: 999px; background: var(--c-ink); color: var(--c-ground);
  font-size: .75rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
/* + turns into × when the door is open */
.tog {
  position: relative; width: 2.25rem; height: 2.25rem; flex: none;
  border: 2px solid var(--c-ink); border-radius: 50%;
  transition: transform .25s ease-out;
}
.tog::before, .tog::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--c-ink); border-radius: 1px; }
.tog::after { transform: rotate(90deg); }
details[open] .tog { transform: rotate(45deg); }

/* --- the strand --- */
.thread {
  position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible;
  fill: none; stroke: var(--c-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .25s ease-out;
}
.thread--v { width: 100%; aspect-ratio: 320 / 354; }
.thread--h { display: none; width: 217.5%; aspect-ratio: 696 / 128; }
/* stacked: opening door 1 moves door 2 down, so the strand steps aside gracefully */
.doors:has(.door--try details[open]) .thread--v { opacity: 0; }

/* --- „oder": a label on the strand --- */
.oder {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  height: calc(32 * var(--u));
  font-size: 1.125rem; font-weight: 600; line-height: 1;
}
.oder span { background: var(--c-ground); padding: .2em .5em .3em; border-radius: 999px; }

/* --- opened door --- */
.door-body { display: grid; gap: var(--s-4); justify-items: start; padding: var(--s-2) var(--door-px) var(--s-5); }
.door-body h2 {
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-claim);
  line-height: .98; letter-spacing: -.005em; hyphens: manual; text-wrap: balance;
}
.door-body h2 .ln { display: block; }
.door-body p { max-width: 36ch; text-wrap: pretty; }
.moments { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.moments li { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; }
.moments svg, .door-save svg {
  width: 2.25rem; height: 2.25rem; padding: .4rem; flex: none; border-radius: 50%;
  background: var(--c-ground); fill: none; stroke: var(--c-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.door-save { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 48px; font-weight: 600; }
.door-save svg { background: transparent; border: 1.5px solid var(--c-ink); padding: .35rem; }

/* ==========================================================================
   Closing block: the one main save button
   ========================================================================== */
.save { padding-block: var(--s-8) var(--s-7); display: grid; gap: var(--s-5); justify-items: start; }
.save h2 {
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-claim);
  line-height: .98; text-wrap: balance; hyphens: manual; max-width: 14ch;
}
.save-meta { display: grid; gap: var(--s-1); font-size: .9375rem; }
.save-meta a { font-weight: 600; }

/* Button that "extrudes": two offset layers in the door colours = both halves */
.btn {
  --bx: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 3.5rem; padding: var(--s-3) var(--s-6);
  background: var(--c-ink); color: var(--c-ground); border-radius: 999px;
  font-family: var(--f-text); font-weight: 650; font-size: 1.125rem; line-height: 1.1;
  text-decoration: none; border: 0; cursor: pointer;
  box-shadow: var(--bx) var(--bx) 0 var(--c-try), calc(var(--bx) * 2) calc(var(--bx) * 2) 0 var(--c-design);
  transition: transform .14s ease-out, box-shadow .14s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; transform: translate(-2px, -2px); --bx: 5px; }
.btn:active { transform: translate(6px, 6px); --bx: 1px; }
.btn svg { flex: none; }
.btn--big { min-height: 4rem; font-size: 1.25rem; width: 100%; max-width: 26rem; }

/* ---------- Footer ---------- */
.foot {
  border-top: var(--line) solid var(--c-ink);
  padding-block: var(--s-4) var(--s-5);
  padding-bottom: max(var(--s-5), env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center;
  font-size: .9375rem;
}
.foot nav { display: flex; gap: var(--s-1) var(--s-5); flex-wrap: wrap; }
.foot a { display: inline-flex; align-items: center; min-height: 48px; }

/* ==========================================================================
   Motion: enhancement only. Every animation ends in the static, complete state;
   with reduced motion nothing moves.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* the strand draws itself once: nozzle → gap → sketch */
  .thread path { stroke-dasharray: 1; animation: draw 2.2s cubic-bezier(.45, .05, .35, 1) .35s both; }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

  /* door 1: the hand lifts the finished print off the plate */
  .lift { animation: lift .7s cubic-bezier(.3, .7, .3, 1) .25s both; }
  @keyframes lift { from { transform: translateY(8px); } to { transform: none; } }

  /* door 2: when the strand arrives, the sketch completes and the object appears in the hand */
  .sk { animation: fade .5s ease-out 2.3s both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  .solid { transform-box: fill-box; transform-origin: 50% 100%; animation: pop .55s cubic-bezier(.2, .9, .3, 1.3) 2.55s both; }
  @keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } }

  /* the wordmark's 3D block prints in 8 layers */
  .wordmark .wm-3d { animation: print .5s steps(8, end) .05s both; }
  @keyframes print { from { clip-path: inset(100% -20% -20% -20%); } to { clip-path: inset(-20% -20% -20% -20%); } }

  /* opening a door: animated height where the browser supports it (no JS needed) */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .door details::details-content { block-size: 0; overflow: clip; transition: block-size .32s ease-out, content-visibility .32s allow-discrete; }
    .door details[open]::details-content { block-size: auto; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- ≥ 48em (768 px): doors side by side, the strand runs sideways ---------- */
@media (min-width: 48em) {
  :root { --door-r: 32px; --door-px: 28px; --ex: 8px; }
  .bar { min-height: 4rem; }
  .doors { grid-template-columns: minmax(0, 320fr) minmax(0, 56fr) minmax(0, 320fr); align-items: start; margin-top: var(--s-2); }
  .doors > * { --u: calc(100cqw / 696); }
  .door--try summary, .door--design summary { flex-direction: column; padding: calc(16 * var(--u)) 0 var(--s-6); gap: var(--s-4); }
  .door-q { margin-top: var(--s-2); }
  .thread--v { display: none; }
  .thread--h { display: block; }
  /* the strand crosses the gap at y = 18 (artwork units) below the artwork's top edge */
  .oder { height: auto; align-self: start; margin-top: calc(34 * var(--u)); transform: translateY(-50%); }
  .door-body { padding: 0 var(--door-px) var(--s-6); }
  .save { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s-7); }
  .save .btn--big { width: auto; min-width: 20rem; }
  .save-meta { grid-column: 2; }
  .save h2 { grid-row: span 2; }
}

/* ---------- ≥ 64em: larger door lines ---------- */
@media (min-width: 64em) {
  :root { --t-door: clamp(2.75rem, 2.4vw + 1.2rem, 3.75rem); }
}

/* ---------- Long-form pages (Impressum, Datenschutz, 404) ---------- */
.doc { padding-block: var(--s-7) var(--s-8); }
.doc h1 {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: .95; margin-bottom: var(--s-6); hyphens: manual;
}
.doc .prose { max-width: 66ch; }
.prose h2 { font-family: var(--f-text); font-weight: 650; font-size: 1.25rem; line-height: 1.3; margin: var(--s-6) 0 var(--s-2); }
.prose h3 { font-family: var(--f-text); font-weight: 650; font-size: 1.0625rem; margin: var(--s-5) 0 var(--s-1); }
.prose p, .prose ul, .prose address { margin: 0 0 var(--s-4); }
.prose address { font-style: normal; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--s-1); }
.ph { background: var(--c-ink-a12); padding: 0 .2em; font-weight: 600; } /* visible {{placeholder}} */
.nf-home { margin-top: var(--s-6); }
.prose small { font-size: .875rem; }
.prose code { white-space: nowrap; font-size: .9em; }