@charset "utf-8";

/* =====================================================================
   SELDA BEAUTY — UNIQUE LASER ART
   Gestaltungssystem. Ruhe, Raum, Material.
   ===================================================================== */

/* ---- Schriften (lokal gehostet, kein Google-Abruf → DSGVO) ---------- */

@font-face {
    font-family: 'Cormorant';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('fonts/cormorant.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant';
    font-style: italic;
    font-weight: 300 600;
    font-display: swap;
    src: url('fonts/cormorant-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200 600;
    font-display: swap;
    src: url('fonts/inter.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---- Tokens --------------------------------------------------------- */

:root {
    /* Farbe */
    --rgb-grund:       17  17  17;   /* Grundtripel für halbdurchsichtige   */
    --rgb-grund-weich: 22  22  22;   /* Töne (Linien, Flächen, Schatten)     */
    --rgb-text:       241 237 230;
    --rgb-akzent:     226 198 193;
    --rgb-warn:       200 120 110;

    --ink:        #111111;   /* mattes Tiefschwarz — die Grundfläche      */
    --ink-deep:   #0a0a0a;   /* tiefer, für abgesetzte Bänder             */
    --ink-soft:   #161616;   /* minimal angehoben, für Flächen            */
    --creme:      #f1ede6;   /* Coconut Creme White                       */
    --creme-dim:  #a9a39a;   /* Fließtext                                 */
    /* Gemessen, nicht geschätzt: #858077 hält auf allen drei Gründen
       (#111111, #0a0a0a, #161616) die 4,5:1 der WCAG-Stufe AA — ein
       dunklerer Ton lag bei 3,5:1 und fiel durch. */
    --creme-mute: #858077;   /* Meta, Ziffern, Hilfstext                  */
    --blush:      #e2c6c1;   /* Cherry Blossom — sehr dezent              */
    --blush-deep: #c49a94;

    --line:       rgb(var(--rgb-text) / 11%);
    --line-soft:  rgb(var(--rgb-text) / 6%);
    --line-firm:  rgb(var(--rgb-text) / 22%);

    --schimmer:   none;
    --schimmer-x: 0 20px 60px rgb(0 0 0 / 35%);

    /* Schrift */
    --serif: 'Cormorant', 'Cormorant Garamond', 'Times New Roman', Times, serif;
    --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;

    /* Raum */
    --rand:   clamp(1.5rem, 5vw, 6rem);
    --bahn:   1500px;
    --luft:   clamp(6rem, 14vh, 11rem);
    --luft-s: clamp(3.5rem, 8vh, 6rem);

    /* Bewegung */
    --weich:  cubic-bezier(.22, 1, .36, 1);
    --ruhig:  cubic-bezier(.4, 0, .2, 1);

    color-scheme: dark;
}

/* ---- Grundlage ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--creme-dim);
    font-family: var(--sans);
    font-size: clamp(.95rem, .9rem + .25vw, 1.0625rem);
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: .012em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 300;
    color: var(--creme);
    margin: 0;
    line-height: 1.08;
    letter-spacing: .005em;
    font-variant-ligatures: common-ligatures;
}

p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--blush); color: var(--ink); }

:focus-visible {
    outline: 1px solid var(--blush);
    outline-offset: 4px;
}

/* Nur für Screenreader */
.vh {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sprung {
    position: absolute; top: 0; left: 50%;
    transform: translate(-50%, -150%);
    z-index: 200;
    padding: .9rem 1.6rem;
    background: var(--creme); color: var(--ink);
    font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
    transition: transform .3s var(--ruhig);
}
.sprung:focus { transform: translate(-50%, 0); }


/* ---- Raster --------------------------------------------------------- */

.bahn {
    width: 100%;
    max-width: var(--bahn);
    margin-inline: auto;
    padding-inline: var(--rand);
}

.abschnitt {
    position: relative;
    padding-block: var(--luft);
}

.abschnitt + .abschnitt { border-top: 1px solid var(--line-soft); }


/* ---- Wiederkehrende Bausteine --------------------------------------- */

/* Kapitelmarke: 01 · Über das Studio */
.marke {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    font-family: var(--sans);
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--creme-mute);
}
.marke__nr {
    font-family: var(--serif);
    font-size: .9rem;
    letter-spacing: .1em;
    color: var(--blush-deep);
}
.marke__strich {
    flex: 1 1 auto;
    height: 1px;
    background: var(--line);
    transform-origin: left;
}

/* Große Abschnittsüberschrift */
.titel {
    font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.4rem);
    line-height: 1.06;
    letter-spacing: -.005em;
    max-width: 18ch;
    text-wrap: balance;
}
.titel em {
    font-style: italic;
    color: var(--blush);
}

.vorspann {
    font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem);
    line-height: 1.7;
    color: var(--creme-dim);
    max-width: 46ch;
}

/* Feiner Zierstrich */
.haarlinie {
    width: 100%; height: 1px;
    background: var(--line);
    border: 0; margin: 0;
}


/* ---- Knöpfe --------------------------------------------------------- */

.knopf {
    --k-fg: var(--ink);
    --k-bg: var(--creme);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    padding: 1.15rem 2.6rem;
    background: var(--k-bg);
    color: var(--k-fg);
    font-family: var(--sans);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    border: 1px solid var(--k-bg);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: color .5s var(--ruhig), border-color .5s var(--ruhig);
}
.knopf::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--k-bg);
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform .55s var(--weich);
    z-index: -1;
}
.knopf:hover::before,
.knopf:focus-visible::before { transform: scaleY(0); }
.knopf:hover, .knopf:focus-visible { color: var(--creme); border-color: var(--creme); }

.knopf--linie {
    --k-bg: transparent;
    --k-fg: var(--creme);
    border-color: var(--line-firm);
}
.knopf--linie::before { background: var(--creme); }
.knopf--linie:hover, .knopf--linie:focus-visible { color: var(--ink); border-color: var(--creme); }
.knopf--linie:hover::before, .knopf--linie:focus-visible::before { transform: scaleY(1); }
.knopf--linie::before { transform: scaleY(0); transform-origin: bottom; }

/* Textlink mit wanderndem Unterstrich */
.tlink {
    position: relative;
    display: inline-block;
    color: var(--creme);
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .24em;
    text-transform: uppercase;
    padding-bottom: .5rem;
}
.tlink::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(1);
    transform-origin: right;
    transition: transform .5s var(--weich);
}
.tlink:hover::after, .tlink:focus-visible::after {
    transform: scaleX(0);
    transition-timing-function: var(--ruhig);
}


/* ---- Wortmarke ------------------------------------------------------ */
/*
   Rein typografisch. Zwei Zeilen, ohne jedes Bildzeichen.
   Das Q in UNIQUE ist eigens gezeichnet: es bleibt vollständig in der
   Silhouette des O — der Schwanz bricht weder nach unten noch nach rechts
   aus, sondern endet exakt auf der Grundlinie.
*/

.wortmarke {
    display: inline-block;
    text-align: center;
    color: var(--creme);
    line-height: 1;
}

.wortmarke__name {
    display: block;
    font-family: var(--serif);
    font-weight: 300;
    letter-spacing: .22em;
    text-indent: .22em;          /* Sperrung optisch mittig ausgleichen */
    white-space: nowrap;
}

.wortmarke__claim {
    display: block;
    font-family: var(--sans);
    font-weight: 300;
    /* Die Sperrung steht als eigener Wert da, weil das gezeichnete Q sie
       mitrechnen muss (siehe .q). Wer sie ändert, ändert nur diese Zeile. */
    --sperrung: .42em;
    letter-spacing: var(--sperrung);
    text-indent: var(--sperrung);   /* Sperrung optisch mittig ausgleichen */
    white-space: nowrap;
    color: var(--blush);
}

