/* ============================================================
   PRAIA DA URSA — GESTALTUNG
   Vintage-Buchseite: warmer Creme durchgehend, Tiefe aus
   Typografie, Haarlinien und Ornament — nicht aus Farbflaechen.
   Blau erscheint ausschliesslich als Zierrat und Auszeichnung.

   Farben aendern? Nur der Block ":root" weiter unten.
   ============================================================ */

/* ---------- Schriften (lokal, kein Google-Aufruf) --------- */
@font-face { font-family:"Jost"; src:url("schriften/Jost-300.woff2") format("woff2");
             font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Jost"; src:url("schriften/Jost-400.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Jost"; src:url("schriften/Jost-500.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant Garamond"; src:url("schriften/CormorantGaramond-Light.woff2") format("woff2");
             font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant Garamond"; src:url("schriften/CormorantGaramond-Regular.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }

/* ---------- FARBEN UND MASSE ------------------------------ */
:root {
  --grund:      #F6F0E4;   /* Warmer Creme, durchgehend           */
  --flaeche:    #EFE7D7;   /* Nur fuer Bildrahmen und Eingaben    */
  --linie:      #D8CCB8;   /* Taupe-Haarlinien                    */
  --linie-fein: #E4DAC8;   /* Noch feiner, fuer Trenner           */

  --text:       #33291F;   /* Dunkelbraun, Fliesstext             */
  --text-leise: #6A6058;   /* Taupe-Grau, Zweittext               */
  --blau:       #122A42;   /* Dunkles Blau — Zierrat und Links    */
  --balken:     #AA9A86;   /* Taupe fuer Kopf- und Fusszeile. Der
                              dunkelste Ton, auf dem --blau noch
                              4.5:1 erreicht (5.35:1).            */
  --taupe:      #9C8B75;   /* Hellbraun — NUR Linien, Formen und
                              SVG-Striche. Erreicht als Textfarbe
                              nur 2.9:1 und ist dafuer verboten.   */

  --sans:  "Jost", "Futura", "Century Gothic", Avenir, sans-serif;
  --serif: "Cormorant Garamond", Cormorant, Didot, "Bodoni 72", Georgia, serif;

  --rand: clamp(1.25rem, 5vw, 5rem);
  --luft: clamp(3.5rem, 9vw, 7.5rem);
  --kopf: 4.75rem;
}

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

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body {
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:var(--sans);
  font-size:.9375rem;          /* zurueckgenommen — war zu gross */
  font-weight:400;
  line-height:1.78;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
}

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

a { color:var(--blau); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:.28em; }

:focus-visible { outline:1.5px solid var(--blau); outline-offset:3px; }

.nur-vorleser {
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

.sprung {
  position:absolute; left:var(--rand); top:-100px; z-index:200;
  background:var(--blau); color:var(--grund);
  padding:.75rem 1.25rem; font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}
.sprung:focus { top:1rem; }

/* ---------- TYPOGRAFIE ------------------------------------
   Serifenlos und leicht fuer alles Strukturelle.
   Cormorant NUR fuer Eigennamen — Akzent, nicht Grundton.   */

.marke {
  font-size:.625rem; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--blau);
  margin:0 0 1.5rem;
}

.titel {
  font-family:var(--sans); font-weight:300;
  font-size:clamp(1.5rem, 3.1vw, 2.375rem);
  line-height:1.22; letter-spacing:.15em; text-transform:uppercase;
  margin:0 0 1.5rem; color:var(--text);
}

.untertitel {
  font-family:var(--sans); font-weight:300;
  font-size:clamp(1.1875rem, 2.1vw, 1.5rem);
  line-height:1.3; letter-spacing:.13em; text-transform:uppercase;
  margin:0 0 1.1rem;
}

/* Eigennamen — hier darf die Serife auftreten */
.name {
  font-family:var(--serif); font-weight:400;
  letter-spacing:.02em; text-transform:none;
}

/* Marke links, Text rechts: nutzt die volle Breite, haelt aber
   die Zeilenlaenge im lesbaren Bereich.                        */
.mit-marke { display:grid; gap:.25rem clamp(2rem, 5vw, 5rem); grid-template-columns:1fr; }
@media (min-width: 900px) {
  .mit-marke { grid-template-columns:14rem 1fr; }
  .mit-marke .marke { margin-top:.4rem; }
}
/* Der Text laeuft zweispaltig statt in einer ueberlangen Zeile.
   break-inside haelt jeden Absatz zusammen.                    */
