/* Gestaltung der Inhaltsseiten nach dem Entwurf vom 27.09.2026.
   Die Ordnung kommt aus Linien, Abständen und Typografie, nicht aus
   Symbolen und abgerundeten Kacheln.

   Zwei Grüntöne statt drei: Petrol dunkel für Kopf und Abschluss,
   Petrol für Knöpfe und Verweise. Gold erscheint nur noch als Linie. */

:root {
  --petrol-dunkel: #083F4A;
  --petrol:        #0D606E;
  --gold:          #C2A14D;
  --tinte:         #0F1817;
  --grau:          #5B6A6A;
  --linie:         #DDE4E2;
  --hell:          #F5F8F8;
}

/* ---------------------------------------------------------- Kopfbereich */
.seiten-kopf {
  background: var(--petrol-dunkel);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.seiten-kopf__inhalt {
  max-width: 76rem;
  margin: 0 auto;
  padding: 72px 24px 80px;
  position: relative;
  z-index: 1;
}
.seiten-kopf__wasserzeichen {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 420px;
  opacity: 0.07;
  pointer-events: none;
}
.seiten-kopf .augenbraue { color: rgba(255,255,255,0.65); }
.seiten-kopf h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.08;
  margin: 14px 0 18px;
  color: #fff;
  overflow-wrap: break-word;
  hyphens: auto;
}
.seiten-kopf__vorspann {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  max-width: 680px;
  margin: 0;
}
.seiten-kopf .goldlinie { margin-top: 28px; }

/* ----------------------------------------------------------- Abschnitte */
.abschnitt { background: #fff; }
.abschnitt--hell { background: var(--hell); }
.abschnitt__inhalt {
  max-width: 76rem;
  margin: 0 auto;
  padding: 56px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
@media (min-width: 900px) {
  .abschnitt__inhalt {
    grid-template-columns: 23rem minmax(0, 1fr);
    gap: 56px;
    padding: 64px 24px;
  }
}
.augenbraue {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--grau);
  margin: 0;
}
.abschnitt h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.45rem, 3.2vw, 1.95rem);
  line-height: 1.22;
  color: var(--tinte);
  margin: 10px 0 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.goldlinie {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin: 16px 0 0;
}
.abschnitt__text { max-width: 680px; }
.abschnitt__text p { margin: 0 0 14px; line-height: 1.75; color: var(--tinte); }
.abschnitt__text p:last-child { margin-bottom: 0; }
.abschnitt__text a { color: var(--petrol); font-weight: 500; }

/* Hervorgehobener Satz: Linie links, keine Fläche, kein Symbol. */
.merksatz {
  border-left: 3px solid var(--petrol);
  padding: 2px 0 2px 16px;
  margin: 18px 0;
  color: var(--tinte);
}
.hinweis {
  border-left: 3px solid var(--gold);
  padding: 2px 0 2px 16px;
  margin: 18px 0;
  color: var(--grau);
  font-size: 0.93rem;
}

/* ------------------------------------------------------------- Abschluss */
.abschluss {
  background: var(--petrol-dunkel);
  color: #fff;
}
.abschluss__inhalt {
  max-width: 76rem;
  margin: 0 auto;
  padding: 56px 24px;
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 900px) {
  .abschluss__inhalt { grid-template-columns: minmax(0, 1fr) auto; padding: 64px 24px; }
}
.abschluss h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  line-height: 1.2;
  margin: 0;
  color: #fff;
}
.abschluss .goldlinie { margin: 16px 0 18px; }
.abschluss p { margin: 0; color: rgba(255,255,255,0.85); max-width: 640px; line-height: 1.7; }

/* ---------------------------------------------------------------- Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  background: var(--petrol);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.knopf:hover { background: #0a4f5a; }
.knopf--hell { background: #fff; color: var(--petrol-dunkel); }
.knopf--hell:hover { background: #eef4f2; }
.verweis { color: var(--petrol); font-weight: 600; text-decoration: none; }
.verweis:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Fußzeile */
.seiten-fuss {
  background: var(--petrol-dunkel);
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
}
.seiten-fuss__inhalt {
  max-width: 76rem;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}