/*
   Das gezeichnete Q sitzt in der Zeile wie ein echter Buchstabe. Alle Maße
   sind am ausgelieferten Schnitt gemessen (Canvas, Inter 300), nicht
   geschätzt — das O ist der Bezug:

       Vorbreite / Nachbreite   0,0638 em
       Konturbreite             0,6312 em
       Versalhöhe (Rundung)     0,7373 em
       Unterschuss              0,0098 em

   Der Nachrand trägt zusätzlich die Sperrung. Grund: Sperrung entsteht nur
   zwischen echten Schriftzeichen — ein eingebettetes SVG ist für den Browser
   ein Element, kein Zeichen, und bekommt danach nichts. Ohne den Zuschlag
   klebt das folgende U am Q, während der Rest des Wortes weit auseinander
   steht; genau das war bis zum 05.09.2026 in „UNIQUE" zu sehen.

   preserveAspectRatio="none" im SVG: Breite und Höhe stammen aus zwei
   getrennten Messungen und treffen das Seitenverhältnis der Zeichnung auf
   ein halbes Prozent genau. Ohne diese Angabe passte der Browser die
   Zeichnung ein und ließe daneben einen schmalen Streifen frei — mit ihr
   sitzt die Kontur exakt auf den gemessenen Kanten.
*/
.q {
    display: inline-block;
    width:  .6312em;
    height: .7471em;                /* Versalhöhe + Unterschuss */
    vertical-align: -.0098em;       /* Unterschuss unter die Grundlinie */
    margin-left:  .0638em;
    margin-right: calc(.0638em + var(--sperrung, 0em));
    fill: currentColor;
}

/* Größen je Ort.
   Die Obergrenzen sind gemessen, nicht geschätzt: „SELDA BEAUTY" belegt bei
   dieser Sperrung 9,48 em, „BEAUTY" allein 5,00 em. Die Bahn lässt 90 vw
   Platz (bei sehr breiten Fenstern 1500 px minus Rand). Daraus folgt die
   zweite Schranke im min() — ohne sie liefe der Name über den Rand hinaus. */
.wortmarke--hero .wortmarke__name  { font-size: min(clamp(2.4rem, 1rem + 7.4vw, 8.1rem), 9.1vw); }
.wortmarke--hero .wortmarke__claim {
    font-size: clamp(.6rem, .44rem + .62vw, 1.05rem);
    margin-top: clamp(1.1rem, 2.2vw, 2rem);
}

.wortmarke--klein .wortmarke__name  { font-size: 1.02rem; letter-spacing: .2em; text-indent: .2em; }
.wortmarke--klein .wortmarke__claim { font-size: .4375rem; margin-top: .3rem; --sperrung: .34em; }

.wortmarke--fuss .wortmarke__name  { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.wortmarke--fuss .wortmarke__claim { font-size: clamp(.5rem, .9vw, .68rem); margin-top: .85rem; }


/* ---- Kopfzeile ------------------------------------------------------ */

.kopf {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    padding-block: clamp(1rem, 2.2vh, 1.9rem);
    transition: background-color .6s var(--ruhig), padding .6s var(--ruhig),
                border-color .6s var(--ruhig), backdrop-filter .6s var(--ruhig);
    border-bottom: 1px solid transparent;
}
.kopf {
    --rgb-grund: 17 17 17;
    --rgb-text: 244 239 232;
    --rgb-akzent: 226 198 193;
    --creme: rgb(var(--rgb-text));
    --creme-dim: #a9a39a;
    --creme-mute: #8b857c;
    --blush: rgb(var(--rgb-akzent));
    --line-soft: rgb(var(--rgb-text) / 6%);
    --line-firm: rgb(var(--rgb-text) / 24%);
    --ink: rgb(var(--rgb-grund));
}
.kopf--fest {
    --rgb-grund: 250 247 243;
    --rgb-text: 28 24 21;
    --rgb-akzent: 189 124 115;
    --creme-dim: #5c534b;
    --creme-mute: #857b71;
    --line-soft: rgb(var(--rgb-text) / 8%);
    --line-firm: rgb(var(--rgb-text) / 26%);
    background: rgb(var(--rgb-grund) / 88%);
    box-shadow: 0 1px 0 rgb(var(--rgb-text) / 7%), 0 10px 34px rgb(var(--rgb-text) / 5%);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom-color: var(--line-soft);
    padding-block: clamp(.7rem, 1.4vh, 1.1rem);
}
.kopf__reihe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(1.6rem, 2.6vw, 3rem);
}
.nav__link {
    position: relative;
    font-size: .6875rem;
    font-weight: 300;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--creme-dim);
    padding-block: .4rem;
    transition: color .4s var(--ruhig);
}
.nav__link::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--blush);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--weich);
}
.nav__link:hover, .nav__link:focus-visible, .nav__link[aria-current='true'] { color: var(--creme); }
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__link[aria-current='true']::after { transform: scaleX(1); }

.kopf__cta {
    padding: .85rem 1.9rem;
    font-size: .625rem;
    letter-spacing: .24em;
}

/* Menüknopf (nur schmale Bildschirme) */
.burger {
    display: none;
    width: 40px; height: 40px;
    padding: 0;
    background: none; border: 0;
    cursor: pointer;
    position: relative;
    z-index: 120;
}
.burger span {
    position: absolute;
    left: 8px; right: 8px; height: 1px;
    background: var(--creme);
    transition: transform .5s var(--weich), opacity .3s var(--ruhig);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 24px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }


/* ---- Filmkorn & Licht ----------------------------------------------- */

/* Feines Korn über der ganzen Seite: macht die Fläche matt statt digital-flach */
.korn {
    position: fixed;
    inset: -50%;
    z-index: 90;
    pointer-events: none;
    opacity: .028;
    background-image: var(--korn-bild);
    background-size: 220px 220px;
    will-change: transform;
    animation: kornWandern 7s steps(6) infinite;
}
@keyframes kornWandern {
    0%,100% { transform: translate(0,0); }
    16%  { transform: translate(-2%, 1%); }
    33%  { transform: translate(1%, -2%); }
    50%  { transform: translate(-1%, 2%); }
    66%  { transform: translate(2%, 1%); }
    83%  { transform: translate(-2%, -1%); }
}


/* ---- Auftakt (Hero) -------------------------------------------------- */

.auftakt {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    text-align: center;
    padding-block: clamp(8rem, 18vh, 12rem) clamp(5rem, 10vh, 8rem);
    overflow: hidden;
}

/* Weicher Lichtkegel — der einzige „Glanz" der Seite */
.auftakt__licht {
    position: absolute;
    left: 50%; top: 42%;
    width: min(150vw, 1500px);
    aspect-ratio: 1;
    translate: -50% -50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%,
            rgb(var(--rgb-akzent) / 7%)  0%,
            rgb(var(--rgb-akzent) / 3%) 26%,
            rgb(var(--rgb-text) / 2%) 44%,
            transparent           68%);
    will-change: transform;
}

.auftakt__inhalt {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* sonst wird die Spalte so breit wie ihr breitestes Kind */
    justify-items: center;
    gap: clamp(2.2rem, 4.5vh, 3.6rem);
}
.auftakt__inhalt > * { max-width: 100%; }

.auftakt__oben {
    font-size: .625rem;
    font-weight: 300;
    letter-spacing: .42em;
    text-indent: .42em;
    text-transform: uppercase;
    color: var(--creme-mute);
}

.auftakt__text {
    max-width: 52ch;
    font-size: clamp(.95rem, .9rem + .34vw, 1.18rem);
    line-height: 1.85;
    color: var(--creme-dim);
    text-wrap: pretty;
}

.auftakt__hinab {
    position: absolute;
    left: 50%; bottom: clamp(1.6rem, 4vh, 3rem);
    translate: -50% 0;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: .9rem;
    font-size: .5625rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--creme-mute);
    transition: opacity .5s var(--ruhig);
}
.auftakt__hinab i {
    display: block;
    width: 1px; height: clamp(34px, 6vh, 56px);
    background: linear-gradient(180deg, var(--line-firm), transparent);
    position: relative;
    overflow: hidden;
}
.auftakt__hinab i::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent, var(--blush), transparent);
    animation: hinab 2.8s var(--ruhig) infinite;
}
@keyframes hinab {
    0%   { transform: translateY(-100%); opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: translateY(100%);  opacity: 0; }
}
.gescrollt .auftakt__hinab { opacity: 0; }


