/* MCE Baukonzepte – Startseite · Farbwelt Mineral
   Version 11: Montserrat wie Logo und Website, dunkle Kopfzeile mit weißem Logo. Bilder liegen relativ zu dieser Datei. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* =========================================================================
   MCE Baukonzepte – Startseite 05
   Eine Marke, zwei Welten:
     Baumanagement      – technische Zeichnung auf Papier, Ivory und Beige, Schrift schmal bis normal
     Projektentwicklung – Architektur und echte Bilder auf Charcoal, Schrift breit
   Rot hat eine Bedeutung: Was MCE neu einbringt (neue Bauteile in Zeichnungen, MCE im Schema),
   der Status eines Projekts, Pflichtfelder und Fehler, Hover auf Links. Keine Deko-Quadrate, keine roten Ruhe-Unterstriche.
   Alle Aktionen in Charcoal.
   Version 10: drei Flächen (Papier = --grund, Hell = --papier, Tinte = --tief), Typo-Stufen 13 / 15 / 17 / Lead / H3 / H2,
   Version 11: Montserrat. Zwei Stimmen über die Strichstärke: Light 300 ist die Grundstimme (wie „entwickeln“),
   ExtraBold 800 markiert Baumanagement (wie „steuern“). Kopfzeile immer Graphit, Logo weiß.
   Breakpoints: 700px Tablet, 960px zweispaltig, 1280px Desktop-Navigation
   ========================================================================= */

/* Montserrat wird im Seitenkopf von Google Fonts geladen (300, 400, 600, 800). In WordPress lädt Elementor sie bereits. */

/* 1  TOKENS ---------------------------------------------------------------- */
:root {
  /* Farbwelt A – Kalk (Standard): hell, klar, technisch. Mineral Beige nur als ein Markenband.
     Festgelegt ist Mineral: Die Mineral-Tokens unten überschreiben diese Grundwerte.
     Jede Farbwelt: höchstens drei Flächen plus Papier. Rot bleibt Akzent, alle Aktionen dunkel. */
  --grund:   #F4F3F0;   /* Seitengrund */
  --papier:  #FFFFFF;   /* Planblatt, Karten, Formular */
  --flaeche: #E9E7E3;   /* Wechselfläche */
  --band:    #B2A38F;   /* MCE Mineral Beige – Bauen im Bestand */
  --band-text: #1A1A1A; --band-text-2: #2B2825;          /* 7.1 / 6.0:1 */
  --tief:    #1A1A1A;   --tief-2: #262625; --tief-3: #111110;
  --tinte:   #1A1A1A;   --tinte-2: #56524D; --gedaempft: #6F6A63;   /* tinte-2 ≥ 6.3:1 auf allen hellen Flächen */
  --hell:    #F4F3F0;   --hell-2: #B9B4AC;                 /* hell-2 ≥ 7.3:1 auf Tief */
  --kopf:    #F4F3F0;   --kopf-text: #1A1A1A; --kopf-text-2: #56524D; --kopf-linie: rgba(26, 26, 26, .34);
  --kopf-btn: #1A1A1A;  --kopf-btn-text: #F4F3F0;
  --hero:    #F4F3F0;   --hero-text: #1A1A1A; --hero-text-2: #56524D; --hero-rot: #C13D2A;
  --hero-btn: #1A1A1A;  --hero-btn-text: #F4F3F0;
  --btn:     #1A1A1A;   --btn-text: #F4F3F0; --btn-hover: #000000;
  --logo-dunkel: block; --logo-hell: none;
  --buehne: #B2A38F; --buehne-linie: rgba(26, 26, 26, .06); --leiste-akzent: #B2A38F;   /* Hero-Bühne: Plan auf Mineral Beige */
  /* Akzent */
  --rot:        #C13D2A;    /* 4.8:1 Grund, 5.3:1 Papier */
  --rot-tief:   #A3321F;
  --rot-hell:   #E0563F;    /* Marker auf Tief, 4.6:1 */
  --rot-hauch:  rgba(193, 61, 42, .1);
  /* Linien */
  --linie:             rgba(26, 26, 26, .12);
  --linie-mittel:      rgba(26, 26, 26, .32);
  --linie-hell:        rgba(242, 240, 236, .16);
  --linie-hell-mittel: rgba(242, 240, 236, .4);
  --rahmen-eingabe:    #8A857E;  /* 3.7:1 Nicht-Text-Kontrast auf Papier */

  /* Schrift: Montserrat, eine Familie in vier Stärken. Fünf Schnitte, sonst keine:
     Text 400 · Text kräftig 600 · Beschriftung 600 klein (Labels, Bildunterschriften; Kicker in Versalien)
     Display leicht 300 (Grundstimme) · Display kräftig 800 (Baumanagement, „steuern“).
     Die Breiten-Werte unten bleiben als Platzhalter stehen; Montserrat hat keine Breitenachse und ignoriert sie. */
  --ff: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --breit: 125%;
  --schmal: 62%;
  --beschriftung: 82%;
  --leicht: 300;
  --kraeftig: 600;
  --schwer: 800;
  /* Montserrat läuft breiter und mit größerer x-Höhe als Archivo: eine Stufe kleiner gesetzt */
  --t-mikro: .8125rem;
  --t-klein: .875rem;
  --t-text:  1rem;
  --t-lead:  clamp(1.125rem, 1.02rem + .4vw, 1.3125rem);
  --t-h3:    clamp(1.1875rem, 1.06rem + .5vw, 1.4375rem);
  --t-h2:    clamp(1.75rem, 1.05rem + 2.7vw, 3.125rem);
  --t-gross: clamp(2.25rem, .8rem + 5.2vw, 5.25rem);

  /* Raum */
  --g:     clamp(1rem, .4rem + 3vw, 3rem);
  --spalt: clamp(1rem, .5rem + 1.6vw, 2rem);
  --sy:    clamp(3.5rem, 2rem + 4vw, 5.5rem);
  --max:   82.5rem;
  --kopf-h: 4rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 1280px) { :root { --kopf-h: 4.75rem; } }

