/**
* Misera planen + beraten — projektspezifische Ergaenzungen
* Wird NACH main.css geladen und ueberschreibt gezielt einzelne Template-Regeln.
* Grundlage bleibt das Bootstrap-Template "Visible" (BootstrapMade).
*/

/*--------------------------------------------------------------
# Kopfbereich: mitlaufend, ueber dem Hero transparent
--------------------------------------------------------------*/
.header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.scrolled .header {
  background-color: var(--background-color);
}

.header .logo img {
  max-height: 40px;
  width: auto;
  margin-right: 0;
}

/*--------------------------------------------------------------
# Startansicht: Hero beruecksichtigt die Hoehe des Kopfbereichs
--------------------------------------------------------------*/
/* Der Kopfbereich ist "sticky-top" und belegt damit Platz im normalen Fluss.
   Seine Hoehe ist konstant: 15px Polsterung + 40px Logo + 15px Polsterung.
   Das Template gibt dem Hero jedoch min-height: 100vh, ohne den Kopfbereich
   abzuziehen — Kopf + Hero ergaben dadurch immer 100vh + 70px und liefen um
   genau die Kopfhoehe ueber den Bildschirmrand hinaus. */
:root {
  --header-height: 70px;
}

/* Zweiter Punkt: Das Template zentriert den Hero-Inhalt senkrecht in seiner Box
   (align-items: center). Da die Box deutlich hoeher ist als der Inhalt, entstand
   dadurch der grosse Leerraum oberhalb von "Herzlich Willkommen bei". Der Inhalt
   beginnt jetzt direkt unter dem Kopfbereich. Die Ausrichtung der beiden Spalten
   zueinander bleibt unveraendert (.row.align-items-center im Markup). */
.hero {
  min-height: calc(100vh - var(--header-height));
  align-items: flex-start;
}

/* svh statt vh: auf Mobilgeraeten zaehlt vh die eingeblendete Adressleiste nicht
   mit, wodurch der Hero dort zusaetzlich ueberlaeuft. */
@supports (height: 100svh) {
  .hero {
    min-height: calc(100svh - var(--header-height));
  }
}

/*--------------------------------------------------------------
# Navigation
# Das Off-Canvas-/Hamburger-Menue des Templates bleibt auf allen
# Bildschirmbreiten unveraendert (siehe ENTSCHEIDUNG 019).
# Hier stehen daher nur Ergaenzungen, die das Template-Verhalten nicht aendern.
--------------------------------------------------------------*/
@media (max-width: 991px) {
  .mobile-nav-active .navmenu {
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  }
}

/* Sichtbarer Fokus fuer Tastaturbedienung */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  padding: 12px 20px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero .hero-logo {
  display: block;
  width: 340px;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.25rem;
}

@media (max-width: 991px) {
  .hero .hero-logo {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 480px) {
  .hero .hero-logo {
    width: 260px;
  }
}

.hero .hero-claim {
  display: block;
  font-family: var(--heading-font);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--heading-color);
}

@media (max-width: 767px) {
  .hero .hero-claim {
    font-size: 1.4rem;
  }
}

/* Ruhiger Bildauftritt statt gekippter 3D-Ansicht */
.hero .hero-visual .image-wrapper {
  transform: none;
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(20, 24, 29, 0.35);
}

.hero .hero-visual .image-wrapper:hover {
  transform: none;
}

.hero-quote {
  margin: 0 0 2.5rem;
  padding-left: 1.5rem;
  border-left: 3px solid var(--accent-color);
}

@media (max-width: 991px) {
  .hero-quote {
    padding-left: 0;
    padding-top: 1.25rem;
    border-left: 0;
    border-top: 3px solid var(--accent-color);
    display: inline-block;
    text-align: left;
  }
}

.hero-quote blockquote {
  margin: 0;
  font-family: var(--heading-font);
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--heading-color);
}

.hero-quote blockquote p {
  margin-bottom: 0.5rem;
}