.seiten-fuss strong { color: #fff; font-weight: 600; }
.seiten-fuss a { color: rgba(255,255,255,0.75); text-decoration: none; margin-left: 18px; }
.seiten-fuss a:first-child { margin-left: 0; }
.seiten-fuss a:hover { color: #fff; }

/* ==========================================================================
   Startseite, Formulare und Immobilienbewertung nach demselben Entwurf.

   Die Startseite trug bisher drei Grüntöne, Gold als Fläche, Symbole und
   abgerundete Kacheln. Hier gilt dieselbe Ordnung wie auf den Inhaltsseiten:
   zwei Grüntöne, Gold nur als Linie, Ordnung aus Linien und Abständen.
   ========================================================================== */

/* ------------------------------------------------------------- Kopfleiste */
.start-leiste {
  background: var(--petrol-dunkel);
}
.start-leiste__inhalt {
  max-width: 76rem;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.start-marke {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}
.start-marke img { width: 38px; height: 38px; display: block; }
.start-marke__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.12rem;
  letter-spacing: 0.08em;
  color: #fff;
  line-height: 1.1;
  display: block;
}
.start-marke__zusatz {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.1;
  display: block;
  margin-top: 3px;
}
.start-nav { display: none; }
/* Seit dem Untermenü braucht die Leiste 1.197 Pixel. Darunter übernimmt
   das Menü für schmale Bildschirme, sonst liefe die Zeile über. */
@media (min-width: 1220px) {
  .start-nav { display: flex; align-items: center; gap: 24px; }
}
.start-nav a {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.start-nav a:hover { color: #fff; }
.start-nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--gold);
}
.start-rechts { display: flex; align-items: center; gap: 18px; }

/* Der Umschalter bleibt .lang-pill, daran hängt das Skript. Nur die
   Fläche entfällt: drei Wörter nebeneinander, das aktive in Weiß. */
.start-leiste .lang-pill {
  background: none;
  border-radius: 0;
  padding: 0;
  gap: 10px;
}
.start-leiste .lang-pill button {
  background: none;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  border-radius: 0;
  box-shadow: none;
}
.start-leiste .lang-pill button.active {
  background: none;
  color: #fff;
  box-shadow: none;
}
.start-termin {
  display: none;
  min-height: 42px;
  align-items: center;
  padding: 0 22px;
  background: #fff;
  color: var(--petrol-dunkel);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
}
.start-termin:hover { background: #eef4f2; }
@media (min-width: 1220px) { .start-termin { display: inline-flex; } }
.start-menue {
  background: none;
  border: 0;
  color: #fff;
  padding: 4px;
  cursor: pointer;
  display: block;
}
@media (min-width: 1220px) { .start-menue { display: none; } }

/* ------------------------------------------------------------------- Kopf */
.start-kopf .seiten-kopf__inhalt { padding: 84px 24px 96px; }
.start-kopf h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); margin: 18px 0 22px; }
.start-kopf .seiten-kopf__vorspann { font-size: 1.15rem; max-width: 640px; }
.start-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.knopf--linie {
  background: none;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
}
.knopf--linie:hover { background: rgba(255,255,255,0.1); }

/* ------------------------------------------------------- Vier Leistungen */
.leistungen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 24px 72px;
}
@media (min-width: 900px) {
  .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
.leistung {
  display: block;
  text-decoration: none;
  background: #fff;
  border-top: 2px solid var(--petrol);
  padding: 26px 0 0;
}
.leistung h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--tinte);
  margin: 10px 0 12px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.leistung p {
  margin: 0 0 16px;
  line-height: 1.7;
  color: var(--grau);
  font-size: 0.95rem;
}
.leistung:hover h3 { color: var(--petrol); }

/* ------------------------------------------- Die vier Arten beim Rechner */
.rechnerarten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--linie);
  margin: 22px 0 24px;
}
@media (min-width: 720px) {
  .rechnerarten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rechnerarten span {
  padding: 14px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tinte);
  border-left: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  overflow-wrap: break-word;
  hyphens: auto;
}
.rechnerarten span:first-child { border-left: 0; padding-left: 0; }
@media (min-width: 720px) {
  .rechnerarten span { border-bottom: 0; }
}

/* ---------------------------------------------------------------- Honorar */
.honorar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: 14px 0;
  margin: 22px 0;
}
.honorar dt { font-weight: 600; color: var(--tinte); margin: 0; }
.honorar dd { font-weight: 700; color: var(--tinte); margin: 0; }

