/* =========================================================
   Unter den Erlen — Entwurf
   Ruhig, reduziert, erdig. Kein Raster, keine Kaesten.
   ========================================================= */

:root{
  /* Grundton: ihre Vorgabe war #E7E7E3 (fast neutralgrau). Am 19.09. auf
     ihren Wunsch "ganz dezent etwas sandiger" leicht ins Warme geschoben.
     Die uebrigen Toene sind im selben Schritt mitgezogen, sonst wirken
     Linien und Bildhintergruende grau auf dem warmen Grund.
     Zurueck zur alten Fassung: #E7E7E3 / #DFDFDA / #D3D3CD / #B4B4AC / #CDCDC6.
     Reines Schwarz bleibt draussen. */
  --paper:      #E9E6DF;   /* Grundton, dezent sandig (vorher #E7E7E3) */
  --paper-warm: #E0DCD5;   /* Bildhintergrund, eine Spur tiefer */
  --sand:       #D5D0C7;
  --stone:      #B6B1A7;
  --line:       #CFCAC1;
  --ink:        #2A2A26;   /* fast schwarz, aber nicht kalt — 11,6:1 */
  --ink-soft:   #4A4A44;
  --muted:      #666660;   /* 4,6:1 auf --paper, auch klein noch AA */
  --oak:        #75613F;   /* Akzent — 4,8:1, extrem sparsam */

  /* Wortmarke und Fliesstext sind seit 03.09. dieselbe Familie —
     Cormorant Garamond, nur Gewicht und Laufweite unterscheiden sie.
     --wortmarke bleibt als eigene Variable stehen, falls die Kundin
     spaeter doch wieder eine eigene Titelschrift will. */
  --wortmarke: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  /* Nicht mehr in Gebrauch: alle Beschriftungen laufen in Cormorant.
     Bleibt als Rueckfallebene stehen, falls doch eine Grotesk gewuenscht wird. */
  --sans:  -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(1.5rem, 6vw, 7rem);
  --gap-section: clamp(7rem, 18vh, 15rem);
  /* Abstand zwischen den Moebelstuecken. War clamp(6.5rem,14vw,14rem) —
     bis zu 224px, dadurch stand ueber weite Strecken nur ein einzelnes
     Bild im Fenster. Auf ihren Wunsch deutlich enger. */
  --gap-piece: clamp(1.75rem, 4.5vw, 3.5rem);
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.08rem, .4vw + 1rem, 1.2rem);
  line-height:1.8;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

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

::selection{ background:var(--sand); }

.wrap{
  max-width:1560px;
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---------------------------------------------------------
   Kleine Labels / Meta
   --------------------------------------------------------- */
.label{
  font-size:.8rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:400;
  line-height:1.6;
}

/* ---------------------------------------------------------
   Kopfleiste — erscheint leise beim Scrollen
   --------------------------------------------------------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:1.05rem var(--pad);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(120%) blur(10px);
  opacity:0; transform:translateY(-100%);
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.topbar.is-visible{ opacity:1; transform:none; pointer-events:auto; }

.topbar__mark{
  font-family:var(--wortmarke);
  font-weight:300;
  font-size:.98rem;
  letter-spacing:.18em;
}

.topnav{ display:flex; gap:2.1rem; }
.topnav a{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .35s ease;
}
.topnav a:hover{ color:var(--ink); }
@media (max-width:640px){ .topnav a:not(:last-child){ display:none; } }

/* ---------------------------------------------------------
   Auftakt
   --------------------------------------------------------- */
/* Stand 22.09., nach ihrer Vorlage vom 22.09. ("1:1 als Referenz"):
   - Inhalt vertikal mittig, oben und unten gleich viel Luft.
   - Der animierte Strich unten ist entfallen, ebenso der untere Zusatz-
     abstand dafuer — der Weg zu den Moebeln ist dadurch kuerzer.
   Die Fassung vom 19.09. (Bild oben buendig, 1,618 beschnitten) hat sie
   verworfen: unten war zu viel vom Tischbein abgeschnitten. */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column;
  justify-content:center;
  padding-block:clamp(4rem, 9vh, 7rem);
}

.hero__inner{ display:grid; gap:clamp(2.5rem,5vw,4rem); }
.hero__figure{ margin:0; }

/* Zwei Spalten: Die Textspalte ist genau so breit wie die Wortmarke
   (max-content, sonst bricht "Unter den" um), das Bild folgt mit knappem
   Abstand und fuellt den Rest bis zum rechten Seitenrand — rechts bleibt
   derselbe Rand wie links. Nachgemessen an ihrem vollstaendigen Screenshot
   vom 22.09.: Abstand Schrift -> Bild ~ 0,15 x Wortmarkenbreite. (Die
   zuerst geschickte Vorlage war rechts beschnitten und wirkte deshalb
   randabfallend.) Vertikal mittig zum Text. */
@media (min-width:900px){
  .hero__inner{
    grid-template-columns:max-content minmax(0, 1fr);
    column-gap:clamp(2.5rem, 5vw, 4.5rem);
    align-items:center;
  }
}

/* Voller Bildausschnitt im Originalformat 3:2 — nichts beschnitten
   (ausdruecklicher Wunsch: "Bildausschnitt nicht veraendern"). */
.hero__figure img{ width:100%; height:auto; }

@media (max-width:899px){
  .hero__figure{ max-width:62%; }
}

