/* Komponenten nach docs/DESIGN-SYSTEM.md, Abschnitt 4.
 * Zustandsklassen (is-scrolled, is-open, is-active, is-visible, data-tone …)
 * setzen die Module in static/js/ - siehe docs/FRONTEND-HOOKS.md.
 */

/* ===================================================== 4.1 Top-Navigation */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--dur) var(--ease-out),
    height var(--dur) var(--ease-out);
}

.nav__inner {
  /* Ueber dem offenen Menuepanel (z-index 99): Logo und Schliessen-Kreuz
     bleiben sichtbar. */
  position: relative;
  z-index: 100;
  width: min(100% - 2 * var(--gutter), var(--container-wide));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

.nav a { text-decoration: none; }

.nav.is-scrolled { border-bottom-color: var(--line-color); }

/* Der Grund der Leiste liegt auf einem Pseudo-Element: backdrop-filter am
   .nav selbst machte die Leiste zum Bezugsrahmen des fixierten Menuepanels -
   nach dem Scrollen klappte das Menue auf 64 px zusammen. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.nav.is-scrolled::before { opacity: 1; }

/* Ueber dem Hero-Foto (nur Startseite, nur ganz oben, Menue zu): helle
   Schrift und weisses Logo, getragen von einem weichen Schatten. Sonst
   steht die Leiste dunkel auf hellem Grund. */
body:has(.hero) .nav:not(.is-scrolled):not(.is-open) {
  --text-1: #FFFFFF;
  --text-2: rgba(255, 255, 255, 0.92);
  --accent-400: #FFFFFF;
  --accent-500: #FFFFFF;
  --accent-600: #FFFFFF;
  --accent-700: #E6E5E2;
  --on-accent: #0B0B0B;
  --focus: #FFFFFF;
}

body:has(.hero) .nav:not(.is-scrolled):not(.is-open) .nav__logo,
body:has(.hero) .nav:not(.is-scrolled):not(.is-open) .nav__link { text-shadow: 0 1px 8px var(--veil-66), 0 0 2px var(--veil-55); }

.nav__logo { display: flex; align-items: center; min-height: 44px; }

.nav__logo img {
  display: block;
  height: 26px;
  width: auto;
  /* Das Logo ist weiss; auf hellem Grund wird es dunkel. */
  filter: brightness(0);
  opacity: .9;
}

body:has(.hero) .nav:not(.is-scrolled):not(.is-open) .nav__logo img { filter: none; opacity: 1; }

.nav__desktop { display: none; }
.nav__links { list-style: none; }

.nav__link {
  position: relative;
  display: block;
  /* Tippziel ~44 px auf Touch-Tablets; die Linie bleibt 6 px unter dem Text. */
  padding-block: 15px;
  color: var(--text-2);
  font-weight: 400;
  font-size: var(--fs-nav);
  line-height: 1;
  letter-spacing: .28em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 9px;
  width: 100%;
  height: 1px;
  background: var(--accent-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.nav__link:hover { color: var(--text-1); }
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--text-1); }
.nav__link:active { opacity: .8; }

.nav .nav__cta { display: none; }

/* --- Burger --- */

.nav__burger {
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  cursor: pointer;
}

.nav__burger span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition:
    transform var(--dur) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.nav__burger span:nth-child(1) { top: 14.5px; }
.nav__burger span:nth-child(2) { top: 21.5px; }
.nav__burger span:nth-child(3) { top: 28.5px; }

.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Vollbild-Overlay --- */

.nav__panel {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--s-8);
  padding: calc(var(--nav-h) + var(--s-8)) var(--gutter) var(--s-12);
  /* Mittig, solange es passt; im Querformat scrollbar statt abgeschnitten. */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ink-000);
  opacity: 0;
  visibility: hidden;
  /* visibility schaltet hart: beim Oeffnen sofort (sonst ist das Panel noch
     nicht fokussierbar), beim Schliessen erst nach der Blende. */
  transition:
    opacity var(--dur) var(--ease-soft),
    visibility 0s linear var(--dur);
}

.nav.is-open .nav__panel {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur) var(--ease-soft),
    visibility 0s;
}

.nav__panel-links {
  display: flex;
  flex-direction: column;
  /* Kein gap: das Touch-Padding der Links traegt den Abstand schon. */
  gap: 0;
  list-style: none;
}