/* ------------------------------------------------------------ Zielgruppen */
.zielgruppen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--linie);
  margin-top: 26px;
}
@media (min-width: 1000px) {
  .zielgruppen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.zielgruppe {
  padding: 22px 20px 24px;
  border-left: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.zielgruppe:first-child { border-left: 0; padding-left: 0; }
@media (min-width: 1000px) {
  .zielgruppe { border-bottom: 0; }
}
.zielgruppe h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--tinte);
  margin: 0 0 6px;
}
.zielgruppe p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--grau);
  line-height: 1.5;
}

/* --------------------------------------------------------------- Über mich */
.person {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  max-width: 76rem;
  margin: 0 auto;
  padding: 64px 24px;
}
@media (min-width: 900px) {
  .person { grid-template-columns: 23rem minmax(0, 1fr); gap: 56px; }
}
.person__bild { width: 100%; display: block; }
.person__zahlen {
  display: flex;
  gap: 32px;
  border-top: 1px solid var(--linie);
  margin-top: 18px;
  padding-top: 16px;
}
.person__zahl {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  color: var(--tinte);
  display: block;
}
.person__wofuer { font-size: 0.82rem; color: var(--grau); display: block; }
.person__spruch {
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 18px;
  margin: 26px 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--tinte);
}
.merkmale { border-top: 1px solid var(--linie); margin-top: 8px; }
.merkmal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 32px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 700px) {
  .merkmal { grid-template-columns: 15rem minmax(0, 1fr); }
}
.merkmal dt { font-weight: 700; color: var(--tinte); margin: 0; }
.merkmal dd { color: var(--grau); margin: 0; }

/* ----------------------------------------------------------------- Kontakt */
.kontakt { background: var(--petrol-dunkel); color: #fff; }
.kontakt__inhalt {
  max-width: 76rem;
  margin: 0 auto;
  padding: 64px 24px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 950px) {
  .kontakt__inhalt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
}
.kontakt h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin: 10px 0 0;
  color: #fff;
}
.kontakt .augenbraue { color: rgba(255,255,255,0.6); }
.kontakt .goldlinie { margin: 18px 0 22px; }
.kontakt p { color: rgba(255,255,255,0.85); line-height: 1.7; margin: 0 0 26px; }
.kontaktzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  text-decoration: none;
}
.kontaktzeile:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.18); }
.kontaktzeile span:first-child { color: rgba(255,255,255,0.65); }
.kontaktzeile span:last-child { font-weight: 700; }
.kontaktzeile:hover span:last-child { text-decoration: underline; }

/* --------------------------------------------------------------- Formular */
.formularkarte {
  background: #fff;
  border-top: 2px solid var(--gold);
  padding: 30px 28px 32px;
  color: var(--tinte);
}
.formularkarte h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1.35rem;
  margin: 0 0 22px;
  color: var(--tinte);
}
.feldreihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
@media (min-width: 600px) {
  .feldreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.feld { margin-bottom: 18px; }
.feld > label,
.feld > .feldname {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tinte);
  margin-bottom: 6px;
}
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 0;
  background: #fff;
  font: inherit;
  font-size: 0.95rem;
  color: var(--tinte);
}
.feld textarea { min-height: 120px; resize: vertical; }
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: 2px solid var(--petrol);
  outline-offset: -2px;
  border-color: var(--petrol);
}
.formularhinweis { font-size: 0.82rem; color: var(--grau); line-height: 1.6; margin: 0 0 18px; }
.formularhinweis a { color: var(--petrol); }
.meldung { padding: 14px 16px; font-size: 0.9rem; margin-top: 16px; }
.meldung--gut { border-left: 3px solid var(--petrol); background: var(--hell); color: var(--tinte); }
.meldung--schlecht { border-left: 3px solid #a8352b; background: #fdf3f2; color: #7d2820; }

/* -------------------------------------------------------- Mobile Leiste */
.start-menueflaeche {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}
.start-menueflaeche.open { transform: translateX(0); }
.start-menueflaeche__kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--linie);
}
.start-menueflaeche a {
  display: block;
  padding: 15px 24px;
  border-bottom: 1px solid var(--linie);
  color: var(--tinte);
  text-decoration: none;
  font-weight: 600;
  min-height: 48px;
}