.wordmark{
  /* Nach ihrer Vorgabe vom 03.09.: Cormorant Garamond Light, ca. 78-82px
     auf Desktop, Zeilenhoehe 0,95-1,0, Laufweite 0,18em, Graphitgrau
     statt Schwarz. Der Groessen-Hoechstwert liegt bei genau 5rem (80px)
     und wird ab ca. 1290px Fensterbreite erreicht. */
  font-family:var(--wortmarke);
  font-weight:300;
  font-size:clamp(2.1rem, 6.2vw, 5rem);
  line-height:.97;
  letter-spacing:.18em;
  margin:0;
  color:var(--ink-soft);
}
.wordmark span{ display:block; }
/* "Erlen" steht buendig unter "Unter" — wie in ihrer Vorlage vom 22.09.
   (bis dahin um .18em eingerueckt als optischer Ausgleich zum Sperrsatz). */
.wordmark .wordmark__sub{ padding-left:0; }

.hero__line{
  width:min(6.5rem, 18vw);
  height:1px; border:0; margin:clamp(2.2rem,4vw,3.4rem) 0;
  background:var(--stone);
}

.hero__claim{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.05rem, 1.5vw, 1.35rem);
  line-height:1.9;
  color:var(--ink-soft);
  max-width:46ch;
  margin:0;
  text-wrap:pretty;
}

/* Der animierte Strich unten im Auftakt (.hero__foot/.scrollhint) ist am
   22.09. auf ihren Wunsch komplett entfallen. */

/* ---------------------------------------------------------
   Abschnitte
   --------------------------------------------------------- */
.section{ margin-block:var(--gap-section); }
/* Weg vom Auftakt zu den Moebeln kuerzer (Wunsch aus dem Telefonat,
   22.09. erneut per Mail): vorher 162px + 96px Zusatzabstand. */
#moebel{ margin-top:clamp(3.5rem, 10vh, 7rem); }

.section__head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.4rem;
  margin-bottom:clamp(3rem,7vw,6rem);
}
@media (min-width:900px){
  .section__head{ grid-template-columns:14rem minmax(0,1fr); gap:3rem; align-items:start; }
}

.section__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.6rem, 3vw, 2.5rem);
  line-height:1.35;
  letter-spacing:.02em;
  margin:0;
  max-width:22ch;
}

.prose{ max-width:56ch; color:var(--ink-soft); }
.prose p{ margin:0 0 1.5em; }
.prose p:last-child{ margin-bottom:0; }
.prose .lead{
  font-family:var(--serif);
  font-size:clamp(1.15rem, 1.9vw, 1.55rem);
  line-height:1.75;
  color:var(--ink);
  max-width:30ch;
}

/* ---------------------------------------------------------
   Moebel — versetzte Anordnung statt Karten-Raster

   Aufbau je Stueck nach der Vorlage der Kundin:

       Bild
       ------------------------------------  feine Linie
       Bezeichnung mit Massen        Preis

   Die Spalte ist fuer alle Stuecke gleich breit, damit die Linien ueber
   die Seite hinweg dieselbe Laenge haben. Nur das Bild darin ist je nach
   Format schmaler oder breiter. Deshalb steht die Linie bei Hochformaten
   sichtbar ueber das Bild hinaus — so wie in ihrem Entwurf.

   "Verkauft" steht in dieser Zeile an der Stelle des Preises, nicht mehr
   als Schild auf dem Bild. Auch das kommt aus ihrem Entwurf.

   Stand 03.09.: zwei unabhaengig hohe Spalten statt Karten-Raster.
   Vorher war jedes Stueck ein eigener voller Block in der Dokumentablauf
   (auch wenn optisch nur die halbe Breite gefuellt war) — dadurch stand
   ueber weite Strecken nur ein einzelnes Bild im Fenster, mit riesigem
   Leerraum davor und danach. Ihr Wunsch: beim Scrollen sollen Ausschnitte
   von etwa drei Stuecken gleichzeitig sichtbar sein, kein Raster.

   Geloest mit nativem CSS-Mehrspaltensatz (column-count). Der Browser
   verteilt die Stuecke nach ihrer tatsaechlichen Hoehe auf zwei Spalten,
   nicht nach einer festen Regel — dadurch versetzen sich die Spalten von
   selbst, je nachdem wie hoch die einzelnen Bilder und Texte ausfallen.
   Das ist naeher an ihrem eigenen Entwurf als die vorherige feste
   links/rechts-Zuordnung und braucht kein JavaScript.

   Nebeneffekt: ausgeblendete Stuecke (data-visible="nein", display:none)
   werden von column-count gar nicht erst mitgezaehlt. Der alte Fehler,
   dass CSS-nth-child ausgeblendete Elemente mitzaehlt und die Staffelung
   kippen liess, kann hier nicht mehr auftreten — die ganze data-pos/
   einzug/versatz-Mechanik in main.js ist damit entfallen.
   --------------------------------------------------------- */
.pieces{ margin-top:0; }   /* bis 22.09. clamp(3rem,7vw,6rem) zusaetzlich */

/* Zwei Spalten ab 700px (bis 13.09.: 820px) — sonst stand auf dem Tablet
   hochkant ein einzelnes Hochformat bildschirmfuellend da, und im
   Telefon-Querformat ebenso. Ihr Wunsch: mehrere Stuecke im Blick. */
@media (min-width:700px){
  .pieces{
    column-count:2;
    column-gap:clamp(1.5rem, 4vw, 3.5rem);
  }
}

.piece{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;   /* aeltere Safari-Faelle */
  margin-bottom:var(--gap-piece);
}
.piece[data-visible="nein"]{ display:none; }
.piece[hidden]{ display:none; }

