/* Ergänzungen für die SEO Fassung (neue Seiten, Brotkrumen, Tabellen, Karten). Farben aus dem bestehenden Design. */

.es-brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--_color-guide---global-style--content);
  text-align: left;
}
.es-brotkrumen a { color: var(--_color-guide---global-style--content); text-decoration: none; }
.es-brotkrumen a:hover { color: var(--_color-guide---global-style--title); text-decoration: underline; }
.es-brotkrumen [aria-current] { color: var(--_color-guide---global-style--title); }
.es-trenner { opacity: .5; }
.nav-back .es-brotkrumen { width: auto; margin: 0; }

/* Langtext */
.es-text {
  width: 100%;
  max-width: 820px;
  margin: 8px auto 0;
  text-align: left;
  color: var(--_color-guide---global-style--content);
}
.es-text h2 { color: var(--_color-guide---global-style--title); margin: 40px 0 12px; font-weight: 400; line-height: 1.25; }
.es-text h3 { color: var(--_color-guide---global-style--title); margin: 28px 0 8px; font-weight: 500; }
.es-text p, .es-text li { line-height: 1.65; }
.es-text ul, .es-text ol { padding-left: 22px; margin: 0 0 16px; }
.es-text li { margin-bottom: 6px; }
.es-text strong { color: var(--_color-guide---global-style--title); font-weight: 600; }
.rich-text-block a, .es-textlink, .faq-answer a, .es-breit a, .es-text a {
  color: var(--_color-guide---global-style--title);
  text-decoration: underline;
  text-decoration-color: #4a9fe0;
  text-underline-offset: 3px;
}
.rich-text-block a:hover, .es-textlink:hover, .faq-answer a:hover, .es-breit a:hover { text-decoration-color: currentColor; }

.es-tabelle { width: 100%; overflow-x: auto; margin: 20px 0 24px; }
.es-tabelle table { width: 100%; border-collapse: collapse; font-size: .95em; min-width: 480px; }
/* Zweispaltige Tabellen passen aufs Handy, nur breitere scrollen seitlich */
.es-tabelle table:not(:has(th:nth-child(3))) { min-width: 0; }
.es-tabelle th, .es-tabelle td {
  border: 1px solid var(--_color-guide---global-style--outline);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.es-tabelle th { background: var(--_color-guide---global-style--base-card-ii); color: var(--_color-guide---global-style--title); font-weight: 600; }

.es-autor { opacity: .8; font-size: 14px; }
.es-breit { max-width: 760px !important; }
.tumbnail.preview { object-fit: cover; width: 100%; }
/* Titelbild ganz zeigen, ohne Zuschnitt (Klasse es-ganz, in bauen.py BILD_GANZ) */
.tumbnail.preview.es-ganz { height: auto; max-height: 70vh; width: auto; max-width: 100%; object-fit: contain;
  border-radius: var(--_size-guide---border--image-border); }

/* Häufige Fragen: Frage als h3 ohne Abstand */
.faq-question h3.sub-heading-large { margin: 0; text-align: left; font-weight: inherit; }
.faq-answer p + p { margin-top: 8px; }
.faq-answer ul { text-align: left; }

/* Anfragekasten */
.es-anfrage { border: 1px solid var(--_color-guide---global-style--outline); border-radius: var(--_size-guide---border--card-border); }
.es-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.es-mitte { justify-content: center; margin-top: 24px; }
.es-tel { color: var(--_color-guide---global-style--title); text-decoration: none; font-size: 15px; }
.es-tel:hover { text-decoration: underline; }

/* Karten mit Links */
.es-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; width: 100%; }
.card.es-karte {
  text-decoration: none;
  align-items: flex-start;
  border: 1px solid var(--_color-guide---global-style--outline);
  border-radius: var(--_size-guide---border--card-border);
  transition: border-color .2s;
}
.card.es-karte:hover { border-color: #4a9fe0; }
.es-mehr { display: flex; align-items: center; gap: 6px; margin-top: auto; color: var(--_color-guide---global-style--title); font-size: 14px; }
.es-kartenlink { color: inherit; text-decoration: none; }
.es-kartenlink:hover { text-decoration: underline; }
h1.sub-heading-large, h2.sub-heading-large { margin: 0; font-weight: inherit; }
.es-extern a { color: var(--_color-guide---global-style--title); text-decoration: underline; }

/* Kernkompetenzen auf der Startseite als Links */
.es-kompetenzen { flex-wrap: wrap; }
a.badge.es-link { text-decoration: none; transition: background-color .2s; }
a.badge.es-link:hover { background-color: var(--_color-guide---global-style--base-card-ii); }

/* Fusszeile */
.es-fuss-adresse { margin-top: 12px; line-height: 1.6; }
.es-fuss-adresse a { color: inherit; text-decoration: none; }
.es-fuss-adresse a:hover { text-decoration: underline; }
.es-fuss-leistungen { margin-bottom: 24px; }
.es-fuss-leistungen .footer-link { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--_color-guide---global-style--content); overflow-wrap: anywhere; }
.es-fuss-leistungen .footer-link:hover { color: var(--_color-guide---global-style--title); }