/* Überschrift über der vollen Breite, wenn darunter ein Raster folgt. */
.abschnitt__inhalt--breit {
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 8px;
}
@media (min-width: 900px) {
  .abschnitt__inhalt--breit { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
}
.abschnitt--hell .leistung { background: transparent; }

/* Im Textteil färbt .abschnitt__text a jeden Verweis petrol. Beim Knopf
   stünde petrol auf petrol — deshalb hier die Schriftfarbe zurückholen. */
.abschnitt__text a.knopf { color: #fff; }
.abschnitt__text a.knopf--hell { color: var(--petrol-dunkel); }
.abschnitt__text a.knopf--linie { color: #fff; }

/* .kontakt p färbt jeden Absatz im dunklen Block weiß. Die Formularkarte
   steht auf Weiß — dort muss die Schrift wieder dunkel werden. */
.kontakt .formularkarte p { color: var(--tinte); }
.kontakt .formularkarte .formularhinweis { color: var(--grau); margin: 0 0 18px; }

/* Auf schmalen Bildschirmen ist neben der Wortmarke kein Platz für den
   Zusatz; Umschalter und Menüknopf müssen in die Zeile passen. */
@media (max-width: 599px) {
  .start-marke__zusatz { display: none; }
  .start-leiste__inhalt { padding: 16px 20px; gap: 12px; }
  .start-rechts { gap: 12px; }
}

/* Das geschlossene Menü steht um die eigene Breite nach rechts versetzt.
   Ohne diese Zeile zählt der Browser das als Inhalt und die Seite ließe
   sich seitlich schieben. clip erzeugt keinen Scroll-Behälter. */
body:has(.start-menueflaeche) { overflow-x: clip; }

/* ------------------------------------------------------- Download-Liste */
.downloads { border-top: 1px solid var(--linie); margin-top: 6px; }
.download {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  gap: 4px 18px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: var(--tinte);
}
.download__art {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--grau);
}
.download__name { display: block; font-weight: 700; line-height: 1.35; }
.download__angabe { display: block; font-size: 0.85rem; color: var(--grau); line-height: 1.5; margin-top: 2px; }
.download__ziehen { color: var(--petrol); font-weight: 600; white-space: nowrap; }
.download:hover .download__ziehen { text-decoration: underline; }
@media (max-width: 599px) {
  .download { grid-template-columns: 3.2rem minmax(0, 1fr); }
  .download__ziehen { grid-column: 2; margin-top: 6px; }
}

/* Zwei Spalten aus Begriff und Erläuterung, ohne Symbole. */
.paare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 32px;
  margin: 20px 0 22px;
}
@media (min-width: 640px) {
  .paare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.paare > div { margin: 0; }
.paare dt { font-weight: 700; color: var(--tinte); }
.paare dd { margin: 3px 0 0; color: var(--grau); font-size: 0.92rem; line-height: 1.5; }

/* Auch hier färbt .abschnitt__text a sonst die ganze Zeile petrol. */
.abschnitt__text a.download { color: var(--tinte); font-weight: 400; }
.abschnitt__text a.download .download__ziehen { color: var(--petrol); }

/* Der Sprachumschalter steht auf jeder Seite in der dunklen Leiste. Die
   Grundform gehört deshalb hierher und nicht in jede einzelne Seite. */
.lang-pill { display: inline-flex; gap: 10px; align-items: center; }
.lang-pill button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
}
.lang-pill button.active { color: #fff; }

/* Trennstriche in Überschriften erst bei wirklich langen Wörtern: sonst
   stand dort „Was daraus für die Fi-nanzierung folgt". Komposita wie
   „Nutzungsdauergutachten" dürfen weiter getrennt werden. */
.seiten-kopf h1, .abschnitt h2, .leistung h3, .abschluss h2, .kontakt h2 {
  hyphenate-limit-chars: 14 6 4;
}

/* Die ganze Spalte führt auf die Seite, nicht nur das kleine „Mehr".
   Vorher ließ sich der Name anklicken, ohne dass etwas geschah. */
a.zielgruppe { display: block; text-decoration: none; color: inherit; }
a.zielgruppe:hover h3 { color: var(--petrol); }
a.zielgruppe:hover .verweis { text-decoration: underline; }

/* ---------------------------------------------------- Untermenü im Kopf
   Die Leiste zeigt „Rechner" und „Zielgruppen" als einen Punkt. Ohne
   Untermenü war die Immobilienbewertung vom Schreibtisch aus über die
   Leiste nicht erreichbar — gemeldet vom Auftraggeber. */
.start-nav__gruppe { position: relative; display: flex; align-items: center; }
.start-nav__aufklapp::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-left: 7px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}
.start-untermenue {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 17rem;
  background: #fff;
  border: 1px solid var(--linie);
  padding: 6px 0 8px;
  box-shadow: 0 14px 28px rgba(8, 63, 74, 0.14);
  z-index: 70;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}
.start-nav__gruppe:hover .start-untermenue,
.start-nav__gruppe:focus-within .start-untermenue { opacity: 1; visibility: visible; }
.start-nav .start-untermenue a {
  display: block;
  padding: 9px 18px;
  color: var(--tinte);
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 0;
}
.start-nav .start-untermenue a:hover { background: var(--hell); color: var(--petrol); }
.start-untermenue__titel {
  margin: 0;
  padding: 10px 18px 5px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--grau);
}
.start-untermenue__titel ~ .start-untermenue__titel {
  border-top: 1px solid var(--linie);
  margin-top: 7px;
  padding-top: 12px;
}