/* Farbwelt Mineral (festgelegt): Kopf und Hero in Mineral Beige, Abschnitte in Ivory und Weiß. */
:root {
  --grund: #F2EDE8; --papier: #FFFFFF; --flaeche: #E9E3DB;
  --band: #B2A38F; --band-text: #1A1A1A; --band-text-2: #2B2825;
  --tief: #1A1A1A; --tief-2: #262524; --tief-3: #121212;
  --tinte-2: #4F4A44; --gedaempft: #6E675E;
  --hell: #F2EDE8; --hell-2: #BDB5A9;
  --kopf: #B2A38F; --kopf-text: #1A1A1A; --kopf-text-2: #2B2825; --kopf-linie: rgba(26, 26, 26, .4);
  --hero: #B2A38F; --hero-text: #1A1A1A; --hero-text-2: #2B2825;
  --buehne: #C8BDAD;
  --btn-text: #F2EDE8; --kopf-btn-text: #F2EDE8; --hero-btn-text: #F2EDE8;
  --rahmen-eingabe: #8A847C;
}
/* Version 11: Kopfzeile immer Graphit, Logo weiß. Sand = warmes Beige für „Bauen im Bestand“ (Übergang Gewerke → Projekte) */
:root {
  --sand: #D4C5B2;   /* Text Tinte 10,3 : 1, Tinte-2 5,2 : 1 */
  --kopf: #1A1A1A; --kopf-text: #F4F1EC; --kopf-text-2: #CFC8BE; --kopf-linie: rgba(242, 237, 232, .16);
  --kopf-btn: #F2EDE8; --kopf-btn-text: #1A1A1A;
}
/* 2  BASIS ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 1rem); }
html.menue-offen { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--ff); font-size: var(--t-text); font-weight: 400; font-stretch: 100%;
  line-height: 1.6; color: var(--tinte); background: var(--grund);
  -webkit-font-smoothing: antialiased; font-kerning: normal;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
p { max-width: 66ch; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--linie-mittel); }
a:hover { text-decoration-color: currentColor; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
.dunkel :focus-visible { outline-color: var(--hell); }
.dunkel .anfrage :focus-visible { outline-color: var(--tinte); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .75rem 1rem; background: var(--tinte); color: var(--grund); font-weight: var(--kraeftig); }
.skip:focus { top: 1rem; }

/* 3  LAYOUT ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--g)); margin-inline: auto; padding-inline: var(--g); }
.sec { position: relative; padding-block: var(--sy); }
.sec--papier { background: var(--papier); }
.sec--grund { background: var(--grund); }
.sec--flaeche  { background: var(--flaeche); }
.sec--band { background: var(--band); }
.dunkel     { background: var(--tief); color: var(--hell); }

/* 4  TYPOGRAFIE ------------------------------------------------------------ */
.kicker {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem;
  font-size: .75rem; font-weight: var(--kraeftig); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinte-2);
}
.kicker::before { content: ""; width: .55rem; height: .55rem; background: var(--tinte); flex: none; }
.dunkel .kicker { color: var(--hell-2); }
.dunkel .kicker::before { background: var(--hell-2); }
.sec--band .kicker { color: var(--band-text-2); }
.h2 {
  font-size: var(--t-h2); font-stretch: var(--breit); font-weight: var(--leicht);
  line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; max-width: 22ch;
}
.h3 { font-size: var(--t-h3); font-weight: var(--kraeftig); line-height: 1.2; letter-spacing: -.012em; text-wrap: balance; }
.h2 a, .h3 a { text-decoration: none; }
.lead { font-size: var(--t-lead); line-height: 1.45; max-width: 38em; }
.leise { color: var(--tinte-2); }
.dunkel .leise { color: var(--hell-2); }
.sec--band .leise { color: var(--band-text-2); }
.kopfzeile { display: grid; gap: 1.25rem 3rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.kopfzeile__text { display: grid; gap: 1rem; align-content: end; }
@media (min-width: 960px) { .kopfzeile { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
/* Alle Abschnittstitel einheitlich breit und leicht; das kräftige „steuern“ bleibt allein im Hero (MCE 13.10.2026). */


/* 5  AKTIONEN -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .75rem 1.35rem;
  border: 1.5px solid transparent; border-radius: 2px;
  font-size: var(--t-klein); font-weight: var(--kraeftig); font-stretch: 100%; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--voll { background: var(--btn); border-color: var(--btn); color: var(--btn-text); }
.btn--voll:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn--linie { border-color: var(--tinte); color: var(--tinte); background: transparent; }
.btn--linie:hover { background: var(--tinte); color: var(--grund); }
.dunkel .btn--hell { background: var(--grund); border-color: var(--grund); color: var(--tief); }
.dunkel .btn--hell:hover { background: #fff; border-color: #fff; }
.btn--klein { min-height: 2.625rem; padding: .55rem 1rem; font-size: var(--t-klein); }
.btn--gross { min-height: 3.375rem; padding: .9rem 1.6rem; font-size: var(--t-text); }
.btn--breit { width: 100%; }
.btn .pfeil { width: 1.5rem; }

.textlink {
  font-weight: var(--kraeftig); text-decoration-line: underline; text-decoration-color: var(--tinte);
  text-decoration-thickness: 2px; text-underline-offset: .3em;
  transition: text-decoration-color .15s ease;
}
.textlink:hover { text-decoration-color: var(--rot); }
.dunkel .textlink { text-decoration-color: var(--hell); }
.dunkel .textlink:hover { color: #fff; text-decoration-color: var(--rot-hell); }
.sec--band .textlink:hover { color: var(--tinte); }

.pfeillink { display: inline-flex; align-items: center; gap: .75rem; font-weight: var(--kraeftig); text-decoration: none; }
.pfeillink span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .3em; text-decoration-thickness: 2px; transition: text-decoration-color .15s; }
.pfeillink:hover span { text-decoration-color: var(--rot); }
.dunkel .pfeillink:hover span { text-decoration-color: var(--rot-hell); }
.pfeil { width: 2rem; height: .75rem; flex: none; transition: transform .2s var(--ease); }
.pfeillink:hover .pfeil { transform: translateX(.35rem); }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
@media (max-width: 699px) { .aktionen--stapel .btn { width: 100%; } }

/* 6  KOPFZEILE ------------------------------------------------------------- */
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; background: var(--kopf); color: var(--kopf-text); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.kopf :focus-visible { outline-color: var(--kopf-text); }
.kopf .btn--voll { background: var(--kopf-btn); border-color: var(--kopf-btn); color: var(--kopf-btn-text); }
.kopf .btn--voll:hover { opacity: .88; }
.kopf.ist-gescrollt { border-bottom-color: var(--kopf-linie); }
/* Ganz oben liegt die Kopfzeile durchsichtig auf dem Hero (über dem Plan dunkel, über dem Bild hell),
   am Desktop wie am Handy. Sobald gescrollt wird, steht sie wieder auf Mineral Beige. Ohne Skript bleibt sie beige. */
@media all {
  .kopf { transition: background-color .3s ease, border-color .2s ease, color .3s ease; }
  .kopf::before { content: ""; position: absolute; inset: 0 0 -70% 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: linear-gradient(rgba(18, 17, 15, .62), rgba(18, 17, 15, .28) 55%, rgba(18, 17, 15, 0)); }
  html.js:not(.menue-offen) .kopf:not(.ist-gescrollt) { background-color: var(--kopf); }
  html.js:not(.menue-offen) .kopf.auf-foto:not(.ist-gescrollt) {
    --kopf-text: #F4F1EC; --kopf-text-2: #E2DDD5; --kopf-btn: #F2EDE8; --kopf-btn-text: #1A1A1A;
    --logo-sub: #C9C1B6;
  }
  html.js:not(.menue-offen) .kopf.auf-foto:not(.ist-gescrollt)::before { opacity: 0; }
  /* 13.10.2026: Ganz oben trägt die Kopfzeile den warmen Graphit-Ton des Heros statt des neutralen – keine Kante mehr.
     Am Handy ist sie dort durchsichtig, der Hero läuft darunter durch. Beim Scrollen wieder Graphit (--kopf). */
  html.js:not(.menue-offen) .kopf.auf-foto:not(.ist-gescrollt) { background-color: #1F1C18; }
  @media (max-width: 999px) { html.js:not(.menue-offen) .kopf.auf-foto:not(.ist-gescrollt) { background-color: transparent; } }
  /* Ohne Skript (z. B. Dateivorschau am Handy) steht sofort das Endbild: Kopfzeile in Graphit statt Beige */
  html:not(.js) .kopf {
    background: #1F1C18; --kopf-linie: rgba(242, 237, 232, .18);
    --kopf-text: #F4F1EC; --kopf-text-2: #E2DDD5; --kopf-btn: #F2EDE8; --kopf-btn-text: #1A1A1A;
    --logo-sub: #C9C1B6;
  }
  .kopf .btn--voll { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
}
.kopf__leiste { display: flex; align-items: center; gap: 1rem; height: var(--kopf-h); }
/* Logo: Marke wie das Original („MCE“, Linie, „Baukonzepte“), Trennstrich, daneben die Sub-Marke des Bereichs
   als ein Wort in Montserrat Light – „MCE | Handwerk“, „MCE | Sanierung“ … Das Wort steht auf der Grundlinie von „MCE“,
   seine Versalhöhe ist 62 % der von „MCE“. In neutralen Abschnitten bleibt nur die Marke, der Trennstrich blendet aus.
   Alle Maße hängen an der Markenhöhe --marke-h (Einheit --u = 1/73; Versalhöhe „MCE“ 35,6 u, Grundlinie bei 41 u). */
.kopf { --marke-h: 2.5rem; --logo-sub: #C4BAAA; }
@media (min-width: 700px) { .kopf { --marke-h: 2.875rem; } }
@media (min-width: 1280px) { .kopf { --marke-h: 3.25rem; } }
.kopf { --u: calc(var(--marke-h) / 73); --kap: calc(var(--u) * 35.6); --zfs: calc(var(--kap) * .886); }
.kopf__logo { flex: none; display: flex; align-items: flex-start; gap: calc(var(--marke-h) * .2); margin-right: auto; color: var(--kopf-text); text-decoration: none; }
.marke { display: block; flex: none; height: var(--marke-h); width: calc(var(--marke-h) * 1.781); overflow: visible; }
.marke__mce { fill: currentColor; }
.marke__sub { fill: var(--logo-sub, #8B847A); }
.kopf__trenner { flex: none; width: 1px; height: var(--marke-h); background: currentColor; opacity: .35; transition: opacity .35s ease; }
.kopf__logo[data-leer] .kopf__trenner { opacity: 0; }
/* Zeilenhöhe 1,3: Grundlinie liegt bei 1,0085 × Schriftgröße unter der Oberkante (Montserrat 968/251) */
.zusatz {
  display: grid; width: 13.75rem; height: calc(var(--zfs) * 1.3); overflow: hidden;
  margin-top: calc(var(--u) * 41 - var(--zfs) * 1.0085);
  font-size: var(--zfs); font-weight: var(--leicht); line-height: 1.3; letter-spacing: -.005em;
}
.zusatz__text { grid-area: 1 / 1; white-space: nowrap; }
/* Handy: Marke etwas kleiner, Zusatz im Beschriftungsschnitt, Menü nur als Symbol – so passen Logo, „Anfragen“ und Menü in eine Zeile */
@media (max-width: 699px) {
  .kopf__leiste { gap: .5rem; }
  .menue-knopf { min-width: 2.75rem; justify-content: center; padding: .5rem 0; }
  .menue-knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Desktop: „Kontakt“ als eigener Menüpunkt ab 1366 px; darunter fehlt der Platz, dort bleibt er unter „Unternehmen“
   (dort immer). Bis 1440 px heißt der Button kurz „Anfragen“. (15.10.2026, Nutzerwunsch: Kontaktseite war am Desktop nicht verlinkt) */
@media (min-width: 1280px) and (max-width: 1365px) { .hauptnav__liste > li:last-child { display: none; } }
.kopf__cta { flex: none; white-space: nowrap; }
.kopf__cta { display: inline-flex; }
.kopf__cta-lang { display: none; }
@media (min-width: 700px) { .kopf__cta-lang { display: inline; } .kopf__cta-kurz { display: none; } }
@media (min-width: 1280px) and (max-width: 1439px) { .kopf__cta-lang { display: none; } .kopf__cta-kurz { display: inline; } }
/* Sehr schmale Handys (bis 380 px): alles eine Spur kompakter, damit Logo, Button und Menü in eine Zeile passen */
@media (max-width: 380px) {
  .kopf { --marke-h: 2.25rem; }
}
/* Handy: Der Anfrage-Button steht in der Leiste unten (immer sichtbar), damit die Sub-Marke Platz hat */
@media (max-width: 699px) { .kopf__cta { display: none; } }
@media (max-width: 699px) { .kopf__cta { min-height: 2.5rem; padding-inline: .9rem; } }

.menue-knopf { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; padding: .5rem 0 .5rem .5rem; background: none; border: 0; font-weight: var(--kraeftig); cursor: pointer; }
.menue-knopf__icon { position: relative; width: 1.375rem; height: 1.5px; background: currentColor; transition: background-color .2s; }
.menue-knopf__icon::before, .menue-knopf__icon::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .2s ease; }
.menue-knopf__icon::before { top: -6px; }
.menue-knopf__icon::after { top: 6px; }
.menue-knopf[aria-expanded="true"] .menue-knopf__icon { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-knopf__icon::before { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf__icon::after { transform: translateY(-6px) rotate(-45deg); }

.hauptnav { position: fixed; inset: var(--kopf-h) 0 0 0; z-index: 59; display: none; overflow-y: auto; padding: .5rem var(--g) 3rem; background: var(--kopf); border-top: 1px solid var(--kopf-linie); }
.hauptnav.ist-offen { display: block; }
.hauptnav__liste > li { border-bottom: 1px solid var(--kopf-linie); }
.hauptnav__trigger, .hauptnav__link {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; padding: 1rem 0; background: none; border: 0; text-align: left; text-decoration: none; cursor: pointer;
  font-size: var(--t-lead); font-weight: var(--kraeftig);
}
.winkel { width: .7rem; height: .45rem; flex: none; transition: transform .2s ease; }
.hauptnav__trigger[aria-expanded="true"] .winkel { transform: rotate(180deg); }
.hauptnav__menue { display: none; padding: 0 0 1rem; }
.hauptnav__trigger[aria-expanded="true"] + .hauptnav__menue { display: block; }
.hauptnav__menue a { display: block; padding: .5rem 0; color: var(--kopf-text-2); text-decoration: none; }
.hauptnav__menue a:hover { color: var(--kopf-text); text-decoration: underline; text-decoration-color: var(--rot); }
.hauptnav__menue .extern::after { content: " ↗"; font-size: .85em; }
.hauptnav__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; }
.hauptnav__telefon { display: inline-flex; align-items: center; gap: .55rem; font-weight: var(--kraeftig); font-size: var(--t-lead); text-decoration: none; }
.tel-icon { width: 1.125rem; height: 1.125rem; flex: none; }
.sprachen { display: flex; gap: .25rem; }
.sprachen a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; font-size: var(--t-klein); font-weight: var(--kraeftig); text-decoration: none; color: var(--kopf-text-2); }
.sprachen a[aria-current="true"] { color: var(--kopf-text); text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: .35em; }
@media (min-width: 1280px) {
  .menue-knopf { display: none; }
  .kopf__logo img { height: 2.75rem; }
  .hauptnav { position: static; display: flex; align-items: center; gap: 1.25rem; padding: 0; overflow: visible; background: none; border: 0; }
  .hauptnav__liste { display: flex; align-items: center; }
  .hauptnav__liste > li { position: relative; border: 0; }
  .hauptnav__trigger, .hauptnav__link { width: auto; padding: .55rem .6rem; gap: .35rem; font-size: var(--t-klein); }
  .hauptnav__link:hover, .hauptnav__trigger:hover { text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 2px; text-underline-offset: .4em; }
  /* Untermenü schließt bündig an die Unterkante der Kopfzeile an; das Polster überbrückt den Weg der Maus */
  .hat-menue { padding-bottom: calc((var(--kopf-h) - 2.5rem) / 2); margin-bottom: calc((var(--kopf-h) - 2.5rem) / -2); }
  .hauptnav__menue { position: absolute; top: 100%; left: calc(.6rem - 1rem - 1px); min-width: 16rem; padding: .4rem 0; background: var(--papier); border: 1px solid var(--linie-mittel); border-top: 0; box-shadow: 0 14px 32px rgba(18, 17, 15, .16); }
  .hat-menue:hover > .hauptnav__menue, .hat-menue:focus-within > .hauptnav__menue { display: block; }
  .hauptnav__menue a { padding: .5rem 1rem; color: var(--tinte); white-space: nowrap; }
  .hauptnav__menue :focus-visible { outline-color: var(--tinte); }
  .hauptnav__menue a:hover { background: var(--grund); text-decoration: none; }
  .hauptnav__meta { padding: 0; gap: .75rem; flex-wrap: nowrap; }
  /* Mittlere Breiten: Telefon nur als Symbol (Nummer bleibt für Screenreader im Link) */
  .hauptnav__telefon { justify-content: center; width: 2.5rem; height: 2.5rem; font-size: var(--t-klein); }
  .hauptnav__telefon .tel-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sprachen a { min-width: 1.9rem; }
  /* Sprachen als kompakter Umschalter */
  .sprache { position: relative; }
  .sprache__knopf { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding: .3rem .4rem; background: none; border: 0; color: inherit; font-size: var(--t-klein); font-weight: var(--kraeftig); cursor: pointer; }
  .sprache__knopf:hover { text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 2px; text-underline-offset: .4em; }
  .sprache__knopf[aria-expanded="true"] .winkel { transform: rotate(180deg); }
  .sprache .sprachen { display: none; position: absolute; top: calc(100% + (var(--kopf-h) - 2.5rem) / 2); right: 0; z-index: 5; flex-direction: column; gap: 0; min-width: 6.5rem; padding: .3rem 0; background: var(--papier); border: 1px solid var(--linie-mittel); border-top: 0; box-shadow: 0 14px 32px rgba(18, 17, 15, .16); }
  .sprache__knopf[aria-expanded="true"] + .sprachen { display: flex; }
  .sprache .sprachen a { justify-content: flex-start; width: 100%; min-height: 2.5rem; padding: .3rem 1rem; color: var(--tinte); }
  .sprache .sprachen a:hover { background: var(--grund); }
  .sprache .sprachen a[aria-current="true"] { color: var(--tinte); }
}
.sprache__knopf { display: none; }
@media (min-width: 1280px) { .sprache__knopf { display: inline-flex; } }

/* 7  HERO – Plan zu Projekt ------------------------------------------------
   Markenklammer in zwei Schriftbreiten: „entwickeln“ breit und leicht, „steuern“ schmal und kräftig.
   Rechts die Bühne: Neubau Volders zeichnet sich als Plan auf Mineral Beige, dann erscheint das Projekt
   (Lasur, Wischen oder Überblenden). Einmal pro Seitenaufruf. Alle Werte im Skript unter HERO.
   Ohne Skript oder bei reduzierter Bewegung steht sofort das Projektbild. */
.hero {
  --rand: max(var(--g), calc((100vw - var(--max)) / 2));
  --claim-a: clamp(2rem, 10.5vw, 3.75rem);
  --claim-b: clamp(2rem, 10.5vw, 3.75rem);
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--hero); color: var(--hero-text);
}
.hero__oben { display: flex; flex-direction: column; gap: clamp(1.1rem, 2vw, 1.75rem); min-width: 0; padding: 1.6rem var(--g); container-type: inline-size; }
.hero__unten { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; padding: 1.9rem var(--g) 2.75rem; }
.hero__ort { display: flex; align-items: center; gap: .65rem; font-size: var(--t-klein); line-height: 1.3; font-weight: var(--kraeftig); letter-spacing: .005em; }
.hero__ort svg { flex: none; width: 16px; height: 12px; }
.claim { display: flex; flex-direction: column; max-width: none; }
.claim__z { display: block; overflow: hidden; white-space: nowrap; }
.claim__z > span { display: block; }
.claim__z--breit { padding-bottom: .14em; margin-bottom: -.14em; font-size: var(--claim-a); line-height: 1.08; font-stretch: var(--breit); font-weight: var(--leicht); letter-spacing: -.025em; }
.claim__z--schmal { padding-bottom: .08em; margin-bottom: -.08em; font-size: var(--claim-b); line-height: 1.02; font-stretch: var(--schmal); font-weight: var(--schwer); letter-spacing: -.02em; }
.claim__z--ab { margin-top: .1em; }
/* Der ganze Claim steht von Anfang an; beim Laden schieben sich alle vier Zeilen kurz nacheinander von unten in die Zeile (Skript). */
.hero__lead { font-size: var(--t-lead); line-height: 1.5; max-width: 34ch; text-wrap: pretty; }
.hero__hinweis { font-size: .875rem; line-height: 1.4; color: var(--hero-text-2); }
.btn--hero { gap: 1rem; min-height: 3.5rem; padding: 0 1.375rem 0 1.5rem; background: var(--hero-btn); border-color: var(--hero-btn); color: var(--hero-btn-text); }
.btn--hero:hover { opacity: .88; }
.btn--hero .pfeil { width: 1.625rem; }
.hero .textlink { min-height: 2.75rem; display: inline-flex; align-items: center; text-decoration-color: currentColor; }
.hero .textlink:hover { color: inherit; text-decoration-color: var(--hero-rot); }
.hero :focus-visible { outline-color: var(--hero-text); }
@media (min-width: 1000px) {
  .hero {
    --claim-a: clamp(2.5rem, 4.4vw, 4.25rem);
    --claim-b: clamp(2.5rem, 4.4vw, 4.25rem);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto;
    /* Der Hero liegt unter der Kopfzeile, damit sie durchsichtig auf dem Bild stehen kann */
    margin-top: calc(-1 * var(--kopf-h));
    min-height: calc(clamp(40rem, calc(100svh - var(--kopf-h)), 56rem) + var(--kopf-h));
  }
  .hero__oben { grid-area: 1 / 1 / 2 / 2; padding: calc(var(--kopf-h) + clamp(2.5rem, 5vw, 4.75rem)) clamp(1.75rem, 3vw, 3rem) 1.5rem var(--rand); }
  .hero__buehne { grid-area: 1 / 2 / 3 / 3; }
  .hero__unten { grid-area: 2 / 1 / 3 / 2; padding: 1.5rem clamp(1.75rem, 3vw, 3rem) clamp(2.25rem, 4vw, 3.5rem) var(--rand); }
}
/* Claim nie breiter als seine Spalte: Obergrenze aus der Spaltenbreite (Container-Einheiten) */
@supports (width: 1cqi) {
  .hero { --claim-a: min(clamp(2rem, 10.5vw, 3.75rem), 15cqi); --claim-b: min(clamp(2rem, 10.5vw, 3.75rem), 13.2cqi); }
  @media (min-width: 1000px) { .hero { --claim-a: min(clamp(2.5rem, 4.4vw, 4.25rem), 15cqi); --claim-b: min(clamp(2.5rem, 4.4vw, 4.25rem), 13.2cqi); } }
}

/* Bühne */
.hero__buehne { position: relative; margin: 0; min-width: 0; min-height: 0; }
.buehne {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background-color: var(--buehne);
  background-image: linear-gradient(var(--buehne-linie) 1px, transparent 1px), linear-gradient(90deg, var(--buehne-linie) 1px, transparent 1px);
  background-size: 24px 24px;
}
@media (min-width: 1000px) {
  /* Desktop: Die Bühne läuft über die ganze Breite, der Text steht links auf dem Planpapier. */
  .hero {
    background-color: var(--buehne);
    background-image: linear-gradient(var(--buehne-linie) 1px, transparent 1px), linear-gradient(90deg, var(--buehne-linie) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .hero__oben, .hero__unten { position: relative; z-index: 2; }
  .hero__buehne { grid-area: 1 / 1 / 3 / 3; overflow: hidden; }
  .buehne {
    position: absolute; inset: 0 0 0 30%; aspect-ratio: auto; background: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%);
            mask-image: linear-gradient(90deg, transparent, #000 18%);
  }
  /* Endbild „Visualisierung füllt den Hero“: links läuft das Bild als weicher, abgedunkelter Hintergrund
     unter dem Text weiter (Hecke und Rasen vom linken Bildrand, unscharf). Lage und Höhe setzt das Skript
     passend zur Leinwand, damit Rasen und Hecke auf gleicher Höhe anschließen. */
  .buehne__grund {
    display: block; position: absolute; left: 0; right: 0; top: 0; height: 100%;
    background: #3b3f2c url("bilder/hero-grund.webp") 0 0 / 100% 100% no-repeat;
    opacity: 0; transition: opacity .5s ease-out;
  }
  .buehne__grund::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(18, 17, 15, .62) 0%, rgba(18, 17, 15, .5) 30%, rgba(18, 17, 15, .18) 52%, rgba(18, 17, 15, 0) 70%);
  }
  /* Variante „marke“: getönte Transparenz in MCE-Graphit (Tinte mit der Wärme von Mineral Beige).
     Das Bild scheint durch, die Fläche unter dem Text bleibt aber bei jeder Visualisierung gleich ruhig. */
  /* Die Tönung liegt als eigene Schicht ÜBER dem Foto, damit sie über den Bildrand hinaus ins Bild laufen kann
     (--ton-ende: wo sie ausläuft, in % der Hero-Breite). */
  .hero[data-grund="marke"] { --ton-ende: 72%; }
  .hero[data-grund="marke"] .buehne__grund::after { background: none; }
  .hero[data-grund="marke"] .hero__buehne::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0; transition: opacity .5s ease-out;
    background:
      linear-gradient(90deg,
        rgba(31, 28, 24, .9) 0%, rgba(31, 28, 24, .86) calc(var(--ton-ende) * .42),
        rgba(31, 28, 24, .62) calc(var(--ton-ende) * .6), rgba(31, 28, 24, .26) calc(var(--ton-ende) * .78),
        rgba(31, 28, 24, 0) var(--ton-ende)),
      linear-gradient(90deg, rgba(178, 163, 143, .14), rgba(178, 163, 143, 0) calc(var(--ton-ende) * .62));
  }
  .hero[data-grund="marke"].ist-foto .hero__buehne::after, html:not(.js) .hero[data-grund="marke"] .hero__buehne::after { opacity: 1; }
  .hero.ist-foto .buehne__grund, html:not(.js) .buehne__grund { opacity: 1; }
}
/* Fotomodus (alle Breiten): heller Text, heller Button */
.hero.ist-foto, html:not(.js) .hero {
  --hero-text: #F4F1EC; --hero-text-2: #E2DDD5;
  --hero-btn: #F2EDE8; --hero-btn-text: #1A1A1A; --hero-rot: #E0563F;
}
.hero.ist-foto .hero__oben, .hero.ist-foto .hero__unten, html:not(.js) .hero__oben, html:not(.js) .hero__unten { text-shadow: 0 1px 18px rgba(0, 0, 0, .28); }
.hero.ist-foto .btn--hero, html:not(.js) .btn--hero { text-shadow: none; }

/* Handy und Tablet: dieselbe Geschichte im Hochformat. Planpapier hinter allem, die Zeichnung in der Mitte.
   Danach wird die Fläche Graphit, das Projektbild steht in der Mitte und läuft oben und unten weich ins Graphit aus:
   oben der Claim, unten Text und Buttons. Die Kopfzeile liegt durchsichtig darüber. */
@media (max-width: 999px) {
  .hero {
    margin-top: calc(-1 * var(--kopf-h));
    background-color: var(--buehne);
    background-image: linear-gradient(var(--buehne-linie) 1px, transparent 1px), linear-gradient(90deg, var(--buehne-linie) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .hero__oben { position: relative; z-index: 2; padding-top: calc(var(--kopf-h) + 1.75rem); padding-bottom: .5rem; }
  .hero__unten { position: relative; z-index: 2; padding-top: .75rem; }
  .buehne { aspect-ratio: 5 / 4; background: none; }
  @media (min-width: 600px) { .buehne { aspect-ratio: 4 / 3; } }
  .hero__buehne::before, .hero__buehne::after {
    content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
    opacity: 0; transition: opacity .5s ease-out;
  }
  .hero__buehne::before { top: 0; height: 24%; background: linear-gradient(rgba(31, 28, 24, 1), rgba(31, 28, 24, .62) 35%, rgba(31, 28, 24, 0)); }
  .hero__buehne::after { bottom: 0; height: 26%; background: linear-gradient(rgba(31, 28, 24, 0), rgba(31, 28, 24, .7) 64%, rgba(31, 28, 24, 1)); }
  .hero.ist-foto .hero__buehne::before, .hero.ist-foto .hero__buehne::after,
  html:not(.js) .hero__buehne::before, html:not(.js) .hero__buehne::after { opacity: 1; }
  .hero.ist-foto, html:not(.js) .hero { background-color: #1F1C18; background-image: none; }
  .buehne .buehne__marke { bottom: auto; top: .75rem; right: .75rem; }
}
.buehne__grund { display: none; }
@media (min-width: 1000px) { .buehne__grund { display: block; } }
/* Text wechselt erst, wenn der Hintergrund fast steht, und dann zügig: kein langer Moment mit grauem Text */
.hero, .hero .btn--hero { transition: color .35s ease .2s, background-color .35s ease .2s, border-color .35s ease .2s; }
.hero .textlink { transition: text-decoration-color .35s ease .2s, color .35s ease .2s; }
.buehne__leinwand { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.buehne__foto { position: absolute; inset: 0; }
.buehne__foto img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
.buehne__plan { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--tinte); opacity: 0; }
/* Ausgangslage vor dem Skript: Plan sichtbar, Projekt verdeckt. Den Ablauf steuert das Skript (Einstellungen in HERO). */
.js .buehne:not([data-bereit]) .buehne__plan { opacity: 1; }
.js .buehne:not([data-bereit]) .buehne__foto { opacity: 0; }
.buehne__plan { transform-origin: 50% 50%; transition: color .6s ease .15s; }
.hero.ist-foto .buehne__plan, html:not(.js) .buehne__plan { color: rgba(242, 237, 232, .82) !important; }
.buehne__kante { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2px; background: var(--rot); opacity: 0; pointer-events: none; }
/* Übergang „Plan zu Projekt“: Die Zeichnung steht, dann wischt das Projektbild mit weicher Kante (--wisch,
   Anteil der Bildbreite) von rechts über die ganze Fläche. Endbild ist die volle Visualisierung (--wisch -2 %).
   Ohne Skript und bei reduzierter Bewegung steht sofort das Endbild. */
@property --wisch { syntax: "<percentage>"; inherits: true; initial-value: -2%; }
/* 13.10.2026: --foto-rest = Deckkraft des Bildes links von der Kante. 0 = dort nur Zeichnung auf Graphit (Desktop),
   am Handy nach dem Wisch .35 – das Bild scheint abgedunkelt unter der Zeichnung durch, statt einer schwarzen Fläche. */
@property --foto-rest { syntax: "<number>"; inherits: true; initial-value: 0; }
.buehne__leinwand { --wisch: -2%; --weich: 12%; --foto-rest: 0; transition: --foto-rest .9s ease .15s; }
.buehne[data-teilen] .buehne__foto {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, var(--foto-rest)) calc(var(--wisch) - var(--weich)), #000 var(--wisch));
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, var(--foto-rest)) calc(var(--wisch) - var(--weich)), #000 var(--wisch));
}
@media (max-width: 999px) {
  .hero.zeigt-foto .buehne__leinwand, html:not(.js) .buehne__leinwand { --foto-rest: .35; }
}
/* Zeichnung: konstruiert auf dem Rendering (Fluchtpunkte, gemessene Kanten, Geländer Stab für Stab),
   deckungsgleich mit dem Foto. Auf kleinen Bühnen zeigt sie nur jeden zweiten Geländerstab, sonst verschwimmen sie. */
.buehne[data-teilen] .buehne__plan {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wisch) - var(--weich)), transparent calc(var(--wisch) + 2%));
          mask-image: linear-gradient(90deg, #000 calc(var(--wisch) - var(--weich)), transparent calc(var(--wisch) + 2%));
}
.buehne__plan.ist-klein .z-b { display: none; }
/* Schild: Glas statt Kasten. Über dem Plan hell und durchscheinend, über dem Bild dunkel und durchscheinend. */
.buehne__marke {
  position: absolute; right: clamp(1rem, 2.2vw, 2rem); bottom: clamp(1rem, 2.2vw, 2rem); z-index: 2;
  padding: 5px 9px 6px; background: rgba(242, 237, 232, .5); color: var(--tief);
  border: 1px solid rgba(26, 26, 26, .12);
  -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
  font-size: var(--t-mikro); line-height: 1; font-weight: var(--kraeftig); font-stretch: var(--beschriftung); letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}
.buehne[data-marke="projekt"] .buehne__marke, html:not(.js) .buehne__marke {
  background: rgba(20, 19, 17, .28); color: #F4F1EC; border-color: rgba(255, 255, 255, .22);
}
.buehne__marke .m-projekt { display: none; }
.buehne[data-marke="projekt"] .buehne__marke .m-plan, html:not(.js) .buehne__marke .m-plan { display: none; }
.buehne[data-marke="projekt"] .buehne__marke .m-projekt, html:not(.js) .buehne__marke .m-projekt { display: inline; }

/* Die zwei Display-Schnitte stehen nur in Überschriften, nie als einzelnes Wort im Fließtext */

/* Zwei Welten */
.welten { display: grid; gap: var(--spalt); }
.welten > *, .projekt > * { min-width: 0; }
.welt__titel, .projekt__name { hyphens: manual; overflow-wrap: break-word; }
@media (min-width: 820px) { .welten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.welt { display: grid; grid-template-rows: auto 1fr; background: var(--papier); border: 1px solid var(--linie-mittel); }
.welt__bild { position: relative; overflow: hidden; background: var(--flaeche); }
.welt__bild a { display: block; }
.welt__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.2s var(--ease); }
.welt:hover .welt__bild img { transform: scale(1.025); }
@media (max-width: 699px) { .welt__bild img { aspect-ratio: 2 / 1; } .welt__text { font-size: var(--t-klein); } }


.welt__bild figcaption {
  position: absolute; left: 0; bottom: 0; padding: .35rem .7rem;
  background: rgba(26, 26, 26, .82); color: var(--hell);
  font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig);
}
.welt__inhalt { display: grid; gap: 1rem; align-content: start; padding: clamp(1.25rem, .7rem + 1.8vw, 2.25rem); }
.welt__marke { font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); color: var(--tinte-2); }
.welt__titel { font-size: clamp(1.875rem, 1.1rem + 2.2vw, 3rem); line-height: 1.05; }
/* Typografie trägt die zwei Welten: Projektentwicklung breit und leicht wie die Projektnamen, Baumanagement kompakt und kräftig */
.welt--pe .welt__titel { font-stretch: var(--breit); font-weight: var(--leicht); letter-spacing: -.03em; }
.welt--bm .welt__titel { font-stretch: var(--breit); font-weight: var(--leicht); letter-spacing: -.03em; }
.welt__titel a { text-decoration: none; }
.welt__titel a:hover { text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 3px; text-underline-offset: .12em; }
.welt__text { color: var(--tinte-2); max-width: 44ch; }
.welt__wege { margin-top: .25rem; border-top: 1.5px solid var(--tinte); }
.welt__wege a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3rem; padding: .6rem 0; border-bottom: 1px solid var(--linie-mittel);
  font-weight: var(--kraeftig); text-decoration: none;
}
.welt__wege a span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .3em; transition: text-decoration-color .15s; }
.welt__wege a:hover span { text-decoration-color: var(--rot); }
.welt__wege .pfeil { width: 1.5rem; }
.welt__wege a:hover .pfeil { transform: translateX(.3rem); }

/* Nummernbox für echte Abfolgen (Grundstück in drei Schritten) */
.tafel__nr {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border: 1.5px solid var(--tinte); font-size: var(--t-mikro); font-weight: var(--kraeftig); line-height: 1;
}

/* 8  BAUMANAGEMENT: SELBST KOORDINIEREN ODER ÜBER MCE ---------------------- */
.koord__raster { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
.koord__oben { display: grid; gap: 2.5rem var(--spalt); grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "bild" "werte"; }
.koord__text { grid-area: text; display: grid; gap: 1.25rem; align-content: start; }
.koord__text .h2 { max-width: 15ch; }
.koord__bild { grid-area: bild; }
.koord__werte { grid-area: werte; }
@media (min-width: 960px) {
  .koord__oben { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text bild" "werte bild"; column-gap: clamp(2rem, 1rem + 3vw, 5rem); align-items: start; }
  .koord__bild { position: sticky; top: calc(var(--kopf-h) + 1.5rem); }
}
.schalter { display: inline-grid; grid-auto-flow: column; padding: 3px; margin-bottom: 1.25rem; border: 1.5px solid var(--tinte); border-radius: 3px; }
.schalter button { min-height: 2.75rem; padding: .5rem 1rem; border: 0; border-radius: 2px; background: transparent; font-weight: var(--kraeftig); font-size: var(--t-klein); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.schalter button:hover { background: var(--grund); }
.schalter button[aria-pressed="true"] { background: var(--tinte); color: var(--grund); }
html:not(.js) .schalter, html:not(.js) .koord__zeichnung { display: none; }
.koord__zeichnung { min-height: 14rem; }
.koord__bild figcaption { margin-top: 1.25rem; font-size: var(--t-klein); color: var(--tinte-2); max-width: 54ch; }
.k-svg { width: 100%; height: auto; overflow: visible; }
.k-svg text { font-family: var(--ff); font-size: 13px; font-weight: var(--kraeftig); font-stretch: var(--beschriftung); fill: var(--tinte); }
.k-knoten rect { fill: var(--papier); stroke: var(--tinte); stroke-width: 1.5; }
.k-knoten--bauherr rect { fill: var(--tinte); }
.k-knoten--bauherr text { fill: var(--grund); }
.k-knoten--mce { opacity: 0; transition: opacity .3s ease; }
.k-knoten--mce rect { fill: var(--rot); stroke: var(--rot); }
.k-knoten--mce text { fill: #fff; font-size: 15px; }
[data-modus="mce"] .k-knoten--mce { opacity: 1; transition: opacity .45s ease .2s; }
.k-weg { fill: none; stroke: var(--tinte); stroke-width: 1.25; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s ease; }
.k-weg--sehne { stroke: var(--rot); stroke-opacity: .5; stroke-width: 1; }
.k-weg--mce { stroke-width: 1.75; }
.k-weg--haupt { stroke-width: 3.5; }
[data-modus="selbst"] .k-weg--selbst, [data-modus="mce"] .k-weg--mce { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.65, .05, .25, 1) calc(var(--v, 0) * 1ms); }
.k-gruppe { opacity: 0; transition: opacity .3s ease; }
[data-modus="mce"] .k-gruppe { opacity: 1; transition: opacity .5s ease 1s; }
.k-gruppe path { fill: none; stroke: var(--tinte); stroke-width: 1.25; }
.k-gruppe text { font-size: 12px; font-weight: var(--kraeftig); fill: var(--tinte-2); }
.vgl { width: 100%; border-collapse: collapse; }
.vgl th, .vgl td { text-align: left; vertical-align: top; padding: .8rem .75rem .8rem 0; border-top: 1px solid var(--linie-mittel); }
.vgl thead th, .vgl thead td { padding-top: 0; border-top: 0; font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); color: var(--tinte-2); }
.vgl thead th::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .45em; vertical-align: .02em; background: var(--tinte); opacity: 0; transition: opacity .3s ease; }
[data-modus="selbst"] .vgl thead .vgl__selbst::before, [data-modus="mce"] .vgl thead .vgl__mce::before { opacity: 1; }
[data-modus="mce"] .vgl thead .vgl__mce::before { background: var(--rot); }
.vgl tbody th { width: 38%; font-weight: 400; font-size: var(--t-klein); line-height: 1.35; }
.vgl td { font-size: var(--t-klein); line-height: 1.3; color: var(--tinte); transition: color .3s ease; }
.vgl .vgl__mce { padding-left: .85rem; background: var(--grund); }
.vgl thead .vgl__mce { padding-top: .6rem; }
.vgl .zahl { display: block; margin-bottom: .1rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-stretch: var(--breit); font-weight: var(--leicht); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
[data-modus="mce"] .vgl td.vgl__selbst { color: var(--gedaempft); }
@media (max-width: 699px) { .vgl tbody th { width: 34%; } .vgl .zahl { font-size: 1.375rem; } }
.koord__hinweis { margin-top: 1rem; font-size: var(--t-mikro); color: var(--tinte-2); }

/* Zwei Abwicklungsmodelle als kurze Zeilen – der volle Vergleich mit Vertragsschema steht auf den Unterseiten */
.modelle-kurz { display: grid; border-top: 1.5px solid var(--tinte); }
@media (min-width: 820px) { .modelle-kurz { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); } }
.modell-zeile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.5rem; align-items: center; padding: 1.25rem 0 1.35rem; border-bottom: 1px solid var(--linie-mittel); }
.modell-zeile__name { font-size: var(--t-h3); font-weight: var(--kraeftig); line-height: 1.15; }
.modell-zeile__name a { text-decoration: none; }
.modell-zeile__name a::after { content: ""; position: absolute; inset: 0; }
.modell-zeile__text { grid-column: 1; font-size: var(--t-klein); color: var(--tinte-2); }
.modell-zeile__text b { color: var(--tinte); font-weight: var(--kraeftig); }
.modell-zeile .pfeil { grid-column: 2; grid-row: 1 / span 2; transition: transform .2s var(--ease); }
.modell-zeile:hover .pfeil { transform: translateX(.35rem); }
.modell-zeile:hover .modell-zeile__name a { text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 2px; text-underline-offset: .25em; }

/* 9  GEWERKE – drei Schichten wie im Bauteilaufbau (aus 04), Zeichnungen aus 03 -------------- */
.gw { background: var(--grund); }
.schichten { border-top: 1.5px solid var(--tinte); }
.schicht { position: relative; display: grid; gap: 1rem var(--spalt); padding: 1.5rem 0 1.5rem 1.85rem; border-bottom: 1px solid var(--linie-mittel); }
/* Schichtsymbol am Rand: Schraffur für Rohbau, zwei Leitungen für Haustechnik, Lagen für Ausbau */
.schicht::before { content: ""; position: absolute; left: 0; top: 1.6rem; bottom: 1.6rem; width: .65rem; }
.schicht--rohbau::before { background: repeating-linear-gradient(45deg, var(--tinte) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--tinte); }
.schicht--technik::before { background: linear-gradient(90deg, transparent 0 1px, var(--tinte) 1px 2.5px, transparent 2.5px 6.5px, var(--rot) 6.5px 8px, transparent 8px); }
.schicht--ausbau::before { background: repeating-linear-gradient(0deg, var(--tinte) 0 1px, transparent 1px 4px); }
@media (min-width: 960px) { .schicht { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); padding-left: 2.5rem; } }
.schicht__kopf { display: grid; gap: .3rem; align-content: start; }
.schicht__anzahl { font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); color: var(--tinte-2); }
.gw__raster {
  --px-line: var(--tinte); --px-hatch: rgba(26, 26, 26, .42); --px-accent: var(--rot);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem;
}
.gkachel a {
  position: relative; display: grid; grid-template-rows: 1fr auto; height: 100%; min-height: 8.75rem;
  padding: .85rem 1rem 1rem; background: var(--papier); border: 1px solid var(--linie-mittel); text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.gkachel a:hover { background: var(--grund); border-color: var(--tinte); }
.gpic { width: 100%; max-width: 7rem; height: auto; margin: .6rem auto .8rem; overflow: visible; }
.gkachel__name { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; font-weight: var(--kraeftig); line-height: 1.25; hyphens: manual; }
.gkachel__name span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .25em; transition: text-decoration-color .15s; }
.gkachel a:hover .gkachel__name span { text-decoration-color: var(--rot); }
.gkachel .pfeil { width: 1.25rem; opacity: 0; transform: translateX(-.3rem); transition: opacity .15s ease, transform .2s var(--ease); }
.gkachel a:hover .pfeil, .gkachel a:focus-visible .pfeil { opacity: 1; transform: none; }
@media (hover: none) { .gkachel .pfeil { opacity: .55; transform: none; } }
/* Handy: Zeilen mit Zeichnung links, nichts steht allein */
@media (max-width: 699px) {
  .schicht { padding-left: 1.5rem; }
  .gw__raster { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--linie-mittel); }
  .gkachel a { display: flex; align-items: center; gap: 1rem; min-height: 0; padding: .35rem .25rem; border-width: 0 0 1px; background: transparent; }
  .gpic { flex: none; width: 3.75rem; margin: 0; }
  .gkachel__name { flex: 1; align-items: center; }
}
.px-l   { fill: none; stroke: var(--px-line); stroke-width: 1.5; stroke-linejoin: round; }
.px-t   { fill: none; stroke: var(--px-line); stroke-width: .9; opacity: .8; }
.px-l4  { fill: none; stroke: var(--px-line); stroke-width: 4; stroke-linecap: round; }
.px-z   { fill: none; stroke: var(--px-hatch); stroke-width: 1; stroke-dasharray: 3 3; }
.px-h   { fill: url(#pxh); stroke: var(--px-line); stroke-width: 1.2; }
.px-d   { fill: url(#pxd); stroke: var(--px-line); stroke-width: 1.2; }
.px-hl  { stroke: var(--px-hatch); stroke-width: 1; }
.px-dl  { fill: var(--px-hatch); }
.px-a   { fill: none; stroke: var(--px-accent); stroke-width: 2.2; stroke-linejoin: round; }
.px-a3  { fill: none; stroke: var(--px-accent); stroke-width: 3; }
.px-a5  { fill: none; stroke: var(--px-accent); stroke-width: 5; stroke-linejoin: miter; }
.px-af  { fill: var(--px-accent); }
.px-dot { fill: var(--px-line); }
.px-txt { fill: var(--px-line); font-family: var(--ff); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); font-size: 9px; }

/* Gewerke in Bewegung: nur das rote, neue Bauteil baut sich auf – beim Einblenden einmal, danach bei Hover oder Fokus */
.gpic [data-a] { transform-box: fill-box; }
.spielt [data-a] { animation-duration: .7s; animation-timing-function: cubic-bezier(.65, .05, .25, 1); animation-fill-mode: both; animation-delay: calc(var(--start, 0ms) + var(--d, 0s)); }
.spielt [data-a="ziehen"] { stroke-dasharray: var(--len, 200); animation-name: g-ziehen; }
.spielt [data-a="wachsen-x"] { transform-origin: left center; animation-name: g-wachsen-x; }
.spielt [data-a="wachsen-y"] { transform-origin: center bottom; animation-name: g-wachsen-y; }
.spielt [data-a="rein-links"] { animation-name: g-rein-links; }
.spielt [data-a="rein-rechts"] { animation-name: g-rein-rechts; }
.spielt [data-a="fallen"] { animation-name: g-fallen; animation-duration: .45s; }
.spielt [data-a="drehen"] { transform-origin: center; animation-name: g-drehen; animation-duration: 1.1s; }
.spielt [data-a="rollen"] { animation-name: g-rollen; }
@keyframes g-ziehen { from { stroke-dashoffset: var(--len, 200); } to { stroke-dashoffset: 0; } }
@keyframes g-wachsen-x { from { transform: scaleX(0); } }
@keyframes g-wachsen-y { from { transform: scaleY(0); } }
@keyframes g-rein-links { from { transform: translateX(-14px); opacity: 0; } }
@keyframes g-rein-rechts { from { transform: translateX(14px); opacity: 0; } }
@keyframes g-fallen { from { transform: translateY(-12px); opacity: 0; } }
@keyframes g-drehen { from { transform: rotate(-270deg); } }
@keyframes g-rollen { from { transform: translateY(-42px); } }

.gw__fuss { display: grid; gap: 1.75rem var(--spalt); margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
@media (min-width: 960px) { .gw__fuss { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; } .gw__fuss .aktionen { justify-content: flex-end; } }
.ablauf { display: grid; gap: .9rem; counter-reset: ablauf; }
.ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem var(--spalt); }
@media (min-width: 700px) { .ablauf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ablauf li { counter-increment: ablauf; display: grid; gap: .2rem; padding-top: .7rem; border-top: 1.5px solid var(--tinte); font-size: var(--t-klein); line-height: 1.4; }
.ablauf b { font-weight: var(--kraeftig); }
.ablauf b::before { content: counter(ablauf) " "; color: var(--tinte-2); }
.ablauf span { color: var(--tinte-2); }

/* 10  BAUEN IM BESTAND ----------------------------------------------------- */
.bestand { background: var(--sand); color: var(--tinte); }
.bestand .kopfzeile { margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 4rem); }
.bestand .lead { color: var(--tinte); }
.bestand__plan { display: grid; gap: var(--spalt); margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
/* Zwischenband im hellen Beige: die drei Leistungsgruppen als eigener Streifen zwischen Plan und Ergebnissen */
.umfang-band { background: var(--grund); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); margin-block: clamp(1rem, .5rem + 2vw, 2rem) clamp(3rem, 2rem + 3vw, 4.5rem); }
.umfang-band .umfang { padding-top: 0; border-top: 0; }
.umfang-band + .wrap .ergebnisse { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 960px) { .bestand__plan { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; } }
.planblatt { background: var(--papier); padding: clamp(.75rem, .3rem + 1.6vw, 1.75rem); border: 1px solid var(--linie-mittel); outline: 1px solid var(--linie); outline-offset: -.5rem; }
.schnitt { width: 100%; height: auto; }
.schnitt .sch-schraffur { stroke: var(--tinte); stroke-width: .8; }
.schnitt .bestand-teile > * { fill: url(#sch-bestand); stroke: var(--tinte); stroke-width: 1.2; }
.schnitt .erde { fill: url(#sch-erde); }
.schnitt .sch-erdlinie { stroke: var(--tinte); stroke-width: .7; opacity: .45; }
.schnitt .gelaende { stroke: var(--tinte); stroke-width: 1.6; }
.schnitt .achse { stroke: var(--tinte); stroke-width: .75; stroke-dasharray: 18 4 3 4; opacity: .45; }
.schnitt .daemm { stroke: var(--rot); stroke-width: 1.4; }
.schnitt .daemm--v { fill: url(#sch-daemm-v); }
.schnitt .daemm--h { fill: url(#sch-daemm-h); }
.schnitt .sch-daemmlinie { fill: none; stroke: var(--rot); stroke-width: .9; }
.schnitt .fenster { fill: var(--papier); stroke: var(--rot); stroke-width: 1.5; }
.schnitt .glas { stroke: var(--rot); stroke-width: 1; }
.schnitt .leitung { fill: none; stroke: var(--rot); stroke-width: 1.6; stroke-dasharray: 7 4; }
.schnitt .anschluss { fill: var(--papier); stroke: var(--rot); stroke-width: 1.4; }
.schnitt .geraet { fill: var(--rot-hauch); stroke: var(--rot); stroke-width: 1.5; }
.schnitt .geraet-luefter { fill: none; stroke: var(--rot); stroke-width: 1.2; }
.schnitt .abbruch { fill: none; stroke: var(--tinte); stroke-width: 1.3; stroke-dasharray: 4 3; }
.schnitt .neu-flaeche { fill: var(--rot); stroke: var(--rot); stroke-width: 1; }
.schnitt .marke circle { fill: var(--papier); stroke: var(--rot); stroke-width: 1.5; }
.schnitt .marke line { stroke: var(--rot); stroke-width: 1; }
.schnitt .marke text { font-family: var(--ff); font-size: 13px; font-weight: var(--kraeftig); text-anchor: middle; fill: var(--rot); }
.schnitt .kote polygon { fill: var(--tinte); }
.schnitt .kote line { stroke: var(--tinte); stroke-width: 1; }
.schnitt .kote text, .schnitt .sch-text { font-family: var(--ff); font-size: 12px; font-weight: var(--kraeftig); font-stretch: var(--beschriftung); fill: var(--tinte-2); }
.schnitt .neu-gruppe, .schnitt .bestand-teile { transition: opacity .25s ease; }
.schnitt[data-fokus] .neu-gruppe { opacity: .14; }
.schnitt[data-fokus] .bestand-teile { opacity: .45; }
.schnitt[data-fokus="huelle"] [data-teil="huelle"], .schnitt[data-fokus="fenster"] [data-teil="fenster"],
.schnitt[data-fokus="technik"] [data-teil="technik"], .schnitt[data-fokus="grundriss"] [data-teil="grundriss"] { opacity: 1; }
.planlegende { display: grid; gap: 1rem; align-content: start; }
@media (max-width: 699px) {
  .planblatt { margin-inline: calc(var(--g) * -1); padding: .5rem .25rem; border-width: 1px 0; outline: 0; }
  .schnitt .marke text { font-size: 18px; }
  .schnitt .kote text, .schnitt .sch-text { font-size: 19px; }
}
.planlegende__titel { font-weight: var(--kraeftig); }
.planlegende__liste { display: grid; gap: .25rem; }
.planlegende__liste button {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  width: 100%; padding: .65rem .7rem; margin-inline: -.7rem;
  border: 1px solid transparent; border-radius: 2px; background: none;
  text-align: left; font-size: var(--t-klein); line-height: 1.4; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.planlegende__liste button:hover, .planlegende__liste button[aria-pressed="true"] { background: var(--grund); border-color: var(--linie-mittel); }
.planlegende__liste b { font-weight: var(--kraeftig); }
.nr { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1.5px solid var(--rot); border-radius: 50%; background: var(--papier); color: var(--rot); font-size: .8125rem; font-weight: var(--kraeftig); line-height: 1; }
.zeichen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); }
.zf { display: inline-block; width: 1.4rem; height: .8rem; margin-right: .4rem; vertical-align: -.1em; }
.zf--bestand { border: 1px solid var(--tinte); background: repeating-linear-gradient(45deg, var(--tinte) 0 1px, var(--papier) 1px 4px); }
.zf--abbruch { border: 1.5px dashed var(--tinte); }
.zf--neu { background: var(--rot); }
.planlegende__hinweis { font-size: var(--t-mikro); color: var(--tinte-2); }

/* Leistungsumfang: drei Gruppen, jeder Eintrag ein Link */
.umfang { display: grid; gap: 2rem var(--spalt); padding-top: 2rem; border-top: 1.5px solid var(--tinte); }
@media (min-width: 700px) { .umfang { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.umfang__titel { margin-bottom: .6rem; font-size: var(--t-klein); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); letter-spacing: .01em; }
.umfang__gruppe > summary { list-style: none; }
.umfang__gruppe > summary::-webkit-details-marker { display: none; }
@media (min-width: 700px) { .umfang__gruppe > summary { pointer-events: none; } }
@media (max-width: 699px) {
  .umfang { gap: 0; padding-top: 0; border-top: 0; }
  .umfang__gruppe { border-top: 1px solid var(--linie-mittel); }
  .umfang__gruppe:last-child { border-bottom: 1px solid var(--linie-mittel); }
  .umfang__gruppe > summary { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; cursor: pointer; }
  .umfang__gruppe > summary::after { content: ""; width: .5rem; height: .5rem; margin-right: .25rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
  .umfang__gruppe[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .umfang__gruppe .umfang__titel { margin: 0; font-size: var(--t-text); }
  .umfang__gruppe .umfang__liste { padding-bottom: .75rem; }
  .umfang__liste li:last-child a { border-bottom: 0; }
}
.umfang__liste a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 2.75rem; padding: .5rem 0; border-top: 1px solid rgba(26, 26, 26, .28);
  font-weight: 400; text-decoration: none;
}
.umfang__liste li:last-child a { border-bottom: 1px solid rgba(26, 26, 26, .28); }
.umfang__liste a span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .25em; transition: text-decoration-color .15s; }
.umfang__liste a:hover span { text-decoration-color: var(--rot); }
.umfang__liste .pfeil { width: 1.25rem; }
.umfang__liste a:hover .pfeil { transform: translateX(.3rem); }
.umfang__liste .werkzeug span::after { content: "Werkzeug"; margin-left: .55rem; padding: .05rem .4rem; border: 1px solid var(--tinte); font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); vertical-align: .08em; text-decoration: none; display: inline-block; }

/* Ergebnisse aus Sanierungen: ein echtes Beispiel, dazu Platzhalter für Vorher/Nachher */
.ergebnisse { display: grid; gap: 1.5rem; margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); padding-top: 2rem; border-top: 1.5px solid var(--tinte); }
.ergebnisse__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.ergebnisse__raster { display: grid; gap: var(--spalt); }
@media (min-width: 1000px) { .ergebnisse__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.erg { display: grid; gap: .9rem; align-content: start; padding: .75rem .75rem 1rem; background: var(--grund); color: var(--tinte); border: 1px solid var(--linie-mittel); }
.erg--platz { background: transparent; border: 0; outline: 1.5px dashed rgba(26, 26, 26, .45); outline-offset: -1.5px; }
.erg__bilder, .erg__vn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.erg__bilder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.erg__slot {
  position: relative; display: block; aspect-ratio: 1 / 1;
  background: repeating-linear-gradient(45deg, rgba(26, 26, 26, .1) 0 1px, transparent 1px 9px), rgba(255, 255, 255, .35);
}
.ph-marke { position: absolute; left: .5rem; top: .5rem; padding: .2rem .45rem; background: var(--tief); color: var(--hell); font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); letter-spacing: .05em; text-transform: uppercase; }
.erg__titel { font-size: var(--t-lead); font-weight: var(--kraeftig); line-height: 1.25; padding-inline: .25rem; }
.erg--platz .erg__titel { color: var(--tinte-2); }
.erg__daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linie-mittel); }
.erg__daten > div { padding: .5rem .25rem .55rem; border-bottom: 1px solid var(--linie-mittel); min-width: 0; }
.erg__daten > div:nth-child(2) { padding-left: .75rem; border-left: 1px solid var(--linie-mittel); }
.erg__daten .voll { grid-column: 1 / -1; }
.erg__daten dt { font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); color: var(--tinte-2); }
.erg__daten dd { font-size: var(--t-klein); font-weight: 400; line-height: 1.35; }
.erg__hinweis { padding-inline: .25rem; font-size: var(--t-mikro); color: var(--tinte-2); }

/* 11  PROJEKTE – Architektur auf Charcoal ---------------------------------- */
.projekte__kopf { display: grid; gap: 1.5rem var(--spalt); margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 960px) { .projekte__kopf { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.projekte__intro { display: grid; gap: 1.25rem; justify-items: start; }
.projekte__these { font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem); font-stretch: var(--breit); font-weight: var(--leicht); line-height: 1.2; letter-spacing: -.015em; max-width: 30ch; }
.gruppe { max-width: none; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2rem, 1.2rem + 2vw, 3rem); padding-top: .8rem; border-top: 1.5px solid var(--hell); font-size: var(--t-klein); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); }
.gruppe span { color: var(--hell-2); font-stretch: 100%; font-weight: 400; }
@media (max-width: 599px) { .gruppe { flex-direction: column; gap: .15rem; } }
.projekt { display: grid; gap: 1.5rem var(--spalt); margin-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
.projekt__name { font-size: var(--t-gross); font-stretch: var(--breit); font-weight: var(--leicht); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.projekt__name a { text-decoration: none; }
.projekt__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; text-decoration-color: var(--rot-hell); }

.projekt__hauptbild { position: relative; overflow: hidden; }
.projekt__hauptbild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--tief-2); }
.projekt__hauptbild figcaption { position: absolute; left: 0; bottom: 0; padding: .35rem .7rem; background: rgba(18, 18, 18, .82); color: var(--hell); font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); }
.projekt__seite { display: grid; gap: 1.5rem; align-content: start; justify-items: start; }
.projekt__seite > * { width: 100%; }
.projekt__seite > .pfeillink { width: auto; }
.projekt__satz { font-size: var(--t-lead); line-height: 1.45; }
.projekt__detail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 699px) { .projekt__detail { display: none; } }
@media (min-width: 960px) {
  .projekt { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .projekt__name { grid-column: 1 / -1; }
  .projekt__hauptbild { grid-column: 1 / span 8; }
  .projekt__hauptbild img { aspect-ratio: 3 / 2; }
  .projekt__seite { grid-column: 9 / -1; }
  .projekt--gespiegelt .projekt__name { text-align: right; }
  .projekt--gespiegelt .projekt__hauptbild { grid-column: 5 / -1; grid-row: 2; }
  .projekt--gespiegelt .projekt__seite { grid-column: 1 / span 4; grid-row: 2; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .projekt__hauptbild img { opacity: 0; transform: scale(1.05); transition: opacity 1.2s var(--ease), transform 1.8s var(--ease); }
  .js .projekt.ist-sichtbar .projekt__hauptbild img { opacity: 1; transform: none; }
}
/* Projektstempel nach dem Vorbild des Plankopfs: Rolle und Status immer zuerst */
.stempel { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linie-hell-mittel); border: 1px solid var(--linie-hell-mittel); }
.stempel__feld { padding: .6rem .85rem .7rem; background: var(--tief); }
.stempel__feld--voll { grid-column: 1 / -1; }
.stempel dt { font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); color: var(--hell-2); }
.stempel dd { margin-top: .1rem; font-weight: 400; line-height: 1.35; }
.stempel .stempel__wert { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); font-stretch: var(--breit); font-weight: var(--leicht); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stempel__rolle dd { font-weight: var(--kraeftig); }
.status::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .55em; vertical-align: .02em; background: var(--rot-hell); }
.angebote { border-top: 1px solid var(--linie-hell-mittel); }
.angebot { display: grid; gap: .3rem; padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--linie-hell); }
.angebot__titel { font-size: var(--t-text); font-weight: var(--kraeftig); line-height: 1.35; }
.angebot__titel a { text-decoration-color: var(--linie-hell-mittel); }
.angebot__titel a:hover { text-decoration-color: var(--rot-hell); }
.angebot__daten { font-size: var(--t-klein); color: var(--hell-2); }
.angebot__art { font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); color: var(--hell-2); }
.angebot__preis { margin-top: .2rem; font-weight: var(--kraeftig); font-variant-numeric: tabular-nums; }
.angebot__preis span { display: block; font-size: var(--t-mikro); font-weight: 400; color: var(--hell-2); }

