/*
 * lageplan-service.de — Prototyp
 *
 * Farben und Schrift kommen aus dem Markenpaket (lageplan-service-brand,
 * BRANDSHEET.md). Die Werte selbst stehen in brand/brand-tokens.css, hier
 * werden sie nur Rollen zugeordnet. Aufbau wie smartthings.de: Archivo 800
 * für Überschriften, Archivo 400 für Text, Balken statt Haarlinien, kein Radius.
 *
 * Weiß und Anthrazit tragen den Auftritt. Signalorange ist der Pin und heißt
 * „Sie sind hier“: im Logo, im Standort der Demo und im Schild-Muster.
 * Kartengrün ist der Grund des Bands zu den QR-Codes, Orangerot die Aktion
 * „Projekt anfragen“. Auswahl und Hover in der Demo: Anthrazit.
 *
 * Masse aus der Leiter von smartthings.de (Basis 18 px, Schritte Wurzel phi).
 */

@layer reset, tokens, base, layout, components;

/* ─── reset ──────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  address { font-style: normal; }
  img, picture { display: block; max-inline-size: 100%; block-size: auto; }
  button, input { font: inherit; color: inherit; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
}

/* ─── tokens ─────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    color-scheme: light;

    /* Rollen → Markenfarben (Werte in brand/brand-tokens.css) */
    --ink:     var(--brand-ink);      /* Anthrazit: Text, Balken, Auswahl */
    --muted:   var(--brand-slate);    /* Neutralgrau: Begleittext, 6,9 : 1 auf Weiß */
    --subtle:  var(--brand-slate);
    --grund:   var(--brand-white);    /* Seitenhintergrund: reines Weiß laut Marke */
    --paper:   var(--brand-white);    /* Karten, Felder, Schild */
    --surface: color-mix(in srgb, var(--brand-ink) 5%, var(--brand-white));
    --rule:    color-mix(in srgb, var(--brand-ink) 16%, var(--brand-white));
    --karte:   var(--brand-leaf);     /* Kartengrün: Band „Sie sind hier“; Anthrazit darauf 4,6 : 1, Weiß nur 3,5 : 1 */
    --aktion:  var(--brand-mapred);   /* Orangerot: Projekt anfragen; Weiß darauf 4,0 : 1, reicht nur für große Schrift */
    --orange:  var(--brand-orange);   /* nur der Pin: Sie sind hier */

    --display:      var(--brand-font);
    --display-wght: var(--brand-font-weight-logo);
    --display-luft: 0.015em;          /* Archivo 800 braucht weniger negative Sperrung, als die Werte unten vorgeben */
    --body:         var(--brand-font);

    --phi:  1.618034;
    --wphi: 1.272020;
    --stufe0:  1.125rem;
    --stufe-1: calc(var(--stufe0) / var(--wphi));
    --stufe-2: calc(var(--stufe0) / var(--phi));
    --stufe-3: calc(var(--stufe-1) / var(--phi));
    --stufe-4: calc(var(--stufe-2) / var(--phi));
    --stufe1:  calc(var(--stufe0) * var(--wphi));
    --stufe2:  calc(var(--stufe0) * var(--phi));
    --stufe3:  calc(var(--stufe1) * var(--phi));
    --stufe4:  calc(var(--stufe2) * var(--phi));
    --stufe5:  calc(var(--stufe3) * var(--phi));
    --stufe6:  calc(var(--stufe4) * var(--phi));
    --stufe7:  calc(var(--stufe5) * var(--phi));
    --stufe8:  calc(var(--stufe6) * var(--phi));

    --gutter:  clamp(var(--stufe0), 5vw, var(--stufe6));
    --logo-breite: clamp(320px, 28vw, 440px);       /* Marke: mindestens 320 px */
    --kopf-pad:    clamp(var(--stufe-2), 1.2vw, var(--stufe0));
    /* Höhe der fixierten Kopfzeile: Logo (2386 × 360) plus Innenabstand plus Balken */
    --kopf-hoehe:  calc(var(--logo-breite) * 360 / 2386 + 2 * var(--kopf-pad) + var(--balken));
    --measure: 78rem;
    --sec:     clamp(var(--stufe6), 11vw, var(--stufe8));
    --balken:  3px;
  }
}

/* ─── base ───────────────────────────────────────────────────────────── */
@layer base {
  /* Sprungziele nicht unter der fixierten Kopfzeile verstecken */
  html { scroll-padding-top: calc(var(--kopf-hoehe) + var(--stufe0)); }
  body {
    background: var(--grund);
    color: var(--ink);
    font-family: var(--body);
    font-size: var(--stufe0);
    line-height: var(--phi);
    -webkit-font-smoothing: antialiased;
  }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

  .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;
    inset-inline-start: -9999px;
    padding: var(--stufe-2) var(--stufe-1);
    background: var(--ink);
    color: var(--paper);
    font-size: var(--stufe-1);
    z-index: 30;
  }
  .skip:focus { inset-inline-start: var(--gutter); inset-block-start: var(--stufe-2); }

  .lp-sprite { display: none; }
  svg { display: block; }
}