@media (min-width: 900px) {
  .mit-marke .fliess {
    max-width:none; column-count:2; column-gap:clamp(2rem, 4vw, 4rem);
  }
  .mit-marke .fliess p { break-inside:avoid; }
}

.fliess { max-width:35em; font-size:1rem; }
.fliess p { margin:0 0 1.2em; }
.fliess p:last-child { margin-bottom:0; }
.leise { color:var(--text-leise); }

.haarlinie { border:0; border-top:1px solid var(--linie-fein); margin:0; }

/* ---------- ORNAMENT -------------------------------------- */
.zierrat { color:var(--blau); }
.zierrat--taupe { color:var(--taupe); }

/* Trennung zwischen Abschnitten: Schnoerkel statt Farbblock */
.teiler {
  display:flex; align-items:center; justify-content:center; gap:1.5rem;
  padding:0 var(--rand); margin:0;
}
.teiler::before, .teiler::after {
  content:""; height:1px; flex:1 1 auto; max-width:16rem;
  background:linear-gradient(to right, transparent, var(--linie), transparent);
}
.teiler svg { width:6rem; height:auto; color:var(--blau); flex:0 0 auto; }

/* ---------- KOPFZEILE ------------------------------------- */
.kopf {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; height:var(--kopf); padding:0 var(--rand);
  background:var(--balken);
  border-bottom:1px solid #8E8071;
}

/* Beide Balken teilen sich diese Anpassungen. Auf dem Sandbraun sind
   --text-leise und --taupe zu hell, deshalb werden sie hier ersetzt. */
.kopf, .fuss {
  /* Auf dem dunkleren Balken besteht nur die volle Textfarbe den
     Kontrasttest (5.19:1), deshalb faellt --text-leise mit ihr
     zusammen. Linien und Formen duerfen weiter zurueckhaltend sein. */
  --text-leise:var(--text);
  --linie:     #8E8071;
  --linie-fein:#9A8C7B;
  --taupe:     #6E6254;
}
@media (min-width: 901px) {
  /* Weichzeichner nur am Desktop — unterhalb 900px liegt das
     Klappmenue als position:fixed IN der Kopfzeile, und ein
     backdrop-filter wuerde es auf Kopfzeilenhoehe zusammenfalten. */
  .kopf {
    background:rgba(170, 154, 134, .96);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
}

/* Kleines Logo: Oval mit Haarlinie plus Wortmarke */
.wortmarke {
  display:flex; align-items:center; gap:.85rem;
  color:var(--text); white-space:nowrap;
}
.wortmarke:hover { text-decoration:none; color:var(--blau); }

/* Kleine Fassung des Medaillons fuer die Kopfzeile */
.marke-oval {
  position:relative; flex:0 0 auto;
  width:1.75rem; height:2.125rem;
  border:1px solid var(--taupe); border-radius:50%;
  padding:2px;
}
.marke-oval::after {
  content:""; position:absolute; inset:0;
  border:1px solid var(--blau); border-radius:50%; opacity:.5;
}
.marke-oval .bild-rahmen { width:100%; height:100%; border-radius:50%; overflow:hidden; }

.marke-schrift {
  display:flex; flex-direction:column; line-height:1;
}
.marke-schrift b {
  font-family:var(--serif); font-size:1.0625rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
}
.marke-schrift span {
  font-size:.5rem; font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-leise); margin-top:.28rem;
}
@media (max-width: 480px) { .marke-schrift span { display:none; } }

.navi { display:flex; align-items:center; gap:clamp(1rem, 2.2vw, 2.25rem); }
.navi a {
  font-size:.6875rem; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text);
  padding:.5rem 0; border-bottom:1px solid transparent;
}
.navi a:hover { text-decoration:none; color:var(--blau); }
.navi a[aria-current="page"] {
  color:var(--blau); font-weight:500; border-bottom-color:var(--blau);
}

.sprachen { display:flex; align-items:center; gap:.4rem; margin-left:.5rem; }
.sprachen button {
  font-family:var(--sans); font-size:.6875rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  background:none; border:0; padding:.35rem .2rem;
  color:var(--text-leise); cursor:pointer;
}
.sprachen button[aria-pressed="true"] { color:var(--blau); }
.sprachen span { color:var(--linie); font-size:.6875rem; }