.hero-quote figcaption {
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

/*--------------------------------------------------------------
# Schaltflaechen ausserhalb des Hero
--------------------------------------------------------------*/
.misera-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--accent-color);
  border-radius: 50px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  font-weight: 600;
  transition: all 0.3s ease;
}

.misera-btn i {
  margin-left: 8px;
  font-size: 0.85rem;
}

.misera-btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000000 15%);
  border-color: color-mix(in srgb, var(--accent-color), #000000 15%);
  color: var(--contrast-color);
}

.misera-btn-outline {
  background-color: transparent;
  color: var(--accent-color);
}

.misera-btn-outline:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Unternehmen
--------------------------------------------------------------*/
.about .about-content .closing-line {
  margin-top: 1.75rem;
  font-family: var(--heading-font);
  font-size: 1.5rem;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Fachbereiche: kompakte Kacheln ohne Beschreibungstext
--------------------------------------------------------------*/
.fachbereiche .service-card .service-card-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
}

.fachbereiche .service-card .service-card-inner .service-icon {
  flex-shrink: 0;
  margin-bottom: 0;
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
}

/* Lange deutsche Komposita (z. B. "Wasserversorgungsplanung") muessen in der
   schmalen Kachel umbrechen duerfen, sonst laeuft der Text aus der Karte. */