/* ---------------------------------------------------------
   Seit 15.10.: zwei echte Spalten (Grav, .pieces--spalten)

   Der Mehrspaltensatz oben fuellte erst links von oben nach unten, dann
   rechts — die Reihenfolge im Admin passte nicht zur Lesereihenfolge.
   Jetzt verteilt das Template die Stuecke auf zwei Spalten (jedes in die
   gerade kuerzere, siehe default.html.twig). Die Spalten bleiben versetzt.
   Unter 700px eine Spalte: die Spalten-Huellen treten zurueck
   (display:contents) und --reihe stellt die Admin-Reihenfolge her.
   Der statische Entwurf hat keine Huellen und nutzt weiter den
   Mehrspaltensatz.
   --------------------------------------------------------- */
.pieces--spalten{ display:flex; flex-direction:column; }
.pieces--spalten .pieces__spalte{ display:contents; }
.pieces--spalten .piece{ order:var(--reihe, 0); }

@media (min-width:700px){
  .pieces--spalten{
    column-count:auto;
    flex-direction:row;
    align-items:flex-start;
    gap:clamp(1.5rem, 4vw, 3.5rem);
  }
  .pieces--spalten .pieces__spalte{ display:block; flex:1 1 0; min-width:0; }
}

.piece__spalte{ width:100%; }

/* Fester Bildplatz.
   Das Bild fuellt ihn per object-fit, verschoben wird nur der Fokus ueber
   --fokus. So kann sie den Ausschnitt bestimmen, ohne dass sich das
   Layout aendert. In Grav wird daraus ein Feld. */
.piece__media{
  position:relative;
  margin:0 auto;
  overflow:hidden;
  cursor:zoom-in;
  background:var(--paper-warm);
  aspect-ratio:3 / 4;
  width:var(--bildbreite, 74%);
}
.piece[data-format="quer"] .piece__media{
  aspect-ratio:4 / 3;
  width:var(--bildbreite, 100%);
}

.piece__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--fokus, 50% 50%);
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.piece__media:hover img{ transform:scale(1.012); }

/* Linie und Zeile darunter */
.piece__zeile{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
  margin-top:1.2rem;
  padding-top:.75rem;
  border-top:1px solid var(--line);
}

.piece__bezeichnung{
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.5;
  color:var(--ink);
}

.piece__preis{
  font-family:var(--serif);
  font-weight:400;
  font-size:.86rem;
  letter-spacing:.06em;
  color:var(--muted);
  white-space:nowrap;
}
.piece[data-status="verkauft"] .piece__preis{
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* ---------------------------------------------------------
   Anfrage
   --------------------------------------------------------- */
.contact{
  border-top:1px solid var(--line);
  padding-top:clamp(3.5rem,8vw,6rem);
}

.contact__grid{
  display:grid; gap:clamp(3rem,6vw,6rem);
}
@media (min-width:900px){
  .contact__grid{ grid-template-columns:1fr 1fr; gap:clamp(4rem,9vw,10rem); }
}

.mailto{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.25rem,2.4vw,1.9rem);
  letter-spacing:.01em;
  display:inline-block;
  position:relative;
  margin-top:.5rem;
}
.mailto::after{
  content:""; position:absolute; left:0; right:0; bottom:-.15em; height:1px;
  background:var(--stone);
  transition:background-color .5s ease;
}
.mailto:hover::after{ background:var(--oak); }

.small-links{ margin-top:2.6rem; display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; }
.small-links a{
  font-size:.85rem; color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  padding-bottom:.15rem;
  transition:border-color .4s ease, color .4s ease;
}
.small-links a:hover{ color:var(--ink); border-color:var(--oak); }

/* Formular — nur Linien, keine Kaesten */
.form{ display:flex; flex-direction:column; gap:2.1rem; }
.field label{
  display:block;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.7rem;
}
.field input,
.field textarea{
  width:100%;
  appearance:none;
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  padding:.35rem 0 .7rem;
  font:inherit; color:var(--ink);
  border-radius:0;
  transition:border-color .4s ease;
}
.field textarea{ resize:vertical; min-height:6.5rem; line-height:1.8; }
.field input:focus,
.field textarea:focus{ outline:none; border-color:var(--ink); }

.submit{
  align-self:flex-start;
  appearance:none; background:none; border:0; padding:0 0 .35rem;
  font:inherit;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); cursor:pointer;
  border-bottom:1px solid var(--ink);
  transition:color .4s ease, border-color .4s ease, letter-spacing .4s ease;
}
.submit:hover{ color:var(--oak); border-color:var(--oak); letter-spacing:.26em; }

.form__note{ font-size:.78rem; color:var(--muted); line-height:1.7; margin:0; }

/* ---------------------------------------------------------
   Fuss
   --------------------------------------------------------- */
.footer{
  border-top:1px solid var(--line);
  margin-top:var(--gap-section);
  padding-block:2.6rem 3.2rem;
}
.footer__inner{
  display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem;
  align-items:baseline; justify-content:space-between;
}
.footer a{ color:var(--muted); transition:color .35s ease; }
.footer a:hover{ color:var(--ink); }
.footer nav{ display:flex; gap:2.2rem; }

/* ---------------------------------------------------------
   Lightbox
   --------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:clamp(1rem,5vw,4rem);
  background:color-mix(in srgb, var(--paper) 96%, #000 4%);
  opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility .5s;
  cursor:zoom-out;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{
  max-height:82vh; max-width:100%;
  opacity:0; transform:scale(.985);
  transition:opacity .6s ease .05s, transform .7s cubic-bezier(.22,.61,.36,1) .05s;
}
.lightbox.is-open img{ opacity:1; transform:none; }
.lightbox__caption{
  position:absolute; left:0; right:0; bottom:clamp(1rem,3vw,2.4rem);
  text-align:center;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.lightbox__close{
  position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2.4rem);
  appearance:none; background:none; border:0; cursor:pointer;
  font:inherit; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------------------------------------------------------
   Ruhiges Einblenden
   --------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------
   Unterseiten (Impressum / Datenschutz)
   --------------------------------------------------------- */