/* Kundenreferenzen Baumanagement – Platzhalter bis zur Freigabe */
.referenzen { display: grid; gap: var(--spalt); }
@media (min-width: 1000px) { .referenzen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.referenzen > * { min-width: 0; }
.stempel dd { overflow-wrap: anywhere; hyphens: auto; }
.ref { display: grid; gap: 1.1rem; align-content: start; padding: clamp(1rem, .6rem + 1.2vw, 1.5rem); border: 1.5px dashed var(--linie-hell-mittel); }
.ref__bild {
  position: relative; display: grid; place-items: center; aspect-ratio: 21 / 9;
  background: repeating-linear-gradient(45deg, rgba(242, 237, 232, .07) 0 1px, transparent 1px 9px), var(--tief-2);
  color: var(--hell-2); font-size: var(--t-klein); font-stretch: var(--beschriftung); font-weight: var(--kraeftig);
}
.ref__marke { position: absolute; top: .7rem; left: .7rem; padding: .2rem .5rem; background: var(--grund); color: var(--tief); font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); letter-spacing: .05em; text-transform: uppercase; }
.ref__titel { font-size: var(--t-h3); font-weight: var(--kraeftig); line-height: 1.2; color: var(--hell-2); }
.ref .stempel__feld { background: var(--tief); }
.ref__hinweis { font-size: var(--t-mikro); color: var(--hell-2); }
/* Projekte als Angebot: Preis im Stempel, Wohnungstabelle, eine Aktion pro Projekt */
.stempel .stempel__wert--preis { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem); white-space: nowrap; }
.stempel__wert--preis .ab { font-size: .6em; letter-spacing: 0; color: var(--hell-2); }
.stempel dd .leise { font-size: var(--t-klein); }
.einheiten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.einheiten caption { padding-bottom: .55rem; text-align: left; font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); color: var(--hell-2); }
.einheiten th, .einheiten td { padding: .6rem .5rem .6rem 0; text-align: left; vertical-align: top; border-top: 1px solid var(--linie-hell); }
.einheiten thead th { padding-top: 0; border-top: 0; font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); color: var(--hell-2); }
.einheiten tbody tr:last-child > * { border-bottom: 1px solid var(--linie-hell); }
.einheiten tbody th { font-weight: var(--kraeftig); line-height: 1.3; }
.einheiten tbody th span { display: block; font-size: var(--t-mikro); font-weight: 400; color: var(--hell-2); }
.einheiten .zahl-sp { text-align: right; white-space: nowrap; }
.einheiten th.zahl-sp:last-child, .einheiten td.zahl-sp:last-child { padding-right: 0; }
.einheiten .preis { font-weight: var(--kraeftig); }
.einheiten__zusatz { font-size: var(--t-klein); color: var(--hell-2); }
.projekt__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.projekt__fussnote { font-size: var(--t-mikro); color: var(--hell-2); }
.btn--linie-hell { border-color: var(--hell); color: var(--hell); }
.btn--linie-hell:hover { background: var(--hell); color: var(--tief); }
@media (max-width: 699px) { .projekt__aktionen .btn { width: 100%; } }

