/* BS METAL — Ergaenzungen fuer die Mehrseiten-Struktur.
   site.css bleibt unveraendert aus dem v28-Entwurf uebernommen; alles,
   was der Entwurf nicht kannte (Brotkrumen, Ratgeberseiten, Formular,
   Fokuszustaende), steht hier. */

:root {
  --gold-solid: #b69a73;
  --gold-dark: #8d7251;
}

/* ---- Zugaenglichkeit ------------------------------------------------ */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 18px; font-weight: 700;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---- Navigation: Angebots-Schaltflaeche ----------------------------- */
.menu .nav-cta {
  background: var(--gold-solid); color: #fff; padding: 9px 16px;
  font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.menu .nav-cta:hover { background: var(--gold-dark); color: #fff; }

/* ---- Brotkrumen ----------------------------------------------------- */
.crumb-bar { background: var(--cream); border-bottom: 1px solid var(--line); }
.breadcrumb { font-size: 13px; color: var(--muted); padding: 11px 0; }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 10px;
}
.breadcrumb li + li::before { content: "›"; margin-right: 10px; color: var(--line); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-dark); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* ---- Ratgeberseite -------------------------------------------------- */
.article-detail { padding: 34px 0 72px; }
.article-full { max-width: 74ch; }
.article-full .modal-kicker {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-dark); font-weight: 700; margin-bottom: 14px;
}
.article-full h1 {
  font-size: clamp(28px, 4.4vw, 41px); line-height: 1.12;
  margin: 0 0 14px; text-wrap: balance;
}
.article-full .modal-lead {
  font-size: 19px; line-height: 1.55; color: var(--muted); margin: 0 0 26px;
}
.article-full .article-body { font-size: 17px; line-height: 1.7; }
.article-full .article-body p { margin: 0 0 16px; }
.article-full .article-body h4 {
  font-size: 20px; margin: 30px 0 8px; line-height: 1.2;
}
.article-full .article-body ul { padding-left: 20px; margin: 0 0 18px; }
.article-full .article-body li { margin-bottom: 7px; }
.article-full .article-body .note {
  background: var(--cream); border-left: 3px solid var(--gold-solid);
  padding: 15px 18px; margin: 24px 0; font-size: 16px;
}

.article-cta {
  max-width: 74ch; margin: 44px 0 0; padding: 24px 26px;
  background: var(--char); color: #f2f0eb;
}
.article-cta p { margin: 0 0 16px; font-size: 16.5px; max-width: 54ch; }
.article-cta .btn { display: inline-block; }

.article-related { max-width: 74ch; margin-top: 40px; }
.article-related h2 {
  font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px; font-weight: 700;
}
.article-related ul { list-style: none; margin: 0 0 14px; padding: 0; }
.article-related li { border-top: 1px solid var(--line); }
.article-related li a {
  display: block; padding: 13px 0; font-weight: 600; font-size: 17px;
}
.article-related li a:hover { color: var(--gold-dark); }