.page{ padding-top:clamp(6rem,14vh,10rem); padding-bottom:clamp(4rem,8vw,7rem); }
.page h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.8rem,3.4vw,2.8rem); letter-spacing:.06em;
  margin:0 0 clamp(2.5rem,5vw,4rem);
}
.page h2{
  font-family:var(--serif); font-weight:300;
  font-size:1.15rem; letter-spacing:.02em;
  margin:2.8rem 0 .8rem;
}
.page .prose{ max-width:62ch; }
.back{
  display:inline-block; margin-bottom:2.5rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.back:hover{ color:var(--ink); }

/* =========================================================
   Nachtrag 27.08.2026 — nach den Vorgaben der Kundin
   ========================================================= */

/* ---------------------------------------------------------
   "Ansicht oeffnen" — der dezente Link unter jedem Stueck
   --------------------------------------------------------- */
/* Seit 04.09. "Details" statt "ANSICHT OEFFNEN": normale Schreibung,
   deutlich kleiner und leiser als vorher. */
.piece__more{
  appearance:none; background:none; border:0; padding:0;
  margin-top:1rem;
  font-family:var(--serif);
  font-size:.8rem; font-weight:400;
  letter-spacing:.03em; text-transform:none;
  color:var(--muted);
  cursor:pointer;
  position:relative;
  transition:color .35s ease;
}
.piece__more::after{
  content:""; position:absolute; left:0; right:0; bottom:-.45rem;
  height:1px; background:var(--stone);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.piece__more:hover,
.piece__more:focus-visible{ color:var(--ink); }
.piece__more:hover::after,
.piece__more:focus-visible::after{ transform:scaleX(1); }

/* ---------------------------------------------------------
   Lightbox als Galerie je Moebelstueck
   --------------------------------------------------------- */
.lightbox__figur{
  margin:0;
  display:flex; flex-direction:column; align-items:center;
  gap:1.4rem;
  max-width:100%;
}
.lightbox__figur img{ max-height:74vh; }

/* Beschriftung sitzt jetzt in der figure, nicht mehr absolut am Rand. */
.lightbox__caption{
  position:static;
  text-align:center;
  max-width:46ch;
  text-transform:none;
  letter-spacing:.02em;
  font-family:var(--serif);
  font-size:1rem;
  color:var(--ink-soft);
}

.lightbox__zaehler{
  position:absolute; left:0; right:0; bottom:clamp(1rem,3vw,2.2rem);
  margin:0; text-align:center;
  font-family:var(--serif);
  font-size:.8rem; letter-spacing:.22em; color:var(--lb-schrift-leise);
}

.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--wortmarke);
  font-size:2rem; line-height:1;
  padding:1rem clamp(.6rem,2vw,1.4rem);
  color:var(--stone);
  transition:color .35s ease;
}
.lightbox__nav:hover,
.lightbox__nav:focus-visible{ color:var(--ink); }
.lightbox__nav--zurueck{ left:clamp(.2rem,1.5vw,1.2rem); }
.lightbox__nav--vor    { right:clamp(.2rem,1.5vw,1.2rem); }
.lightbox__nav[hidden] { display:none; }

/* ---------------------------------------------------------
   Fuss — "by ADesign"
   --------------------------------------------------------- */
.byline{
  font-family:var(--serif);
  font-size:.8rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.byline__mark{
  font-weight:400;
  color:var(--ink-soft);
}
/* Der Verlauf laeuft nur innerhalb der dunklen Toene — beide Enden
   bleiben ueber 4,5:1 auf dem Grundton. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .byline__mark{
    background:linear-gradient(100deg, var(--ink-soft) 0%, var(--oak) 100%);
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
  }
}
.footer a.byline:hover .byline__mark{ color:var(--ink); }
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .footer a.byline:hover .byline__mark{
    background:linear-gradient(100deg, var(--ink) 0%, var(--oak) 100%);
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
  }
}

/* ---------------------------------------------------------
   Kontaktangaben — "ganz schlicht", nach ihrer Vorlage
   --------------------------------------------------------- */
.contact__grid--einspaltig{ grid-template-columns:minmax(0,1fr) !important; }

.kontakt{
  margin:clamp(2.5rem,5vw,4rem) 0 0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.5rem 1.6rem;
  align-items:baseline;
  max-width:34rem;
}
.kontakt dt{
  font-family:var(--serif);
  font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
.kontakt dd{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.1rem,2vw,1.45rem);
}
.kontakt dd a{ color:var(--ink); }
.kontakt dd a:hover{ color:var(--oak); }

/* ---------------------------------------------------------
   Lightbox deutlicher abgesetzt

   Vorher lag der Grund bei 96 % der Seitenfarbe — das Foto schwebte auf
   praktisch derselben Flaeche und war als eigene Ebene nicht zu erkennen.
   Jetzt ein tiefer, warm-neutraler Grund: das Bild wird herausgeloest,
   ohne dass hartes Schwarz den ruhigen Eindruck kippt.

   Zurueck zur hellen Fassung: die drei --lb-Werte auf --paper,
   --ink-soft und --muted setzen.
   --------------------------------------------------------- */
:root{
  --lb-grund:         #23231F;   /* tief, aber nicht schwarz */
  --lb-schrift:       #D9D9D2;   /* 11,1:1 auf dem Grund */
  --lb-schrift-leise: #9A9A92;   /*  5,6:1 auf dem Grund */
}

.lightbox{
  background:color-mix(in srgb, var(--lb-grund) 96%, transparent);
  -webkit-backdrop-filter:blur(3px);
          backdrop-filter:blur(3px);
}

.lightbox__figur img{
  max-height:80vh;
  box-shadow:0 2.2rem 5rem rgba(0,0,0,.42);
}

.lightbox__caption{ color:var(--lb-schrift); }
.lightbox__zaehler{ color:var(--lb-schrift-leise); }

.lightbox__close{ color:var(--lb-schrift-leise); }
.lightbox__close:hover,
.lightbox__close:focus-visible{ color:var(--lb-schrift); }
/* Kein Fokusrahmen (28.09.). Der Dialog bekommt beim Oeffnen selbst den
   Fokus; wer mit der Tastatur auf "Schliessen" kommt, sieht statt eines
   Kastens eine feine Linie, wie bei "Details". */
.lightbox:focus,
.lightbox__close:focus{ outline:none; }
.lightbox__close:focus-visible{
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.5em;
}

.lightbox__nav{ color:var(--lb-schrift-leise); font-size:2.6rem; }
.lightbox__nav:hover,
.lightbox__nav:focus-visible{ color:var(--lb-schrift); }

/* Fangfrage gegen Spam — fuer Menschen unsichtbar, aber nicht
   display:none, sonst fuellen manche Maschinen sie trotzdem aus. */
.fangfrage{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%);
  white-space:nowrap;
}
.form__note--antwort{ color:var(--ink); }