.projekte__fuss { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* 12  GRUNDSTÜCK UND PROJEKTENTWICKLUNG FÜR DRITTE ------------------------- */
.grund { background: var(--papier); }
.grund__raster { --gg: clamp(3rem, 1.5rem + 4vw, 7rem); display: grid; gap: 3rem var(--gg); }
@media (min-width: 960px) { .grund__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grund__weg { position: relative; display: grid; gap: 1.25rem; align-content: start; }
/* Desktop: beide Spalten teilen sich vier Zeilen (Titel, Text, Liste, Aktionen). So stehen Listen-Anfang und
   Buttons links und rechts in einer Flucht, auch wenn die Texte unterschiedlich lang sind. */
@media (min-width: 960px) {
  .grund__raster { grid-template-rows: auto auto 1fr auto; row-gap: 1.25rem; }
  .grund__weg { grid-row: span 4; grid-template-rows: subgrid; gap: 1.25rem 0; }
  .grund__weg > .aktionen { align-self: end; padding-top: .75rem; }
  @supports not (grid-template-rows: subgrid) {
    .grund__weg { display: flex; flex-direction: column; }
    .grund__weg > .aktionen { margin-top: auto; }
  }
}
.grund__weg + .grund__weg { padding-top: 2.5rem; border-top: 1.5px solid var(--tinte); }
@media (min-width: 960px) {
  .grund__weg + .grund__weg { padding-top: 0; border-top: 0; }
  .grund__weg + .grund__weg::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--gg) / -2); width: 1.5px; background: var(--tinte); }
}
.grund__schritte { display: grid; align-content: start; border-top: 1px solid var(--linie-mittel); }
.grund__schritte li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: .85rem 0; border-bottom: 1px solid var(--linie-mittel); font-size: var(--t-klein); }
.grund__schritte .tafel__nr { grid-row: auto; margin-top: 0; }
/* Rechte Liste im selben Aufbau wie die Schritte links: Linie oben, Zeilen mit Trennlinie – erste Zeilen stehen in einer Flucht */
.grund__liste { display: grid; align-content: start; border-top: 1px solid var(--linie-mittel); }
.grund__liste li { display: grid; grid-template-columns: 1.75rem 1fr; gap: 1rem; align-items: start; padding: .85rem 0; border-bottom: 1px solid var(--linie-mittel); font-size: var(--t-klein); }
.grund__liste li::before { content: ""; justify-self: center; width: .5rem; height: .5rem; margin-top: .5em; background: var(--tinte); }