/* ---- Laufband ------------------------------------------------------- */

.laufband {
    border-block: 1px solid var(--line-soft);
    background: var(--ink-deep);
    padding-block: clamp(1.4rem, 3vh, 2.2rem);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.laufband__spur {
    display: flex;
    width: max-content;
    animation: laufen 46s linear infinite;
}
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband__satz {
    display: flex;
    align-items: center;
    gap: clamp(2.4rem, 5vw, 5rem);
    padding-right: clamp(2.4rem, 5vw, 5rem);
    font-size: .6875rem;
    font-weight: 300;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--creme-mute);
    white-space: nowrap;
}
.laufband__satz b { font-weight: 300; color: var(--creme); }
.laufband__punkt { color: var(--blush-deep); font-size: .5rem; }
@keyframes laufen { to { transform: translateX(-50%); } }


/* ---- Zweispalter (Studio) ------------------------------------------- */

.spalten {
    display: grid;
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
}
@media (min-width: 62rem) {
    .spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
    .spalten--umgekehrt > :first-child { order: 2; }
}

/* Bildfläche — vorbereiteter Platz für echte Studiofotografie.
   Solange kein Foto hinterlegt ist, trägt die Fläche selbst:
   matter Verlauf, feine Kontur, ruhige Proportion. */
.flaeche {
    position: relative;
    aspect-ratio: 4 / 5;
    background:
        radial-gradient(120% 90% at 30% 15%, rgb(var(--rgb-akzent) / 8%), transparent 58%),
        radial-gradient(90% 70% at 78% 88%, rgb(var(--rgb-text) / 5%), transparent 62%),
        linear-gradient(155deg, #191919, #0d0d0d 62%);
    border: 1px solid var(--line-soft);
    overflow: hidden;
    isolation: isolate;
}
.flaeche--breit { aspect-ratio: 3 / 2; }
.flaeche > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
/* feine Innenkontur */
.flaeche::after {
    content: '';
    position: absolute; inset: clamp(10px, 2.2vw, 22px);
    border: 1px solid var(--line-soft);
    pointer-events: none;
}
.flaeche__wort {
    position: absolute;
    left: 50%; top: 50%;
    translate: -50% -50%;
    font-family: var(--serif);
    font-size: clamp(2.4rem, 7vw, 5rem);
    letter-spacing: .16em;
    text-indent: .16em;
    color: rgb(var(--rgb-text) / 7%);
    white-space: nowrap;
    user-select: none;
}

/* Kennzahlen */
.zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: clamp(1.6rem, 3vw, 3rem);
    margin-top: clamp(2.6rem, 5vw, 4rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--line);
}
.zahl__wert {
    display: block;
    font-family: var(--serif);
    font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem);
    font-weight: 300;
    color: var(--creme);
    line-height: 1;
}
.zahl__wort {
    display: block;
    margin-top: .7rem;
    font-size: .625rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--creme-mute);
}


/* ---- Leistungen ------------------------------------------------------ */

/* Hauptleistung: steht allein, bevor irgendetwas anderes kommt */
.haupt {
    position: relative;
    display: grid;
    gap: clamp(2rem, 4vw, 3.4rem);
    padding: clamp(2.4rem, 5vw, 4.5rem);
    border: 1px solid var(--line);
    background:
        radial-gradient(90% 130% at 88% 6%, rgb(var(--rgb-akzent) / 6%), transparent 55%),
        var(--ink-soft);
    overflow: hidden;
}
@media (min-width: 62rem) {
    .haupt { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(3rem, 6vw, 6rem); }
}
.haupt__label {
    font-size: .625rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--blush);
    margin-bottom: 1.4rem;
}
.haupt__titel {
    font-size: clamp(1.9rem, 1.1rem + 3.1vw, 3.6rem);
    line-height: 1.08;
    max-width: 15ch;
}
.haupt__text { margin-top: 1.8rem; max-width: 44ch; }
.haupt__liste {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: 0;
}
.haupt__liste li {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    padding-block: 1.05rem;
    border-top: 1px solid var(--line-soft);
    font-size: .9375rem;
    color: var(--creme-dim);
}
.haupt__liste li:last-child { border-bottom: 1px solid var(--line-soft); }
.haupt__liste li::before {
    content: '';
    flex: 0 0 auto;
    width: 16px; height: 1px;
    background: var(--blush-deep);
    transform: translateY(-.35em);
}

/* Bereiche als Editorial-Zeilen: Nummer, Name, Beschreibung */
.zeilen { margin-top: clamp(3rem, 6vw, 5rem); }

.zeile {
    position: relative;
    display: grid;
    gap: .5rem 2rem;
    align-items: baseline;
    padding-block: clamp(1.8rem, 3.4vw, 2.8rem);
    border-top: 1px solid var(--line);
    transition: color .5s var(--ruhig);
}
.zeile:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 48rem) {
    .zeile { grid-template-columns: 4rem minmax(0, 15rem) minmax(0, 1fr); }
}
.zeile__nr {
    font-family: var(--serif);
    font-size: .875rem;
    letter-spacing: .1em;
    color: var(--creme-mute);
    transition: color .5s var(--ruhig);
}
.zeile__name {
    font-family: var(--serif);
    font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem);
    font-weight: 300;
    color: var(--creme);
    line-height: 1.15;
}
.zeile__text {
    font-size: .9375rem;
    line-height: 1.75;
    color: var(--creme-dim);
    max-width: 52ch;
}
/* Beim Überfahren wandert eine feine Linie durch die Zeile */
.zeile::after {
    content: '';
    position: absolute;
    left: 0; top: -1px;
    width: 100%; height: 1px;
    background: var(--blush);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s var(--weich);
}
@media (hover: hover) {
    .zeile:hover::after { transform: scaleX(1); }
    .zeile:hover .zeile__nr { color: var(--blush); }
}


/* ---- Vorzüge --------------------------------------------------------- */

.gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
}
.kachel {
    position: relative;
    background: var(--ink);
    padding: clamp(1.9rem, 3.4vw, 3rem);
    display: grid;
    gap: 1rem;
    align-content: start;
    transition: background-color .6s var(--ruhig);
}
.kachel:hover { background: var(--ink-soft); }
.kachel__nr {
    font-family: var(--serif);
    font-size: .8125rem;
    letter-spacing: .1em;
    color: var(--blush-deep);
}
.kachel__titel {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem);
    font-weight: 300;
    color: var(--creme);
    line-height: 1.2;
}
.kachel__text { font-size: .875rem; line-height: 1.75; color: var(--creme-dim); }


/* ---- Ablauf ---------------------------------------------------------- */

.schritte {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    counter-reset: schritt;
}
@media (min-width: 48rem)  { .schritte { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem)  { .schritte { grid-template-columns: repeat(4, 1fr); } }

.schritt {
    position: relative;
    padding-top: clamp(1.6rem, 3vw, 2.4rem);
    border-top: 1px solid var(--line);
    counter-increment: schritt;
}
.schritt::before {
    content: counter(schritt, decimal-leading-zero);
    display: block;
    font-family: var(--serif);
    font-size: clamp(2.2rem, 1.4rem + 2vw, 3rem);
    font-weight: 300;
    line-height: 1;
    color: rgb(var(--rgb-text) / 38%);   /* 13 % lagen unter 3:1 (große Schrift, AA) */
    margin-bottom: 1.2rem;
    transition: color .6s var(--ruhig);
}
.schritt:hover::before { color: rgb(var(--rgb-akzent) / 45%); }
.schritt__titel {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
    font-weight: 300;
    color: var(--creme);
    margin-bottom: .8rem;
    line-height: 1.25;
}
.schritt__text { font-size: .875rem; line-height: 1.75; }


/* ---- Zitat ----------------------------------------------------------- */

.zitat {
    text-align: center;
    max-width: 34ch;
    margin-inline: auto;
}
.zitat__text {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
    line-height: 1.3;
    color: var(--creme);
}
.zitat__wer {
    display: block;
    margin-top: clamp(1.6rem, 3vw, 2.4rem);
    font-family: var(--sans);
    font-size: .625rem;
    font-style: normal;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--creme-mute);
}