/* =========================================================
   Nachtrag 27.08.2026, zweiter Durchgang
   ========================================================= */

/* ---------------------------------------------------------
   Kennzeichnung digitaler Darstellungen: nur ein °

   Seit 04.09. auf ihren Wunsch: kein Schriftzug, kein Schleier, kein
   Kreis-Icon — das normale typografische Gradzeichen (U+00B0), klein,
   ohne Flaeche und Rahmen, mit etwas Abstand zum linken und unteren
   Bildrand. Vorlage: ihr Beispielbild vom 04.09. Erklaert wird es einmal
   vor dem Fuss (.legende). pointer-events:none, damit ein Klick auf die
   Ecke weiterhin die Details oeffnet.

   Das Zeichen sitzt in der Schrift oben im Geviert; bottom ist deshalb
   knapper gesetzt, als es optisch wirkt.
   --------------------------------------------------------- */
.grad{
  position:absolute;
  left:max(.85rem, 3.2%);
  bottom:max(-.3rem, calc(1.6% - .7rem));
  margin:0;
  /* 13.09.: Das ° von Cormorant ist ein kleines, ovales "o" und war auf
     den hellen Boeden kaum zu sehen. Die Systemschrift (auf dem Mac
     San Francisco) hat einen sauberen runden Ring wie in ihrem
     Beispielbild. Weiterhin das normale Zeichen U+00B0, kein Icon.
     Der Hauch Schatten ist keine Flaeche, er haelt den Ring nur auf
     hellem Grund sichtbar. */
  font-family:var(--sans);
  font-size:2rem; font-weight:300;
  line-height:1;
  color:#fff;
  text-shadow:0 0 3px rgba(0,0,0,.3);
  pointer-events:none;
  user-select:none;
}
@media (max-width:699px){
  .grad{ font-size:1.75rem; }
}
.grad[hidden]{ display:none; }

/* Pop-up: das Bild bekommt eine Huelle, damit das ° am Bild haengt. */
.lightbox__bild{
  position:relative;
  display:block;
  line-height:0;
  max-width:100%;
}

/* Verkaufte Stuecke: nur das Titelbild, keine Detailansicht. */
.piece[data-status="verkauft"] .piece__media{ cursor:default; }
.piece[data-status="verkauft"] .piece__media:hover img{ transform:none; }

/* Erklaerung zum ° vor dem Fuss — klein, normale Schrift, ohne Hervorhebung. */
.legende{
  margin-block:var(--gap-section) 0;
  padding-bottom:clamp(1.4rem, 3vw, 2.2rem);
  font-family:var(--serif);
  font-size:.82rem;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--muted);
}
.legende + .footer{ margin-top:0; }
/* Dasselbe runde ° wie im Bild, damit man es wiedererkennt. */
.legende__grad{
  font-family:var(--sans);
  font-weight:300;
  font-size:1.3em;
  line-height:0;
  position:relative;
  top:.22em;
}

/* ---------------------------------------------------------
   Lightbox: Zaehler stand unter der Beschriftung und ist ihr bei
   zweizeiligem Hinweis in die Zeile gelaufen. Jetzt liegt alles im
   Fluss untereinander statt absolut am Rand.
   --------------------------------------------------------- */
.lightbox{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
}
.lightbox__zaehler{
  position:static;
  bottom:auto; left:auto; right:auto;
}
.lightbox__figur{ gap:1.1rem; }

/* ---------------------------------------------------------
   Anfrage: Texte links, Formular rechts und schmaler
   --------------------------------------------------------- */
.contact__grid--einspaltig{ grid-template-columns:minmax(0,1fr); }

@media (min-width:900px){
  .contact__grid{
    grid-template-columns:1fr .8fr;
    gap:clamp(3rem,7vw,7rem);
    align-items:start;
  }
}
.contact__formular{ max-width:30rem; }

/* Deutlicher sichtbar, ohne einen Kasten daraus zu machen:
   kraeftigere Linien, dunklere Beschriftungen. */