/* 13  BELEGE: BEWERTUNGEN UND FAKTEN --------------------------------------- */
.belege__raster { display: grid; gap: 2.5rem var(--spalt); }
@media (min-width: 960px) { .belege__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.belege__kopf { justify-items: start; }
.belege__raster .fakten { align-self: start; }
.sterne { display: flex; align-items: center; gap: .6rem; font-size: var(--t-klein); }
.sterne svg { width: 6rem; height: 1.1rem; color: var(--tinte); }
.fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; width: 100%; background: var(--linie-mittel); border: 1px solid var(--linie-mittel); }
.fakten div { padding: .6rem .8rem .7rem; background: var(--grund); }
.fakten dt { font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); color: var(--tinte-2); }
.fakten dd { font-weight: var(--kraeftig); line-height: 1.3; }
.stimmen { display: grid; gap: var(--spalt); align-items: start; }   /* Karten so hoch wie ihr Zitat, keine leeren Flächen */
@media (min-width: 700px) { .stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stimme { display: grid; gap: 1rem; align-content: start; padding: 1.25rem 1.25rem 1.1rem; background: var(--papier); border: 1px solid var(--linie-mittel); }
.stimme blockquote { font-size: var(--t-text); line-height: 1.5; }
.stimme figcaption { font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); color: var(--tinte-2); }

/* 14  KONTAKT -------------------------------------------------------------- */
.kontakt__raster { display: grid; gap: 3rem var(--spalt); }
@media (min-width: 960px) { .kontakt__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 1rem + 3vw, 5rem); align-items: start; } }
.kontakt__info { display: grid; gap: 1.25rem; align-content: start; }
.kontakt__titel { font-size: var(--t-h2); font-stretch: var(--breit); font-weight: var(--leicht); line-height: 1.02; letter-spacing: -.038em; }

.ansprechpartner { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: center; margin-top: .5rem; }
.ansprechpartner__bild { display: grid; place-items: center; aspect-ratio: 4 / 5; border: 1.5px dashed var(--linie-hell-mittel); background: repeating-linear-gradient(45deg, rgba(242, 237, 232, .07) 0 1px, transparent 1px 9px), var(--tief-2); color: var(--hell-2); font-size: var(--t-mikro); text-align: center; line-height: 1.2; }
.ansprechpartner__bild img { width: 100%; height: 100%; object-fit: cover; }
.ansprechpartner figcaption { display: grid; gap: .1rem; }
.ansprechpartner b { font-size: var(--t-lead); font-weight: var(--kraeftig); }
.ansprechpartner span { font-size: var(--t-klein); color: var(--hell-2); }
.ansprechpartner a { justify-self: start; margin-top: .3rem; font-weight: var(--kraeftig); text-decoration-color: var(--linie-hell-mittel); }
.kontaktdaten { display: grid; margin-top: .75rem; border: 1px solid var(--linie-hell-mittel); }
.kontaktdaten div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .75rem .9rem; border-top: 1px solid var(--linie-hell); }
.kontaktdaten div:first-child { border-top: 0; }
.kontaktdaten dt { font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); color: var(--hell-2); padding-top: .2rem; }
.kontaktdaten dd { font-weight: 400; }
.kontaktdaten a { text-decoration-color: var(--linie-hell-mittel); }
.kontaktdaten .gross { font-size: var(--t-lead); font-weight: var(--kraeftig); }
@media (max-width: 459px) { .kontaktdaten div { grid-template-columns: 1fr; gap: .1rem; } }

.anfrage { display: grid; gap: 1.4rem; padding: clamp(1.25rem, .6rem + 2.2vw, 2.25rem); background: var(--papier); color: var(--tinte); outline: 1px solid var(--linie-mittel); outline-offset: -.5rem; }
.anfrage legend { padding: 0; }
.anfrage__legende { margin-bottom: .7rem; font-weight: var(--kraeftig); font-size: var(--t-klein); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .45rem .85rem; border: 1px solid var(--rahmen-eingabe); border-radius: 2px; font-size: var(--t-klein); font-weight: 400; line-height: 1.25; background: var(--papier); transition: background-color .15s, border-color .15s, color .15s; cursor: pointer; }
.chip:hover span { border-color: var(--tinte); }
.chip input:checked + span { background: var(--tinte); border-color: var(--tinte); color: var(--grund); }
.chip input:focus-visible + span { outline: 2px solid var(--tinte); outline-offset: 2px; }
.chip--klein span { min-height: 2.25rem; padding: .35rem .7rem; }
.chip--klein span::before { content: ""; width: .6rem; height: .6rem; margin-right: .5rem; border: 1.5px solid currentColor; flex: none; }
.chip--klein input:checked + span::before { background: var(--grund); border-color: var(--grund); }
.anfrage__gewerke[hidden] { display: none; }
.anfrage__erreichbar .anfrage__legende { margin-bottom: .2rem; }
.anfrage__hinweis { margin-bottom: .8rem; font-size: var(--t-mikro); color: var(--tinte-2); }
.felder { display: grid; gap: 1rem; }
@media (min-width: 700px) { .felder--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feld { display: grid; gap: .4rem; }
.feld label { font-size: var(--t-klein); font-weight: var(--kraeftig); }
.feld input, .feld textarea { width: 100%; min-height: 3rem; padding: .7rem .85rem; border: 1px solid var(--rahmen-eingabe); border-radius: 2px; background: #fff; font-size: var(--t-text); line-height: 1.4; }
.feld textarea { min-height: 8.5rem; resize: vertical; }
.feld input:hover, .feld textarea:hover { border-color: var(--tinte); }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--tinte); outline-offset: 0; border-color: var(--tinte); }
.feld input[aria-invalid="true"] { border-color: var(--rot); box-shadow: inset 3px 0 0 var(--rot); }
.feld textarea::placeholder, .feld input::placeholder { color: #77736D; }
.pflicht { color: var(--rot); }
.check { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; font-size: var(--t-klein); }
.check input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--tinte); }
.anfrage__zusage { font-size: var(--t-mikro); color: var(--tinte-2); text-align: center; max-width: none; }
.anfrage__status { padding: .8rem 1rem; border-left: 3px solid var(--tinte); background: var(--grund); font-size: var(--t-klein); }
.anfrage__status.ist-fehler { border-left-color: var(--rot); }