.menuetaste {
  display:none; background:none; border:0; padding:.5rem; cursor:pointer;
  font-family:var(--sans); font-size:.6875rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--text);
}

@media (max-width: 900px) {
  .menuetaste { display:block; }
  .navi {
    position:fixed; inset:var(--kopf) 0 0 0;
    flex-direction:column; justify-content:center; gap:1.75rem;
    background:var(--balken); border-top:1px solid #8E8071;
    transform:translateY(-100%); transition:transform .35s ease; overflow-y:auto;
  }
  /* Geschlossen wird das Menue nach oben geschoben — seine Unterkante
     liegt dann exakt auf der Kopfzeile und wuerde sie auf niedrigen
     Fenstern ueberdecken. visibility blendet es wirklich aus und nimmt
     es zugleich aus der Tabreihenfolge.                              */
  .navi { visibility:hidden; transition:transform .35s ease, visibility 0s .35s; }
  .navi[data-offen="true"] {
    transform:translateY(0); visibility:visible;
    transition:transform .35s ease, visibility 0s;
  }
  .navi a { font-size:.8125rem; letter-spacing:.22em; }
  .sprachen { margin:1rem 0 0; }
}

/* ---------- INHALTSBEREICH -------------------------------- */
.abschnitt { padding:var(--luft) var(--rand); }
.eng   { max-width:60rem; margin:0 auto; }

/* Trenner zwischen Abschnitten: Schnoerkel statt Farbblock.
   Sitzt mittig in der Luft zwischen zwei Abschnitten.       */
.abschnitt + .abschnitt { position:relative; }
.abschnitt + .abschnitt::before {
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:calc(var(--luft) / 2 - .7rem);
  width:min(18rem, 55%); height:1.4rem;
  background:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20140%2022'%20fill='none'%20stroke='%23122A42'%20stroke-width='1.2'%20stroke-linecap='round'><path%20d='M62%2011%20C50%2011%2044%203%2032%205%20C21%206.5%2019%2015%2029%2016%20C36%2016.7%2039%2011%2034%208.5'/><path%20d='M50%2011%20C44%2016.5%2036%2017.5%2029%2014'%20stroke-width='.9'/><path%20d='M78%2011%20C90%2011%2096%203%20108%205%20C119%206.5%20121%2015%20111%2016%20C104%2016.7%20101%2011%20106%208.5'/><path%20d='M90%2011%20C96%2016.5%20104%2017.5%20111%2014'%20stroke-width='.9'/><path%20d='M70%206%20L74%2011%20L70%2016%20L66%2011%20Z'%20fill='%23122A42'%20stroke='none'/></svg>") center/contain no-repeat;
  opacity:.85;
}

.breit { max-width:82rem; margin:0 auto; }

.seitenkopf {
  padding:clamp(3rem, 8vw, 6rem) var(--rand) clamp(2rem, 4vw, 3rem);
  text-align:center;
}
.seitenkopf .fliess { margin:0 auto; }
.seitenkopf .zierrat { display:block; margin:0 auto 1.75rem; width:5.5rem; color:var(--taupe); }

.paar { display:grid; gap:clamp(2rem, 5vw, 4.5rem); grid-template-columns:1fr; align-items:center; }
@media (min-width: 900px) {
  .paar { grid-template-columns:1fr 1fr; }
  .paar--umgekehrt > :first-child { order:2; }
}

/* ---------- EMPFANG UND MEDAILLON ------------------------- */
.empfang {
  min-height:calc(100svh - var(--kopf));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(2.5rem, 7vw, 5rem) var(--rand);
}

/* Das ornamentierte Medaillon. Der geschwungene Rahmen ist SVG,
   das Foto darin eine gewoehnliche Bilddatei.                  */
/* Untergrenze bewusst niedrig: bei 17rem sprengte das Medaillon
   Fenster unter 320px und erzeugte waagerechtes Scrollen.       */
.medaillon { position:relative; width:min(100%, clamp(15rem, 42vw, 25rem)); margin:0 auto; }
.medaillon-svg { display:block; width:100%; height:auto; }
.medaillon-bild {
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:55.6%; aspect-ratio:100 / 116;
  border-radius:50%; overflow:hidden; background:var(--flaeche);
}
.medaillon-bild img { width:100%; height:100%; object-fit:cover; }