/* ---- Kontakt --------------------------------------------------------- */

.kontakt {
    display: grid;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
}
@media (min-width: 62rem) { .kontakt { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); } }

.daten { display: grid; gap: 0; }
.daten__satz {
    display: grid;
    gap: .55rem;
    padding-block: clamp(1.3rem, 2.4vw, 1.8rem);
    border-top: 1px solid var(--line);
}
.daten__satz:last-of-type { border-bottom: 1px solid var(--line); }
.daten__wort {
    font-size: .625rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--creme-mute);
}
.daten__wert {
    font-family: var(--serif);
    font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem);
    font-weight: 300;
    color: var(--creme);
    line-height: 1.45;
    font-style: normal;
}
a.daten__wert { position: relative; display: inline-block; width: fit-content; }
a.daten__wert::after {
    content: '';
    position: absolute; left: 0; bottom: -.15em;
    width: 100%; height: 1px;
    background: var(--blush);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--weich);
}
a.daten__wert:hover::after, a.daten__wert:focus-visible::after { transform: scaleX(1); }

.zeiten { display: grid; gap: .45rem; margin: 0; }
.zeiten__reihe {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    font-size: .875rem;
    color: var(--creme-dim);
}
.zeiten__reihe dt { color: var(--creme-dim); }
.zeiten__reihe dd { margin: 0; color: var(--creme); }
.zeiten__reihe--zu dd { color: var(--creme-mute); }

.sozial { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }


/* ---- Formular -------------------------------------------------------- */

.formular { display: grid; gap: clamp(1.6rem, 3vw, 2.2rem); }
.feld-paar { display: grid; gap: clamp(1.6rem, 3vw, 2.2rem); }
@media (min-width: 34rem) { .feld-paar { grid-template-columns: 1fr 1fr; } }

.feld { position: relative; display: grid; }
.feld__label {
    font-size: .625rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--creme-mute);
    margin-bottom: .75rem;
    transition: color .4s var(--ruhig);
}
.feld:focus-within .feld__label { color: var(--blush); }

.feld input,
.feld select,
.feld textarea {
    width: 100%;
    padding: .85rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-firm);
    color: var(--creme);
    font-family: var(--sans);
    font-size: 1rem;      /* 16px: verhindert das Zoomen auf iOS */
    font-weight: 300;
    line-height: 1.6;
    border-radius: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    transition: border-color .5s var(--ruhig);
}
.feld textarea { resize: vertical; min-height: 7.5rem; }
.feld select {
    background-image: linear-gradient(45deg, transparent 50%, var(--creme-mute) 50%),
                      linear-gradient(135deg, var(--creme-mute) 50%, transparent 50%);
    background-position: right 6px center, right 1px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 1.6rem;
    cursor: pointer;
}
.feld select option { background: var(--ink-soft); color: var(--creme); }
.feld input::placeholder, .feld textarea::placeholder { color: var(--creme-mute); opacity: .65; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
    outline: none;
    border-bottom-color: var(--blush);
}
/* Autofill der Browser nicht weiß aufblitzen lassen */
.feld input:-webkit-autofill,
.feld textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--creme);
    -webkit-box-shadow: 0 0 0 60px var(--ink) inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* Einwilligung */
.zustimmung {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    font-size: .8125rem;
    line-height: 1.7;
    color: var(--creme-dim);
}
.zustimmung input[type='checkbox'] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    margin: .2rem 0 0;
    border: 1px solid var(--line-firm);
    background: transparent;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: border-color .4s var(--ruhig), background-color .4s var(--ruhig);
    flex: 0 0 auto;
}
.zustimmung input[type='checkbox']::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--ink);
    transform: scale(0);
    transition: transform .3s var(--weich);
}
.zustimmung input[type='checkbox']:checked {
    background: var(--blush);
    border-color: var(--blush);
}
.zustimmung input[type='checkbox']:checked::before { transform: scale(1); }
.zustimmung a { color: var(--creme); border-bottom: 1px solid var(--line-firm); }
.zustimmung a:hover { border-bottom-color: var(--blush); }

/* Honigtopf — für Menschen unsichtbar, für Bots verlockend */
.honig {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Rückmeldung */
.meldung {
    padding: 1.2rem 1.5rem;
    border: 1px solid var(--line-firm);
    font-size: .875rem;
    line-height: 1.7;
}
.meldung--gut  { border-color: rgb(var(--rgb-akzent) / 45%); background: rgb(var(--rgb-akzent) / 7%);  color: var(--creme); }
.meldung--fehl { border-color: rgb(var(--rgb-warn) / 45%); background: rgb(var(--rgb-warn) / 8%); color: var(--creme); }
.meldung[hidden] { display: none !important; }


/* ---- Karte ------------------------------------------------------------ */
/*
   Die Karte ist ein Bild vom eigenen Server, kein fremder Rahmen: Sie ist
   damit sofort sichtbar, überträgt nichts an Dritte und ist in die Farbwelt
   der Seite eingefärbt. Der Bildausschnitt ist so gewählt, dass die Anschrift
   genau in der Mitte liegt — deshalb sitzen Punkt und Schild schlicht auf 50 %.
*/

.karte {
    position: relative;
    width: 100%;
    max-width: 1120px;                    /* dieselbe Breite wie die Preisblätter */
    height: clamp(23rem, 34vw, 30rem);
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    border: 1px solid var(--line-soft);
    background: var(--ink-soft);
    overflow: hidden;
    isolation: isolate;
}
.karte picture, .karte img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}
.karte img { opacity: 1; }

/* Signalpunkt an der Anschrift */
.karte__punkt {
    position: absolute;
    left: 50%; top: 50%;
    translate: -50% -50%;
    width: 0; height: 0;
    z-index: 2;
}
.karte__kern, .karte__welle {
    position: absolute;
    left: 50%; top: 50%;
    border-radius: 50%;
    translate: -50% -50%;
}
.karte__kern {
    width: 15px; height: 15px;
    background: var(--blush-deep);
    /* weißer Ring plus dunkler Saum: hebt den Punkt sowohl von hellen
       Flächen als auch von dunklen Straßen der Karte ab */
    box-shadow: 0 0 0 3px #fff,
                0 0 0 4px rgb(var(--rgb-grund) / 55%),
                0 3px 14px rgb(var(--rgb-grund) / 45%);
}
.karte__welle {
    width: 15px; height: 15px;
    border: 2px solid var(--blush-deep);
    animation: karteWelle 3.4s cubic-bezier(.2, .7, .3, 1) infinite;
}
.karte__welle--zwei { animation-delay: 1.7s; }

@keyframes karteWelle {
      0% { width: 15px;  height: 15px;  opacity: .9; }
    100% { width: 124px; height: 124px; opacity: 0; }
}

/* Schild über dem Punkt */
.karte__schild {
    position: absolute;
    left: 50%; top: 50%;
    translate: -50% calc(-50% - clamp(4.2rem, 7vw, 5.6rem));
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: .5rem;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}
/* Dunkles Etikett: Die Karte ist hell, cremefarbene Schrift wäre darauf
   nicht zu lesen. Das Schild trägt sie und bleibt trotzdem zurückhaltend. */