/* Einstieg mit Knopf und Endpreis nebeneinander (Entwurf Seite 6). */
.kopf-anfrage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 28px;
}
.kopf-anfrage__preis { margin: 0; color: rgba(255,255,255,0.85); font-size: 0.95rem; }

/* Aufzählung ohne Häkchen: der Entwurf verlangt Linien statt Symbole. */
.punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 680px;
  border-top: 1px solid var(--linie);
}
.punkte li {
  padding: 11px 0;
  border-bottom: 1px solid var(--linie);
  line-height: 1.6;
  color: var(--tinte);
}

/* ------------------------------------------------- Rechnungen, Tabellen
   Entwurf Seite 6: „als Tabelle mit Doppellinie" — keine Kachel, keine
   Fläche, die Summe steht unter einer doppelten Linie. */
.rechnung {
  width: 100%;
  max-width: 36rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 4px 0 18px;
}
.rechnung td { padding: 11px 0; border-bottom: 1px solid var(--linie); color: var(--grau); }
.rechnung tr:first-child td { border-top: 1px solid var(--linie); }
.rechnung td + td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--tinte);
  white-space: nowrap;
  padding-left: 24px;
}
.rechnung tr.summe td {
  border-top: 3px double var(--tinte);
  border-bottom: 0;
  padding-top: 13px;
  font-weight: 700;
  color: var(--tinte);
}
.rechnung .klein { font-weight: 400; color: var(--grau); }

/* ------------------------------------------------------------- Ablauf
   Vier Schritte als Zeilen mit Linien, nicht als abgerundete Kacheln. */
.schritte { list-style: none; margin: 4px 0 0; padding: 0; max-width: 680px; border-top: 1px solid var(--linie); }
.schritte li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 4px 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linie);
}
.schritte__zahl {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  padding-top: 3px;
}
.schritte h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--tinte); }
.schritte p { margin: 0; font-size: 0.93rem; line-height: 1.65; color: var(--grau); }

/* Der KWG-Hinweis gehört in den Fuß, nicht in die Seitenmitte. */
.seiten-fuss__hinweis {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 24px 30px;
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
}

/* Menüzeichen aus Linien statt aus einer Symbolschrift. Solange es eine
   Schrift war, stand bei langsamer Verbindung der Name da („menu"), und
   die Seite lud dafür über ein Megabyte Schriftdaten. */
.menuezeichen {
  position: relative;
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
}
.menuezeichen::before,
.menuezeichen::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
}
.menuezeichen::before { top: -7px; }
.menuezeichen::after  { top: 7px; }
.menuezeichen--zu { background: transparent; }
.menuezeichen--zu::before { top: 0; transform: rotate(45deg); }
.menuezeichen--zu::after  { top: 0; transform: rotate(-45deg); }