/* ============================================================
   EGH Gebaeudeservice / 10 - UNTERSEITEN

   Die Leistungsseiten teilen Tokens, Basis und Kopfzeile mit
   der Startseite. Sie sind aber keine Vorstellung, sondern die
   Antwort auf eine Suchanfrage: Wer "Treppenhausreinigung
   Hameln" gesucht hat, will in zwei Sekunden lesen, ob er hier
   richtig ist. Deshalb schmalere Spalte, mehr Fliesstext,
   weniger Inszenierung.
   ============================================================ */

/* --- Kopf der Seite ---------------------------------------- */
.pkopf {
  padding: clamp(1.5rem, 3vw, 2.75rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  border-bottom: var(--hair) solid var(--regel);
  background: var(--flaeche);
}
.pkopf__innen { max-width: var(--maxw); margin-inline: auto; }

.krumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--auf-grund-2);
  margin-bottom: var(--stack-3);
}
.krumen a { color: var(--auf-grund-2); border-bottom: var(--hair) solid var(--regel-satt); }
@media (hover: hover) and (pointer: fine) { .krumen a:hover { color: var(--gold); border-color: var(--gold); } }
.krumen i { font-style: normal; opacity: 0.4; }
.krumen span[aria-current] { color: var(--auf-grund); }

.pkopf__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .pkopf__raster { grid-template-columns: minmax(0, 1fr); } }

.pkopf h1 { margin-bottom: var(--stack-3); }
.pkopf__lede { margin-bottom: var(--stack-4); max-width: 46ch; }
.pkopf__tasten { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pkopf__bild { aspect-ratio: 4 / 3; }

/* --- Rumpf -------------------------------------------------- */
.seite { max-width: var(--maxw); margin-inline: auto; padding: var(--sec-y) var(--gutter); }
.seite--schmal { max-width: 52rem; }

.seite__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
@media (max-width: 960px) { .seite__raster { grid-template-columns: minmax(0, 1fr); } }

.seite h2 {
  font-family: var(--font-kopf);
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--track-lg);
  color: var(--auf-grund);
  text-wrap: balance;
  margin: var(--stack-5) 0 var(--stack-2);
}
.seite > *:first-child, .seite__text > *:first-child { margin-top: 0; }
.seite h3 {
  font-family: var(--font-kopf);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--auf-grund);
  margin: var(--stack-3) 0 var(--stack-1);
}
.seite p, .seite li { font-size: var(--t-body); line-height: var(--lead-body); color: var(--auf-grund-2); }
.seite p { margin: 0 0 var(--stack-2); max-width: 68ch; }
.seite b, .seite strong { color: var(--auf-grund); font-weight: 600; }
.seite a:not(.knopf):not(.karte):not(.pfeil-link) { color: var(--auf-grund); border-bottom: var(--hair) solid var(--gold); }
@media (hover: hover) and (pointer: fine) { .seite a:not(.knopf):not(.karte):not(.pfeil-link):hover { color: var(--gold); } }

/* Aufzaehlung mit Haken statt Punkt: Was hier steht, ist eine
   Leistungszusage, kein Stichwort. */
.haken { margin: 0 0 var(--stack-3); max-width: 64ch; }
.haken li { position: relative; padding-left: 1.9rem; margin-bottom: 0.75rem; }
.haken li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 0.72rem; height: 0.36rem;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* Merksatz: das eine, was haengen bleiben soll. */
.merk {
  border-left: 3px solid var(--gold);
  background: var(--flaeche);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  padding: var(--stack-3);
  margin: var(--stack-4) 0;
  max-width: 64ch;
}
.merk p:last-child { margin-bottom: 0; }

/* --- Beiwagen: Preis, Kontakt, verwandte Leistungen --------- */
.beiwagen { position: sticky; top: 88px; display: grid; gap: var(--stack-2); }
.beiwagen__block {
  background: var(--flaeche);
  border: var(--hair) solid var(--regel);
  border-radius: var(--r-2);
  padding: var(--stack-3);
}
.beiwagen__block h2 {
  margin: 0 0 var(--stack-2);
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
}
.beiwagen .beiwagen__preis {
  font-family: var(--font-kopf);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.8vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}
.beiwagen .beiwagen__preis small {
  display: block;
  font-size: 0.32em;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--auf-grund-2);
  margin-top: 0.6rem;
}
.beiwagen__block p { font-size: var(--t-sm); margin-bottom: var(--stack-2); color: var(--auf-grund-2); }
.beiwagen__block .knopf { width: 100%; }
.beiwagen__block li { margin-bottom: 0.55rem; }
.beiwagen__block li a { font-family: var(--font-kopf); font-size: var(--t-sm); color: var(--auf-grund-2); }
@media (hover: hover) and (pointer: fine) { .beiwagen__block li a:hover { color: var(--gold); } }
@media (max-width: 960px) { .beiwagen { position: static; } }

/* --- Kartenraster fuer die Leistungsuebersicht -------------- */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
  margin: var(--stack-3) 0 var(--stack-4);
}
.karte__nr {
  font-family: var(--font-kopf);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  color: var(--gold);
  display: block;
  margin-bottom: 0.55rem;
}
.karte b { display: block; font-family: var(--font-kopf); font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: var(--auf-grund); margin-bottom: 0.4rem; hyphens: auto; }
.karte > span:not(.karte__nr):not(.karte__mehr) { display: block; font-size: var(--t-sm); line-height: 1.6; color: var(--auf-grund-2); }
.karte__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--stack-2);
  font-family: var(--font-kopf);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--gold);
}

/* --- Abschluss jeder Unterseite ---------------------------- */
.pschluss {
  border: var(--hair) solid var(--regel);
  background: var(--flaeche);
  border-radius: var(--r-2);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  margin-top: var(--stack-5);
  display: grid;
  gap: var(--stack-2);
  justify-items: start;
}
.pschluss h2 { margin: 0; max-width: 22ch; }
.pschluss p { margin: 0; max-width: 54ch; }
.pschluss__tasten { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--stack-2); }

/* --- Rechtstexte -------------------------------------------- */
.recht { max-width: 48rem; }
.recht h1 { font-size: var(--t-xl); }
.recht h2 { font-size: var(--t-md); margin-top: var(--stack-4); }
.recht h3 { font-size: 1.05rem; margin-top: var(--stack-3); }
.recht p, .recht li { font-size: 1.0625rem; }
.recht ul { margin: 0 0 var(--stack-2); padding-left: 1.15rem; list-style: disc; }
.recht li { margin-bottom: 0.45rem; }
.recht li::marker { color: var(--gold); }

/* Die Nachbarorte auf einer Standortseite. Als Zeile gesetzt,
   nicht als Liste: Es sind Hinweise, keine Gliederung. */
.orte-nah { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; max-width: 62ch; }
.orte-nah a {
  font-family: var(--font-kopf);
  font-size: var(--t-sm);
  color: var(--auf-grund-2);
  border-bottom: var(--hair) solid var(--regel-satt);
  transition: color var(--d-schnell) var(--e-weich), border-color var(--d-schnell) var(--e-weich);
}
@media (hover: hover) and (pointer: fine) {
  .orte-nah a:hover { color: var(--gold); border-bottom-color: var(--gold); }
}