/* =========================================================================
   pages.css — Bausteine der Vorlagenseiten
   ========================================================================= */

@layer pages {

  /* =======================================================================
     Hero — "Die Nadel"
     -----------------------------------------------------------------------
     Loest das alte Koffer-Intro ab (~260 Zeilen CSS plus Halte-Geste).
     Kein Klick, keine Wartezeit: die Nadel zieht die Wortmarke nach,
     waehrend der Rest schon lesbar dasteht.
     ======================================================================= */
  .hero {
    position: relative;
    display: grid;
    align-content: center;
    min-height: min(86svh, 48rem);
    padding-block: var(--space-10) var(--space-10);
  }
  .hero-inner { position: relative; z-index: var(--z-raised); max-width: 52rem; }

  /* --- Die Wortmarke, die sich selbst sticht --------------------------
     SVG-Text statt handgezeichneter Buchstabenpfade: nutzt die ohnehin
     geladene Cinzel und skaliert ueber die viewBox von selbst mit. */
  .wortmarke {
    width: 100%;
    max-width: 46rem;
    height: auto;
    margin-bottom: var(--space-6);
    overflow: visible;
  }
  .wortmarke text {
    font-family: var(--font-display);
    font-size: 112px;
    letter-spacing: 10px;
    text-anchor: middle;
    fill: var(--gold-400);
    stroke: var(--gold-400);
    stroke-width: 1.1;
    paint-order: stroke fill;
  }

  /* Ungezeichnet nur unter .zeichnen-js — ohne JavaScript steht die
     Wortmarke sofort da. pathLength wirkt auf <text> nicht, deshalb hier
     ein fester Wert statt der normierten 1 aus ink.css. */
  .zeichnen-js .wortmarke text[data-draw] {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    fill: transparent;
  }
  /* Erst die Kontur nachziehen, dann die Fuellung einblenden. */
  .zeichnen-js .wortmarke text[data-draw].ist-gezeichnet {
    stroke-dashoffset: 0;
    fill: var(--gold-400);
    transition: stroke-dashoffset 2200ms var(--ease-in-out) var(--verzug, 0ms),
                fill 900ms var(--ease-out) calc(var(--verzug, 0ms) + 1600ms);
  }

  .hero-lead {
    font-size: var(--step-1);
    color: var(--text-muted);
    margin-bottom: var(--space-8);
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

  /* --- Die Rankenebene ------------------------------------------------
     Liegt hinter allem und faengt keine Klicks ab. Die Ranken weichen dem
     Zeiger aus; gezeichnet wird in js/ranken-hero.js. */
  #ranken-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
  }

  /* =======================================================================
     Das Flash-Blatt
     -----------------------------------------------------------------------
     Motive dicht gepackt, unterschiedlich gross, jedes nummeriert — wie ein
     echtes Flash-Blatt an der Studiowand. Die Motive sind gezeichnetes SVG,
     keine Fotos: ~2 KB statt ~200 KB pro Stueck, keine Lizenzfrage, und sie
     koennen sich beim Scrollen selbst zeichnen.
     ======================================================================= */
  .flash-sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-5);
    /* content-visibility: auto stand hier und ist bewusst entfernt: bei zwoelf
       leichten SVG-Motiven spart es nichts, ueberspringt aber das Rendern
       ausserhalb des Bildes — wodurch Motive fertig gezeichnet auftauchen,
       statt sich zu zeichnen. */
  }
  .flash-item {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: var(--space-5);
    aspect-ratio: 3 / 4;
    color: var(--gold-400);
    text-align: center;
  }
  .flash-item .motif-svg {
    width: 100%; height: 100%;
    max-height: 11rem;
    margin-inline: auto;
    align-self: center;
  }
  .flash-caption { margin-top: var(--space-4); }
  .flash-name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: var(--bone);
  }
  .flash-meta {
    display: block;
    font-size: var(--step--1);
    color: var(--text-faint);
    margin-top: var(--space-1);
  }
  /* Die laufende Nummer sitzt in der Ecke des Blatts. */
  .flash-item .num::before {
    position: absolute; top: var(--space-4); left: var(--space-4);
    opacity: .8;
  }

  /* Der Aufklapp-Knopf liegt ueber der ganzen Kachel, bleibt aber ein
     echter Button — dadurch per Tastatur erreichbar. */
  .flash-open {
    position: absolute; inset: 0;
    width: 100%; border: 0; background: transparent;
    cursor: pointer;
  }

  /* --- Filter: reine CSS-Loesung ueber Radios + :has() ------------------- */
  .filter-bar {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    margin-bottom: var(--space-8);
  }
  .filter-bar input { position: absolute; opacity: 0; pointer-events: none; }
  .filter-chip {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    min-height: 2.5rem;
    font-size: var(--step--1);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: var(--border-hair) solid var(--hairline);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
  .filter-chip:hover { color: var(--bone); border-color: var(--hairline-strong); }
  .filter-bar input:checked + .filter-chip {
    color: var(--ink-900); background: var(--gold-400); border-color: var(--gold-400);
  }
  .filter-bar input:focus-visible + .filter-chip {
    outline: 2px solid var(--copper-400); outline-offset: 3px;
  }

  .galerie:has(#f-blackwork:checked)  .flash-item:not([data-stil='blackwork']),
  .galerie:has(#f-fineline:checked)   .flash-item:not([data-stil='fineline']),
  .galerie:has(#f-dotwork:checked)    .flash-item:not([data-stil='dotwork']),
  .galerie:has(#f-ornamental:checked) .flash-item:not([data-stil='ornamental']) {
    display: none;
  }

  /* --- Lightbox: natives <dialog>, keine Bibliothek --------------------- */
  .motif-dialog {
    width: min(92vw, 34rem);
    padding: var(--space-8);
    color: var(--text);
    background: var(--ink-800);
    border: var(--border-hair) solid var(--hairline-strong);
  }
  .motif-dialog::backdrop { background: rgb(7 8 10 / .82); backdrop-filter: blur(3px); }
  .motif-dialog .motif-svg { width: 12rem; margin: 0 auto var(--space-5); color: var(--gold-400); }
  .motif-dialog h3 { color: var(--gold-400); text-align: center; }
  .dialog-close { position: absolute; top: var(--space-4); right: var(--space-4); color: var(--text-muted); }

  /* =======================================================================
     Bausteine-Raster
     ======================================================================= */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-5);
  }
  .card { padding: var(--space-6); }
  .card h3 {
    font-size: var(--step-1);
    color: var(--gold-400);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: var(--space-3);
  }
  .card p { color: var(--text-muted); font-size: var(--step--1); }
  .card .motif-svg { width: 3rem; color: var(--gold-700); margin-bottom: var(--space-5); }

  /* =======================================================================
     Team — Sticky-Split statt Kartenraster
     ======================================================================= */
  .person { padding-block: var(--space-10); border-top: var(--border-hair) solid var(--hairline); }
  .person-portrait {
    display: grid; place-items: center;
    aspect-ratio: 3 / 4;
    color: var(--gold-700);
  }
  .person-portrait .motif-svg { width: 62%; }
  .person h2 { color: var(--gold-400); margin-bottom: var(--space-3); }
  .person .rolle { color: var(--text-faint); margin-bottom: var(--space-5); }

  .badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase;
    border: var(--border-hair) solid currentColor;
  }
  .badge--offen { color: var(--success); }
  .badge--warteliste { color: var(--copper-400); }

  .tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-5); }
  .tag {
    padding: var(--space-1) var(--space-3);
    font-size: var(--step--1);
    color: var(--text-muted);
    border: var(--border-hair) solid var(--hairline);
  }

  /* =======================================================================
     Ablauf — der Zeitstrahl zeichnet sich beim Scrollen
     ======================================================================= */
  .timeline { position: relative; padding-left: var(--space-8); }
  .timeline::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 1px; background: var(--hairline);
  }
  /* Die gefuellte Linie waechst mit dem Scrollfortschritt des Zeitstrahls. */
  .timeline::after {
    content: ''; position: absolute; left: 0; top: 0;
    width: 1px; height: 100%;
    background: var(--gold-400);
    transform-origin: top;
    transform: scaleY(1);
  }
  /* Wo es Scroll-Timelines gibt, laeuft die Linie kontinuierlich mit dem
     Scrollen mit — genau das ist hier der Reiz. */
  @supports (animation-timeline: view()) {
    .timeline::after {
      animation: linie-waechst linear both;
      animation-timeline: view();
      animation-range: entry 60% exit 40%;
    }
  }
  /* Sonst zeichnet js/zeichnen.js sie einmalig, sobald der Zeitstrahl
     ins Bild kommt. */
  @supports not (animation-timeline: view()) {
    .timeline::after {
      transform: scaleY(0);
      transition: transform 1600ms var(--ease-in-out);
    }
    .timeline.ist-gezeichnet::after { transform: scaleY(1); }
  }
  @keyframes linie-waechst { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  .schritt { position: relative; padding-bottom: var(--space-10); }
  .schritt::before {
    content: ''; position: absolute;
    left: calc(-1 * var(--space-8) - 4px); top: .55em;
    width: 9px; height: 9px;
    background: var(--ink-800);
    border: var(--border-hair) solid var(--gold-400);
    transform: rotate(45deg);
  }
  .schritt h3 { color: var(--gold-400); margin-bottom: var(--space-2); }

  /* --- Fakten-Tabelle --------------------------------------------------- */
  .fakten { width: 100%; border-collapse: collapse; }
  .fakten th, .fakten td {
    padding: var(--space-4) var(--space-3);
    text-align: left;
    border-bottom: var(--border-hair) solid var(--hairline);
  }
  .fakten th { font-weight: 400; color: var(--text-muted); }
  .fakten td { color: var(--gold-400); font-family: var(--font-display); }
  .table-scroll { overflow-x: auto; }

  /* --- Aufklappbares ---------------------------------------------------- */
  .faq details {
    border-bottom: var(--border-hair) solid var(--hairline);
    padding-block: var(--space-4);
  }
  .faq summary {
    cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; gap: var(--space-4);
    font-family: var(--font-display);
    letter-spacing: .06em;
    color: var(--bone);
    min-height: 2.5rem; align-items: center;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: '+'; color: var(--copper-400); font-size: var(--step-1); }
  .faq details[open] summary::after { content: '–'; }
  .faq details > p { margin-top: var(--space-3); color: var(--text-muted); }

  /* =======================================================================
     Formular
     ======================================================================= */
  .form-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, 1fr); }
  /* min-width: 0 ist hier entscheidend. Gitterelemente duerfen sonst nicht
     unter ihre Mindestbreite schrumpfen — und das Datei- sowie das Monatsfeld
     bringen eine sehr grosse mit. Ohne diese Zeile sprengen sie bei 360 px
     die ganze Spalte und damit das Layout der kompletten Seite. */
  .feld { display: grid; gap: var(--space-2); min-width: 0; }
  .feld > * { min-width: 0; max-width: 100%; }
  .feld--voll { grid-column: 1 / -1; }
  @media (max-width: 44rem) { .form-grid { grid-template-columns: 1fr; } }

  .feld label { font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
  .feld input, .feld select, .feld textarea {
    padding: var(--space-3) var(--space-4);
    min-height: 2.75rem;
    color: var(--bone);
    background: var(--ink-900);
    border: var(--border-hair) solid var(--hairline);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .feld textarea { min-height: 8rem; resize: vertical; field-sizing: content; }
  .feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--copper-400); }

  /* Validierung erst NACH der Eingabe zeigen: :user-invalid meckert nicht,
     solange das Feld noch gar nicht bearbeitet wurde. */
  .feld :user-invalid { border-color: var(--danger); }
  .feld :user-invalid + .fehler { display: block; }
  .fehler { display: none; font-size: var(--step--1); color: var(--danger); }

  .checkbox-feld { display: flex; gap: var(--space-3); align-items: start; grid-column: 1 / -1; }
  .checkbox-feld input { width: 1.15rem; height: 1.15rem; margin-top: .25rem; accent-color: var(--copper-500); }
  .checkbox-feld label { text-transform: none; letter-spacing: 0; font-size: var(--step--1); color: var(--text-muted); }

  /* Spam-Falle: fuer Menschen unsichtbar, fuer Bots verlockend. */
  .honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .form-status {
    padding: var(--space-5);
    border: var(--border-hair) solid var(--hairline-strong);
    background: var(--ink-700);
  }
  .form-status[hidden] { display: none; }
  .form-status h3 { color: var(--gold-400); margin-bottom: var(--space-2); }

  .demo-hinweis {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    font-size: var(--step--1);
    color: var(--text-muted);
    border-left: 2px solid var(--copper-500);
  }

  /* =======================================================================
     Abschluss-Band
     ======================================================================= */
  .cta-band {
    display: grid; gap: var(--space-5);
    justify-items: center; text-align: center;
    padding: var(--space-12) var(--space-6);
    margin-top: var(--space-16);
  }
  .cta-band h2 { color: var(--gold-400); }
  .cta-band p { color: var(--text-muted); }
}

@layer pages {
  /* =======================================================================
     Motive reagieren auf den Zeiger
     -----------------------------------------------------------------------
     Beim Darueberfahren wird das Motiv neu gestochen: die Linie laeuft
     zurueck und wieder vor. Reines CSS auf derselben Mechanik wie das
     Zeichnen beim Hereinscrollen — kein zusaetzliches JavaScript.
     ======================================================================= */
  .zeichnen-js .flash-item:hover [data-draw].ist-gezeichnet,
  .zeichnen-js .flash-item:focus-within [data-draw].ist-gezeichnet {
    animation: neu-stechen 1100ms var(--ease-in-out);
  }
  .zeichnen-js .flash-item:hover [data-draw='2'].ist-gezeichnet,
  .zeichnen-js .flash-item:focus-within [data-draw='2'].ist-gezeichnet { animation-delay: 90ms; }
  .zeichnen-js .flash-item:hover [data-draw='3'].ist-gezeichnet,
  .zeichnen-js .flash-item:focus-within [data-draw='3'].ist-gezeichnet { animation-delay: 180ms; }

  @keyframes neu-stechen {
    0%   { stroke-dashoffset: 0; }
    35%  { stroke-dashoffset: 1; }
    100% { stroke-dashoffset: 0; }
  }
}