/* ============================================================
   deko-momente by Magdalena · Fulda & Osthessen
   Floristik · Dekoration · Raumzauber
   Design-System v1 – siehe 02_markenidentitaet/design-system.md
   ============================================================ */

/* ---------- Fonts (selbst gehostet → kein externer Request) ---------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin-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;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/jost-latin.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: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/jost-latin-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;
}
@font-face {
  font-family: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/parisienne-latin.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: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/parisienne-latin-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;
}

/* ---------- Design-Tokens ---------- */
:root {
  --papier:        #FAF7F1;
  --weiss:         #FFFFFF;
  --tinte:         #1E1C1A;
  --grau:          #6B6560;
  --salbei:        #8E9C87;
  --salbei-dunkel: #6E7C68;
  --salbei-tief:   #55604F;
  --salbei-schleier:#DDE3D9;
  --gold:          #A6875E;
  --gold-hell:     #C9AF88;
  --sand:          #DDD4C7;
  --linie:         #E8E1D6;

  --schatten-sm: 0 2px 12px -6px rgba(30, 28, 26, .16);
  --schatten:    0 18px 48px -24px rgba(30, 28, 26, .28);

  --maxw:      1140px;
  --maxw-text: 720px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 140ms;
  --dur:      220ms;

  --serif:  'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --script: 'Parisienne', 'Segoe Script', cursive;
  --sans:   'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--tinte);
  background: var(--papier);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--salbei-dunkel); text-decoration: none; transition: color var(--dur) var(--ease-out); }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--tinte);
  line-height: 1.18;
  margin: 0 0 .55em;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 3.6rem); font-weight: 300; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1.1rem; }
strong { font-weight: 500; color: var(--tinte); }

::selection { background: var(--salbei-schleier); color: var(--tinte); }

:focus-visible {
  outline: 2px solid var(--salbei-dunkel);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Typo-Bausteine ---------- */
.script {
  font-family: var(--script);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  color: var(--gold);
  line-height: 1.3;
  display: block;
  margin-bottom: .2em;
}
.label {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--salbei-dunkel);
  display: block;
  margin-bottom: 1rem;
}
.lead { font-size: 1.15rem; color: var(--grau); }

/* Die Tilden-Formel – Markenzeichen */
.tilden {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--grau);
  line-height: 2;
}
.tilden li::before { content: "~"; color: var(--gold-hell); margin-right: .35em; }
.tilden li::after  { content: "~"; color: var(--gold-hell); margin-left: .35em; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.wrap-text { max-width: var(--maxw-text); margin-inline: auto; padding-inline: 24px; }
section { padding-block: clamp(56px, 9vw, 96px); }
.mitte { text-align: center; }
.mitte .tilden { display: inline-block; text-align: center; }

.flaeche-schleier { background: var(--salbei-schleier); }
.flaeche-weiss    { background: var(--weiss); }
.flaeche-salbei   { background: var(--salbei-dunkel); color: var(--papier); }
.flaeche-salbei h1, .flaeche-salbei h2, .flaeche-salbei h3 { color: var(--papier); }
.flaeche-salbei a { color: var(--papier); }
.flaeche-salbei .label { color: var(--salbei-schleier); }
.flaeche-salbei .script { color: var(--gold-hell); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 15px 34px;
  background: var(--salbei-dunkel);
  color: var(--papier);
  border: 1px solid var(--salbei-dunkel);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  cursor: pointer;
}
.btn:hover { background: var(--salbei-tief); border-color: var(--salbei-tief); color: var(--papier); }
.btn-linie { background: transparent; color: var(--salbei-dunkel); border-color: var(--salbei); }
.btn-linie:hover { background: var(--salbei-dunkel); color: var(--papier); }
.btn-hell { background: var(--papier); color: var(--salbei-tief); border-color: var(--papier); }
.btn-hell:hover { background: transparent; color: var(--papier); border-color: var(--papier); }
.btn-reihe { display: flex; gap: 14px; flex-wrap: wrap; }
.mitte .btn-reihe { justify-content: center; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 247, 241, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.marke { display: flex; flex-direction: column; line-height: 1.1; }
.marke-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte);
}
.marke-zusatz {
  font-family: var(--script);
  font-size: 1rem;
  color: var(--gold);
  margin-top: 2px;
}
.nav-liste {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.nav-liste a {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
}
.nav-liste a:hover, .nav-liste a[aria-current="page"] {
  color: var(--salbei-dunkel);
  border-bottom-color: var(--gold-hell);
}
.nav-liste .btn { padding: 11px 22px; color: var(--papier); border-bottom-color: var(--salbei-dunkel); }
.nav-liste .btn:hover,
.nav-liste .btn[aria-current="page"] { color: var(--papier); border-bottom-color: var(--salbei-tief); }

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--tinte);
}
.burger span {
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  margin: 6px 0;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: 64px 0 auto 0;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur) var(--ease-out);
  }
  .nav.offen { max-height: 80vh; overflow-y: auto; }
  .nav-liste { flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 28px; }
  .nav-liste a { display: block; padding: 14px 0; border-bottom: 1px solid var(--linie); }
  .nav-liste .ig-link { display: flex; }
  .nav-liste li:last-child { margin-top: 18px; }
  .nav-liste .btn { text-align: center; }
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 88px) 24px;
}
.hero-text { max-width: 30rem; }
.hero h1 { margin-bottom: .35em; }
.hero-bild {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.hero-bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-bild { aspect-ratio: 4 / 3; order: -1; }
  .hero-text { max-width: none; }
}