/* 15  FUSSZEILE ------------------------------------------------------------ */
.fuss { padding-block: clamp(3.5rem, 2rem + 4vw, 6rem) 2rem; background: var(--tief-3); color: var(--hell); }
.fuss__oben { display: grid; gap: 2.5rem var(--spalt); padding-bottom: 2.5rem; border-bottom: 1px solid var(--linie-hell); }
@media (min-width: 960px) { .fuss__oben { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.fuss__marke { display: grid; gap: 1.1rem; align-content: start; }
.fuss__marke img { height: 2.75rem; width: auto; }
.fuss__marke p { font-size: var(--t-klein); color: var(--hell-2); max-width: 36ch; }
.fuss__spalten { display: grid; gap: 2rem var(--spalt); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .fuss__spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fuss__gruppe > summary { list-style: none; }
.fuss__gruppe > summary::-webkit-details-marker { display: none; }
.fuss__titel--zwischen { margin-top: 1.5rem; }
@media (min-width: 700px) { .fuss__gruppe > summary { pointer-events: none; } }
@media (max-width: 699px) {
  .fuss__spalten { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fuss__spalten > nav { border-top: 1px solid var(--linie-hell); }
  .fuss__spalten > nav:last-child { border-bottom: 1px solid var(--linie-hell); }
  .fuss__gruppe > summary { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; margin: 0; cursor: pointer; }
  .fuss__gruppe > summary::after { content: ""; width: .5rem; height: .5rem; margin-right: .25rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
  .fuss__gruppe[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .fuss__gruppe ul { padding-bottom: .75rem; }
}
.fuss__titel { margin-bottom: .75rem; font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); letter-spacing: .02em; color: var(--hell-2); }
.fuss__spalten li a { display: inline-block; padding: .3rem 0; font-size: var(--t-klein); text-decoration: none; color: var(--hell); }
.fuss__spalten li a:hover { text-decoration: underline; text-decoration-color: var(--rot-hell); text-decoration-thickness: 2px; }
.fuss__spalten .extern::after { content: " ↗"; font-size: .85em; color: var(--hell-2); }
.fuss__ratgeber { display: grid; gap: .5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--linie-hell); font-size: var(--t-klein); }
.fuss__ratgeber ul { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.fuss__ratgeber a { color: var(--hell); text-decoration-color: var(--linie-hell-mittel); }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.5rem; font-size: var(--t-mikro); color: var(--hell-2); }
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.fuss__unten a { color: var(--hell-2); text-decoration: none; }
.fuss__unten a:hover { color: var(--hell); text-decoration: underline; }

/* Wischreihen: am Handy nebeneinander zum Wischen statt untereinander */
@media (max-width: 699px) {
  .wischreihe {
    display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; gap: .75rem;
    margin-inline: calc(var(--g) * -1); padding: 0 var(--g) .75rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); scrollbar-width: thin;
  }
  .wischreihe > * { scroll-snap-align: start; }
  .wischreihe:focus-visible { outline-offset: -2px; }
}

/* 16  MOBILE AKTIONSLEISTE ------------------------------------------------- */
.aktionsleiste { display: none; }
@media (max-width: 699px) {
  .aktionsleiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: 1fr 1.4fr; gap: .5rem;
    padding: .6rem var(--g) calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--tief); border-top: 1px solid var(--linie-hell-mittel);
    transform: translateY(110%); transition: transform .25s var(--ease);
  }
  .aktionsleiste.ist-sichtbar { transform: none; }
  .aktionsleiste .btn { min-height: 2.875rem; padding-inline: .75rem; }
  .aktionsleiste .btn--linie { border-color: var(--hell); color: var(--hell); }
  .fuss { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* 17  VERSION 10 ----------------------------------------------------------- */
/* Pfeile in Linklisten nur bei Hover und Fokus; am Touchgerät leise sichtbar */
@media (hover: hover) {
  .welt__wege .pfeil, .umfang__liste .pfeil { opacity: 0; transform: translateX(-.3rem); transition: opacity .15s ease, transform .2s var(--ease); }
  .welt__wege a:hover .pfeil, .welt__wege a:focus-visible .pfeil,
  .umfang__liste a:hover .pfeil, .umfang__liste a:focus-visible .pfeil { opacity: 1; transform: none; }
}
@media (hover: none) { .welt__wege .pfeil, .umfang__liste .pfeil { opacity: .45; } }

/* Fußzeile: Firmendaten als Schriftfeld eines Plans */
.plankopf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; max-width: 30rem; margin: 0; background: var(--linie-hell-mittel); border: 1px solid var(--linie-hell-mittel); }
.plankopf > div { min-width: 0; padding: .55rem .8rem .65rem; background: var(--tief-3); }
.plankopf__logo, .plankopf__voll { grid-column: 1 / -1; }
.plankopf__logo { padding-block: .9rem; }
.plankopf dt { font-size: var(--t-mikro); font-stretch: var(--beschriftung); font-weight: var(--kraeftig); color: var(--hell-2); }
.plankopf dd { margin: .1rem 0 0; font-size: var(--t-klein); line-height: 1.4; color: var(--hell); overflow-wrap: anywhere; }
.plankopf__logo dd { margin: 0; }
.marke--fuss { height: 2.75rem; width: calc(2.75rem * 1.781); color: var(--hell); --logo-sub: #C4BAAA; }
.plankopf a { text-decoration-color: var(--linie-hell-mittel); }
.plankopf a:hover { text-decoration-color: var(--rot-hell); }

/* So arbeiten wir (13.10.2026): Maßkette auf Mineral Beige --------------------- */
/* Drei Felder wie eine Bemaßung: oben das Maß (die Aussage), dann die Maßlinie mit schrägen Endstrichen, darunter die Erklärung.
   Desktop: eine durchgehende Linie über alle drei Felder (Subgrid hält Linie und Texte auf gleicher Höhe). Handy: Linie senkrecht links. */
.haltung {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  background-color: var(--buehne);   /* ohne Karoraster (MCE 13.10.2026) */
  color: var(--tinte);
}
.haltung .kicker { color: var(--tinte-2); margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.haltung .kicker::before { background: var(--tinte); }
.masskette { display: grid; margin: 0; padding: 0; list-style: none; }
.masskette__feld { position: relative; display: grid; align-content: start; min-width: 0; }
.masskette__mass {
  font-size: clamp(1.5rem, .95rem + 2vw, 2.5rem); font-weight: var(--leicht); font-stretch: var(--breit);
  line-height: 1.12; letter-spacing: -.02em; color: var(--tinte); text-wrap: balance;
}
.masskette__text { font-size: var(--t-text); line-height: 1.5; color: var(--tinte-2); max-width: 30ch; text-wrap: pretty; }
.masskette__linie { position: relative; display: block; background: var(--tinte); }
.masskette__linie::before, .masskette__linie::after { content: ""; position: absolute; background: var(--tinte); }
@media (max-width: 799px) {
  .masskette__feld { gap: .45rem; padding: 1.25rem 0 1.25rem 2rem; }
  .masskette__linie { position: absolute; left: .55rem; top: 0; bottom: 0; width: 1px; }
  .masskette__linie::before, .masskette__linie::after { left: -6px; width: 13px; height: 1px; transform: skewY(-45deg); }
  .masskette__linie::before { top: 0; }
  .masskette__linie::after { bottom: 0; display: none; }
  .masskette__feld:last-child .masskette__linie::after { display: block; }
}
@media (min-width: 800px) {
  .masskette { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
  .masskette__feld { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .masskette__mass { align-self: end; padding: 0 clamp(1rem, 2.5vw, 2.5rem) 0 1.1rem; }
  .masskette__linie { height: 1px; margin-block: 1.15rem 1.1rem; }
  .masskette__linie::before, .masskette__linie::after { top: -6px; width: 1px; height: 13px; transform: skewX(-45deg); }
  .masskette__linie::before { left: 0; }
  .masskette__linie::after { right: 0; display: none; }
  .masskette__feld:last-child .masskette__linie::after { display: block; }
  .masskette__text { padding: 0 clamp(1rem, 2.5vw, 2.5rem) 0 1.1rem; }
}

/* Gestapelter Abschnittskopf: Titel über die volle Breite, Texte darunter nebeneinander */
@media (min-width: 960px) {
  .kopfzeile--gestapelt { grid-template-columns: minmax(0, 1fr); }
  .kopfzeile--gestapelt .h2 { max-width: none; }
  .kopfzeile--gestapelt .kopfzeile__text { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); align-content: start; }
}

/* 19  BAUWERKSABDICHTUNG, MARKEN ------------------------------------------------- */
/* „Bauen im Bestand“ endet mit dem hellen Band; danach beginnt die Abdichtung wieder auf Sand – das Band trennt beide */
.bestand--band-ende { padding-bottom: 0; }
.bestand--band-ende .umfang-band { margin-bottom: 0; }
.abdichtung { background: var(--sand); color: var(--tinte); }
.abdichtung .kopfzeile { margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 4rem); }
.abdichtung .lead { color: var(--tinte); }
/* Kellerschnitt: Wasser, Riss, Abdichtungsschichten */
.schnitt .wasser path { fill: none; stroke: var(--tinte-2); stroke-width: 1.4; stroke-dasharray: 5 4; }
.schnitt .riss { fill: none; stroke: var(--tinte); stroke-width: 1.6; stroke-linejoin: round; }
.schnitt .abdicht { fill: var(--rot); stroke: none; }
.schnitt .sperre { stroke: var(--rot); stroke-width: 1.4; stroke-dasharray: 3 3; }
.schnitt .bohrung { fill: var(--papier); stroke: var(--rot); stroke-width: 1.6; }
.schnitt .packer { fill: var(--rot); }
.schnitt .putz { fill: var(--rot-hauch); stroke: var(--rot); stroke-width: 1.2; }
.schnitt[data-fokus] .riss { opacity: .45; }
.schnitt[data-fokus="riss"] .riss { opacity: 1; }
.schnitt[data-fokus="sperre"] [data-teil="sperre"], .schnitt[data-fokus="aussen"] [data-teil="aussen"], .schnitt[data-fokus="innen"] [data-teil="innen"],
.schnitt[data-fokus="riss"] [data-teil="riss"], .schnitt[data-fokus="putz"] [data-teil="putz"] { opacity: 1; }
/* Foto-Platzhalter */
.abd-fotos { display: grid; gap: var(--spalt); margin-top: clamp(2rem, 1.25rem + 2vw, 3rem); }
@media (min-width: 700px) { .abd-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.abd-foto { margin: 0; display: grid; gap: .5rem; }
.abd-foto__slot { position: relative; display: block; aspect-ratio: 4 / 3; outline: 1.5px dashed rgba(26, 26, 26, .45); outline-offset: -1.5px; background: repeating-linear-gradient(45deg, rgba(26, 26, 26, .08) 0 1px, transparent 1px 9px), rgba(255, 255, 255, .3); }
.abd-foto figcaption { font-size: var(--t-mikro); font-weight: var(--kraeftig); color: var(--tinte-2); }
/* Inntal FM nach der Übergabe (im dunklen Projekte-Abschnitt) */
.nach-uebergabe { display: grid; gap: 1.25rem var(--spalt); align-items: center; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); padding: clamp(1rem, .7rem + 1vw, 1.5rem); border: 1px solid var(--linie-hell-mittel); }
@media (min-width: 700px) { .nach-uebergabe { grid-template-columns: 9rem minmax(0, 1fr); } }
.nach-uebergabe__logo { display: block; width: 6.5rem; padding: .4rem; background: #fff; }
@media (min-width: 700px) { .nach-uebergabe__logo { width: 9rem; padding: .5rem; } }
.nach-uebergabe__logo img { width: 100%; height: auto; }
.nach-uebergabe__text { display: grid; gap: .6rem; justify-items: start; }
.nach-uebergabe__text .kicker { margin-bottom: 0; }
.nach-uebergabe__text p:not(.kicker) { font-size: var(--t-lead); line-height: 1.45; max-width: 46ch; }
.nach-uebergabe__text b { font-weight: var(--kraeftig); }
/* Markenleiste vor der Fußzeile */
.marken { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); background: var(--grund); }
.marken__titel { margin-bottom: .6rem; }
.marken__satz { margin: 0 0 1.5rem; font-size: var(--t-lead); line-height: 1.4; color: var(--tinte); }
.marken__liste { display: grid; gap: var(--spalt); }
@media (min-width: 820px) { .marken__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.marken__eintrag { display: grid; gap: .75rem; align-content: start; padding: 1.25rem; background: var(--papier); border: 1px solid var(--linie-mittel); }
/* Gleiche Versalhöhe und Grundlinie für beide „MCE“, Inntal optisch gleich schwer, unten bündig */
.marken__logo { display: flex; align-items: flex-start; height: 4.5rem; }
.marken__logo img { width: auto; max-width: 100%; }
.marken__logo--sb img { height: 3.1rem; margin-top: .46rem; }
.marken__logo--inntal img { height: 4.25rem; margin-top: .1rem; }
.marke--marken { height: 3.25rem; width: calc(3.25rem * 1.781); margin-top: .925rem; color: var(--tinte); --logo-sub: #8B847A; }
.marken__rolle { font-size: var(--t-klein); color: var(--tinte-2); }
a.marken__logo:hover { opacity: .85; }
.marken__link { justify-self: start; font-size: var(--t-klein); font-weight: var(--kraeftig); color: var(--tinte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.marken__link:hover { text-decoration-color: var(--rot); }

/* 20  VERSION 12 ----------------------------------------------------------- */
/* Reihenfolge folgt der Weiche: Projektentwicklung (leichte Stimme), dann Baumanagement (kräftige Stimme). */
:root { --abbruch: #EBC34A; }   /* Abbruch gelb wie im österreichischen Einreichplan */

/* Platzhalter für fehlende Daten: gestrichelt umrandet, damit sie im Prototyp sofort auffallen */
.ph { font-style: normal; padding: 0 .2em; outline: 1px dashed currentColor; outline-offset: 1px; opacity: .9; }

/* Hero: Claim und Text stehen als eine Gruppe, statt oben und unten an den Rändern */
@media (min-width: 1000px) { .hero__oben { align-self: end; padding-bottom: .5rem; } }

/* Weiche: Projektentwicklung zeigt den Plan auf Planpapier, Baumanagement die Baustelle */
.welt__bild--plan {
  background-color: var(--buehne);
  background-image: linear-gradient(var(--buehne-linie) 1px, transparent 1px), linear-gradient(90deg, var(--buehne-linie) 1px, transparent 1px);
  background-size: 24px 24px;
}
.welt__bild--plan img { object-position: 50% 0; }

/* Projekte: Objektbetreuung als eine Zeile */
.projekte__betreuung { margin-top: clamp(1rem, .5rem + 1.5vw, 2rem); font-size: var(--t-klein); color: var(--hell-2); max-width: 72ch; }
.projekte__betreuung .textlink { color: var(--hell); }

/* Koordination: Rechenbeispiel und Kosten */
.koord__kosten { margin-top: -1rem; font-size: var(--t-klein); color: var(--tinte-2); max-width: 72ch; }
.koord__kosten b { color: var(--tinte); font-weight: var(--kraeftig); }

/* Belege: Herkunft der Bewertungen */
.belege__hinweis { margin-top: 1.5rem; font-size: var(--t-mikro); color: var(--tinte-2); max-width: 72ch; }

/* Planmappe: Bauen im Bestand und Abdichtung als zwei Blätter. Desktop nebeneinander, darunter per Umschalter. */
.mappe { background: var(--sand); color: var(--tinte); }
.mappe .kopfzeile { margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
.mappe .lead { color: var(--tinte); }
.mappe__blaetter { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 3.5rem) var(--spalt); }
.blatt { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.blatt__kopf { display: grid; gap: .35rem; padding-top: .8rem; border-top: 1.5px solid var(--tinte); }
.blatt__nr { font-size: .75rem; font-weight: var(--kraeftig); letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); }
.planlegende__link { justify-self: start; margin-top: .25rem; }
/* 13.10.2026: Umschalter auch am Desktop – dort ein Blatt über die volle Breite, Zeichnung links, Legende rechts */
.mappe__schalter { display: none; }
.js .mappe__schalter { display: inline-grid; }
.js .mappe__blaetter[data-aktiv="gebaeude"] [data-blatt="keller"],
.js .mappe__blaetter[data-aktiv="keller"] [data-blatt="gebaeude"] { display: none; }
@media (min-width: 1000px) {
  .blatt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.25rem var(--spalt); }
  .blatt__kopf { grid-column: 1 / -1; }
  .blatt .planlegende { align-self: center; }
}
.mappe .schalter button:hover { background: var(--grund); }
/* Schraffuren liegen jetzt in der gemeinsamen Symbol-Leiste und brauchen eigene Regeln */
.sch-schraffur { stroke: var(--tinte); stroke-width: .8; }
.sch-erdlinie { stroke: var(--tinte); stroke-width: .7; opacity: .45; }
.sch-daemmlinie { fill: none; stroke: var(--rot); stroke-width: .9; }
.schnitt .abbruch { fill: var(--abbruch); stroke: var(--tinte); stroke-width: 1.1; stroke-dasharray: 4 3; }
.zf--abbruch { border: 1.5px dashed var(--tinte); background: var(--abbruch); }

/* Marken am Handy kompakt: Logo links, Text rechts */
@media (max-width: 819px) {
  .marken__eintrag { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: .2rem 1rem; padding: .9rem 1rem; }
  .marken__logo { grid-row: span 2; height: auto; }
  .marken__logo img, .marken__logo svg { margin-top: 0; }
  .marken__logo--sb img { height: 2.1rem; }
  .marken__logo--inntal img { height: 3rem; }
  .marke--marken { height: 2.3rem; width: calc(2.3rem * 1.781); margin-top: 0; }
  .marken__eintrag > :not(.marken__logo) { grid-column: 2; }
}

/* Fußzeile: fünfte Spalte „Sanierung & Abdichtung“ */
@media (min-width: 700px) { .fuss__spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .fuss__oben { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
  .fuss__spalten { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* EN/NL-Seiten (16.10.2026): Fuß mit drei Spalten; im Menü sechs kurze Punkte, „Contact“ bleibt auch bei 1280–1365 px */
@media (min-width: 1100px) { .fuss__spalten--intl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) and (max-width: 1365px) { .hauptnav__liste--intl > li:last-child { display: list-item; } }

/* 18  BEWEGUNG REDUZIERT --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* 19  VERSION 13 ------------------------------------------------------------ */
/* Leistungen im Bestand wieder im Inhalt: unter den beiden Planblättern, auf Sand */
.mappe__umfang { margin-top: clamp(2.75rem, 1.75rem + 3vw, 4.5rem); }

/* Projekte als Exposé statt Plankopf: offen, ohne Rahmen und Zellen.
   Status als helle Marke auf dem Bild, Lage, Preis groß in der Grundstimme, Kennzahlen als offene Zeile,
   Pflichtangaben (Energieausweis, Bauträgervertragsgesetz) als ruhige Liste am Ende. */
.projekt__status {
  position: absolute; z-index: 1; top: clamp(.6rem, .35rem + .8vw, 1rem); left: clamp(.6rem, .35rem + .8vw, 1rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; max-width: calc(100% - 1.5rem);
  padding: .45rem .75rem .45rem .7rem; background: var(--hell); color: var(--tief);
  font-size: var(--t-mikro); line-height: 1.3;
}
.projekt__status b { display: inline-flex; align-items: center; gap: .5rem; font-weight: var(--kraeftig); letter-spacing: .07em; text-transform: uppercase; }
.projekt__status b::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--rot); }
.projekt__status span { color: var(--tinte-2); }

.expose { gap: 1.75rem; }
.expose__ort { display: flex; align-items: center; gap: .5rem; font-size: var(--t-klein); color: var(--hell-2); }
.expose__ort svg { flex: none; width: .75rem; height: 1rem; }
.expose__preis { display: grid; gap: .35rem; margin-top: -.5rem; }
.expose__preis-label { font-size: var(--t-mikro); font-weight: var(--kraeftig); letter-spacing: .08em; text-transform: uppercase; color: var(--hell-2); }
.expose__preis-wert { font-size: clamp(2.25rem, 1.55rem + 2.2vw, 3.375rem); font-weight: var(--leicht); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem var(--spalt); padding-top: 1.25rem; border-top: 1px solid var(--linie-hell-mittel); }
@media (min-width: 600px) and (max-width: 959px) { .kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kennzahlen > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .3rem; min-width: 0; }
.kennzahlen dd { font-size: clamp(1.5rem, 1.2rem + .9vw, 1.875rem); font-weight: var(--leicht); line-height: 1.05; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kennzahlen dt { font-size: var(--t-mikro); line-height: 1.35; color: var(--hell-2); }

.pflichtangaben { display: grid; font-size: var(--t-klein); }
.pflichtangaben > div { display: grid; gap: .2rem; padding: .75rem 0; border-top: 1px solid var(--linie-hell); }
.pflichtangaben > div:last-child { border-bottom: 1px solid var(--linie-hell); }
.pflichtangaben dt { font-size: var(--t-mikro); font-weight: var(--kraeftig); color: var(--hell-2); }
.pflichtangaben dt span { font-weight: 400; }
.pflichtangaben dd { line-height: 1.45; }
.expose .pflichtangaben + .projekt__fussnote { margin-top: -1rem; }
/* Desktop: Das Projektbild bleibt beim Lesen der Eckdaten stehen */
@media (min-width: 960px) {
  .projekt__hauptbild { position: sticky; top: calc(var(--kopf-h) + 1.5rem); }
}

/* 20  VERSION 14 ------------------------------------------------------------ */
/* Weiche: Kostenkette als Maßkette auf dem Plan. Bildunterschrift wandert nach oben. */
.kostenkette {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .45rem;
  padding: .55rem clamp(.75rem, .5rem + 1vw, 1.25rem) .8rem;
  background: rgba(255, 255, 255, .92); border-top: 1px solid var(--linie-mittel); color: var(--tinte);
}
.kostenkette__titel { font-size: .6875rem; font-weight: var(--kraeftig); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
.kostenkette__titel span { margin-left: .4rem; font-weight: 400; letter-spacing: .02em; text-transform: none; }
.kostenkette__reihe { display: flex; }
.kostenkette__mass {
  position: relative; flex: var(--anteil) 1 0; min-width: max-content; padding: 0 .35rem .3rem;
  border-bottom: 1px solid currentColor; text-align: center; font-size: var(--t-mikro); font-weight: var(--kraeftig); line-height: 1.2;
}
/* Maßstriche: 45°-Schrägstrich an beiden Enden wie in der Bemaßung */
.kostenkette__mass::before, .kostenkette__mass::after { content: ""; position: absolute; bottom: -5px; width: 1px; height: 10px; background: currentColor; transform: rotate(45deg); }
.kostenkette__mass::before { left: 0; }
.kostenkette__mass::after { right: 0; }
.kostenkette__reihe--summe .kostenkette__mass { color: var(--rot); }
@media (max-width: 699px) { .kostenkette { position: static; } }

/* Baumanagement-Modelle: Name, Kernsatz und Text stehen links und rechts in einer Flucht */
.modell-zeile { align-items: start; align-content: start; row-gap: .35rem; }
.modell-zeile__name { font-size: var(--t-h3); font-weight: var(--schwer); line-height: 1.15; letter-spacing: -.015em; }
.modell-zeile__kern { grid-column: 1; font-weight: var(--kraeftig); line-height: 1.35; }
.modell-zeile__text { grid-column: 1; max-width: 54ch; line-height: 1.5; }
.modell-zeile .pfeil { grid-column: 2; grid-row: 1; align-self: center; }
@media (min-width: 820px) {
  .modelle-kurz { grid-template-rows: repeat(3, auto); }
  .modell-zeile { grid-row: span 3; grid-template-rows: subgrid; row-gap: .35rem; }
}

/* Kaufen / Mieten: eine Marke, zwei Formen. Kaufen gefüllt, Mieten als Rahmen. */
.art {
  display: inline-flex; align-items: center; padding: .22rem .55rem; border: 1.5px solid currentColor;
  font-size: var(--t-mikro); font-weight: var(--kraeftig); letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
}
.dunkel .art--kauf { background: var(--hell); border-color: var(--hell); color: var(--tief); }
.dunkel .art--miete { border-color: var(--hell); color: var(--hell); }

/* Projekte: Übersicht „Aktuell verfügbar“ */
.verfuegbar { margin-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); }
.verfuegbar__titel { margin-bottom: .75rem; font-size: var(--t-mikro); font-weight: var(--kraeftig); letter-spacing: .08em; text-transform: uppercase; color: var(--hell-2); }
.verfuegbar__liste { border-top: 1.5px solid var(--hell); }
.verfuegbar__liste a {
  display: grid; grid-template-columns: 6.25rem minmax(0, 1fr) auto 1.75rem; align-items: center; gap: .5rem 1.5rem;
  padding: 1.05rem 0; border-bottom: 1px solid var(--linie-hell-mittel); color: var(--hell); text-decoration: none;
}
.verfuegbar__liste .art { justify-self: start; }
.verfuegbar__objekt { display: grid; gap: .2rem; min-width: 0; }
.verfuegbar__objekt b { font-size: var(--t-lead); font-weight: var(--kraeftig); line-height: 1.25; }
.verfuegbar__objekt span { font-size: var(--t-klein); color: var(--hell-2); }
.verfuegbar__preis { font-size: clamp(1.375rem, 1.05rem + 1vw, 1.875rem); font-weight: var(--leicht); line-height: 1.05; letter-spacing: -.02em; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.verfuegbar__preis small { display: block; margin-top: .25rem; font-size: var(--t-mikro); letter-spacing: 0; color: var(--hell-2); }
.verfuegbar__liste .pfeil { justify-self: end; transition: transform .2s var(--ease); }
.verfuegbar__liste a:hover .pfeil { transform: translateX(.3rem); }
.verfuegbar__liste a:hover b { text-decoration: underline; text-decoration-color: var(--rot-hell); text-decoration-thickness: 2px; text-underline-offset: .2em; }
@media (max-width: 699px) {
  .verfuegbar__liste a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "art preis" "objekt objekt"; row-gap: .7rem; }
  .verfuegbar__liste .art { grid-area: art; }
  .verfuegbar__preis { grid-area: preis; }
  .verfuegbar__objekt { grid-area: objekt; }
  .verfuegbar__liste .pfeil { display: none; }
}

/* Exposé: Art des Angebots über dem Preis */
.expose__art { display: flex; align-items: center; gap: .65rem; margin-bottom: .35rem; font-size: var(--t-klein); font-weight: var(--kraeftig); }

/* Rum: Mieten und Kaufen als zwei eigene Angebote mit Preis und Eckdaten */
.projekt__angebote { display: grid; gap: var(--spalt); border-top: 0; }
@media (min-width: 960px) { .projekt__angebote { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(.5rem, 1vw, 1.5rem); } }
.projekt__angebote .angebot { display: grid; gap: .8rem; padding: clamp(1rem, .8rem + .6vw, 1.35rem); border: 0; background: var(--tief-2); }
.projekt__angebote .angebot__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; font-size: var(--t-klein); color: var(--hell-2); }
.projekt__angebote .angebot__titel { font-size: var(--t-lead); font-weight: var(--kraeftig); line-height: 1.3; }
.projekt__angebote .angebot__preis { margin: 0; font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.5rem); font-weight: var(--leicht); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.projekt__angebote .angebot__preis span { display: block; margin-top: .4rem; font-size: var(--t-mikro); font-weight: 400; letter-spacing: 0; color: var(--hell-2); }
.angebot__daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .65rem 1rem; padding-block: .8rem; border-block: 1px solid var(--linie-hell); font-size: var(--t-mikro); color: var(--hell-2); }
.angebot__daten b { display: block; font-size: var(--t-text); font-weight: var(--kraeftig); color: var(--hell); font-variant-numeric: tabular-nums; }
.angebot__klein { font-size: var(--t-mikro); line-height: 1.45; color: var(--hell-2); }
.projekt__angebote .angebot .pfeillink { justify-self: start; color: var(--hell); }

/* Referenz Schimmelsanierung Axams: Vorher / Nachher */
.referenz { display: grid; gap: 1.25rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: .8rem; border-top: 1.5px solid var(--tinte); }
.referenz__kopf { display: grid; gap: 1rem var(--spalt); }
@media (min-width: 960px) { .referenz__kopf { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.referenz__titel { margin-top: .35rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-stretch: var(--breit); font-weight: var(--leicht); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.referenz__text { display: grid; gap: 1rem; max-width: 68ch; line-height: 1.55; }
.referenz__daten { display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.referenz__daten dt { font-size: var(--t-mikro); font-weight: var(--kraeftig); color: var(--tinte-2); }
.referenz__daten dd { font-size: var(--t-klein); font-weight: var(--kraeftig); }
.referenz__schalter { justify-self: start; margin: 0; }
/* Praxisbeispiele (13.10.2026): ein Block mit Umschalter Schimmel Axams / Keller Hötting */
.praxis { display: grid; gap: 1.25rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: .8rem; border-top: 1.5px solid var(--tinte); }
.praxis__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.praxis__schalter { margin: 0; }
.mappe .praxis__schalter button:hover { background: var(--grund); }
.praxis .referenz { margin-top: 0; padding-top: 0; border-top: 0; }
.js .praxis[data-praxis="axams"] [data-praxis-fall="hoetting"],
.js .praxis[data-praxis="hoetting"] [data-praxis-fall="axams"] { display: none; }
html:not(.js) .praxis .referenz + .referenz { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.mappe .referenz__schalter button:hover { background: var(--grund); }
.referenz__fotos { display: grid; gap: var(--spalt); }
@media (min-width: 700px) { .referenz__fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vn { display: grid; gap: .55rem; min-width: 0; margin: 0; }
.vn__bilder { display: grid; background: var(--tief-2); }
.vn__bild { position: relative; grid-area: 1 / 1; transition: opacity .5s var(--ease), visibility 0s; }
.vn__bild img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vn__marke { position: absolute; z-index: 1; left: .6rem; top: .6rem; padding: .25rem .55rem; background: var(--tief); color: var(--hell); font-size: var(--t-mikro); font-weight: var(--kraeftig); letter-spacing: .08em; text-transform: uppercase; }
.vn__marke--nach { display: inline-flex; align-items: center; gap: .45rem; background: var(--hell); color: var(--tief); }
.vn__marke--nach::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--rot); }
.vn figcaption { display: grid; gap: .1rem; font-size: var(--t-klein); line-height: 1.4; }
.vn figcaption b { font-weight: var(--kraeftig); }
.vn figcaption span { grid-row: 2; grid-column: 1; color: var(--tinte-2); transition: opacity .5s var(--ease), visibility 0s; }
.js .referenz__fotos[data-vn="vorher"] [data-z="nachher"],
.js .referenz__fotos[data-vn="nachher"] [data-z="vorher"] { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
html:not(.js) .vn__bild { grid-area: auto; }
html:not(.js) .vn figcaption span { grid-row: auto; }
.referenz__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* Marken: Lebenszyklus einer Immobilie auf Planpapier */
.marken {
  --px-line: var(--tinte); --px-hatch: rgba(26, 26, 26, .42); --px-accent: var(--rot);
  padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem);
  background-color: var(--sand);
  background-image: linear-gradient(rgba(26, 26, 26, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 26, 26, .05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.marken__kopf { display: grid; gap: 1rem var(--spalt); margin-bottom: clamp(2rem, 1.25rem + 2vw, 3rem); }
@media (min-width: 960px) { .marken__kopf { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; } }
.marken .kicker { color: var(--tinte-2); }
.marken__satz { margin: .6rem 0 0; max-width: 26ch; font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.375rem); font-weight: var(--leicht); line-height: 1.15; letter-spacing: -.02em; color: var(--tinte); }
.marken__unternehmen { font-size: var(--t-klein); color: var(--tinte-2); }
.marken__liste { position: relative; display: grid; gap: 1.75rem var(--spalt); }
@media (min-width: 820px) {
  .marken__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Lebenslinie über alle drei Karten, wie eine Maßlinie mit Endstrichen */
  .marken__liste::before { content: ""; position: absolute; left: 0; right: 0; top: .625rem; height: 1px; background: var(--tinte); }
  .marken__liste::after { content: ""; position: absolute; right: 0; top: calc(.625rem - 5px); width: 1px; height: 11px; background: var(--tinte); transform: rotate(45deg); }
}
.markenkarte { position: relative; display: grid; grid-template-rows: auto 1fr; gap: .9rem; min-width: 0; }
.markenkarte__phase { position: relative; display: flex; align-items: center; gap: .6rem; font-size: var(--t-mikro); font-weight: var(--kraeftig); letter-spacing: .08em; text-transform: uppercase; }
.markenkarte__phase span { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; background: var(--tinte); color: var(--sand); font-size: .625rem; letter-spacing: 0; }
@media (min-width: 820px) { .markenkarte__phase { justify-self: start; padding-right: .75rem; background: var(--sand); } }
.markenkarte__karte {
  display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; grid-template-rows: auto auto auto 1fr; gap: .9rem 1rem; align-content: start;
  padding: clamp(1.1rem, .8rem + .8vw, 1.5rem); background: var(--papier); border: 1px solid var(--linie-mittel);
}
.markenkarte__logo { grid-column: 1; grid-row: 1; display: flex; align-items: center; min-height: 4.25rem; }
.markenkarte__logo img { width: auto; height: 3rem; }
.markenkarte__logo--inntal img { height: 4rem; }
.markenkarte .marke--marken { height: 3rem; width: calc(3rem * 1.781); margin-top: 0; }
a.markenkarte__logo:hover { opacity: .85; }
.markenkarte__bild { grid-column: 2; grid-row: 1; width: 5.5rem; max-width: none; margin: 0; align-self: center; }
.markenkarte__text, .markenkarte__stichworte, .markenkarte__link { grid-column: 1 / -1; }
.markenkarte__text { font-size: var(--t-klein); line-height: 1.5; color: var(--tinte-2); }
.markenkarte__stichworte { display: flex; flex-wrap: wrap; gap: .35rem; }
.markenkarte__stichworte li { padding: .2rem .5rem; border: 1px solid var(--linie-mittel); font-size: var(--t-mikro); font-weight: var(--kraeftig); }
.markenkarte__link { justify-self: start; align-self: end; font-size: var(--t-klein); font-weight: var(--kraeftig); color: var(--tinte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.markenkarte__link:hover { text-decoration-color: var(--rot); }

/* Fußzeile: offene Adresszeilen statt Plankopf */
.fuss__marke { gap: 1.25rem; }
.fuss__leistung { max-width: 34ch; }
.fuss__adresse { display: grid; gap: .9rem; font-style: normal; font-size: var(--t-klein); line-height: 1.55; color: var(--hell); }
.fuss__adresse a { color: var(--hell); text-decoration-color: var(--linie-hell-mittel); }
.fuss__adresse a:hover { text-decoration-color: var(--rot-hell); }
.fuss__zeit { color: var(--hell-2); }
/* Mit Angeboten darunter bleibt das Bild stehen, damit es nicht über die Angebote gleitet */
.projekt--mit-angeboten .projekt__hauptbild { position: relative; top: auto; }
/* Gewählter Umschalter bleibt auch unter dem Mauszeiger dunkel */
.schalter button[aria-pressed="true"], .schalter button[aria-pressed="true"]:hover,
.mappe .schalter button[aria-pressed="true"], .mappe .schalter button[aria-pressed="true"]:hover { background: var(--tinte); color: var(--grund); }
/* Vorher/Nachher: feste 4:3-Fläche, damit unter dem Bild kein dunkler Streifen entsteht */
.js .vn__bilder { aspect-ratio: 4 / 3; overflow: hidden; }
.js .vn__bild, .js .vn__bild img { height: 100%; }

/* Belege: Referenzen aus der Laufbahn des Geschäftsführers */
.laufbahn { display: grid; gap: 1.25rem; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: .8rem; border-top: 1.5px solid var(--tinte); }
.laufbahn__kopf { display: grid; gap: .35rem; }
.laufbahn__fotos { display: grid; gap: var(--spalt); }
@media (min-width: 700px) { .laufbahn__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .laufbahn__fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.laufbahn__foto { display: grid; gap: .5rem; min-width: 0; margin: 0; }
.laufbahn__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.laufbahn__foto figcaption { display: grid; gap: .1rem; font-size: var(--t-klein); line-height: 1.4; }
.laufbahn__foto figcaption b { font-weight: var(--kraeftig); }
.laufbahn__foto figcaption span { color: var(--tinte-2); }

/* Referenz als Ablauf: Kellerabdichtung Innsbruck-Hötting */
.referenz--ablauf { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.ablaufbilder { display: grid; gap: var(--spalt); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .ablaufbilder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ablaufbilder { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ablaufbilder > li { min-width: 0; }
.ablaufbild { display: grid; gap: .55rem; margin: 0; }
.ablaufbild img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ablaufbild figcaption { display: grid; gap: .1rem; padding-top: .55rem; border-top: 1.5px solid var(--tinte); font-size: var(--t-klein); line-height: 1.4; }
.ablaufbild figcaption b { font-weight: var(--kraeftig); }
.ablaufbild figcaption b span { margin-right: .4rem; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.ablaufbild figcaption > span { color: var(--tinte-2); }
/* Kontakt: Logo statt Ansprechpartner-Foto */
.marke--kontakt { height: 3rem; width: calc(3rem * 1.781); margin-block: .5rem .25rem; color: var(--hell); --logo-sub: #C4BAAA; }

/* 21  VERSION 15 ------------------------------------------------------------ */
/* Hero: von Anfang an Graphit. Der Plan zeichnet sich hell auf Graphit-Planpapier, dann wischt das Projektbild herein.
   Kein Wechsel von Beige auf Graphit mehr und kein unscharfer Rasen unter dem Text (der Olivfleck am Übergang).
   Der Claim steht sofort (Einblendung im Skript entfernt). */
.hero.ist-foto, html:not(.js) .hero {
  background-color: #1F1C18;
  background-image: linear-gradient(rgba(242, 237, 232, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 237, 232, .035) 1px, transparent 1px);
  background-size: 24px 24px;
}
.hero .buehne__grund { display: none !important; }

/* Gewerke: Pfeil oben rechts in der Kachel, damit die Bezeichnung die volle Breite hat (keine Trennung wie „Wärme-pumpe“) */
@media (min-width: 700px) {
  .gkachel__name { display: block; }
  .gkachel .pfeil { position: absolute; top: .85rem; right: .85rem; }
}

/* Projekte: Liste mit Energiekennwerten, darunter zwei Teaser, die auf die Projektseiten führen */
.verfuegbar__energie { display: block; margin-top: .15rem; font-size: var(--t-mikro); line-height: 1.4; color: var(--hell-2); }
.verfuegbar__energie sub { font-size: .75em; }
.pteaser-reihe { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem) var(--spalt); }
@media (min-width: 760px) { .pteaser-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pteaser__link { display: grid; gap: .6rem; color: inherit; text-decoration: none; }
.pteaser__bild { position: relative; margin: 0 0 .65rem; overflow: hidden; }
.pteaser__bild img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--tief-2); transition: transform .8s var(--ease); }
.pteaser__link:hover .pteaser__bild img { transform: scale(1.025); }
.pteaser__bild figcaption { position: absolute; left: 0; bottom: 0; padding: .35rem .7rem; background: rgba(18, 18, 18, .82); color: var(--hell); font-size: var(--t-mikro); font-weight: var(--kraeftig); }
.pteaser__name { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: var(--leicht); line-height: 1.1; letter-spacing: -.025em; }
.pteaser__text { max-width: 52ch; color: var(--hell-2); line-height: 1.5; }
.pteaser__mehr { display: inline-flex; align-items: center; gap: .75rem; margin-top: .35rem; font-weight: var(--kraeftig); }
.pteaser__mehr span { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .3em; transition: text-decoration-color .15s; }
.pteaser__link:hover .pteaser__mehr span { text-decoration-color: var(--rot-hell); }
.pteaser__mehr .pfeil { width: 1.5rem; transition: transform .2s var(--ease); }
.pteaser__link:hover .pteaser__mehr .pfeil { transform: translateX(.3rem); }
.pteaser-reihe + .projekte__betreuung { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

/* Belege: ohne Fakten-Kasten stehen die Stimmen über die volle Breite */
.belege__raster { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 1100px) { .stimmen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Referenz Hötting: Status „Laufende Baustelle“ – Rot nur als Statuspunkt */
.laufend { margin-top: .6rem; font-size: var(--t-mikro); font-weight: var(--kraeftig); letter-spacing: .08em; text-transform: uppercase; }
.laufend::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: var(--rot); vertical-align: .08em; }

/* Marken: alle drei Logos einfarbig in Tinte, optisch gleich groß */
.markenkarte__logo img { height: 2.75rem; }
.markenkarte__logo--inntal img { height: 3.6rem; }

/* Belege: Referenzmappe auf Anfrage statt Laufbahn-Fotos – eine Zeile mit Linie oben, Button rechts */
.referenzmappe { display: grid; gap: 1.25rem var(--spalt); align-items: center; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: 1.25rem; border-top: 1.5px solid var(--tinte); }
.referenzmappe__text { display: grid; gap: .4rem; max-width: 62ch; }
@media (min-width: 760px) { .referenzmappe { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 699px) { .referenzmappe .btn { width: 100%; } }
.gw__hinweise { display: grid; gap: .75rem; align-content: start; }

/* 22  WORDPRESS: Cookie-Banner (Complianz), nur auf dieser Seite ------------------------------
   Aktionen in Graphit wie überall. „Akzeptieren“ und „Ablehnen“ bewusst gleich gewichtet
   (Datenschutz-Vorgabe: Ablehnen darf nicht schwächer aussehen). Variablen von Complianz. */
body.mce-startseite .cmplz-cookiebanner {
  --cmplz_banner_background_color: var(--papier);
  --cmplz_banner_border_color: var(--linie-mittel);
  --cmplz_banner_border_width: 1px 1px 1px 1px;
  --cmplz_banner_border_radius: 2px 2px 2px 2px;
  --cmplz_text_color: var(--tinte);
  --cmplz_hyperlink_color: var(--tinte);
  --cmplz_title_font_size: 16px;
  --cmplz_text_font_size: 13px;
  --cmplz_link_font_size: 12px;
  --cmplz_button_font_size: 14px;
  --cmplz_button_border_radius: 2px 2px 2px 2px;
  --cmplz_button_accept_background_color: var(--tief);
  --cmplz_button_accept_border_color: var(--tief);
  --cmplz_button_accept_text_color: var(--grund);
  --cmplz_button_deny_background_color: var(--tief);
  --cmplz_button_deny_border_color: var(--tief);
  --cmplz_button_deny_text_color: var(--grund);
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: var(--tinte);
  --cmplz_button_settings_text_color: var(--tinte);
  --cmplz_slider_active_color: var(--tief);
  --cmplz_slider_inactive_color: var(--gedaempft);
  --cmplz_category_header_always_active_color: var(--tinte-2);
  font-family: var(--ff);
  box-shadow: 0 12px 40px rgba(26, 26, 26, .18);
}
body.mce-startseite .cmplz-cookiebanner .cmplz-btn { font-family: var(--ff); font-weight: var(--kraeftig); border-width: 1.5px; }
body.mce-startseite .cmplz-cookiebanner .cmplz-title { font-weight: var(--kraeftig); }
body.mce-startseite .cmplz-cookiebanner a { text-decoration-color: var(--band); text-underline-offset: .2em; }
body.mce-startseite #cmplz-manage-consent .cmplz-manage-consent { background: var(--tief); color: var(--grund); border-color: var(--tief); font-family: var(--ff); border-radius: 2px 2px 0 0; }

/* 13.10.2026: Banner am Handy kompakt (Text klein, Akzeptieren/Ablehnen nebeneinander und gleich stark, Einstellungen als Textlink) */
@media (max-width: 768px) {
  body.mce-startseite .cmplz-cookiebanner { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); row-gap: 8px; border-radius: 0; }
  body.mce-startseite .cmplz-cookiebanner .cmplz-message { font-size: 13px; line-height: 1.45; }
  body.mce-startseite .cmplz-cookiebanner .cmplz-buttons { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  body.mce-startseite .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { flex: 1 1 0; min-width: 0; width: auto; height: 44px; padding-inline: 8px; }
  body.mce-startseite .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { flex-basis: 100%; }
  body.mce-startseite .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
    flex: 1 1 100%; height: auto; padding: 2px 0; background: none; border: 0; color: var(--tinte);
    text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--band);
  }
  body.mce-startseite .cmplz-cookiebanner .cmplz-documents { margin-top: 0; }
}
/* Reiter „Zustimmung verwalten“: am Desktop ein kleines rundes Symbol unten links statt des halb sichtbaren Balkens rechts.
   Am Handy blendet Complianz ihn aus; dort öffnet „Cookie-Einstellungen“ in der Fußzeile denselben Dialog. */
body.mce-startseite #cmplz-manage-consent .cmplz-manage-consent {
  left: 1rem !important; right: auto !important; bottom: 1rem !important; transform: none !important; animation: none !important;
  width: 2.75rem; height: 2.75rem; min-width: 0; padding: 0; border-radius: 50%;
  font-size: 0; line-height: 0; overflow: hidden;
  background: var(--tief) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EDE8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.9 12.6A9 9 0 1 1 11.4 3.1a3 3 0 0 0 3.6 3.6 3 3 0 0 0 3.5 3.5 3 3 0 0 0 2.4 2.4z'/%3E%3Ccircle cx='8.5' cy='10' r='.9' fill='%23F2EDE8'/%3E%3Ccircle cx='12.5' cy='14.5' r='.9' fill='%23F2EDE8'/%3E%3Ccircle cx='8' cy='15.5' r='.9' fill='%23F2EDE8'/%3E%3Ccircle cx='16' cy='15.5' r='.9' fill='%23F2EDE8'/%3E%3C/svg%3E") center / 1.4rem no-repeat;
  box-shadow: 0 4px 14px rgba(26, 26, 26, .22);
}
body.mce-startseite #cmplz-manage-consent .cmplz-manage-consent:hover { opacity: .88; }
.fuss__cookie { padding: 0; border: 0; background: none; font: inherit; color: var(--hell-2); cursor: pointer; }
.fuss__cookie:hover { color: var(--hell); text-decoration: underline; }