.nav__panel-link {
  display: block;
  padding-block: 14px;
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.875rem, 8vw, 2.5rem);
  line-height: 1.15;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur) var(--ease-soft),
    transform var(--dur) var(--ease-soft),
    color var(--dur) var(--ease-out);
}

.nav.is-open .nav__panel-link { opacity: 1; transform: none; }
.nav__panel-link:hover,
.nav__panel-link.is-active { color: var(--text-3); }

.nav.is-open li:nth-child(1) .nav__panel-link { transition-delay: calc(var(--dur-stagger) * 1); }
.nav.is-open li:nth-child(2) .nav__panel-link { transition-delay: calc(var(--dur-stagger) * 2); }
.nav.is-open li:nth-child(3) .nav__panel-link { transition-delay: calc(var(--dur-stagger) * 3); }
.nav.is-open li:nth-child(4) .nav__panel-link { transition-delay: calc(var(--dur-stagger) * 4); }
.nav.is-open li:nth-child(5) .nav__panel-link { transition-delay: calc(var(--dur-stagger) * 5); }
.nav.is-open li:nth-child(6) .nav__panel-link { transition-delay: calc(var(--dur-stagger) * 6); }

.nav__panel .btn { width: 100%; }
.nav__panel > :first-child { margin-top: auto; }
.nav__panel > :last-child { margin-bottom: auto; }

@media (min-width: 1024px) {
  .nav__desktop { display: block; margin-left: auto; }

  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--s-8);
  }

  .nav .nav__cta { display: inline-flex; margin-left: var(--s-10); }
  .nav__logo img { height: 32px; }
  .nav__burger { display: none; }
  .nav__panel { display: none; }
  .nav.is-scrolled { height: 68px; }
}

/* =========================================================== 4.2 Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 46px;
  padding: 0 var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-btn);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn--primary { background: var(--accent-600); color: var(--on-accent); }
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--accent-700); }
.btn--primary:active { background: var(--accent-700); transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .btn--primary:active,
  .btn--ghost:active { transform: none; }
}

.btn--ghost {
  background: transparent;
  border-color: var(--text-1);
  color: var(--text-1);
}

.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--accent-a35); background: var(--accent-a08); }
.btn--ghost:active { background: var(--accent-a18); transform: translateY(1px); }

.btn--compact { min-height: 44px; padding: 0 var(--s-5); }

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--ink-400);
  border-color: transparent;
  color: var(--text-3);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* Beim Senden ist der Knopf auch disabled - er soll schwarz bleiben und nur
   blasser werden, nicht hellgrau mit kaum lesbarer Schrift. */
.btn--primary[aria-busy="true"] {
  background: var(--accent-600);
  border-color: transparent;
  color: var(--on-accent);
  opacity: .72;
  cursor: progress;
}

/* --- Link mit Pfeil --- */

/* Touch-Ziel 44 px: die Unterlinie liegt weiterhin dicht am Text, das
   Polster macht nur das Ziel groesser (Design-System 7, WCAG 2.5.8). */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-block: 11px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 calc(100% - 11px);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-btn);
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.link-arrow svg { flex: none; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover,
.link-arrow:focus-visible { color: var(--text-3); }
.link-arrow:hover svg,
.link-arrow:focus-visible svg { transform: translateX(4px); }
.link-arrow:active svg { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .link-arrow:hover svg,
  .link-arrow:focus-visible svg,
  .link-arrow:active svg { transform: none; }
}

/* =========================================================== 4.3 Eyebrow */

/* Wie die Referenz: feiner Strich, dann ein kursives, leicht gesperrtes
   Wort in normaler Schreibung ("—— Willkommen"). */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: 0 0 var(--s-4);
  /* Vorher 300/15px/.2em/--text-2: die duennste Schrift der Seite
     ("Zusatz zur Hochzeit" war nicht lesbar). */
  color: var(--text-1);
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-eyebrow);
  line-height: 1.3;
  letter-spacing: .08em;
  max-width: none;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 56px;
  height: 1px;
  background: currentColor;
}

.on-photo .eyebrow { color: var(--text-1); }

/* ==================================================== 4.4 Sektionsheader */

.section-head { margin-bottom: var(--head-gap); }
.section-head__intro { margin-top: var(--title-gap); }
.section-head__cta { display: none; }

