/* ============================================================
   EGH Gebaeudeservice / 03 - LAYOUT
   Sektionen, Raster, Knoepfe, Karten, Kaestchen.
   ============================================================ */

.sektion {
  position: relative;
  padding-block: var(--sec-y);
  padding-inline: var(--gutter);
  background: var(--grund);
  color: var(--auf-grund);
}
.sektion--gross { padding-block: var(--sec-y-lg); }
.sektion--knapp { padding-block: clamp(2.5rem, 5vw, 4rem); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; }

/* Ein Kopf fuer jede Sektion: Label, Ueberschrift, ein Satz.
   Gestapelt, nicht zweispaltig. Ein grosser Titel links und
   ein kleiner Erklaertext rechts oben in der Ecke ist das
   Muster, an dem man Vorlagen erkennt. */
.skopf { max-width: 52rem; margin-bottom: var(--stack-4); }
.skopf .label { margin-bottom: var(--stack-2); }
.skopf p { margin-top: var(--stack-2); color: var(--auf-grund-2); max-width: 58ch; }

/* ------------------------------------------------------------
   KNOEPFE

   Der Hauptknopf ist eine gefuellte Marineflaeche mit weisser
   Schrift, 17,6 zu 1 Kontrast. Gold waere die Markenfarbe,
   aber Gold auf Papier traegt nicht: Der Knopf, der diese
   Seite bezahlt, darf nicht der blasseste sein. Gold bleibt
   Linie und Akzent.

   Auf marineblauem Grund dreht sich das Verhaeltnis um: dort
   ist Gold die hellste Flaeche und traegt den Hauptknopf.
   ------------------------------------------------------------ */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0.9rem 1.5rem;
  border: var(--hair) solid transparent;
  border-radius: var(--r-1);
  font-family: var(--font-kopf);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-align: center;
  transition: background-color var(--d-schnell) var(--e-weich),
              color var(--d-schnell) var(--e-weich),
              border-color var(--d-schnell) var(--e-weich),
              box-shadow var(--d-schnell) var(--e-weich),
              transform 0.1s var(--e-weich);
}
.knopf svg { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--d-mittel) var(--e-aus); }
.knopf:active { transform: scale(0.985); }

.knopf--voll {
  background: var(--gold);
  color: var(--auf-gold);
  box-shadow: var(--schatten);
}
@media (hover: hover) and (pointer: fine) {
  .knopf--voll:hover { background: var(--gold-hell); box-shadow: var(--schatten-hoch); }
  .knopf--voll:hover svg { transform: translateX(3px); }
}

.knopf--linie {
  border-color: var(--regel-satt);
  color: var(--auf-grund);
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .knopf--linie:hover { border-color: var(--gold); background: var(--flaeche); }
  .knopf--linie:hover svg { transform: translateX(3px); }
}

/* Textlink mit Pfeil. Fuer den dritten Weg, der kein Knopf
   sein soll. Der Strich darunter waechst beim Ueberfahren. */
.pfeil-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-kopf);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--auf-grund);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--d-mittel) var(--e-aus);
}
.pfeil-link svg { width: 1em; height: 1em; transition: transform var(--d-mittel) var(--e-aus); }
@media (hover: hover) and (pointer: fine) {
  .pfeil-link:hover { background-size: 100% 2px; }
  .pfeil-link:hover svg { transform: translateX(3px); }
}

/* ------------------------------------------------------------
   KARTEN
   Weisse Flaeche, eine Haarlinie, kleiner Radius, praktisch
   kein Schatten. Beim Ueberfahren hebt sie sich einen Hauch.
   ------------------------------------------------------------ */
.karte {
  background: var(--flaeche);
  border: var(--hair) solid var(--regel);
  border-radius: var(--r-2);
  padding: clamp(1.25rem, 2.2vw, 1.85rem);
  transition: border-color var(--d-mittel) var(--e-weich),
              box-shadow var(--d-mittel) var(--e-weich),
              transform var(--d-mittel) var(--e-weich);
}
@media (hover: hover) and (pointer: fine) {
  a.karte:hover { border-color: var(--regel-satt); box-shadow: var(--schatten-hoch); transform: translateY(-2px); }
}

/* ------------------------------------------------------------
   KAESTCHEN

   Selbst gezeichnet, aber die Eingabe darunter bleibt eine
   echte Checkbox: Tastatur, Screenreader und Autofill
   funktionieren dadurch unveraendert. Steht hier, weil Planer
   und Formular es beide brauchen und keiner von beiden das
   Stylesheet des anderen laedt.
   ------------------------------------------------------------ */
.kasten {
  flex: none;
  width: 22px; height: 22px;
  border: var(--hair) solid var(--regel-satt);
  border-radius: var(--r-1);
  background: var(--feld);
  display: grid;
  place-items: center;
  transition: background-color var(--d-schnell) var(--e-weich),
              border-color var(--d-schnell) var(--e-weich);
}
.kasten::after {
  content: "";
  width: 11px; height: 6px;
  border-left: 2px solid var(--auf-gold);
  border-bottom: 2px solid var(--auf-gold);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  margin-top: -3px;
  transition: transform 0.2s var(--e-aus);
}
input:checked + .kasten { background: var(--gold); border-color: var(--gold); }
input:checked + .kasten::after { transform: rotate(-45deg) scale(1); }
input:focus-visible + .kasten { outline: 2px solid var(--gold); outline-offset: 3px; }


/* ------------------------------------------------------------
   ABSTAND BEI SPRUENGEN
   Die Kopfzeile klebt oben und ist 68 Pixel hoch. Ohne diese
   Regel landet jeder Ankersprung so, dass die Ueberschrift des
   Ziels darunter verschwindet.
   ------------------------------------------------------------ */
[id] { scroll-margin-top: 88px; }