.empfang-name {
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem, 6.4vw, 3.5rem);
  letter-spacing:.16em; text-transform:uppercase; line-height:1.1;
  margin:clamp(1.5rem, 3vw, 2.25rem) 0 .9rem;
}

.est {
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  font-size:.5625rem; font-weight:400; letter-spacing:.3em;
  text-transform:uppercase; color:var(--text-leise); margin:0 0 1.1rem;
}
.est::before, .est::after {
  content:""; height:1px; width:clamp(1.25rem, 6vw, 3.5rem); background:var(--taupe); opacity:.7;
}

.empfang-unter {
  font-size:.6875rem; font-weight:400; letter-spacing:.26em;
  text-transform:uppercase; color:var(--text-leise);
  margin:0 0 clamp(1.5rem, 3.5vw, 2.25rem);
}

.empfang-satz {
  font-size:clamp(.9375rem, 1.5vw, 1.0625rem); font-weight:400;
  line-height:1.7; max-width:32em; margin:0 auto; color:var(--text-leise);
}

.weiter {
  margin-top:clamp(2rem, 5vw, 3.5rem);
  font-size:.625rem; font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-leise);
}
.weiter:hover { color:var(--blau); text-decoration:none; }

/* ---------- BILDER ---------------------------------------- */
.bild-rahmen { position:relative; background:var(--flaeche); overflow:hidden; }
.bild-rahmen img { width:100%; height:100%; object-fit:cover; }

.hoch  { aspect-ratio:4 / 5; }
.quadr { aspect-ratio:1; }
.quer  { aspect-ratio:3 / 2; }
.bogen { border-radius:50% 50% 0 0 / 22% 22% 0 0; }

/* Bilder bekommen einen feinen Rahmen statt einer Farbflaeche */
.gerahmt { outline:1px solid var(--linie); outline-offset:.5rem; }

/* ---------- GALERIESTREIFEN ------------------------------- */
/* Steht oben auf der Wurfseite, vor dem Text. */
.streifen {
  display:grid; gap:clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  margin-bottom:var(--luft);
}
.streifen button { padding:0; border:0; background:none; cursor:zoom-in; display:block; width:100%; }

/* ---------- DIASHOW --------------------------------------- */
/* Entsteht automatisch, wenn fuer einen Bildplatz mehrere Fotos
   vorliegen (1.jpg, 1.1.jpg, 1.2.jpg ...).                    */
.diashow { position:relative; overflow:hidden; background:var(--flaeche); }
.diashow .dia {
  position:absolute; inset:0; opacity:0;
  transition:opacity .7s ease; pointer-events:none;
}
.diashow .dia[data-aktiv="true"] { opacity:1; pointer-events:auto; }
.diashow .dia img { width:100%; height:100%; object-fit:cover; }

.dia-taste {
  position:absolute; top:50%; transform:translateY(-50%);
  width:2.25rem; height:2.25rem; border-radius:50%;
  border:1px solid rgba(246, 240, 228, .55);
  background:rgba(51, 41, 31, .38); color:var(--grund);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; line-height:1; padding:0;
  opacity:0; transition:opacity .25s ease, background-color .25s ease;
}
.diashow:hover .dia-taste,
.diashow:focus-within .dia-taste { opacity:1; }
.dia-taste:hover { background:rgba(51, 41, 31, .62); }
.dia-taste--zurueck { left:.75rem; }
.dia-taste--vor     { right:.75rem; }

.dia-punkte {
  position:absolute; left:0; right:0; bottom:.85rem;
  display:flex; justify-content:center; gap:.45rem;
}
.dia-punkte button {
  width:.45rem; height:.45rem; padding:0; border-radius:50%;
  border:1px solid rgba(246, 240, 228, .8);
  background:none; cursor:pointer;
}
.dia-punkte button[aria-current="true"] { background:var(--grund); }

@media (prefers-reduced-motion: reduce) {
  .diashow .dia { transition:none; }
  .dia-taste { opacity:1; }
}

