/* ============================================================
   Lehner & Lehner Audio
   Schwarz · Chrom · Archivo (variable Breite)
   ============================================================ */

/* Archivo, lokal ausgeliefert. Variable Schrift: Breite 62–125 %,
   Stärke 100–700. Lizenz: SIL Open Font License, siehe schriften/OFL.txt */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 700;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(schriften/archivo-var.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:'Archivo';
  font-style:normal;
  font-weight:100 700;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(schriften/archivo-var-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
                U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --black:#000;
  --panel:#080808;
  --panel-2:#0B0B0B;
  --white:#F4F4F5;
  --silver:#AEB2B6;
  /* Beide Grautöne erfüllen auf Schwarz die WCAG-Grenze von 4,5:1 für
     Fließtext. Das frühere --faint (#4A4D50) lag bei 2,5:1 und war für
     Bildlegenden, Fußzeile und Kleintext nicht lesbar. */
  --dim:#85888C;    /* 5,9:1 */
  --faint:#74777A;  /* 4,7:1 */
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.06);
  --chrome:linear-gradient(180deg,#FFFFFF 0%,#D6D9DC 38%,#8E9295 68%,#EDEFF1 100%);

  --gutter:clamp(20px,5.5vw,96px);
  --maxw:1440px;
  --sp:clamp(100px,14vw,210px);
  --hair:var(--line);
  --hair-d:var(--line);

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--black)}
body{
  margin:0; background:var(--black); color:var(--silver);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-weight:300; font-size:16px; line-height:1.8; letter-spacing:.005em;
  font-variation-settings:'wdth' 100,'wght' 300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
/* Das hidden-Attribut setzt nur eine schwache Regel aus dem Browser.
   Jedes display in einer Klasse schlägt sie — deshalb hier einmal
   verbindlich, statt für jede Komponente einzeln. Diese Falle hat schon
   mehrfach zugeschlagen (siehe .bt, .lf__lage, .ausw, .kp weiter unten). */
[hidden]{display:none !important}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:1px solid rgba(255,255,255,.7); outline-offset:5px}

h1,h2,h3,h4{
  margin:0; color:var(--white); font-weight:300;
  font-variation-settings:'wdth' 112,'wght' 300;
  letter-spacing:-.012em; line-height:1.08;
}
p{margin:0 0 1.35em}
p:last-child{margin-bottom:0}
strong{font-weight:500; color:var(--white)}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.narrow{max-width:60ch}
.sec{padding-block:var(--sp); position:relative}
.sec--tight{padding-block:clamp(60px,8vw,120px)}
/* Erster Abschnitt direkt unter dem Seitenkopf: oben knapp, damit das
   Bild dem Titel folgt und kein leerer Streifen dazwischen steht. Unten
   ebenfalls knapper — sonst addiert sich die Luft mit der des nächsten
   Abschnitts auf das Doppelte. */
.sec--auftakt{padding-top:clamp(40px,4.4vw,64px); padding-bottom:clamp(48px,5.5vw,84px)}
.light{background:var(--panel)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* --- Typografische Skala ---------------------------------- */
.d1{font-size:clamp(2.9rem,8.2vw,6.4rem); font-variation-settings:'wdth' 108,'wght' 250; letter-spacing:-.028em; line-height:.98}
.d2{font-size:clamp(2rem,4.8vw,3.7rem); font-variation-settings:'wdth' 110,'wght' 280; letter-spacing:-.02em; line-height:1.08}
.d3{font-size:clamp(1.4rem,2.7vw,2.15rem); font-variation-settings:'wdth' 108,'wght' 300; letter-spacing:-.014em; line-height:1.2}
.d4{font-size:clamp(1.02rem,1.5vw,1.22rem); font-variation-settings:'wdth' 104,'wght' 400; letter-spacing:.01em}
.lead{font-size:clamp(1.02rem,1.25vw,1.16rem); line-height:1.9; color:var(--silver)}
.muted{color:var(--dim)}
.small{font-size:.82rem; line-height:1.7}
/* 10,2 px waren zu klein zum Lesen, auch für eine Nebenauszeichnung.
   Jetzt 11,2 px bei leicht verringerter Sperrung — die Zeile bleibt
   dadurch fast gleich breit und kein Menü oder Raster verrutscht. */
.label{
  display:inline-block; font-size:.7rem; font-weight:400;
  font-variation-settings:'wdth' 100,'wght' 400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--dim);
}
.vlabel{display:none}

/* --- Logo -------------------------------------------------- */
.owl{width:100%; height:auto}
.lockup{display:none}
.script,.audio{display:none}

/* ============================================================
   Kopfzeile
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px var(--gutter);
  transition:transform .6s var(--ease), background .5s ease, border-color .5s ease, padding .5s ease;
  border-bottom:1px solid transparent;
}
.hdr.solid{background:rgba(0,0,0,.78); backdrop-filter:blur(20px); border-bottom-color:var(--line-soft); padding-block:13px}
.hdr.up{transform:translateY(-105%)}
.hdr__brand{display:flex; align-items:center; gap:15px}
.hdr__brand .owl{width:38px; flex:none}
.hdr__name{
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--white);
  font-variation-settings:'wdth' 100,'wght' 400; line-height:1.5; white-space:nowrap;
}
.hdr__name em{display:block; font-style:normal; font-size:.55rem; letter-spacing:.46em; color:var(--dim)}

/* Das Menü muss einzeilig bleiben; darunter erscheint das Burger-Menü,
   statt Punkte umbrechen zu lassen. Gemessen, nicht geschätzt.

   Mit „Lunaria Fly" ist ein achter Punkt dazugekommen; bei 1280 px
   brach die Leiste dadurch auf zwei Zeilen um, während der Burger noch
   ausgeblendet war. Deshalb heißt der Punkt hier oben „Projekte" statt
   „Individuelle Projekte" — das spart 114 px, und die Leiste bleibt
   ab 1260 px einzeilig wie zuvor. Der volle Name steht im Klappmenü,
   in der Fußzeile und auf der Seite selbst.

   Der Abstand ist von 28 auf 24 px gegangen, der große erst ab 1440 px. */
.nav{display:none; align-items:center; gap:24px}
@media(min-width:1440px){ .nav{gap:34px} }
@media(min-width:1260px){ .nav{display:flex} }
.nav a,.nav button{
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--silver);
  font-variation-settings:'wdth' 100,'wght' 400;
  padding:8px 0; position:relative; transition:color .35s ease;
  white-space:nowrap;
}
.nav a:hover,.nav a.on{color:var(--white)}
.nav a::after{
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:100%;
  background:var(--white); transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1); transform-origin:left}

.drop{position:relative}
.drop__panel{
  position:absolute; top:calc(100% + 16px); left:-26px; min-width:262px;
  background:rgba(6,6,6,.97); backdrop-filter:blur(20px);
  border:1px solid var(--line-soft); padding:12px 0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all .45s var(--ease);
}
.drop:hover .drop__panel,.drop:focus-within .drop__panel{opacity:1; visibility:visible; transform:none}
.drop__panel a{display:block; padding:12px 26px; letter-spacing:.16em; font-size:.7rem}
.drop__panel a::after{display:none}
.drop__panel a:hover{background:rgba(255,255,255,.05); color:var(--white)}