.contact__formular .field label{ color:var(--ink-soft); }

.contact__formular .field input,
.contact__formular .field textarea{
  border-bottom-color:var(--stone);
  padding-bottom:.55rem;
}
.contact__formular .field input:hover,
.contact__formular .field textarea:hover{ border-bottom-color:var(--muted); }
.contact__formular .field input:focus,
.contact__formular .field textarea:focus{
  border-bottom-color:var(--oak);
  border-bottom-width:1px;
}
.contact__formular .field textarea{ min-height:5.5rem; }
.contact__formular .form{ gap:1.7rem; }

.contact__formular .submit{
  border-bottom-width:1px;
  padding-bottom:.4rem;
}

/* ---------------------------------------------------------
   Fuss unter dem Stueck: nur noch "Details". Der Kleinanzeigen-Verweis
   steht seit 04.09. ausschliesslich im Pop-up.
   --------------------------------------------------------- */
.piece__fuss{
  display:flex;
  align-items:center;
  gap:1.1rem;
  margin-top:.6rem;
}
.piece__fuss .piece__more{ margin-top:0; }

/* =========================================================
   Mobil und Safari

   Die Kundin arbeitet am Mac, ihre Fotos kommen vom iPhone —
   Safari ist also der Browser, in dem die Seite zuerst gesehen wird.
   ========================================================= */

/* ---------------------------------------------------------
   Rueckfall fuer color-mix

   Safari kennt color-mix erst ab 16.2. Faellt der Wert aus, wird die
   ganze Eigenschaft verworfen — die Lightbox haette dann gar keinen
   Hintergrund und das Foto laege frei ueber der Seite. Deshalb vorher
   ein einfacher Wert; neuere Browser ueberschreiben ihn.
   --------------------------------------------------------- */
.topbar{
  background:rgba(233,230,223,.88);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
}
.lightbox{
  background:rgba(35,35,31,.96);
  background:color-mix(in srgb, var(--lb-grund) 96%, transparent);
}

/* ---------------------------------------------------------
   Antippen
   --------------------------------------------------------- */
html{
  /* Kein graues Aufblitzen beim Antippen. */
  -webkit-tap-highlight-color:transparent;
}

/* Safari braucht die eigene Schreibweise, sonst bleiben die
   Systemrahmen an Feldern und Knoepfen stehen. */
.field input,
.field textarea,
.submit,
.piece__more,
.lightbox__close,
.lightbox__nav,
.filter button{ -webkit-appearance:none; }

/* "Ansicht oeffnen" war 16 px hoch — mit dem Finger nicht zu treffen. */
.piece__more{
  padding:.55rem 0;
  margin-top:.45rem;
}
.piece__more::after{ bottom:.3rem; }

@media (max-width:819px){
  .topbar__mark{ padding-block:.4rem; }
  .topnav a,
  .footer a,
  .small-links a{ display:inline-block; padding-block:.45rem; }
  .lightbox__nav{ padding:1.4rem .9rem; }
}

/* ---------------------------------------------------------
   Schwebezustaende

   Auf dem Telefon gibt es kein Schweben. Safari behaelt den Zustand
   nach dem Antippen bei, das Bild bliebe also vergroessert stehen.
   --------------------------------------------------------- */
@media (hover:none){
  .piece__media:hover img{ transform:none; }
  .piece__more:hover::after,
  .piece__more:focus-visible::after{ transform:scaleX(0); }
  .submit:hover{ letter-spacing:.22em; }
}

/* ---------------------------------------------------------
   Raender bei Geraeten mit Aussparung
   --------------------------------------------------------- */
.topbar{
  padding-top:calc(1.05rem + env(safe-area-inset-top, 0px));
  padding-left:calc(var(--pad) + env(safe-area-inset-left, 0px));
  padding-right:calc(var(--pad) + env(safe-area-inset-right, 0px));
}
.footer{ padding-bottom:calc(3.2rem + env(safe-area-inset-bottom, 0px)); }

.lightbox{
  padding-top:calc(clamp(1rem,5vw,4rem) + env(safe-area-inset-top, 0px));
  padding-bottom:calc(clamp(1rem,5vw,4rem) + env(safe-area-inset-bottom, 0px));
  /* Nicht die Seite darunter mitscrollen. */
  overscroll-behavior:contain;
}
.lightbox__close{ top:calc(clamp(1rem,3vw,2rem) + env(safe-area-inset-top, 0px)); }

/* ---------------------------------------------------------
   Wenn der Koerper waehrend der Lightbox festgehalten wird
   (siehe main.js — reines overflow:hidden reicht auf iOS nicht)
   --------------------------------------------------------- */
body.ist-festgehalten{
  position:fixed;
  width:100%;
  overflow:hidden;
}

/* ---------------------------------------------------------
   Antippflaechen der wichtigen Ziele

   E-Mail und Telefon sind auf dem Telefon die eigentlichen Knoepfe —
   sie waren 21 px hoch. Absenden und Schliessen ebenso knapp.
   Die Empfehlung liegt bei 44 px; das Aussehen aendert sich nicht,
   nur die Flaeche darum.
   --------------------------------------------------------- */
.kontakt dd a{
  display:inline-block;
  padding-block:.6rem;
  margin-block:-.6rem;
}

.submit{ padding:.5rem 0 .55rem; }

.lightbox__close{ padding:.7rem 0 .7rem .9rem; }

@media (max-width:819px){
  .piece__more{ padding:.75rem 0; margin-top:.25rem; }
  .piece__more::after{ bottom:.5rem; }
}