.karte__schild {
    padding: clamp(.85rem, 1.6vw, 1.15rem) clamp(1.3rem, 2.6vw, 2.1rem);
    background: rgb(var(--rgb-grund) / 88%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgb(var(--rgb-akzent) / 38%);
    box-shadow: 0 10px 34px rgb(var(--rgb-grund) / 40%);
}
/* feine Verbindung zum Punkt darunter */
.karte__schild::after {
    content: '';
    position: absolute;
    left: 50%; top: 100%;
    translate: -50% 0;
    width: 1px;
    height: clamp(.9rem, 2vw, 1.5rem);
    background: linear-gradient(180deg, rgb(var(--rgb-akzent) / 70%), transparent);
}
.karte__name {
    display: flex;
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(1.15rem, .95rem + .8vw, 1.7rem);
    letter-spacing: .2em;
    text-indent: .2em;
    line-height: 1;
    color: var(--creme);
}
/* Die Buchstaben laufen nacheinander ein und schweben danach ruhig weiter */
.karte__name > span {
    display: inline-block;
    animation: karteBuchstabe .8s cubic-bezier(.22, 1, .36, 1) backwards,
               karteSchweben 5.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 70ms), calc(1s + var(--i) * 70ms);
}
@keyframes karteBuchstabe {
    from { opacity: 0; transform: translateY(14px) scale(.9); filter: blur(3px); }
    to   { opacity: 1; transform: none;                       filter: blur(0); }
}
@keyframes karteSchweben {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

.karte__adresse {
    font-size: .625rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--blush);
}