.burger{display:grid; gap:6px; padding:10px; margin-right:-10px}
@media(min-width:1260px){ .burger{display:none} }
.burger i{display:block; width:26px; height:1px; background:var(--white); transition:transform .45s var(--ease), opacity .3s}
body.menu-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu{
  position:fixed; inset:0; z-index:55; background:var(--black);
  padding:112px var(--gutter) 48px; overflow-y:auto;
  clip-path:inset(0 0 100% 0); transition:clip-path .85s var(--ease);
}
body.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu a{
  display:block; font-size:1.45rem; font-variation-settings:'wdth' 108,'wght' 280;
  letter-spacing:-.01em; color:var(--white); padding:15px 0; border-bottom:1px solid var(--line-soft);
}
.menu .sub a{font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; padding-left:20px; color:var(--dim)}
.menu__foot{margin-top:46px; color:var(--dim); font-size:.8rem; letter-spacing:.06em}
.menu > *{opacity:0; transform:translateY(16px); transition:all .6s var(--ease)}
body.menu-open .menu > *{opacity:1; transform:none; transition-delay:.22s}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; text-align:center; background:var(--black)}
.hero__bg{
  position:absolute; inset:0;
  background:radial-gradient(80% 55% at 50% 38%,#171717 0%,#080808 45%,#000 78%);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 40% at 50% 105%,rgba(255,255,255,.05),transparent 70%);
}
.hero__inner{position:relative; padding:140px var(--gutter) 110px; width:100%}
.hero__logo{width:min(330px,62vw); margin:0 auto}
.hero__hair{width:min(280px,52vw); height:1px; margin:44px auto 34px;
  background:linear-gradient(90deg,transparent,#8E2B24 18%,#C4433A 50%,#8E2B24 82%,transparent)}
.hero__claim{
  font-size:clamp(1.15rem,2.5vw,2rem); color:var(--white);
  font-variation-settings:'wdth' 106,'wght' 250; letter-spacing:-.012em; line-height:1.35;
  max-width:22ch; margin-inline:auto;
}
.hero__sub{margin-top:20px; color:var(--dim); font-size:.64rem; letter-spacing:.36em; text-transform:uppercase}
.hero__scroll{position:absolute; left:50%; bottom:30px; translate:-50% 0}
.hero__scroll i{display:block; width:1px; height:56px; background:linear-gradient(rgba(255,255,255,.55),transparent); animation:drip 3s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(.15); transform-origin:top; opacity:0}35%{opacity:1}100%{transform:scaleY(1); transform-origin:top; opacity:0}}

.seq > *{opacity:0}
.seq.go .s1{animation:rise 1.7s var(--ease) .1s forwards}
.seq.go .s2{animation:rise 1.6s var(--ease) .45s forwards}
.seq.go .s3{animation:grow 1.5s var(--ease) .8s forwards}
.seq.go .s4{animation:rise 1.6s var(--ease) 1s forwards}
.seq.go .s5{animation:rise 1.6s var(--ease) 1.25s forwards}
@keyframes rise{from{opacity:0; transform:translateY(24px); filter:blur(6px)}to{opacity:1; transform:none; filter:none}}
@keyframes grow{from{opacity:0; transform:scaleX(0)}to{opacity:1; transform:none}}

/* ============================================================
   Reveal
   ============================================================ */
.r{opacity:0; transform:translateY(22px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.r.in{opacity:1; transform:none}
.r[data-d="1"]{transition-delay:.09s}
.r[data-d="2"]{transition-delay:.18s}
.r[data-d="3"]{transition-delay:.27s}
.r[data-d="4"]{transition-delay:.36s}
.rline{transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease)}
.rline.in{transform:none}

/* ============================================================
   Bildplatzhalter
   ============================================================ */
.frame{
  position:relative; width:100%;
  background:linear-gradient(160deg,#141414 0%,#0A0A0A 55%,#050505 100%);
  border:1px solid var(--line-soft);
  display:grid; place-items:center; text-align:center; padding:28px; overflow:hidden;
}
.light .frame{background:linear-gradient(160deg,#181818 0%,#0C0C0C 55%,#070707 100%)}
.frame__t{font-size:.58rem; letter-spacing:.32em; text-transform:uppercase; color:var(--faint); margin-bottom:12px}
.frame__d{font-size:.85rem; line-height:1.7; color:var(--dim); max-width:36ch; font-weight:300}
.frame__r{margin-top:12px; font-size:.62rem; letter-spacing:.22em; color:var(--faint)}
.ar-32{aspect-ratio:3/2} .ar-45{aspect-ratio:4/5} .ar-11{aspect-ratio:1/1}
.ar-169{aspect-ratio:16/9} .ar-219{aspect-ratio:21/9} .ar-34{aspect-ratio:3/4}
@media(max-width:640px){ .ar-219{aspect-ratio:16/10} }

/* ============================================================
   Fotos
   Ein Foto bestimmt seine Höhe selbst. Kein erzwungenes Seitenverhältnis,
   dadurch wird nichts beschnitten und es entstehen keine Balken. Die
   Aufnahmen behalten ihren eigenen Hintergrund — weiß bleibt weiß.
   Die Haarlinie ringsum lässt jedes Bild als Tafel wirken, egal ob der
   Hintergrund hell oder dunkel ist.
   ============================================================ */
.shot{
  position:relative; display:block; margin:0; overflow:hidden;
  border:1px solid var(--line-soft);
  background:var(--avg,#0c0c0c);
  transition:transform .9s var(--ease), border-color .6s ease;
}
.shot img{
  display:block; width:100%; height:auto;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.35s var(--ease), filter .9s var(--ease);
}
.shot.in img{clip-path:inset(0 0 0 0)}
.shot--schmal{max-width:var(--w,380px); margin-inline:auto}

/* Bildlegende unter dem Foto */
.shot__cap{
  margin-top:14px; font-size:.7rem; letter-spacing:.04em;
  color:var(--dim); line-height:1.7;
}

/* Bildlegende unter dem Rahmen */
.cap{
  margin-top:14px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); line-height:1.7;
}

/* ============================================================
   Überschriften bauen sich zeilenweise auf
   Die Zeilen werden in site.js an den <br> aufgeteilt. Jede Zeile
   bekommt einen Maskenrahmen, aus dem der Text hochfährt.
   ============================================================ */
.lines .ln{
  display:block; overflow:hidden;
  /* Luft für Unterlängen und Umlaute, sonst schneidet die Maske sie ab */
  padding-bottom:.14em; margin-bottom:-.14em;
}
.lines .ln > span{display:block; transform:translateY(108%); transition:transform 1.15s var(--ease)}
.lines.in .ln > span{transform:none}
.lines .ln:nth-child(2) > span{transition-delay:.08s}
.lines .ln:nth-child(3) > span{transition-delay:.16s}
.lines .ln:nth-child(4) > span{transition-delay:.24s}
.lines .ln:nth-child(5) > span{transition-delay:.32s}

/* Technische Daten laufen Zeile für Zeile ein */
.spec .row{opacity:0; transform:translateY(9px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.r.in .spec .row{opacity:1; transform:none}
.r.in .spec .row:nth-child(2){transition-delay:.06s}
.r.in .spec .row:nth-child(3){transition-delay:.12s}
.r.in .spec .row:nth-child(4){transition-delay:.18s}
.r.in .spec .row:nth-child(5){transition-delay:.24s}

/* Sprunglink: nur sichtbar, solange er den Fokus hat */
.skip{
  position:fixed; top:10px; left:10px; z-index:100;
  padding:12px 20px; background:var(--white); color:var(--black);
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  transform:translateY(-160%); transition:transform .35s var(--ease);
}
.skip:focus{transform:none}

/* Kurzer Hinweis, etwa bei einer unbekannten Adresse */
.toast{
  position:fixed; left:50%; bottom:26px; translate:-50% 0; z-index:80;
  background:rgba(6,6,6,.97); backdrop-filter:blur(20px);
  border:1px solid var(--line-soft); padding:16px 26px; max-width:min(560px,88vw);
  font-size:.78rem; line-height:1.7; color:var(--silver);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.toast.on{opacity:1; transform:none}

/* Lesefortschritt als Haarlinie am oberen Rand */
.prog{
  position:fixed; inset:0 0 auto 0; height:1px; z-index:61;
  background:linear-gradient(90deg,rgba(174,178,182,.25),var(--silver));
  transform:scaleX(0); transform-origin:left;
  opacity:0; transition:opacity .5s ease; pointer-events:none;
}
.prog.on{opacity:1}

.pc:hover .shot img{filter:brightness(1.08)}

/* ============================================================
   Bausteine
   ============================================================ */
.grid{display:grid; gap:clamp(26px,3.4vw,54px)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media(min-width:820px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} }
.split{display:grid; gap:clamp(30px,5vw,86px); align-items:start}
@media(min-width:920px){
  .split{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
  .split--rev{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
}

.eyebrow{display:block; margin-bottom:22px}
.eyebrow span:first-child{display:none}

.btn{
  display:inline-block; padding:17px 40px; border:1px solid rgba(255,255,255,.28);
  color:var(--white); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 400;
  position:relative; overflow:hidden; transition:color .5s var(--ease), border-color .5s ease;
}
.btn span{position:relative; z-index:2}
.btn::before{content:""; position:absolute; inset:0; background:var(--white); transform:translateY(101%); transition:transform .65s var(--ease)}
.btn:hover{color:var(--black); border-color:#fff}
.btn:hover::before{transform:none}
.btn--solid{background:var(--white); color:var(--black); border-color:var(--white)}
.btn--solid::before{background:var(--black)}
.btn--solid:hover{color:var(--white); border-color:rgba(255,255,255,.4)}

.tlink{
  display:inline-flex; align-items:center; gap:14px;
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--white);
  font-variation-settings:'wdth' 100,'wght' 400;
  padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.22);
  transition:border-color .4s ease;
}
.tlink i{width:22px; height:1px; background:currentColor; transition:width .55s var(--ease)}
.tlink:hover{border-color:#fff}
.tlink:hover i{width:40px}

.mani{list-style:none; margin:0; padding:0}
.mani li{
  padding:26px 0; border-top:1px solid var(--line-soft); color:var(--white);
  font-size:clamp(1rem,1.5vw,1.2rem); font-variation-settings:'wdth' 106,'wght' 300;
  letter-spacing:-.008em; line-height:1.5;
}
.mani li:last-child{border-bottom:1px solid var(--line-soft)}

.spec{margin:0}
.spec__g{margin-bottom:44px}
.spec__g h4{
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--faint);
  font-variation-settings:'wdth' 100,'wght' 400; margin-bottom:16px;
}
.row{
  display:grid; grid-template-columns:1fr auto; gap:20px; padding:15px 0;
  border-top:1px solid var(--line-soft); font-size:.88rem;
}
.row dt{color:var(--dim)}
.row dd{margin:0; text-align:right; color:var(--white); font-variation-settings:'wdth' 102,'wght' 400}
.row--wide{grid-template-columns:1fr}
.row--wide dd{text-align:left; margin-top:6px; font-variation-settings:'wdth' 100,'wght' 300; line-height:1.6}

.swatches{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media(min-width:700px){ .swatches{grid-template-columns:repeat(4,1fr)} }
.sw{display:grid; gap:14px}
/* 3:4 entspricht genau dem Seitenverhältnis der Furnieraufnahmen —
   dadurch wird auch hier nichts beschnitten. */
.sw__c{aspect-ratio:3/4; position:relative; overflow:hidden; border:1px solid var(--line-soft)}
.sw__c::after{content:""; position:absolute; inset:0; background:linear-gradient(155deg,rgba(255,255,255,.18),rgba(0,0,0,.3))}
/* Felder mit echtem Furnierfoto: nur ein leichter Lichtschimmer, damit die
   Maserung nicht zugedeckt wird. */
.sw__c--img img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease)}
.sw__c--img::after{background:linear-gradient(155deg,rgba(255,255,255,.10),rgba(0,0,0,.22))}
.sw:hover .sw__c--img img{transform:scale(1.05)}
.sw__n{font-size:.8rem; color:var(--white); letter-spacing:.02em}
.sw__m{font-size:.66rem; color:var(--faint); letter-spacing:.16em; text-transform:uppercase}

/* ============================================================
   Modellvergleich
   Auf schmalen Geräten scrollt die Tabelle in sich, damit die Seite
   selbst nie seitlich wandert.
   ============================================================ */
.verg{overflow-x:auto; -webkit-overflow-scrolling:touch}
/* Mit dem Aellon sind es fuenf Modellspalten. Unter dieser Breite
   wuerden die Zellen umbrechen, deshalb scrollt die Tabelle lieber
   seitlich (siehe .verg). */
.verg__t{width:100%; min-width:880px; border-collapse:collapse; text-align:left}
.verg__t th,.verg__t td{padding:16px 20px 16px 0; border-top:1px solid var(--line-soft); vertical-align:top}
.verg__t thead th{
  border-top:0; padding-top:0; padding-bottom:20px;
  font-size:1rem; font-variation-settings:'wdth' 106,'wght' 350;
  letter-spacing:-.008em; color:var(--white); font-weight:400;
  /* nicht umbrechen, sonst bekommt „Atacama Reference“ zwei Unterstriche */
  white-space:nowrap;
}
.verg__t thead th a{border-bottom:1px solid var(--line); padding-bottom:4px; transition:border-color .4s ease}
.verg__t thead th a:hover{border-bottom-color:#fff}
.verg__t tbody th{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); font-weight:400; font-variation-settings:'wdth' 100,'wght' 400;
  white-space:nowrap; padding-right:36px;
}
.verg__t tbody td{font-size:.88rem; color:var(--silver); line-height:1.6}
.verg__t tbody tr:hover td{color:var(--white)}

.ed{display:grid; gap:26px; padding:clamp(34px,4.4vw,56px) 0; border-top:1px solid var(--line-soft)}
@media(min-width:900px){ .ed{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr); gap:clamp(36px,6vw,96px)} }
.ed__k{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-top:16px; line-height:2.2}
.ed__p{margin-top:26px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between}
/* Stand hier früher als .ed__price und nannte Oberfläche und Preis.
   Beides ist weg: Preise gehören nicht auf die Website, und welche
   Oberfläche es wird, entscheidet der Konfigurator — nicht die Edition.
   Jetzt sagt die Zeile, dass dabei alles offen ist, und führt zum
   Konfigurator daneben. */
.ed__aus{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}

/* ============================================================
   Bauteile einer Abstimmung, aufklappbar

   Die Aufnahmen haben hellen Hintergrund. Damit sie die schwarze Seite
   nicht erschlagen, bleiben sie klein und liegen zugeklappt — man sieht
   sie nur, wenn man sie sehen will. Die Zeile spannt sich über beide
   Spalten der Edition, sonst wäre neben dem Bild kein Platz für die
   Bauteilnamen.
   ============================================================ */
/* Der Aufklapper ist bewusst NICHT als .tlink gebaut. Ein .tlink führt
   woanders hin („Unverbindlich anfragen“) und trägt seinen Strich davor
   und die Linie darunter. Dieser Knopf öffnet etwas an Ort und Stelle und
   hat deshalb die umgekehrte Form: Linie darüber, Winkel rechts außen,
   über die Breite der Bauteilliste. So sind die beiden auf einen Blick
   auseinanderzuhalten. */
.ed__auf{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  width:100%; max-width:330px;
  margin-top:24px; padding:14px 0 0;
  border-top:1px solid var(--line);
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 400;
  color:var(--faint); text-align:left;
  transition:color .35s ease, border-color .35s ease;
}
.ed__auf:hover,
.ed__auf[aria-expanded="true"]{color:var(--white); border-top-color:rgba(255,255,255,.34)}

.ed__pfeil{
  width:8px; height:8px; flex:none; margin-top:-3px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg);
  transition:transform .45s var(--ease);
}
.ed__auf[aria-expanded="true"] .ed__pfeil{transform:rotate(225deg); margin-top:3px}

.bt{
  grid-column:1 / -1;
  display:grid; gap:clamp(20px,2.6vw,38px);
  margin-top:clamp(26px,3vw,38px); padding-top:26px;
  border-top:1px solid var(--line-soft);
}
.bt[hidden]{display:none}
@media(min-width:620px){ .bt{grid-template-columns:auto minmax(0,1fr); align-items:start} }

.bt__bild{margin:0; width:240px; max-width:100%}
@media(max-width:619px){ .bt__bild{width:200px} }
.bt__bild img{display:block; width:100%; height:auto}

.bt__liste{margin:0; padding:0; list-style:none}
.bt__liste li{
  font-size:.88rem; line-height:1.6; color:var(--silver);
  padding:9px 0; border-bottom:1px solid var(--line-soft);
}
.bt__liste li:first-child{padding-top:0}
.bt__liste li:last-child{border-bottom:0}
.bt__liste b{font-weight:400; color:var(--white)}
.bt__liste span{display:block; font-size:.78rem; color:var(--faint); margin-top:3px}

/* Modellzeilen (Übersicht) */
.pc{display:grid; gap:20px}
.pc .frame{transition:transform 1.1s var(--ease), border-color .6s ease}
.pc:hover .frame{transform:translateY(-5px); border-color:var(--line)}
.pc__meta{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding-top:18px; border-top:1px solid var(--line-soft)}
.pc__meta span{font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint)}

/* Große Modellbänder
   Die Aufnahmen sind hochformatig und werden nicht beschnitten. Ein
   liegendes Band mit Textauflage würde sie winzig machen, deshalb steht
   das Foto neben dem Namen statt darunter. */
.band{
  position:relative; display:grid; gap:clamp(26px,4vw,64px); align-items:center;
  padding-block:clamp(28px,4vw,52px); border-top:1px solid var(--line-soft);
}
.band:last-of-type{border-bottom:1px solid var(--line-soft)}
@media(min-width:820px){
  .band{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}
}
.band .shot{max-width:340px; margin-inline:auto}
.band .frame{aspect-ratio:3/4; max-width:340px; margin-inline:auto}
.band:hover .shot{border-color:rgba(255,255,255,.22); transform:translateY(-4px)}
.band:hover .shot img{filter:brightness(1.06)}

.band__o{display:grid; gap:14px; align-content:center}
.band__n{font-size:clamp(1.6rem,3.6vw,2.7rem); font-variation-settings:'wdth' 110,'wght' 280; letter-spacing:-.02em; color:#fff; line-height:1.05}
.band__m{font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--silver)}
.band__mehr{
  margin-top:10px; display:inline-flex; align-items:center; gap:14px;
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--white);
}
.band__mehr i{width:22px; height:1px; background:currentColor; transition:width .55s var(--ease)}
.band:hover .band__mehr i{width:42px}

/* Formular */
.form{display:grid; gap:30px; max-width:620px}
.field{display:grid; gap:10px}
/* Die Beschriftungen standen bei 9,6 px im schwächsten Grau — gemessen,
   nicht geschätzt. Das ist die Stelle, an der jemand etwas ausfüllen
   soll; dort spart man nicht an Lesbarkeit. Jetzt größer, heller und
   etwas enger gesperrt, damit sie trotzdem ruhig bleiben. */
.field label{font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.field input,.field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:14px 2px; font:inherit; font-size:1.02rem; color:var(--white);
  transition:border-color .45s ease;
}
.field input:focus,.field textarea:focus{outline:0; border-bottom-color:#fff}
.field textarea{resize:vertical; min-height:130px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:#C4433A}
.err{font-size:.82rem; color:#D9736B; min-height:0; line-height:1.6}
.err:empty{display:none}
/* Spamfalle: unsichtbar, aber nicht display:none — manche Bots erkennen das */
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formnote{font-size:.88rem; line-height:1.75; color:var(--dim)}
.form button[aria-busy="true"]{opacity:.55; pointer-events:none}
.formnote a{color:var(--white); border-bottom:1px solid var(--line)}
.sent{padding:20px 24px; border:1px solid var(--line); color:var(--white); font-size:.9rem}

/* Rechtstexte */
.legal h3{font-size:1.05rem; margin:48px 0 16px; color:var(--white); font-variation-settings:'wdth' 106,'wght' 400}
.legal h4{font-size:.9rem; margin:30px 0 10px; color:var(--silver); font-variation-settings:'wdth' 102,'wght' 400}
.legal p,.legal li{font-size:.9rem; line-height:1.95; color:var(--dim)}
.legal ul{padding-left:18px; margin:0 0 1.3em}
.legal li{margin-bottom:.55em}
.legal a{color:var(--silver); border-bottom:1px solid var(--line)}
.legal a:hover{color:var(--white)}
.legal .rule{margin:56px 0}

/* Fußzeile */
.ftr{background:var(--black); padding-top:clamp(72px,9vw,130px); border-top:1px solid var(--line-soft)}
.ftr__top{display:grid; gap:clamp(38px,5vw,70px)}
@media(min-width:900px){ .ftr__top{grid-template-columns:1.3fr 1fr 1fr 1fr} }
.ftr h4{font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--faint); font-variation-settings:'wdth' 100,'wght' 400; margin-bottom:20px}
.ftr p,.ftr a{font-size:.85rem; color:var(--dim); line-height:2.1}
.ftr a:hover{color:var(--white)}
.ftr__brand .owl{width:132px; margin-bottom:26px}
.ftr__bar{
  margin-top:clamp(52px,7vw,92px); border-top:1px solid var(--line-soft); padding:26px 0 36px;
  display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.ftr__bar a{font-size:.68rem}
/* Der Hinweis auf visualisierte Darstellungen: eigene Zeile über dem
   Rest der Fußzeile (order:-1 bei flex-wrap), kleiner und blasser als
   die Zeile darunter. Er soll zu finden sein, nicht ins Auge springen. */
.ftr__hinweis{flex-basis:100%; order:-1; font-size:.58rem; letter-spacing:.12em; opacity:.68}

/* Der Cookie-Hinweis ist im September 2026 entfallen, siehe den
   Kommentar an seiner Stelle in index.html. Seine Gestaltung (.cookie,
   .cookie__b, .cookie__set, .ck) ist mit entfernt. */

/* Seitenwechsel */
.page{display:none}
.page.active{display:block; animation:pagein .9s var(--ease)}
@keyframes pagein{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.pagehead{padding:clamp(160px,21vh,250px) 0 clamp(52px,7vw,96px); position:relative}
.pagehead::after{content:""; position:absolute; left:var(--gutter); right:var(--gutter); bottom:0; height:1px; background:var(--line-soft)}
.pagehead .d1{font-size:clamp(2.4rem,6.4vw,5rem)}

.veil{position:fixed; inset:0; z-index:90; background:var(--black); pointer-events:none; opacity:0; transition:opacity .42s ease}
.veil.on{opacity:1}

/* Galerie */
/* Oben bündig: die Fotos haben unterschiedliche Seitenverhältnisse, weil
   keines beschnitten wird. Ausgefranste Unterkanten sind gewollt. */
.gal{display:grid; gap:clamp(14px,1.6vw,22px); align-items:start}
@media(min-width:760px){
  .gal--a{grid-template-columns:1.35fr 1fr}
  .gal--b{grid-template-columns:1fr 1fr 1fr}
  .gal--c{grid-template-columns:1fr 1.35fr}
}
.gal .frame{transition:border-color .6s ease, transform 1.1s var(--ease)}
.gal a:hover .frame,.gal .frame:hover{border-color:rgba(255,255,255,.2)}
.galgroup{margin-bottom:clamp(56px,7vw,104px)}
.galgroup:last-child{margin-bottom:0}

/* ============================================================
   Galerie: Rhythmus statt Raster

   Ein gleichmäßiges Raster aus neun gleich großen Kacheln sieht
   beliebig aus. Stattdessen: ein großer Auftakt mit Text daneben,
   danach die Farbpaare — je zwei Bilder, von denen eines tiefer
   hängt, abwechselnd links und rechts. Die Bildkante wandert so
   beim Scrollen hin und her, statt eine gerade Linie zu ziehen.

   Die Versätze gelten erst ab Tablet. Auf dem Handy steht alles
   untereinander in voller Breite, da wäre jeder Versatz nur Leere.
   ============================================================ */

/* --- Auftakt: großes Bild, Text daneben auf gleicher Grundlinie --- */
.gx__auftakt{
  gap:clamp(26px,4vw,70px); align-items:end;
  margin-bottom:clamp(76px,10vw,150px);
}
@media(min-width:900px){
  .gx__auftakt{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
.gx__text{padding-bottom:clamp(4px,1.2vw,20px)}
.gx__text .label{display:block; margin-bottom:18px}
.gx__d{margin:20px 0 0; font-size:.9rem; line-height:1.75; color:var(--dim)}

/* --- Farbpaar --- */
.gx__paar{margin-bottom:clamp(76px,10vw,150px)}
.gx__paar--letzt{margin-bottom:0}
.gx__kopf{
  display:flex; align-items:baseline; gap:clamp(14px,2.2vw,30px);
  padding-top:18px; margin-bottom:clamp(24px,3.2vw,48px);
  border-top:1px solid var(--line);
}
.gx__nr{
  font-size:.62rem; letter-spacing:.24em; color:var(--faint);
  font-variation-settings:'wdth' 100,'wght' 400;
}
.gx__kopf h3{margin:0}
/* Wie bei .reihe__kopf: erst ab 700px darf die Beschriftung nicht mehr
   umbrechen. Auf dem Handy bleibt sonst eine lange Zeile wie
   „Lunaria 4 & Atacama" stehen und schiebt die Seite seitlich auf. */
.gx__kopf .label{margin-left:auto; text-align:right}
@media(min-width:700px){ .gx__kopf .label{white-space:nowrap} }

.gx__zwei{gap:clamp(16px,2.4vw,34px)}
@media(min-width:760px){
  .gx__zwei{grid-template-columns:1fr 1fr}
  /* Der Partner hängt tiefer und bricht die Rasterlinie auf. */
  .gx__zwei > div:last-child{margin-top:clamp(44px,8vw,120px)}
  /* Bei jedem zweiten Paar andersherum, damit es nicht zum Muster wird. */
  .gx__zwei--rev > div:last-child{margin-top:0}
  .gx__zwei--rev > div:first-child{margin-top:clamp(44px,8vw,120px)}
}

/* --- Dreierreihe: dasselbe Modell in drei Größen nebeneinander ---
   Die mittlere Spalte hängt tiefer, damit auch hier keine gerade
   Linie entsteht. Auf dem Handy stehen die drei untereinander. */
.gx__drei{gap:clamp(16px,2.4vw,34px)}
@media(min-width:760px){
  .gx__drei{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gx__drei > div:nth-child(2){margin-top:clamp(40px,7vw,110px)}
}

/* --- Folge: dreimal derselbe Raum, nur die Lautsprecher wechseln ---
   Untereinander und jedes Bild in voller Breite. Nebeneinander waeren
   die drei zu klein, um den Unterschied zu sehen — und genau der ist
   hier das Motiv. Mehr Luft als sonst in .gal, damit die drei nicht
   wie ein Stapel wirken. */
.gx__folge{gap:clamp(26px,3.4vw,54px)}

/* --- Ausklang: groß links, kleiner rechts und deutlich tiefer --- */
.gx__aus{gap:clamp(18px,2.8vw,44px)}
@media(min-width:760px){
  .gx__aus{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .gx__aus > div:last-child{margin-top:clamp(70px,12vw,180px)}
}

.gx__cap{
  margin:14px 0 0; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); line-height:1.7;
}
.galgroup__h{display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:18px; margin-bottom:clamp(20px,2.4vw,32px); border-bottom:1px solid var(--line-soft)}

/* ============================================================
   Bildreihe auf den Modellseiten

   Auf jeder Modellseite standen bisher nur zwei Aufnahmen. Die Reihe
   bringt weitere unter, ohne den Aufbau der Seite zu ändern: sie sitzt
   als eigener Abschnitt zwischen den vorhandenen und funktioniert
   überall gleich.

   Drei ungleich breite Spalten, die mittlere hängt deutlich tiefer,
   die rechte ein wenig. Die Oberkanten bilden dadurch keine Linie,
   sondern eine Treppe — derselbe Gedanke wie in der Galerie. Jedes
   Foto behält sein eigenes Seitenverhältnis; der Rhythmus entsteht
   über Spaltenbreite und Versatz, nie über einen Beschnitt.

   Unter Tablettbreite steht alles untereinander, dort wäre der
   Versatz nur Leerraum.
   ============================================================ */
.reihe__kopf{
  display:flex; align-items:baseline; gap:clamp(14px,2.2vw,30px);
  padding-top:18px; margin-bottom:clamp(26px,3.6vw,54px);
  border-top:1px solid var(--line);
}
/* Der Hinweis rechts darf auf schmalen Geräten umbrechen — er ist
   länger als die Zeilen in der Galerie und würde sonst überstehen. */
.reihe__kopf .label{margin-left:auto; text-align:right}
@media(min-width:700px){ .reihe__kopf .label{white-space:nowrap} }

.reihe{display:grid; gap:clamp(16px,2.4vw,34px); align-items:start}
@media(min-width:760px){
  .reihe{grid-template-columns:minmax(0,1.24fr) minmax(0,.84fr) minmax(0,1.06fr)}
  .reihe > *:nth-child(2){margin-top:clamp(52px,9vw,132px)}
  .reihe > *:nth-child(3){margin-top:clamp(18px,3vw,44px)}
  /* Versetztes Paar: eines groß, das andere schmal und weit darunter. */
  .reihe--zwei{grid-template-columns:minmax(0,1.46fr) minmax(0,.74fr)}
  .reihe--zwei > *:nth-child(2){margin-top:clamp(64px,12vw,186px)}
  /* Steht links ein Querformat, ist die breite Spalte viel niedriger
     als bei einem stehenden Foto. Der volle Versatz würde das schmale
     Bild rechts weit unter die Zeile hängen lassen. */
  .reihe--quer > *:nth-child(2){margin-top:clamp(20px,3.4vw,56px)}
}

/* Legende: Nummer links, Text daneben, beides auf einer Grundlinie. */
.reihe__cap{
  display:flex; gap:clamp(10px,1.2vw,16px); align-items:baseline;
  margin:14px 0 0; font-size:.72rem; letter-spacing:.06em;
  color:var(--dim); line-height:1.7;
}
.reihe__cap i{
  flex:none; font-style:normal; font-size:.62rem; letter-spacing:.24em;
  color:var(--faint); font-variation-settings:'wdth' 100,'wght' 400;
}
/* Wie in der Galerie lassen sich die Bilder groß öffnen. Die Fotos
   tragen hier keinen Rahmen, der auf den Zeiger reagieren könnte —
   das Signal ist deshalb allein der Zeiger. */
.reihe .shot{cursor:zoom-in}

/* ============================================================
   Lunaria Fly  (Seite #/lunaria-fly, Logik in spiel.js)

   Links die Spielfläche im Format 2:3, rechts Bestenliste und
   Regeln. Auf dem Handy untereinander, die Fläche zuerst.

   Die Fläche behält ihr Verhältnis über aspect-ratio; spiel.js
   rechnet innen immer in 400 × 600 und skaliert einmalig.
   ============================================================ */
.lf{display:grid; gap:clamp(26px,4vw,64px); align-items:start}
@media(min-width:860px){
  .lf{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
}
/* Die Liste ist kurz. Ohne Grenze zöge sich ihre Trennlinie über die
   ganze restliche Seitenbreite und stünde quer zum schmalen Inhalt. */
.lf__neben{max-width:34rem}

.lf__buehne{position:relative; width:100%; max-width:400px; margin-inline:auto}
@media(min-width:860px){ .lf__buehne{margin-inline:0} }
#lf-canvas{
  display:block; width:100%; height:auto; aspect-ratio:2/3;
  background:var(--black); border:1px solid var(--line); touch-action:manipulation;
}

/* Die Tafeln über der Fläche: Bereit, Angehalten, Runde vorbei. */
.lf__lage{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:clamp(20px,5%,34px); text-align:center;
  background:rgba(0,0,0,.82); backdrop-filter:blur(6px);
}
.lf__lage[hidden]{display:none}
.lf__hin{margin:0; font-size:.84rem; line-height:1.75; color:var(--dim)}
.lf__zahl{margin:0; display:flex; flex-direction:column; align-items:center; gap:6px}
.lf__zahl b{
  font-size:clamp(3rem,13vw,4.4rem); font-weight:300; color:var(--white);
  font-variation-settings:'wdth' 108,'wght' 250; letter-spacing:-.03em; line-height:1;
}
.lf__zahl i{font-style:normal; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}

/* --- Anmeldung vor dem ersten Flug ------------------------ */
.lf__form{width:100%; max-width:290px; display:flex; flex-direction:column; gap:8px; text-align:left}
.lf__form .label{align-self:center; margin-bottom:2px}
.lf__form .lf__hin{text-align:center; margin-bottom:10px}
.lf__form label{
  display:block; margin-top:6px;
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}
.lf__form label i{
  display:block; margin-top:4px; font-style:normal; letter-spacing:.06em;
  text-transform:none; font-size:.68rem; opacity:.8;
}
.lf__form input{
  width:100%; padding:11px 12px; font:inherit; font-size:.88rem;
  color:var(--white); background:transparent; border:1px solid var(--line);
}
.lf__form input::placeholder{color:var(--faint)}
.lf__form input:focus{outline:none; border-color:rgba(255,255,255,.45)}
.lf__form .btn{margin-top:12px; align-self:stretch; text-align:center}
.lf__klein{
  margin:2px 0 0; text-align:center; font-size:.66rem; line-height:1.6; color:var(--faint);
}

.lf__willkommen{display:flex; flex-direction:column; align-items:center; gap:16px}
.lf__willkommen[hidden]{display:none}
.lf__gruss{margin:0; font-size:.8rem; line-height:1.7; color:var(--dim); text-align:center}
.lf__gruss b{
  display:block; margin-top:4px; font-weight:300; font-size:1.5rem; color:var(--white);
  font-variation-settings:'wdth' 106,'wght' 300; overflow-wrap:anywhere;
}
.lf__wechsel{
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
  padding:4px 0; border-bottom:1px solid transparent; transition:color .35s ease, border-color .35s ease;
}
.lf__wechsel:hover{color:var(--white); border-bottom-color:rgba(255,255,255,.3)}

.lf__knoepfe{display:flex; flex-direction:column; align-items:center; gap:14px}

/* --- Bestenliste und Regeln ------------------------------- */
.lf__kopf{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid var(--line);
}
.lf__ton{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
  padding:4px 0; border-bottom:1px solid transparent; transition:color .35s ease, border-color .35s ease;
}
.lf__ton:hover{color:var(--white)}
.lf__ton[aria-pressed="true"]{color:var(--dim); border-bottom-color:rgba(255,255,255,.2)}

.lf__rang{list-style:none; margin:0; padding:0}
.lf__rang li{
  display:grid; grid-template-columns:2.2em 1fr auto; align-items:baseline; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
}
.lf__pl{font-size:.64rem; letter-spacing:.2em; color:var(--faint)}
.lf__nm{color:var(--white); font-size:.94rem; overflow-wrap:anywhere}
.lf__pt{
  color:var(--white); font-size:1.05rem;
  font-variation-settings:'wdth' 104,'wght' 400; font-variant-numeric:tabular-nums;
}
/* Freie Plätze bleiben stehen, statt die Liste kurz aussehen zu lassen —
   fünf Zeilen zeigen auf einen Blick, wie viel noch zu holen ist. */
.lf__rang li.lf__frei .lf__nm,
.lf__rang li.lf__frei .lf__pt{color:var(--faint); font-style:italic}
.lf__rang li.lf__frei .lf__pt{font-style:normal}
/* Die eigene Zeile bekommt links eine Marke. */
.lf__rang li.lf__ich{position:relative}
.lf__rang li.lf__ich::before{
  content:""; position:absolute; left:-14px; top:50%; width:5px; height:5px;
  margin-top:-2px; background:var(--white); border-radius:50%;
}
.lf__fuss{margin-top:18px; max-width:46ch}
.lf__regel{margin:0; font-size:.86rem; line-height:1.8; color:var(--dim); max-width:46ch}
.lf__regel .label{display:block; margin-bottom:12px}

/* Nur für Screenreader: sagt das Ergebnis an, sobald eine Runde endet. */
.lf__meldung{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ============================================================
   Bildbetrachter
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:95; display:none;
  background:rgba(0,0,0,.96); backdrop-filter:blur(24px);
}
.lb.on{display:grid; grid-template-rows:auto 1fr auto}
.lb__kopf,.lb__fuss{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px var(--gutter);
}
.lb__zahl,.lb__text{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint)}
.lb__text{text-transform:none; letter-spacing:.04em; font-size:.82rem; color:var(--silver); max-width:60ch}
.lb__zu{padding:10px; margin:-10px; color:var(--silver); transition:color .3s ease}
.lb__zu:hover{color:var(--white)}
.lb__zu svg{display:block; width:22px; height:22px}
.lb__mitte{position:relative; display:grid; place-items:center; padding:0 clamp(12px,4vw,80px); min-height:0}
.lb__bild{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  opacity:0; transition:opacity .45s var(--ease);
}
.lb__bild.da{opacity:1}
.lb__pfeil{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:52px; height:52px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--silver);
  transition:border-color .35s ease, color .35s ease, background .35s ease;
}
.lb__pfeil:hover{border-color:#fff; color:#fff; background:rgba(255,255,255,.06)}
.lb__pfeil[disabled]{opacity:.25; pointer-events:none}
.lb__pfeil--zurueck{left:clamp(8px,2vw,26px)}
.lb__pfeil--vor{right:clamp(8px,2vw,26px)}
.lb__pfeil svg{width:18px; height:18px}
@media(max-width:600px){
  .lb__pfeil{width:44px; height:44px}
  .lb__fuss{padding-bottom:26px}
}
/* Anklickbare Bilder in der Galerie */
.gal .shot{cursor:zoom-in}
body.lb-offen{overflow:hidden}

/* Newsletter im Footer */
.news{margin-top:30px; max-width:300px}
.news__f{display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding-bottom:9px}
.news__f input{flex:1; background:transparent; border:0; font:inherit; font-size:.82rem; color:var(--white); padding:4px 0}
.news__f input:focus{outline:0}
.news__f button{font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--white); white-space:nowrap}
.news__f button:hover{opacity:.6}
.news__n{font-size:.68rem; color:var(--faint); line-height:1.7; margin-top:12px}

@media(max-width:430px){
  .hdr__brand .owl{width:32px}
  .hdr__name{font-size:.62rem; letter-spacing:.24em}
  .hdr{padding-block:15px}
  .cookie{padding:22px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .r,.seq > *,.rline,.shot img,.lines .ln > span,.spec .row{
    opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important;
  }
  .prog{display:none}
  html{scroll-behavior:auto}
}

/* --- Originallogo (unverändert, nur freigestellt) --- */
.logo-mark{background:url(logo-mark.webp) center/contain no-repeat; aspect-ratio:240/275}

/* --- Die Eule als versteckte Tür zum Spiel -----------------
   Sieht aus wie vorher. Nur der Zeiger und ein leises Aufhellen
   beim Überfahren verraten, dass hier etwas ist — genug, damit man
   es findet, zu wenig, als dass es sich aufdrängt. */
.eulentuer{
  position:relative; display:block; padding:0; margin:0 auto 34px;
  background:none; border:0; width:58px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
/* display:block ist nötig — als inline-Element ignoriert das span
   Breite und Seitenverhältnis, der Knopf wäre null Pixel hoch. */
.eulentuer__eule{
  display:block; width:58px; position:relative; z-index:1;
  transition:transform .5s var(--ease), filter .5s ease;
}
.eulentuer:hover .eulentuer__eule,
.eulentuer:focus-visible .eulentuer__eule{ transform:scale(1.07); filter:brightness(1.25) }
.eulentuer:active .eulentuer__eule{ transform:scale(.97) }

/* Die zweite, kleinere Eule lugt beim Überfahren rechts oben hervor.
   Sie startet unsichtbar genau hinter der großen und schiebt sich von
   dort heraus — dadurch sieht es aus, als käme sie dahinter vor. Ein
   echtes Verstecken ginge nicht: die große Eule ist freigestellt, durch
   ihre Lücken wäre die kleine sonst die ganze Zeit zu sehen. */
.eulentuer__guck{
  position:absolute; z-index:0; left:50%; top:50%; width:34px;
  margin:-17px 0 0 -17px; pointer-events:none;
  opacity:0; transform:translate(0, 6px) scale(.6) rotate(-8deg);
  transition:opacity .35s ease, transform .55s var(--ease);
}
/* Die kleine Eule ist die Spielfigur, nicht das Firmenzeichen — sie
   verrät damit schon beim Hervorlugen, worum es geht. */
.eulentuer__guck i{
  display:block; width:100%; aspect-ratio:1;
  background:url(eule-spiel.svg) center/contain no-repeat;
}
.eulentuer:hover .eulentuer__guck,
.eulentuer:focus-visible .eulentuer__guck{
  opacity:1; transform:translate(30px, -22px) scale(1) rotate(12deg);
}
/* Einmal draußen, wippt sie leise weiter. Das Wippen sitzt auf dem
   inneren Element, damit es die Bewegung nach außen nicht überschreibt. */
.eulentuer:hover .eulentuer__guck i{ animation:guckwipp 1.6s ease-in-out .5s infinite }
@keyframes guckwipp{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-3px) }
}
.logo-lockup{background:url(logo-lockup.webp) center/contain no-repeat; aspect-ratio:620/783}

/* --- Platzhalterfarben je Foto ----------------------------
   Mittelwert des jeweiligen Bildes, steht im Rahmen, bis das Foto
   geladen ist.

   Die Werte stehen in bilder/farben.css, erzeugt von build-images.ps1
   und in index.html direkt eingebunden. Früher waren sie hierher
   abgeschrieben; die Abschrift lief den erzeugten Werten davon und
   kannte die Hälfte der Bilder nicht mehr. Nicht wieder von Hand
   pflegen. */


/* ============================================================
   Konfigurator  (Seite #/konfigurator, Logik in konfigurator.js)
   ============================================================ */
.konf__modelle{display:inline-flex; border:1px solid var(--line); margin-bottom:clamp(30px,4vw,54px)}
.konf__modell{
  padding:14px 26px; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim); font-variation-settings:'wdth' 100,'wght' 400;
  transition:color .4s ease, background .4s ease;
}
.konf__modell + .konf__modell{border-left:1px solid var(--line)}
.konf__modell:hover{color:var(--white)}
.konf__modell[aria-pressed="true"]{background:var(--white); color:var(--black)}
@media(max-width:600px){
  /* Zu dritt passen die Namen nicht mehr nebeneinander — „Atacama
     Reference" bräuchte allein die halbe Breite. Also untereinander. */
  .konf__modelle{display:grid; grid-template-columns:1fr; width:100%}
  .konf__modell{padding:13px 10px; font-size:.62rem; letter-spacing:.18em; white-space:nowrap}
  .konf__modell + .konf__modell{border-left:0; border-top:1px solid var(--line)}
}

.konf__raster{display:grid; gap:clamp(30px,5vw,80px); align-items:start}
@media(min-width:900px){ .konf__raster{grid-template-columns:auto minmax(0,1fr)} }

/* Bildfläche im Format 2:3. Die Bilder werden nie beschnitten; wo ein
   Bild die Fläche nicht ganz füllt, bleibt sie schwarz wie die Seite. */
.konf__buehne{
  position:relative; aspect-ratio:2/3;
  width:100%; max-width:520px; margin-inline:auto;
  background:var(--black); overflow:hidden;
}
@media(min-width:900px){
  .konf__buehne{height:min(80vh,760px); width:auto; max-width:none; margin:0}
}
.konf__bild{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0;
  /* --zieh setzt konfigurator.js, solange ein Finger über der Bühne
     wischt. Das Bild folgt dem Finger ein gedämpftes Stück weit
     (höchstens 26px) und schnappt beim Loslassen zurück — ein Hinweis,
     dass etwas passiert, keine Animation. */
  transform:translateX(var(--zieh,0px));
  transition:opacity .55s var(--ease), transform .4s var(--ease);
}
/* Während gezogen wird, klebt das Bild am Finger statt hinterherzulaufen. */
.konf__buehne.zieht .konf__bild{transition:opacity .55s var(--ease)}
.konf__bild.on{opacity:1}

/* Ansichtsschalter unter der Bühne. Bewusst keine Kästen: zwei kleine
   Wörter, das gewählte hell und unterstrichen — dieselbe Sprache wie
   die Schritte oben auf der Seite. */
/* Unter 900px behält die Bühne ihre eigene Breite samt
   margin-inline:auto — deshalb dort kein justify-items, sonst fiele
   die Zentrierung weg. Erst ab 900px schrumpft die Spalte auf das
   Bild, damit der Schalter an der linken Bildkante beginnt. */
.konf__links{display:grid}
@media(min-width:900px){ .konf__links{justify-items:start} }
.konf__ansichten{display:flex; gap:26px; margin-top:16px}
@media(max-width:899px){ .konf__ansichten{justify-content:center} }
.konf__ansicht{
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--faint); padding-bottom:6px;
  border-bottom:1px solid transparent;
  font-variation-settings:'wdth' 100,'wght' 400;
  transition:color .35s ease, border-color .35s ease;
}
.konf__ansicht:hover{color:var(--white)}
.konf__ansicht[aria-pressed="true"]{color:var(--white); border-bottom-color:var(--white)}

.konf__gruppe{margin-bottom:clamp(30px,3.6vw,46px)}
.konf__t{
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--faint);
  font-variation-settings:'wdth' 100,'wght' 400; margin-bottom:8px;
}
/* „auf Anfrage" hängt an der Überschrift und darf nicht wie eine
   zweite Überschrift wirken — deshalb schmaler, dunkler, ohne Sperrung. */
.konf__nb{
  font-style:normal; letter-spacing:.12em; color:var(--faint);
  font-variation-settings:'wdth' 92,'wght' 300; opacity:.75;
}
.konf__t .konf__nb::before{content:"· "}
.konf__erkl{
  margin:0 0 16px; max-width:46ch;
  font-size:.78rem; line-height:1.7; color:var(--dim);
}

/* Materialproben. Beide Gruppen sehen gleich aus — Furnier und Lack
   sind zwei gleichberechtigte Wege, nur einer davon ist die Regel. */
/* 84px statt breiterer Kacheln: so stehen die sieben Furniere auf einer
   Zeile statt sechs plus einem Nachzügler. Weil auto-fill die Spurenzahl
   für beide Gruppen gleich bestimmt, stehen Hölzer und Farben darunter
   in denselben Spalten. */
.konf__proben{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px}
.konf__p{
  display:grid; gap:10px; justify-items:center; padding:10px 8px 12px;
  border:1px solid var(--line-soft); color:var(--dim); text-align:center;
  transition:border-color .35s ease, color .35s ease;
}
.konf__p:hover{border-color:var(--line); color:var(--white)}
.konf__p[aria-pressed="true"]{border-color:var(--white); color:var(--white)}
/* Feste Pixelgrenzen: eine Prozenthöhe löst sich im Raster nicht auf,
   die Probe würde über die Beschriftung ragen. Ganze Probe, kein Beschnitt. */
.konf__muster{width:56px; height:56px; display:grid; place-items:center; background:var(--panel-2); overflow:hidden}
.konf__muster img{max-width:56px; max-height:56px; width:auto; height:auto}
.konf__pn{font-size:.72rem; letter-spacing:.04em; line-height:1.3}

.konf__summe{
  padding:22px 0; margin:0 0 22px; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  color:var(--white); font-size:clamp(1rem,1.5vw,1.2rem); font-variation-settings:'wdth' 106,'wght' 300;
}
.konf__hinweis{margin-top:26px}

/* ============================================================
   Übergang von den Modellseiten zum Konfigurator
   ============================================================ */
@media(min-width:920px){ .zukonf{align-items:center} }
.zukonf__bild{display:block}

/* Furnierschau: zwei Bildebenen übereinander, die sich überblenden.
   Die erste steht im Fluss und bestimmt die Höhe, die zweite liegt
   darüber. Beide Aufnahmen haben dasselbe Seitenverhältnis, mit
   „contain" deckt die obere die untere deshalb genau. Die zweite
   Ebene setzt konfigurator.js ein — ohne JavaScript bleibt das
   eine Foto stehen und diese Regeln greifen gar nicht. */
.shot.schau{position:relative}
.shot.schau .schau__l{opacity:0; transition:clip-path 1.35s var(--ease), opacity .9s var(--ease)}
.shot.schau .schau__l.on{opacity:1}
.shot.schau .schau__l + .schau__l{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}
/* Die Unterschrift wechselt mit dem Holz und soll dabei nicht springen. */
.zukonf__cap{min-height:1.4em}
.zukonf__bild .shot img{transition:clip-path 1.35s var(--ease), filter .8s var(--ease)}
.zukonf__bild:hover .shot img{filter:brightness(1.04)}
.zukonf__bild:hover .shot{border-color:var(--line)}
.zukonf__cap{
  display:block; text-align:center; font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint); transition:color .4s ease;
}
.zukonf__bild:hover .zukonf__cap{color:var(--white)}

/* Holzfelder mit drei Mustern: drei Spalten, damit im Viererraster keine Lücke bleibt */
@media(min-width:700px){ .swatches--3{grid-template-columns:repeat(3,1fr)} }


/* Startseite: Modelle in drei Spalten */
.pc__text{display:grid; gap:8px; padding-top:18px; border-top:1px solid var(--line-soft)}
.pc__daten{font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint)}
.pc .tlink{justify-self:start; margin-top:8px}
.pc:hover .tlink{border-color:#fff}
.pc:hover .tlink i{width:40px}
.p-weiche-platine{--avg:#bbb7b3}

/* ============================================================
   Lunaria 6 Regalbox vorerst ausgeblendet.
   Wiedereinschalten: diesen Block löschen und in index.html die
   Regalbox-Seite wieder auf class="page" data-route="/lunaria-6-regalbox" setzen.
   ============================================================ */
[data-regalbox-aus]{display:none !important}
/* Die Regel von früher fasste das Raster auf zwei Spalten zusammen, weil
   mit der ausgeblendeten Regalbox nur zwei Modelle sichtbar blieben. Seit
   der Lunaria 4 sind es wieder drei — das Raster darf wieder dreispaltig
   sein, und die Überschrift „Drei Lautsprecher“ stimmt sogar wieder.
   Bleibt hier als Notiz, falls die Regalbox zurückkehrt: dann sind es vier
   und die Zeile müsste umbrechen oder der Text angepasst werden. */
.p-weiche-platine{--avg:#b6aea9}
.p-weiche-platine-mcap{--avg:#bbb7b3}


/* ============================================================
   Startseite: Auftakt, nummerierte Raster, Modellkarten
   ============================================================ */
/* Zwei Spalten erst ab 1260px — derselbe Punkt, an dem auch die
   Hauptnavigation erscheint (.nav).

   Die Textspalte misst 0,83 × Fensterbreite − 435px: das Bild belegt
   feste 420px, Innen- und Spaltenabstand hängen an vw. Die Überschrift
   soll zweizeilig stehen, und ihre längere Zeile („Unverfälschter
   Klang.") braucht bei der Schriftgröße .d2 = clamp(2rem, 4,8vw, 3,7rem)
   etwa das 9,8-fache der Schriftgröße an Breite. Gerechnet und
   nachgemessen passt es ab rund 1220px — bei 1260px bleiben 31px Luft,
   bei 1220 wären es 4px, und so knapp will man das nicht haben.

   Darunter stehen Bild und Text untereinander, beide in voller Breite;
   dort ist immer Platz genug. Vorher stand die Grenze bei 1040px, als
   die zweite Zeile noch „Nichts geschönt." hieß und 100px kürzer war. */
.intro{display:grid; gap:clamp(40px,6vw,110px); align-items:center}
@media(min-width:1260px){ .intro{grid-template-columns:auto minmax(0,1fr)} }
.intro .shot{width:min(420px,100%); margin-inline:auto}
@media(max-width:1259px){ .intro .shot{width:min(340px,100%)} }

.kopf{margin-bottom:clamp(44px,5.5vw,80px)}

.nr{padding-top:24px; border-top:1px solid var(--line)}
.nr__z{
  display:block; margin-bottom:16px; font-size:.62rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--faint); font-variation-settings:'wdth' 100,'wght' 400;
}
.nr__t{font-size:clamp(1.05rem,1.5vw,1.25rem); font-variation-settings:'wdth' 106,'wght' 380; margin-bottom:10px}
.nr p{margin:0; font-size:.95rem; line-height:1.75; color:var(--dim)}

.gruende{display:grid; gap:clamp(40px,4.5vw,64px) clamp(28px,4vw,64px)}
@media(min-width:700px){ .gruende{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1100px){ .gruende{grid-template-columns:repeat(3,minmax(0,1fr))} }
.gruende__bild{margin:0; padding-top:24px; border-top:1px solid var(--line)}
.gruende__bild .shot{max-width:320px}
.gruende__cap{margin-top:12px; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint)}

/* Vier Modelle, deshalb ein eigenes Raster statt .g3: zwei Spalten ab
   Tablet, vier ab 1180 px. Mit drei Spalten stuende die vierte Karte
   allein in einer zweiten Zeile. Der Abstand faellt in der Vierer-
   aufteilung etwas kleiner aus, sonst bleibt fuer die Bilder zu wenig. */
.modelle{gap:clamp(30px,4vw,64px)}
@media(min-width:820px){ .modelle{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1180px){ .modelle{grid-template-columns:repeat(4,1fr); gap:clamp(26px,2.6vw,40px)} }
/* Die vier Modellkarten brauchen hier keine feste Kachel: ihre
   Frontaufnahmen sind alle rund 2:3, deshalb stehen die Modellnamen
   von selbst auf einer Linie. Hier stand kurzzeitig eine Kachel mit
   object-fit:contain — die füllte den Unterschied mit Schwarz auf,
   was als Balken sichtbar war und nicht gefallen hat. Stattdessen
   wird das eine abweichende Bild beim Erzeugen zugeschnitten, siehe
   $ZuschnittOben in build-images.ps1.
   Wer ein Modellbild tauscht, achtet also auf das Seitenverhältnis —
   sonst rutscht ein Name aus der Reihe. */
.modelle .pc{gap:0}
.modelle .pc__text{padding-top:26px; margin-top:26px}
.modelle .pc__text .d3{margin-bottom:6px}
.pc__satz{margin:0; font-size:.92rem; color:var(--dim)}
/* Modellkarten: nie bildschirmfüllend. Ab Tablet zwei nebeneinander,
   auf dem Handy eine Karte in begrenzter Breite. */
@media(max-width:559px){ .modelle .pc{max-width:340px} }
/* Karten unterschiedlich langer Texte: Bild und Text oben ausrichten, nicht strecken */
.modelle .pc{align-content:start}


/* ============================================================
   Fotos ohne Rahmen: das Bild liegt direkt auf dem Seitenhintergrund
   ============================================================ */
.shot,.light .shot,.sw__c{border:0 !important}

/* Technische Daten: Luft unter der Überschrift, Bild in ruhiger Größe */
.shot--daten{margin-top:clamp(40px,4.5vw,64px); max-width:380px}
@media(max-width:919px){ .shot--daten{max-width:320px} }

/* Auftakt einer Modellseite: Foto links, Konstruktionstext rechts.
   Vorher stand das Bild allein über die volle Satzbreite — gemessen
   1267 × 1899 px bei 1440 px Fensterbreite, fast zwei Bildschirmhöhen
   für ein einziges Foto, und der Text kam erst weit darunter. Jetzt
   stehen beide nebeneinander und das Bild bekommt seine Größe aus der
   Spalte. Auf dem Handy untereinander, dort ist Nebeneinander sinnlos. */
.auftakt{display:grid; gap:clamp(30px,4.5vw,70px); align-items:center}
@media(min-width:900px){
  .auftakt{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
}
.auftakt__text .eyebrow{margin-bottom:26px}
.auftakt__text p.lead{max-width:52ch}
.shot--auftakt{margin-inline:0}
/* Auf dem Handy steht das Bild allein und darf die volle Breite nutzen. */
@media(max-width:899px){ .shot--auftakt{max-width:none} }


/* ============================================================
   Über uns: die beiden Einzelporträts

   Die Aufnahmen haben leicht verschiedene Seitenverhältnisse (3:4 und
   2:3). Nebeneinander in gleicher Breite wurden sie deshalb
   unterschiedlich hoch, die Namen standen nicht auf einer Linie, und
   beide waren mehr als doppelt so hoch wie das Gruppenbild darüber.

   Beide bekommen nun dieselbe Höhe und behalten ihre eigene Breite.
   Beschnitten wird nichts. Die Spalten schmiegen sich ans Bild, damit
   das Paar zusammenbleibt statt über die ganze Breite zu zerfallen.
   Auf dem Handy stehen die Porträts untereinander und dürfen wieder
   die volle Breite nutzen — dort stellt sich die Frage nicht.
   ============================================================ */
.pors{display:grid; gap:clamp(30px,2.4vw,34px)}

.pors__text{margin:12px 0 0; font-size:.88rem; line-height:1.75; color:var(--silver)}

/* Schwerpunkte und Lieblingslied als Fuß der Person, je durch eine
   Haarlinie abgesetzt. Die Schwerpunkte stehen untereinander, eine Zeile
   je Punkt: beide Spalten haben gleich viele: so bleiben die Blöcke gleich
   hoch und alles darunter steht auf einer Linie. */
.pors__rolle,
.pors__lied{
  margin:20px 0 0; padding-top:15px; border-top:1px solid var(--line-soft);
  font-size:.88rem; line-height:1.6; color:var(--silver);
}
.pors__rolle .label,
.pors__lied .label{display:block; margin-bottom:8px}
.pors__rolle ul{margin:0; padding:0; list-style:none; line-height:1.85}

/* Die Regeln fürs Nebeneinander stehen bewusst NACH den Grundregeln:
   sie haben dieselbe Spezifität, die spätere gewinnt. Weiter oben wurde
   das margin-top:auto vom margin der Grundregel wieder überschrieben. */
@media(min-width:820px){
  /* Zwei schmale Spalten dicht nebeneinander, links angeschlagen. Die
     Spalte ist etwas breiter als das Bild, damit der Text darunter Platz
     hat, ohne dass die beiden auseinanderfallen. */
  .pors{grid-template-columns:repeat(2,minmax(0,340px)); justify-content:start; align-items:stretch}
  .pors .shot{width:fit-content}
  .pors .shot img{height:clamp(320px,30vw,440px); width:auto; max-width:100%}

  /* Die Texte sind verschieden lang. Beide Spalten werden gleich hoch und
     der Fuß aus Schwerpunkten und Lieblingslied sitzt am unteren Ende —
     sonst stünden die Blöcke versetzt, wie zuvor schon die Namen. */
  .pors > div{display:flex; flex-direction:column}
  .pors__rolle{margin-top:auto}
}


/* ============================================================
   Bilderlauf — Messebilder zum Durchklicken (Events)

   Die Aufnahmen wechseln zwischen Hoch- und Querformat. Die Bühne
   behält deshalb ihre Höhe, und jedes Bild bleibt vollständig und
   unverzerrt darin stehen. Der Platz daneben bleibt schwarz; da die
   Bühne dieselbe Farbe hat wie die Seite, ist kein Rahmen zu sehen.
   ============================================================ */
/* Die Breite ist begrenzt, damit die Pfeile bei Hochformaten nicht weit
   draußen im Schwarzen stehen. 980 px fasst das Querformat in voller
   Höhe — breiter müsste die Bühne nie sein. */
.bl__buehne{
  position:relative; overflow:hidden; background:var(--black);
  height:clamp(380px,62vh,620px);
  max-width:980px; margin-inline:auto;
}
@media(max-width:700px){
  .bl__buehne{height:auto; aspect-ratio:3/4; max-height:72vh}
}

.bl__bild{
  position:absolute; inset:0; margin:auto;
  max-width:100%; max-height:100%; width:auto; height:auto;
  opacity:0; visibility:hidden;
  transition:opacity .7s var(--ease), visibility 0s linear .7s;
}
.bl__bild.da{
  opacity:1; visibility:visible;
  transition:opacity .7s var(--ease), visibility 0s;
}

/* Pfeile: dieselbe Form wie im großen Bildbetrachter */
.bl__pfeil{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:52px; height:52px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--silver); background:rgba(0,0,0,.4);
  transition:border-color .35s ease, color .35s ease, background .35s ease;
}
.bl__pfeil:hover{border-color:#fff; color:#fff; background:rgba(255,255,255,.06)}
.bl__pfeil--zurueck{left:clamp(8px,2vw,26px)}
.bl__pfeil--vor{right:clamp(8px,2vw,26px)}
.bl__pfeil svg{width:18px; height:18px}
@media(max-width:600px){ .bl__pfeil{width:44px; height:44px} }

/* Anzeige der Position: Haarstriche statt Punkte, wie die übrigen Linien */
.bl__leiste{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:980px; margin:22px auto 0;
  padding-top:18px; border-top:1px solid var(--line-soft);
}
.bl__striche{display:flex; gap:10px; align-items:center}
.bl__strich{
  position:relative; width:38px; height:22px;
  padding:0; border:0; background:none; cursor:pointer;
}
.bl__strich::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:rgba(255,255,255,.22); transition:background .45s ease;
}
.bl__strich:hover::after{background:var(--silver)}
.bl__strich[aria-current="true"]::after{background:var(--white)}

.bl__zahl{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap;
}
.bl__text{
  margin:14px auto 0; max-width:980px;
  font-size:.82rem; line-height:1.7; color:var(--dim);
}

@media(prefers-reduced-motion:reduce){
  .bl__bild,.bl__bild.da{transition:none}
}

/* ============================================================
   Anklickbare Bilder: heben sich beim Überfahren leicht an, geben
   beim Drücken nach und blitzen beim Klick kurz auf.
   ============================================================ */
a .shot,.gal .shot[role="button"]{transition:transform .6s var(--ease)}
a .shot img,.gal .shot[role="button"] img{transition:clip-path 1.35s var(--ease), filter .5s var(--ease)}
a:hover .shot,.gal .shot[role="button"]:hover{transform:translateY(-6px)}
a:hover .shot img,.gal .shot[role="button"]:hover img{filter:brightness(1.1)}
a:active .shot,.gal .shot[role="button"]:active{transform:translateY(-2px) scale(.985); transition-duration:.12s}
.shot::after{content:""; position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none}
.shot.blitz::after{animation:blitz .5s ease-out}
@keyframes blitz{0%{opacity:.2} 100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  a:hover .shot,a:active .shot,.gal .shot[role="button"]:hover{transform:none}
  .shot.blitz::after{animation:none}
}
.konf__wunsch{margin:0 0 26px; font-size:.92rem; line-height:1.75; color:var(--silver); max-width:48ch}

/* Technische Daten: Überschrift oben, Bild links neben der Tabelle.
   Am Computer bleibt das Bild beim Scrollen durch die Tabelle stehen. */
.daten .shot--daten{margin-top:0; max-width:360px; width:100%}
@media(min-width:920px){
  .daten{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .daten__bild{position:sticky; top:110px}
  .daten .shot--daten{max-width:440px}
  /* Ein Querformat wird bei gleicher Breite nur halb so hoch und wirkt
     neben der langen Tabelle verloren. Es bekommt deshalb mehr Breite,
     damit alle drei Modellseiten gleich gewichtet aussehen. */
  .daten .shot--quer{max-width:560px}
}

/* ============================================================
   Konfigurator: Schritte-Reiter und Klangprofil
   ============================================================ */
.schritte{display:flex; gap:clamp(24px,4vw,56px); border-bottom:1px solid var(--line); margin-bottom:clamp(36px,4.5vw,60px)}
.schritt{
  display:flex; align-items:baseline; gap:12px; padding:0 0 16px; margin-bottom:-1px;
  font-size:clamp(1rem,1.5vw,1.2rem); color:var(--dim); border-bottom:1px solid transparent;
  font-variation-settings:'wdth' 106,'wght' 320; transition:color .35s ease, border-color .35s ease;
}
.schritt:hover{color:var(--white)}
.schritt[aria-selected="true"]{color:var(--white); border-bottom-color:var(--white)}
.schritt__nr{font-size:.6rem; letter-spacing:.26em; color:var(--faint)}
/* Was in diesem Schritt gewählt ist, steht klein darunter. Leer bleibt
   die Zeile weg, sonst spränge die Reiterhöhe beim ersten Klick. */
.schritt__wahl{
  display:block; margin-top:6px; font-size:.64rem; letter-spacing:.1em;
  text-transform:none; color:var(--faint); font-variation-settings:'wdth' 96,'wght' 300;
  max-width:26ch; line-height:1.5;
}
.schritt__wahl:empty{display:none}
.schritt[aria-selected="true"] .schritt__wahl{color:var(--dim)}
/* Auf dem Handy stehen beide Reiter nebeneinander in 334 px. Zwei
   Untertitel dazu drängen sich auf drei Zeilen. Was gewählt ist,
   steht ohnehin in der Zusammenfassung und an der hellen Karte. */
@media(max-width:599px){ .schritt__wahl{display:none} }

/* ---- Schritt 1: Editionen ---- */
.koed__erkl{max-width:60ch; margin:0 0 clamp(24px,3vw,38px)}
.koed__liste{display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line)}
/* Die Spaltenzahl richtet sich nach der Zahl der Karten, nicht
   umgekehrt: die Lunaria 4 hat eine Edition, der Aellon zwei, die
   übrigen drei. Mit festen drei Spalten blieben leere Felder stehen —
   und da die Trennlinien aus dem Hintergrund des Rasters kommen,
   stünden dort graue Flächen statt nichts. „auto-fit" lässt leere
   Spuren zusammenfallen, die vorhandenen Karten füllen die Zeile. */
@media(min-width:820px){
  .koed__liste{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:0}
}
.koed__k{
  display:grid; gap:12px; align-content:start; text-align:left;
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px);
  background:var(--black); color:var(--dim);
  transition:background .4s ease, color .4s ease;
}
@media(min-width:820px){ .koed__k + .koed__k{border-left:1px solid var(--line)} }
.koed__k:hover{color:var(--white)}
.koed__k[aria-pressed="true"]{background:var(--white); color:var(--black)}
.koed__n{font-size:clamp(1.05rem,1.5vw,1.3rem); font-variation-settings:'wdth' 106,'wght' 300; line-height:1.25}
.koed__b{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); line-height:1.7}
.koed__k[aria-pressed="true"] .koed__b{color:#555}
.koed__s{font-size:.88rem; line-height:1.7}
.koed__kp{margin:clamp(24px,3vw,36px) 0 0; font-size:.92rem; line-height:1.75; color:var(--silver); max-width:56ch}
.koed__kp a{border-bottom:1px solid rgba(255,255,255,.3)}
.koed__weiter{margin-top:clamp(26px,3.2vw,40px)}

/* ---- Vom Klangprofil empfohlene Edition ---- */
.ed--empfohlen{position:relative}
.ed__tipp{
  grid-column:1/-1; margin:0 0 20px; padding-left:16px;
  border-left:2px solid var(--white);
  font-size:.9rem; line-height:1.75; color:var(--silver);
}
.ed__tipp .label{display:block; margin-bottom:6px; color:var(--white)}
.ed__tipp a{border-bottom:1px solid rgba(255,255,255,.3)}
.konf__weiter{margin-top:30px}

.kp{max-width:980px}
.kp__kopf{display:grid; gap:14px; margin-bottom:clamp(30px,4vw,54px)}
.kp__kopf .label{margin:0}
.kp__balken{height:1px; background:var(--line)}
.kp__balken i{display:block; height:1px; width:0; background:var(--white); transition:width .7s var(--ease)}
.kp__frage{margin-bottom:12px}
.kp__hilfe{color:var(--dim); font-size:.92rem; margin:0}
.kp__antworten{display:grid; gap:10px; margin-top:clamp(26px,3vw,40px)}
@media(min-width:720px){ .kp__antworten{grid-template-columns:repeat(2,minmax(0,1fr))} }
.kp__a{
  display:grid; gap:4px; text-align:left; padding:20px 22px;
  border:1px solid var(--line); color:var(--silver);
  transition:border-color .35s ease, background .35s ease, color .35s ease, transform .5s var(--ease);
}
.kp__a:hover{border-color:rgba(255,255,255,.4); color:var(--white)}
.kp__a:active{transform:scale(.99)}
.kp__a[aria-pressed="true"]{border-color:var(--white); background:rgba(255,255,255,.05); color:var(--white)}
.kp__at{font-size:1.02rem; font-variation-settings:'wdth' 104,'wght' 350}
.kp__ad{font-size:.8rem; color:var(--dim)}
.kp__nav{display:flex; justify-content:space-between; align-items:center; margin-top:clamp(34px,4vw,54px)}
.kp__nav .btn[disabled]{opacity:.35; pointer-events:none}
button.tlink{background:none}

.kp__erg{display:grid; gap:clamp(34px,5vw,80px)}
@media(min-width:900px){ .kp__erg{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:start} }
.kp__titel{margin:4px 0 28px}
.kp__skala{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); max-width:460px}
.kp__spur{position:relative; height:1px; background:var(--line)}
.kp__spur i{position:absolute; top:50%; width:11px; height:11px; border-radius:50%; background:var(--white); transform:translate(-50%,-50%); transition:left 1.2s var(--ease)}
.kp__satz{margin-top:28px}
.kp__liste{display:grid; gap:22px}
.kp__liste .nr p{font-size:.88rem}
/* ============================================================
   „Ihre Auswahl“ über dem Nachrichtenfeld

   Zeigt, was aus Konfigurator, Klangprofil und Editionen mitkommt.
   Kein Kasten mit Rahmen — zwei Haarlinien reichen, wie überall sonst.
   Ist nichts gewählt, bleibt der Bereich ausgeblendet.
   ============================================================ */
.ausw{
  margin-bottom:clamp(26px,3vw,38px);
  padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line-soft);
}
.ausw[hidden]{display:none}
.ausw__kopf{display:flex; align-items:baseline; justify-content:space-between; gap:18px}
.ausw__weg{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .35s ease, border-color .35s ease;
}
.ausw__weg:hover{color:var(--white); border-bottom-color:rgba(255,255,255,.34)}

.ausw__liste{margin:16px 0 0}
.ausw__z{display:grid; gap:2px 22px; padding:7px 0}
@media(min-width:520px){ .ausw__z{grid-template-columns:150px minmax(0,1fr)} }
.ausw__z dt{
  margin:0; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); line-height:1.9;
}
.ausw__z dd{margin:0; font-size:.95rem; line-height:1.65; color:var(--white)}
.ausw__hin{margin:14px 0 0; font-size:.82rem; line-height:1.7; color:var(--dim)}

/* Bauteilaufnahme zur ermittelten Abstimmung. Die sechs Aufnahmen haben
   unterschiedliche Seitenverhältnisse (quadratisch bis breit) — das Bild
   bestimmt seine Höhe deshalb selbst, nichts wird beschnitten. Es wird je
   Auswertung nur eine gezeigt, also springt auch nichts.
   Gleiche Behandlung wie bei den Editionen: kleines Bild, Angaben daneben.
   Vorher stand es über die volle Breite und erschlug die Auswertung. */
.kp__bauteile{
  margin:clamp(34px,4vw,52px) 0 0; padding-top:24px;
  border-top:1px solid var(--line-soft);
  display:grid; gap:clamp(18px,2.4vw,30px); align-items:start;
}
@media(min-width:520px){ .kp__bauteile{grid-template-columns:200px minmax(0,1fr)} }
/* Ohne Bild braucht es die Bildspalte nicht. */
.kp__bauteile--ohne{grid-template-columns:minmax(0,1fr) !important}
.kp__bauteile img{display:block; width:100%; max-width:200px; height:auto}
.kp__bauteile figcaption{font-size:.84rem; line-height:1.7; color:var(--silver)}
.kp__bauteile figcaption .label{display:block; margin-bottom:8px}

.kp__gruende{margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid var(--line-soft)}
.kp__gruende ul{margin:0; padding-left:18px; color:var(--dim)}
.kp__gruende li{margin-bottom:6px}
.kp__aktion{display:flex; flex-wrap:wrap; align-items:center; gap:18px 34px; margin-top:clamp(36px,4.5vw,56px)}
.kp__hinweis{margin-top:26px}
/* hidden muss gegen display:flex/grid gewinnen */
.kp[hidden],.kp [hidden],.konf[hidden]{display:none !important}