/* ---------------------------------------------------------
   Niedrige Fenster — Telefon im Querformat

   Bei 375 px Hoehe passten Bild, Beschriftung und Zaehler zusammen
   nicht mehr hinein: die Beschriftung stand unter dem Bildschirmrand.
   Die Bildhoehe richtet sich deshalb nicht mehr nur nach 80vh, sondern
   laesst der Beschriftung immer ihren Platz.
   --------------------------------------------------------- */
.lightbox__figur img{
  max-height:74vh;                                  /* Rueckfall */
  /* 04.09.: Titel, Beschreibung, Kleinanzeigen-Zeile und Zaehler brauchen
     zusammen gut 16rem — sonst lief der Zaehler unten aus dem Bild. */
  max-height:min(76vh, calc(100svh - 17rem));
}

@media (max-height:540px){
  .lightbox{ gap:.7rem; }
  .lightbox__figur{ gap:.55rem; }
  .lightbox__caption{ font-size:.88rem; max-width:40ch; }
  .lightbox__zaehler{ font-size:.72rem; }
  .lightbox__close{ padding:.5rem 0 .5rem .9rem; }
}

/* Der Auftakt fuellte im Querformat mehr als zwei Bildschirme.
   Die grosszuegigen Abstaende sind fuer hohe Fenster gedacht. */
@media (max-height:540px) and (orientation:landscape){
  .hero{
    min-height:auto;
    padding-block:clamp(3.5rem,14vh,6rem) 2rem;
  }
}

/* ---------------------------------------------------------
   Beschreibung in der Bildansicht

   Ihr Entwurf zeigt im Raster nur Bezeichnung und Preis. Der Text zum
   Stueck steht deshalb in der Bildansicht — dort, wo jemand hinsieht,
   der sich fuer das Moebel interessiert, ohne dass das Raster unruhig
   wird. Nur beim ersten Bild, sonst wiederholt er sich beim Blaettern.

   Soll er doch auf die Seite: das Element in main.js an .piece__spalte
   haengen statt an die Lightbox. Erst entscheiden, wenn echte Texte da
   sind — mit Platzhaltern laesst sich das nicht beurteilen.
   --------------------------------------------------------- */
.lightbox__text{
  margin:0;
  max-width:52ch;
  text-align:center;
  font-family:var(--serif);
  font-size:.95rem;
  line-height:1.75;
  color:var(--lb-schrift-leise);
}

/* ---------------------------------------------------------
   Kleinanzeigen-Verweis im Pop-up

   Seit 04.09.: direkter Link zur Einzelanzeige, als schlichte kleine
   Textzeile "Auf Kleinanzeigen ansehen →" — kein Knopf, kein Kasten,
   kein Logo. Bei verkauften Stuecken gibt es kein Pop-up mehr.
   --------------------------------------------------------- */
.lightbox__anzeige{
  display:inline-block;
  margin-top:.1rem;
  padding:.5rem .2rem;
  font-family:var(--serif);
  font-size:.82rem; letter-spacing:.03em;
  color:var(--lb-schrift-leise);
  transition:color .35s ease;
}
.lightbox__anzeige:hover,
.lightbox__anzeige:focus-visible{ color:var(--lb-schrift); }
.lightbox__anzeige[hidden]{ display:none; }
.lightbox__text[hidden]{ display:none; }

@media (max-height:540px){
  .lightbox__text{ display:none; }   /* quer ist dafuer kein Platz */
}

/* ---------------------------------------------------------
   Datenschutz-Einwilligung am Kontaktformular (03.09.)

   Pflichthaken mit Link zur Datenschutzerklaerung. Eigener Haken statt
   des Systemkaestchens, damit er zum reduzierten Stil passt. Das Label
   ist hier Fliesstext, nicht die gesperrte Versal-Feldbeschriftung.
   --------------------------------------------------------- */
.field--consent{ position:relative; }

/* Der echte Haken bleibt bedienbar und fokussierbar, ist aber unsichtbar.
   Der sichtbare Kasten wird als Pseudoelement des Labels gezeichnet —
   das ist robuster, weil manche Browser den Hintergrund eines nativen
   Kaestchens auch mit appearance:none nicht darstellen. */
.field--consent input[type="checkbox"]{
  position:absolute;
  top:.15rem; left:0;
  width:1.15rem; height:1.15rem;
  margin:0; opacity:0;
  cursor:pointer;
}
.field--consent label{
  position:relative;
  display:block;
  margin:0;
  padding-left:1.95rem;   /* Platz fuer den gezeichneten Kasten */
  font-family:var(--serif);
  font-size:.86rem;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  line-height:1.6;
  color:var(--ink-soft);
  cursor:pointer;
}
/* Kasten */
.field--consent label::before{
  content:"";
  position:absolute;
  left:0; top:.15rem;
  width:1.15rem; height:1.15rem;
  border:1px solid var(--stone);
  background:transparent;
  transition:border-color .3s ease, background-color .3s ease;
}
/* Haken */
.field--consent label::after{
  content:"";
  position:absolute;
  left:.42rem; top:.28rem;
  width:.28rem; height:.58rem;
  border:solid var(--paper);
  border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg) scale(0);
  transform-origin:center;
  transition:transform .18s ease;
}
.field--consent input[type="checkbox"]:hover + label::before{ border-color:var(--muted); }
.field--consent input[type="checkbox"]:focus-visible + label::before{
  outline:2px solid var(--oak); outline-offset:2px;
}
.field--consent input[type="checkbox"]:checked + label::before{
  border-color:var(--ink);
  background:var(--ink);
}
.field--consent input[type="checkbox"]:checked + label::after{
  transform:rotate(45deg) scale(1);
}
.field--consent label a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px;
}
.field--consent label a:hover{ color:var(--oak); }