/* Weg dorthin */
.karte__weg {
    position: absolute;
    left: 50%; bottom: clamp(1.1rem, 2.6vw, 1.9rem);
    translate: -50% 0;
    z-index: 3;
    padding: .8rem 1.9rem;
    background: rgb(var(--rgb-grund) / 90%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgb(var(--rgb-akzent) / 34%);
    box-shadow: 0 8px 26px rgb(var(--rgb-grund) / 35%);
    color: var(--creme);
    font-size: .625rem;
    font-weight: 400;
    letter-spacing: .24em;
    text-transform: uppercase;
    transition: background-color .45s var(--ruhig), color .45s var(--ruhig),
                border-color .45s var(--ruhig);
}
.karte__weg:hover, .karte__weg:focus-visible {
    background: var(--creme);
    border-color: var(--creme);
    color: var(--ink);
}

.karte__quelle {
    position: absolute;
    right: 0; bottom: 0;
    z-index: 3;
    padding: .2rem .5rem;
    background: rgb(255 255 255 / 72%);
    font-size: .5625rem;
    letter-spacing: .04em;
    color: #4a4038;
}
.karte__quelle a { color: #2f2822; border-bottom: 1px solid rgb(47 40 34 / 35%); }
.karte__quelle a:hover { border-bottom-color: #2f2822; }

@media (prefers-reduced-motion: reduce) {
    .karte__welle { display: none; }
    .karte__name > span { animation: none; }
}


/* ---- Fußzeile -------------------------------------------------------- */

.fuss {
    border-top: 1px solid var(--line-soft);
    background: var(--ink-deep);
    padding-block: clamp(4rem, 9vh, 7rem) clamp(2rem, 4vh, 3rem);
}
.fuss__kopf {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
    justify-items: center;
    text-align: center;
    padding-bottom: clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid var(--line-soft);
}
.fuss__unten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem 2.5rem;
    padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
}
.fuss__nav { display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; }
.fuss__nav a, .fuss__recht {
    font-size: .6875rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--creme-mute);
    transition: color .4s var(--ruhig);
}
.fuss__nav a:hover, .fuss__nav a:focus-visible { color: var(--creme); }


/* ---- Schwebender Direktkontakt --------------------------------------- */

.schweber {
    position: fixed;
    right: clamp(1rem, 2.5vw, 2.2rem);
    bottom: clamp(1rem, 2.5vw, 2.2rem);
    z-index: 95;
    display: grid;
    gap: .7rem;
    justify-items: end;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .6s var(--ruhig), transform .6s var(--weich);
}
.gescrollt .schweber { opacity: 1; transform: none; pointer-events: auto; }

.schweber__knopf {
    display: grid;
    place-items: center;
    width: 3.25rem; height: 3.25rem;
    background: rgb(var(--rgb-grund-weich) / 92%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line-firm);
    color: var(--creme);
    transition: background-color .45s var(--ruhig), border-color .45s var(--ruhig),
                color .45s var(--ruhig), transform .45s var(--weich);
}
.schweber__knopf svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.schweber__knopf:hover, .schweber__knopf:focus-visible {
    background: var(--creme);
    border-color: var(--creme);
    color: var(--ink);
    transform: translateY(-2px);
}


/* ---- Fortschritt ----------------------------------------------------- */

.fortschritt {
    position: fixed;
    left: 0; top: 0;
    z-index: 110;
    width: 100%; height: 1px;
    background: transparent;
    pointer-events: none;
}
.fortschritt i {
    display: block;
    height: 100%;
    width: var(--f, 0%);
    background: linear-gradient(90deg, var(--blush-deep), var(--blush));
    transition: width .12s linear;
}


/* ---- Einblenden beim Scrollen ---------------------------------------- */

/* Wichtig: Die Startwerte gelten nur, wenn JavaScript läuft und die
   Elemente auch wieder einblenden kann. Ohne JS (oder wenn ein Fehler das
   Skript stoppt) steht der gesamte Inhalt sofort und vollständig da. */
.zeig { opacity: 1; transform: none; }

html.js .zeig {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1.1s var(--ruhig), transform 1.1s var(--weich);
}
html.js .zeig.da { opacity: 1; transform: none; }

/* gestaffelt */
.zeig--1 { transition-delay: .08s; }
.zeig--2 { transition-delay: .16s; }
.zeig--3 { transition-delay: .24s; }
.zeig--4 { transition-delay: .32s; }
.zeig--5 { transition-delay: .40s; }

/* Kapitelstrich wächst mit */
html.js .marke__strich { transform: scaleX(0); transition: transform 1.4s var(--weich) .2s; }
html.js .da .marke__strich, html.js .marke.da .marke__strich { transform: scaleX(1); }

/* Wortweises Auftauchen der Auftaktzeile */
/* Achtung Spezifitaet: Die Rueckwaerts-Regel braucht denselben html.js-Vorsatz,
   sonst gewinnt der Startwert und der Auftakt bleibt unsichtbar. */
html.js .auftakt__inhalt > * { opacity: 0; transform: translateY(20px); }
html.js .geladen .auftakt__inhalt > * {
    opacity: 1; transform: none;
    transition: opacity 1.3s var(--ruhig), transform 1.3s var(--weich);
}
html.js .geladen .auftakt__inhalt > :nth-child(1) { transition-delay: .15s; }
html.js .geladen .auftakt__inhalt > :nth-child(2) { transition-delay: .30s; }
html.js .geladen .auftakt__inhalt > :nth-child(3) { transition-delay: .45s; }
html.js .geladen .auftakt__inhalt > :nth-child(4) { transition-delay: .60s; }
html.js .geladen .auftakt__inhalt > :nth-child(5) { transition-delay: .75s; }


/* ---- Schmale Bildschirme --------------------------------------------- */

@media (max-width: 61.999rem) {
    .burger { display: block; }

    .nav {
        position: fixed;
        inset: 0;
        flex-direction: column;
        justify-content: center;
        gap: clamp(1.6rem, 4vh, 2.6rem);
        background: rgb(var(--rgb-grund) / 97%);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity .5s var(--ruhig), transform .6s var(--weich), visibility .5s;
        padding: 6rem var(--rand) 3rem;
        overflow-y: auto;
    }
    .nav[data-offen='true'] { opacity: 1; visibility: visible; transform: none; }
    .nav__link { font-size: 1.05rem; letter-spacing: .28em; }
    .nav .knopf { margin-top: 1.2rem; }
    .kopf__cta { display: none; }
    .nav .kopf__cta { display: inline-flex; font-size: .6875rem; padding: 1.05rem 2.4rem; }

    body[data-menue='auf'] { overflow: hidden; }
}

@media (max-width: 47.999rem) {
    .zeile { grid-template-columns: 1fr; gap: .35rem; }
    .zeile__nr { font-size: .75rem; letter-spacing: .18em; }
    .zeile__text { margin-top: .5rem; }
    .fuss__unten { flex-direction: column; align-items: flex-start; text-align: left; }
    .flaeche { aspect-ratio: 1 / 1; }
}

/* Schmale Geräte: Der Name stapelt sich statt zu schrumpfen — zweizeilig
   trägt „BEAUTY" nur 5,00 em statt 9,48 em, die Schrift darf also deutlich
   größer bleiben und der Auftakt behält seine Wirkung. */
@media (max-width: 39.999rem) {
    /* Bei zweizeiligem Namen ist die Wortmarke schmal; 34 % ergäben eine
       Zierlinie von unter 100 px, von der wegen der ausblendenden Enden
       kaum etwas übrig bleibt. */
    .wortmarke--hero .wortmarke__zier--oben,
    .wortmarke--hero .wortmarke__zier--unten { width: 54%; }

    .wortmarke--hero .wortmarke__name {
        white-space: normal;
        font-size: min(clamp(2.6rem, 1rem + 10vw, 5rem), 16.5vw);
        line-height: 1.06;
    }
    .wortmarke--hero .wortmarke__teil { display: block; }
    .wortmarke--fuss .wortmarke__name { font-size: clamp(1.5rem, 7.4vw, 2.2rem); }
}

/* Sehr schmal: Sperrung etwas zurücknehmen */
@media (max-width: 24rem) {
    .wortmarke--hero .wortmarke__claim { --sperrung: .3em; }
    .wortmarke--klein .wortmarke__name { font-size: .9rem; letter-spacing: .16em; text-indent: .16em; }
}


/* ---- Rücksicht auf Bewegungsempfindlichkeit -------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    html.js .zeig, html.js .auftakt__inhalt > * { opacity: 1 !important; transform: none !important; }
    html.js .marke__strich { transform: scaleX(1) !important; }
    .korn { animation: none; }
    .laufband__spur { animation: none; }
}


/* ---- Druck ----------------------------------------------------------- */

@media print {
    .kopf, .schweber, .korn, .fortschritt, .auftakt__hinab, .laufband { display: none !important; }
    body { background: #fff; color: #000; }
    h1, h2, h3, .zeile__name, .daten__wert { color: #000; }
    .zeig { opacity: 1 !important; transform: none !important; }
}


/* ---- Rechtstexte ----------------------------------------------------- */

.recht {
    padding-block: clamp(9rem, 20vh, 13rem) var(--luft);
    max-width: 72ch;
}
.recht h1 {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.recht h2 {
    font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem);
    margin: clamp(2.8rem, 5vw, 4rem) 0 1.1rem;
    padding-top: clamp(1.6rem, 3vw, 2.4rem);
    border-top: 1px solid var(--line-soft);
}
.recht h3 {
    font-family: var(--sans);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--creme);
    margin: 2rem 0 .8rem;
}
.recht p, .recht li { font-size: .9375rem; line-height: 1.85; }
.recht ul { padding-left: 1.2rem; margin: 0 0 1.4em; }
.recht li { margin-bottom: .5em; }
.recht a { color: var(--creme); border-bottom: 1px solid var(--line-firm); }
.recht a:hover { border-bottom-color: var(--blush); }
.recht address { font-style: normal; line-height: 1.85; }
.recht__stand { font-size: .8125rem; color: var(--creme-mute); margin-top: 3rem; }


/* ---- Preisliste: die drei Blätter ------------------------------------ */

.preise__kopf {
    display: grid;
    gap: clamp(1.6rem, 3vw, 2.5rem);
    margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
    max-width: 1120px;
    margin-inline: auto;
}
@media (min-width: 62rem) {
    .preise__kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}

/* Am Rechner nicht über die volle Bahn laufen lassen — die Blätter wirken
   sonst überdimensioniert. 1120 px ist die angenehme Lesebreite. */
.blaetter {
    display: grid;
    gap: clamp(1.5rem, 2.6vw, 2.2rem);
    max-width: 1120px;
    margin-inline: auto;
}

/* Ein Blatt ist ein Blatt Papier: eigener Rand, eigener Kopf, eigene Fußzeile */
.blatt {
    position: relative;
    padding: clamp(1.5rem, 2.5vw, 2.4rem);
    border: 1px solid var(--line);
    background:
        radial-gradient(120% 80% at 88% 0%, rgb(var(--rgb-akzent) / 5%), transparent 55%),
        var(--ink-soft);
    overflow: hidden;
    isolation: isolate;
}

/* Großes S als Wasserzeichen, wie auf den Flyern */
.blatt::before {
    content: 'S';
    position: absolute;
    top: -.28em; right: -.06em;
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(9rem, 19vw, 15rem);
    line-height: 1;
    color: rgb(var(--rgb-text) / 3%);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
/* Die Spurbuchstaben müssen absolut bleiben — sonst zieht diese Regel sie
   aus der Mausposition heraus ans Blattende. */
.blatt > *:not(.spur) { position: relative; z-index: 1; }

.blatt__kopf {
    display: grid;
    gap: .8rem;
    padding-bottom: clamp(1.2rem, 2vw, 1.7rem);
    margin-bottom: clamp(1.3rem, 2.2vw, 1.9rem);
    border-bottom: 1px solid var(--line);
}
@media (min-width: 48rem) {
    .blatt__kopf {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: 2rem;
    }
    .blatt__ober  { grid-column: 1; }
    .blatt__titel { grid-column: 1; }
    .blatt__motto { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
}
.blatt__ober {
    margin: 0;
    font-size: .625rem;
    font-weight: 400;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--blush);
}
.blatt__titel {
    margin: 0;
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.95rem);
    line-height: 1.12;
    letter-spacing: .06em;
    color: var(--creme);
}
.blatt__motto {
    margin: 0;
    font-size: .5625rem;
    letter-spacing: .26em;
    line-height: 1.9;
    text-transform: uppercase;
    color: var(--creme-mute);
}
.blatt__fuss {
    margin: clamp(1.3rem, 2.2vw, 1.8rem) 0 0;
    padding-top: clamp(.95rem, 1.7vw, 1.3rem);
    border-top: 1px solid var(--line-soft);
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--creme-mute);
    text-align: center;
}


/* ---- Blatt 1: Pakete -------------------------------------------------- */

.pakete { display: grid; gap: clamp(.7rem, 1.1vw, .95rem); }

.paket {
    display: grid;
    gap: 1.2rem;
    align-items: center;
    padding: clamp(1rem, 1.6vw, 1.35rem) clamp(1rem, 1.8vw, 1.5rem);
    border: 1px solid var(--line-soft);
    background: rgb(var(--rgb-text) / 2%);
    transition: border-color .5s var(--ruhig), background-color .5s var(--ruhig);
}
@media (min-width: 40rem) {
    .paket { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(1.5rem, 3vw, 3rem); }
    .paket__preis { border-left: 1px solid var(--line); padding-left: clamp(1.5rem, 3vw, 2.6rem); }
}
@media (hover: hover) {
    .paket:hover { border-color: rgb(var(--rgb-akzent) / 30%); background: rgb(var(--rgb-akzent) / 4%); }
}

.paket__name {
    margin: 0;
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(.9rem, .84rem + .3vw, 1.05rem);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--creme);
}
.paket__strich {
    display: block;
    width: 2.4rem; height: 2px;
    margin: .75rem 0 .9rem;
    background: var(--blush);
}
.paket__zonen {
    margin: 0;
    font-size: .875rem;
    line-height: 1.65;
    color: var(--creme-dim);
    max-width: 46ch;
}
.paket__wort { color: var(--creme); font-weight: 400; }

.paket__preis {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    margin: 0;
    white-space: nowrap;
}
.paket__vorher {
    font-size: clamp(.875rem, .8rem + .3vw, 1.05rem);
    color: var(--creme-mute);
    text-decoration-color: var(--blush-deep);
    text-decoration-thickness: 1px;
}
.paket__jetzt {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem);
    letter-spacing: -.01em;
    color: var(--creme);
    line-height: 1;
}


/* ---- Blatt 2: Einzelne Areale ---------------------------------------- */