@media (min-width: 1024px) {
  .section-head--split {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--gap-lg);
  }

  .section-head--split .section-head__text { flex: 1 1 auto; }
  .section-head__cta { display: inline-flex; flex: none; margin-bottom: var(--s-2); }
}

/* ====================================================== 4.5 Anlass-Kachel */

/* Redesign: Titel und Text stehen unter dem Foto auf dem Seitengrund statt
   weiss auf abgedunkeltem Foto - ruhiger und besser lesbar, wie die
   Referenz. Das Foto bleibt farbig und unverschleiert. */
.tile {
  display: block;
  color: inherit;
  text-decoration: none;
}

.tile picture { display: block; overflow: hidden; }

.tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-soft);
}

.tile__body { padding: var(--s-6) 0 0; }
.tile__body h3 {
  margin-bottom: var(--s-3);
  text-decoration: underline transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--dur) var(--ease-out);
}
.tile__body p { margin: 0; max-width: 48ch; color: var(--text-2); }

.tile__rule { display: none; }

.tile:hover img { transform: scale(1.03); }
.tile:active img { transform: scale(1.015); }
.tile:hover h3,
.tile:focus-visible h3 { text-decoration-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .tile:hover img,
  .tile:active img { transform: none; }
}

/* ============================================ 4.7 Ablauf, 4.8 Feature-Liste */

.steps {
  list-style: none;
  display: grid;
  gap: var(--gap-lg);
}

.step__rule {
  display: block;
  width: 56px;
  height: 1px;
  margin-bottom: var(--s-5);
  background: var(--text-1);
}

.step__num {
  display: block;
  margin-bottom: var(--s-4);
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-num);
  line-height: 1;
}

.step h3 {
  margin-bottom: var(--s-3);
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: none;
}
.step p { margin: 0; }

.features { list-style: none; max-width: 560px; }

.features li {
  display: flex;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: var(--line);
  transition: border-color var(--dur) var(--ease-out);
}

.features li:last-child { border-bottom: var(--line); }

.features li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  margin-top: 14px;
  background: var(--text-1);
  transition: width var(--dur) var(--ease-out);
}

.features li:hover { border-top-color: var(--line-color-strong); }
.features li:hover::before { width: 24px; }
.features b { color: var(--text-1); font-weight: 600; }

/* ================================================ 4.9 Galerie + Lightbox */

.gallery {
  column-count: 2;
  column-gap: var(--s-6);
}

.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 var(--s-6);
  border-radius: var(--r-sm);
  overflow: hidden;
  break-inside: avoid;
  text-decoration: none;
  cursor: pointer;
}

.gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--dur-slow) var(--ease-soft);
}

.gallery__item:hover img,
.gallery__item:focus-visible img { transform: scale(1.05); }

/* Auch hier liegt ein Foto unter dem Ring (W11). */
.gallery__item:focus-visible { box-shadow: 0 0 0 5px var(--focus-halo); }

@media (min-width: 768px) { .gallery { column-count: 3; } }
@media (min-width: 1280px) { .gallery { column-count: 4; } }

@media (prefers-reduced-motion: reduce) {
  .gallery__item:hover img,
  .gallery__item:focus-visible img { transform: none; }
}

/* --- Lightbox (DOM von gallery.js) --- */

[data-gallery-lightbox] {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 100%;
  max-height: 100%;
  background: transparent;
  color: var(--text-1);
}

[data-gallery-lightbox][open] {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  animation: lightbox-in var(--dur-slow) var(--ease-soft);
}