@media screen and (max-width: 767px) {
  .es-text { padding: 0 4px; }
  .es-knoepfe { gap: 12px 16px; }
}

/* Absätze mit Links im Text: Webflow setzt .paragraph-large auf dem Handy auf flex,
   dann wird jeder Link zu einer eigenen Spalte. Fliesstext gehört in einen normalen Block. */
p.paragraph-large.left, p.paragraph-large:has(a) { display: block; }

/* Navigation unten auf dem Handy: eigene Ebene ganz oben. Sonst fangen auf dem iPhone animierte
   Elemente mit 3D Verschiebung (Logo Laufband, einblendende Abschnitte) die Fingertipps ab. */
@media screen and (max-width: 991px) {
  nav.header { z-index: 1000 !important; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  nav.header a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15); }
}

/* Fotos im Text der Referenzen */
.w-richtext figure.es-figur, .es-figur { max-width: 100%; margin: 28px 0; }
.w-richtext figure.es-figur img, .es-figur img { display: block; width: auto; max-width: 100%; height: auto; max-height: 80vh; margin: 0 auto; border-radius: 12px; object-fit: contain; }

/* Eigenes Aufklappen der Fragen (neue Seiten) */
.es-faq .faq-question { cursor: pointer; }
.es-faq .faq-question:focus-visible { outline: 2px solid #4a9fe0; outline-offset: 2px; border-radius: 12px; }
.w-mod-js .es-faq .faq-answer { height: 0; overflow: hidden; transition: height .3s ease; }
.es-faq .faq-icon img { transition: transform .3s ease; }
.es-faq .offen .faq-icon img { transform: rotate(45deg); }

/* Schweizer Karte auf der Seite Einsatzgebiete (bau/karte_bauen.py, bau/karte-schweiz.svg) */
.es-karte-box { box-sizing: border-box; width: 100%; background: #1c1c1c; border: 1px solid #2b2b2c; border-radius: 16px; padding: 16px; }
.es-karte { display: block; width: 100%; height: auto; font-family: inherit; }
.es-karte .k-land { fill: #262628; stroke: #4a4a4e; stroke-width: 1.5; stroke-linejoin: round; }
.es-karte .k-see { fill: #1d3550; }
.es-karte .k-linie { fill: none; stroke: #4a9fe0; stroke-width: 2; stroke-dasharray: 6 6; opacity: .55; }
.es-karte .k-punkt { fill: #fff; stroke: #161616; stroke-width: 2; }
.es-karte .k-neben-punkt { fill: #8a8a8e; }
.es-karte .k-name { font-size: 22px; font-weight: 600; fill: #fff; paint-order: stroke; stroke: #262628; stroke-width: 4px; }
.es-karte .k-zeit { font-size: 16px; fill: #a9c9e8; paint-order: stroke; stroke: #262628; stroke-width: 4px; }
.es-karte .k-neben { font-size: 16px; fill: #939395; paint-order: stroke; stroke: #262628; stroke-width: 4px; }
.es-karte .k-lager { fill: #4a9fe0; }
.es-karte .k-lager-ring { fill: none; stroke: #4a9fe0; stroke-width: 2; opacity: .5; }
.es-karte a:hover .k-name, .es-karte a:focus .k-name { fill: #4a9fe0; }
.es-karte-legende { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 4px 0; font-size: 14px; color: #939395; }
.es-karte-legende span { display: inline-flex; align-items: center; gap: 8px; }
.es-karte-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.es-karte-legende .l-lager { background: #4a9fe0; box-shadow: 0 0 0 3px rgba(74, 159, 224, .35); }
.es-karte-legende .l-stadt { background: #fff; }
.es-karte-legende .l-neben { background: #8a8a8e; width: 9px; height: 9px; }
@media screen and (max-width: 600px) {
  .es-karte-box { padding: 8px; }
  .es-karte .k-name { font-size: 34px; }
  .es-karte .k-zeit, .es-karte .k-neben { display: none; }
}