.fachbereiche .service-card .service-card-inner h3 {
  margin-bottom: 0;
  min-width: 0;
  font-size: 1.05rem;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Hover-Anhebung nur fuer Karten, die tatsaechlich eine Detailfunktion haben.
   Karten ohne hinterlegten Inhalt duerfen keine Klickbarkeit suggerieren -
   sie bleiben aber vollwertiger, nicht ausgegrauter Teil der Uebersicht. */
.fachbereiche .service-card .service-card-inner.is-interaktiv:hover {
  transform: translateY(-4px);
}

/* Template-Hover (main.css) fuer statische Karten zurueck auf den Grundzustand */
.fachbereiche .service-card .service-card-inner:not(.is-interaktiv):hover {
  transform: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.fachbereiche .service-card .service-card-inner:not(.is-interaktiv):hover .service-icon {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
}

/* Aufklapp-Schalter: sitzt in der h3, wird per CSS ueber die ganze Kachel
   gestreckt. So bleibt die Ueberschriftenstruktur semantisch korrekt und die
   komplette Karte trotzdem anklickbar. */
.fachbereiche .service-card-inner .fachbereich-toggle {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.fachbereiche .service-card-inner .fachbereich-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
}

.fachbereiche .service-card-inner .fachbereich-toggle:focus-visible {
  outline: none;
}

.fachbereiche .service-card-inner .fachbereich-toggle:focus-visible::after {
  outline: 3px solid var(--accent-color);
  outline-offset: 3px;
}

.fachbereiche .service-card-inner.is-aktiv {
  border-color: var(--accent-color);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.fachbereiche .service-card-inner.is-aktiv .service-icon {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

/* Gemeinsamer Detailbereich: wird per JS hinter die letzte Karte der
   jeweiligen visuellen Zeile einsortiert. */
.fachbereich-detail {
  scroll-margin-top: 100px;
}

.fachbereich-detail-inhalt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  background-color: var(--surface-color);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-top: 3px solid var(--accent-color);
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.fachbereich-detail-text h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.fachbereich-detail-text p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.7;
}

.fachbereich-detail-text p:last-child {
  margin-bottom: 0;
}

.fachbereich-detail-bild {
  margin: 0;
}

.fachbereich-detail-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Mobil: Text zuerst, Bild darunter (ergibt sich aus der HTML-Reihenfolge) */
@media (max-width: 991px) {
  .fachbereich-detail-inhalt {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
}

/*--------------------------------------------------------------
# Karriere
--------------------------------------------------------------*/
.karriere .service-card .service-card-inner {
  display: flex;
  flex-direction: column;
}

.karriere .service-card .service-card-inner:hover {
  transform: none;
}

.karriere .service-card .service-card-inner .job-actions {
  margin-top: auto;
  padding-top: 1.5rem;
}

.karriere .service-card .service-card-inner .job-call {
  font-weight: 600;
  color: var(--heading-color);
}

/*--------------------------------------------------------------
# Kontakt (ohne Formular und ohne Kartendienst)
--------------------------------------------------------------*/
.contact .contact-info-panel {
  background: linear-gradient(145deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000000 35%));
}

.contact .info-card a {
  color: var(--contrast-color);
}

.contact .info-card a:hover {
  color: var(--contrast-color);
  text-decoration: underline;
}

.contact .contact-cta {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 20px;
  padding: 35px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact .contact-cta .company address {
  font-style: normal;
  margin-bottom: 0;
  line-height: 1.9;
}

.contact .contact-cta .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/*--------------------------------------------------------------
# Fussbereich
--------------------------------------------------------------*/
.footer .footer-about .logo img {
  max-height: 46px;
  width: auto;
}

.footer .footer-contact a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.footer .footer-contact a:hover {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Rechtstext-Unterseiten
--------------------------------------------------------------*/
.legal-content h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 1.15rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.legal-content p,
.legal-content li {
  line-height: 1.8;
}

.legal-content dl {
  margin-bottom: 0;
}

.legal-content dt {
  font-weight: 600;
  color: var(--heading-color);
}

.legal-content dd {
  margin-bottom: 1rem;
  margin-left: 0;
}

.legal-hinweis {
  border-left: 3px solid var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
}

.legal-hinweis p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Bewegungsreduzierung respektieren
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Fussbereich-Ueberschriften sind aus Gruenden der Ueberschriftenhierarchie <h2>
   und uebernehmen die Gestaltung der urspruenglichen <h4>-Regel. */
.footer .footer-top h2 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

/*--------------------------------------------------------------
# Umbruchsicherheit fuer lange Woerter
--------------------------------------------------------------*/
.page-title .heading h1,
.section-title h2,
.hero .hero-claim,
.karriere .service-card .service-card-inner h3,
.aktuelles-card h3,
.legal-content dt {
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 575px) {
  .page-title .heading h1 {
    font-size: 28px;
  }
}

/* Aktueller Eintrag der Brotkrumennavigation vom Link absetzen */
.page-title nav ol li.current {
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

/*--------------------------------------------------------------
# Aktuelles
# Das bereinigte Template enthaelt keine Karte mit Bildflaeche
# (blog/portfolio wurden bei der Bereinigung entfernt). Die Karte
# uebernimmt daher die Flaechenwerte der Service-Karten aus main.css
# (Rundung, Rahmen, Schatten), ergaenzt um eine randlose Bildflaeche.
#
# Bewusst KEIN Hover-Effekt und KEIN Zeiger auf der Karte: die Karte
# selbst ist nicht anklickbar. Interaktiv ist ausschliesslich ein
# tatsaechlich vorhandener "Mehr erfahren"-Link. Gleiche Begruendung
# wie bei den statischen Fachbereichs-Kacheln.
#
# Der Einfuehrungstext braucht hier kein eigenes Regelwerk: er steht
# als <p> im .section-title und wird von main.css gestylt - genau wie
# im Abschnitt Kontakt.
--------------------------------------------------------------*/
.aktuelles-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* Bildflaeche folgt der Kartenrundung */
  background-color: var(--surface-color);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.aktuelles-bild {
  margin: 0;
}

/* Feste Bildhoehe im Verhaeltnis 3:2, damit die Karten einer Zeile
   buendig laufen. Abweichende Seitenverhaeltnisse werden mittig
   beschnitten - Bilder daher im Verhaeltnis 3:2 anliefern. */
.aktuelles-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.aktuelles-inhalt {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.75rem;
}

.aktuelles-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.aktuelles-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--heading-color);
}

.aktuelles-teaser {
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

/* margin-top: auto haelt den Link am unteren Kartenrand, auch wenn die
   Teaser unterschiedlich lang sind. */
.aktuelles-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.5rem;
  font-weight: 600;
}

.aktuelles-link i {
  margin-left: 8px;
  font-size: 0.85rem;
}