[data-gallery-lightbox]::backdrop { background: var(--photo-bg, #141217); }

@keyframes lightbox-in {
  from { opacity: 0; transform: scale(.98); }
}

[data-gallery-figure] {
  margin: 0;
  display: grid;
  gap: var(--s-4);
  justify-items: center;
  padding: var(--s-16) var(--gutter);
}

[data-gallery-image] {
  display: block;
  max-width: min(100% , 1280px);
  max-height: 86svh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: var(--photo-bg);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

[data-gallery-lightbox][data-state="ready"] [data-gallery-image] { opacity: 1; }

/* Laedt das grosse Bild nicht, bleibt die Flaeche sonst dauerhaft leer. */
[data-gallery-lightbox][data-state="error"] [data-gallery-image] { display: none; }
[data-gallery-lightbox][data-state="error"] [data-gallery-caption] { color: var(--text-1); }

[data-gallery-caption] {
  max-width: 60ch;
  color: var(--text-3);
  font-size: var(--fs-meta);
  line-height: 1.5;
  text-align: center;
}

[data-gallery-counter] {
  position: absolute;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
}

[data-gallery-close],
[data-gallery-previous],
[data-gallery-next] {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out);
}

[data-gallery-close]:not([hidden]),
[data-gallery-previous]:not([hidden]),
[data-gallery-next]:not([hidden]) {
  display: grid;
  place-items: center;
}

[data-gallery-close]:hover,
[data-gallery-previous]:hover,
[data-gallery-next]:hover { color: var(--accent-400); }

[data-gallery-close] { top: var(--s-4); right: var(--s-4); }

[data-gallery-close]::before,
[data-gallery-close]::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 1px;
  background: currentColor;
}

[data-gallery-close]::before { transform: rotate(45deg); }
[data-gallery-close]::after { transform: rotate(-45deg); }

[data-gallery-previous] { left: var(--s-2); top: 50%; margin-top: -22px; }
[data-gallery-next] { right: var(--s-2); top: 50%; margin-top: -22px; }

/* Unter 768 px liegen die Pfeile sonst ohne Hof auf dem Foto - dort stehen
   sie mit dem Zaehler in einer Fusszeile. */
@media (max-width: 767.98px) {
  [data-gallery-lightbox][open] {
    grid-template-columns: 44px 1fr 44px;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "bild bild bild"
      "zurueck zaehler vor";
    align-items: center;
    justify-items: center;
    padding-bottom: var(--s-4);
  }

  [data-gallery-figure] {
    grid-area: bild;
    padding: var(--s-16) var(--gutter) var(--s-2);
  }

  [data-gallery-previous]:not([hidden]) {
    position: static;
    grid-area: zurueck;
    margin: 0;
  }

  [data-gallery-next]:not([hidden]) {
    position: static;
    grid-area: vor;
    margin: 0;
  }

  [data-gallery-counter] {
    position: static;
    grid-area: zaehler;
    transform: none;
  }
}

[data-gallery-previous]::before,
[data-gallery-next]::before {
  content: "";
  width: 12px;
  height: 12px;
  border-left: 1px solid currentColor;
  border-top: 1px solid currentColor;
}

[data-gallery-previous]::before { transform: rotate(-45deg) translate(1px, 1px); }
[data-gallery-next]::before { transform: rotate(135deg) translate(1px, 1px); }

@media (min-width: 768px) {
  [data-gallery-previous] { left: var(--s-6); }
  [data-gallery-next] { right: var(--s-6); }
  [data-gallery-close] { top: var(--s-6); right: var(--s-6); }
}

/* ===================================================== 4.10 FAQ-Akkordeon */

.faq__item { border-top: var(--line); }
.faq__item:last-of-type { border-bottom: var(--line); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  min-height: 56px;
  padding-block: var(--s-6);
  list-style: none;
  cursor: pointer;
  color: var(--text-1);
  font-weight: 500;
  font-size: var(--fs-intro);
  line-height: 1.4;
  transition: color var(--dur) var(--ease-out);
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__sign {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  background: var(--text-3);
  transition:
    background var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out);
}

.faq__sign::before { left: 0; top: 6.5px; width: 14px; height: 1px; }
.faq__sign::after { left: 6.5px; top: 0; width: 1px; height: 14px; }

.faq__item summary:hover { border-top-color: var(--line-color-strong); }
.faq__item summary:hover .faq__sign::before,
.faq__item summary:hover .faq__sign::after { background: var(--text-1); }
.faq__item summary:focus-visible { outline-offset: -2px; }

.faq__item[open] .faq__sign::before,
.faq__item[open] .faq__sign::after { background: var(--text-1); }
.faq__item[open] .faq__sign::after { transform: rotate(90deg); opacity: 0; }


/* Weiches Ausfahren ohne Hoehenrechnung: Grid-Zeile 0fr -> 1fr. */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-soft);
}

.faq__item[open] .faq__answer { grid-template-rows: 1fr; }

.faq__answer > div { overflow: hidden; }
.faq__answer p { max-width: var(--measure); padding-bottom: var(--s-6); margin: 0; color: var(--text-2); }