/* ─── layout ─────────────────────────────────────────────────────────── */
@layer layout {
  .wrap {
    inline-size: 100%;
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .wrap--bleed { max-inline-size: none; }
  .band { padding-block: var(--sec); }
  .band--grau { background: var(--surface); }
}

/* ─── components ─────────────────────────────────────────────────────── */
@layer components {

  /* Kopfzeile */
  .masthead {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stufe0);
    padding-block: var(--kopf-pad);
    background: var(--paper);
    border-block-end: var(--balken) solid var(--ink);
  }
  /* Logo laut Marke mindestens 320 px breit, deshalb fällt die Navigation auf
     schmalen Schirmen weg statt das Logo zu verkleinern. */
  .wordmark { flex: none; }
  .wordmark img { inline-size: var(--logo-breite); block-size: auto; }
  .masthead nav { display: flex; align-items: center; gap: clamp(var(--stufe-1), 2.4vw, var(--stufe2)); }
  .masthead nav a:not(.knopf) {
    font-size: var(--stufe-1);
    font-weight: 600;
    color: var(--muted);
    transition: color .15s ease;
  }
  .masthead nav a:not(.knopf):hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
  @media (max-width: 68rem) {
    .masthead nav a:not(.knopf) { display: none; }
  }
  /* Handy: Bildmarke statt Logo (Brandsheet: unter 320 px die Bildmarke allein),
     daneben bleibt „Projekt anfragen“ sichtbar */
  @media (max-width: 37rem) {
    :root {
      --logo-breite: 48px;
      --kopf-hoehe: calc(48px * 460 / 488 + 2 * var(--kopf-pad) + var(--balken));
    }
  }

  /* Hero */
  .hero { padding-block: clamp(var(--stufe3), 7vw, var(--stufe6)) clamp(var(--stufe2), 4vw, var(--stufe4)); }
  .hero h1 {
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: max(var(--stufe3), min(8vw, 12svh, var(--stufe7)));
    line-height: 0.92;
    letter-spacing: calc(-0.035em + var(--display-luft));
    text-transform: uppercase;
  }
  .hero-unterschied {
    margin-block-start: clamp(var(--stufe1), 3vw, var(--stufe2));
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: clamp(var(--stufe1), 2.6vw, var(--stufe3));
    line-height: 1.05;
    letter-spacing: calc(-0.02em + var(--display-luft));
  }
  .nachsatz {
    margin-block-start: clamp(var(--stufe1), 3vw, var(--stufe3));
    max-inline-size: 38ch;
    color: var(--muted);
    font-size: clamp(var(--stufe0), 1.8vw, var(--stufe1));
    line-height: 1.45;
    text-wrap: pretty;
  }

  /* Abschnittsmarke */
  .marke {
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: clamp(var(--stufe1), 2.6vw, var(--stufe3));
    line-height: 1.05;
    letter-spacing: calc(-0.02em + var(--display-luft));
    margin-block-end: clamp(var(--stufe2), 5vw, var(--stufe4));
    max-inline-size: 24ch;
    text-wrap: balance;
  }

  /* Zeilen mit Balken – wie die Expertise auf smartthings.de */
  .zeilen { border-block-end: var(--balken) solid var(--ink); }
  .zeilen > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--stufe-4) var(--stufe4);
    align-items: baseline;
    padding-block: clamp(var(--stufe0), 3vw, var(--stufe2));
    border-block-start: var(--balken) solid var(--ink);
  }
  @media (min-width: 44rem) {
    .zeilen > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618034fr); }
  }
  .zeilen h3 {
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: clamp(var(--stufe1), 3.6vw, var(--stufe3));
    line-height: 1;
    letter-spacing: calc(-0.03em + var(--display-luft));
  }
  .zeilen p { color: var(--muted); text-wrap: pretty; max-inline-size: 46ch; }

  /* ─── Demo ─────────────────────────────────────────────────────── */
  .demo { padding-block-end: var(--sec); }
  .demo-hinweis { margin-block-start: var(--stufe-1); color: var(--muted); font-size: var(--stufe-1); max-inline-size: 60ch; }

  /* Oben Suche und Weg-Schalter, darunter die Themen über die ganze Breite */
  .demo-leiste {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--stufe-2);
    padding: var(--stufe-2);
    border: var(--balken) solid var(--ink);
    border-block-end: 0;
    background: var(--paper);
  }
  .demo-suche { position: relative; display: flex; align-items: center; max-inline-size: 30rem; }
  .demo-schalter-gruppe { grid-row: 1; grid-column: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .demo-themen { grid-row: 2; grid-column: 1 / -1; }
  @media (max-width: 34rem) {
    .demo-leiste { grid-template-columns: minmax(0, 1fr); }
    .demo-schalter-gruppe { grid-row: 3; grid-column: 1; justify-content: flex-start; }
    /* Themen in einer Zeile zum Wischen statt drei Zeilen hoch */
    .demo-leiste .demo-themen { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--stufe-2)); padding-inline: var(--stufe-2); scrollbar-width: none; }
    .demo-leiste .demo-themen::-webkit-scrollbar { display: none; }
    .demo-leiste .demo-chip { flex: none; }
  }
  .demo-suche > svg { position: absolute; left: 12px; width: 18px; height: 18px; pointer-events: none; }
  .demo-suche input {
    inline-size: 100%;
    min-block-size: 44px;
    padding: 0 12px 0 40px;
    border: 2px solid var(--ink);
    border-radius: 0;
    background: var(--paper);
    font-size: var(--stufe-1);
  }
  .demo-suche input::placeholder { color: var(--subtle); opacity: 1; }
  .demo-suche input:focus-visible { outline-offset: 2px; }
  .demo-treffer {
    position: absolute;
    inset-inline: 0;
    top: calc(100% - 2px);
    z-index: 8;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 2px solid var(--ink);
    background: var(--paper);
  }
  .demo-treffer li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    font-size: var(--stufe-1);
    cursor: pointer;
  }
  .demo-treffer li + li { border-block-start: 1px solid var(--rule); }
  .demo-treffer li[aria-selected="true"], .demo-treffer li:hover { background: var(--ink); color: var(--paper); }
  .demo-treffer .treffer-thema { color: inherit; opacity: .7; }
  .demo-treffer .treffer-leer { cursor: default; color: var(--muted); }
  .demo-treffer .treffer-leer:hover { background: none; color: var(--muted); }

  .demo-themen { display: flex; flex-wrap: wrap; gap: 6px; }
  .demo-chip, .demo-schalter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-block-size: 44px;
    padding: 0 12px;
    border: 2px solid var(--ink);
    background: var(--paper);
    font-size: var(--stufe-1);
    font-weight: 600;
    cursor: pointer;
  }
  .demo-chip svg, .demo-schalter svg { width: 18px; height: 18px; flex: none; }
  .demo-chip svg { color: var(--farbe); }
  .demo-chip:hover, .demo-schalter:hover { background: var(--surface); }
  .demo-chip[aria-pressed="true"], .demo-schalter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
  .demo-chip[aria-pressed="true"] { background: var(--farbe); border-color: var(--farbe); }
  .demo-chip[aria-pressed="true"] svg { color: inherit; }
  .demo-chip .anzahl { font-weight: 400; opacity: .7; }

  .demo-buehne { position: relative; }
  .demo-rahmen {
    position: relative;
    border: var(--balken) solid var(--ink);
    overflow: hidden;
    background: #F2F2F0;
  }
  .demo-leinwand { position: relative; }
  .demo-plan { inline-size: 100%; block-size: auto; }
  .plan-strasse { font: 600 15px var(--body); fill: #4F4D49; letter-spacing: .02em; }   /* 5,2 : 1 auf der Straße */
  .plan-flaeche { font: 600 17px var(--body); fill: #35552A; }
  .plan-wasser { fill: #1B4A6B; }   /* 5,4 : 1 auf dem Wasser */
  .plan-route, .demo-legende { display: none; }
  .demo-weg-an .plan-route { display: inline; }
  .demo-weg-an .demo-legende { display: flex; }
  .demo-legende {
    align-items: center;
    gap: 12px;
    padding: 10px var(--stufe-2);
    border: var(--balken) solid var(--ink);
    border-block-start: 0;
    background: var(--paper);
    font-size: var(--stufe-1);
    font-weight: 600;
    line-height: 1.35;
  }
  .legende-linie { flex: none; inline-size: 34px; block-size: 6px; background: radial-gradient(circle, var(--ink) 2.6px, transparent 3px) 0 50% / 10px 6px repeat-x; }

  .demo-marker { position: absolute; inset: 0; pointer-events: none; }
  .ort {
    position: absolute;
    translate: -50% -50%;
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border: 2px solid var(--paper);
    background: var(--farbe, var(--ink));   /* Farbe des ersten Themas, aus demo.js */
    color: var(--paper);
    box-shadow: 0 1px 3px rgb(0 0 0 / .25);
    pointer-events: auto;
    cursor: pointer;
    transition: opacity .2s ease, transform .15s ease;
  }
  .ort svg { width: 18px; height: 18px; }
  .ort:hover { transform: scale(1.12); }
  .ort[aria-current="true"] { outline: 3px solid var(--ink); outline-offset: 2px; transform: scale(1.12); }
  .ort.aus { opacity: .18; }
  .ort-name {
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    translate: 0 -50%;
    padding: 2px 6px;
    background: var(--ink);
    color: var(--paper);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
  }
  .ort--links .ort-name { left: auto; right: calc(100% + 6px); }
  .ort:hover .ort-name, .ort:focus-visible .ort-name, .ort[aria-current="true"] .ort-name { opacity: 1; }

  /* Sie sind hier: der Pin aus dem Logo. Seine Spitze sitzt auf dem Ort. */
  .pin { display: block; overflow: visible; }
  .pin-saum { fill: var(--paper); stroke: var(--paper); stroke-width: 20; stroke-linejoin: round; }
  .pin-tropfen { fill: var(--orange); }
  .pin-auge { fill: var(--paper); }
  .hier {
    position: absolute;
    inline-size: 32px;
    translate: -50% -93.5%;   /* Spitze: x 50 %, y 159 von 170 */
    pointer-events: none;
    z-index: 4;
  }
  .hier::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 93.5%;
    inline-size: 22px;
    block-size: 22px;
    translate: -50% -50%;
    border-radius: 50%;
    border: 3px solid var(--orange);
    z-index: -1;
    opacity: 0;
  }
  .hier.puls::after { animation: puls 2.3s cubic-bezier(.2, .6, .3, 1) 2; }
  .ort.unter-pin { visibility: hidden; }
  @keyframes puls {
    0% { transform: scale(.6); opacity: .95; }
    55% { opacity: .6; }
    100% { transform: scale(3); opacity: 0; }
  }
  .hier-name {
    position: absolute;
    right: calc(100% + 8px);
    top: 30%;
    translate: 0 -50%;
    padding: 3px 8px;
    background: var(--orange);
    color: var(--ink);        /* Anthrazit auf Signalorange: 5,3 : 1 */
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: 14px;
    letter-spacing: calc(-0.01em + var(--display-luft));
    white-space: nowrap;
  }

  .demo-info {
    position: absolute;
    top: var(--stufe0);
    right: var(--stufe0);
    z-index: 6;
    inline-size: min(22rem, calc(100% - 2 * var(--stufe0)));
    max-block-size: calc(100% - 2 * var(--stufe0));
    overflow: auto;
    padding: var(--stufe1) var(--stufe1) var(--stufe0);
    border: var(--balken) solid var(--ink);
    background: var(--paper);
  }
  .demo-info:focus { outline: none; }
  /* Liegt der gewählte Ort rechts, kommt die Karte nach links, damit der Ort sichtbar bleibt */
  .demo-info--links { right: auto; left: var(--stufe0); }
  .demo-zu {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .demo-zu svg { width: 22px; height: 22px; }
  .demo-zu:hover { background: var(--surface); }
  .demo-info-thema { font-size: var(--stufe-1); font-weight: 600; color: var(--muted); padding-inline-end: 40px; }
  .demo-info-thema.ist-hier { color: var(--ink); --farbe: var(--orange); }
  .demo-info-thema::before {
    content: "";
    display: inline-block;
    inline-size: .7em;
    block-size: .7em;
    margin-inline-end: .45em;
    background: var(--farbe);   /* Quadrat in Themenfarbe wie die Ortssymbole */
  }
  .demo-info-thema.ist-hier::before { border-radius: 50%; }
  .demo-info-titel {
    margin-block-start: var(--stufe-4);
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: var(--stufe2);
    line-height: 1.02;
    letter-spacing: calc(-0.025em + var(--display-luft));
    padding-inline-end: 24px;
  }
  .demo-info-text { margin-block-start: var(--stufe-1); font-size: var(--stufe-1); line-height: 1.5; color: var(--muted); }
  .demo-info-naehe { margin-block-start: var(--stufe0); }
  .demo-info-naehe h4 { font-size: var(--stufe-1); font-weight: 600; }
  .demo-info-naehe ul { margin: var(--stufe-3) 0 0; padding: 0; list-style: none; border-block-start: 2px solid var(--ink); }
  .demo-info-naehe li { border-block-end: 1px solid var(--rule); }
  .demo-info-naehe button {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    inline-size: 100%;
    padding: 9px 0;
    border: 0;
    background: none;
    font-size: var(--stufe-1);
    text-align: left;
    cursor: pointer;
  }
  .demo-info-naehe button:hover span:first-child { text-decoration: underline; text-underline-offset: .2em; }
  .demo-info-naehe .meter { color: var(--subtle); white-space: nowrap; }
  .demo-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-start: var(--stufe0);
    min-block-size: 40px;
    padding: 0 12px;
    border: 2px solid var(--ink);
    background: var(--paper);
    font-size: var(--stufe-1);
    font-weight: 600;
    cursor: pointer;
  }
  .demo-link svg { width: 16px; height: 16px; }
  .demo-link:hover { background: var(--surface); }

  @media (max-width: 52rem) {
    .demo-info {
      position: relative;
      top: auto;
      right: auto;
      inline-size: auto;
      max-block-size: none;
      border-block-start: 0;
    }
  }

  /* ─── Mobil: Vorschau in der Seite, Bedienung im Vollbild ─────────
     Auf dem Handy zeigt die Seite nur den ganzen Park als Vorschau. „Karte öffnen“,
     ein Tipp auf die Vorschau, #ort= und #hier= öffnen die Karte im Vollbild mit
     Zoom (Panzoom), schwebender Leiste und einem Blatt für Liste und Infokarte. */
  /* .demo davor, damit .knopf (weiter unten) „Karte öffnen“ nicht wieder einblendet */
  .demo .demo-zurueck, .demo .demo-zoom, .demo .demo-vorschau-flaeche, .demo .demo-blatt, .demo .demo-oeffnen, .demo .demo-geste { display: none; }

  /* Gegenskalierung: Symbole und Pin bleiben beim Zoomen gleich groß (--k aus demo.js) */
  .ort { scale: var(--k, 1); }
  .hier { scale: var(--k, 1); transform-origin: 50% 93.5%; }

  .demo-zoom button { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; background: none; cursor: pointer; }
  .demo-zoom button + button { border-block-start: 2px solid var(--ink); }
  .demo-zoom svg { width: 20px; height: 20px; }
  .demo-blatt-griff {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-block-size: 52px;
    border: 0;
    background: none;
    font-size: var(--stufe-1);
    font-weight: 600;
    cursor: pointer;
  }
  .demo-blatt-griff svg { width: 20px; height: 20px; transition: rotate .2s ease; }
  .demo-blatt-griff[aria-expanded="true"] svg { rotate: 180deg; }
  .demo-blatt-liste { overflow: auto; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--rule); }
  .demo-blatt-liste button {
    display: flex;
    align-items: center;
    gap: 12px;
    inline-size: 100%;
    min-block-size: 48px;
    padding: 0 16px;
    border: 0;
    border-block-end: 1px solid var(--rule);
    background: none;
    font-size: var(--stufe-1);
    text-align: start;
    cursor: pointer;
  }
  .demo-blatt-liste .punkt { flex: none; inline-size: 14px; block-size: 14px; background: var(--farbe); }
  .demo-blatt-liste .thema { margin-inline-start: auto; color: var(--muted); font-size: 13px; }

  /* Desktop und Tablet: Zoom-Knöpfe unten rechts im Rahmen, Ortsliste links in der Karte */
  @media (min-width: 40.0625rem) {
    .demo .demo-zoom {
      display: grid;
      position: absolute;
      right: 12px;
      bottom: 12px;
      z-index: 5;
      border: 2px solid var(--ink);
      background: var(--paper);
    }
    .demo--liste .demo-blatt {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: var(--stufe0);
      left: var(--stufe0);
      z-index: 6;
      inline-size: min(17rem, 42%);
      max-block-size: calc(100% - 2 * var(--stufe0));
      border: var(--balken) solid var(--ink);
      background: var(--paper);
    }
    .demo--liste .demo-blatt-griff { display: none; }
    .demo--liste .demo-blatt-liste { border-block-start: 0; }
  }
  /* Infofenster lässt unten Platz für die Zoom-Knöpfe */
  @media (min-width: 52.0625rem) {
    .demo-info { max-block-size: calc(100% - 2 * var(--stufe0) - 150px); }
  }

  /* Kontrastmodus. Karte: Wege weiß mit schwarzem Rand, Wasser weiß mit schwarzem Ufer, Gebäude fast
     schwarz, Rasen hellgrau, Beschriftung schwarz; alles Übrige in Graustufen. Die Ortssymbole behalten
     ihre Themenfarbe und bekommen einen schwarzen Rand. */
  .demo--kontrast .demo-plan { filter: grayscale(1); }
  .demo--kontrast .demo-plan [fill="#E9E7E1"] { fill: #fff; }
  .demo--kontrast .demo-plan [fill="#CFCDC7"] { fill: #A6A6A6; }
  .demo--kontrast .demo-plan [fill="#CDE4B0"] { fill: #E6E6E6; }
  .demo--kontrast .demo-plan [fill="#B5D596"] { fill: #D2D2D2; }
  .demo--kontrast .demo-plan [fill="#DCEEC8"] { fill: #F4F4F4; }
  .demo--kontrast .demo-plan [fill="#C2DE9E"] { fill: #DADADA; }
  .demo--kontrast .demo-plan [fill="#9FD0EE"] { fill: #fff; }
  .demo--kontrast .demo-plan [fill="#F7EEDB"] { fill: #fff; }
  .demo--kontrast .demo-plan [fill="#BFC2C6"] { fill: #C8C8C8; }
  .demo--kontrast .demo-plan [fill="#DDF1EF"] { fill: #fff; }
  .demo--kontrast .demo-plan [fill="#A0694B"] { fill: #1A1A1A; }
  .demo--kontrast .demo-plan [fill="#8A6A48"] { fill: #1A1A1A; }
  .demo--kontrast .demo-plan [fill="#6D7C8A"] { fill: #1A1A1A; }
  .demo--kontrast .demo-plan [fill="#4B525B"] { fill: #000; }
  .demo--kontrast .demo-plan [stroke="#5E8F45"] { stroke: #000; }
  .demo--kontrast .demo-plan [stroke="#C2AE85"] { stroke: #000; }
  .demo--kontrast .demo-plan [stroke="#F7EEDB"] { stroke: #fff; }
  .demo--kontrast .demo-plan [stroke="#5DA6D6"] { stroke: #000; }
  .demo--kontrast .demo-plan [stroke="#7A6448"] { stroke: #000; }
  .demo--kontrast .demo-plan [stroke="#BCD99D"] { stroke: #777; }
  .demo--kontrast .demo-plan [stroke="#CBE7F8"] { stroke: #999; }
  .demo--kontrast .demo-plan [stroke="#4E8C86"] { stroke: #000; }
  .demo--kontrast .plan-strasse, .demo--kontrast .plan-flaeche { fill: #000; }
  .demo--kontrast .demo-rahmen { background: #fff; }
  .demo--kontrast .ort { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; }

  /* Kontrastmodus. Bedienung: reines Schwarz auf Weiß, kräftigere Rahmen, nichts abgeschwächt */
  .demo--kontrast { --ink: #000; --muted: #000; --subtle: #000; --rule: #000; }
  .demo--kontrast .demo-chip, .demo--kontrast .demo-schalter, .demo--kontrast .demo-suche input,
  .demo--kontrast .demo-zurueck, .demo--kontrast .demo-link, .demo--kontrast .demo-zoom { border-width: 3px; }
  .demo--kontrast .demo-chip svg { color: currentColor; }
  .demo--kontrast .demo-chip .anzahl, .demo--kontrast .demo-treffer .treffer-thema { opacity: 1; }
  .demo--kontrast .demo-chip[aria-pressed="true"] { background: #000; border-color: #000; color: #fff; }
  .demo--kontrast .demo-suche input::placeholder { color: #333; }
  .demo--kontrast .demo-info-thema::before, .demo--kontrast .demo-blatt-liste .punkt { outline: 1px solid #000; }

  /* Windows-Kontrastmodus: Symbole, Auswahl und Fokus mit Systemfarben */
  @media (forced-colors: active) {
    .ort { outline: 2px solid CanvasText; }
    .ort[aria-current="true"] { outline: 3px solid Highlight; }
    .demo-zoom, .demo-blatt, .demo-info { border-color: CanvasText; }
  }

  @media (max-width: 40rem) {
    .demo .demo-leinwand { min-inline-size: 0; }

    /* Vorschau: nur ansehen, die Seite scrollt normal weiter */
    .demo:not(.demo--voll) .demo-leiste,
    .demo:not(.demo--voll) .demo-legende,
    .demo:not(.demo--voll) .demo-info,
    .demo:not(.demo--voll) .ort-name,
    .demo:not(.demo--voll) .hier { display: none; }
    .demo:not(.demo--voll) .demo-rahmen { overflow: hidden; }
    .demo:not(.demo--voll) .ort { inline-size: 22px; block-size: 22px; border-width: 1.5px; box-shadow: none; }
    .demo:not(.demo--voll) .ort svg { width: 13px; height: 13px; }
    .demo:not(.demo--voll) .demo-vorschau-flaeche {
      display: block;
      position: absolute;
      inset: 0;
      z-index: 7;
      border: 0;
      background: none;
      cursor: pointer;
    }
    .demo:not(.demo--voll) .demo-oeffnen {
      display: flex;
      justify-content: center;
      gap: 10px;
      inline-size: 100%;
      margin-block-start: var(--stufe-1);
    }
    .demo-oeffnen { background: var(--paper); cursor: pointer; }
    .demo-oeffnen svg { width: 20px; height: 20px; }

    /* Vollbild */
    html.demo-offen, html.demo-offen body { overflow: hidden; }
    .demo--voll .demo-app {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      background: var(--paper);
    }
    .demo--voll .demo-leiste {
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 8px;
      padding: 8px;
      border: 0;
      border-block-end: var(--balken) solid var(--ink);
    }
    .demo--voll .demo-zurueck {
      display: grid;
      place-items: center;
      inline-size: 44px;
      block-size: 44px;
      border: 2px solid var(--ink);
      background: var(--paper);
      cursor: pointer;
    }
    .demo--voll .demo-zurueck svg { width: 22px; height: 22px; }
    .demo--voll .demo-suche { grid-column: 2; grid-row: 1; }
    .demo--voll .demo-schalter-gruppe { grid-column: 3; grid-row: 1; justify-self: end; flex-wrap: nowrap; }
    .demo--voll .demo-schalter { padding: 0 11px; }
    .demo--voll #demo-liste-knopf { display: none; }
    .demo--voll .schalter-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .demo--voll .demo-leiste .demo-themen { grid-column: 1 / -1; grid-row: 2; margin-inline: -8px; padding-inline: 8px; }

    .demo--voll .demo-buehne { min-block-size: 0; overflow: hidden; }
    .demo--voll .demo-rahmen { position: absolute; inset: 0; border: 0; background: #E9E7E1; }   /* Farbe des Gehwegs am Kartenrand */
    .demo--voll .demo-leinwand { position: absolute; left: 0; inline-size: 100%; }
    /* Symbole und Pin bleiben beim Zoomen gleich groß (--k = 1 / Zoomfaktor) */
    .demo--voll .demo-legende { position: absolute; top: 8px; left: 8px; right: 64px; z-index: 5; border-block-start: var(--balken) solid var(--ink); }

    .demo--voll.demo--ganz .demo-geste {
      display: block;
      position: absolute;
      top: 18px;
      left: 16px;
      right: 72px;
      z-index: 4;
      color: var(--muted);
      font-size: var(--stufe-1);
      font-weight: 600;
      pointer-events: none;
    }
    .demo--voll .demo-zoom {
      display: grid;
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 6;
      border: 2px solid var(--ink);
      background: var(--paper);
    }

    /* Infokarte und Ortsliste als Blatt am unteren Rand */
    .demo--voll .demo-info {
      position: absolute;
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 8;
      inline-size: auto;
      max-block-size: 58%;
      border: 0;
      border-block-start: var(--balken) solid var(--ink);
      box-shadow: 0 -6px 18px rgb(0 0 0 / .12);
    }
    .demo--voll .demo-blatt {
      display: flex;
      flex-direction: column;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 7;
      max-block-size: 58%;
      border-block-start: var(--balken) solid var(--ink);
      background: var(--paper);
      box-shadow: 0 -6px 18px rgb(0 0 0 / .12);
    }
    .demo--voll .demo-info:not([hidden]) ~ .demo-blatt { display: none; }
  }

  /* ─── Kartengrünes Band: Sie sind hier ─────────────────────────── */
  /* Weiß auf Kartengrün hat nur 3,5 : 1. WCAG AA lässt das für große Schrift
     zu (ab 24 px normal oder ab 19 px fett), deshalb ist hier alles groß. */
  .band--karte {
    background: var(--karte);
    color: #fff;
    --ink: #fff;
    --muted: #fff;
  }
  .band--karte :focus-visible { outline-color: #fff; }
  .band--karte .knopf { font-size: max(1.1875rem, var(--stufe0)); font-weight: 700; }
  .band--karte .knopf:hover { background: #fff; border-color: #fff; color: var(--brand-ink); }
  .qr {
    display: grid;
    gap: var(--stufe4);
    align-items: center;
  }
  @media (min-width: 52rem) {
    .qr { grid-template-columns: minmax(0, 1.618034fr) minmax(0, 1fr); }
  }
  .qr-titel {
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: clamp(var(--stufe4), 8vw, var(--stufe7));
    line-height: .92;
    letter-spacing: calc(-0.035em + var(--display-luft));
    text-transform: uppercase;
  }
  .qr-text p {
    margin-block-start: var(--stufe0);
    max-inline-size: 40ch;
    font-size: clamp(1.5rem, 1.8vw, var(--stufe2));   /* mindestens 24 px, siehe .band--karte */
    line-height: 1.4;
    text-wrap: pretty;
  }
  .qr-text p:first-of-type { margin-block-start: clamp(var(--stufe1), 3vw, var(--stufe3)); }

  .knopf {
    display: inline-flex;
    align-items: center;
    min-block-size: 48px;
    margin-block-start: var(--stufe2);
    padding: 0 var(--stufe0);
    border: var(--balken) solid currentColor;
    font-weight: 600;
    font-size: var(--stufe0);
  }
  .knopf:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
  /* Projekt anfragen: Weiß auf Orangerot hat 4,0 : 1. Das genügt nur für große
     Schrift (ab 19 px fett), deshalb 700 statt 600 und nie kleiner als 19 px. */
  .knopf--voll {
    background: var(--aktion);
    border-color: var(--aktion);
    color: #fff;
    font-size: max(1.1875rem, var(--stufe0));
    font-weight: 700;
  }
  .knopf--klein { min-block-size: 44px; margin-block-start: 0; }

  /* Schild-Muster: so sähe die Tafel vor Ort aus */
  /* Aufkleberformat 10 × 15 cm, deshalb fest 2 : 3 */
  .schild {
    display: flex;
    flex-direction: column;
    aspect-ratio: 2 / 3;
    min-block-size: 0;          /* sonst dehnt der Inhalt das Format; der QR-Code schrumpft stattdessen */
    justify-self: center;
    inline-size: min(100%, 300px);
    padding: var(--stufe1);
    background: var(--paper);
    color: var(--brand-ink);
    border: 6px solid var(--brand-ink);
    rotate: -2deg;
  }
  .schild-ort {
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: var(--stufe1);
    line-height: 1.05;
    letter-spacing: calc(-0.02em + var(--display-luft));
  }
  .schild-hier {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-start: var(--stufe0);
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: var(--stufe0);
  }
  .schild-hier .pin { inline-size: 20px; flex: none; }
  .schild-qr { flex: 1 1 auto; min-block-size: 0; margin-block-start: var(--stufe0); inline-size: 100%; block-size: auto; object-fit: contain; object-position: left center; image-rendering: pixelated; }
  .schild-fuss { margin-block-start: var(--stufe-1); font-size: var(--stufe-1); font-weight: 600; }

  /* ─── Aufkleber und Schilder ────────────────────────────────────── */
  .marke.dachzeile { margin-block-end: var(--stufe0); }
  .aufkleber-titel {
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: clamp(var(--stufe3), 4.6vw, var(--stufe5));   /* ein langes Wort, bricht nur an den Bindestrichen */
    line-height: .95;
    letter-spacing: calc(-0.035em + var(--display-luft));
    text-transform: uppercase;
  }
  .aufkleber-titel + .nachsatz { max-inline-size: 46ch; }
  .muster {
    display: grid;
    gap: var(--stufe2);
    margin-block: clamp(var(--stufe3), 6vw, var(--stufe5));
  }
  @media (min-width: 52rem) { .muster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .muster figure { margin: 0; }
  .muster-buehne {
    display: grid;
    place-items: center;
    block-size: 300px;
    overflow: hidden;
    background: var(--surface);
  }
  .muster figcaption { margin-block-start: var(--stufe-1); max-inline-size: 36ch; color: var(--muted); font-size: var(--stufe-1); line-height: 1.5; }
  .muster figcaption strong { color: var(--ink); font-weight: 700; }

  /* Muster 1: Aufkleber, wie das Schild im Band, nur kleiner und gerade */
  .schild--klein { inline-size: 170px; padding: 12px; border-width: 4px; rotate: 0deg; }
  .schild--klein .schild-ort { font-size: 15px; }
  .schild--klein .schild-hier { margin-block-start: 8px; gap: 6px; font-size: 12px; }
  .schild--klein .schild-hier .pin { inline-size: 12px; }
  .schild--klein .schild-qr { margin-block-start: 8px; }
  .schild--klein .schild-fuss { margin-block-start: 6px; font-size: 9px; }

  /* Muster 2: runder Bodenaufkleber auf Fliesen, in Perspektive */
  .muster-buehne--boden { perspective: 700px; background: #DCD9D2; }
  .boden {
    display: grid;
    place-items: center;
    inline-size: 160%;
    block-size: 160%;
    background:
      linear-gradient(#0000 calc(100% - 2px), rgb(0 0 0 / .09) 0) 0 0 / 64px 64px,
      linear-gradient(90deg, #0000 calc(100% - 2px), rgb(0 0 0 / .09) 0) 0 0 / 64px 64px,
      #E6E3DC;
    transform: rotateX(50deg);
  }
  .boden-aufkleber {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    inline-size: 200px;
    block-size: 200px;
    border: 6px solid var(--brand-ink);
    border-radius: 50%;
    background: var(--paper);
    color: var(--brand-ink);
  }
  .boden-aufkleber .schild-hier { margin: 0; gap: 6px; font-size: 13px; }
  .boden-aufkleber .schild-hier .pin { inline-size: 12px; }
  .boden-aufkleber img { inline-size: 92px; block-size: auto; image-rendering: pixelated; }

  /* Muster 3: Schild aus gebürstetem Aluverbund mit vier Bohrungen */
  .alu-schild {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    inline-size: 270px;
    padding: 22px;
    color: var(--brand-ink);
    background:
      radial-gradient(circle at 10px 10px, #8C9298 2.5px, #0000 3.5px),
      radial-gradient(circle at calc(100% - 10px) 10px, #8C9298 2.5px, #0000 3.5px),
      radial-gradient(circle at 10px calc(100% - 10px), #8C9298 2.5px, #0000 3.5px),
      radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #8C9298 2.5px, #0000 3.5px),
      repeating-linear-gradient(0deg, rgb(255 255 255 / .25) 0 1px, #0000 1px 3px),
      linear-gradient(120deg, #D2D6DA, #EEF0F2 35%, #C6CBD0 62%, #E6E9EC);
    box-shadow: 0 8px 18px rgb(0 0 0 / .18);
  }
  .alu-schild .schild-ort { font-size: 16px; }
  .alu-schild .schild-hier { margin-block-start: 8px; gap: 6px; font-size: 12px; }
  .alu-schild .schild-hier .pin { inline-size: 12px; }
  .alu-schild img { inline-size: 84px; block-size: auto; padding: 5px; background: #fff; image-rendering: pixelated; }

  .aufkleber-arten { margin-block-start: clamp(var(--stufe3), 6vw, var(--stufe5)); max-inline-size: 60ch; color: var(--muted); font-size: clamp(var(--stufe0), 1.6vw, var(--stufe1)); line-height: 1.5; text-wrap: pretty; }
  .aufkleber-fuss { margin-block-start: var(--stufe2); max-inline-size: 70ch; }

  /* Für wen */
  .orte-liste {
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: clamp(var(--stufe1), 4vw, var(--stufe4));
    line-height: 1.12;
    letter-spacing: calc(-0.025em + var(--display-luft));
    max-inline-size: 28ch;
    text-wrap: balance;
  }

  /* Ablauf – echte Reihenfolge, deshalb Nummern */
  .schritte {
    display: grid;
    gap: 0 var(--stufe2);
    border-block-start: var(--balken) solid var(--ink);
  }
  @media (min-width: 48rem) { .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .schritte li {
    padding-block: var(--stufe1) var(--stufe2);
    border-block-end: 1px solid var(--rule);
  }
  @media (min-width: 48rem) { .schritte li { border-block-end: 0; } }
  .schritt-nr {
    display: block;
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: clamp(var(--stufe4), 6vw, var(--stufe6));
    line-height: .9;
    letter-spacing: calc(-0.04em + var(--display-luft));
  }
  .schritte h3 {
    margin-block-start: var(--stufe-1);
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: var(--stufe1);
    letter-spacing: calc(-0.02em + var(--display-luft));
    line-height: 1.1;
  }
  .schritte p { margin-block-start: var(--stufe-3); color: var(--muted); text-wrap: pretty; }

  /* Listen: Material und Preis */
  .spalten { display: grid; gap: var(--stufe3); }
  @media (min-width: 48rem) { .spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .spalte-titel {
    padding-block-end: var(--stufe-2);
    border-block-end: var(--balken) solid var(--ink);
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: var(--stufe1);
    letter-spacing: calc(-0.02em + var(--display-luft));
  }
  .haken li, .striche li {
    position: relative;
    padding: var(--stufe-2) 0 var(--stufe-2) 2em;
    border-block-end: 1px solid var(--rule);
    text-wrap: pretty;
  }
  .haken li::before {
    content: "";
    position: absolute;
    left: .15em;
    top: calc(var(--stufe-2) + .42em);
    inline-size: .8em;
    block-size: .45em;
    border-inline-start: 3px solid var(--ink);
    border-block-end: 3px solid var(--ink);
    rotate: -45deg;
  }
  .striche li::before {
    content: "";
    position: absolute;
    left: .1em;
    top: calc(var(--stufe-2) + .78em);
    inline-size: .9em;
    block-size: 3px;
    background: var(--ink);
  }

  .preis { display: grid; gap: var(--stufe3); }
  .preis-zahl {
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: clamp(var(--stufe5), 10vw, var(--stufe8));
    line-height: .9;
    letter-spacing: calc(-0.045em + var(--display-luft));
    text-transform: uppercase;
  }
  .preis-option {
    margin-block-start: calc(-1 * var(--stufe2));
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: clamp(var(--stufe1), 2.4vw, var(--stufe2));
    letter-spacing: calc(-0.02em + var(--display-luft));
  }
  .preis-teile { display: grid; gap: var(--stufe3); }
  @media (min-width: 48rem) { .preis-teile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .preis-fuss { color: var(--subtle); font-size: var(--stufe-1); }

  /* Fragen */
  .fragen { border-block-end: var(--balken) solid var(--ink); max-inline-size: 52rem; }
  .fragen details { border-block-start: var(--balken) solid var(--ink); }
  .fragen summary {
    display: flex;
    justify-content: space-between;
    gap: var(--stufe0);
    padding-block: var(--stufe0);
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: clamp(var(--stufe0), 2vw, var(--stufe1));
    letter-spacing: calc(-0.015em + var(--display-luft));
    line-height: 1.2;
    cursor: pointer;
    list-style: none;
  }
  .fragen summary::-webkit-details-marker { display: none; }
  .fragen summary::after { content: "+"; flex: none; font-size: 1.3em; line-height: .9; }
  .fragen details[open] summary::after { content: "–"; }
  .fragen details p { padding-block-end: var(--stufe1); max-inline-size: 60ch; color: var(--muted); text-wrap: pretty; }

  /* Kontakt */
  .kontakt-titel {
    font-family: var(--display); font-weight: var(--display-wght);
    font-size: clamp(var(--stufe3), 6vw, var(--stufe6));
    line-height: .95;
    letter-spacing: calc(-0.035em + var(--display-luft));
    text-transform: uppercase;
    max-inline-size: 16ch;
  }
  .kontakt address {
    display: grid;
    gap: var(--stufe-2);
    margin-block-start: clamp(var(--stufe2), 5vw, var(--stufe4));
    padding-block-start: var(--stufe1);
    border-block-start: var(--balken) solid var(--ink);
    font-size: clamp(var(--stufe0), 1.8vw, var(--stufe1));
    line-height: 1.45;
  }
  .kontakt .name { font-family: var(--display); font-weight: var(--display-wght); letter-spacing: calc(-0.02em + var(--display-luft)); }
  .kontakt .firma { color: var(--muted); }
  .draht { display: grid; gap: var(--stufe-4); margin-block-start: var(--stufe-2); font-weight: 600; word-break: break-word; }
  .draht a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; text-decoration-color: var(--rule); }
  .draht a:hover { text-decoration-color: var(--ink); }

  /* Fusszeile */
  .it-liste { max-inline-size: 52rem; margin-block-end: clamp(var(--stufe4), 8vw, var(--stufe6)); }

  .site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stufe-3) var(--stufe2);
    justify-content: space-between;
    padding-block: clamp(var(--stufe1), 3vw, var(--stufe3));
    border-block-start: var(--balken) solid var(--ink);
    font-size: var(--stufe-1);
    color: var(--subtle);
  }
  .site-footer nav { display: flex; gap: var(--stufe1); }
  .site-footer a:hover { color: var(--ink); }
  .site-footer span a { color: var(--muted); }
}