/* Seiten-Kopf für Unterseiten */
.seitenkopf {
  padding-block: clamp(48px, 7vw, 84px) clamp(28px, 4vw, 48px);
  text-align: center;
}
.seitenkopf p { max-width: 46rem; margin-inline: auto; color: var(--grau); }

/* ---------- Karten / Raster ---------- */
.raster { display: grid; gap: 28px; }
.raster-2 { grid-template-columns: repeat(2, 1fr); }
.raster-3 { grid-template-columns: repeat(3, 1fr); }
.raster-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .raster-3, .raster-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .raster-2, .raster-3, .raster-4 { grid-template-columns: 1fr; } }

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  padding: 30px 28px;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.karte:hover { border-color: var(--sand); transform: translateY(-2px); }
.karte h3 { margin-bottom: .4em; }
.karte p:last-child { margin-bottom: 0; }
.karte-bild { padding: 0; overflow: hidden; }
.karte-bild img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; transition: transform 600ms var(--ease-out); }
.karte-bild:hover img { transform: scale(1.03); }
.karte-bild .karte-inhalt { padding: 24px 26px 28px; }

/* ---------- Bild/Text im Wechsel ---------- */
.wechsel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.wechsel img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.wechsel.gedreht .wechsel-bild { order: 2; }
@media (max-width: 820px) {
  .wechsel { grid-template-columns: 1fr; }
  .wechsel.gedreht .wechsel-bild { order: 0; }
  .wechsel img { aspect-ratio: 4 / 3; }
}

/* ---------- Galerie ---------- */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.galerie figure { margin: 0; overflow: hidden; background: var(--sand); }
.galerie img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; transition: transform 700ms var(--ease-out); }
.galerie figure:hover img { transform: scale(1.04); }
.galerie figcaption {
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--grau);
  padding-top: 10px;
}
@media (max-width: 760px) { .galerie { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ---------- Ablauf / Schritte ---------- */
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; gap: 32px; }
.schritte li { counter-increment: schritt; padding-left: 68px; position: relative; }
.schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -6px;
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--gold-hell);
  line-height: 1;
}
.schritte h3 { margin-bottom: .25em; }
.schritte p { margin-bottom: 0; color: var(--grau); }

/* ---------- Locations ---------- */
.location {
  border-top: 1px solid var(--linie);
  padding-block: 34px;
}
.location:last-child { border-bottom: 1px solid var(--linie); }
.location h3 { margin-bottom: .2em; }
.location .ort {
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--salbei-dunkel);
  display: block;
  margin-bottom: .8em;
}
.location p:last-child { margin-bottom: 0; }

/* ---------- Formular ---------- */
.formular { max-width: 640px; }
.feld { margin-bottom: 20px; }
.feld label {
  display: block;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 7px;
}
.feld input, .feld select, .feld textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--tinte);
  background: var(--weiss);
  border: 1px solid var(--linie);
  padding: 13px 15px;
  transition: border-color var(--dur) var(--ease-out);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--salbei);
  outline: none;
}
.feld textarea { min-height: 150px; resize: vertical; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .feld-reihe { grid-template-columns: 1fr; } }
.feld-check { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 24px; }
.feld-check input { width: auto; margin-top: 5px; flex-shrink: 0; }
.feld-check label { text-transform: none; letter-spacing: 0; font-size: .92rem; line-height: 1.6; color: var(--grau); }
.honigtopf { position: absolute; left: -9999px; }

/* ---------- Kontaktdaten-Block ---------- */
.kontaktdaten { list-style: none; margin: 0; padding: 0; }
.kontaktdaten li { padding-block: 12px; border-bottom: 1px solid var(--linie); }
.kontaktdaten li:last-child { border-bottom: 0; }
.kontaktdaten .k-label {
  display: block;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--salbei-dunkel);
  margin-bottom: 2px;
}

/* ---------- Instagram-Einbindung ---------- */
.ig-gate {
  background: var(--weiss);
  border: 1px solid var(--linie);
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
}
.ig-gate p { max-width: 34rem; margin-inline: auto; color: var(--grau); }
.ig-slot { min-height: 200px; }
.ig-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 700px) { .ig-raster { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.ig-kachel { position: relative; display: block; overflow: hidden; background: var(--sand); }
.ig-kachel img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; transition: transform 600ms var(--ease-out), opacity var(--dur) var(--ease-out); }
.ig-kachel:hover img { transform: scale(1.05); opacity: .9; }
.ig-typ {
  position: absolute;
  top: 10px; right: 10px;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(250, 247, 241, .92);
  color: var(--tinte);
  padding: 3px 8px;
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  font-family: var(--serif);
  font-size: 1.25rem;
  padding: 20px 40px 20px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--gold-hell);
  font-family: var(--sans);
  font-weight: 300;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 20px; color: var(--grau); margin-bottom: 0; }