.areale {
    display: grid;
    gap: clamp(1.4rem, 2.4vw, 2.2rem);
}
@media (min-width: 52rem) { .areale { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.areal-gruppe__name {
    margin: 0 0 1.1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
    font-family: var(--sans);
    font-weight: 400;
    font-size: .625rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--blush);
}
.areal-liste { margin: 0; display: grid; }
.areal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .55rem;
    border-bottom: 1px solid var(--line-soft);
    transition: background-color .4s var(--ruhig);
}
.areal:last-child { border-bottom: 0; }
@media (hover: hover) {
    .areal:hover { background: rgb(var(--rgb-text) / 3%); }
}
.areal dt {
    font-size: .875rem;
    color: var(--creme-dim);
    /* Führungspunkte wie in einer Speisekarte */
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
}
.areal dt::after {
    content: '';
    position: absolute;
    bottom: .28em; left: 0;
    width: 100%;
    border-bottom: 1px dotted rgb(var(--rgb-text) / 14%);
    transform: translateX(.4em);
    z-index: -1;
}
.areal dd {
    margin: 0;
    flex: 0 0 auto;
    font-weight: 400;
    font-size: .9375rem;
    color: var(--blush);
    white-space: nowrap;
}


/* ---- Blatt 3: Aktionen ------------------------------------------------ */

.aktionen { display: grid; gap: clamp(.75rem, 1.2vw, 1rem); }