/* ==================================================== 4.11 Formularfelder */

.field { display: block; }

.field__label {
  display: block;
  margin-bottom: var(--s-1);
  color: var(--text-1);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1.3;
  letter-spacing: .02em;
}

.field__label span { color: var(--text-1); }

.field__control {
  width: 100%;
  min-height: 46px;
  padding: 10px 0;
  background: transparent;
  /* Wie die Referenz: nur eine Linie unter dem Feld. */
  border: 0;
  border-bottom: var(--line-strong);
  border-radius: 0;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

textarea.field__control {
  min-height: 140px;
  padding: var(--s-3);
  border: var(--line-strong);
  resize: vertical;
}

select.field__control {
  appearance: none;
  padding-right: var(--s-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 6px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field__control::placeholder { color: var(--text-3); opacity: 1; }
.field__control:hover { border-color: var(--text-3); }

.field__control:focus-visible {
  outline: none;
  border-color: var(--text-1);
  box-shadow: 0 1px 0 0 var(--text-1);
}

textarea.field__control:focus-visible { box-shadow: 0 0 0 1px var(--text-1); }

/* Autofill fuellt sonst ein farbiges Rechteck in die reinen Unterstrich-Felder. */
.field__control:-webkit-autofill {
  -webkit-text-fill-color: var(--text-1);
  caret-color: var(--text-1);
  transition: background-color var(--autofill-hold) 0s, border-color var(--dur) var(--ease-out);
}

.field__control:autofill {
  caret-color: var(--text-1);
  transition: background-color var(--autofill-hold) 0s, border-color var(--dur) var(--ease-out);
}

.field__control[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 1px 0 0 var(--error);
}

.field__control[type="date"]::-webkit-calendar-picker-indicator,
.field__control[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
}

/* Gaestezahl: die Pfeilchen sind bei dreistelligen Zahlen nur im Weg. */
.field__control[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.field__control[type="number"]::-webkit-inner-spin-button,
.field__control[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Auswahlknoepfe (Anrede) --- */

fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field > legend { padding: 0; }

.choice { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice__item { position: relative; cursor: pointer; }

.choice__item input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice__item span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-5);
  background: transparent;
  border: var(--line-strong);
  border-radius: 0;
  color: var(--text-2);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.choice__item:hover span { border-color: var(--text-1); color: var(--text-1); }

.choice__item input:checked + span {
  background: var(--text-1);
  border-color: var(--text-1);
  color: var(--ink-000);
}

.choice__item input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --- Telefon: Vorwahl + Nummer als ein Feld --- */

.phone { display: flex; }

.phone { gap: var(--s-4); }

.phone__country {
  flex: none;
  width: auto;
  min-width: 96px;
}

.phone__number { flex: 1; min-width: 0; }

/* Der Fokusring soll ueber der Nachbarkante liegen, nicht darunter. */
.phone .field__control:focus-visible,
.phone .field__control[aria-invalid="true"] { position: relative; z-index: 1; }

/* --- Geprueft und gueltig (E-Mail, Telefon) --- */

.field__control[data-valid="true"] {
  padding-right: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7A4C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-position: right 4px center;
  background-size: 18px 18px;
  background-repeat: no-repeat;
}

/* --- Vorschlag bei Tippfehlern in der E-Mail-Adresse --- */

.field__suggest {
  margin: var(--s-2) 0 0;
  color: var(--text-2);
  font-size: var(--fs-meta);
  line-height: 1.5;
}

.field__suggest button {
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-1);
  font-weight: 600;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.field__suggest button:hover { color: var(--text-3); }

.field__hint {
  display: block;
  margin-top: var(--s-2);
  color: var(--text-3);
  font-size: var(--fs-meta);
  line-height: 1.5;
}

.field__error:not([hidden]) {
  display: block;
  margin-top: var(--s-2);
  color: var(--error);
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: 1.5;
}

/* --- Checkbox --- */

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: 44px;
  cursor: pointer;
}

.check input {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  appearance: none;
  background: transparent;
  border: 1px solid var(--text-1);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.check input:checked { background: var(--accent-600); border-color: var(--accent-600); }

.check input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: 2px solid var(--on-accent);
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}

.check input[aria-invalid="true"] { border-color: var(--error); }

.check__text {
  color: var(--text-2);
  font-size: var(--fs-meta);
  line-height: 1.5;
}

.check__text a { color: var(--text-1); text-decoration-color: var(--line-color-strong); text-underline-offset: 3px; }
.check__text a:hover { color: var(--text-3); }

/* --- Honeypot: nicht display:none, sonst erkennen Bots ihn --- */

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Status-, Erfolgs- und Hinweisboxen (4.11, 4.12) --- */

.box {
  padding: var(--s-4) var(--s-6);
  border-radius: var(--r-sm);
  border-left: 2px solid;
  font-size: var(--fs-body);
  line-height: 1.6;
}

.box p { margin: 0; max-width: none; }
.box p + p { margin-top: var(--s-2); }

.box--hint {
  background: var(--ink-200);
  border: var(--line);
  color: var(--text-2);
}

.box--success,
[data-form-status][data-tone="success"] {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

.box--error,
[data-form-status][data-tone="error"] {
  background: var(--error-bg);
  border-color: var(--error);
  color: var(--error);
}

/* --- Erfolgs-Panel: ersetzt das Formular in derselben Karte --- */

.form-card:has([data-form-success]:not([hidden])) { padding: 0; }

/* Unter der fixierten Leiste stehen bleiben, wenn das Panel ins Bild rollt. */
.form-card { scroll-margin-top: calc(var(--nav-h) + var(--s-6)); }

.form-success:not([hidden]) {
  display: grid;
  gap: var(--s-10);
  padding: var(--s-8) 0 0;
}

.form-success:focus { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  .form-success:not([hidden]) { animation: success-in var(--dur-slow) var(--ease-soft) both; }
  .form-success:not([hidden]) .form-success__icon { animation: success-pop var(--dur-slow) var(--ease-out) var(--dur-line) both; }
}

@keyframes success-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes success-pop {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: none; }
}

.form-success__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-6);
  background: transparent;
  border: 1px solid var(--text-1);
  border-radius: 50%;
  color: var(--text-1);
}

.form-success__title {
  margin: 0 0 var(--s-4);
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.1;
  text-transform: uppercase;
}

.form-success__text { margin: 0; max-width: 44ch; color: var(--text-2); }

.form-success__note {
  margin: var(--s-4) 0 0;
  color: var(--text-3);
  font-size: var(--fs-meta);
}

.form-success__steps-title {
  margin: 0 0 var(--s-2);
  color: var(--text-1);
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: 1.3;
}

.form-success__steps { margin: 0; padding: 0; list-style: none; }

.form-success__steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s-3);
  padding-block: var(--s-4);
  border-top: var(--line);
  color: var(--text-2);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

.form-success__steps li:last-child { border-bottom: var(--line); }

.form-success__steps strong {
  display: block;
  color: var(--text-1);
  font-weight: 500;
  font-size: var(--fs-body);
}

.form-success__num {
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
}

@container (min-width: 720px) {
  .form-success:not([hidden]) {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: var(--s-16);
    padding: var(--s-12) 0 0;
  }
}

/* ========================================================== 4.15 Footer */

.footer {
  background: var(--ink-900);
  color: var(--text-2);
  padding-block: var(--s-20) var(--s-12);
}

.footer__grid { display: grid; gap: var(--s-12); }

.footer__brand img { display: block; height: 28px; width: auto; margin-bottom: var(--s-6); }
.footer__brand p { color: var(--text-2); max-width: 34ch; }

.footer__title {
  margin: 0 0 var(--s-4);
  color: var(--text-3);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-nav);
  line-height: 1.3;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.footer__list { list-style: none; display: grid; gap: var(--s-2); }

.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.footer__list a:hover,
.footer__list a:focus-visible { color: var(--text-1); border-bottom-color: currentColor; }

.footer__label { display: block; color: var(--text-3); font-size: var(--fs-meta); }

.footer__bottom {
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: var(--line);
  color: var(--text-3);
  font-size: var(--fs-meta);
}

.footer__bottom p { margin: 0; max-width: none; }

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
}

@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 4fr 3fr 2fr 3fr; }
}

/* Schmale Desktops (1024-1279 px): mit dem groesseren Logo blieben nur
   24 px zwischen Logo und Menue - Links etwas enger setzen. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .nav__links { gap: var(--s-5); }
  .nav__link { letter-spacing: .18em; }
  .nav .nav__cta { margin-left: var(--s-6); }
}