/* ---------- Zitat ---------- */
.zitat {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 300;
  line-height: 1.45;
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}
.zitat cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grau);
  margin-top: 1.5rem;
}

/* ---------- Eukalyptus-Strichzeichnung ---------- */
.zweig {
  position: absolute;
  pointer-events: none;
  color: var(--sand);
  opacity: .9;
}
.zweig-links  { left: -60px; bottom: -30px; width: 260px; }
.zweig-rechts { right: -70px; top: -40px; width: 300px; transform: scaleX(-1); }
.mit-zweig { position: relative; overflow: hidden; }
@media (max-width: 760px) { .zweig { display: none; } }

/* Herz-Signet */
.herz { display: block; width: 46px; margin: 2.5rem auto 0; color: var(--gold-hell); }

/* ---------- Fußzeile ---------- */
.fuss {
  background: var(--salbei-dunkel);
  color: var(--salbei-schleier);
  padding-block: clamp(48px, 7vw, 72px) 28px;
  margin-top: clamp(48px, 8vw, 88px);
}
.fuss a { color: var(--salbei-schleier); }
.fuss a:hover { color: var(--weiss); }
.fuss-raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
}
@media (max-width: 880px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss-raster { grid-template-columns: 1fr; } }
.fuss h4 {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-hell);
  margin-bottom: 1rem;
}
.fuss-marke .marke-name { color: var(--papier); }
.fuss-marke .marke-zusatz { color: var(--gold-hell); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 9px; font-size: .95rem; }
.fuss-unten {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(250, 247, 241, .18);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  font-size: .82rem;
  color: rgba(250, 247, 241, .72);
}

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: var(--maxw-text); margin-inline: auto; padding-inline: 24px; }
.rechtstext h2 { font-size: 1.5rem; margin-top: 2.4rem; }
.rechtstext h3 { font-size: 1.15rem; margin-top: 1.8rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .5rem; }
.platzhalter {
  background: #FFF6E0;
  border-left: 3px solid var(--gold);
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: .95rem;
}

/* ---------- Hinweisbox ---------- */
.hinweis {
  background: var(--salbei-schleier);
  border-left: 3px solid var(--salbei);
  padding: 22px 26px;
  margin-block: 2rem;
}
.hinweis p:last-child { margin-bottom: 0; }
.hinweis strong { color: var(--salbei-tief); }

/* ---------- Sanfte Einblendung ----------
   Nur wenn JavaScript wirklich läuft. Ohne JS bleibt alles sichtbar –
   Inhalte dürfen niemals hinter einer Animation verschwinden. */
@media (scripting: enabled) {
  .auf { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .auf.sichtbar { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .auf { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Skip-Link */
.skip {
  position: absolute;
  left: -9999px;
  background: var(--tinte);
  color: var(--papier);
  padding: 10px 18px;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- Instagram-Button ---------- */
.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tinte);
  border-bottom: 1px solid transparent;
}
.ig-link svg { width: 20px; height: 20px; flex: none; }
.ig-link:hover { color: var(--gold); }
.nav-liste .ig-link { padding-block: 6px; }

.btn-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-ig svg { width: 17px; height: 17px; flex: none; }

.fuss .ig-link { color: var(--salbei-schleier); }
.fuss .ig-link:hover { color: var(--weiss); }

.nav-liste .ig-link .ig-text {
  display: none;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  /* Im aufgeklappten Menü mit Beschriftung statt nur Symbol */
  .nav-liste .ig-link { padding: 14px 0; }
  .nav-liste .ig-link .ig-text { display: inline; }
}

/* ---------- Mobile: größere Tippflächen ---------- */
@media (max-width: 760px) {
  .fuss li { margin-bottom: 2px; }
  .fuss li a { display: inline-block; padding-block: 10px; }
  .kontaktdaten li { padding-block: 16px; }
  .feld input, .feld select, .feld textarea { padding: 15px; font-size: 16px; } /* 16px verhindert Zoom in iOS */
  .btn { padding: 17px 30px; }
  .btn-reihe .btn { width: 100%; text-align: center; }
  .galerie figcaption { font-size: .85rem; }
}
.feld-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--salbei-dunkel);
}

/* Korrektur: .flaeche-salbei a hat höhere Spezifität als .btn-hell –
   ohne diese Regel wäre die Beschriftung heller Buttons unsichtbar. */
.flaeche-salbei a.btn-hell { color: var(--salbei-tief); }
.flaeche-salbei a.btn-hell:hover { color: var(--papier); }

/* Endet die Seite mit einem salbeigrünen Abschnitt, entfällt der
   Abstand zur ebenfalls grünen Fußzeile – sonst entsteht ein heller Streifen. */
main:has(> .flaeche-salbei:last-child) + .fuss { margin-top: 0; }