@charset "utf-8";

/* ==========================================================================
   Lidstein — Startseite.
   Richtung: „Entrée": Nachtschwarz als Bühne für das Wappen. Gold, Blau,
   Rot und Grün kommen ausschließlich aus dem Wappen selbst. Serif-Display
   (Cormorant Garamond) greift die gravierte Schrift des Wappenbands auf.
   Setzt base.css voraus: Schriften, Tokens, Leiste, Fußzeile und Knöpfe
   stehen dort. Hier nur, was allein die Startseite braucht.
   ========================================================================== */

/* --- Entrée (Hero) -------------------------------------------------------- */

.entree {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 96px 20px 64px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.entree::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(ellipse 46% 38% at 50% 38%, rgba(201, 164, 79, 0.16), transparent 68%),
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(201, 164, 79, 0.055), transparent 74%);
}

.entree-inhalt {
  max-width: 780px;
}

.wappen {
  width: clamp(190px, 34vmin, 330px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 22px 60px rgba(0, 0, 0, 0.55));
}

.entree-eyebrow {
  margin: 34px 0 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.entree h1 {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-indent: 0.18em; /* gleicht das Letterspacing der letzten Glyphe aus */
}

.entree-linie {
  width: 72px;
  height: 1px;
  margin: 26px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border: 0;
}

.entree-claim {
  max-width: 56ch;
  margin: 0 auto;
  font-size: var(--t-md);
  color: var(--elfenbein-2);
}

.entree-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.knopf svg {
  flex: none;
}

/* Im Fluss statt absolut: kann so nie mit den Aktions-Knöpfen kollidieren. */
.entree-hinweis {
  display: block;
  width: fit-content;
  margin: clamp(40px, 7vh, 72px) auto 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--elfenbein-3);
  text-decoration: none;
}

.entree-hinweis::after {
  content: "";
  display: block;
  width: 1px;
  height: 26px;
  margin: 8px auto 0;
  background: linear-gradient(180deg, var(--gold), transparent);
}

/* Auftritt-Sequenz */
/* Die Startwerte der Animationen dürfen nur greifen, wenn JavaScript sie auch
   wieder aufheben kann. Ohne `scripting: enabled` stünden alle Abschnitte
   dauerhaft auf `opacity: 0`. Ältere Browser kennen die Abfrage nicht, lassen
   den ganzen Block aus — und zeigen den Inhalt, was der sichere Ausgang ist. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {

  .auftritt {
    opacity: 0;
    translate: 0 14px;
    animation: auftreten 900ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
  }

  .wappen.auftritt {
    translate: 0 0;
    scale: 0.94;
    animation-name: wappnen;
    animation-duration: 1300ms;
  }

  .auftritt-2 { animation-delay: 550ms; }
  .auftritt-3 { animation-delay: 750ms; }
  .auftritt-4 { animation-delay: 950ms; }
  .auftritt-5 { animation-delay: 1200ms; }

  @keyframes auftreten {
    to { opacity: 1; translate: 0 0; }
  }

  @keyframes wappnen {
    to { opacity: 1; scale: 1; }
  }

  .zeigen {
    opacity: 0;
    translate: 0 22px;
    transition: opacity 650ms ease, translate 650ms cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .zeigen.ist-sichtbar {
    opacity: 1;
    translate: 0 0;
  }

}

/* --- Abschnitte ----------------------------------------------------------- */

.abschnitt {
  padding: clamp(72px, 10vw, 120px) 0;
}

.abschnitt h2 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--serif);
  font-size: var(--t-3xl);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}

.abschnitt-kopf {
  margin-bottom: clamp(34px, 5vw, 54px);
}

.abschnitt-kopf p:not(.kicker) {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--elfenbein-2);
}

/* --- Leistungen ------------------------------------------------------------ */

.leistungen-gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.leistung {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 26px;
  background: var(--nacht-hoch);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--r-gross);
}

.leistung h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.12;
}

.leistung p {
  margin: 0;
  color: var(--elfenbein-2);
  font-size: var(--t-base);
}

.leistung a {
  margin-top: auto;
  padding-top: 20px;
  width: fit-content;
  color: var(--gold-hell);
  font-weight: 700;
  font-size: var(--t-sm);
  text-decoration: none;
}

.leistung a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Drei Maßnahmenpakete -------------------------------------------------- */

.pakete {
  background:
    linear-gradient(180deg, rgba(201, 164, 79, 0.05), transparent 30%),
    var(--nacht);
  border-block: 1px solid var(--linie-dunkel);
}

.pakete-gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--r-gross);
  overflow: hidden;
}

.paket {
  padding: 30px 28px 34px;
  background: var(--nacht-hoch);
}

.paket + .paket {
  border-left: 1px solid var(--linie-dunkel);
}

.paket-nr {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-2xl);
  color: var(--gold);
}

.paket h3 {
  margin: 8px 0 12px;
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: 700;
}

.paket p {
  margin: 0;
  color: var(--elfenbein-2);
  font-size: var(--t-base);
}

.pakete-fuss {
  margin: 26px 0 0;
  color: var(--elfenbein-3);
  font-size: var(--t-sm);
}

.pakete-fuss a {
  color: var(--gold-hell);
}

/* --- Gewerke-Register ------------------------------------------------------ */

.register-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  list-style: none;
  background: var(--linie-dunkel);
  border-radius: var(--r-gross);
  overflow: hidden;
}

.register-liste li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 18px;
  background: var(--nacht);
  font-size: var(--t-sm);
}

.register-liste .nr {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--gold);
}

/* --- Innendesign ----------------------------------------------------------- */

.design {
  background: var(--nacht-hoch);
  border-block: 1px solid var(--linie-dunkel);
}