.bild-fehlt {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; padding:1.25rem; text-align:center; width:100%; height:100%;
  background-color:var(--flaeche); color:var(--text-leise);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%239C8B75' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M30 46 L26 19 L45 29'/%3E%3Cpath d='M70 46 L74 19 L55 29'/%3E%3Cellipse cx='50' cy='52' rx='22' ry='20'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center 34%;
  background-size:clamp(3rem, 24%, 6rem);
}
.bild-fehlt b {
  font-size:.5625rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; margin-top:42%; color:var(--text-leise);
}
.bild-fehlt code {
  font-size:.625rem; font-family:ui-monospace, Menlo, monospace;
  color:var(--text-leise); word-break:break-all;
}
.medaillon .bild-fehlt code { display:none; }
.medaillon .bild-fehlt b { margin-top:34%; }
.marke-oval .bild-fehlt b, .marke-oval .bild-fehlt code { display:none; }
.marke-oval .bild-fehlt { background-size:70%; background-position:center; }

.bildunterschrift { font-size:.75rem; color:var(--text-leise); margin-top:.9rem; letter-spacing:.04em; }

/* ---------- KARTENRASTER ---------------------------------- */
.raster { display:grid; gap:clamp(2rem, 4vw, 3.5rem);
          grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); }
.raster--zwei { grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr)); }
.raster--einzeln { grid-template-columns:1fr; max-width:66rem; margin:0 auto; }

.karte { display:flex; flex-direction:column; }
.karte .bild-rahmen { margin-bottom:1.5rem; }
.karte-name {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.375rem, 2.3vw, 1.75rem); line-height:1.15;
  margin:0 0 .4rem; letter-spacing:.02em;
}
.karte-zeile {
  font-size:.625rem; font-weight:400; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-leise); margin:0 0 1rem;
}
.karte-text { color:var(--text-leise); margin:0; max-width:34em; }

.steckbrief { margin:1.75rem 0 0; padding:0; list-style:none; }
.steckbrief div {
  display:grid; grid-template-columns:9.5rem 1fr; gap:1rem;
  padding:.8rem 0; border-top:1px solid var(--linie-fein);
}
.steckbrief dt {
  font-size:.625rem; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-leise);
}
.steckbrief dd { margin:0; }
@media (max-width: 560px) { .steckbrief div { grid-template-columns:1fr; gap:.2rem; } }

/* ---------- STATUS DER KITTEN ----------------------------- */
.status {
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.5625rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; padding:.35rem 0;
  color:var(--text-leise); background:none;
  border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
}
.status::before { content:""; width:.3rem; height:.3rem; transform:rotate(45deg); background:currentColor; }
.status--verfuegbar { color:var(--blau); border-color:var(--taupe); }
.status--reserviert { color:var(--text-leise); }
.status--vergeben   { color:var(--text-leise); opacity:.55; }

/* ---------- WURFKOPF -------------------------------------- */
.wurfkopf {
  display:grid; gap:1.75rem clamp(2rem, 5vw, 4rem); grid-template-columns:1fr;
  padding-bottom:clamp(2rem, 4vw, 3rem);
  border-bottom:1px solid var(--linie-fein); margin-bottom:var(--luft);
}
@media (min-width: 820px) { .wurfkopf { grid-template-columns:1fr 1fr; } }