/* ---- Kontaktseite --------------------------------------------------- */
.page-hero { background: var(--ink); color: #fff; padding: 62px 0 56px; }
.page-hero .ey {
  font-size: 12px; letter-spacing: .18em; color: var(--gold2);
  text-transform: uppercase; margin-bottom: 14px; font-weight: 700;
}
.page-hero h1 { font-size: clamp(34px, 6vw, 54px); line-height: 1.04; margin: 0 0 16px; }
.page-hero p { color: #c8c5be; max-width: 60ch; margin: 0; font-size: 17px; }

.contact-page { padding: 48px 0 80px; }
.contact-grid { display: grid; grid-template-columns: 1.35fr .95fr; gap: 46px; }
.contact-page h2 { font-size: 24px; margin: 0 0 10px; }
.contact-page h3 {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 30px 0 10px; font-weight: 700;
}
.contact-note { color: var(--muted); margin: 0 0 24px; max-width: 56ch; }

.quote-form { display: grid; gap: 17px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.quote-form label { font-size: 14px; font-weight: 600; }
.quote-form input[type="text"],
.quote-form input[type="tel"],
.quote-form input[type="email"],
.quote-form select,
.quote-form textarea {
  font: inherit; font-size: 16px; padding: 11px 13px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 0; width: 100%;
}
.quote-form textarea { resize: vertical; }
.quote-form input::placeholder,
.quote-form textarea::placeholder { color: #a9a49b; }
.field-consent {
  grid-template-columns: auto 1fr; align-items: start; gap: 10px;
  background: var(--cream); border: 1px solid var(--line); padding: 14px 16px;
}
.field-consent input { margin-top: 4px; width: 18px; height: 18px; }
.field-consent label { font-weight: 400; font-size: 14px; line-height: 1.5; }
.field-consent a { text-decoration: underline; color: var(--gold-dark); }
.quote-form .btn { justify-self: start; border: 0; cursor: pointer; }
.form-foot { font-size: 13px; color: var(--muted); margin: 0; }

.contact-side { border-left: 1px solid var(--line); padding-left: 34px; }
.contact-direct { list-style: none; margin: 0 0 22px; padding: 0; }
.contact-direct li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.contact-direct .lbl { color: var(--muted); font-size: 13px; }
.contact-direct a { font-weight: 600; }
.contact-direct a:hover { color: var(--gold-dark); }

.btn.whatsapp {
  display: inline-block; background: #1f7a4d; color: #fff;
  padding: 13px 20px; font-weight: 700; width: 100%; text-align: center;
}
.btn.whatsapp:hover { background: #18613d; color: #fff; }

.contact-address { font-size: 16px; line-height: 1.6; margin: 0 0 6px; }
.hours { width: 100%; border-collapse: collapse; font-size: 15px; }
.hours th, .hours td {
  text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.hours th { color: var(--muted); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.areas-list { font-size: 15px; color: var(--muted); line-height: 1.7; margin: 0; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 28px; }
  .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .article-detail { padding: 22px 0 56px; }
  .article-full .article-body { font-size: 16.5px; }
  .menu .nav-cta { display: inline-block; margin-top: 8px; }
}

/* ---- Rechtstexte ---------------------------------------------------- */
.legal-page { padding: 42px 0 78px; }
.legal-page .article-full h2 {
  font-size: 21px; margin: 34px 0 10px; line-height: 1.2;
}
.legal-page .article-full h2:first-child { margin-top: 0; }
.legal-page .article-full p,
.legal-page .article-full li { font-size: 16.5px; line-height: 1.68; }
.legal-page .article-full ul { padding-left: 20px; margin: 0 0 16px; }
/* Offene Stellen im Entwurf sichtbar halten, damit sie nicht live gehen. */
mark.todo {
  background: #ffe9a8; color: #5c4405; padding: 1px 6px;
  font-weight: 600; border: 1px dashed #c9a63c;
}

/* ---- Fuss ----------------------------------------------------------- */
footer .footergrid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 34px;
  align-items: start; text-align: left;
}
footer .fcol strong {
  display: block; color: #e7e3dc; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; margin: 0 0 12px;
}
footer .fcol strong + strong { margin-top: 22px; }
footer .fcol p { margin: 0 0 12px; line-height: 1.6; font-size: 13.5px; }
footer .fcol ul { list-style: none; margin: 0; padding: 0; }
footer .fcol li { margin-bottom: 7px; font-size: 13.5px; }
footer .fcol a { color: #aaa8a2; }
footer .fcol a:hover { color: var(--gold2); text-decoration: underline; }
footer .footerbar {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  border-top: 1px solid #23262700; border-top-color: #232627;
  margin-top: 30px; padding-top: 18px; font-size: 12.5px;
}
footer .footer-legal a { color: #aaa8a2; text-decoration: underline; }
footer .footer-legal a:hover { color: var(--gold2); }
@media (max-width: 900px) {
  footer .footergrid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  footer .footergrid { grid-template-columns: 1fr; }
}

/* ---- Korrekturen gegen !important-Altlasten aus site.css -------------
   Der v28-Entwurf enthaelt 251 !important-Deklarationen aus mehreren
   Nachbesserungsrunden. Zwei davon greifen in die neuen Bausteine:
   .article-detail h2 erzwingt Display-Groesse, und die p-Farbe der
   Ratgeberseite laesst den hellen Text im dunklen CTA-Block verschwinden.
   Beides wird hier gezielt zurueckgesetzt — nicht global, damit die
   uebrige Gestaltung des Entwurfs unangetastet bleibt.                */

.article-detail .article-related h2 {
  font-size: 15px !important;
  line-height: 1.3 !important;
  letter-spacing: .12em !important;
  margin: 0 0 12px !important;
  color: var(--muted) !important;
  text-transform: uppercase;
}

.article-detail .article-cta p,
.article-cta p {
  color: #ddd8cf !important;
}
/* Eigene Schaltflaechenklasse fuer alles Neue. Die geerbte .btn.gold aus
   site.css ist dreifach ueberschrieben und endet auf background:transparent
   — auf dunklem Grund wirkt das wie ein Outline-Button, auf hellem Grund
   ist die Schaltflaeche unsichtbar. Deshalb hier eine eigene Klasse statt
   eines weiteren !important-Flickens. */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; border: 0; border-radius: 999px; padding: 13px 26px;
  background: var(--gold-solid); color: #fff;
  font-weight: 700; font-size: 15px; letter-spacing: .01em;
  cursor: pointer; text-decoration: none;
}
.btn-primary:hover { background: var(--gold-dark); color: #fff; }

/* ---- Kontrastkorrekturen -------------------------------------------
   Der v28-Entwurf setzt Kicker und Kleintexte auf helle Toene, die auf
   hellem Grund 1,5–4,4:1 erreichen. Heikel ist dabei, dass dieselben
   Bausteine in beiden Welten vorkommen: .partners-note steht einmal auf
   der hellen Projektsektion und einmal auf der dunklen Zertifikats-
   sektion, die .warranty-Karte ist dunkel, die .care-Karte daneben weiss.
   Deshalb wird hier nach tatsaechlichem Hintergrund unterschieden.   */

:root {
  --gold-text: #7d6544;   /* 5.2:1 auf --paper, 4.8:1 auf --cream, 5.6:1 auf Weiss */
  --muted: #67655f;       /* war #716f69 — nur 4.4:1 auf --cream */
  --on-dark: #b8b3ab;     /* Kleintext auf den dunklen Sektionen */
}

/* --- heller Grund: Gold abdunkeln --- */
.section:not(.dark) .wrap:not(.contactbox) .eyebrow,
.article-hub-hero .ey,
.catalog-card em,
.care.care-action-card .text-link,
.service-more {
  color: var(--gold-text);
}
.article-detail .modal-kicker,
.article-detail .eyebrow { color: var(--gold-text) !important; }

/* --- dunkler Grund: Gold hell lassen --- */
.warranty .eyebrow,
.warranty .text-link,
.warranty .text-link span,
.contactbox .eyebrow { color: var(--gold2); }

/* --- Kleintexte mit fest verdrahteten Grautoenen --- */
.section:not(.dark) .partners-note { color: var(--muted); }
.section.dark .partners-note,
.section.dark .partners-note strong { color: var(--on-dark); }
.cert-grid .cert small { color: var(--muted); }      /* Karte ist weiss */
.section .disclaimer { color: var(--muted); }        /* im Fuss bleibt es hell */
.trustbar .trust span { color: #d5d3cd; }            /* war #c5c3be = 4.43:1 */

/* Zwei Faelle brauchen hoehere Spezifitaet:
   site.css definiert "#finishes .catalog-card em" mit ID-Selektor, und die
   dunkle .warranty-Karte steht innerhalb der hellen #care-Sektion, wird
   also von der Regel fuer helle Sektionen mitgenommen. */
#finishes .catalog-card em { color: var(--gold-text); }
#care .warranty .eyebrow,
#care .warranty .text-link,
#care .warranty .text-link span { color: var(--gold2); }

/* Kontaktseite: Weiss auf #b69a73 ergibt nur 2,67:1. Die Schaltflaeche
   bekommt daher den dunkleren Goldton (5,5:1 mit weisser Schrift). */
.btn-primary { background: var(--gold-text); }
.btn-primary:hover { background: #6f5731; }
.field-consent a,
.contact-side .text-link,
.legal-page a { color: var(--gold-text); }

/* ---- Goldtoene auf hellem Grund, gesammelt --------------------------
   site.css enthaelt rund 35 fest verdrahtete Gold- und Grautoene. Ein
   Teil davon steht auf dunklen Sektionen und ist dort richtig; die hier
   aufgefuehrten Selektoren stehen auf weissem oder cremefarbenem Grund
   und lagen zwischen 3,0:1 und 4,4:1. Sie bekommen den geprueften Ton
   --gold-text (5,6:1 auf Weiss).                                      */
.brand-text small,
.menu a:hover,
.swatch small,
.muted-link,
.windows-num,
.windows-plus,
.filter-btn.active,
.finishes-toggle:hover,
.category-links,
.category-links a,
.category-compact .plus,
.catalog-code,
.catalog-card em,
.catalog-more > summary,
.tech-more summary,
.route-page .cat b,
.article-hub-card b,
.modal-kicker {
  color: var(--gold-text);
}
/* Die Kategoriezeile der Karten: auf der hellen Uebersichtsseite dunkel,
   auf der dunklen Startseiten-Sektion unveraendert hell. */
.article-hub-card .article-cat { color: var(--gold-text); }

/* Zwischentitel im Ratgebertext: als h2 nachgerueckt (Gliederung 1→2),
   optisch aber weiter Zwischentitel und nicht Seitentitel. */
.article-full .article-body h2 {
  font-size: 20px !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  margin: 30px 0 8px !important;
  color: var(--ink) !important;
}
.article-related .text-link,
.article-full .article-body a { color: var(--gold-text); }

/* ---- Mobile Aktionsleiste ------------------------------------------
   Auf dem Handy ist der Angebots-CTA sonst nur im eingeklappten Menue
   erreichbar. Anrufen und Anfragen sind bei diesem Gewerk die beiden
   einzigen relevanten Aktionen, deshalb genau zwei Ziele.            */
.mobile-cta { display: none; }
@media (max-width: 760px) {
  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    border-top: 1px solid #2b2e2f;
    box-shadow: 0 -6px 20px rgba(0,0,0,.18);
  }
  .mobile-cta a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 10px; font-weight: 700; font-size: 15px; text-decoration: none;
    min-height: 52px;
  }
  .mcta-call { background: var(--char); color: #f2f0eb; }
  .mcta-quote { background: var(--gold-text); color: #fff; }
  /* Platz schaffen, damit die Leiste nichts verdeckt. */
  body { padding-bottom: 56px; }
}

/* ---- Förderseite (Εξοικονομώ) --------------------------------------- */
.program-page { padding: 44px 0 78px; max-width: 980px; }
.program-page > h2 {
  font-size: clamp(23px, 3.2vw, 30px); line-height: 1.15;
  margin: 46px 0 14px; text-wrap: balance;
}
.program-page > h2:first-of-type { margin-top: 0; }
.program-page p { font-size: 16.5px; line-height: 1.68; max-width: 72ch; }

.status-box { border: 2px solid var(--ink); background: #fff; padding: 24px 26px; margin: 0 0 42px; }
.status-box h2 { font-size: 20px; margin: 0 0 16px; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin: 0 0 18px; }
.status-grid > div { background: #fff; padding: 12px 14px; }
.status-grid dt {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 4px; font-weight: 700;
}
.status-grid dd { margin: 0; font-size: 15px; line-height: 1.5; }
.status-grid a { color: var(--gold-text); text-decoration: underline; }
.status-note { background: var(--cream); border-left: 3px solid var(--gold-text); padding: 14px 16px; margin: 0; font-size: 15.5px !important; }

.req-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 34px; }
.req { border: 1px solid var(--line); background: #fff; padding: 22px 22px 20px; }
.req-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--gold-text); color: #fff; font-weight: 700; font-size: 14px;
  margin-bottom: 12px;
}
.req h3 { font-size: 18px; margin: 0 0 8px; line-height: 1.22; }
.req p { font-size: 15px !important; color: var(--ink-2, #46514f); margin: 0 0 12px; }
.req .text-link { font-size: 14px; font-weight: 600; }

.zone-note { background: var(--char); color: #e8e5df; padding: 24px 26px; margin: 0 0 40px; }
.zone-note h3 { color: #fff; font-size: 19px; margin: 0 0 10px; }
.zone-note p { color: #ddd8cf !important; margin: 0; }
.zone-note strong { color: #fff; }

.doc-list, .steps { max-width: 72ch; }
.doc-list li, .steps li { margin-bottom: 10px; font-size: 16.5px; line-height: 1.6; }
.steps { counter-reset: step; padding-left: 0; list-style: none; }
.steps li {
  counter-increment: step; position: relative; padding-left: 42px; margin-bottom: 16px;
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border: 1px solid var(--gold-text); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--gold-text);
}
.alt-box { border: 1px solid var(--line); background: var(--cream); padding: 24px 26px; margin: 40px 0 0; }
.alt-box h2 { font-size: 21px; margin: 0 0 12px; }
.alt-box .small { font-size: 14px !important; color: var(--muted); margin: 0; }
.program-cta { max-width: none; margin-top: 40px; }

/* ---- Ortsseiten ------------------------------------------------------ */
.area-page { padding: 44px 0 78px; max-width: 900px; }
.area-page h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 14px; line-height: 1.18; }
.area-page section { margin: 0 0 44px; }
.area-angle p { font-size: 17px; line-height: 1.7; margin: 0 0 15px; max-width: 70ch; }

.area-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.area-service {
  border: 1px solid var(--line); background: #fff; padding: 20px;
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.area-service:hover { border-color: #b9aa95; transform: translateY(-2px); }
.area-service strong { font-size: 17px; line-height: 1.2; }
.area-service span { font-size: 14px; color: var(--muted); line-height: 1.5; }

.area-guides ul, .area-others ul { list-style: none; padding: 0; margin: 0; }
.area-guides li { border-top: 1px solid var(--line); }
.area-guides li a { display: block; padding: 13px 0; font-weight: 600; font-size: 16.5px; }
.area-guides li a:hover { color: var(--gold-text); }
.area-others { margin-top: 44px; }
.area-others h2 { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.area-others ul { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.area-others li a {
  display: inline-block; border: 1px solid var(--line); background: #fff;
  padding: 7px 14px; font-size: 14.5px;
}
.area-others li a:hover { border-color: var(--gold-text); color: var(--gold-text); }

.areas-index { padding: 44px 0 78px; }
.areas-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.area-card-link {
  border: 1px solid var(--line); background: #fff; padding: 24px;
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.area-card-link:hover { border-color: #b9aa95; transform: translateY(-2px); }
.area-card-link h2 { font-size: 21px; margin: 0; line-height: 1.2; }
.area-card-link p { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.55; flex: 1; }
.area-card-link b { font-size: 13px; color: var(--gold-text); font-weight: 700; }

.menu .nav-highlight { font-weight: 700; color: var(--gold-text); }

@media (max-width: 860px) {
  .req-grid, .area-service-grid, .areas-index-grid { grid-template-columns: 1fr; }
  .status-grid { grid-template-columns: 1fr; }
}

/* Textlinks auf den neuen Seiten: site.css setzt .text-link auf den hellen
   Goldton (1,7:1). Zusaetzlich braucht ein Link im Fliesstext ein Merkmal
   ausser der Farbe — daher die Unterstreichung. */
.program-page .text-link,
.area-page .text-link,
.program-page .article-body a,
.req .text-link {
  color: var(--gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Projekte -------------------------------------------------------- */
.erga-index { padding: 44px 0 78px; }
.erga-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.erga-card {
  display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--line); background: #fff; overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.erga-card:hover { border-color: #b9aa95; transform: translateY(-2px); }
.erga-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2, #e8ebec); }
.erga-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.erga-card:hover .erga-photo img { transform: scale(1.03); }
.erga-label { display: flex; flex-direction: column; gap: 5px; padding: 17px 19px 19px; }
.erga-label small {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-text); font-weight: 700;
}
.erga-label strong { font-size: 18px; line-height: 1.22; }
.erga-label em { font-style: normal; font-size: 14px; color: var(--muted); }

.project-page { padding: 0 0 78px; max-width: 900px; }
.project-detail { display: block; }
.project-hero { margin: 0 0 30px; }
.project-hero img { width: 100%; height: auto; display: block; }
.project-body { max-width: 70ch; }
.project-body .eyebrow {
  display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); font-weight: 700; margin-bottom: 12px;
}
.project-body h1 { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.1; margin: 0 0 16px; }
.project-task { font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0 0 24px; }
.project-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 24px;
}
.project-facts > div { background: #fff; padding: 13px 15px; }
.project-facts dt {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 4px;
}
.project-facts dd { margin: 0; font-size: 15.5px; font-weight: 600; }
.project-facts a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.project-details { padding-left: 20px; margin: 0 0 20px; }
.project-details li { margin-bottom: 7px; font-size: 16.5px; line-height: 1.6; }

.project-others { margin-top: 44px; max-width: 70ch; }
.project-others h2 {
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px; font-weight: 700;
}
.project-others ul { list-style: none; padding: 0; margin: 0 0 14px; }
.project-others li { border-top: 1px solid var(--line); }
.project-others li a { display: block; padding: 13px 0; font-weight: 600; font-size: 16.5px; }
.project-others li a:hover { color: var(--gold-text); }
.project-others .text-link { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }

.area-projects { margin: 0 0 44px; }

@media (max-width: 860px) {
  .erga-grid { grid-template-columns: 1fr; }
}

/* ---- Aufteilung Pergolen / Geländer ---------------------------------- */
.split-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; }
.split-link {
  border: 1px solid var(--line); background: #fff; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.split-link:hover { border-color: #b9aa95; transform: translateY(-2px); }
.split-link strong { font-size: 17px; line-height: 1.2; }
.split-link span { font-size: 14px; color: var(--muted); line-height: 1.5; }
.split-back { margin: 26px 0 0; }
.split-back .text-link { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .split-links { grid-template-columns: 1fr; } }

/* ---- Fragenblock ----------------------------------------------------- */
.faq { max-width: 74ch; margin: 0 0 8px; padding: 48px 0 8px; }
.faq h2 { font-size: clamp(23px, 3.2vw, 30px); margin: 0 0 18px; line-height: 1.15; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-of-type { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 17px 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  font-weight: 600; font-size: 17.5px; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-text); }
.faq-item .plus {
  font-size: 22px; font-weight: 400; color: var(--gold-text);
  transition: transform .2s ease; flex: 0 0 auto;
}
.faq-item[open] .plus { transform: rotate(45deg); }
.faq-answer { padding: 0 0 20px; }
.faq-answer p { margin: 0; font-size: 16.5px; line-height: 1.68; color: var(--ink-2, #46514f); }
.faq-answer a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Vergleichstabellen ---------------------------------------------- */
.cmp-wrap { max-width: 74ch; margin: 44px 0 0; }
.cmp-wrap h2 {
  font-size: 20px !important; line-height: 1.22 !important;
  letter-spacing: 0 !important; margin: 0 0 14px !important; color: var(--ink) !important;
}
.cmp-scroll { overflow-x: auto; border: 1px solid var(--line); background: #fff; }
table.cmp { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
table.cmp th, table.cmp td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line);
  vertical-align: top; line-height: 1.5;
}
table.cmp thead th {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: var(--cream); font-weight: 700; white-space: nowrap;
}
table.cmp tbody th {
  font-weight: 700; white-space: nowrap; color: var(--ink);
  background: #fbfaf7; width: 1%;
}
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp-note { font-size: 14.5px; color: var(--muted); margin: 12px 0 0; }

/* ---- Verfasserzeile (erscheint erst mit hinterlegtem Namen) ---------- */
.byline {
  max-width: 74ch; margin: 36px 0 0; padding: 16px 18px;
  background: var(--cream); border-left: 3px solid var(--gold-text);
}
.byline-label {
  display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 5px;
}
.byline p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.byline p + p { margin-top: 8px; color: var(--muted); }

/* ---- Projektraster vereinheitlichen ---------------------------------
   Der Entwurf baut das Raster asymmetrisch auf: 1.25fr/.75fr, dazu eine
   .big-Kachel mit 634 px Mindesthoehe gegenueber 310 px bei den uebrigen.
   Das sieht ungefiltert gut aus — sobald aber ein Filter Kacheln
   ausblendet, rutschen die verbliebenen in andere Spalten und wechseln
   Breite und Hoehe. Bei einem einzigen Treffer stand die Kachel dann in
   der breiten Spalte, aber halb so hoch.

   Deshalb: gleichmaessige Spalten und eine feste Kachelproportion. Jede
   Kachel gleich breit und gleich hoch, unabhaengig vom Filter. 4:3 passt
   exakt zu den Querformat-Aufnahmen und beschneidet die Hochformate
   mittig — das Motiv liegt dort ohnehin in der Bildmitte.            */
#projects .projects {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
#projects .project,
#projects .project.big {
  min-height: 0;
  aspect-ratio: 4 / 3;
}
#projects .project-label h3 { font-size: 20px; }

@media (max-width: 980px) {
  #projects .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  #projects .projects { grid-template-columns: minmax(0, 1fr); }
  #projects .project-label h3 { font-size: 21px; }
}

/* Gleiche Regel fuer die Projektuebersicht: Bildspuren brauchen
   minmax(0,1fr), sonst koennen breite Bilder die Spur aufblaehen. */
.erga-grid, .areas-index-grid, .area-service-grid, .req-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .erga-grid, .areas-index-grid, .area-service-grid, .req-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Telefon-Kennzeichnung ------------------------------------------
   Drei gleichrangige Nummern zwingen den Leser zum Raten, welche jetzt
   jemand abhebt. Das Briefing verlangt Σταθερό / Κινητό. */
.tel-label {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  opacity: .65; margin-right: 5px; font-weight: 600;
}
footer .tel-label { color: var(--gold2); opacity: .8; }

/* ---- Ruhiger Kontakthinweis statt Aufforderungsblock ----------------- */
.quiet-contact {
  max-width: 74ch; margin: 30px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line); font-size: 15.5px; color: var(--muted);
}
.quiet-contact a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.quiet-contact a:hover { color: #6f5731; }

/* ---- Fehlerseite ----------------------------------------------------- */
.notfound { padding: 64px 0 90px; max-width: 780px; }
.nf-code {
  font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: .18em;
  color: var(--gold-text); margin: 0 0 14px; font-weight: 600;
}
.notfound h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.05; margin: 0 0 14px; }
.nf-lead { font-size: 17.5px; color: var(--muted); max-width: 58ch; margin: 0 0 34px; }
.nf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
.nf-card {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  border: 1px solid var(--line); background: #fff; text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.nf-card:hover { border-color: #b9aa95; transform: translateY(-2px); }
.nf-card strong { font-size: 17px; line-height: 1.2; }
.nf-card span { font-size: 14px; color: var(--muted); line-height: 1.5; }
.nf-more { font-size: 15.5px; color: var(--muted); }
.nf-more a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .nf-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Trefferflaechen -------------------------------------------------
   Gemessen waren Kopf- und Fusslinks 16–20 px hoch. WCAG 2.5.8 verlangt
   mindestens 24 px, empfohlen sind 44. Erreicht ueber vertikale Polsterung,
   ohne die Optik zu veraendern. */
.topbar .top-contact a,
.topbar .address-link { padding: 6px 0; min-height: 32px; }
footer .fcol li a,
footer .fcol p a,
footer .footer-legal a { display: inline-block; padding: 5px 0; min-height: 28px; }
.breadcrumb a { display: inline-block; padding: 4px 0; min-height: 26px; }
.field-consent input[type="checkbox"] { width: 24px; height: 24px; }
.field-consent { align-items: center; }
@media (max-width: 760px) {
  .topbar .top-contact a { padding: 9px 0; min-height: 40px; }
  footer .fcol li a { padding: 8px 0; min-height: 38px; }
}

/* ---- Typografie ------------------------------------------------------
   Bisher lud die Seite gar keine Schrift: site.css deklarierte Inter, aber
   nichts brachte sie mit. Die Seite rendert damit in der Systemschrift des
   jeweiligen Geraets — auf iPhone anders als auf Android als auf Windows.

   Fira Sans Condensed fuer die Ueberschriften, wie im Briefing gewuenscht:
   geprueft griechischer Zeichensatz, industrieller Charakter, schmal genug
   fuer lange griechische Woerter. Der Fliesstext bleibt bewusst auf dem
   System-Stack — neutral, sofort da, kein zusaetzliches Gewicht.

   Inter faellt aus dem Fliesstext-Stack: es wird nicht geladen, war aber
   auf Rechnern mit lokal installiertem Inter aktiv. Ohne den Eintrag
   rendert jedes Geraet vorhersagbar seine Systemschrift.            */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4,
.hero h1, .page-hero h1,
.section-head h2,
.brand-text strong,
.figures dd, .lever-head h3 {
  font-family: "Fira Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.005em;
}
/* Condensed traegt mehr Zeichen pro Zeile — die Hero-Zeile darf damit
   etwas groesser werden, ohne zu brechen. */
.hero h1 { letter-spacing: -.01em; }
.article-full h1, .project-body h1, .notfound h1 { font-weight: 700; }
.article-related h2, .project-others h2, .cmp-wrap h2 {
  font-family: "Fira Sans Condensed", "Arial Narrow", system-ui, sans-serif;
}

/* ---- Heldenbereich mobil ---------------------------------------------
   Das Briefing verlangt: „On mobile, real project imagery should appear
   above the fold or extremely early. We do not want several screens of
   text before a visitor sees actual work."

   Gemessen lag das Bild bei 953 px auf einem 812-px-Schirm — also
   vollstaendig darunter. Auf dem Handy wird die Reihenfolge deshalb
   getauscht: erst das Foto, dann die Zeile. Beides passt so auf den
   ersten Schirm.                                                      */
@media (max-width: 900px) {
  .hero-inner { display: flex; flex-direction: column; }
  .hero-photo {
    order: -1;
    min-height: 0 !important;
    height: 38vh;
    max-height: 320px;
  }
  .hero-copy { padding: 26px 20px 30px !important; }
  .hero .eyebrow { margin-bottom: 10px; }
  .hero h1 { font-size: clamp(30px, 8.5vw, 42px) !important; line-height: 1.04 !important; }
  /* Der Einleitungsabsatz ist lang. Auf dem Handy wird er nach dem
     dritten Satz abgeschnitten; vollstaendig steht er weiter unten in
     der Bereichsuebersicht. */
  .hero p {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 18px !important;
  }
}

/* ---- Kopfleiste mobil ------------------------------------------------
   Mit den Σταθερό/Κινητό-Labels wuchs die Kontaktzeile auf dem Handy auf
   drei Zeilen und schob den Inhalt um rund 330 px nach unten — das machte
   den Gewinn beim Heldenbild wieder zunichte.

   Auf dem Handy bleibt deshalb nur die Adresse stehen. Anrufen und
   Kontakt liegen ohnehin dauerhaft in der Leiste am unteren Rand, und die
   vollstaendigen Angaben stehen auf der Kontaktseite.                */
/* 900 px statt 760: dazwischen bricht die Kontaktzeile unschoen um. */
@media (max-width: 900px) {
  .topbar .top-contact { display: none !important; }
  .topbar .wrap { justify-content: center; padding: 7px 0; }
  .topbar .address-link { font-size: 12.5px; min-height: 34px; }
}

/* ---- Regionsseiten ---------------------------------------------------
   Ersetzt die frueheren Gemeindeseiten. Der Abdeckungshinweis nennt die
   Orte, ohne dass jede Gemeinde eine eigene Adresse braucht. */
.area-covers {
  max-width: none; margin: 0 0 30px; padding: 13px 16px;
  background: var(--cream); border: 1px solid var(--line);
  font-size: 14.5px; color: var(--muted); line-height: 1.7;
}
.area-covers span {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-text); font-weight: 700; margin-right: 8px;
}
.area-angle { margin: 0 0 34px; max-width: 74ch; }
.area-angle h2 { font-size: 23px; line-height: 1.18; margin: 0 0 12px; }
.area-angle p { font-size: 16.5px; line-height: 1.68; margin: 0 0 13px; }

.areas-mentioned { margin: 34px 0 0; max-width: 74ch; }
.areas-mentioned h2 {
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px; font-weight: 700;
}
.areas-mentioned ul { list-style: none; margin: 0 0 14px; padding: 0; }
.areas-mentioned li {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  border-top: 1px solid var(--line); padding: 12px 0;
}
.areas-mentioned li strong { font-size: 16.5px; }
.areas-mentioned li span { font-size: 14.5px; color: var(--muted); }
.areas-note { font-size: 14.5px; color: var(--muted); }
.area-card-link em {
  display: block; font-style: normal; font-size: 13px; color: var(--muted);
  margin-top: 6px; line-height: 1.5;
}

/* ---- Fuss: drei Oberkategorien mit Unterpunkten ---------------------
   Das Briefing verlangt genau drei Baukategorien. Vorher standen sieben
   Seiten gleichrangig nebeneinander; jetzt zeigt die Einrueckung die
   tatsaechliche Hierarchie. */
footer .fnest > li > a { color: #e7e3dc; font-weight: 600; }
footer .fnest > li { margin-bottom: 11px; }
footer .fnest ul {
  list-style: none; margin: 5px 0 0; padding: 0 0 0 11px;
  border-left: 1px solid #2b2f2f;
}
footer .fnest ul li { margin-bottom: 4px; }
footer .fnest ul li a { font-size: 13px; }

/* ---- Ueber-uns-Seite -------------------------------------------------
   Die Inhaberangaben fehlen bewusst, solange keine Namen vorliegen. Was
   hier steht, ist belegbar: Arbeitsweise, Qualifikationen, Umfang.     */
.about-page { padding: 44px 0 78px; }
.about-page h2 { font-size: clamp(24px, 3.4vw, 31px); line-height: 1.1; margin: 0 0 12px; }
.about-intro { max-width: 70ch; margin: 0 0 34px; }
.about-intro p { font-size: 17.5px; color: var(--ink-2); }

.steps-flow { list-style: none; counter-reset: step; margin: 0 0 44px; padding: 0; max-width: 74ch; }
.steps-flow li {
  counter-increment: step; position: relative;
  padding: 0 0 22px 52px; border-left: 1px solid var(--line); margin-left: 13px;
}
.steps-flow li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps-flow li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: -14px; top: 0;
  width: 27px; height: 27px; display: flex; align-items: center; justify-content: center;
  background: var(--gold-text); color: #fff;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600;
}
.steps-flow h3 { font-size: 20px; margin: 0 0 6px; line-height: 1.2; }
.steps-flow p { font-size: 16px; line-height: 1.65; margin: 0; color: var(--ink-2); }
.steps-flow a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }

.about-cert { margin: 0 0 40px; }
.cert-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.cert-list > div { background: #fff; border: 1px solid var(--line); padding: 18px 20px; }
.cert-list strong { display: block; font-size: 16px; margin-bottom: 7px; }
.cert-list p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.cert-list a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }

.about-scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.about-scope-grid a {
  display: flex; flex-direction: column; gap: 7px; padding: 19px 21px;
  border: 1px solid var(--line); background: #fff; text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.about-scope-grid a:hover { border-color: #b9aa95; transform: translateY(-2px); }
.about-scope-grid strong { font-size: 17px; }
.about-scope-grid span { font-size: 14px; color: var(--muted); line-height: 1.55; }

@media (max-width: 860px) {
  .cert-list, .about-scope-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Sprachumschalter ------------------------------------------------
   Bleibt auf der entsprechenden Seite statt auf die Startseite zu werfen —
   so verlangt es das Briefing. Erscheint nur dort, wo beide Fassungen
   wirklich existieren. */
.langbar { background: var(--cream); border-bottom: 1px solid var(--line); }
.langbar .wrap { display: flex; justify-content: flex-end; padding: 7px 0; }
.langbar a {
  font-size: 13px; color: var(--gold-text); text-decoration: none;
  padding: 5px 10px; border: 1px solid var(--line); background: #fff;
  min-height: 28px; display: inline-flex; align-items: center;
}
.langbar a:hover { border-color: var(--gold-text); }
/* Verweise auf noch nicht uebersetzte Seiten kennzeichnen. */
[hreflang="el"]:not(.langbar a)::after {
  content: " EL"; font-size: .72em; letter-spacing: .08em;
  opacity: .55; vertical-align: 2px;
}

/* ---- Foerderprogramme: dauerhafter Bereich ---------------------------
   Ersetzt die frühere Einzelseite. Das sichtbare Aktualisierungsdatum ist
   ausdrückliche Vorgabe: wer über Förderprogramme schreibt, muss zeigen,
   wann er zuletzt nachgesehen hat. */
.prog-page { padding: 40px 0 78px; }
.prog-updated {
  font-family: "IBM Plex Mono", monospace; font-size: 12px;
  letter-spacing: .08em; color: var(--muted); margin: 0 0 26px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.prog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 0 0 40px; }
.prog-card {
  display: flex; flex-direction: column; gap: 9px; padding: 21px 23px;
  border: 1px solid var(--line); background: #fff; text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.prog-card:hover { border-color: #b9aa95; transform: translateY(-2px); }
.prog-card strong { font-size: 19px; line-height: 1.2; }
.prog-status { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.prog-more { font-size: 13px; color: var(--gold-text); font-weight: 700; }

.prog-split { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 0 0 40px; }
.prog-us, .prog-eng { padding: 20px 22px; border: 1px solid var(--line); }
.prog-us { background: #fff; }
.prog-eng { background: var(--cream); }
.prog-split h2 { font-size: 18px; margin: 0 0 12px; }
.prog-split ul { margin: 0 0 10px; padding-left: 19px; }
.prog-split li { font-size: 15px; margin-bottom: 5px; }
.prog-eng p { font-size: 14.5px; color: var(--muted); margin: 0; }

.prog-req { margin: 0 0 34px; }
.prog-req > p { max-width: 68ch; }
.zone-line {
  background: var(--cream); border-left: 3px solid var(--gold-text);
  padding: 14px 17px; font-size: 15.5px; max-width: 74ch; margin: 20px 0 0;
}
.prog-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 32px;
}
.prog-facts > div { background: #fff; padding: 15px 17px; }
.prog-facts dt {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 5px;
}
.prog-facts dd { margin: 0; font-size: 15px; line-height: 1.5; }
.prog-figures, .prog-sources, .prog-others, .prog-archive { max-width: 74ch; margin: 0 0 32px; }
.prog-figures h2, .prog-sources h2, .prog-others h2, .prog-archive h2 {
  font-size: 19px; margin: 0 0 10px;
}
.prog-warn {
  background: var(--warn-soft, #f5ecd8); border-left: 3px solid #7c5d14;
  padding: 14px 17px; font-size: 15.5px; margin: 14px 0 0;
}
.prog-sources ul, .prog-others ul { list-style: none; margin: 0 0 12px; padding: 0; }
.prog-sources li, .prog-others li { border-top: 1px solid var(--line); }
.prog-sources li a, .prog-others li a { display: block; padding: 11px 0; font-weight: 600; }
.prog-sources li a:hover, .prog-others li a:hover { color: var(--gold-text); }
.prog-others .text-link { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 780px) {
  .prog-grid, .prog-split { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Systemseiten ----------------------------------------------------
   Herstellerseiten, getrennt von den Projektseiten. Wo keine Kennwerte
   vorliegen, steht statt einer leeren Tabelle ein ehrlicher Hinweis auf
   das Herstellerblatt. */
.sys-page { padding: 40px 0 78px; max-width: 860px; }
.sys-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 30px;
}
.sys-facts > div { background: #fff; padding: 14px 16px; }
.sys-facts dt {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 5px;
}
.sys-facts dd { margin: 0; font-size: 15.5px; font-weight: 600; }
.sys-facts a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }

.sys-feats { max-width: 70ch; margin: 0 0 26px; }
.sys-feats h2 { font-size: 19px; margin: 0 0 10px; }
.sys-feats ul { list-style: none; margin: 0; padding: 0; }
.sys-feats li {
  border-top: 1px solid var(--line); padding: 10px 0 10px 22px;
  position: relative; font-size: 16px;
}
.sys-feats li::before {
  content: "·"; position: absolute; left: 6px; top: 8px;
  color: var(--gold-text); font-weight: 700; font-size: 20px;
}
.sys-nodata {
  max-width: 70ch; margin: 0 0 26px; padding: 13px 16px;
  background: var(--cream); border-left: 3px solid var(--line-2);
  font-size: 15px; color: var(--muted);
}
.sys-official { margin: 0 0 32px; }
.sys-official a { color: var(--gold-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.sys-related { max-width: 70ch; margin: 0 0 8px; }
.sys-related h2 {
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px; font-weight: 700;
}
.sys-related ul { list-style: none; margin: 0 0 12px; padding: 0; }
.sys-related li { border-top: 1px solid var(--line); padding: 12px 0; }
.sys-related li a { display: block; font-weight: 600; font-size: 16.5px; }
.sys-related li a:hover { color: var(--gold-text); }
.sys-related li span { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; }
.sys-related .text-link { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
/* Der Ratgeberblock stand frueher als schmale Lesespalte unter einer
   Textseite. Seit er auf allen zwoelf Kategorieseiten unter dem
   Kachelraster sitzt, muss er dessen Breite haben — sonst beginnt er
   weiter links als alles darueber und darunter. */
.sys-guides { margin: 0 0 40px; }
.sys-guides ul {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 22px;
}
@media (max-width: 760px) {
  .sys-guides ul { grid-template-columns: 1fr; }
}
.sys-guides h2 { font-size: 19px; margin: 0 0 10px; }
.sys-guides ul { list-style: none; margin: 0; padding: 0; }
.sys-guides li { border-top: 1px solid var(--line); }
.sys-guides li a { display: block; padding: 11px 0; font-weight: 600; font-size: 16px; }
.sys-guides li a:hover { color: var(--gold-text); }

/* ---- Kategorieseiten als Systemliste --------------------------------- */
.syslist-page { padding: 40px 0 78px; }
.sys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 0 0 36px; }
.sys-card {
  display: flex; flex-direction: column; gap: 7px; padding: 19px 21px;
  border: 1px solid var(--line); background: #fff; text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.sys-card:hover { border-color: #b9aa95; transform: translateY(-2px); }
.sys-card-fam {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--gold-text);
  font-weight: 600;
}
.sys-card strong { font-size: 18px; line-height: 1.2; }
.sys-card-desc { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.sys-card-feat {
  font-size: 13px; color: var(--ink-2, #46514f); padding-top: 7px;
  border-top: 1px solid var(--line); margin-top: 2px;
}
@media (max-width: 760px) { .sys-grid { grid-template-columns: minmax(0, 1fr); } }

/* Hinweis auf noch nicht übersetzte Inhalte — ehrlich statt versteckt. */
.lang-note {
  max-width: 74ch; margin: 0 0 30px; padding: 16px 19px;
  background: var(--cream); border-left: 3px solid var(--gold-text);
}
.lang-note p { margin: 0; font-size: 15.5px; line-height: 1.6; }

/* ---------------------------------------------------------------
   Kontaktformular: Honigtopf, Rueckmeldung, Dankesseite
   --------------------------------------------------------------- */

/* Das Fallenfeld muss fuer Menschen unsichtbar und unerreichbar sein,
   aber im Markup stehen — Bots fuellen es aus, echte Besucher nicht. */
.field-trap {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.form-status {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 6px;
  border-left: 3px solid var(--line);
  background: rgba(0, 0, 0, .035);
  font-size: 15px;
  line-height: 1.5;
  color: #3d3b36;
}
.form-status.is-error {
  border-left-color: #9d2f22;
  background: #fbeeec;
  color: #6e2018;
}
.form-status.is-note {
  border-left-color: var(--gold);
  background: #faf4e9;
  color: #5c4a2c;
}

.thanks { padding: 64px 0 90px; max-width: 680px; }
.thanks-mark {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  margin: 0 0 20px;
  border-radius: 50%;
  background: #e8f1e9;
  color: #2f6b43;
  font-size: 25px; line-height: 1;
}
.thanks h1 { font-size: clamp(28px, 4.6vw, 42px); line-height: 1.08; margin: 0 0 16px; }
.thanks-lead { font-size: 17.5px; color: var(--muted); max-width: 56ch; margin: 0 0 26px; }
.thanks-urgent {
  margin: 0 0 30px; padding: 14px 16px;
  border-radius: 7px; background: var(--cream);
  font-size: 16px; line-height: 1.6;
}
.thanks-more { font-size: 15px; color: var(--muted); margin: 0; }

/* Hinweis unter den Oeffnungszeiten — Besuche nach Vereinbarung. */
.hours-note {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Einleitungssatz der Ingenieursspalte — er traegt die Kernaussage, dass
   diese Punkte nicht zum Lieferumfang gehoeren. */
/* Hoehere Spezifitaet als .prog-eng p — sonst gewinnt dort var(--muted),
   und der Satz mit der Kernaussage ist der blasseste im Block. */
.prog-eng .prog-eng-lead {
  margin: 0 0 11px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

/* ---------------------------------------------------------------
   Nachweise: jetzt eine Liste mit Aussteller, Gueltigkeit und Dokument.
   Fuenf statt vier Eintraege, deshalb kein starres 4-Spalten-Raster mehr.
   --------------------------------------------------------------- */
#certs .cert-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
  gap: 14px;
}
#certs .cert {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#certs .cert p { margin: 9px 0 0; }

/* Jede Angabe auf eine eigene Zeile: Geltungsbereich, Normen, Ausstellung,
   Gueltigkeit. Inline mit Trennpunkten umbrach es so, dass der Punkt am
   Zeilenanfang stand. */
.cert-meta {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b6862;
  font-variant-numeric: tabular-nums;
}

/* Personenurkunden sichtbar von Firmennachweisen trennen — das Briefing
   warnt ausdruecklich davor, beides zu vermischen. */
#certs .cert-person { border-top-color: #7d8a93; }

.cert-doc {
  margin-top: 11px;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: #6b5220;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cert-doc:hover { color: #4c3a14; }

@media (max-width: 620px) {
  #certs .cert-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Pflichtangaben im Seitenfuss — in Griechenland vorgeschrieben und
   deshalb auf jeder Seite erreichbar, nicht nur in der Erklaerung. */
.footer-entity {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8d8b85;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   Logo: das gesamte Emblem muss sichtbar sein.

   Im Entwurf stand eine 82x62-Box (Querformat) mit object-fit: cover auf
   einem hochkanten Bild. Cover fuellt und schneidet — bei einem runden
   Emblem mit umlaufender Schrift fielen genau die beiden Schriftboegen
   oben und unten weg.

   Jetzt bestimmt das Bild selbst seine Breite: feste Hoehe, Breite auto.
   Damit gibt es kein Seitenverhaeltnis, das gegen das Bild laufen kann —
   aendert sich der Zuschnitt in extract_assets.py, passt es weiter.
   --------------------------------------------------------------- */
.site-header .logo-window {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
  display: inline-flex;
  flex: none;
}
.site-header .logo-window img {
  height: 54px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  border-radius: 4px;
  display: block;
}

@media (max-width: 620px) {
  .site-header .logo-window img { height: 46px !important; }
}

/* ---------------------------------------------------------------
   Navigation: der aktuelle Abschnitt wird markiert.

   Ersetzt die Aufgabe, die vorher eine einstufige Brotkrume erfuellen
   sollte ("Αρχική › Ενεργειακά προγράμματα") — die sagte nur, was die
   Ueberschrift darunter schon sagte. Die Brotkrume erscheint jetzt erst
   ab zwei Vorfahren, wo sie einen Rueckweg zeigt.

   Die Leiste hat einen fast weissen Grund. Deshalb kein helles Textweiss
   (das war im ersten Entwurf drin und waere unsichtbar gewesen), sondern
   mehr Schriftstaerke plus ein Unterstrich. Zwei Merkmale statt nur
   Farbe — das hilft auch bei Farbsehschwaeche.
   --------------------------------------------------------------- */
.menu a.is-active {
  font-weight: 600;
  position: relative;
}
.menu a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  /* #8a6f49 statt --gold: 4,7:1 auf der hellen Leiste statt 3,1:1. */
  background: #8a6f49;
  border-radius: 1px;
}
/* Der Kontaktknopf ist schon eingefaerbt — dort genuegt ein Innenrand. */
.menu a.nav-cta.is-active::after { display: none; }
.menu a.nav-cta.is-active { box-shadow: inset 0 0 0 2px #6b5220; }

@media (max-width: 980px) {
  /* Im ausgeklappten Menue steht jeder Punkt auf eigener Zeile; ein
     Unterstrich ueber die volle Breite waere dort ein Trennstrich. */
  .menu a.is-active::after { left: 0; right: auto; width: 22px; bottom: 4px; }
}

/* ---------------------------------------------------------------
   Systemseiten: Kennwerte als Tabelle, getrennt von den Merkmalen.

   Masse gehoeren nicht in dieselbe Liste wie Adjektive — ein Planer
   sucht "Κάσα 67 mm", nicht "hohe Funktionalitaet". Deshalb zuerst die
   Tabelle, darunter die qualitativen Punkte.
   --------------------------------------------------------------- */
.sys-specs { margin: 0 0 26px; }
.sys-specs h2 { font-size: 18px; margin: 0 0 11px; }
.sys-specs table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.sys-specs th,
.sys-specs td {
  text-align: left;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  vertical-align: baseline;
}
.sys-specs th {
  font-weight: 500;
  color: var(--muted);
  width: 48%;
}
.sys-specs td { font-weight: 600; }
.sys-specs tr:last-child th,
.sys-specs tr:last-child td { border-bottom: 0; }
.sys-specs-note {
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   Aufmacherfoto: echtes Bild statt CSS-Hintergrund.

   Im Entwurf war .hero-photo ein leeres div mit background-image — ohne
   Alt-Text, fuer die Bildersuche unsichtbar, und :after hatte content:""
   und rendete ein leeres dunkles Kaestchen. Jetzt steht dort ein eigenes
   Werk mit Bildtext, Ort und System.
   --------------------------------------------------------------- */
.hero .hero-photo {
  position: relative;
  background-image: none !important;
  overflow: hidden;
}
.hero .hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Der Verlauf lag im background — als Auflage wieder darueberlegen, damit
   die Beschriftung auf jedem Bildausschnitt lesbar bleibt. */
.hero .hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .48));
}
.hero .hero-photo::after { display: none; }

.hero-credit {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  max-width: calc(100% - 40px);
  background: rgba(9, 11, 12, .74);
  color: #fff;
  font-size: 12px;
  letter-spacing: .07em;
  line-height: 1.45;
  padding: 9px 12px;
  border-left: 2px solid var(--gold2);
}

@media (max-width: 620px) {
  .hero-credit { right: 14px; bottom: 14px; font-size: 11.5px; }
}

/* ---------------------------------------------------------------
   Aufmacher am Schreibtisch: Hoehe begrenzen.

   Gemessen bei 1360 x 860: die Zeile stand mit 74,8 px in einer nur
   444 px breiten Spalte, brach auf acht Zeilen und machte den
   Aufmacher 1024 px hoch — hoeher als der Schirm. Die Fotospalte war
   damit 644 x 1024, also hochkant, und object-fit:cover schnitt aus
   dem liegenden Foto einen schmalen senkrechten Streifen. Genau die
   Breite macht das Pergola-Bild aber sehenswert.

   Kleinere Zeile, weniger Innenabstand, kein Mindestmass von 660 px:
   der Aufmacher passt auf einen Schirm und das Foto bleibt liegend.
   --------------------------------------------------------------- */
@media (min-width: 1001px) {
  .hero-inner { min-height: 0; }
  .hero-copy { padding: 58px 56px !important; }
  .hero h1 { font-size: clamp(38px, 3.5vw, 56px) !important; }
  .hero p { font-size: 17px; }
  .hero .hero-photo { min-height: 430px; }
}

/* ---------------------------------------------------------------
   Projektgalerie.

   Je Projekt liegen jetzt bis zu zwoelf freigegebene Aufnahmen vor.
   Der Aufmacher steht gross, der Rest als Raster darunter — jede
   Aufnahme mit ihrer eigenen Bildunterschrift, weil eine Aufnahme
   ohne Erklaerung im Metallbau wenig sagt.
   --------------------------------------------------------------- */
.project-gallery { margin: 38px 0 0; }
.project-gallery h2 {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 16px; font-weight: 700;
}
.pgal-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  align-items: start;
}
.pgal-item { margin: 0; }
.pgal-item img {
  width: 100%; height: auto; display: block; background: var(--surface-2, #e8ebec);
}
.pgal-item figcaption {
  font-size: 14px; line-height: 1.5; color: var(--muted);
  padding: 9px 2px 0; border-top: 1px solid var(--line); margin-top: 9px;
}
.project-system { margin: 0 0 22px; }
.project-system .text-link {
  color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px;
  font-weight: 600;
}
.erga-count {
  font-size: 12.5px; letter-spacing: .06em; color: var(--muted);
}
/* Der Filter auf der Projektuebersicht: im Entwurf lag er auf dunklem
   Grund, hier steht er auf hellem.

   Und er muss hier auch ausblenden koennen: site.css kennt dafuer nur
   `.project.is-hidden`, und die Klasse `.project` traegt die Kachel
   nicht mehr. Ohne diese Zeile setzt das Skript zwar `is-hidden`, aber
   nichts verschwindet — genau so war es. */
[data-project-cat].is-hidden { display: none !important; }
.erga-index .project-filters {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px;
}
.erga-index .project-filter {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 9px 15px; font-size: 14px; font-weight: 600;
  cursor: pointer; min-height: 38px;
}
.erga-index .project-filter:hover { border-color: #b9aa95; }
.erga-index .project-filter.active { background: var(--ink); color: #fff; border-color: var(--ink); }

@media (max-width: 700px) {
  .pgal-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------------------------------------------------------------
   Bewertungen aus dem Google-Unternehmensprofil.

   Fuenf statt vier Kacheln in der Vertrauensleiste: die Bewertung
   steht vorn, weil sie als einzige nicht von BS METAL kommt. Sie ist
   Anzeige, nicht Auszeichnung — in den strukturierten Daten taucht
   sie bewusst nicht auf (siehe build/reviews.py).
   --------------------------------------------------------------- */
/* Seit dem 11.09.2026 sechs Felder statt fuenf — die Zahlen zum Betrieb
   sind dazugekommen. auto-fit statt einer festen Spaltenzahl, damit eine
   siebte Kachel die Leiste nicht zerreisst. */
.trustgrid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.trust-rating { display: block; text-decoration: none; }
.trust-rating:hover b { text-decoration: underline; text-underline-offset: 3px; }
.trust-stars {
  display: block; color: var(--gold2); font-size: 13px;
  letter-spacing: .12em; line-height: 1; margin-bottom: 5px;
}

#reviews .rv-summary { margin: 0; color: var(--muted); font-size: 15.5px; }
#reviews .rv-summary strong { font-size: 22px; color: var(--ink); }
#reviews .rv-stars { color: #a8863f; letter-spacing: .1em; }
#reviews .rv-asof { display: block; font-size: 13px; margin-top: 4px; }

.rv-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin-top: 26px;
}
.rv-card {
  margin: 0; background: #fff; border: 1px solid var(--line);
  padding: 22px 24px 20px;
}
.rv-card .rv-stars { display: block; font-size: 14px; margin-bottom: 10px; }
.rv-card blockquote {
  margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink);
}
.rv-card blockquote::before { content: "„"; }
.rv-card blockquote::after { content: "“"; }
.rv-card figcaption {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted); font-weight: 600;
}
.rv-card .rv-note {
  display: block; font-weight: 400; font-size: 12.5px; margin-top: 3px;
}

@media (max-width: 980px) {
  .trustgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .rv-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Kategorie-Akkordeons auf /sidirokataskeues/, /exoterikoi-choroi/
   und /koufomata-alouminiou/.

   Im v28-Entwurf war das eine SPA: der Stil dieser Bloecke haengt dort
   durchgehend an `.route-page[data-route="sidiro"]`, und dieses Attribut
   setzte die Route beim Umschalten. Der statische Bau kennt keine
   Routen, also griff keine einzige dieser Regeln — die Seiten zeigten
   rohe <details>: Aufklapp-Dreieck, ein nacktes "+", Bilder ueber die
   volle Breite. Aufgefallen ist es erst jetzt, weil diese Seiten nie
   jemand von oben bis unten angesehen hat.

   Hier steht der Stil unabhaengig von einer Route, am Markup selbst.
   --------------------------------------------------------------- */
.categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 36px 0 72px;
  align-items: start;
}
details.cat {
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}
details.cat > summary {
  display: block;
  position: relative;
  cursor: pointer;
  list-style: none;
}
details.cat > summary::-webkit-details-marker { display: none; }
details.cat > summary:hover h2 { color: var(--gold-text); }
details.cat .summary-photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2, #e8ebec); }
details.cat .summary-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
details.cat .cat-head h2 {
  font-size: 20px; line-height: 1.18; font-weight: 700;
  margin: 16px 46px 16px 18px;
}
details.cat .cat-head .num { display: none; }
details.cat .plus {
  position: absolute; right: 16px; bottom: 13px;
  font-size: 22px; line-height: 1; color: var(--gold-text);
  transition: transform .2s ease;
}
details.cat[open] .plus { transform: rotate(45deg); }
details.cat .body { padding: 2px 18px 18px; border-top: 1px solid var(--line); }
/* Das Foto steht schon im Kopf der Karte — im Koerper waere es doppelt. */
details.cat .body .subsection-photo { display: none; }
details.cat .body p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 14px 0 0; }
details.cat .body ul { margin: 12px 0 0; padding-left: 20px; }
details.cat .body li { font-size: 15px; line-height: 1.55; margin-bottom: 6px; }

/* Auf /exoterikoi-choroi/ steht nur eine Karte. In einem Dreierraster
   sieht ein Drittel mit zwei leeren Spalten daneben nach fehlendem
   Inhalt aus. */
.categories:has(> details.cat:only-child) { grid-template-columns: minmax(0, 520px); }

@media (max-width: 980px) {
  .categories { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .categories { grid-template-columns: 1fr; padding: 26px 0 52px; }
}

/* Karten ohne Unterpunkte: dieselbe Optik, nur ohne Aufklapper. */
.cat.cat-plain { display: block; }
.cat.cat-plain .body { padding-top: 0; border-top: 0; }
.cat.cat-plain .cat-head h2 { margin-bottom: 10px; }
.categories .cat-head h2 a {
  color: inherit; text-decoration: none;
}
.categories .cat-head h2 a:hover { color: var(--gold-text); text-decoration: underline; text-underline-offset: 4px; }
.categories .subgrid { display: grid; gap: 14px; margin-top: 16px; }
.categories .sub b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.categories .sub span { display: block; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.categories .sub .system {
  font-size: 12.5px; letter-spacing: .04em; color: var(--gold-text);
  margin-top: 3px;
}

/* Nur fuer Sprachausgaben sichtbar. Das "+" an der Karte ist ein Zeichen,
   kein Wort — ohne diesen Zusatz hoerte man an dieser Stelle nichts. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Eine Zeile, die direkt unter <main> haengt, hat keinen .wrap um sich
   und beginnt deshalb am linken Rand des Fensters — auf den
   Kategorieseiten fiel das sofort auf, weil alles darueber auf der
   Seitenachse sitzt. Gleiche Breite wie .wrap. */
main > .quiet-contact {
  width: min(1180px, calc(100% - 32px));
  max-width: min(1180px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------
   Direktkontakte: Anschluss, Marios, Kostas.

   Aus dem Nutzertest: drei Nummern gleichrangig nebeneinander, ohne
   dass jemand sah, wen er erreicht. Jetzt steht der Name daneben und
   je Nummer nur der Dienst, der dort wirklich laeuft.
   --------------------------------------------------------------- */
/* Die Zeile ist ein Flex-Paar aus Bezeichnung und Nummer. Die
   Dienstknoepfe brauchen eine eigene Zeile darunter, sonst quetschen
   sie sich zwischen beide. */
.contact-direct li { flex-wrap: wrap; }
.contact-direct .chat-links {
  display: flex; gap: 8px; flex-wrap: wrap;
  width: 100%; justify-content: flex-end; margin: 8px 0 0;
}
.chat-link {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-size: 13px; font-weight: 600;
  color: var(--ink); text-decoration: none; min-height: 30px;
}
.chat-link::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
}
.chat-wa::before { background: #25d366; }
.chat-vi::before { background: #7360f2; }
.chat-link:hover { border-color: #b9aa95; color: var(--gold-text); }

/* ---------------------------------------------------------------
   Vertiefung der Fachtexte: Formel und abgesetzter Hinweis.
   --------------------------------------------------------------- */
.guide-extra { margin-top: 6px; }
.guide-extra .formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; line-height: 1.7;
  background: var(--surface-2, #f1efea);
  padding: 14px 16px; margin: 14px 0 18px;
  overflow-x: auto;
}
.guide-extra .formula sub { font-size: .78em; }
/* Der Absatz, der die Titelfrage beantwortet. Bewusst ohne Rahmen und
   ohne Linie: ein Kasten liest sich als Randbemerkung, und das hier ist
   das Gegenteil davon — es ist die Hauptaussage. Die Auszeichnung ist
   rein typografisch, etwas groesser als der Fliesstext und mit Luft
   darunter, damit klar wird, wo der Einstieg endet. */
.article-full .article-body .guide-answer {
  /* !important, weil site.css .article-detail p auf 16px !important
     festnagelt — eine der 251 Altlasten aus dem v28-Entwurf, siehe den
     Abschnitt weiter oben. Gegen !important hilft keine Spezifitaet. */
  font-size: 18.5px !important;
  line-height: 1.62 !important;
  margin: 0 0 26px !important;
}

@media (max-width: 700px) {
  .article-full .article-body .guide-answer { font-size: 17.5px !important; }
}

.guide-note {
  border-left: 3px solid var(--gold2);
  padding: 2px 0 2px 16px; margin: 20px 0 0;
  color: var(--muted); font-size: 16px;
}

/* ---------------------------------------------------------------
   Tippziele und Kleinstschrift (Befunde d2 und d1 der zweiten Durchsicht)

   WCAG 2.5.8 verlangt fuer Tippziele 24x24 Pixel. Freistehende Textlinks
   dieser Seite waren 17 bis 23 Pixel hoch — auf dem Handy trifft man sie,
   aber man muss zielen. Fuer eine Kundschaft, die in grossen Teilen ueber
   fuenfzig ist, ist das der falsche Aufwand.

   Der Trick bei den inline stehenden Links: senkrechtes Padding an einem
   Inline-Element vergroessert die Trefferflaeche, veraendert aber die
   Zeilenhoehe nicht. Es verschiebt also nichts im Layout, und da diese
   Links keinen Hintergrund haben, sieht man es auch nicht. Wo der Link
   ein Block ist, waechst die Zeile um die fehlenden ein bis zwei Pixel.

   Nicht angefasst: Links mitten im Fliesstext, etwa in den FAQ-Antworten
   oder in der Einwilligungszeile des Formulars. Fuer sie gilt die
   Inline-Ausnahme der Richtlinie; sie hier auseinanderzuziehen wuerde den
   Absatz zerreissen, ohne jemandem zu helfen.
   --------------------------------------------------------------- */
.text-link,
.quiet-contact a,
.sys-official a,
.project-facts dd a,
.sys-facts dd a,
.prog-facts dd a,
.hero-credit a        { padding-block: 4px; }

.cert-doc,
.contact-direct li > a { display: inline-flex; align-items: center;
                         min-height: 24px; }

/* Die Aufklapp-Zeilen der Kategorieseiten sehen 56 Pixel hoch aus, aber
   anklickbar waren nur 24: die 16er-Abstaende der Ueberschrift fallen aus
   dem <summary> heraus (zusammenfallende Aussenabstaende) und landen im
   <details> darueber. Betroffen sind die zwei Zeilen ohne Foto — bei den
   uebrigen verhindert das Bild das Zusammenfallen. flow-root haelt die
   Abstaende innen; die Gesamthoehe der Karte bleibt gleich, nur die
   Trefferflaeche entspricht jetzt dem, was man sieht. */
details.cat > summary { display: flow-root; }

/* Der Hinweis unter den Farbtafeln stand auf 11 Pixeln. Er sagt, dass die
   Farben auf dem Bildschirm nur ungefaehr stimmen und die Wahl am echten
   Muster getroffen wird — genau der Satz, den jemand lesen soll, bevor er
   sich auf eine Abbildung verlaesst. 14 Pixel, wie die uebrige Kleinschrift
   der Seite. Der Fusszeilen-Disclaimer bleibt, wie er ist. */
#finishes .disclaimer { font-size: 14px; line-height: 1.6; }

/* ---------------------------------------------------------------
   Sprungmarken der Startseite (Befund d4 der zweiten Durchsicht)

   Die Startseite ist auf dem Handy rund zwanzig Bildschirme lang und
   hatte keinen Wegweiser. Die Leiste steht unter der Vertrauensleiste
   und nennt die Abschnitte in ihrer Reihenfolge.

   Sie soll ueberflogen werden, nicht gelesen: kleine Schrift, ruhige
   Farbe, keine Kaesten. Auf dem Handy laeuft sie um statt seitwaerts zu
   scrollen — was seitwaerts verschwindet, findet niemand.

   scroll-margin-top haelt die Sprungziele unter der Kopfleiste hervor;
   die Begruendung fuer den Wert steht weiter unten bei der Leiste.
   --------------------------------------------------------------- */
.section-index {
  border-bottom: 1px solid var(--line);
  background: var(--surface, #faf9f7);
  font-size: 14px;
}
.section-index .wrap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px 4px; padding: 10px 0;
}
.si-label {
  color: var(--muted); font-size: 12px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  margin-right: 10px; padding-block: 5px;
}
/* Umrandung statt blossem Text: elf Woerter nebeneinander sehen sonst aus
   wie ein umgebrochener Satz, und man sieht nicht, dass sie anklickbar
   sind. Der Rahmen zeigt zugleich, wie gross die Trefferflaeche ist. */
.section-index a {
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); background: #fff;
  padding: 5px 11px; border-radius: 999px;
  min-height: 26px; display: inline-flex; align-items: center;
}
.section-index a:hover,
.section-index a:focus-visible {
  border-color: var(--gold2); color: var(--gold-text);
}

/* Die Navigationsleiste ist je nach Fensterbreite 77 bis 99 Pixel hoch —
   bei rund 1100 Pixeln bricht das Menue auf zwei Zeilen um. 106 deckt den
   groessten Fall mit etwas Luft ab; auf dem Handy bleibt entsprechend mehr
   Abstand ueber dem Abschnitt, was dort eher guttut. */
main [id] { scroll-margin-top: 106px; }

@media (max-width: 760px) {
  .si-label { width: 100%; margin: 0 0 2px; padding-block: 0; }
  .section-index a { padding: 5px 9px; }
}


/* ---------------------------------------------------------------
   Die Kopfleiste klebt jetzt wirklich

   site.css setzt seit dem Entwurf "position:sticky" auf .nav — gewirkt
   hat es nie. Die Leiste steht in <header class="site-header">, und ein
   klebendes Element kann seinen umschliessenden Block nicht verlassen.
   Der Header ist 126 Pixel hoch, die Leiste 77: nach 49 Pixeln Scrollen
   war Schluss, danach wanderte sie mit nach oben weg. Auf einer Seite
   von zwanzig Bildschirmen hiess das, dass das Menue ab dem zweiten
   Bildschirm unerreichbar war.

   display:contents loest den Header als Kasten auf; Topbar und
   Navigation werden fuer die Anordnung zu direkten Kindern des <body>,
   und damit ist der <body> der umschliessende Block der Leiste. Sie
   klebt von da an ueber die ganze Seite.

   Warum nicht stattdessen den Header selbst klebend machen: dann klebte
   die Topbar mit, also 126 statt 77 Pixel. Auf dem Handy stehen unten
   schon 54 Pixel Anruf-Leiste; zusammen waeren rund 180 von 812 Pixeln
   dauerhaft belegt. Die Adresse und die drei Nummern sind es wert,
   einmal gelesen zu werden, nicht dauernd sichtbar zu sein — der Anruf
   ist auf dem Handy ohnehin unten.

   Der Header hat keine eigene Gestaltung, nur Regeln fuer seine Kinder.
   Die greifen weiter, weil das Element im Baum bleibt; nur sein Kasten
   verschwindet. Die Rolle "banner" bleibt ebenfalls erhalten — geprueft.
   --------------------------------------------------------------- */
.site-header { display: contents; }