.design-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.design-einleitung {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--elfenbein-2);
}

.design-zitat {
  margin: 26px 0 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.4;
}

.design-zitat footer {
  margin-top: 10px;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--t-sm);
  color: var(--elfenbein-3);
}

.design-punkte {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie-dunkel);
}

.design-punkte li {
  padding: 16px 4px;
  border-bottom: 1px solid var(--linie-dunkel);
}

.design-punkte b {
  display: block;
  margin-bottom: 3px;
}

.design-punkte span {
  color: var(--elfenbein-2);
  font-size: var(--t-sm);
}

/* --- Ratgeber-Teaser -------------------------------------------------------- */

.ratgeber-gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.ratgeber-karte {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--nacht-hoch);
  border: 1px solid var(--linie-dunkel);
  border-top: 2px solid var(--gold);
  border-radius: var(--r-gross);
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease;
}

.ratgeber-karte:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}

.ratgeber-karte h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.15;
}

.ratgeber-karte p {
  margin: 0 0 16px;
  color: var(--elfenbein-2);
  font-size: var(--t-sm);
}

.ratgeber-karte span {
  margin-top: auto;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--gold-hell);
}

/* --- FAQ -------------------------------------------------------------------- */

.faq-liste {
  display: grid;
  gap: 10px;
  max-width: 820px;
}

.faq-liste details {
  background: var(--nacht-hoch);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--r-gross);
}

.faq-liste summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 700;
}

.faq-liste details p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--elfenbein-2);
}

/* --- Kontakt ----------------------------------------------------------------- */

.kontakt {
  background:
    radial-gradient(ellipse 60% 60% at 85% 10%, rgba(30, 91, 63, 0.28), transparent 60%),
    var(--nacht-hoch);
  border-top: 1px solid var(--linie-dunkel);
}

.kontakt-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.kontakt-daten {
  display: grid;
  gap: 0;
  margin: 26px 0 0;
  border-top: 1px solid var(--linie-dunkel);
}

.kontakt-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  padding: 15px 4px;
  border-bottom: 1px solid var(--linie-dunkel);
}

.kontakt-zeile dt {
  min-width: 92px;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--elfenbein-3);
}

.kontakt-zeile dd {
  margin: 0;
  font-weight: 600;
}

.kontakt-zeile a {
  color: var(--elfenbein);
  text-decoration: none;
}

.kontakt-zeile a:hover {
  color: var(--gold-hell);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.kontakt-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.qr-tafel {
  padding: 24px;
  background: var(--nacht);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--r-gross);
  text-align: center;
}

.qr-tafel h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: var(--t-lg);
  font-weight: 700;
}

.qr-tafel > p {
  margin: 0 0 18px;
  color: var(--elfenbein-2);
  font-size: var(--t-sm);
}

.qr-rahmen {
  display: block;
  width: min(210px, 60vw);
  margin-inline: auto;
  padding: 12px;
  background: #fff;
  border-radius: var(--r-gross);
}

.qr-rahmen img {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.qr-hinweis {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  color: var(--elfenbein-3);
}

.fussbereich .marke img {
  width: 46px;
}

.fussbereich address {
  margin-top: 14px;
  font-style: normal;
  line-height: 1.7;
}

.fussbereich a {
  color: inherit;
}

.fussbereich a:hover {
  color: var(--gold-hell);
}

.fussbereich nav {
  display: grid;
  gap: 8px;
}

.fussbereich nav a {
  text-decoration: none;
}

/* --- Mobile Kontaktleiste ------------------------------------------------------ */


/* --- Responsiv ----------------------------------------------------------------- */

@media (max-width: 960px) {

  .leiste-nav.ist-offen {
    display: flex;
  }

  .leiste-nav a:last-child {
    border-bottom: 0;
  }

  .leistungen-gitter,
  .pakete-gitter,
  .ratgeber-gitter {
    grid-template-columns: 1fr;
  }

  .paket + .paket {
    border-left: 0;
    border-top: 1px solid var(--linie-dunkel);
  }

  .design-gitter,
  .kontakt-gitter {
    grid-template-columns: 1fr;
  }

}
@media (max-width: 640px) {

  .entree {
    padding-top: 84px;
  }

  .entree-aktionen .knopf {
    width: 100%;
  }





}
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }

  .auftritt,
  .zeigen {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
  }

}


/* --- Kontaktformular (mailto — keine Serverübertragung) ------------------- */

.kontakt-formular {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: clamp(22px, 4vw, 34px);
  background: var(--nacht);
  border: 1px solid var(--linie-dunkel);
  border-radius: 10px;
}

.kontakt-formular h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
}

.kontakt-formular > p {
  margin: 0 0 20px;
  color: var(--elfenbein-2);
  font-size: var(--t-sm);
}

.formular-gitter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.feld {
  display: grid;
  gap: 6px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--elfenbein-2);
}

.feld input,
.feld select,
.feld textarea {
  min-height: 48px;
  padding: 12px 14px;
  color: var(--elfenbein);
  background: var(--nacht-hoch);
  border: 1px solid var(--linie-dunkel);
  border-radius: 6px;
  font: inherit;
}

.feld textarea {
  min-height: 130px;
  resize: vertical;
}

.feld-breit {
  grid-column: 1 / -1;
}

.formular-fuss {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 4px;
}

.formular-hinweis {
  margin: 0;
  max-width: 52ch;
  font-size: var(--t-xs);
  color: var(--elfenbein-3);
}

@media (max-width: 720px) {
  .formular-gitter {
    grid-template-columns: 1fr;
  }

  .formular-fuss .knopf {
    width: 100%;
  }
}