/* ---------- SCHRITTE -------------------------------------- */
.schritte {
  counter-reset:schritt; margin:0; padding:0; list-style:none;
  display:grid; gap:0 clamp(2rem, 5vw, 5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}
.schritte li {
  counter-increment:schritt; display:grid; gap:.4rem 2rem;
  grid-template-columns:3.5rem 1fr;
  padding:clamp(1.5rem, 3vw, 2.25rem) 0; border-top:1px solid var(--linie-fein);
}
.schritte li::before {
  content:counter(schritt, decimal-leading-zero);
  font-family:var(--serif); font-size:1.5rem; font-weight:400;
  color:var(--blau); line-height:1.2; grid-row:span 2;
}
.schritte h3 {
  font-family:var(--sans); font-weight:300; font-size:1.0625rem;
  letter-spacing:.16em; text-transform:uppercase; margin:0; line-height:1.4;
}
.schritte p { margin:0; color:var(--text-leise); max-width:36em; }
@media (max-width: 560px) { .schritte li { grid-template-columns:2.25rem 1fr; gap:.4rem 1rem; } }

/* ---------- AUFZAEHLUNG ----------------------------------- */
.liste {
  margin:0; padding:0; list-style:none;
  display:grid; gap:0 clamp(2rem, 5vw, 5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}
.liste li { padding:1rem 0 1rem 2rem; border-top:1px solid var(--linie-fein); position:relative; }
.liste li::before {
  content:""; position:absolute; left:.35rem; top:1.55rem;
  width:.32rem; height:.32rem; transform:rotate(45deg); background:var(--taupe);
}

/* ---------- SCHALTFLAECHEN -------------------------------- */
.knopf {
  display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.9rem;
  font-size:.625rem; font-weight:400; letter-spacing:.24em; text-transform:uppercase;
  border:1px solid var(--linie); color:var(--text); background:none; cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.knopf:hover { background:var(--blau); border-color:var(--blau); color:var(--grund); text-decoration:none; }
.knopf--voll { background:var(--blau); border-color:var(--blau); color:var(--grund); }
.knopf--voll:hover { background:var(--text); border-color:var(--text); }
.knopf-reihe { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.25rem; }

/* ---------- GALERIE UND LEUCHTKASTEN ---------------------- */
.galerie { display:grid; gap:1rem;
           grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr)); margin-top:1.75rem; }
.galerie button { padding:0; border:0; background:none; cursor:zoom-in; display:block; width:100%; }

.leuchtkasten {
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 4vw, 3rem); background:rgba(51, 41, 31, .94); border:0;
}
.leuchtkasten::backdrop { background:rgba(51, 41, 31, .94); }
.leuchtkasten img { max-width:100%; max-height:85svh; object-fit:contain; }
.leuchtkasten-zu {
  position:absolute; top:1rem; right:1rem; background:none;
  border:1px solid rgba(246,240,228,.4); color:var(--grund); cursor:pointer;
  padding:.6rem 1rem; font-family:var(--sans); font-size:.625rem;
  font-weight:400; letter-spacing:.2em; text-transform:uppercase;
}
.leuchtkasten-zu:hover { background:rgba(246,240,228,.12); }

/* ---------- KONTAKTKARTEN --------------------------------- */
.kontaktreihe {
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr));
  margin-top:2.5rem; border-top:1px solid var(--linie);
}
.kontaktreihe > * {
  padding:clamp(1.75rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
  border-bottom:1px solid var(--linie);
}
@media (min-width: 700px) {
  .kontaktreihe > * + * { border-left:1px solid var(--linie-fein); }
}
.kontaktreihe .marke { margin-bottom:.6rem; }
.kontaktreihe a { font-size:1rem; word-break:break-word; }

/* ---------- FUSSZEILE ------------------------------------- */
.fuss {
  padding:clamp(2.5rem, 6vw, 4rem) var(--rand) clamp(1.75rem, 3vw, 2.5rem);
  background:var(--balken);
  border-top:1px solid #8E8071;
}
.fuss-innen { max-width:82rem; margin:0 auto; display:grid; gap:2.5rem;
              grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr)); }
.fuss-name {
  font-family:var(--serif); font-size:1.125rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; margin:0 0 .5rem;
}
.fuss a { color:var(--text); }
.fuss a:hover { color:var(--blau); }
.fuss ul { list-style:none; margin:0; padding:0; }
.fuss li { margin-bottom:.55rem; font-size:.8125rem; }
.fuss-unten {
  max-width:82rem; margin:clamp(2rem, 4vw, 3rem) auto 0;
  padding-top:1.5rem; border-top:1px solid var(--linie-fein);
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  font-size:.75rem; letter-spacing:.06em; color:var(--text-leise);
}

/* ---------- RECHTSTEXTE ----------------------------------- */
.rechtstext { max-width:44rem; }
.rechtstext h2 {
  font-family:var(--sans); font-weight:300; font-size:1.125rem;
  letter-spacing:.16em; text-transform:uppercase; margin:2.75rem 0 .9rem;
}
.rechtstext h3 {
  font-size:.75rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-leise); margin:2rem 0 .5rem;
}
.rechtstext ul { padding-left:1.25rem; }
.rechtstext .luecke {
  background:var(--flaeche); border-bottom:1.5px solid var(--blau);
  padding:.1em .4em; font-weight:500;
}

/* ---------- HINWEIS OHNE JAVASCRIPT ----------------------- */
.kein-js {
  padding:1.75rem var(--rand); text-align:center;
  border-bottom:1px solid var(--linie); font-size:.875rem;
}