/* =========================================================
   Mobil-Durchgang 13.09.2026
   ========================================================= */

/* ---------------------------------------------------------
   Pop-up auf dem Telefon hochkant

   Die Pfeile sassen auf halber Hoehe und lagen dadurch auf dem Bildrand,
   bei Querformaten sogar in der Beschriftung. Jetzt unten neben dem
   Zaehler, die Daumenzone. Oben bleibt Platz fuer "Schliessen".
   --------------------------------------------------------- */
@media (max-width:819px) and (min-height:541px){
  .lightbox{
    gap:0;
    padding-top:calc(3.9rem + env(safe-area-inset-top, 0px));
    padding-bottom:calc(4.6rem + env(safe-area-inset-bottom, 0px));
    padding-inline:1rem;
  }
  .lightbox__figur img{
    max-height:62vh;                                /* Rueckfall */
    max-height:calc(100svh - 21rem);
  }
  .lightbox__zaehler{
    position:absolute;
    left:0; right:0;
    bottom:calc(1.55rem + env(safe-area-inset-bottom, 0px));
  }
  .lightbox__nav{
    top:auto;
    bottom:calc(.35rem + env(safe-area-inset-bottom, 0px));
    transform:none;
    padding:.9rem 1.3rem;
  }
  .lightbox__nav--zurueck{ left:calc(50% - 6.4rem); }
  .lightbox__nav--vor    { right:calc(50% - 6.4rem); }
}

/* Der Zaehler ist eine Zeile ueber die volle Breite und lag hochkant
   ueber der Mitte der Pfeile. Ein Tipp auf den Pfeil traf den Zaehler,
   zaehlte als Tipp auf den Hintergrund und schloss das Pop-up (02.10.).
   Der Zaehler nimmt deshalb keine Tipps an, die Pfeile liegen obenauf. */
.lightbox__zaehler{ pointer-events:none; }
.lightbox__nav{ z-index:1; }

/* ---------------------------------------------------------
   Pop-up im Telefon-Querformat

   Untereinander blieb fuer das Bild kaum Hoehe (zuletzt ~100px). Jetzt
   Bild links, Titel, Beschreibung und Kleinanzeigen-Zeile rechts daneben.
   Die Beschreibung ist damit auch quer wieder sichtbar.
   --------------------------------------------------------- */
@media (max-height:540px) and (orientation:landscape){
  .lightbox{
    padding:calc(1rem + env(safe-area-inset-top, 0px))
            calc(3.4rem + env(safe-area-inset-right, 0px))
            calc(2.6rem + env(safe-area-inset-bottom, 0px))
            calc(3.4rem + env(safe-area-inset-left, 0px));
  }
  .lightbox__figur{
    display:grid;
    grid-template-columns:auto minmax(9rem, 15rem);
    grid-template-rows:1fr auto auto auto 1fr;
    column-gap:1.6rem;
    row-gap:.35rem;
    align-items:start;
  }
  .lightbox__bild{ grid-column:1; grid-row:1 / -1; align-self:center; }
  .lightbox__figur img{
    max-height:calc(100svh - 4.6rem);
    max-width:min(100%, calc(100vw - 24rem));
  }
  .lightbox__caption{ grid-column:2; grid-row:2; text-align:left; }
  .lightbox .lightbox__text{
    display:block;
    grid-column:2; grid-row:3;
    text-align:left;
    font-size:.82rem; line-height:1.55;
  }
  .lightbox .lightbox__text[hidden]{ display:none; }
  .lightbox__anzeige{ grid-column:2; grid-row:4; justify-self:start; padding-left:0; }
  .lightbox__zaehler{
    position:absolute;
    left:0; right:0;
    bottom:calc(.7rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------------------------------------------------
   Antippflaechen auf 44px, ohne dass sich das Aussehen aendert
   --------------------------------------------------------- */
@media (max-width:819px){
  .piece__more{ min-height:44px; padding-right:.9rem; }
  .topnav a,
  .footer a{ padding-block:.6rem; }
  .submit{ padding-block:.75rem; }
  .lightbox__anzeige{ padding-block:.7rem; }
}

/* Listen in Impressum / Datenschutz — ruhig, ohne Aufzaehlungspunkte-Wucht */
.page .prose ul{
  margin:0 0 1.5em;
  padding-left:1.1em;
  list-style:none;
}
.page .prose li{ position:relative; margin:.15em 0; }
.page .prose li::before{
  content:"–";
  position:absolute; left:-1.1em;
  color:var(--stone);
}
/* Kein Fett: fuer Cormorant liegen nur 300 und 400 auf dem Server, jede
   hoehere Stufe wuerde der Browser kuenstlich verdicken. Hervorhebung
   deshalb ueber die dunklere Schriftfarbe. */
.page .prose strong{ font-weight:400; color:var(--ink); }

/* Rueckmeldung des Formulars nach dem Absenden (Grav) */
.form__note--antwort{ margin-bottom:1.6rem; }
.form__note--fehler{ color:var(--oak); }

/* ---------------------------------------------------------
   Gliederung fuer Vorlesegeraete (13.09.)
   "Moebel" als unsichtbare Ueberschrift, "Anfrage" als echte h2 im
   bisherigen Aussehen des kleinen Labels.
   --------------------------------------------------------- */
.unsichtbar{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%);
  white-space:nowrap;
}
.section__label{ margin:0; }

/* Lightbox: sofort sichtbar schalten, damit der Fokus beim Oeffnen greift */
.lightbox.is-open{ transition:opacity .5s ease, visibility 0s; }