.aktion {
    display: grid;
    gap: clamp(1.2rem, 2.5vw, 2rem);
    align-items: center;
    padding: clamp(1.1rem, 1.8vw, 1.55rem);
    border: 1px solid var(--line-soft);
    background: rgb(var(--rgb-text) / 2%);
    transition: border-color .5s var(--ruhig);
}
@media (min-width: 44rem) {
    .aktion { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (hover: hover) {
    .aktion:hover { border-color: rgb(var(--rgb-akzent) / 28%); }
}
.aktion__ober {
    margin: 0 0 .7rem;
    font-size: .5625rem;
    font-weight: 400;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--blush-deep);
}
.aktion__name {
    margin: 0 0 .9rem;
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(1.1rem, .98rem + .5vw, 1.35rem);
    letter-spacing: .03em;
    line-height: 1.2;
    color: var(--creme);
}
.aktion__inhalt {
    margin: 0;
    font-size: .875rem;
    line-height: 1.7;
    color: var(--creme-dim);
    max-width: 52ch;
}
.aktion__inhalt strong { color: var(--creme); font-weight: 400; }

.aktion__zeichen {
    display: grid;
    justify-items: center;
    gap: .9rem;
    text-align: center;
}
.aktion__kreis {
    display: grid;
    place-items: center;
    width: 3.4rem; height: 3.4rem;
    border-radius: 50%;
    background: var(--blush);
    color: var(--ink);
}
.aktion__kreis svg { width: 1.4rem; height: 1.4rem; }
.aktion__motto {
    margin: 0;
    max-width: 12ch;
    font-size: .5625rem;
    letter-spacing: .22em;
    line-height: 1.8;
    text-transform: uppercase;
    color: var(--creme-mute);
}


/* ---- Hinweiszeile unter den Blättern ---------------------------------- */

.hinweis {
    display: grid;
    gap: clamp(1.2rem, 2.5vw, 2rem);
    align-items: center;
    margin: clamp(1.5rem, 2.6vw, 2.2rem) auto 0;
    max-width: 1120px;
    padding: clamp(1.3rem, 2.2vw, 1.8rem);
    border: 1px solid rgb(var(--rgb-akzent) / 26%);
    background: rgb(var(--rgb-akzent) / 5%);
}
@media (min-width: 52rem) {
    .hinweis { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.hinweis__kreis {
    display: grid;
    place-items: center;
    width: 3.2rem; height: 3.2rem;
    border-radius: 50%;
    border: 1px solid rgb(var(--rgb-akzent) / 45%);
    color: var(--blush);
}
.hinweis__kreis svg { width: 1.35rem; height: 1.35rem; }
.hinweis__titel {
    margin: 0 0 .4rem;
    font-size: .9375rem;
    font-weight: 400;
    color: var(--creme);
}
.hinweis__text { margin: 0; font-size: .875rem; line-height: 1.7; color: var(--creme-dim); }
.hinweis__knopf { white-space: nowrap; }


/* ---- Mausspur auf den Preisblättern ---------------------------------- */
/*
   Wer mit der Maus über ein Blatt fährt, zieht eine Spur aus Buchstaben
   hinter sich her, die nacheinander SELDA schreiben und sofort wieder
   vergehen. Reine Zierde: rein dekorativ, ohne Bedeutung, auf Touch-Geräten
   und bei „Bewegung reduzieren" gar nicht erst erzeugt.
*/

.spur {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 1.3rem;
    letter-spacing: .12em;
    line-height: 1;
    color: var(--blush);
    /* Doppelter Schein: der enge Ring gibt Kontur, der weite das Strahlen. */
    text-shadow: 0 0 9px rgb(var(--rgb-akzent) / 60%),
                 0 0 28px rgb(var(--rgb-akzent) / 38%);
    will-change: transform, opacity;
    animation: spurVergehen 900ms cubic-bezier(.25, .8, .35, 1) forwards;
}

/* Der erste Buchstabe eines Zuges bekommt etwas mehr Gewicht — so ist zu
   erkennen, wo das Wort beginnt. */
.spur--anfang {
    color: var(--creme);
    font-size: 1.6rem;
    text-shadow: 0 0 11px rgb(var(--rgb-text) / 65%),
                 0 0 34px rgb(var(--rgb-akzent) / 45%);
}

@keyframes spurVergehen {
      0% { opacity: 0;   transform: translate(-50%, -50%) scale(.55); }
     16% { opacity: .95; transform: translate(-50%, -50%) scale(1); }
     55% { opacity: .55; transform: translate(-50%, -95%) scale(1.04); }
    100% { opacity: 0;   transform: translate(-50%, -165%) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .spur { display: none !important; }
}


/* ---- Wortmarke: Zierlinien und Glanz ---------------------------------- */

.wortmarke__zier {
    display: block;
    height: 1px;
    margin-inline: auto;
    background: linear-gradient(90deg,
        transparent 0%,
        rgb(var(--rgb-akzent) / 55%) 16%,
        rgb(var(--rgb-akzent) / 95%) 50%,
        rgb(var(--rgb-akzent) / 55%) 84%,
        transparent 100%);
}

/* Breiten und Abstände je Einsatzort */
.wortmarke--hero  .wortmarke__zier--oben  { width: 34%; margin-bottom: clamp(1rem, 2.4vw, 2.1rem); }
.wortmarke--hero  .wortmarke__zier--unten { width: 34%; margin-top:    clamp(1.1rem, 2.6vw, 2.3rem); }
.wortmarke--klein .wortmarke__zier--oben  { width: 44%; margin-bottom: .34rem; }
.wortmarke--klein .wortmarke__zier--unten { width: 44%; margin-top:    .34rem; }
.wortmarke--fuss  .wortmarke__zier--oben  { width: 38%; margin-bottom: .7rem; }
.wortmarke--fuss  .wortmarke__zier--unten { width: 38%; margin-top:    .8rem; }

/*
   Glanz: ein schmaler Lichtstreifen wandert schräg über die Buchstaben.
   Umgesetzt über background-clip:text — der Text selbst wird durchsichtig
   und zeigt den laufenden Verlauf. Wo das nicht unterstützt wird, bleibt
   schlicht die volle Cremefarbe stehen.
*/
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .wortmarke__name {
        background-image: linear-gradient(100deg,
            var(--creme)      0%,
            var(--creme)     44%,
            #fffdf9          48%,
            #ffffff          50%,
            #fffdf9          52%,
            var(--creme)     56%,
            var(--creme)    100%);
        background-size: 260% 100%;
        /* repeat-x als Netz: selbst wenn eine Position einmal daneben liegt,
           bleibt der Schriftzug gedeckt und niemals unsichtbar. */
        background-repeat: repeat-x;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: glanz 7s cubic-bezier(.4, 0, .25, 1) infinite;
    }
}

/*
   Der Weg des Glanzes muss zwischen 0 % und 100 % bleiben.
   Bei background-size 260 % deckt der Verlauf das Element in diesem Bereich
   immer vollständig ab; darüber hinaus entstünde eine Lücke — und da der Text
   selbst durchsichtig ist, wäre die Wortmarke dort schlicht verschwunden.
   Ein früherer Versuch mit 175 % bis -75 % ließ sie zwei Drittel der Zeit
   unsichtbar werden.

   100 % → 0 % lässt den Lichtstreifen von links nach rechts wandern.
*/
@keyframes glanz {
      0% { background-position: 100% 0; }
     34% { background-position: 0% 0; }
    100% { background-position: 0% 0; }   /* Ruhe bis zum nächsten Durchlauf */
}

/* Beim Überfahren zieht der Glanz einmal zusätzlich durch */
@media (hover: hover) {
    .wortmarke-link:hover .wortmarke__name { animation-duration: 2.2s; }
}

@media (prefers-reduced-motion: reduce) {
    .wortmarke__name {
        animation: none !important;
        background-image: none !important;
        color: var(--creme) !important;
        -webkit-text-fill-color: var(--creme) !important;
    }
}

/* Windows-Kontrastmodus unterdrückt Hintergrundbilder. Da der Schriftzug beim
   Glanz nur durch sein Hintergrundbild sichtbar ist, wäre die Wortmarke dort
   sonst spurlos verschwunden — hier bekommt sie wieder eine echte Textfarbe. */
@media (forced-colors: active) {
    .wortmarke__name {
        background-image: none !important;
        color: CanvasText !important;
        -webkit-text-fill-color: CanvasText !important;
        animation: none !important;
    }
    .wortmarke__zier { background: CanvasText; }
}


/* =====================================================================
   Bewegung beim Scrollen
   Vier Effekte, die zusammen wirken sollen, ohne dass es unruhig wird:
   Überschriften steigen wortweise auf, Flächen ziehen von unten auf,
   Kennzahlen zählen hoch, und ruhige Elemente wandern minimal mit.
   Alles hängt an der Klasse js — ohne JavaScript steht die Seite still
   und vollständig da.
   ===================================================================== */

/* ---- Überschriften steigen wortweise auf ----------------------------- */

html.js .wort {
    display: inline-block;
    opacity: 0;
    transform: translateY(.5em) rotate(1.2deg);
    transform-origin: left bottom;
    filter: blur(5px);
}
html.js .da .wort,
html.js .wort.da {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition: opacity .9s var(--ruhig), transform 1.05s var(--weich), filter .9s var(--ruhig);
    transition-delay: calc(var(--w, 0) * 65ms);
}
/* Kursive Akzentwörter kommen einen Hauch später und heller */
html.js .titel em .wort { transition-duration: 1.15s, 1.3s, 1.15s; }


/* ---- Flächen ziehen von unten auf ------------------------------------ */

html.js .aufzug {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.5s cubic-bezier(.6, 0, .1, 1);
}
html.js .aufzug.da { clip-path: inset(0 0 0 0); }

/* Das Bild darin startet leicht vergrößert und beruhigt sich */
html.js .aufzug > * {
    transform: scale(1.12);
    transition: transform 2.2s cubic-bezier(.2, .7, .2, 1);
}
html.js .aufzug.da > * { transform: none; }


/* ---- Kennzahlen ------------------------------------------------------- */

.zahl__wert { font-variant-numeric: tabular-nums; }


/* ---- Ruhiges Mitwandern ---------------------------------------------- */
/*
   Kein Sprung, keine Verzerrung: Die Elemente verschieben sich nur um
   wenige Pixel gegen die Scrollrichtung. Der Wert kommt aus dem Skript.
*/
html.js [data-wandert] { will-change: transform; }



@media (prefers-reduced-motion: reduce) {
    html.js .wort,
    html.js .aufzug > * { opacity: 1 !important; transform: none !important; filter: none !important; }
    html.js .aufzug { clip-path: none !important; }
    html.js [data-wandert] { transform: none !important; }
}


/* ---- Behandlungsgeräte ------------------------------------------------ */

.geraet__raster {
    display: grid;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}
@media (min-width: 62rem) {
    .geraet__raster { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
}

.geraet__ober {
    margin: 0 0 1.1rem;
    font-size: .625rem;
    font-weight: 400;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--blush-deep);
}

/* Zwei Siegel, wie auf dem Datenblatt des Herstellers */
.siegel {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 2vw, 1.6rem);
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
}
.siegel__stueck { display: grid; place-items: center; }
.siegel__marke {
    display: grid;
    place-items: center;
    width: clamp(5.4rem, 9vw, 7rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(var(--rgb-akzent) / 14%);
    border: 1px dashed rgb(var(--rgb-akzent) / 55%);
    color: var(--blush);
    font-family: var(--sans);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1.5;
    text-transform: uppercase;
    text-align: center;
    transition: background-color .5s var(--ruhig), transform .5s var(--weich);
}
.siegel__marke small {
    display: block;
    font-size: .5rem;
    font-weight: 400;
    letter-spacing: .18em;
}
@media (hover: hover) {
    .siegel__stueck:hover .siegel__marke {
        background: rgb(var(--rgb-akzent) / 22%);
        transform: translateY(-3px) rotate(-2deg);
    }
}

/* Die drei Merkmale */
.merkmale { display: grid; gap: 0; margin: clamp(2.2rem, 4vw, 3rem) 0 0; }
.merkmal {
    display: grid;
    gap: .5rem;
    padding-block: clamp(1.1rem, 2vw, 1.5rem);
    border-top: 1px solid var(--line);
    padding-left: 2.2rem;
    position: relative;
}
.merkmal:last-child { border-bottom: 1px solid var(--line); }
/* Häkchen statt Aufzählungspunkt */
.merkmal::before {
    content: '';
    position: absolute;
    left: .25rem; top: calc(clamp(1.1rem, 2vw, 1.5rem) + .28em);
    width: 11px; height: 6px;
    border-left: 1.5px solid var(--blush-deep);
    border-bottom: 1.5px solid var(--blush-deep);
    rotate: -45deg;
}
.merkmal__name {
    font-family: var(--sans);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--creme);
}
.merkmal__text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.75;
    color: var(--creme-dim);
    max-width: 46ch;
}

/* Das Gerätebild */
.geraet__bild {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--line-soft);
    border-radius: 2px;
    background:
        radial-gradient(115% 80% at 72% 12%, rgb(var(--rgb-akzent) / 9%), transparent 58%),
        radial-gradient(85% 65% at 20% 92%, rgb(var(--rgb-text) / 5%), transparent 62%),
        linear-gradient(158deg, #1a1a1a, #0e0e0e 70%);
    box-shadow: var(--schimmer-x);
    overflow: hidden;
    isolation: isolate;
}
.geraet__bild img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Platzhalter, solange kein Foto hinterlegt ist */
.geraet__leer {
    position: absolute; inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .9rem;
    text-align: center;
}
.geraet__leer-wort {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    letter-spacing: .18em;
    text-indent: .18em;
    color: rgb(var(--rgb-text) / 16%);
    white-space: nowrap;
}
.geraet__leer-hinweis {
    font-size: .5625rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgb(var(--rgb-text) / 30%);
}

/* Schild in der Ecke: die vier Wellenlängen */
.geraet__schild {
    position: absolute;
    left: clamp(.9rem, 2vw, 1.4rem);
    bottom: clamp(.9rem, 2vw, 1.4rem);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1.15rem .75rem .95rem;
    background: rgb(var(--rgb-grund) / 88%);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border: 1px solid rgb(var(--rgb-akzent) / 34%);
}
.geraet__schild-zahl {
    font-family: var(--serif);
    font-weight: 300;
    font-size: 2.1rem;
    line-height: 1;
    color: var(--blush-deep);
}
.geraet__schild-text {
    font-size: .5625rem;
    letter-spacing: .2em;
    line-height: 1.7;
    text-transform: uppercase;
    color: var(--creme-mute);
}