:root{
  --bg:#ffffff;
  --text:#0b0d10;
  --muted:#6b7280;
  --line:rgba(15,23,42,0.10);

  /* CI Akzent (Bordeaux, passend zum Logo) */
  --accent:#7b1e5a;
  --accentSoft: rgba(123,30,90,0.10);
  --accentLine: rgba(123,30,90,0.22);

  /* Neutrale Flaechen — alle aus demselben Schiefer (15,23,42) gemischt
     wie --line und --muted. Warme Grautoene daneben wirken schmutzig. */
  --surface1:#ffffff;                   /* Grundflaeche */
  --surface2:#f7f8f9;                   /*  3% Schiefer — ruhiger Hauch */
  --surface3:#eaecef;                   /*  9% Schiefer — Header, Leisten */

  --btnBg: rgba(255,255,255,0.78);
  --btnBgHover: rgba(255,255,255,0.92);

  --shadow: 0 18px 40px rgba(0,0,0,0.10);
  --max: 1160px;

  /* Hauptschrift: Schweizer Grotesk (Helvetica-Linie) */
  --font-body:
    "Inter",
    "Helvetica Neue",
    Helvetica,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    "Noto Sans",
    sans-serif;

  /* Alte System-Schrift: bleibt für Header/Logo und Hero (Slider) */
  --font-ui:
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI Variable",
    "Segoe UI",
    Roboto,
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scrollbar-gutter: stable; }

body{
  margin:0;

  /* Schweizer Grotesk (Helvetica-Linie) – neutral, präzise, sehr gut lesbar */
  font-family: var(--font-body);

  font-weight: 360;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

/* Header (inkl. Logo-SVG) und Hero/Slider behalten die bisherige Schrift.
   Jost gilt erst ab den Sektionen darunter. Der Marcellus-Hero-Titel
   (.heroPairTitle/.heroPairAmp) hat eigene Regeln und bleibt unverändert. */
.header,
.hero{
  font-family: var(--font-ui);
}

/* Ausnahme: der Hero-Subtext läuft in der Hauptschrift (Inter) */
.heroSub,
.heroSubInner{
  font-family: var(--font-body);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:min(var(--max), calc(100% - 48px));
  margin:0 auto;
}

/* ===== General spacing ===== */
.pageTopSpacer{ height:72px; }

/* Startseite: Header liegt über dem Hero => Spacer ausblenden */
body:has(.hero) .pageTopSpacer{ display:none; }

/* ===== Brand SVG (Logo nachgezeichnet) ===== */
.brandSvg{
  width:210px;
  height:auto;
  display:block;
}
.brandRoof{
  fill:none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}
.brandName{
  font-size: 44px;
  letter-spacing: 0.02em;
  font-weight: 520;
  fill: rgba(0,0,0,0.72);
}
.brandSub{
  font-size: 34px;
  letter-spacing: 0.02em;
  font-weight: 360;
  fill: rgba(0,0,0,0.55);
}
.brandLine{
  fill:none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.9;
}

/* ===== Header / Nav ===== */
.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;

  /* default: transparent (über Hero) */
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,0.00);
  backdrop-filter: none;

  transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}

.headerInner{
  height:160px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

/* Falls irgendwo noch ein IMG im Brand steht, nicht stören, aber sauber halten */
.brand img{
  height:110px;
  width:auto;
  display:block;
  object-fit:contain;
}

.nav{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:15.5px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  font-weight:520;
}
.nav a{
  position:relative;
  padding:8px 6px;
  text-decoration:none;
}
/* vertikale Linie: kräftiger */
.nav a.isActive::after{
  content:"";
  position:absolute;
  left:-6px;
  top:8px;
  bottom:-26px;
  width:2px;
  background:var(--accent);
}
/* horizontale Linie: feiner und dicht am Reiter */
.nav a.isActive::before{
  content:"";
  position:absolute;
  left:-16px;
  right:50%;
  bottom:-1px;
  height:1px;
  background:var(--accent);
}

/* Header Zustände (per JS).
   isAtTop hiess frueher isOverHero — der Zustand gilt jetzt auf allen
   Seiten, nicht nur ueber dem Hero-Bild der Startseite. */
.header.isAtTop{
  background: rgba(255,255,255,0.00);
  border-bottom-color: rgba(0,0,0,0.00);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.header.isSolid{
  /* Milchglas: der Inhalt schimmert unscharf durch, statt dass ein
     Farbbalken darueberliegt. Keine harte Kante mehr — nur ein Hauch
     Schatten und eine Haarlinie, die kaum auffaellt.
     Der Kapitelton bleibt als leichte Tönung im Glas erhalten. */
  /* Rauchglas statt Milchglas: gegen die helle Seite setzte sich das
     weisse Glas zu wenig ab. Dunkel getoent trennt der Balken klar,
     die Unschaerfe bleibt. */
  background: rgba(22,25,31,0.74);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 2px solid color-mix(in srgb, var(--headerAkzent, var(--accent)) 85%, transparent);
  box-shadow: 0 14px 34px -20px rgba(15,23,42,0.55);
  transition: border-color 420ms ease;
}
/* Ohne backdrop-filter (aeltere Browser) waere das Glas durchsichtig —
   dann greift eine deckendere Flaeche. */
@supports not (backdrop-filter: blur(1px)){
  .header.isSolid{ background: rgba(22,25,31,0.95); }
}

/* Auf dem dunklen Glas laufen Logo und Navigation hell — im gescrollten
   Zustand und bei offenem Mobilmenue. Ueber dem hellen Hero bleibt alles
   dunkel, darum nicht einfach auf .header. */
.header.isSolid .logo,
.header:has(.mobileNav.isOpen) .logo{ color: #ffffff; }
/* Dach und Unterstrich im Logo bleiben auch auf dem dunklen Glas in der
   Markenfarbe. Ein aufgehelltes Bordeaux kippte vorher ins Pinke — darum
   hier der unveraenderte CI-Wert, kein erfundener Zwischenton. */
.header.isSolid .logo path[stroke],
.header.isSolid .logo line[stroke],
.header:has(.mobileNav.isOpen) .logo path[stroke],
.header:has(.mobileNav.isOpen) .logo line[stroke]{ stroke: var(--accent); }
.header.isSolid .nav a,
.header.isSolid .mobileNav a,
.header:has(.mobileNav.isOpen) .nav a,
.header:has(.mobileNav.isOpen) .mobileNav a{ color: rgba(255,255,255,0.92); }
.header.isSolid .nav a:hover,
.header:has(.mobileNav.isOpen) .mobileNav a:hover{ color: #ffffff; }
.header.isSolid .nav a.isActive::after,
.header.isSolid .nav a.isActive::before,
.header:has(.mobileNav.isOpen) .nav a.isActive::after,
.header:has(.mobileNav.isOpen) .nav a.isActive::before{ background: var(--accent); }
.header.isSolid .burger,
.header:has(.mobileNav.isOpen) .burger{
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.12);
}
.header.isSolid .burgerLines span,
.header:has(.mobileNav.isOpen) .burgerLines span{ background: #ffffff; }

/* Mobile menu */
.burger{
  display:none;
  width:42px; height:42px;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.75);
  cursor:pointer;
}
.burgerLines{
  width:18px; height:12px;
  margin:0 auto;
  display:flex; flex-direction:column; justify-content:space-between;
}
.burgerLines span{
  height:2px; background:var(--text); border-radius:99px;
  opacity:0.9;
}

.mobileNav{
  display:none;
  padding:10px 0 16px;
  /* Kein eigener Hintergrund / Blur - der Header übernimmt das Glas */
  background: transparent;
}

/* Wenn das Mobilmenü offen ist: Header bekommt den Solid-Glas-Look,
   der sich dann über headerInner + mobileNav als eine Fläche erstreckt. */
/* Offenes Mobilmenue: dasselbe Rauchglas wie der gescrollte Header —
   sonst staende die helle Schrift auf einer weissen Flaeche. */
.header:has(.mobileNav.isOpen){
  background: rgba(22,25,31,0.92);
  border-bottom: 2px solid color-mix(in srgb, var(--headerAkzent, var(--accent)) 85%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
.mobileNav a{
  display:block;
  padding:12px 0;
  font-size:13px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  text-decoration:none;
  font-weight:520;
  color: var(--text);
}
.mobileNav a.isActive{
  color: var(--accent);
  font-weight: 700;
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}
.mobileNav.isOpen{ display:block; }

/* ===== Hero / Slideshow ===== */
.hero{
  position:relative;
  /* Exakt eine Bildschirmhöhe: Hero-Unterkante = Bildschirmrand.
     Dadurch sitzen die Slider-Pfeile (position:absolute; bottom) immer
     sauber am unteren Bildschirmrand, egal wie hoch der Inhalt ist. */
  height:100vh;
  height:100dvh;
  display:grid;
  align-items:stretch;
  overflow:hidden;
}

.slides{ position:absolute; inset:0; z-index:1; }
.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position: center 65%;
  opacity:0;
  z-index:1;
  transition: none;

  /* Hero: nur s/w */
  filter: grayscale(1) contrast(1.05) brightness(1.02);
}
.slide.wasActive{
  opacity:1;
  z-index:1;
}
.slide.isActive{
  opacity:1;
  z-index:2;
}
/* Slant-Offset = Hero-Höhe * tan(30°). 78vh * 0.577 ≈ 45vh */
.hero{ --slant: 45vh; }

.slide.isActive.wiping{
  animation: slideWipe 3300ms cubic-bezier(.65,.05,.36,1) forwards;
}
@keyframes slideWipe{
  from {
    clip-path: polygon(
      0 0,
      0 0,
      calc(0% - var(--slant)) 100%,
      calc(0% - var(--slant)) 100%
    );
  }
  to {
    clip-path: polygon(
      0 0,
      calc(100% + var(--slant)) 0,
      100% 100%,
      calc(0% - var(--slant)) 100%
    );
  }
}

/* Trennlinie für den Wipe – schräg im selben Winkel wie Buttons & Subtext */
.slideLine{
  position:absolute;
  top:0; bottom:0;
  left:0;
  width:2px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.7) 18%,
    rgba(255,255,255,0.7) 82%,
    rgba(255,255,255,0) 100%);
  box-shadow: 0 0 14px rgba(255,255,255,0.45);
  z-index:3;
  opacity:0;
  pointer-events:none;
  transform-origin: top left;
  transform: skewX(-30deg) translateX(0);
  will-change: transform, opacity;
}
.slideLine.wiping{
  animation: slideLineMove 3300ms cubic-bezier(.65,.05,.36,1) forwards;
}
@keyframes slideLineMove{
  0%   { opacity:0; transform: skewX(-30deg) translateX(0); }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { opacity:0; transform: skewX(-30deg) translateX(calc(100vw + var(--slant))); }
}
@media (prefers-reduced-motion: reduce){
  .slide.isActive.wiping{ animation: none; }
  .slideLine.wiping{ animation: none; opacity: 0; }
}

/* Nebel/Verlauf: oben stark, nach unten klarer (wie Referenz) */
.heroOverlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 24%,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.30) 35%,
      rgba(255,255,255,0.10) 65%,
      rgba(255,255,255,0.00) 100%),
    linear-gradient(to top,
      rgba(255,255,255,0.45) 0%,
      rgba(255,255,255,0.18) 30%,
      rgba(255,255,255,0.00) 60%),
    linear-gradient(to bottom,
      rgba(255,255,255,0.62) 0%,
      rgba(255,255,255,0.32) 30%,
      rgba(255,255,255,0.10) 55%,
      rgba(255,255,255,0.00) 80%);
}

.heroContent{
  position:relative;
  z-index:4;
  display:grid;
  justify-items:center;
  align-content:space-between;
  text-align:center;
  padding: 170px 0 84px;
  row-gap:0;
  min-height: 92vh;
}

.heroKicker{
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(0,0,0,0.55);
  margin-bottom:44px;
  font-weight:520;
  line-height:1.25;
}

.heroTitle{
  font-size: clamp(34px, 4.2vw, 66px);
  letter-spacing:0.18em;
  font-weight:420;
  margin:0;
}

/* Wort-für-Wort Animation (langsamer) */
.heroTitle .word{
  display:inline-block;
  opacity:0;
  transform: translateY(10px);
  transition: opacity 1100ms ease, transform 1100ms ease;
  will-change: opacity, transform;
}
.heroTitle .word.isIn{
  opacity:1;
  transform: translateY(0);
}
.heroTitle .wordGap{
  display:inline-block;
  width:0.35em;
}

.heroSub{
  margin:30px 0 50px;
  margin-top: 1200px;
  color:rgba(0, 0, 0, 0.95);
  max-width: 760px;
  padding:0 18px;
  font-size:18px;
  letter-spacing:0.03em;
  font-weight:360;
}

.heroSubText{
  margin-top: 40px;
  font-size: 1.20rem;
  opacity: 0.9;
}

.heroCtas{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:50px;
  color:var(--text);
  padding:20px 30px;
  font-size:14px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-decoration:none;
  background:transparent;
  border:none;
  border-radius:0;
  isolation:isolate;
  transition: transform 150ms ease;
  font-weight:600;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--btnBg);
  border: 3px solid rgba(0,0,0,0.10);
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
  transform: skewX(-30deg);
  transition: background 150ms ease, border-color 150ms ease;
  z-index:-1;
}
.btn:hover{
  transform: translateY(-5px);
  text-decoration:none;
}
.btn:hover::before{
  background: var(--btnBgHover);
}
.btn.primary::before{
  border-color: var(--accentLine);
}
.btnIcon{
  width:16px; height:16px;
  display:inline-block;
  border-right:10px solid currentColor;
  border-top:2px solid currentColor;
  transform: rotate(45deg);
  margin-top:-1px;
}

/* Slideshow controls */
.heroControls{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:22px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
}
.ctrl{
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);
  background:rgba(255,255,255,0.70);
  cursor:pointer;
  box-shadow: var(--shadow);
}
.ctrl:active{ transform: translateY(1px); }
.ctrl svg{ display:block; margin:0 auto; }

/* ===== Reveal utility ===== */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity 900ms ease, transform 900ms ease;
  will-change: opacity, transform;
}
.reveal.isIn{
  opacity:1;
  transform: translateY(0);
}

/* ===== Sections ===== */
.section{
  padding: 28px 0 40px;
}
.sectionHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding: 18px 0;
  border-top:1px solid var(--line);
}
.sectionHeader h2{
  margin:0;
  font-size:16px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:650;
  position:relative;
  padding-bottom:10px;
}
.sectionHeader h2::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:54px; height:2px;
  background: var(--accent);
  border-radius:99px;
  opacity:0.9;
}
.sectionHeader p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:360;
}

/* ===== Leistungen (final clean): ohne Rahmen, mehr Luft ===== */
.serviceList{
  display:flex;
  flex-direction:column;
  gap:28px;
  padding: 28px 0 0;
}

/* Fade-in bei Leistungen */
.serviceRow{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 900ms ease, transform 900ms ease;

  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  margin-right: 200px;
}
.serviceRow.isIn{
  opacity: 1;
  transform: translateY(0);
}

.serviceItem{
  display:grid;
  grid-template-columns: 84px 1fr;
  gap:26px;
  align-items:flex-start;
}

/* Icon links – gross, ruhig */
.serviceIcon{
  width:84px;
  height:84px;
  border-radius:26px;
  border:1px solid var(--accentLine);
  background: rgba(123,30,90,0.06);
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.serviceIcon svg{
  width:36px;
  height:36px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Textblock rechts */
.serviceText{
  max-width: 820px;
}

.serviceText h3{
  margin:0 0 12px;
  font-size:13px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:650;
  line-height:1.2;
}

/* Lauftext bewusst grösser & luftiger */
.serviceText p{
  margin:0;
  font-size:14.5px;
  line-height:1.85;
  color:rgba(0,0,0,0.75);
  font-weight:360;
}
.serviceText p + p{ margin-top:10px; }

/* Mobile Anpassung */
@media (max-width: 600px){
  .serviceItem{
    grid-template-columns: 64px 1fr;
    gap:18px;
  }
  .serviceIcon{
    width:64px;
    height:64px;
    border-radius:20px;
  }
  .serviceIcon svg{
    width:28px;
    height:28px;
  }
  .serviceText p{
    font-size:14px;
  }
}

/* ===== Subpages ===== */
.page{ padding-top: 160px; }
.pageHero{
  padding: 30px 0 22px;
  border-bottom:1px solid var(--line);
}
/* Alle Unterseiten tragen denselben Titel: gleiche Schrift, gleiche
   Groesse wie die Sektionskoepfe auf der Startseite. */
.pageHero h1{
  margin:0 0 10px;
  font-size: clamp(30px, 3.1vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 300;
  color: var(--text);
}
.pageHero p{
  margin:0;
  color:var(--muted);
  max-width: 820px;
  font-weight:360;
}

/* Projekte grid (farbig) */
.projects{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  padding: 26px 0 66px;
}
.project{
  grid-column: span 4;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
.projectImg{
  aspect-ratio: 4 / 3;
  background:#f3f4f6;
  background-size:cover;
  background-position:center;
  filter:none;
  transform:scale(1.00);
  transition: transform 400ms ease;
}
.project:hover .projectImg{ transform:scale(1.03); }

.projectBody{
  padding:14px 14px 16px;
}
.projectBody h3{
  margin:0 0 6px;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:650;
}
.meta{
  color:var(--muted);
  font-size:12px;
  font-weight:360;
}

/* Kontakt Karten */
.grid2{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:18px;
  padding: 26px 0 56px;
}
.card{
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  background:#fff;
}
.card h2{
  margin:0 0 10px;
  font-size:14px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:650;
}
.card p{
  margin:0;
  color:rgba(0,0,0,0.70);
  font-size:13px;
  line-height:1.75;
  font-weight:360;
}

/* ===== Footer ===== */
.footer{
  border-top:1px solid rgba(0,0,0,0.10);
  background:#0b0d10;
  color:#f7f7f8;
  padding: 36px 0 28px;
}
.footerGrid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1.4fr;
  gap:28px;
  align-items:stretch;
}
.footerCol{
  display: flex;
  flex-direction: column;
}
.footerCol--map{
  min-height: 220px;
}
.footerMap{
  width: 100%;
  height: 100%;
  min-height: 200px;
  border: 0;
  display: block;
  filter: grayscale(0.2) contrast(0.95);
}
.footer h4{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:8px;
  font-weight:650;
}
.footer h4::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:34px; height:2px;
  background: var(--accent);
  border-radius:99px;
  opacity:0.9;
}
.footer p, .footer a{
  margin:0;
  color:rgba(255,255,255,0.75);
  font-size:12px;
  line-height:1.7;
  text-decoration:none;
  font-weight:360;
}
.footer a:hover{ text-decoration:underline; color:#fff; }
.footerSmall{
  margin-top:18px;
  color:rgba(255,255,255,0.55);
  font-size:11px;
  font-weight:360;
}

/* Urhebervermerk der Umsetzung — steht neben, nicht anstelle des Vermerks
   der Bauberatung an den Inhalten. */
/* ===== Responsive ===== */
@media (max-width: 860px){
  .nav{ display:none; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }

  .projects .project{ grid-column: span 6; }
  .grid2{ grid-template-columns: 1fr; }

  /* Leistungen responsive */
  .serviceItem{
    grid-template-columns: 64px 1fr;
    gap:18px;
  }
  .serviceIcon{
    width:64px;
    height:64px;
    border-radius:20px;
  }
  .serviceIcon svg{
    width:28px;
    height:28px;
  }
}

@media (max-width: 520px){
  .projects .project{ grid-column: span 12; }
  .heroSub{ font-size:13px; }
}

/* Optional: bei sehr grossen Bildschirmen mehr Luft */
@media (min-width: 900px){
  .heroContent{ padding: 190px 0 84px; }
}

/* ===================================================================== */
/* ======================= ERWEITERUNGEN (ohne Kürzung) ================= */
/* ===================================================================== */

/* A11y: Fokus sichtbar, aber ruhig */
:focus-visible{
  outline: 2px solid rgba(123,30,90,0.45);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Smooth Scrolling (optional, dezent) */
html{ scroll-behavior:smooth; }

/* Startseite: Bild soll bis ganz oben unter den Header laufen.
   -> Das passiert optisch über das Overlay; zusätzlich kann man den Hero
      ganz minimal "nach oben ziehen", ohne Layout zu brechen. */
body:has(.hero) .hero{
  margin-top: 0;
}

/* Nebel/Verlauf: oben stärker ins Weiss laufen lassen (gegen "Bild abgeschnitten" beim Hochscrollen)
   -> überschreibt die heroOverlay oben, ohne den Block zu entfernen */
.heroOverlay{
  background:
    /* Top Fade: Bild läuft ins Weiss */
    linear-gradient(to bottom,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.78) 18%,
      rgba(255,255,255,0.40) 42%,
      rgba(255,255,255,0.12) 68%,
      rgba(255,255,255,0.00) 100%),
    /* sanfter Nebel-Fokus oben */
    radial-gradient(circle at 50% 14%,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.45) 48%,
      rgba(255,255,255,0.00) 78%);
}

/* Buttons auf Startseite: gleiche Breite, Text zentriert, ohne Pfeil */
.btn{
  justify-content:center; /* erweitert die bestehende .btn-Regel */
}
.btnEqual{
  width: 220px;
  text-align:center;
  margin-top: 180px;
}
.btnIcon{
  display:none !important; /* falls im HTML noch vorhanden */
}

/* Slideshow Controls: rechts unten, prägnent mit Bordeaux + weisser Schicht dahinter
   -> überschreibt bestehende heroControls/ctrl, ohne zu kürzen */
.heroControls{
  left: auto;
  right: 32px;
  transform: none;
  bottom: 32px;
  gap: 22px;
  z-index: 5;       /* über dem Slide-Overlay */
}
.ctrl{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: none;
  padding: 0;

  background: var(--accent);          /* Bordeaux-Front */
  color: #fff;
  font-size: 30px;
  line-height: 1;
  font-weight: 500;
  opacity: 1;

  /* Weisse Schicht versetzt dahinter + zarter dunkler Rand für Kontrast */
  box-shadow:
    6px 6px 0 0 #fff,
    6px 6px 0 1px rgba(0,0,0,0.10);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  cursor: pointer;
}
.ctrl:hover{
  color: #fff;
  opacity: 1;
  transform: translate(-2px, -2px);
  box-shadow:
    8px 8px 0 0 #fff,
    8px 8px 0 1px rgba(0,0,0,0.12);
}
.ctrl:active{
  transform: translate(3px, 3px);
  box-shadow:
    2px 2px 0 0 #fff,
    2px 2px 0 1px rgba(0,0,0,0.10);
}
.ctrl svg{
  display: none;
}

/* Übergang zu Leistungen: ohne oberen Strich (optional über Klasse .sectionHeaderClean im HTML) */
.sectionHeaderClean{
  border-top: none;
  padding-top: 0;
  justify-content: flex-start;
}
.sectionHeaderClean p{ display:none; }

/* Wenn du den Strich UNTER dem Titel auch nicht willst, im HTML ebenfalls .sectionHeaderClean nutzen */
.sectionHeaderClean h2::after{
  width: 54px; /* belassen */
}

/* Leistungen: etwas mehr Abstand zwischen Icon und Text, Text minimal grösser (ruhiger) */
.serviceItem{
  gap: 30px;
}
.serviceText p{
  font-size: 15px;
}

/* Responsive Feinschliff: Buttons untereinander sauber */
@media (max-width: 600px){
  .btnEqual{ width: 210px; }
  .heroControls{ left: auto; right: 18px; bottom: 22px; gap: 18px; }
  .ctrl{
    width: 46px;
    height: 46px;
    font-size: 24px;
    box-shadow:
      5px 5px 0 0 #fff,
      5px 5px 0 1px rgba(0,0,0,0.10);
  }
}

/* Reduce Motion: wenn Nutzer Animationen reduziert haben will */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .slide{ transition:none; }
  .heroTitle .word{ transition:none; }
  .reveal{ transition:none; }
  .serviceRow{ transition:none; }
  .btn{ transition:none; }
  .ctrl{ transition:none; }
}

/* ===== Hero Typo Hierarchie ===== */

.heroKicker{
  font-size:14px;
  letter-spacing:0.24em;
  margin-bottom:18px;
  opacity:0;
  transform:translateY(8px);
  transition: opacity 1200ms ease, transform 1200ms ease;
}

.heroKicker.isIn{
  opacity:1;
  transform:translateY(0);
}

.heroLead{
  display:block;
  font-size: clamp(30px, 3.8vw, 56px);
  letter-spacing:0.06em;
  font-weight:420;
  margin-bottom:6px;
}

/* "P. Hefti"-Block mit Dach und Unterstrich (wie Logo) */
.heroLeadHefti{
  position: relative;
  display: inline;
  white-space: nowrap;
  padding: 0 0.10em;
}
.heroLeadRoof{
  position: absolute;
  top: -0.22em;            /* näher am Text */
  left: 0.10em;
  right: 0.10em;
  width: calc(100% - 0.20em);
  height: 0.34em;          /* etwas grösser */
  pointer-events: none;
  overflow: visible;
}
.heroLeadLine{
  position: absolute;
  bottom: -0.18em;
  left: 0.10em;
  right: 0.10em;
  width: calc(100% - 0.20em);
  height: 0.06em;
  pointer-events: none;
  overflow: visible;
}

.heroMain{
  display:block;
  font-size: 20px;
  margin-top: 20px;
}

/* Subline höher & präsenter */
.heroSub{
  margin-top:10px;
  font-size:15.5px;
  opacity:0;
  transform:translateY(10px);
  transition: opacity 1400ms ease, transform 1400ms ease;
}

.heroSub.isIn{
  opacity:1;
  transform:translateY(0);
}
.heroFade{
  opacity:1;
  transition: opacity 600ms ease;
}
.heroFade.isFaded{
  opacity:0;
}

/* ================= HERO SPACING FIX (ganz unten lassen) ================= */

/* Layout: Kicker oben, Pairs+Sub mittig-tief, Partner am Boden */
.heroContent{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  row-gap:0;
}
.heroContent .heroSub{
  margin-top: 80px !important;    /* nach unten gerückt, aber ohne Überlauf */
}
.heroContent .heroScroll{
  margin-top: auto !important;
}

.heroList{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.heroList li{
  font-size: 15px;
  letter-spacing: 0.03em;
  margin: 6px 0;
  color: rgba(0,0,0,0.85);
}

/* Kicker mit Abstand wegen dem Hausdach + nach unten gerückt */
.heroKicker{
  margin:44px 0 32px !important;
}

/* Titel ohne extra Margins */
.heroTitle{
  margin:0 !important;
}

/* Subtext nahe unter dem Titel (ca. 30px) und höher (nicht "unten kleben") */
.heroSub{
  margin:30px 0 18px !important;
  font-size:17px;            /* etwas kleiner als vorher, aber gut lesbar */
  max-width:780px;
}

/* GANZ WICHTIG: diesen Fehler eliminieren */
.heroSub{
  margin-top:80px !important;     /* nach unten gerückt, aber ohne Überlauf */
  margin-bottom: 22px !important; /* nahe an Partner-Strich */
}

/* CTA leicht näher am Subtext */
.heroCtas{
  margin-top:8px;
}
/* ======================================================================= */
.logo{
  height:56px;          /* Header-Grösse */
  width:auto;
  color:#13010c;        /* CI-Farbe */
  display:block;
}

/* Dach + Unterstrich werden bei jedem Slide-Wechsel live gezeichnet */
.heroLeadRoof path,
.heroLeadLine line{
  stroke-dasharray: 1;
  stroke-dashoffset: 1;     /* default: unsichtbar bis zum ersten Hop */
}
.heroLead.isHop .heroLeadRoof path{
  animation: heroRoofDraw 1100ms cubic-bezier(.55, .05, .25, 1) forwards;
}
.heroLead.isHop .heroLeadLine line{
  animation: heroRoofDraw 1100ms cubic-bezier(.55, .05, .25, 1) 220ms forwards;
}
@keyframes heroRoofDraw{
  0%   { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce){
  .heroLeadRoof path,
  .heroLeadLine line{ stroke-dashoffset: 0; }
  .heroLead.isHop .heroLeadRoof path,
  .heroLead.isHop .heroLeadLine line{ animation: none; }
}

/* Subtext: Milchglas exakt hinter den Buchstaben (pro Zeile) */
.heroSub{
  line-height: 2.2;
}
.heroSubInner{
  display: inline;
  background: rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 6px 14px;
  color: rgba(0,0,0,0.88);
  font-weight: 380;
}

/* "Mehr erfahren" – Scroll-Hinweis unten in der Mitte.
   Achtung: transform des <a> gehört der Intro-Animation in main.js (inline style),
   darum laufen Hover- und Bounce-Effekte ausschliesslich auf den Kindelementen. */
.heroScroll{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  position: relative;
  text-decoration: none;
}
/* Bordeaux-Akzentlinie über dem Label */
.heroScroll::before{
  content: "";
  width: 64px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  margin-bottom: 4px;
}
.heroScrollLabel{
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  background: rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 8px 18px;
  border: 1px solid rgba(123,30,90,0.22);
  transition: background 220ms ease, border-color 220ms ease;
}
.heroScroll:hover .heroScrollLabel{
  background: rgba(255,255,255,0.55);
  border-color: rgba(123,30,90,0.45);
}
.heroScrollArrow{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--accent);
  background: rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(123,30,90,0.18);
  box-shadow: 0 12px 30px -16px rgba(123,30,90,0.45);
  animation: heroScrollBounce 2.2s ease-in-out infinite;
  transition: background 220ms ease, border-color 220ms ease;
}
.heroScrollArrow svg{ width: 20px; height: 20px; }
.heroScroll:hover .heroScrollArrow{
  background: rgba(255,255,255,0.55);
  border-color: rgba(123,30,90,0.45);
}
@keyframes heroScrollBounce{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce){
  .heroScrollArrow{ animation: none; }
}

/* Ziel des "Mehr erfahren"-Buttons: sitzt direkt hinter dem Hero,
   der Abstand hält den fixen Header frei. */
.scrollAnchor{
  display: block;
  scroll-margin-top: 110px;
}

/* Architektur / Bauleitung – Originaldesign, gross aufzeichnen, dann via JS in EINER
   Bewegung verkleinert hoch unter "Bauberatung" sliden (font-size/gap/Icon/left/top,
   KEIN transform -> scharf). */
.heroMain{
  display: flex !important;
  justify-content: center;
  align-items: flex-start;
  gap: 36px;                    /* etwas enger zum "&" */
  margin-top: 140px !important; /* Originalposition fuer den grossen Reveal */
  position: relative;           /* fuer left/top-Slide ohne transform */
  left: 0;
  top: 0;
}
/* Waehrend des Settle-Slides: echte Eigenschaften tweenen (kein transform -> scharf) */
.heroMain.isSettling{
  transition:
    left var(--heroSettleMs, 1100ms) cubic-bezier(.6,0,.3,1),
    top  var(--heroSettleMs, 1100ms) cubic-bezier(.6,0,.3,1),
    gap  var(--heroSettleMs, 1100ms) cubic-bezier(.6,0,.3,1);
}
.heroMain.isSettling .heroPair{
  transition: gap var(--heroSettleMs, 1100ms) cubic-bezier(.6,0,.3,1);
}
.heroMain.isSettling .heroPairTitle{
  transition: font-size var(--heroSettleMs, 1100ms) cubic-bezier(.6,0,.3,1);
}
.heroMain.isSettling .heroPairAmp{
  transition:
    font-size   var(--heroSettleMs, 1100ms) cubic-bezier(.6,0,.3,1),
    line-height var(--heroSettleMs, 1100ms) cubic-bezier(.6,0,.3,1);
}
.heroMain.isSettling .heroPairIcon{
  transition:
    width  var(--heroSettleMs, 1100ms) cubic-bezier(.6,0,.3,1),
    height var(--heroSettleMs, 1100ms) cubic-bezier(.6,0,.3,1);
}
.heroPair{
  display: inline-flex;
  flex-direction: column;       /* Symbol unter Titel - Originaldesign */
  align-items: center;
  gap: 26px;
  transform-origin: center center;
}
.heroPairAmp{
  align-self: flex-start;
  font-family: "Marcellus", "Trajan Pro", "Times New Roman", serif;
  font-size: 40px;
  line-height: 40px;
  font-weight: 400;
  color: #4a4a4a;              /* helleres Anthrazit */
  margin-top: 0;
  /* Heller Halo, damit der dunkle Buchstabe auf dunklen Slides nicht verschwindet */
  text-shadow:
    0 0 2px rgba(255,255,255,0.55),
    0 0 12px rgba(255,255,255,0.35);
}
.heroPairTitle{
  font-family: "Marcellus", "Trajan Pro", "Times New Roman", serif;
  font-size: 40px;
  font-weight: 400;            /* Marcellus hat nur 400 */
  letter-spacing: 0.06em;      /* leichter Spatium - römisch-edel */
  text-transform: none;
  line-height: 1;
  color: #4a4a4a;              /* helleres Anthrazit */
  /* Heller Halo fuer Lesbarkeit auf beiden Slideshow-Helligkeiten */
  text-shadow:
    0 0 2px rgba(255,255,255,0.6),
    0 0 14px rgba(255,255,255,0.4);
}
.heroPairIcon{
  display: inline-flex;
  width: 76px;
  height: 76px;
  color: #4a4a4a;              /* helleres Anthrazit - SVG nutzt currentColor */
  opacity: 1;
  /* Heller Halo um die feinen Strichlinien */
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,0.55))
    drop-shadow(0 0 8px rgba(255,255,255,0.35));
}
.heroPairIcon svg{
  width: 100%;
  height: 100%;
}
/* Feine Strichstärke wie Tuschfeder */
.heroPairIcon svg path{
  stroke-width: 0.9;
}

/* Scharfer Mini-Ruhezustand: echte halbe Groessen statt transform: scale(0.5).
   Per JS gesetzt, nachdem der Shrink-Slide steht - so rendert der Browser die
   Schrift gestochen scharf neu, statt eine hochskalierte Rasterung anzuzeigen.
   Werte = exakt die Haelfte der grossen Werte, damit der Uebergang sprunglos ist. */
.heroMain.isMini{ gap: 18px; }
.heroMain.isMini .heroPair{ gap: 13px; }
.heroMain.isMini .heroPairTitle{
  font-size: 20px;
  text-shadow: 0 0 1px rgba(255,255,255,0.6), 0 0 7px rgba(255,255,255,0.4);
}
.heroMain.isMini .heroPairAmp{
  font-size: 20px;
  line-height: 20px;
  text-shadow: 0 0 1px rgba(255,255,255,0.55), 0 0 6px rgba(255,255,255,0.35);
}
.heroMain.isMini .heroPairIcon{
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.55)) drop-shadow(0 0 4px rgba(255,255,255,0.35));
}

/* Sequenz beim Slide-Wechsel: erst Architektur, dann Undzeichen, dann Bauleitung */
.heroMain.isHop .heroPair--archi{
  animation: heroPairPulse 900ms cubic-bezier(.34, 1.55, .64, 1);
}
.heroMain.isHop .heroPairAmp{
  animation: heroAmpPop 420ms cubic-bezier(.34, 1.7, .55, 1.05) 1100ms backwards;
}
.heroMain.isHop .heroPair--bau{
  animation: heroPairPulse 900ms cubic-bezier(.34, 1.55, .64, 1) 1500ms;
}
@keyframes heroPairPulse{
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.08); }
  100% { transform: scale(1);    }
}
@keyframes heroAmpPop{
  0%   { opacity: 0; transform: scale(0.35); }
  100% { opacity: 1; transform: scale(1);    }
}

/* Endlos-Herzschlag fuer das Architektur & Bauleitung-Band - laeuft nur,
   wenn der Titel via JS unter "Bauberatung" gesettled wurde (.isPulsing am heroTitle).
   WICHTIG: pulst nach INNEN (max scale = 1). Bei einem Aufwaerts-Puls (>1) rastert der
   Browser die GPU-Ebene auf der groessten Skalierung und zeigt sie im Ruhezustand
   runterskaliert -> dauerhaft unscharf. Mit max scale 1 bleibt der Ruhezustand scharf. */
@keyframes heroHeartbeat{
  0%, 26%, 70%, 100% { transform: scale(1); }
  13%                { transform: scale(0.93); }
  40%                { transform: scale(0.965); }
}
.heroMain.isPulsing .heroPair,
.heroMain.isPulsing .heroPairAmp{
  animation: heroHeartbeat 1500ms ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .heroMain.isPulsing .heroPair,
  .heroMain.isPulsing .heroPairAmp{ animation: none !important; }
}

/* Buchstaben-Reveal & Symbol live zeichnen */
.heroPairTitle{
  display: inline-block;
}
.heroPairIcon path{
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.heroMain.isHop .heroPair--archi .heroPairTitle,
.heroMain.isHop .heroPair--bau   .heroPairTitle{
  animation: heroTitleReveal 900ms cubic-bezier(.55, .05, .25, 1) backwards;
}
.heroMain.isHop .heroPair--archi .heroPairIcon path,
.heroMain.isHop .heroPair--bau   .heroPairIcon path{
  animation: heroSymbolDraw 900ms cubic-bezier(.55, .05, .25, 1) backwards;
}

/* Bauleitung wartet bis das Undzeichen aufgepoppt ist */
.heroMain.isHop .heroPair--bau .heroPairTitle,
.heroMain.isHop .heroPair--bau .heroPairIcon path{
  animation-delay: 1500ms;
}

/* Pfade gestaffelt zeichnen für "live"-Charakter (Architektur) */
.heroPair--archi .heroPairIcon path:nth-of-type(1){ animation-delay: 0ms !important; }
.heroPair--archi .heroPairIcon path:nth-of-type(2){ animation-delay: 50ms !important; }
.heroPair--archi .heroPairIcon path:nth-of-type(3){ animation-delay: 100ms !important; }
.heroPair--archi .heroPairIcon path:nth-of-type(4){ animation-delay: 160ms !important; }
.heroPair--archi .heroPairIcon path:nth-of-type(5){ animation-delay: 220ms !important; }
.heroPair--archi .heroPairIcon path:nth-of-type(6){ animation-delay: 280ms !important; }
/* Bauleitung-Pfade gestaffelt nach dem Undzeichen */
.heroMain.isHop .heroPair--bau .heroPairIcon path:nth-of-type(1){ animation-delay: 1500ms !important; }
.heroMain.isHop .heroPair--bau .heroPairIcon path:nth-of-type(2){ animation-delay: 1550ms !important; }
.heroMain.isHop .heroPair--bau .heroPairIcon path:nth-of-type(3){ animation-delay: 1600ms !important; }
.heroMain.isHop .heroPair--bau .heroPairIcon path:nth-of-type(4){ animation-delay: 1660ms !important; }
.heroMain.isHop .heroPair--bau .heroPairIcon path:nth-of-type(5){ animation-delay: 1720ms !important; }
.heroMain.isHop .heroPair--bau .heroPairIcon path:nth-of-type(6){ animation-delay: 1780ms !important; }

@keyframes heroTitleReveal{
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes heroSymbolDraw{
  0%   { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce){
  .heroMain.isHop .heroPair--archi,
  .heroMain.isHop .heroPair--bau,
  .heroMain.isHop .heroPair--archi .heroPairTitle,
  .heroMain.isHop .heroPair--bau   .heroPairTitle,
  .heroMain.isHop .heroPair--archi .heroPairIcon path,
  .heroMain.isHop .heroPair--bau   .heroPairIcon path{ animation: none; }
}

@media (max-width: 600px){
  .heroMain{ gap: 60px; }
  .heroPairTitle{ font-size: 24px; letter-spacing: 0.02em; }
  .heroPairIcon{ width: 44px; height: 44px; }
}

/* ===================================================================== */
/* ===================== Projekt-Galerie (Vollbild) ==================== */
/* ===================================================================== */

/* =====================================================================
   Projekt-Galerie — Proportionen nach dem Goldenen Schnitt (phi = 1.618)
     Spalten   Bild : Text        = phi : 1
     Bildformat Breite : Hoehe    = phi : 1
     Abstaende  30 -> 48 -> 78    = phi-Folge
   ===================================================================== */
.projektGalerie{
  --phi: 1.618;
  --gapS: 30px;
  --gapM: 48px;   /* 30 * phi */
  --gapL: 78px;   /* 48 * phi */
  position: relative;
  background: #fff;
  padding-top: 200px;            /* Header (160px) + Luft */
  padding-bottom: var(--gapL);
}

/* ---- Faktenleiste ---- */
.projektDashboard{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  margin-bottom: var(--gapS);
  border-top: 1px solid rgba(15,23,42,0.18);
  border-bottom: 1px solid rgba(15,23,42,0.18);
  background: #fff;
}
.dashStat{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 10px 16px;
  border-right: 1px solid rgba(15,23,42,0.10);
}
.dashStat:first-child{ padding-left: 0; }
.dashStat:last-child{ border-right: none; }
.dashLabel{
  font-size: 8.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.dashValue{
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dashValue--accent{ color: var(--accent); }

/* ---- Bild : Textspalte = phi : 1 ---- */
.projektBody{
  display: grid;
  /* Das Bild bekommt den Löwenanteil; die Textspalte braucht rund 330 px,
     damit die Projektliste nicht umbricht. */
  grid-template-columns: minmax(0, 2.25fr) minmax(320px, 1fr);
  gap: var(--gapM);
  align-items: start;
}

.projektViewer{
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f2f1ef;
}
.projektStage{ position: absolute; inset: 0; z-index: 1; }
.projektSlide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 600ms ease;
  filter: grayscale(0.12) contrast(1.03);
}
.projektSlide.isActive{ opacity: 1; }

/* Bildnavigation: unten rechts im Bild, hell abgesetzt */
.projektImgNav{
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.projektImgBtn{
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.projektImgBtn:hover{ background: var(--accent); color: #fff; }
.projektImgCount{
  min-width: 48px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.projektImgCount [data-projekt-img-current]{ color: var(--accent); font-size: 15px; }
.projektImgSep{ opacity: 0.4; margin: 0 2px; }

/* ---- Textspalte: Info oben, Liste unten ---- */
.projektSide{
  display: flex;
  flex-direction: column;
  gap: var(--gapS);
  min-width: 0;
}

.projektInfo{ color: var(--text); }
.projektCount{
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.28em;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--muted);
}
.projektCount [data-projekt-count]{
  font-size: 26px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--accent);
}
.projektCountSep{ opacity: 0.45; font-size: 14px; margin: 0 2px; }
.projektCount [data-projekt-total]{ font-size: 13px; opacity: 0.7; }

.projektTitel{
  margin: 0 0 8px;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 300;
  text-transform: none;
  color: var(--text);
}
.projektMeta{
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.projektText{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(0,0,0,0.62);
  font-weight: 400;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* Projektliste */
.projektNav{
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(15,23,42,0.18);
}
.projektNavItem{
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 16px 16px 18px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(15,23,42,0.10);
  color: rgba(0,0,0,0.62);
  font: inherit;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, padding-left 200ms ease;
}
.projektNavItem::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 200ms ease;
}
.projektNavItem:hover{
  background: rgba(15,23,42,0.04);
  color: var(--text);
  padding-left: 24px;
}
.projektNavItem.isActive{
  background: var(--accent);
  color: #fff;
  border-bottom-color: var(--accent);
}
.projektNavItem.isActive::before{ background: #fff; }
.projektNavNum{
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.20em;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.projektNavItem.isActive .projektNavNum{ opacity: 1; }
.projektNavTitel{ font-weight: 600; }

/* Wechsel-Animation für Info-Texte und Dashboard */
.projektInfo.isSwapping .projektTitel,
.projektInfo.isSwapping .projektMeta,
.projektInfo.isSwapping .projektText,
.projektInfo.isSwapping [data-projekt-count],
.projektDashboard.isSwapping .dashValue{
  animation: projektInfoFade 600ms ease;
}
.projektDashboard.isSwapping .dashStat:nth-child(1) .dashValue{ animation-delay: 0ms;   }
.projektDashboard.isSwapping .dashStat:nth-child(2) .dashValue{ animation-delay: 60ms;  }
.projektDashboard.isSwapping .dashStat:nth-child(3) .dashValue{ animation-delay: 120ms; }
.projektDashboard.isSwapping .dashStat:nth-child(4) .dashValue{ animation-delay: 180ms; }
.projektDashboard.isSwapping .dashStat:nth-child(5) .dashValue{ animation-delay: 240ms; }
.projektDashboard.isSwapping .dashStat:nth-child(6) .dashValue{ animation-delay: 300ms; }
@keyframes projektInfoFade{
  0%   { opacity: 1; transform: translateY(0); }
  35%  { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .projektSlide{ transition: opacity 200ms ease; transform: none; }
  .projektSlide.isActive{ transform: none; }
  .projektInfo.isSwapping *{ animation: none; }
}

/* ===================================================================== */
/* ====================== Leistungen-Tiles (Bento) ===================== */
/* ===================================================================== */

.tilesSection{ padding-top: 48px; padding-bottom: 36px; }

.tilesHeader{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.tilesHeader h2{
  margin: 0;
  font-size: 26px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.tilesHeader p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.tilesAllLink{
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: color 200ms ease;
}
.tilesAllLink:hover{ text-decoration: underline; }

/* ===== Sektionskopf: Haarlinie, Kicker, grosse Headline links, Text rechts ===== */
.sectionHead{
  position: relative;
  padding-top: 30px;
  margin-bottom: 32px;
}
/* Haarlinie als Pseudo-Element, damit sie sich von links einzeichnen kann */
.sectionHead::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: rgba(15,23,42,0.16);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1000ms cubic-bezier(.4,0,.2,1);
}
.sectionHead.isIn::before{ transform: scaleX(1); }

/* Inhalt fadet leicht versetzt nach */
.sectionHeadGrid{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 720ms ease 220ms,
              transform 720ms cubic-bezier(.4,0,.2,1) 220ms;
}
.sectionHead.isIn .sectionHeadGrid{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .sectionHead::before{ transform: scaleX(1); transition: none; }
  .sectionHeadGrid{ opacity: 1; transform: none; transition: none; }
}
/* Gleiches Raster wie die Kacheln darunter: Headline über Kachel 1,
   Text über Kachel 2+3. Alles fluchtet. */
.sectionHeadGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 30px;
  align-items: start;
}
/* Linke Spalte: Headline, darunter der Link */
.sectionHeadTitle{
  grid-column: 1;
}
.sectionHeadTitle h2{
  margin: 0;
  font-size: clamp(30px, 3.1vw, 42px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
}
/* Link unter der Headline: Haarlinie über die Spaltenbreite,
   Text links, Pfeil rechts – wandert beim Hover. */
.sectionHeadTitle .tilesAllLink{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 300px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid rgba(15,23,42,0.16);
  transition: border-color 260ms ease, color 260ms ease;
}
.sectionHeadTitle .tilesAllLink:hover{
  text-decoration: none;
  border-top-color: var(--accent);
}
.sectionHeadTitle .tilesAllLink span{
  transition: transform 220ms cubic-bezier(.4,0,.2,1);
}
.sectionHeadTitle .tilesAllLink:hover span{
  transform: translateX(6px);
}

.sectionHeadBody{
  grid-column: 2 / -1;
  padding-top: 12px;   /* erste Textzeile auf Höhe der Headline-Oberkante */
}
.sectionHeadBody .tilesIntro{
  margin: 0;
  max-width: 660px;
}
.sectionHeadBody .tilesIntro + .tilesIntro{
  margin-top: 12px;
}
.sectionHeadMeta{
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.sectionHeadMetaNum{
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* ---- Sektionskopf mit Angebotsspalte rechts ----------------------
   Titel schmal, Intro-Text breit, das TU-Angebot als schmale Spalte
   daneben. Die Spalten sind bewusst ungleich: presst man den Text auf
   ein Drittel, wird er doppelt so hoch und der Platzgewinn ist weg. */
.sectionHead--mitAside .sectionHeadGrid{
  grid-template-columns: 0.8fr 2fr 1.45fr;
  align-items: start;
}
.sectionHead--mitAside .sectionHeadBody{ grid-column: 2; }
.sectionHeadAside{ grid-column: 3; align-self: stretch; }

/* Das Band in Spaltenbreite: einspaltig, kleiner gesetzt. */
/* Der Fliesstext hat in der schmalen Spalte keinen Platz. Die fünf
   Punkte darunter sagen dasselbe kürzer; der volle Text steht weiter
   in der Inhaltsdatei und auf der TU-Unterseite. */

@media (max-width: 860px){
  .sectionHead--mitAside .sectionHeadGrid{ grid-template-columns: 1fr; }
  .sectionHead--mitAside .sectionHeadBody,
  .sectionHeadAside{ grid-column: 1; }
  .sectionHeadGrid{ grid-template-columns: 1fr; gap: 24px; }
  .sectionHeadTitle{ grid-column: 1; }
  .sectionHeadBody{ grid-column: 1; padding-top: 0; }
  .sectionHead{ padding-top: 28px; margin-bottom: 36px; }
}

.tilesIntro{
  margin: 0 0 36px;
  max-width: 780px;
  color: rgba(0,0,0,0.66);
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: 0.01em;

  /* Silbentrennung (html lang="de-CH" liefert die Trennregeln) */
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  text-wrap: pretty;
}

.tilesGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* φ-Hierarchie: kurze Reihe ≈ 220px, lange Reihe ≈ 220×φ */
  grid-template-rows: 220px 356px;
  gap: 14px;
  grid-auto-rows: 220px;
  grid-auto-flow: row dense;
}
.tile{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(123,30,90,0.18);
  box-shadow: 0 14px 30px -16px rgba(123,30,90,0.45),
              0 4px 10px -6px rgba(123,30,90,0.30);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  transition: background 220ms ease, transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.tile:hover{
  background: rgba(255,255,255,0.95);
  border-color: rgba(123,30,90,0.45);
  box-shadow: 0 22px 44px -18px rgba(123,30,90,0.55),
              0 8px 18px -8px rgba(123,30,90,0.40);
  transform: translateY(-4px);
  text-decoration: none;
}
.tile--tall{ grid-row: span 2; }
.tile--cta{
  background: linear-gradient(170deg, rgba(123,30,90,0.06) 0%, rgba(123,30,90,0.14) 100%);
  border-color: rgba(123,30,90,0.40);
}
.tile--cta:hover{
  background: linear-gradient(170deg, rgba(123,30,90,0.10) 0%, rgba(123,30,90,0.22) 100%);
  border-color: rgba(123,30,90,0.60);
}

.tileIcon{
  display: inline-flex;
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  color: var(--accent);
}
.tile--tall .tileIcon{
  width: 56px;
  height: 56px;
  margin-bottom: 28px;
}
.tileIcon svg{
  width: 100%;
  height: 100%;
}
.tileIcon svg path,
.tileIcon svg circle,
.tileIcon svg rect{
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
/* Live zeichnen beim Hover */
.tile:hover .tileIcon svg path,
.tile:hover .tileIcon svg circle,
.tile:hover .tileIcon svg rect{
  animation: tileDraw 900ms cubic-bezier(.55,.05,.25,1) backwards;
}
.tileIcon svg > *:nth-child(1){ animation-delay: 0ms !important; }
.tileIcon svg > *:nth-child(2){ animation-delay: 110ms !important; }
.tileIcon svg > *:nth-child(3){ animation-delay: 220ms !important; }
.tileIcon svg > *:nth-child(4){ animation-delay: 330ms !important; }
.tileIcon svg > *:nth-child(5){ animation-delay: 440ms !important; }
@keyframes tileDraw{
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.tileTitle{
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.3;
}
.tile--tall .tileTitle{ font-size: 16px; }
.tileText{
  margin: 0 0 auto;
  font-size: 12.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(0,0,0,0.66);
  font-weight: 360;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  text-wrap: pretty;
}
.tileList{
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
/* Kachel-Kopf: Titel links, Icon rechts – auf einer Höhe, spart Platz oben */
.tileHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.tile--cat .tileHead .tileIcon{
  width: 24px;
  height: 24px;
  margin: 0;
  flex: none;
  color: rgba(15,23,42,0.28);          /* dezent, die Punkt-Icons tragen die Farbe */
  transition: color 240ms ease;
}
.tile--cat:hover .tileHead .tileIcon{ color: var(--accent); }
.tile--cat .tileHead .tileTitle{ margin: 0; }

/* Aufzählung innerhalb einer Kachel: die Leistungen sind der Inhalt,
   deshalb kräftiger gesetzt und mit feinen Trennlinien gegliedert. */
.tileText:has(+ .tileList){ margin-bottom: 0; }
.tileList{
  list-style: none;
  margin: 10px 0 auto;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--text);
}
/* Jeder Punkt: feste Icon-Spalte, damit alle Texte auf derselben Kante stehen */
.tileList li{
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: start;
  column-gap: 9px;
  padding: 3px 0;
  border-top: 1px solid rgba(15,23,42,0.08);
}
.tileList li:first-child{ border-top: none; }

/* Fallback-Strich, wenn kein Icon vorhanden ist – exakt in der Icon-Spalte */
.tileList li:not(.hasIcon)::before{
  content: "";
  width: 10px; height: 1px;
  margin: 0.62em auto 0 0;
  background: var(--accent);
}

.tileListIcon{
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: var(--accent);
}
.tileListIcon svg{
  width: 18px; height: 18px;
  display: block;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.tileListText{ min-width: 0; padding-top: 1px; }

.tileLink{
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  transition: transform 200ms ease;
}
.tile:hover .tileLink{
  transform: translateX(4px);
}

/* Drei gleichwertige Kategorie-Kacheln (Startseite): Beratung / Planung / Bauleitung */
.tilesGrid--three{
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-auto-rows: auto;
  gap: 16px;
}
.tile--cat{
  min-height: 0;
  padding: 18px 20px 16px;
  color: var(--text);
  /* Ruhige weisse Karte, nur Haarlinien. Kein versetzter Schatten. */
  background: #fff;
  background-image: none;
  border: 1px solid rgba(15,23,42,0.14);
  box-shadow: none;
  /* Reveal beim Scrollen */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 560ms ease, transform 480ms cubic-bezier(.4,0,.2,1),
              border-color 240ms ease;
}
.tile--cat:hover{
  background: #fff;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Der Akzentbalken oben wächst beim Hover — statt Schatten */
.tile--cat::before{ transition: height 240ms ease; }
.tile--cat:hover::before{ height: 5px; }
.tile--cat .tileTitle{ color: var(--text); }
.tile--cat .tileText{ color: rgba(0,0,0,0.62); }
.tile--cat .tileIcon{ color: var(--accent); }
.tile--cat .tileLink{ color: var(--accent); }
.tile--cat.isIn{ opacity: 1; transform: translateY(0); }
.tile--cat.isIn:nth-child(1){ transition-delay: 80ms; }
.tile--cat.isIn:nth-child(2){ transition-delay: 200ms; }
.tile--cat.isIn:nth-child(3){ transition-delay: 320ms; }
/* SIA-Phase mit Label, unten rechts in der Kachel */
.tileNum{
  position: absolute;
  right: 20px;
  bottom: 14px;
  text-align: right;
  line-height: 1;
  pointer-events: none;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,0.10);
  font-variant-numeric: tabular-nums;
}
.tileNumKicker{
  display: block;
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Feiner Themenfarben-Balken oben - immer sichtbar */
.tile--cat::before{
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 3px;
  width: 100%;
  background: var(--accent);
  z-index: 2;
}
.tile--cat .tileIcon{
  width: 52px;
  height: 52px;
  margin-bottom: 26px;
  transition: transform 320ms cubic-bezier(.34,1.55,.64,1);
}
.tile--cat:hover .tileIcon{ transform: scale(1.12) rotate(-3deg); }
.tile--cat .tileTitle{
  font-size: 17px;
  letter-spacing: 0.16em;
}
@media (prefers-reduced-motion: reduce){
  .tile--cat{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (max-width: 860px){
  .tilesGrid{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
  .tilesGrid--three{ grid-template-columns: 1fr; grid-auto-rows: auto; }
  .tile--cat{ min-height: 300px; }
}
@media (max-width: 520px){
  .tilesGrid{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .tile--tall{ grid-row: span 1; }
}
@media (prefers-reduced-motion: reduce){
  .tile:hover .tileIcon svg path,
  .tile:hover .tileIcon svg circle,
  .tile:hover .tileIcon svg rect{ animation: none; }
}

/* ===================================================================== */
/* ===================== Projekte-Strip (kompakt) ====================== */
/* ===================================================================== */

.projectsStrip{ padding-top: 30px; padding-bottom: 80px; }

.stripHeader{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  gap: 24px;
  flex-wrap: wrap;
}
.stripHeader h2{
  margin: 0;
  font-size: 26px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.stripHeader p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.stripCount{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}
.stripCountNum{
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.stripCountLabel{
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 600;
}

.stripGrid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);   /* 5 pro Reihe */
  gap: 16px 14px;
}

.stripCard{
  position: relative;
  color: var(--text);
  display: flex;
  flex-direction: column;
  transition: transform 220ms ease;
}
.stripCard:hover{
  transform: translateY(-3px);
}

.stripCardLink{
  text-decoration: none;
  color: inherit;
  display: block;
}
.stripCardLink:hover{ text-decoration: none; }

.stripImgWrap{
  position: relative;
  overflow: hidden;
  background: #0b0d10;
}
.stripImg{
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.1) contrast(1.03);
  transition: filter 280ms ease, transform 400ms ease;
}
.stripCard:hover .stripImg{
  filter: grayscale(0);
  transform: scale(1.02);
}

/* Platzhalter, bis Bilder und Eckdaten geliefert sind */
.stripCard--placeholder{ pointer-events: none; }
.stripCard--placeholder:hover{ transform: none; }
.stripImgWrap--empty{
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: #f4f3f1;
  border: 1px dashed rgba(15,23,42,0.24);
}
.stripPlaceholder{
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.32);
}
.stripCard--placeholder .stripIndex{ color: rgba(123,30,90,0.40); }
.stripCard--placeholder .stripBody h3{ color: rgba(0,0,0,0.32); }
.stripCard--placeholder .stripMeta{ color: rgba(0,0,0,0.26); }

.stripBody{
  padding: 12px 2px 0;
}
.stripIndex{
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}
.stripBody h3{
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
}
.stripMeta{
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 500;
}

/* Bildwechsel: dauerhaft sichtbar, ausserhalb des Links */
.stripNav{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 0 2px;
}
.stripCtrl{
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(15,23,42,0.22);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.stripCtrl:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.stripCtrl:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.stripImgCount{
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.stripFooter{
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 1000px){
  .stripGrid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px){
  .stripGrid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px){
  .stripGrid{ grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================================== */
/* ===================== Konzept-Konfigurator ========================== */
/* ===================================================================== */

/* ===================================================================== */
/* ============== Leistungen-Seite – gruppiertes Raster ================ */
/* ===================================================================== */

/* ---- SIA-Phasen & Honoraranteile (Einfuehrung) ---- */
.siaIntro{ padding-top: 54px; padding-bottom: 10px; }
/* Text links, Tabelle rechts */
.siaLayout{
  display: grid;
  grid-template-columns: 1fr minmax(400px, 580px);
  gap: 48px;
  align-items: start;
}
.siaText{ min-width: 0; }
@media (max-width: 900px){
  .siaLayout{ grid-template-columns: 1fr; gap: 28px; }
}
.siaIntroHead{ margin-bottom: 24px; }
.siaIntroHead h2{
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: 0.04em;
}
.siaIntroHead p{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.siaTableWrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.siaTable{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.15;
}
.siaTable th{
  text-align: left;
  vertical-align: bottom;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  padding: 0 10px 7px 0;
  border-bottom: 1px solid rgba(0,0,0,0.20);
  white-space: nowrap;
}
.siaTable td{
  vertical-align: top;
  padding: 2.5px 10px 2.5px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.siaTable tbody tr:first-child td{ border-top: none; }
.siaCol-phase{ font-weight: 600; color: var(--text); padding-right: 14px; }
.siaCol-nr{ color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.siaCol-name{ color: var(--text); }
.siaCol-leist{ color: rgba(0,0,0,0.58); }
.siaCol-tp{ text-align: right; vertical-align: bottom; color: rgba(0,0,0,0.58); font-variant-numeric: tabular-nums; white-space: nowrap; }
.siaCol-ph{ text-align: right; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: bottom; }
/* Sub-Leistungen einer Teilphase: keine Trennlinie dazwischen */
.siaTable tr.siaSub td{ border-top: none; }
/* Bordeaux-Trennlinien fuer die 100%-Basis (Phasen 3-5) */
.siaTable tr.siaBaseline td{ border-top: 2px solid var(--accent); }
.siaTable tfoot td{
  border-top: 2px solid var(--accent);
  padding-top: 8px;
  font-weight: 700;
  color: var(--text);
}
.siaTable tfoot .siaCol-ph{ color: var(--accent); }

/* ===== Themenfarben — gedeckte Herbsttoene.
   Bordeaux bleibt als Markenanker, dazu gebranntes Ocker und Moosgruen.
   Vorher standen hier Bordeaux/Blau/Gruen; das Blau fiel aus der Reihe.
   Die Toene sind bewusst entsaettigt, damit sie nebeneinander ruhig
   bleiben. Ueberschreibt --accent im jeweiligen Bereich -> alle Akzente
   (Punkt, Faden, Nummer, Icons, Hover-Balken, Kachel) ziehen mit. ===== */
:root{
  --herbst1: #7b1e5a;   /* Bordeaux  — Marke                */
  --herbst2: #96602c;   /* Ocker     — gebrannt, entsaettigt */
  --herbst3: #5f6a39;   /* Moosgruen — gedeckt               */
}
#beratung,
.tile--beratung{ --accent: var(--herbst1); --tile-tint: rgba(123,30,90,0.34); }
#planung,
.tile--planung{ --accent: var(--herbst2); --tile-tint: rgba(150,96,44,0.36); }
#bauleitung,
.tile--bauleitung{ --accent: var(--herbst3); --tile-tint: rgba(95,106,57,0.36); }

/* Projektkategorien — eigene Akzente, gleiche Kachelform wie die Leistungen */
.tile--wohnen{      --accent: var(--herbst1); --tile-tint: rgba(123,30,90,0.34); }
.tile--oeffentlich{ --accent: var(--herbst2); --tile-tint: rgba(150,96,44,0.36); }
.tile--sanierung{   --accent: var(--herbst3); --tile-tint: rgba(95,106,57,0.36); }

/* Projektliste in der Kachel: Jahr links, Name + Ort rechts */
/* Das Jahr sitzt in der Icon-Spalte — deshalb den Fallback-Strich
   abschalten, der sonst als drittes Grid-Element alles verschiebt. */

.leistungenSection{ padding-top: 50px; padding-bottom: 80px; }

/* Gruppe = Inhalt + schmale Spine-Spalte rechts mit durchgezogenem Bordeaux-Faden */
.leistungenGroup{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  align-items: stretch;
  position: relative;
  scroll-margin-top: 110px;   /* fixer Header beim Anker-Sprung (#beratung etc.) */
}
/* Riesige Geister-Nummer als Wasserzeichen hinter dem Kopf */
.leistungenGroup::before{
  content: attr(data-num);
  position: absolute;
  top: -30px;
  right: 56px;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--accent) 9%, transparent);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 0;
  transform: translateY(20px);
  opacity: 0;
  transition: opacity 900ms ease, transform 900ms ease;
}
.leistungenGroup.isIn::before{ opacity: 1; transform: translateY(0); }
.leistungenGroupBody{
  min-width: 0;
  padding-bottom: 72px;       /* Abstand zwischen Themen INNERHALB der Gruppe -> Faden bleibt durchgehend */
  position: relative;
  z-index: 1;                 /* Inhalt ueber der Geister-Nummer */
}
.leistungenGroup:last-child .leistungenGroupBody{ padding-bottom: 0; }

/* Der Faden: durchgezogene Linie, die alle Themen verbindet */
.leistungenSpine{
  position: relative;
}
.leistungenSpine::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--accent);
  opacity: 0.5;
  transform: translateX(-50%) scaleY(0);   /* zeichnet sich beim Scrollen von oben */
  transform-origin: 50% 0;
  transition: transform 800ms cubic-bezier(.6,0,.3,1);
}
.leistungenGroup.isIn .leistungenSpine::before{ transform: translateX(-50%) scaleY(1); }
/* Faden startet am ersten und endet am letzten Punkt, statt oben/unten zu ueberstehen */
.leistungenGroup:first-child .leistungenSpine::before{ top: 16px; }
.leistungenGroup:last-child  .leistungenSpine::before{ bottom: auto; height: 16px; }

/* Punkt pro Thema, auf Hoehe des Group-Heads */
.leistungenDot{
  position: absolute;
  top: 16px;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateX(-50%) scale(0);
  opacity: 0;
  transition: transform 600ms cubic-bezier(.34,1.55,.64,1) 350ms, opacity 400ms ease 350ms;
}
.leistungenGroup.isIn .leistungenDot{ transform: translateX(-50%) scale(1); opacity: 1; }
/* Radar-Puls am aktiven Thema (beim Scrollen) */
.leistungenDot::after{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
}
.leistungenGroup.isActive .leistungenDot::after{
  animation: dotRipple 1.6s ease-out infinite;
}
.leistungenGroup.isActive .leistungenDot{
  animation: dotBeat 1.6s ease-in-out infinite;
}
@keyframes dotRipple{
  0%   { transform: scale(0.7); opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes dotBeat{
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.25); }
}
@media (prefers-reduced-motion: reduce){
  .leistungenGroup::before,
  .leistungenGroup .leistungItem{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .leistungenSpine::before{ transform: translateX(-50%) scaleY(1) !important; transition: none !important; }
  .leistungenDot{ opacity: 1 !important; transform: translateX(-50%) scale(1) !important; transition: none !important; }
  .leistungenGroup.isActive .leistungenDot,
  .leistungenGroup.isActive .leistungenDot::after{ animation: none !important; }
}

.leistungenGroupHead{
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(123,30,90,0.18);
}
.leistungenGroupNum{
  display: flex;
  flex-direction: column;
  font-size: 38px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.leistungenGroupKicker{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 6px;
  font-variant-numeric: normal;
}
.leistungenGroupTitle{
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.leistungenGroupHead p{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.leistungenGrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.leistungItem{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
  /* Start versteckt - wird beim Scrollen gestaffelt eingeblendet */
  opacity: 0;
  transform: translateY(20px);
  transition: transform 560ms cubic-bezier(.4,0,.2,1), opacity 560ms ease,
              border-color 240ms ease, box-shadow 240ms ease;
}
.leistungenGroup.isIn .leistungItem{ opacity: 1; transform: translateY(0); }
/* gestaffelte Verzoegerung pro Karte */
.leistungenGroup.isIn .leistungItem:nth-child(1){ transition-delay: 60ms; }
.leistungenGroup.isIn .leistungItem:nth-child(2){ transition-delay: 130ms; }
.leistungenGroup.isIn .leistungItem:nth-child(3){ transition-delay: 200ms; }
.leistungenGroup.isIn .leistungItem:nth-child(4){ transition-delay: 270ms; }
.leistungenGroup.isIn .leistungItem:nth-child(5){ transition-delay: 340ms; }
.leistungenGroup.isIn .leistungItem:nth-child(6){ transition-delay: 410ms; }
.leistungenGroup.isIn .leistungItem:nth-child(7){ transition-delay: 480ms; }
.leistungenGroup.isIn .leistungItem:nth-child(8){ transition-delay: 550ms; }
/* Bordeaux-Akzentbalken, der beim Hover von oben einfaehrt */
.leistungItem::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 320ms cubic-bezier(.5,0,.2,1);
}
.leistungItem:hover{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 22px 40px -20px color-mix(in srgb, var(--accent) 50%, transparent);
}
.leistungItem:hover::before{ transform: scaleY(1); }
.leistungIcon{
  display: inline-flex;
  width: 36px;
  height: 36px;
  color: var(--accent);
  transition: transform 320ms cubic-bezier(.34,1.55,.64,1);
}
.leistungItem:hover .leistungIcon{ transform: scale(1.12) rotate(-3deg); }
.leistungIcon svg{
  width: 100%;
  height: 100%;
}
.leistungItem h3{
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.leistungItem p{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(0,0,0,0.65);
  font-weight: 360;
}
.leistungItem--cta{
  background: linear-gradient(180deg, rgba(123,30,90,0.05), rgba(123,30,90,0.10));
  border-color: rgba(123,30,90,0.30);
}
.leistungLink{
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  transition: transform 200ms ease;
}
.leistungLink:hover{
  text-decoration: none;
  transform: translateX(4px);
}

@media (max-width: 980px){
  .leistungenGrid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .leistungenGrid{ grid-template-columns: repeat(2, 1fr); }
  .leistungenGroupNum{ font-size: 30px; }
  /* Faden auf schmalen Screens ausblenden, Gruppe einspaltig */
  .leistungenGroup{ grid-template-columns: 1fr; }
  .leistungenSpine{ display: none; }
  .leistungenGroupBody{ padding-bottom: 50px; }
}
@media (max-width: 480px){
  .leistungenGrid{ grid-template-columns: 1fr; }
}

/* ===================================================================== */
/* ============= Machbarkeitsstudie – Vorbereitungs-Tool =============== */
/* ===================================================================== */

.machbarkeitPage{ background: #fafaf8; }

.machbLayout{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 36px;
  align-items: start;
}

.machbForm{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.machbGroup{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 26px 26px 22px;
}
.machbGroupHead{
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(123,30,90,0.18);
}
.machbNum{
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.machbGroupHead h2{
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.machbGroupHead p{
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.machbFields{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.machbField{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.machbField--full{ grid-column: 1 / -1; }
.machbField > span,
.machbField > legend{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  padding: 0;
  margin-bottom: 2px;
}
.machbField input[type="text"],
.machbField input[type="email"],
.machbField input[type="tel"],
.machbField input[type="number"],
.machbField input[type="date"],
.machbField textarea{
  font: inherit;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text);
  font-weight: 400;
  padding: 9px 11px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  resize: vertical;
}
.machbField input:focus,
.machbField textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(123,30,90,0.14);
}

.machbRadios,
.machbChecks{
  border: 1px dashed rgba(123,30,90,0.20);
  padding: 12px 14px 8px;
  background: rgba(123,30,90,0.025);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
}
.machbRadios legend,
.machbChecks legend{
  width: 100%;
}
.machbRadios label,
.machbChecks label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text);
  font-weight: 400;
  cursor: pointer;
  text-transform: none;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  transition: border-color 200ms ease, background 200ms ease;
}
.machbRadios label:hover,
.machbChecks label:hover{
  border-color: rgba(123,30,90,0.45);
}
.machbRadios input,
.machbChecks input{
  accent-color: var(--accent);
  margin: 0;
}
.machbRadios label:has(input:checked),
.machbChecks label:has(input:checked){
  border-color: var(--accent);
  background: rgba(123,30,90,0.08);
  font-weight: 600;
}

.machbSidebar{
  position: sticky;
  top: 184px;
}
.machbSidebarInner{
  background: #fff;
  border: 1px solid rgba(123,30,90,0.20);
  padding: 24px 22px;
  box-shadow: 0 14px 30px -16px rgba(123,30,90,0.35);
}
.machbSidebar h2{
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}
.machbSidebar p{
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0,0,0,0.7);
}
.machbActions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 12px;
}
.machbActions .btn{
  margin-top: 0 !important;
  width: 100%;
  padding: 14px 20px;
}
.machbHint{
  margin: 6px 0 0 !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  letter-spacing: 0.04em;
}
.machbHint--accent{
  color: var(--accent) !important;
  font-weight: 600;
}

.machbPrintView{ display: none; }

@media (max-width: 980px){
  .machbLayout{ grid-template-columns: 1fr; }
  .machbSidebar{ position: static; }
  .machbFields{ grid-template-columns: 1fr; }
}

/* Print-Layout für Machbarkeit */
@media print{
  .machbarkeitPage .header,
  .machbarkeitPage .footer,
  .machbarkeitPage .pageHero,
  .machbForm,
  .machbSidebar{
    display: none !important;
  }
  .machbarkeitPage{ background: #fff !important; }
  .machbarkeitPage main.page{ padding: 0; }

  .machbPrintView{
    display: block !important;
    padding: 0 !important;
    color: #111;
  }
  .machbPrintHeader{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #7b1e5a;
    padding: 0 0 14px;
    margin: 0 0 22px;
  }
  .machbPrintBrand strong{
    display: block;
    font-size: 18px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
  }
  .machbPrintBrand span{
    display: block;
    font-size: 12px;
    color: #555;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 4px;
  }
  .machbPrintDate{
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #555;
  }
  .machbPrintGroup{
    margin-bottom: 18px;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .machbPrintGroupTitle{
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    color: #7b1e5a;
    margin: 0 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd;
  }
  .machbPrintRow{
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 18px;
    padding: 4px 0;
    font-size: 11px;
    align-items: baseline;
  }
  .machbPrintRow dt{
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #777;
    font-weight: 700;
    margin: 0;
  }
  .machbPrintRow dd{
    margin: 0;
    color: #111;
    font-weight: 500;
  }
  .machbPrintRow dd:empty::before{
    content: "—";
    color: #aaa;
    font-weight: 400;
  }
  .machbPrintFooter{
    margin-top: 28px;
    padding-top: 12px;
    border-top: 1px solid #ddd;
    font-size: 10px;
    color: #666;
    letter-spacing: 0.06em;
    text-align: center;
  }
}

.konzeptPage{ background: #fafaf8; }

.konzeptMeta{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 36px;
  padding: 22px 24px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(123,30,90,0.18);
  box-shadow: 0 14px 30px -16px rgba(123,30,90,0.30);
}
.konzeptMeta label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.konzeptMeta input{
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text);
  font-weight: 400;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.konzeptMeta input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(123,30,90,0.14);
}

.konzeptBody{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 36px;
  align-items: start;
}

.konzeptCategory{
  margin-bottom: 44px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 26px 26px 22px;
}
.konzeptCategoryHead{
  margin-bottom: 18px;
}
.konzeptCategoryHead h2{
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.konzeptCatNum{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.konzeptCategoryHead p{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.konzeptOptions{
  display: grid;
  /* Spaltenzahl folgt der tatsächlich verfügbaren Breite — auch bei halbem
     Fenster bleiben die Kacheln klein genug für den Überblick. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 185px), 1fr));
  gap: 12px;
}
/* =====================================================================
   Material-Kachel mit Lupe. Auswahl-Knopf und Lupe liegen als
   Geschwister im Rahmen, damit kein Knopf im Knopf entsteht.
   ===================================================================== */
.konzeptOptionWrap{
  position: relative;
  display: flex;
  /* Kachel oben, Körnung/Farbe-Panel darunter — nicht daneben, sonst
     quetscht das Panel die gewählte Kachel zu einem schmalen Streifen. */
  flex-direction: column;
  min-width: 0;     /* Grid-Zelle darf schrumpfen, statt zu überlaufen */
}
.konzeptOptionWrap > .konzeptOption{
  flex: 0 0 auto;
  width: 100%;
}
.konzeptZoomBtn{
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(0,0,0,0.12);
  color: #333;
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 160ms ease, background 160ms ease;
}
.konzeptZoomBtn svg{ width: 17px; height: 17px; }
.konzeptOptionWrap:hover .konzeptZoomBtn,
.konzeptZoomBtn:focus-visible{ opacity: 1; }
.konzeptZoomBtn:hover{ background: #fff; border-color: var(--accent); color: var(--accent); }
/* Auf Touch-Geräten ohne Hover die Lupe dauerhaft zeigen */
@media (hover: none){
  .konzeptZoomBtn{ opacity: 1; }
}

/* ---- Lupe: grosse Ansicht einer Textur ---- */
.konzeptZoom{
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 96vh;
  overflow: visible;
}
.konzeptZoom::backdrop{ background: rgba(20,16,18,0.78); }
.konzeptZoomImg{
  width: min(560px, 88vw);
  height: min(560px, 88vw);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #efe9dd;
  box-shadow: 0 30px 90px -30px rgba(0,0,0,0.7);
}
/* Vergrösserung im GLEICHEN Massstab wie die Kachel (nur grösseres Fenster,
   gleiches Korn) — sonst wirkt die Struktur beim Vergrössern viel gröber. */
.konzeptZoomImg.putzFlaeche{
  background-color: var(--putzfarbe, #efe9dd);
  background-blend-mode: multiply;
  background-size: 165px 165px;
  background-repeat: repeat;
}
.konzeptZoomImg.eigenFlaeche{
  background-size: 165px 165px;
  background-repeat: repeat;
}
.konzeptZoomCap{
  margin-top: 12px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.konzeptZoomClose{
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  font: inherit;
  font-size: 24px;
  line-height: 1;
  background: #fff;
  border: 0;
  border-radius: 50%;
  color: #333;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.5);
}
.konzeptZoomClose:hover{ color: var(--accent); }

.konzeptOption{
  position: relative;
  /* Ein <button> zentriert seinen Inhalt vertikal — als Spalte gesetzt,
     damit das Musterbild in jeder Kachel gleich hoch sitzt. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 0 0 14px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  overflow: hidden;
}
.konzeptOption:hover{
  border-color: rgba(123,30,90,0.45);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(123,30,90,0.35);
}
.konzeptOption.isSelected{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 14px 30px -14px rgba(123,30,90,0.5);
}
.konzeptOption.isSelected::after{
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.konzeptOptionImg{
  width: 100%;
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center;
  margin-bottom: 12px;
}
.konzeptOption h3{
  margin: 0 14px 4px;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
}
.konzeptOption p{
  margin: 0 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

/* =====================================================================
   Übergeordnetes Angebot (TU) — liegt quer über den drei Leistungskacheln.
   Bewusst als dunkles Band gesetzt, damit es sich von den Kacheln löst.
   ===================================================================== */

/* Häkchen als reine Form, damit kein Zeichensatz nötig ist */

@media (max-width: 900px){
}

/* ---- TU-Angebot auf der Unterseite ---- */
.tuSection{
  background: #1c1a1b;
  color: #f4f1ee;
}
.tuHead{ max-width: 760px; }
.tuHead .tuKicker{
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #d9a3c4;
}
.tuHead h2{
  margin: 14px 0 0;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
}
.tuLead{
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.72;
  color: rgba(244,241,238,0.76);
  hyphens: auto;
}
.tuGrid{
  margin-top: 46px;
  display: grid;
  /* 320px -> auf dem Grossbildschirm genau drei Spalten, also zwei volle
     Reihen zu je drei Karten statt einer Reihe mit Löchern. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
}
.tuItem{
  background: #1c1a1b;
  padding: 28px 26px;
}
.tuItemIcon{
  display: block;
  width: 28px;
  height: 28px;
  color: var(--accent);
}
.tuItemIcon svg{ width: 100%; height: 100%; display: block; }
.tuItem h3{
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tuItem p{
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: rgba(244,241,238,0.7);
}
.tuCta{
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
}
.tuCta p{
  margin: 0;
  font-size: 16px;
  color: rgba(244,241,238,0.86);
}
.tuSection .leistungLink{ color: #fff; }
.tuSection .leistungLink:hover{ color: #d9a3c4; }

/* =====================================================================
   Grosse Vorschau in der Auswahlspalte: zeigt die zuletzt gewählte
   Fassade im aktuell gewählten Farbton. Sie ist der Grund, warum man
   die Farbe überhaupt wechselt — darum steht sie ganz oben und bleibt
   dank der stickyn Spalte immer im Blick.
   ===================================================================== */
.konzeptVorschau{
  margin: -24px -22px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.konzeptVorschauFeld{
  width: 100%;
  height: 150px;
  background-size: cover;
  background-position: center;
  background-color: #efe9dd;
  transition: background-color 260ms ease;
}
.konzeptVorschauFeld.putzFlaeche{
  background-color: var(--putzfarbe, #efe9dd);
  background-blend-mode: multiply;
  background-size: 130px 130px;
  background-repeat: repeat;
}
.konzeptVorschauFeld.eigenFlaeche{
  background-size: 220px 220px;
  background-repeat: repeat;
}
.konzeptVorschauText{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 22px 14px;
}
.konzeptVorschauName{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.konzeptVorschauFarbe{
  font-size: 12px;
  color: var(--muted);
}
.konzeptVorschau.ohneFarbe .konzeptVorschauFarbe{ font-style: italic; }

/* ---- Farbwähler: Familien, Trefferzahl, NCS-Tonrad ---- */
.konzeptColorLead{
  margin: -8px 0 16px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.konzeptColorTools{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.konzeptColorTools .konzeptColorSearch{ flex: 1 1 auto; }
.konzeptColorTreffer{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.konzeptFamilien{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.konzeptFamilie{
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 6px 11px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.14);
  color: var(--muted);
  cursor: pointer;
  transition: all 160ms ease;
}
.konzeptFamilie:hover{ border-color: var(--accent); color: var(--text); }
.konzeptFamilie.isActive{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.konzeptNcsTon{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
}
.konzeptNcsTonBtn{
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 7px 5px 20px;
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.14);
  color: var(--muted);
  cursor: pointer;
}
.konzeptNcsTonBtn::before{
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  background: var(--ton, #ccc);
  border: 1px solid rgba(0,0,0,0.15);
}
.konzeptNcsTonBtn:hover{ border-color: var(--accent); }
.konzeptNcsTonBtn.isActive{ border-color: var(--accent); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }

.konzeptNcsField{ margin-top: 16px; }

/* =====================================================================
   Farbe je Position. Der Wähler liegt in einem Dialog, weil er von
   jeder Zeile der Auswahlliste aus erreichbar sein muss — nicht nur
   aus der Fassaden-Kategorie.
   ===================================================================== */
.konzeptFarbDialog{
  width: min(920px, 92vw);
  max-height: 86vh;
  padding: 0;
  border: 0;
  background: #fff;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5);
}
.konzeptFarbDialog::backdrop{ background: rgba(20,16,18,0.55); }
.konzeptFarbDialog .konzeptColor{
  padding: 26px 28px 28px;
  max-height: 86vh;
  overflow-y: auto;
}
.konzeptColorKopf{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.konzeptColorKopf .konzeptColorTitle{ margin: 0; }
.konzeptColorKopf .konzeptColorLead{ margin: 6px 0 0; }
.konzeptColorKopf .konzeptColorLead strong{ color: var(--text); font-weight: 600; }
.konzeptColorClose{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  background: none;
  border: 1px solid rgba(0,0,0,0.14);
  color: var(--muted);
  cursor: pointer;
}
.konzeptColorClose:hover{ border-color: var(--accent); color: var(--accent); }

/* Vorschau-Knopf */
.konzeptVorschauBtn{
  margin-top: 10px;
  align-self: flex-start;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  cursor: pointer;
}
.konzeptVorschauBtn:hover{ background: #66184c; }

/* Auswahlzeilen sind Knöpfe: ein Klick öffnet die Farbe dieser Position */
.konzeptSummaryList .sItem{
  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-areas: "sw text" ". farbe";
  gap: 2px 8px;
  width: 100%;
  padding: 6px 6px 6px 4px;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
}
.konzeptSummaryList .sItem:hover{ background: rgba(123,30,90,0.05); }
.konzeptSummaryList .sItem.isAktiv{ border-left-color: var(--accent); background: rgba(123,30,90,0.06); }
.konzeptSummaryList .sItem + .sItem{ margin-top: 2px; }
.konzeptSummaryList .sSwatch{
  grid-area: sw;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border: 1px solid rgba(0,0,0,0.2);
}
.konzeptSummaryList .sSwatch--leer{
  background: repeating-linear-gradient(45deg, #fff 0 3px, #ddd 3px 6px);
}
.konzeptSummaryList .sItemText{ grid-area: text; font-size: 13px; line-height: 1.35; }
.konzeptSummaryList .sItemFarbe{
  grid-area: farbe;
  font-size: 11px;
  color: var(--muted);
}
.konzeptSummaryList .sItem:not(.isAktiv) .sItemFarbe{ opacity: 0.8; }

/* =====================================================================
   Hausmodell (axonometrische Materialvorschau)
   ===================================================================== */
.hausSection{ padding-top: 40px; padding-bottom: 28px; }
.hausModell{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: center;
  background: linear-gradient(180deg, #f4f2ee 0%, #eae7e1 100%);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 20px 24px;
}
.hausBuehne{ min-width: 0; }
.hausSvg{ width: 100%; height: auto; display: block; }

.hausSteuerung{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hausSteuerGruppe{ display: flex; flex-direction: column; gap: 8px; }
.hausSteuerGruppe[hidden]{ display: none !important; }
.hausSteuerLabel{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
}
.hausDrehen{
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.hausDrehen .hausSteuerLabel{ flex: 1 1 auto; text-align: center; }
.hausBtn{
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  color: var(--text);
  cursor: pointer;
  transition: all 150ms ease;
}
.hausBtn:hover{ border-color: var(--accent); color: var(--accent); }
.hausBtn svg{ width: 18px; height: 18px; }

.hausChips{ display: flex; flex-wrap: wrap; gap: 6px; }
.hausChip{
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 7px 11px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  color: var(--muted);
  cursor: pointer;
  transition: all 150ms ease;
}
.hausChip:hover{ border-color: var(--accent); color: var(--text); }
.hausChip.isAktiv{ background: var(--accent); border-color: var(--accent); color: #fff; }

.raumModell{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: center;
  margin-top: 20px;
  background: linear-gradient(180deg, #f4f2ee 0%, #eae7e1 100%);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 20px 24px;
}
.raumBuehne{ min-width: 0; }
.raumSvg{ width: 100%; height: auto; display: block; }
.raumSteuerung{ display: flex; flex-direction: column; gap: 12px; }
.raumLegende{ margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 820px){
  .raumModell{ grid-template-columns: 1fr; gap: 16px; }
}

.hausHinweis{
  margin: 12px 2px 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 820px){
  .hausModell{ grid-template-columns: 1fr; gap: 18px; }
  .hausSteuerung{ flex-direction: row; flex-wrap: wrap; gap: 16px 24px; }
}

/* Für Suchmaschinen und Screenreader sichtbar, im Layout nicht. */
.srOnly{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== Fortschritt: Abschnitte, Position, offen/gewählt ===== */
.konzeptFortschritt{
  margin: 0 0 20px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.kfKopf{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.kfTitel{
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.kfZaehler{ font-size: 12px; color: rgba(0,0,0,0.55); font-variant-numeric: tabular-nums; }

.kfBalken{
  height: 4px; border-radius: 4px; overflow: hidden;
  background: rgba(0,0,0,0.08); margin-bottom: 12px;
}
.kfBalkenFill{
  height: 100%; width: 0%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 300ms ease;
}

.kfListe{ list-style: none; margin: 0; padding: 0; }
.kfItem + .kfItem{ margin-top: 2px; }
.kfBtn{
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 8px;
  border: 0; border-radius: 7px;
  background: none; cursor: pointer;
  font: inherit; text-align: left;
  border-left: 2px solid transparent;
  transition: background 150ms ease, border-color 150ms ease;
}
.kfBtn:hover{ background: rgba(123,30,90,0.05); }

.kfNr{
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.18);
  font-size: 10px; font-weight: 700;
  color: rgba(0,0,0,0.45);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.kfName{
  flex: 1 1 auto;
  font-size: 13px; color: rgba(0,0,0,0.75);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kfStatus{
  flex: 0 0 auto;
  font-size: 10.5px; font-weight: 600;
  color: rgba(0,0,0,0.35);
  letter-spacing: 0.02em;
}

/* gewählt */
.kfItem.isFertig .kfNr{
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.kfItem.isFertig .kfName{ color: rgba(0,0,0,0.85); }
.kfItem.isFertig .kfStatus{ color: var(--accent); }

/* wo bin ich */
.kfItem.isAktiv .kfBtn{
  background: rgba(123,30,90,0.07);
  border-left-color: var(--accent);
}
.kfItem.isAktiv .kfName{ font-weight: 600; color: #111; }

/* =====================================================================
   Innen / Aussen: Bereichsüberschriften im Katalog und im Register
   ===================================================================== */
.konzeptBereich{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0 18px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}
.konzeptBereich:first-child{ margin-top: 0; }
.konzeptBereich .kbTitel{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.kfBereich{
  margin: 12px 0 4px;
  padding: 0 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.35);
}
.kfListe .kfBereich:first-child{ margin-top: 0; }

/* =====================================================================
   Druckbereich & Unterschriftenfelder
   ===================================================================== */
.konzeptDruckOpt{
  display: grid;
  grid-template-columns: minmax(200px, 250px) minmax(200px, 250px) 1fr;
  gap: 28px;
  margin: 18px 0 30px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
}
.kdoBlock{ display: flex; flex-direction: column; gap: 10px; }
.kdoTitel{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.kdoHint{
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

.kdoSeg{
  display: inline-flex;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
}
.kdoSeg button{
  padding: 9px 16px;
  border: 0;
  border-right: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(0,0,0,0.6);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.kdoSeg button:last-child{ border-right: 0; }
.kdoSeg button:hover{ background: rgba(123,30,90,0.06); }
.kdoSeg button.isActive{ background: var(--accent); color: #fff; }

.kdoSigListe{ display: flex; flex-direction: column; gap: 8px; }
.kdoSigRow{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: #fafaf8;
  border-left: 2px solid var(--accent);
}
.kdoSigRollen{ display: flex; gap: 6px; flex-wrap: wrap; }
.kdoChip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 16px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(0,0,0,0.6);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.kdoChip input{ margin: 0; accent-color: var(--accent); }
.kdoChip.isOn{
  background: rgba(123,30,90,0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.kdoSigName{
  flex: 1 1 160px;
  min-width: 140px;
  padding: 7px 10px;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
}
.kdoSigName:focus{ outline: none; border-color: var(--accent); }
.kdoSigDel{
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}
.kdoSigDel:hover{ color: var(--accent); }
.kdoSigAdd{
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px dashed rgba(123,30,90,0.4);
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.kdoSigAdd:hover{ background: rgba(123,30,90,0.06); }

/* Deckblatt */
.kdoCheck{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(0,0,0,0.75);
  cursor: pointer;
}
.kdoCheck input{ accent-color: var(--accent); }
.kdoDeck{ display: flex; flex-direction: column; gap: 10px; }
.kdoDeck[hidden]{ display: none; }
.kdoDeckVor{ display: flex; flex-direction: column; gap: 8px; }
.kdoDeckVor[hidden]{ display: none; }
/* Bühne mit gleichem Seitenverhältnis wie der Druck-Rahmen (1:1) -> WYSIWYG.
   Ändert sich .konzeptDeckblatt .dbBild, muss das hier mitgehen. */
.kdoDeckStage{
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.kdoDeckStage:active{ cursor: grabbing; }
.kdoDeckStage img{
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.kdoDeckTools{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kdoDeckZoom{ display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; }
.kdoDeckZoom input{ width: 130px; }
.kdoDeckBtn{
  padding: 5px 11px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 12.5px;
}
.kdoDeckBtn:hover{ border-color: var(--accent); color: var(--accent); }

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

/* =====================================================================
   Steuerung an der gewählten Kachel: Körnung + Farbe am selben Ort.
   Erscheint erst, wenn die Position gewählt ist.
   ===================================================================== */
.konzeptOptionCtrl{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(123,30,90,0.05);
  border: 1px solid rgba(123,30,90,0.22);
  border-radius: 8px;
  /* Nichts darf über die Kachel hinausragen — sonst überdeckt die
     Nachbarkachel die Bedienelemente. */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.konzeptOptionCtrl[hidden]{ display: none; }

/* ---- Mehrere Positionen desselben Materials ----------------------------
   Beispiel: dieselbe Türe als Hauseingang EG und als Durchgang 1. OG.
   Jede Position ist ein eigener Block mit Lage, Eigenschaften und Farbe. */
.ocPos{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.ocPos + .ocPos{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(123,30,90,0.28);
}
.ocPosKopf{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.ocPosNr{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ocPosDel{
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 50%;
  background: #fff;
  font-size: 15px; line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.ocPosDel:hover{ border-color: #b3261e; color: #b3261e; }

.ocOrt{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  flex: 1 1 100%;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.ocOrtInput{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid rgba(123,30,90,0.28);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(0,0,0,0.82);
}
.ocOrtInput::placeholder{ color: rgba(0,0,0,0.34); font-weight: 400; }
.ocOrtInput:focus{ outline: none; border-color: var(--accent); }

.ocPosAdd{
  width: 100%;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px dashed rgba(123,30,90,0.45);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: background 150ms ease;
}
.ocPosAdd:hover{ background: rgba(123,30,90,0.08); }

/* Lage in der Auswahlliste rechts */
.sItemOrt{
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.01em;
}

.ocKorn{
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.ocKorn select{
  min-width: 0;
  max-width: 100%;
  padding: 5px 7px;
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(0,0,0,0.82);
  cursor: pointer;
}
.ocKorn select:focus{ outline: none; border-color: var(--accent); }

/* Eigenschaften einer Position (z.B. Fenster: Glas, Sprossen, Bank, …) */
/* Eigenschaft der Kachel: Beschriftung ÜBER dem Feld. Nebeneinander würde
   das Auswahlfeld so breit wie sein längster Eintrag ("3-fach mit
   elektrischem Türöffner") und ragte aus der schmalen Kachel heraus — die
   Nachbarkachel läge dann über dem Aufklapp-Pfeil und fienge dessen Klicks ab. */
.ocParam{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  flex: 1 1 100%;
  min-width: 0;          /* erlaubt das Schrumpfen unter die Inhaltsbreite */
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.ocParam select{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 5px 7px;
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(0,0,0,0.82);
  cursor: pointer;
}
.ocParam select:focus{ outline: none; border-color: var(--accent); }

.ocFarbe{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 6px 12px 6px 8px;
  border: 1px solid rgba(123,30,90,0.30);
  border-radius: 20px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.ocFarbe:hover{ background: var(--accent); color: #fff; border-color: var(--accent); }
.ocSwatch{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.22);
  flex: 0 0 auto;
}
.ocSwatch--leer{
  background: repeating-linear-gradient(45deg, #fff 0 3px, #ddd 3px 6px);
}
.ocFarbeText{ white-space: nowrap; }

/* Körnungs-Angabe (Putze): steht so auch im Beschrieb und im PDF */
.sKorn{
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 6px 30px;
  font-size: 11.5px;
  color: rgba(0,0,0,0.55);
}
.sKorn select{
  padding: 3px 6px;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 5px;
  font: inherit;
  font-size: 11.5px;
  background: #fff;
  color: rgba(0,0,0,0.8);
  cursor: pointer;
}
.sKorn select:focus{ outline: none; border-color: var(--accent); }

/* Sticky Summary */
.konzeptSummary{
  position: sticky;
  top: 184px;
  background: #fff;
  border: 1px solid rgba(123,30,90,0.20);
  padding: 24px 22px;
  box-shadow: 0 14px 30px -16px rgba(123,30,90,0.35);
}
.konzeptSummary h2{
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}
.konzeptSummaryList{
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.konzeptSummaryList li{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: #fafaf8;
  border-left: 2px solid var(--accent);
}
.konzeptSummaryList li .sCat{
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.konzeptSummaryList li .sName{
  font-size: 14px;
  font-weight: 600;
}
.konzeptSummaryEmpty{
  background: transparent !important;
  border-left: 2px solid rgba(0,0,0,0.08) !important;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

.konzeptActions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.konzeptActions .btn{
  margin-top: 0 !important;
  width: 100%;
  padding: 14px 20px;
}
.konzeptHint{
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* Druckansicht – nur im Print */
.konzeptPrintView{ display: none; }

/* =====================================================================
   Register als Drawer (schmale Schirme)
   Auf dem Vollbild steht das Register rechts. Sobald es dafür zu schmal
   wird, rutschte es früher ans Seitenende und war praktisch weg. Jetzt
   wird es zu einer ein-/ausklappbaren Schublade mit festem Knopf.
   ===================================================================== */
.konzeptDrawerBtn{ display: none; }
.konzeptSummaryClose{ display: none; }

@media (max-width: 980px){
  .konzeptBody{ grid-template-columns: 1fr; }
  .konzeptMeta{ grid-template-columns: 1fr; }

  .konzeptDrawerBtn{
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 60;
    padding: 12px 18px;
    border: 0;
    border-radius: 30px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 12px 28px -8px rgba(123,30,90,0.55);
  }
  .konzeptDrawerBtn .kdBalken{
    width: 34px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255,255,255,0.35);
    overflow: hidden;
  }
  .konzeptDrawerBtn .kdBalkenFill{
    display: block;
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 3px;
    transition: width 300ms ease;
  }
  .konzeptDrawerBtn .kdZaehler{
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
    font-weight: 500;
  }

  .konzeptDrawerBack{
    position: fixed;
    inset: 0;
    z-index: 61;
    background: rgba(24,18,22,0.5);
    backdrop-filter: blur(2px);
  }
  .konzeptDrawerBack[hidden]{ display: none; }

  .konzeptSummary{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(370px, 90vw);
    max-height: 100vh;
    overflow-y: auto;
    z-index: 62;
    margin: 0;
    border: 0;
    border-left: 1px solid rgba(123,30,90,0.20);
    border-radius: 0;
    box-shadow: -18px 0 46px -18px rgba(0,0,0,0.45);
    transform: translateX(100%);
    transition: transform 280ms ease;
  }
  .konzeptSummary.isOpen{ transform: translateX(0); }

  .konzeptSummaryClose{
    display: block;
    position: sticky;
    top: 0;
    margin: -24px -22px 8px auto;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
  }
}

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

/* =====================================================================
   Konzept-Seite als Programm-Oberfläche (App-Layout, volle Höhe).
   Toolbar oben · Kategorie-Leiste links · grosse Bilder Mitte ·
   3D-Modelle und Auswahl rechts, immer sichtbar.
   ===================================================================== */
body.konzeptAppBody{ overflow: hidden; }
body.konzeptAppBody > .header,
body.konzeptAppBody > .footer{ display: none !important; }

.konzeptApp{
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #eceae4;
  color: var(--text);
}

/* ---- Toolbar ---- */
.appBar{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 20px;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  z-index: 5;
}
.appBrand{ flex: 0 0 auto; display: flex; align-items: center; color: var(--text); }
.appBrandLogo{ height: 30px; width: auto; }
.appMeta{ display: flex; gap: 14px; flex: 1 1 auto; min-width: 0; }
.appMeta label{
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.appMeta label:nth-child(2){ flex: 1 1 auto; }
.appMeta span{
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.appMeta input{
  font: inherit; font-size: 13px;
  padding: 6px 9px;
  border: 1px solid rgba(0,0,0,0.16);
  background: #fbfaf8;
  min-width: 120px;
}
.appMeta input:focus{ outline: none; border-color: var(--accent); }

.appActions{ flex: 0 0 auto; display: flex; gap: 8px; }
.appBtn{
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  padding: 9px 13px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.18);
  color: var(--text);
  cursor: pointer;
  transition: all 150ms ease;
}
.appBtn svg{ width: 17px; height: 17px; }
.appBtn:hover{ border-color: var(--accent); color: var(--accent); }
.appBtn--primary{ background: var(--accent); border-color: var(--accent); color: #fff; }
.appBtn--primary:hover{ background: #66184c; color: #fff; }
.appBtn--ghost{ padding: 9px 10px; }

/* =====================================================================
   Layout v2: Register oben · Familien links · Modell rechts gross ·
   Materialstreifen unten
   ===================================================================== */

/* ---- Register (Kategorien oben) ---- */
.appRegister{
  flex: 0 0 auto;
  display: flex; align-items: stretch; gap: 2px;
  height: 48px; padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  overflow-x: auto; overflow-y: hidden;
  z-index: 4;
}
.appRegItem{
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 0 15px;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  background: none; border: 0; border-bottom: 3px solid transparent;
  color: var(--muted); cursor: pointer;
  transition: color 130ms ease, border-color 130ms ease;
}
.appRegItem:hover{ color: var(--text); }
.appRegItem.isAktiv{ color: var(--accent); border-bottom-color: var(--accent); }
.appRegNum{ font-size: 10px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.6; font-variant-numeric: tabular-nums; }
.appRegCount{
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
  display: none; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border-radius: 8px; padding: 0 4px;
}
.appRegCount.hat{ display: inline-flex; }

/* ---- Körper: Familien (links) | Modell (rechts oben) | Material (rechts unten) ---- */
.appBody--v2{
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

/* Linke Spalte: Materialfamilien + Auswahl */
.appFamilien{
  grid-column: 1; grid-row: 1 / 3;
  display: flex; flex-direction: column; min-height: 0;
  background: #fff;
  border-right: 1px solid rgba(0,0,0,0.10);
}
.appFamKopf{
  flex: 0 0 auto;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 15px 16px 11px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.appFamKat{ font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
.appFamKopfHint{ font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); }
.appFamListe{
  flex: 0 1 auto; max-height: 46%;
  overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.appFamItem{
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px;
  font: inherit; text-align: left;
  background: none; border: 1px solid transparent;
  color: var(--text); cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.appFamItem:hover{ background: rgba(0,0,0,0.03); }
.appFamItem.isAktiv{ background: rgba(123,30,90,0.07); border-color: rgba(123,30,90,0.28); }
.appFamSwatch{ flex: 0 0 auto; display: flex; gap: 2px; }
.appFamSwatch > *{
  width: 12px; height: 22px; flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,0.15); border-radius: 2px;
  background-size: cover; background-position: center;
}
.appFamName{ flex: 1 1 auto; font-size: 13px; font-weight: 500; min-width: 0; }
.appFamCount{
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
  display: none; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border-radius: 8px; padding: 0 4px;
}
.appFamCount.hat{ display: inline-flex; }
.appFamFuss{
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; padding: 12px 14px 18px;
  border-top: 1px solid rgba(0,0,0,0.07);
}

/* Modell rechts oben – gross */
.appModell{
  grid-column: 2; grid-row: 1;
  min-height: 0; overflow: hidden;
  display: flex; padding: 14px;
}
.appModelle{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; }

/* Grosser Umschalter Aussen / Innen */
.modellToggle{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background: #e7e4dd;
  border: 1px solid rgba(0,0,0,0.10);
  margin-bottom: 12px;
}
.modellTab{
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  padding: 12px 10px;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  transition: all 150ms ease;
}
.modellTab svg{ width: 20px; height: 20px; }
.modellTab:hover{ color: var(--text); }
.modellTab.isAktiv{ background: #fff; color: var(--accent); box-shadow: 0 2px 8px -3px rgba(0,0,0,0.25); }

.modellPanel[hidden]{ display: none; }
.appModell .modellPanel{ flex: 1 1 auto; min-height: 0; display: flex; }
.appModell .modellPanel[hidden]{ display: none !important; }
/* Echtes 3D (three.js) – füllt die Modellzelle */
.haus3d{ flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 0; min-height: 0; }
.appModell .haus3d{ width: 100%; }
.haus3dCanvas{
  width: 100%;
  flex: 1 1 auto;
  height: auto;
  min-height: 300px;
  background: linear-gradient(180deg, #eef1f4 0%, #dde1e5 60%, #d3d7d9 100%);
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
/* Steuerung (Dachform/Geschosse/Attika) als Leiste unter dem Modell */
.appModell .hausSteuerung{
  flex: 0 0 auto;
  display: flex; flex-flow: row wrap; align-items: center; gap: 10px 22px;
}
.appModell .hausSteuerGruppe{ flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.appModell .hausSteuerLabel{ margin: 0; }

/* ---- Materialstreifen unten (aktive Familie) ---- */
.appMaterial{
  grid-column: 2; grid-row: 2;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.10);
  padding: 12px 16px 14px;
  min-height: 0;
}
.appMaterial .konzeptCategory{ display: none; margin: 0; border: 0; background: none; padding: 0; }
.appMaterial .konzeptCategory.isActive{ display: block; }
.appMaterial .konzeptCategoryHead{ display: none; }
.appMaterial .konzeptGroupBtn,
.appMaterial .konzeptGroupLabel{ display: none; }
.appMaterial .konzeptGroup{ margin: 0; }
.appMaterial .konzeptGroupBody{ display: none; }
.appMaterial .konzeptGroup.isFamAktiv .konzeptGroupBody{ display: block; }
.appMaterial .konzeptOptions{
  display: flex; flex-wrap: nowrap; gap: 12px;
  grid-template-columns: none;
  overflow-x: auto; padding-bottom: 6px;
}
.appMaterial .konzeptOptionWrap{ flex: 0 0 134px; width: 134px; }
.appMaterial .konzeptOptionImg{ aspect-ratio: 3 / 2; }
.appMaterial .konzeptOption h3{ font-size: 12px; margin-top: 8px; }
.appMaterial .konzeptOption p{ display: none; }
/* Beschrieb-Feld kompakt als eine Zeile unter dem Streifen */
.appMaterial .konzeptNote{ display: flex; align-items: center; gap: 12px; margin: 10px 2px 0; }
.appMaterial .konzeptNoteLabel{ flex: 0 0 auto; margin: 0; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.appMaterial .konzeptNoteInput{ flex: 1 1 auto; height: 34px; min-height: 34px; resize: none; }
.haus3dCanvas:active{ cursor: grabbing; }
.haus3dCanvas canvas{ display: block; width: 100%; height: 100%; }
.haus3dTipp{ margin: 0; font-size: 11px; color: var(--muted); text-align: center; letter-spacing: 0.02em; }

.modellPanel .hausModell,
.modellPanel .raumModell{
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 16px;
}
/* grosse Bühne */
.modellPanel .hausBuehne,
.modellPanel .raumBuehne{
  background: linear-gradient(180deg, #fbfaf8 0%, #eee9e0 100%);
  border: 1px solid rgba(0,0,0,0.06);
}
.modellPanel .hausSvg,
.modellPanel .raumSvg{ width: 100%; height: auto; display: block; max-height: 58vh; }

/* Innen-Panel füllt die Modellzelle wie das Aussen-Panel */
.appModell .modellPanel[data-modell-panel="innen"]{ padding: 0; }
.appModell .raumModell{ flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0; }
.appModell .raumBuehne{ flex: 1 1 auto; min-height: 0; }

/* Vorschau + Auswahl in der linken Spalte */
.appFamFuss .konzeptVorschau{ margin: 0 0 16px; border: 1px solid rgba(0,0,0,0.08); }
.appFamFuss .konzeptVorschauFeld{ height: 96px; }
.appFamFuss .appAuswahl{ margin-top: 0; }
.appAuswahl h2{
  margin: 0 0 10px; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700;
}

@media (max-width: 1180px){
  .appBody--v2{ grid-template-columns: 224px minmax(0, 1fr); }
}
@media (max-width: 900px){
  body.konzeptAppBody{ overflow: auto; }
  .konzeptApp{ position: static; height: auto; }
  .appBar{ flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 12px; }
  .appMeta{ order: 3; flex-basis: 100%; }
  .appBody--v2{ display: flex; flex-direction: column; }
  .appFamilien{ border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.10); }
  .appFamListe{ max-height: none; flex-flow: row wrap; }
  .appFamItem{ width: auto; }
  .appModell{ min-height: 62vh; }
  .appMaterial{ border-top: 1px solid rgba(0,0,0,0.10); }
}

/* ===================================================================== */
/* ======================= Print-Layout (A4 hoch) ====================== */
/* ===================================================================== */
/* Kopf und Fuss sind im Druck fixiert und erscheinen dadurch auf jeder
   Seite. Damit sie den Inhalt nicht überdecken, hält eine Tabelle mit
   thead/tfoot auf JEDER Seite genau den nötigen Platz frei (pPlatzKopf /
   pPlatzFuss). So bleibt der Fuss immer auf seiner Seite. */
@page{
  size: A4 portrait;
  margin: 12mm 15mm 10mm;
}

@media print{
  html, body{
    background: #fff;
    color: #111;
    font-size: 10pt;
  }
  /* Materialmuster und Farbflächen müssen mitgedruckt werden */
  .konzeptPrintView,
  .konzeptPrintView *{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .header,
  .footer,
  .konzeptMeta,
  .konzeptDruckOpt,
  .konzeptDrawerBtn,
  .konzeptDrawerBack,
  .konzeptCategories,
  .konzeptSummary,
  .pageHero,
  .konzeptHint,
  .konzeptActions,
  .appBar,
  .appBody{
    display: none !important;
  }
  body.konzeptAppBody{ overflow: visible; }
  .konzeptApp{ position: static !important; height: auto !important; display: block !important; }
  .page{ padding-top: 0 !important; }
  .konzeptPage{ background: #fff !important; }
  main.page{ padding: 0; }
  .section{ padding: 0 !important; }
  .container{ max-width: none; padding: 0; }

  .konzeptPrintView{
    display: block !important;
    padding: 0 !important;
    color: #111;
  }

  /* Trägertabelle: hält Kopf- und Fussraum auf jeder Seite frei */
  .konzeptPrintSheet{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }
  .konzeptPrintSheet > thead,
  .konzeptPrintSheet > tfoot,
  .konzeptPrintSheet > tbody,
  .konzeptPrintSheet tr,
  .konzeptPrintSheet td{
    display: table-header-group;
  }
  .konzeptPrintSheet > tbody{ display: table-row-group; }
  .konzeptPrintSheet > tfoot{ display: table-footer-group; }
  .konzeptPrintSheet tr{ display: table-row; }
  .konzeptPrintSheet td{ display: table-cell; padding: 0; vertical-align: top; }
  /* Muss GRÖSSER sein als die Höhe des fixierten Kopfs (17mm) bzw. Fusses
     (26mm), sonst rutscht der Seiteninhalt darunter. */
  .pPlatzKopf{ height: 19mm; }
  .pPlatzFuss{ height: 27mm; }

  /* ------------------------- Deckblatt ------------------------------ */
  .konzeptDeckblatt{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* genau eine Seite: Papier minus Seitenränder minus Kopf-/Fussraum */
    height: calc(297mm - 12mm - 10mm - 21mm - 28mm);
    page-break-after: always;
    break-after: page;
  }
  .konzeptDeckblatt[hidden]{ display: none !important; }
  /* Bildrahmen = 180 x 180 mm, darunter bleiben ~46 mm für den Titelblock.
     MUSS dasselbe Seitenverhältnis haben wie die Editor-Bühne (.kdoDeckStage),
     sonst stimmt die Vorschau nicht mit dem Druck überein.
     Das Bild wird per Inline-Style (Zoom/Position) frei gesetzt; Überstand
     wird abgeschnitten, Untermass bleibt weiss. */
  .konzeptDeckblatt .dbBild{
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
  }
  .konzeptDeckblatt .dbBild img{
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: auto;
    max-width: none;
    display: block;
  }
  .konzeptDeckblatt .dbText{
    flex: 0 0 auto;
    padding-top: 7mm;
  }
  .konzeptDeckblatt .dbKicker{
    display: block;
    font-size: 8pt;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #7b1e5a;
    font-weight: 700;
  }
  .konzeptDeckblatt .dbProjekt{
    margin-top: 2.5mm;
    font-size: 22pt;
    font-weight: 300;
    line-height: 1.15;
  }
  .konzeptDeckblatt .dbZeile{
    display: flex;
    gap: 4mm;
    margin: 3mm 0 0;
    font-size: 9pt;
  }
  .konzeptDeckblatt .dbZeile span{
    min-width: 26mm;
    color: #777;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 7.5pt;
    padding-top: 0.4mm;
  }

  /* ---------------------------- Kopf ------------------------------- */
  /* Fixiert im oberen Seitenrand -> steht auf jeder Seite. */
  .konzeptPrintHeader{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 17mm;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 2.5mm;
    border-bottom: 0.4mm solid #7b1e5a;
    background: #fff;
  }
  .konzeptPrintHeader .pLogo{
    display: block;
    width: 52mm;
    height: auto;
  }
  .konzeptPrintKopfRechts{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.2mm;
  }
  .konzeptPrintKopfRechts .pRolle{
    font-size: 7.5pt;
    color: #666;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .konzeptPrintKopfRechts .pDatum{
    font-size: 9pt;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #222;
    font-variant-numeric: tabular-nums;
  }

  /* --------------------------- Titelblock --------------------------- */
  /* Kompakt gehalten, damit auf Seite 1 zwei Kartenreihen (4 Karten) Platz
     haben und nicht der Titel die zweite Reihe verdrängt. */
  .konzeptPrintTitel{
    padding: 1mm 0 2.5mm;
    margin-bottom: 1mm;
    border-bottom: 0.2mm solid #ddd;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1.5mm 5mm;
  }
  .konzeptPrintTitel .pKicker{
    font-size: 7.5pt;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #7b1e5a;
    width: 100%;
  }
  .konzeptPrintTitel .pProjektTitel{
    margin: 0;
    font-size: 15pt;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  .konzeptPrintTitel .pProjektTitel:empty{ display: none; }
  .konzeptPrintTitel .pBauherr{
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 3mm;
  }
  .konzeptPrintTitel .pBauherr span{
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #888;
  }
  .konzeptPrintTitel .pBauherr strong{
    font-size: 11pt;
    font-weight: 500;
  }

  /* ------------------- Farbtöne mit ihren Positionen ------------------ */
  .konzeptPrintFarben{
    display: grid;
    gap: 3mm;
    margin: 5mm 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .konzeptPrintFarben[hidden]{ display: none; }
  .pFarbe{
    display: grid;
    grid-template-columns: 30mm 1fr;
    gap: 5mm;
    align-items: center;
  }
  .pFarbe .pFarbFeld{
    height: 14mm;
    border: 0.2mm solid rgba(0,0,0,0.18);
  }
  .pFarbe .pFarbText{
    display: flex;
    flex-direction: column;
    gap: 0.8mm;
  }
  .pFarbe .pFarbCode{
    font-size: 11pt;
    font-weight: 600;
    line-height: 1.15;
  }
  .pFarbe .pFarbSys{
    font-size: 7.5pt;
    color: #666;
    letter-spacing: 0.08em;
  }
  .pFarbe .pFarbPos{
    font-size: 7.5pt;
    color: #333;
  }

  /* Farbzeile bei der einzelnen Position (Farbe steht nur hier, nicht separat) */
  .konzeptPrintCard .pFarbZeile{
    display: flex;
    align-items: center;
    gap: 1.6mm;
    margin: 1.4mm 0 0;
    font-size: 8.5pt;
    font-weight: 600;
    color: #222;
  }
  .konzeptPrintCard .pFarbPunkt{
    width: 3.4mm;
    height: 3.4mm;
    border-radius: 50%;
    border: 0.2mm solid rgba(0,0,0,0.25);
    flex: 0 0 auto;
  }
  .konzeptPrintCard .pFarbSystem{
    font-weight: 400;
    color: #888;
    letter-spacing: 0.06em;
  }

  /* ------------------------- Materialblatt -------------------------- */
  /* Sauberes Raster: zwei Karten pro Reihe, rund vier pro Seite. */
  /* EINE Spalte — alle Positionen untereinander, klar von oben nach unten. */
  /* Bewusst KEIN Grid: Chromium bricht Grid-Kinder beim Seitenumbruch
     ungenau um und lässt am Seitenende eine ganze Kartenhöhe frei.
     Als Blockfluss füllt sich die Seite bis zum Rand. */
  .konzeptPrintList{
    display: block;
    margin-top: 4mm;
  }
  .konzeptPrintList > .konzeptPrintCard{ margin-bottom: 5mm; }
  .konzeptPrintList > .konzeptPrintCard:last-child{ margin-bottom: 0; }
  .konzeptPrintLeer{
    grid-column: 1 / -1;
    font-size: 9pt;
    color: #666;
  }
  /* Eine Karte = eine Position als Zeile: Bild links, Angaben rechts.
     Flach gehalten, damit sechs Positionen untereinander aufs Blatt passen. */
  /* Zeile 2 = 1fr: das über beide Zeilen laufende Bild darf seine Mehrhöhe
     NUR unten abladen — sonst rutscht der Text vom Titel weg in die Mitte. */
  /* Rasterhöhe einer Position: Bild 46 mm breit (16:9 => 25.9 mm hoch).
     Mit 5 mm Abstand ergibt das rund 31 mm je Position — bei 226 mm
     nutzbarer Höhe passen so 6–7 Positionen auf eine Seite, mit sichtbarer
     Luft dazwischen statt gedrängter Trennlinien. */
  .konzeptPrintCard{
    display: grid;
    grid-template-columns: 42mm 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 5mm;
    align-items: start;
    /* Einheitliche Mindesthöhe = Bildhöhe. Zusammen mit dem begrenzten
       Beschrieb bleiben die Karten annähernd gleich hoch, dadurch füllt
       sich die Seite gleichmässig statt unten abzubrechen. */
    min-height: 23.6mm;
    padding-bottom: 2mm;
    border-bottom: 0.2mm solid #e6e6e6;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .konzeptPrintCard .pKopf{
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: baseline;
    gap: 2.2mm;
    padding-bottom: 0.6mm;
    margin-bottom: 1.2mm;
    border-bottom: 0.3mm solid #111;
  }
  .konzeptPrintCard .pText{ grid-column: 2; grid-row: 2; }
  .konzeptPrintCard .pNum{
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #7b1e5a;
    font-variant-numeric: tabular-nums;
  }
  .konzeptPrintCard .pCat{
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* Bild links in der Zeile, über beide Textzeilen hinweg.
     64 x 36 mm -> zusammen mit 1.5mm Polster passen FÜNF Positionen aufs
     Blatt (nutzbar ~209mm: 5 x 37.5 + 4 x 2.5 Abstand = 197.5mm). */
  .konzeptPrintCard .pMuster{
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    border: 0.2mm solid rgba(0,0,0,0.18);
    background-size: cover;
    background-position: center;
  }
  /* Stoffmuster der Markise als Einsatz im Markisenbild — der Stoff gehört
     zur Markise und steht darum nicht als eigene Position im Konzept. */
  .konzeptPrintCard .pMusterEinsatz{
    position: absolute;
    right: 4%;
    bottom: 5%;
    width: 40%;
    height: 40%;
    border: 0.35mm solid #fff;
    outline: 0.15mm solid rgba(0,0,0,0.3);
    background-size: cover;
    background-position: center;
  }
  /* Beide Texturen sind 600 px gross. In ein 24-mm-Feld hineingequetscht
     verschwinden Tafelfugen und Bretter — darum ein Ausschnitt statt
     einer Verkleinerung. */
  /* ---- Unterschriftenfelder unten auf dem Blatt ---- */
  .konzeptPrintSig{
    margin-top: 10mm;
    padding-top: 4mm;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .konzeptPrintSig[hidden]{ display: none !important; }
  .konzeptPrintSig .pSigOrt{
    width: 62mm;
    margin-bottom: 9mm;
  }
  .konzeptPrintSig .pSigFelder{
    display: flex;
    gap: 8mm;
    align-items: flex-start;
  }
  .konzeptPrintSig .pSigFeld{ flex: 1 1 0; min-width: 0; }
  .konzeptPrintSig .pSigLinie{
    display: block;
    border-bottom: 0.5pt solid #111;
    height: 9mm;
  }
  .konzeptPrintSig .pSigLabel{
    display: block;
    margin-top: 1.6mm;
    font-size: 7.5pt;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #444;
  }
  .konzeptPrintSig .pSigName{
    display: block;
    margin-top: 0.6mm;
    font-size: 8.5pt;
    font-weight: 600;
    color: #111;
  }

  .konzeptPrintCard .pMuster.putzFlaeche{ background-size: 20mm 20mm; }
  .konzeptPrintCard .pMuster.eigenFlaeche{
    background-size: 200% 200%;
    background-position: center;
  }

  .konzeptPrintCard .pName{
    display: block;
    font-size: 9.6pt;
    font-weight: 600;
    line-height: 1.2;
  }
  /* Lage/Bezeichnung der Position — z.B. «Hauseingang EG» */
  .konzeptPrintCard .pOrt{
    margin: 0.8mm 0 0;
    font-size: 8.5pt;
    font-weight: 600;
    line-height: 1.25;
    color: #7b1e5a;
  }
  /* Voller Beschrieb — in einem Abgabedokument darf kein Text verschwinden.
     Die Kartenhöhe richtet sich nach dem Bild (23.6 mm); der Text bleibt in
     aller Regel darunter, sodass die Karten gleich hoch bleiben. */
  .konzeptPrintCard .pDesc{
    margin: 1.0mm 0 0;
    font-size: 7.6pt;
    line-height: 1.35;
    color: #3a3a3a;
  }
  /* Eigenschaften der Position (Fenster: Glas, Sprossen, Bank, Einfassung) */
  .konzeptPrintCard .pSpecs{
    list-style: none;
    margin: 1.4mm 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4mm 4mm;
  }
  .konzeptPrintCard .pSpecs li{
    display: flex;
    gap: 1.5mm;
    font-size: 7.6pt;
    line-height: 1.35;
  }
  .konzeptPrintCard .pSpecLabel{
    color: #8a8a8a;
    white-space: nowrap;
  }
  .konzeptPrintCard .pSpecWert{ color: #222; font-weight: 600; }
  /* Fliesstext statt Raster: Eigenschaften laufen in einer Zeile weiter und
     werden durch «·» getrennt. Sonst wird ein Fenster mit sechs
     Eigenschaften so hoch, dass keine 5 Positionen mehr auf die Seite passen. */
  .konzeptPrintCard .pSpecs--fliess{
    display: block;
    margin: 1.0mm 0 0;
  }
  .konzeptPrintCard .pSpecs--fliess li{
    display: inline;
    font-size: 7.4pt;
  }
  .konzeptPrintCard .pSpecs--fliess li + li::before{
    content: ' · ';
    color: #b8b8b8;
  }
  .konzeptPrintCard .pSpecs--fliess .pSpecLabel{ white-space: normal; }
  .konzeptPrintCard .pSpecs--fliess .pSpecWert{ margin-left: 0.8mm; }
  .konzeptPrintCard .pNote{
    margin: 1.6mm 0 0;
    font-size: 8pt;
    line-height: 1.4;
    color: #555;
    font-style: italic;
  }

  /* ---- Bestückte Pläne: je Plan eine eigene Seite ---- */
  .konzeptPrintPlan{
    break-before: page;
    page-break-before: always;
    break-inside: avoid;
    text-align: center;
    margin-top: 3mm;
  }
  .konzeptPrintPlan .pPlanKopf{
    display: flex;
    align-items: baseline;
    gap: 3mm;
    text-align: left;
    padding-bottom: 1.4mm;
    margin-bottom: 3mm;
    border-bottom: 0.35mm solid #111;
  }
  .konzeptPrintPlan .pKicker{
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7b1e5a;
  }
  .konzeptPrintPlan .pPlanTitel{ font-size: 11pt; font-weight: 600; }
  .konzeptPrintPlan .pPlanBild{
    position: relative;
    display: inline-block;
    max-width: 100%;
    border: 0.2mm solid rgba(0,0,0,0.2);
  }
  .konzeptPrintPlan .pPlanBild img{ display: block; max-width: 100%; max-height: 188mm; }
  .konzeptPrintPlan .planMarkerLayer{ position: absolute; inset: 0; }
  .konzeptPrintPlan .pPlanLegende{
    list-style: none;
    margin: 4mm 0 0;
    padding: 0;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6mm 6mm;
  }
  .konzeptPrintPlan .pPlanLegende li{
    display: flex;
    align-items: baseline;
    gap: 2.5mm;
    font-size: 8.5pt;
  }
  .konzeptPrintPlan .pLgNum{
    flex: 0 0 auto;
    width: 5mm;
    height: 5mm;
    border-radius: 50%;
    background: #7b1e5a;
    color: #fff;
    font-size: 7pt;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
    /* ----------------------------- Fuss ------------------------------- */
  /* Fixiert im unteren Seitenrand -> steht auf JEDER Seite und kann nicht
     mehr auf eine Folgeseite gedrückt werden. */
  .konzeptPrintFooter{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 26mm;
    padding-top: 2.5mm;
    border-top: 0.4mm solid #7b1e5a;
    background: #fff;
    overflow: hidden;
  }
  .pFussSpalten{
    display: grid;
    grid-template-columns: repeat(3, auto) 1.4fr;
    gap: 7mm;
  }
  .pFussSpalte{
    display: flex;
    flex-direction: column;
    gap: 0.6mm;
    font-size: 7pt;
    line-height: 1.5;
    color: #666;
  }
  .pFussTitel{
    font-size: 6.5pt;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: #7b1e5a;
    margin-bottom: 1mm;
  }
  .pFussSpalte--hinweis span:not(.pFussTitel){
    color: #888;
    line-height: 1.45;
  }
  .pFussZeile{
    display: flex;
    justify-content: space-between;
    gap: 6mm;
    margin-top: 4mm;
    padding-top: 2mm;
    border-top: 0.2mm solid #e2e2e2;
    font-size: 6.5pt;
    letter-spacing: 0.06em;
    color: #999;
  }
}

/* ===================================================================== */
/* ===================== Kontakt-Seite ================================= */
/* ===================================================================== */

.kontaktPage{ background: #fafaf8; }

.kontaktSection{ padding-top: 30px; padding-bottom: 80px; }

.kontaktLayout{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: stretch;
}
.kontaktLeft{
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Drei Aktions-Karten */
.kontaktActions{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.kontaktAction{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px 22px;
  background: #fff;
  border: 1px solid rgba(123,30,90,0.18);
  box-shadow: 0 14px 30px -16px rgba(123,30,90,0.30);
  text-decoration: none;
  color: var(--text);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
  isolation: isolate;
}
.kontaktAction:hover{
  transform: translateY(-3px);
  border-color: rgba(123,30,90,0.50);
  box-shadow: 0 22px 40px -18px rgba(123,30,90,0.45);
  background: #fff;
  text-decoration: none;
}
.kontaktActionIcon{
  display: inline-flex;
  width: 32px;
  height: 32px;
  color: var(--accent);
  margin-bottom: 6px;
}
.kontaktActionIcon svg{ width: 100%; height: 100%; }
.kontaktActionLabel{
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.kontaktActionValue{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  word-break: break-word;
}
.kontaktActionHint{
  margin-top: auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  padding-top: 8px;
}

/* Drei Info-Blöcke */
.kontaktBlocks{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.kontaktBlock--cta.kontaktBlock--split{ grid-column: 1 / -1; }
.kontaktBlock{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 22px 20px 20px;
}
.kontaktBlock h3{
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}
.kontaktBlock p{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(0,0,0,0.72);
}
.kontaktBlock--cta{
  background: linear-gradient(180deg, rgba(123,30,90,0.06), rgba(123,30,90,0.13));
  border-color: rgba(123,30,90,0.30);
}
/* CTA-Box halbiert: zwei komplett anklickbare Hälften, gleiche Gesamtgrösse */
.kontaktBlock--split{
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.kontaktCta{
  display: flex;
  flex-direction: column;
  padding: 22px 16px 20px;
  text-decoration: none;
  color: inherit;
  transition: background 180ms ease;
}
.kontaktCta + .kontaktCta{ border-left: 1px solid rgba(123,30,90,0.20); }
.kontaktCta:hover{ background: rgba(123,30,90,0.10); }
.kontaktCta h3{
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.kontaktCta p{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0,0,0,0.72);
}
.kontaktCta .leistungLink{ margin-top: auto; }
.kontaktCta:hover .leistungLink{ transform: translateX(4px); }
@media (max-width: 460px){
  .kontaktBlock--split{ grid-template-columns: 1fr; }
  .kontaktCta + .kontaktCta{ border-left: 0; border-top: 1px solid rgba(123,30,90,0.20); }
}
.kontaktHours{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 13px;
}
.kontaktHours dt{
  font-weight: 700;
  color: var(--text);
}
.kontaktHours dd{
  margin: 0;
  color: rgba(0,0,0,0.65);
}
.kontaktLinks{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.kontaktLinks a{
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(123,30,90,0.25);
  padding-bottom: 2px;
  transition: border-color 200ms ease, color 200ms ease;
}
.kontaktLinks a:hover{
  color: var(--accent);
  border-color: var(--accent);
}
.kontaktLinks code{
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
}

/* Grosse Map */
.kontaktMapWrap{
  position: relative;
  min-height: 480px;
  background: #eee;
  overflow: hidden;
  border: 1px solid rgba(123,30,90,0.18);
  box-shadow: 0 14px 30px -16px rgba(123,30,90,0.35);
}
.kontaktMap{
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  display: block;
}
.kontaktMapBadge{
  position: absolute;
  bottom: 18px;
  left: 18px;
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  font-size: 12px;
  line-height: 1.3;
  pointer-events: none;
}
.kontaktMapBadge strong{
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kontaktMapBadge span{
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

@media (max-width: 980px){
  /* Nur das Hauptlayout umbrechen. Karten bleiben nebeneinander,
     sonst wird die Seite auf dem Handy endlos lang. */
  .kontaktLayout{ grid-template-columns: 1fr; gap: 24px; }
  .kontaktMapWrap{ min-height: 300px; }
  .kontaktMap{ min-height: 300px; }
}
@media (max-width: 540px){
  .kontaktAction{ padding: 18px 16px 16px; }
  .kontaktActionValue{ font-size: 14px; }
}

/* ===================================================================== */
/* ============== Mobile-Konsolidierung (zentral, am Ende) ============= */
/* ===================================================================== */

@media (max-width: 860px){
  /* Header schlanker */
  .headerInner{ height: 96px; gap: 12px; }
  .logo{ height: 42px; }
  .burger{ width: 40px; height: 40px; }

  /* Pages mit fixed Header brauchen weniger Top-Padding */
  .page{ padding-top: 96px; }

  /* PageHero (Unterseiten) kompakter */
  .pageHero{ padding: 28px 0 20px; }
  .pageHero h1{ font-size: 28px; letter-spacing: -0.01em; }

  /* Hero auf Startseite */
  .hero{ min-height: 88vh; }
  .heroContent{ padding: 110px 0 50px !important; min-height: 88vh !important; }
  .heroKicker{ font-size: 11px; letter-spacing: 0.18em; margin: 50px 0 26px !important; }

  /* Architektur & Bauleitung */
  .heroMain{ gap: 24px !important; margin-top: 50px !important; flex-wrap: nowrap; }
  .heroPair{ gap: 14px; }
  .heroPairTitle{ font-size: 24px; letter-spacing: 0.02em; }
  .heroPairIcon{ width: 44px; height: 44px; }
  .heroPairAmp{ font-size: 26px; line-height: 26px; }

  /* HeroSub kompakter */
  .heroSub{ font-size: 13px !important; }
  .heroSubInner{ padding: 4px 8px; }

  /* "Mehr erfahren" */
  .heroScroll{ margin-top: 26px; gap: 10px; }
  .heroScroll::before{ width: 40px; }
  .heroScrollLabel{ font-size: 9px; letter-spacing: 0.24em; padding: 6px 12px; }
  .heroScrollArrow{ width: 36px; height: 36px; }
  .heroScrollArrow svg{ width: 17px; height: 17px; }

  /* Tiles-Section Header bricht um */
  .tilesHeader{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .tilesHeader h2{ font-size: 22px; }
  .tilesGrid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 200px 280px;
    grid-auto-rows: 200px;
  }
  .tile--tall{ grid-row: span 2; }
  .tile{ padding: 20px 18px 18px; }
  .tileTitle{ font-size: 13px; }
  .tile--tall .tileTitle{ font-size: 14px; }
  .tileText{ font-size: 12px; }
  .tileIcon{ width: 36px; height: 36px; margin-bottom: 14px; }
  .tile--tall .tileIcon{ width: 44px; height: 44px; margin-bottom: 18px; }

  /* Strip kompakter */
  .stripHeader{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .stripHeader h2{ font-size: 22px; }
  .stripCount{ flex-direction: row; align-items: baseline; gap: 8px; }
  .stripCountNum{ font-size: 30px; }

  /* Footer staffeln */
  .footerGrid{ grid-template-columns: 1fr 1fr; }
  .footer{ padding: 32px 0 24px; }

  .projektDashboard::before,
  .projektDashboard::after{ display: none; }

  /* Leistungen-Page */
  .leistungenSection{ padding-top: 30px; padding-bottom: 50px; }
  .leistungenGroupBody{ padding-bottom: 44px; }
  .leistungenGroupHead{ flex-direction: column; align-items: flex-start; gap: 6px; }
  .leistungenGroupNum{ font-size: 28px; }
  .leistungenGroupTitle{ font-size: 14px; letter-spacing: 0.12em; }

  /* Konzept-Tool */
  .konzeptOptions{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  .konzeptOption h3{ font-size: 12px; letter-spacing: 0.06em; }
  .konzeptOption p{ font-size: 11px; }
  .konzeptCategoryHead h2{ font-size: 14px; gap: 8px; }
  .konzeptMeta{ padding: 16px 14px; gap: 10px; }
  .konzeptSummary{ padding: 18px 16px; }

  /* Machbarkeit-Tool */
  .machbGroup{ padding: 20px 18px 18px; }
  .machbGroupHead{ flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 10px; }
  .machbNum{ font-size: 22px; }
  .machbGroupHead h2{ font-size: 14px; }
  .machbRadios, .machbChecks{ padding: 10px 10px 6px; gap: 6px 10px; }
  .machbRadios label, .machbChecks label{ font-size: 12px; padding: 5px 8px; }
  .machbField input,
  .machbField textarea{ font-size: 13px; padding: 8px 10px; }
  .machbSidebarInner{ padding: 18px 16px; }
}

/* Sehr kleine Geräte */
@media (max-width: 520px){
  .headerInner{ height: 84px; }
  .logo{ height: 38px; }
  .page{ padding-top: 84px; }

  .heroContent{ padding: 80px 0 40px !important; }
  .heroKicker{ margin: 40px 0 18px !important; }
  .heroMain{ gap: 16px !important; margin-top: 36px !important; }
  .heroPair{ gap: 12px; }
  .heroPairTitle{ font-size: 20px; letter-spacing: 0.02em; }
  .heroPairIcon{ width: 36px; height: 36px; }
  .heroPairAmp{ font-size: 22px; line-height: 22px; }

  .heroScrollArrow{ width: 32px; height: 32px; }
  .heroScrollArrow svg{ width: 15px; height: 15px; }

  .tilesGrid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-rows: auto;
  }
  .tile--tall{ grid-row: span 1; }
  .tile{ min-height: 180px; }

  .footerGrid{ grid-template-columns: 1fr; gap: 22px; }

  .leistungenGrid{ grid-template-columns: 1fr; }

  .konzeptMeta{ padding: 14px 12px; }
  .konzeptOption h3{ font-size: 11px; }
  .konzeptOptions{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); }

  .machbFields{ grid-template-columns: 1fr; }
}

/* =====================================================================
   Partner
   ===================================================================== */
.partnerSection{ padding-top: 18px; padding-bottom: 56px; }

.partnerGrid{
  display: grid;
  /* bricht von selbst um – keine festen Spaltenzahlen mehr nötig */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 14px;
}
.partnerCard[hidden]{ display: none; }
.partnerCard{
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px 20px 16px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.16);
  box-shadow: none;
  transition: border-color 240ms ease;
}
.partnerCard:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.partnerLogo{
  display: grid;
  place-items: center;
  height: 64px;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px dashed rgba(15,23,42,0.22);
  color: rgba(0,0,0,0.30);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
/* Echtes Logo: kein Platzhalter-Rahmen, linksbündig */
.partnerLogo:has(img){
  border: none;
  justify-items: start;
  text-decoration: none;
}
/* Grenzen in Pixeln, nicht in Prozent: SVG-Logos bringen oft nur eine
   viewBox und keine festen Masse mit — dann greift max-height:100% nicht
   und das Logo wächst aus seiner Kachel heraus. Die Deckelung nach Höhe
   UND Breite lässt alle Logos optisch gleich gross wirken, ob breite
   Wortmarke oder quadratisches Signet. */
.partnerLogo img{
  max-height: 44px;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 200ms ease;
}
.partnerLogo:hover img{ opacity: 0.82; }

/* Horibe: Logo ist weisse Schrift auf transparent -> dunkler Grund nötig */
.partnerLogo--dark{
  background: #1e1e1e;
  padding: 10px 16px;
  justify-items: center;
}
.partnerLogo--dark img{ max-height: 40px; }

/* Contractbau: kein Logo vorhanden -> Wortmarke aus Text */
.partnerLogo--text{
  border: none;
  justify-items: start;
  align-content: center;
  text-decoration: none;
}
.partnerWordmark{
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1;
}
.partnerWordmark strong{
  font-weight: 700;
  color: var(--accent);
}
/* zweizeilige Wortmarke: kleiner, damit sie in die Karte passt */
.partnerWordmark--sm{
  font-size: 23px;
  line-height: 1.18;
}

.partnerLink{
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.partnerLink:hover{ text-decoration: underline; }
.partnerCard h3{
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
}
.partnerRole{
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.partnerCard .partnerText{
  margin: 0 0 auto;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(0,0,0,0.62);
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Karten sonst unterschiedlich hoch und die Reihe reisst auf */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 860px){
  .partnerCard{ min-height: 0; }
}

/* =====================================================================
   Referenzliste (projekte.html) — alle Projekte, Bilder optional
   ===================================================================== */
.referenzenSection{ padding-top: 34px; padding-bottom: 56px; }

.referenzenBar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.referenzenFilter{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.refChip{
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 7px 13px;
  background: #fff;
  color: var(--text);
  border: 1px solid rgba(15,23,42,0.20);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.refChip:hover{ border-color: var(--accent); color: var(--accent); }
.refChip.isActive{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.referenzenCount{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.referenzenWrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.referenzenTable{
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.referenzenTable th{
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  padding: 0 8px 8px 0;
  border-bottom: 1px solid rgba(15,23,42,0.22);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 160ms ease;
}
.referenzenTable th:hover{ color: var(--accent); }
.referenzenTable th.isSorted{ color: var(--accent); }
.referenzenTable th.isSorted::after{
  content: "↑";
  margin-left: 6px;
  font-size: 9px;
}
.referenzenTable th.isSorted[data-dir="desc"]::after{ content: "↓"; }

.referenzenTable td{
  padding: 7px 8px 7px 0;
  border-top: 1px solid rgba(15,23,42,0.09);
  vertical-align: baseline;
}
.refZeit{
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.refName{ color: var(--text); font-weight: 500; }
.refRegion,
.refLeistung{ color: rgba(0,0,0,0.58); }

.refRow--linked{ cursor: pointer; }
.refRow--linked:hover td{ background: rgba(123,30,90,0.05); }
.refRow--linked:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }
.refBadge{
  display: inline-block;
  margin-left: 10px;
  padding: 2px 7px;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid rgba(123,30,90,0.30);
  vertical-align: 1px;
}

@media (max-width: 640px){
  .referenzenTable{ font-size: 12px; }
  .referenzenTable td{ padding: 9px 10px 9px 0; }
  .refBadge{ display: none; }
}

/* =====================================================================
   Projekt-Galerie: responsiv. Die phi-Aufteilung gilt ab 900px.
   ===================================================================== */
@media (max-width: 1100px){
  .projektDashboard{ grid-template-columns: repeat(3, 1fr); }
  .dashStat{ border-bottom: 1px solid rgba(15,23,42,0.10); }
  .dashStat:nth-child(3n){ border-right: none; }
  .dashStat:nth-child(n+4){ border-bottom: none; }
  .dashStat:nth-child(4){ padding-left: 0; }
}
@media (max-width: 900px){
  .projektGalerie{ padding-top: 130px; }
  .projektBody{ grid-template-columns: 1fr; gap: var(--gapS); }
  .projektViewer{ aspect-ratio: 3 / 2; }
  .projektSide{ gap: var(--gapS); }
}
@media (max-width: 560px){
  .projektGalerie{ padding-top: 110px; }
  .projektDashboard{ grid-template-columns: repeat(2, 1fr); }
  .dashStat{ padding: 14px 16px; }
  .dashStat:nth-child(3n){ border-right: 1px solid rgba(15,23,42,0.10); }
  .dashStat:nth-child(2n){ border-right: none; }
  .dashStat:nth-child(odd){ padding-left: 0; }
  .dashStat:nth-child(n+5){ border-bottom: none; }
  .dashValue{ font-size: 15px; }
  .projektViewer{ aspect-ratio: 4 / 3; }
}

/* =====================================================================
   MOBILE-PASS
   Ziele: (1) Kennzahlen dürfen nie abgeschnitten werden
          (2) Startseite deutlich kürzer: kompakte Karten
   ===================================================================== */

/* --- Projekte: Kennzahlen immer vollständig lesbar --- */
@media (max-width: 900px){
  .dashValue{
    white-space: normal;      /* nicht mehr abschneiden */
    overflow: visible;
    text-overflow: clip;
    font-size: 15px;
    line-height: 1.2;
  }
  .dashStat{ padding: 13px 14px; gap: 7px; }
  .dashLabel{ font-size: 8.5px; letter-spacing: 0.22em; }
  .projektTitel{ font-size: 22px; }
}
@media (max-width: 560px){
  .dashValue{ font-size: 14px; }
  .dashStat{ padding: 12px 12px; }
  .projektImgNav{ padding: 4px 6px; }
  .projektImgBtn{ width: 34px; height: 34px; }   /* Touch-Ziel */
}

/* --- Startseite: kompakte Karten unter 700px --- */
@media (max-width: 700px){

  /* Sektionsköpfe: weniger Luft */
  .sectionHead{ padding-top: 26px; margin-bottom: 28px; }
  .tilesSection{ padding-top: 40px; padding-bottom: 34px; }
  .projectsStrip{ padding-top: 20px; padding-bottom: 44px; }
  .partnerSection{ padding-top: 20px; padding-bottom: 50px; }

  /* Leistungs-Kacheln: Höhe aus dem Inhalt statt fixer Mindesthöhe */
  .tile--cat{
    min-height: 0;
    padding: 24px 20px 20px;
  }
  .tileList{ margin-top: 12px; font-size: 12.5px; }
  .tileList li{ padding: 7px 0 7px 16px; }
  .tileNum{ right: 16px; bottom: 12px; font-size: 30px; }
  .tileNumKicker{ font-size: 8px; margin-bottom: 4px; }

  /* Projektkarten: quadratisch statt hochformatig, zwei pro Reihe */
  .stripGrid{ grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  .stripImg{ aspect-ratio: 1 / 1; }
  .stripImgWrap--empty{ aspect-ratio: 1 / 1; }
  .stripBody{ padding-top: 9px; }
  .stripBody h3{ font-size: 12px; }
  .stripMeta{ font-size: 10px; }
  .stripNav{ margin-top: 8px; gap: 6px; }
  .stripCtrl{ width: 30px; height: 30px; }   /* Touch-Ziel */

  /* Partner: zwei pro Reihe, ohne Beschreibungstext.
     Das ist der grösste Hebel gegen die Seitenlänge. */
  .partnerCard{
    min-height: 0;
    padding: 16px 14px 14px;
  }
  .partnerCard:hover{ transform: none; }
  .partnerLogo{ height: 56px; margin-bottom: 10px; }
  .partnerLogo img{ max-height: 38px; max-width: 150px; }
  .partnerWordmark{ font-size: 19px; }
  .partnerWordmark--sm{ font-size: 15px; }
  .partnerCard h3{ font-size: 11.5px; letter-spacing: 0.06em; margin-bottom: 4px; }
  .partnerRole{ font-size: 8.5px; letter-spacing: 0.12em; margin: 0; }
  /* Nur die Fliesstext-Beschreibung ausblenden. Ort und BKP bleiben —
     das sind die Angaben, nach denen gesucht wird. */
  .partnerCard .partnerText{ display: none; }
  .partnerLink{ display: none; }                  /* das Logo ist bereits verlinkt */
  .partnerBkp{ margin-bottom: 0; }
  .bkpGattung{ font-size: 11px; }
}

@media (max-width: 420px){
  .partnerLogo{ height: 60px; }
  .partnerLogo img{ max-height: 42px; max-width: 170px; }
  .stripGrid{ grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Log-In-Hinweis auf der Kontaktseite (führt zum Admin-Bereich)
   ===================================================================== */
.loginSection{ padding-top: 0; padding-bottom: 80px; }
.loginBar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 26px;
  border-top: 1px solid rgba(15,23,42,0.16);
}
.loginBar h2{
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 600;
}
.loginBar p{
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.loginBtn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid rgba(123,30,90,0.30);
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.loginBtn:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  text-decoration: none;
}
.loginBtn span{ transition: transform 200ms ease; }
.loginBtn:hover span{ transform: translateX(4px); }

/* =====================================================================
   Konzept: Verputzfarbe (RAL / NCS / frei)
   ===================================================================== */
.konzeptColor{
  margin-top: 22px;
  padding: 20px;
  border: 1px solid rgba(15,23,42,0.14);
  background: #fff;
}
.konzeptColorTitle{
  margin: 0 0 14px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--text);
}
.konzeptColorTabs{ display: flex; gap: 6px; margin-bottom: 14px; }
.konzeptColorTab{
  font: inherit; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; padding: 8px 16px; cursor: pointer;
  background: #fff; color: var(--muted);
  border: 1px solid rgba(15,23,42,0.16);
  transition: color 160ms ease, border-color 160ms ease;
}
.konzeptColorTab:hover{ color: var(--accent); }
.konzeptColorTab.isActive{ color: #fff; background: var(--accent); border-color: var(--accent); }

.konzeptColorSearch{ margin-bottom: 12px; }
.konzeptRalGrid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px; max-height: 260px; overflow-y: auto; padding-right: 4px;
}
.konzeptRalChip{
  display: flex; flex-direction: column; gap: 0; text-align: left; cursor: pointer;
  padding: 0; background: #fff; border: 1px solid rgba(15,23,42,0.14);
  transition: border-color 150ms ease, transform 150ms ease;
}
.konzeptRalChip:hover{ border-color: var(--accent); transform: translateY(-1px); }
.konzeptRalChip.isSelected{ border-color: var(--accent); box-shadow: 0 0 0 2px var(--accentSoft); }
.konzeptRalSwatch{ display: block; height: 44px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.konzeptRalCode{ padding: 6px 8px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.konzeptRalName{ padding: 1px 8px 7px; font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.konzeptNcsField{ display: block; }
.konzeptNcsField span{
  display: block; margin-bottom: 6px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.konzeptNcsApply{ margin-top: 10px; }
.konzeptColorHint{ margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.konzeptFreiRow{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.konzeptFreiRow input[type="color"]{
  width: 48px; height: 40px; padding: 0; border: 1px solid rgba(15,23,42,0.16);
  background: #fff; cursor: pointer;
}
.konzeptFreiRow .input{ flex: 1; min-width: 160px; }

.konzeptColorChosen{
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,0.10);
}
.konzeptColorSwatch{
  width: 40px; height: 40px; flex: none;
  border: 1px solid rgba(0,0,0,0.15);
}
.konzeptColorLabel{ font-size: 13px; font-weight: 600; }
.konzeptColorClear{
  margin-left: auto; width: 30px; height: 30px; flex: none; cursor: pointer;
  font-size: 16px; line-height: 1; background: #fff; color: var(--muted);
  border: 1px solid rgba(15,23,42,0.16);
}
.konzeptColorClear:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }

/* Swatch in der Auswahl-Zusammenfassung */
.sSwatch{
  display: inline-block; width: 13px; height: 13px; margin-right: 7px;
  border: 1px solid rgba(0,0,0,0.2); vertical-align: -2px;
}

/* Swatch in Druckansicht */
/* =====================================================================
   Material-Texturen für die Konzept-Optionen — rein aus CSS-Verläufen
   (rechtssicher, ohne Fotos). Später durch echte Bilder ersetzbar.
   ===================================================================== */
.konzeptOptionImg{ background-size: cover; background-position: center; }

/* Verputz — feine mineralische Körnung, gebrochenes Weiss */
.mat-verputz{
  background-color:#efe9dd;
  background-image:
    radial-gradient(rgba(120,110,90,0.14) 0.6px, transparent 0.7px),
    radial-gradient(rgba(120,110,90,0.10) 0.6px, transparent 0.7px);
  background-size: 4px 4px, 7px 7px;
  background-position: 0 0, 2px 3px;
}
/* Holz vertikal — vorvergraute Lattung, stehend */
.mat-holz-vert{
  background-color:#9c7b52;
  background-image: repeating-linear-gradient(90deg,
    #a9855c 0, #a9855c 10px, #8f6c45 11px, #9c7b52 12px, #b08a5f 20px, #96744c 22px);
}
/* Faserzement — ruhige Platte, leicht wolkig grau */
.mat-faserzement{
  background-color:#6a6a6d;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.06)),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), transparent 60%);
}
/* Ziegel — rotbraune Deckung */
.mat-ziegel{
  background-color:#8b3a2a;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, #97402f, #7d3324);
}
/* Blech — Stehfalz anthrazit, kühler Schimmer */
.mat-blech{
  background-color:#2c2e30;
  background-image: repeating-linear-gradient(90deg,
    #333638 0 14px, #26282a 15px, #3c4042 16px, #2c2e30 30px);
}
/* Gründach — moosige Grüntöne */
.mat-gruendach{
  background-color:#5d6c3f;
  background-image:
    radial-gradient(circle at 20% 30%, #6f8049 0 8%, transparent 20%),
    radial-gradient(circle at 70% 60%, #4e5c34 0 10%, transparent 24%),
    radial-gradient(circle at 45% 80%, #75864f 0 8%, transparent 22%);
}
/* Eiche (Fenster) — warmes, feines Holz */
.mat-eiche{
  background-color:#a8784a;
  background-image: repeating-linear-gradient(0deg,
    #b5854f 0 6px, #9f6f42 7px, #ac7b4a 9px, #b98d58 14px);
}
/* Aluminium — gebürstetes Anthrazit */
.mat-alu{
  background-color:#3a3c3e;
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #45484a, #303234);
}
/* Holz-Aluminium — halb Holz, halb Metall */
.mat-holzalu{
  background-color:#7d6644;
  background-image:
    linear-gradient(90deg, transparent 0 50%, rgba(58,60,62,0.92) 50% 100%),
    repeating-linear-gradient(0deg, #8a7049 0 6px, #745d3d 7px, #856a45 10px);
}
/* Eichenparkett — warme Dielen */
.mat-parkett{
  background-color:#bd8b5b;
  background-image: repeating-linear-gradient(90deg,
    #c69365 0 34px, #a9784c 35px, #bd8b5b 36px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 5px, transparent 5px 11px);
}
/* Steinplatten — mattgrauer Naturstein */
.mat-stein{
  background-color:#9a9a96;
  background-image:
    radial-gradient(circle at 35% 40%, rgba(255,255,255,0.14), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(0,0,0,0.10), transparent 55%);
}
/* Beton geschliffen — glatter Sichtbeton */
.mat-beton{
  background-color:#8f8f8b;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.07), rgba(0,0,0,0.05)),
    radial-gradient(circle at 60% 30%, rgba(0,0,0,0.06) 0.8px, transparent 1px);
  background-size: auto, 6px 6px;
}

/* Weitere Materialtexturen (Spenglerei, Storen, Geländer, Beläge) */
.mat-titanzink{ background-color:#8d9094; background-image:
  repeating-linear-gradient(90deg,#93969a 0 12px,#83868a 13px,#9a9da1 14px,#8d9094 26px); }
.mat-kupfer{ background-color:#8e5a3a; background-image:
  linear-gradient(135deg, rgba(255,255,255,0.10), rgba(0,0,0,0.10)),
  linear-gradient(180deg,#a5673f,#7c4a2f); }
.mat-verzinkt{ background-color:#adb0b2; background-image:
  radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 45%),
  radial-gradient(circle at 70% 70%, rgba(0,0,0,0.10), transparent 45%); }
.mat-stoff{ background-color:#c9c6bf; background-image:
  repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 4px),
  repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 4px); }
.mat-glas{ background-color:#b9c9c9; background-image:
  linear-gradient(135deg, rgba(255,255,255,0.55) 0 20%, rgba(180,200,205,0.3) 40% 60%, rgba(255,255,255,0.4) 80% 100%); }
.mat-asphalt{ background-color:#3b3b3d; background-image:
  radial-gradient(rgba(255,255,255,0.05) 0.6px, transparent 0.7px),
  radial-gradient(rgba(0,0,0,0.30) 0.6px, transparent 0.7px);
  background-size:3px 3px,5px 5px; background-position:0 0,2px 1px; }
.mat-pflaster{ background-color:#9a9a97; background-image:
  repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 14px),
  repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 14px); }
.mat-kies{ background-color:#b3ac9d; background-image:
  radial-gradient(circle at 25% 35%, rgba(0,0,0,0.18) 0 1.5px, transparent 2px),
  radial-gradient(circle at 60% 55%, rgba(0,0,0,0.14) 0 1.5px, transparent 2px),
  radial-gradient(circle at 80% 25%, rgba(255,255,255,0.3) 0 1.5px, transparent 2px);
  background-size:9px 9px,11px 11px,7px 7px; }

/* Freitext-Beschrieb pro Konzept-Kategorie */
.konzeptNote{ margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(15,23,42,0.10); }
.konzeptNoteLabel{
  display: block; margin-bottom: 6px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.konzeptNoteInput{
  width: 100%; padding: 10px 12px; font: inherit; font-size: 13px; line-height: 1.5;
  color: var(--text); background: #fff; border: 1px solid rgba(15,23,42,0.16); resize: vertical;
}
.konzeptNoteInput:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(123,30,90,0.08); }

/* Druck: Beschrieb-Notiz */
.konzeptPrintItem .pNote{ margin: 2px 0 0; font-size: 11px; color: #333; }

/* Foto auf Konzept-Option (überschreibt die CSS-Textur, falls Bild vorhanden) */
.konzeptOptionImg.hasPhoto{ background-color: #e9e6df; }

/* Bildnachweise am Ende der Konzept-Seite */
/* =====================================================================
   Fassaden-Strukturen (Verputzarten, Sichtbeton, Holz/Schalung)
   Rein CSS – zeigt die Struktur, nicht nur eine Farbe.
   ===================================================================== */

/* Reibeputz / Abrieb – feine, dichte Körnung */
.mat-putz-abrieb{
  background-color:#ece5d7;
  background-image:
    radial-gradient(rgba(120,105,80,0.22) 0.7px, transparent 0.8px),
    radial-gradient(rgba(120,105,80,0.16) 0.7px, transparent 0.8px),
    radial-gradient(rgba(255,255,255,0.5) 0.5px, transparent 0.6px);
  background-size:3px 3px,5px 5px,4px 4px;
  background-position:0 0,1px 2px,2px 1px;
}
/* Kellenwurf – grobe, geworfene Struktur mit Relief */
.mat-putz-kellenwurf{
  background-color:#e6ddca;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 20%, rgba(0,0,0,0.14) 0 3px, transparent 4px),
    radial-gradient(circle at 80% 60%, rgba(0,0,0,0.15) 0 2px, transparent 3px),
    radial-gradient(circle at 35% 75%, rgba(0,0,0,0.13) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.4) 0 2px, transparent 3px);
  background-size:14px 14px,18px 18px,12px 12px,16px 16px,10px 10px;
}
/* Geglättet / Filzputz – sehr ruhig, kaum Struktur */
.mat-putz-glatt{
  background-color:#efeae0;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.25), rgba(0,0,0,0.04)),
    radial-gradient(circle at 40% 40%, rgba(0,0,0,0.03), transparent 60%);
}
/* Kratzputz – feine vertikale Kratzspuren */
.mat-putz-kratz{
  background-color:#e7dfce;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 4px),
    radial-gradient(rgba(120,105,80,0.14) 0.6px, transparent 0.7px);
  background-size:auto,4px 4px;
}
/* Sichtbeton – glatt, mit Schalungsanker-Löchern im Raster */
.mat-sichtbeton{
  background-color:#adaca7;
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.30) 1.6px, transparent 2.4px),
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(0,0,0,0.06)),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.10), transparent 60%);
  background-size:52px 70px, auto, auto;
  background-position:12px 16px, 0 0, 0 0;
}
/* Holz horizontal – liegende Bretter */
.mat-holz-horiz{
  background-color:#a9855c;
  background-image: repeating-linear-gradient(0deg,
    #b08a5f 0 9px, #8f6c45 10px, #a9855c 11px, #9c7b52 18px);
}
/* Schalung mit Lücke – stehende Bretter, offene Fugen (dunkler Schatten) */
.mat-schalung-luecke{
  background-color:#7c6444;
  background-image: repeating-linear-gradient(90deg,
    #a9855c 0 16px, #55411f 17px 20px, #a9855c 21px 37px, #55411f 38px 41px);
}
/* Schalung ohne Lücke – stehende Bretter dicht, feine Fugen */
.mat-schalung-dicht{
  background-color:#9c7b52;
  background-image: repeating-linear-gradient(90deg,
    #a9855c 0 18px, #8a6b43 19px, #a9855c 20px 38px, #8a6b43 39px);
}

/* Zwischenüberschrift innerhalb einer Konzept-Kategorie */
/* =====================================================================
   Materialfamilien als Akkordeon: erst die Familie wählen (Vollabrieb,
   Sichtbeton, Holz …), dann darin die Variante. Zugeklappt zeigt der
   Kopf drei Miniaturen und — falls gewählt — ein Zähler-Etikett.
   ===================================================================== */
.konzeptGroup{
  border: 1px solid rgba(0,0,0,0.10);
  margin-bottom: 10px;
  background: #fff;
}
.konzeptGroup.hasSelection{ border-color: rgba(123,30,90,0.45); }

.konzeptGroupBtn{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: 0;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.konzeptGroupBtn:hover{ background: rgba(123,30,90,0.04); }
.konzeptGroupBtn:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }

.konzeptGroupPeek{
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
}
.konzeptGroupPeekItem{
  width: 26px;
  height: 26px;
  background-size: cover;
  background-position: center;
  background-color: #e9e6df;
  border: 1px solid rgba(0,0,0,0.08);
}
.konzeptGroupPeekItem.putzFlaeche{ background-size: 52px 52px; }
/* Ausschnitt statt Verkleinerung — sonst wird die Struktur zu Grau */
.konzeptGroupPeekItem.eigenFlaeche{ background-size: 200% 200%; background-position: center; }

.konzeptGroupText{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.konzeptGroupName{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.konzeptGroupHint{
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.konzeptGroupTag{
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 8px;
  white-space: nowrap;
}
.konzeptGroupCount{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.konzeptGroupChev{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform 220ms ease;
}
.konzeptGroupChev svg{ width: 100%; height: 100%; display: block; }
.konzeptGroup.isOpen .konzeptGroupChev{ transform: rotate(180deg); }

.konzeptGroupBody{
  padding: 4px 14px 16px;
  border-top: 1px solid rgba(0,0,0,0.07);
}

.konzeptMehrfachHinweis{
  margin: 6px 0 0 !important;
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 560px){
  .konzeptGroupHint{ display: none; }
  .konzeptGroupPeekItem:nth-child(3){ display: none; }
  /* Auf dem Handy fressen die Innenabstände die Rasterbreite —
     schmaler gesetzt, damit zwei Kacheln nebeneinander passen. */
  .konzeptCategory{ padding: 18px 12px 14px; }
  .konzeptGroupBody{ padding: 4px 8px 12px; }
  .konzeptGroupBtn{ padding: 10px 8px; gap: 10px; }
  .konzeptOptions{ gap: 8px; }
  .konzeptOption h3{ margin: 0 10px 3px; }
  .konzeptOption p{ margin: 0 10px; }
}

.konzeptGroupLabel{
  margin: 22px 0 10px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--accent);
}
.konzeptGroupLabel:first-of-type{ margin-top: 4px; }

/* Referenzliste: Status-Filter, Status-Marke, Bausumme */
.referenzenFilterGroup{ display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.refSummeHead, .refSumme{ text-align: right; white-space: nowrap; }
.refSumme{
  color: var(--text); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  text-align: right; white-space: nowrap; padding-right: 0;
}
.referenzenTable th.refSummeHead{ text-align: right; padding-right: 0; }
@media (max-width: 640px){
  .refSummeHead, .refSumme{ display: none; }
  .referenzenFilterGroup{ gap: 10px; }
}

/* =====================================================================
   Regionale Karte: Kantone, Seen, Referenzorte, Projektorte
   Geometrie: Natural Earth (Public Domain).
   ===================================================================== */
/* Karte links, Referenzliste rechts. Die Karte bleibt beim Scrollen
   stehen, damit sie beim Durchgehen der Liste sichtbar bleibt. */
.referenzenLayout{
  /* Das Detailpanel neben der Liste ist entfallen — die Eckdaten klappen
     jetzt unter der jeweiligen Zeile auf. Die Liste hat die volle Breite. */
  display: block;
}
.referenzenLayout > .karte,
.referenzenLayout > .projektPanel{
  position: sticky;
  top: 120px;
  margin-bottom: 0;
}
.referenzenListe{ min-width: 0; }

/* ---- Detailpanel neben der Referenzliste --------------------------
   Steht dort, wo früher die Karte war. Eine Zeile anwählen füllt es. */
.projektPanel{
  border: 1px solid rgba(15,23,42,0.16);
  background: #fff;
}
.projektPanelInner{ display: flex; flex-direction: column; }
.projektPanelBild{
  position: relative;
  aspect-ratio: 4 / 3;
  background: #0b0d10;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.08) contrast(1.03);
}
/* Platzhalter für Projekte ohne Fotos — gleiche Gestaltung wie auf der
   Startseite, damit eine leere Bildfläche bewusst wirkt. */

.projektPanelNav{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.10);
}
.projektPanelBtn{
  width: 26px; height: 26px;
  display: grid; place-items: center;
  padding: 0; font: inherit; font-size: 15px; line-height: 1;
  background: transparent; color: var(--text);
  border: 1px solid rgba(15,23,42,0.22);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.projektPanelBtn:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }
.projektPanelZahl{
  font-size: 10px; letter-spacing: 0.16em; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

.projektPanelText{ padding: 16px 18px 18px; }
.projektPanelJahr{
  display: block; margin-bottom: 5px;
  font-size: 10px; letter-spacing: 0.26em; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.projektPanelText h3{
  margin: 0 0 4px;
  font-size: 19px; font-weight: 500; line-height: 1.2;
}
.projektPanelMeta{
  margin: 0;
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.projektPanelDaten{
  margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid rgba(15,23,42,0.12);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px;
}
.projektPanelDaten dt{
  font-size: 9px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 2px;
}
.projektPanelDaten dd{ margin: 0; font-size: 13px; font-weight: 500; }
.projektPanelBeschrieb{
  margin: 14px 0 0;
  font-size: 13px; line-height: 1.55; color: rgba(0,0,0,0.66);
  hyphens: auto; -webkit-hyphens: auto;
}
.projektPanelLeer{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 280px; padding: 30px; text-align: center;
  color: rgba(0,0,0,0.38);
}
.projektPanelLeer svg{ width: 40px; height: 40px; color: rgba(123,30,90,0.30); }
.projektPanelLeer p{ margin: 0; font-size: 13px; }

/* Noch offene Angabe — «?» zurückhaltend, damit die Lücke sichtbar ist,
   ohne die Liste unruhig zu machen. */
.refAuftrag{ white-space: nowrap; }

/* Gewählte Zeile in der Liste */
.refRow.isActive td{ background: rgba(123,30,90,0.09); }
.refRow.isActive .refName{ font-weight: 700; }

@media (max-width: 1100px){
  .referenzenLayout{ grid-template-columns: 1fr; gap: 30px; }
  .referenzenLayout > .karte,
  .referenzenLayout > .projektPanel{ position: static; }
}

.karteHead{
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(15,23,42,0.14);
}
.karteTitel{
  display: block;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--text);
}
.karteSub{ display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.karteReset{
  font: inherit; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; padding: 8px 14px; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
}
.karteReset:hover{ background: #66184b; }

.karteSvgWrap{
  position: relative;
  background: #f6f5f3;
  border: 1px solid rgba(15,23,42,0.10);
  overflow: hidden;
}
.karteSvg{ display: block; width: 100%; height: auto; }

/* Kantone: helle Flächen, feine weisse Grenzen */
.karteKanton{
  fill: #e6e3dd;
  stroke: #ffffff;
  stroke-width: calc(1.4px * var(--ks));
  stroke-linejoin: round;
}
/* Seen */
.karteSee{ fill: #c3d6e0; stroke: #9fbccb; stroke-width: 0.8; }
/* --ks setzt projekte-render.js aus der gemessenen Spaltenbreite.
   So bleibt die Schrift auf dem Bildschirm gleich gross, egal wie
   breit die Karte gerade ist. */
.karte{ --ks: 1; }
.karteSeeLabel{
  font-size: calc(11px * var(--ks)); font-style: italic; font-weight: 500;
  fill: #55707f; text-anchor: middle; pointer-events: none;
}

/* Referenzorte zur Orientierung */
.karteStadt circle{ fill: rgba(15,23,42,0.38); }
.karteStadt text{
  font-size: calc(11.5px * var(--ks)); fill: rgba(15,23,42,0.55); font-weight: 500;
  paint-order: stroke; stroke: #f6f5f3; stroke-width: calc(3px * var(--ks));
}
.karteStadt.isHaupt circle{ fill: rgba(15,23,42,0.80); }
.karteStadt.isHaupt text{ fill: rgba(15,23,42,0.85); font-weight: 700; font-size: calc(12.5px * var(--ks)); }

/* Projektorte */
.karteOrt{ cursor: pointer; }
/* Der Lichthof ist reine Zier. Ohne pointer-events:none deckt er die
   Nachbarorte zu und verschluckt deren Klicks (Bern, Bremgarten …). */
.karteHalo{ fill: rgba(123,30,90,0.12); transition: fill 180ms ease; pointer-events: none; }
.karteDot{ fill: var(--accent); stroke: #fff; stroke-width: calc(1.6px * var(--ks)); }
.karteCount{
  font-size: calc(10px * var(--ks)); font-weight: 700; fill: #fff;
  text-anchor: middle; pointer-events: none;
}
.karteLabel{
  font-size: calc(12px * var(--ks)); font-weight: 700; fill: var(--text);
  text-anchor: middle; pointer-events: none;
  opacity: 0; transition: opacity 160ms ease;
  paint-order: stroke; stroke: #f6f5f3; stroke-width: calc(3.5px * var(--ks));
}
.karteOrt:hover .karteLabel,
.karteOrt:focus .karteLabel,
.karteOrt.isActive .karteLabel{ opacity: 1; }
.karteOrt:hover .karteHalo{ fill: rgba(123,30,90,0.24); }
.karteOrt:focus{ outline: none; }
.karteOrt:focus .karteDot{ stroke: var(--accent); stroke-width: 3; }

.karte.hasSelection .karteOrt{ opacity: 0.32; }
.karte.hasSelection .karteOrt.isActive{ opacity: 1; }
.karteOrt.isActive .karteHalo{ fill: rgba(123,30,90,0.30); }

/* Übersichtskarte: wo liegt der Ausschnitt in der Schweiz */
.karteInset{
  position: absolute; left: 12px; top: 12px;
  width: 130px; height: auto;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.14);
  padding: 5px;
}
.karteInsetLand{ fill: #dedbd5; stroke: rgba(15,23,42,0.35); stroke-width: 1.2; }
.karteInsetRect{ fill: rgba(123,30,90,0.18); stroke: var(--accent); stroke-width: 2; }

.karteHinweis{ margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }

@media (max-width: 640px){
  /* Schriftgrössen regelt --ks; hier bleibt nur die Übersichtskarte. */
  .karteInset{ width: 92px; left: 8px; top: 8px; }
}

/* =====================================================================
   Startseite: Projekte als zwei grosse Zeilen (abgeschlossen / laufend).
   Spiegelverkehrt, alle Projekte durchschaltbar.
   ===================================================================== */
.pfRow{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 26px 0;
}
.pfRow + .pfRow{ border-top: 1px solid rgba(15,23,42,0.14); }
/* Zweite Zeile gespiegelt: Text links, Bild rechts */
.pfRow--medienRechts .pfMedia{ order: 2; }
.pfRow--medienRechts .pfBody{ order: 1; }

/* --- Medien --- */
.pfMedia{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0b0d10;
}
.pfSlide{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(0.12) contrast(1.03);
  opacity: 0; transition: opacity 500ms ease;
}
.pfSlide.isActive{ opacity: 1; }

/* Platzhalter, wenn kein Bild vorhanden ist — bewusst gestaltet, nie leer */
.pfSlide--leer{
  background:
    linear-gradient(135deg, #f6f4f1 0%, #ece8e2 100%);
}

/* --- Textseite --- */
.pfBody{ min-width: 0; }
.pfKicker{
  display: block; margin-bottom: 12px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 700; color: var(--accent);
}
.pfLead{
  margin: 0 0 18px;
  font-size: 16px; line-height: 1.6; color: rgba(0,0,0,0.66);
  max-width: 460px;
}
.pfLead strong{
  display: inline-block; margin-right: 6px;
  font-size: clamp(34px, 4vw, 52px); line-height: 1;
  font-weight: 300; letter-spacing: -0.02em; color: var(--text);
  vertical-align: -6px; font-variant-numeric: tabular-nums;
}

/* Ein Projekt sichtbar, die übrigen ausgeblendet */
.pfInfo{ position: relative; min-height: 108px; }
.pfItem{
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 340ms ease, transform 340ms ease;
}
.pfItem.isActive{ opacity: 1; visibility: visible; transform: none; position: relative; }
.pfJahr{
  display: block; margin-bottom: 6px;
  font-size: 10px; letter-spacing: 0.26em; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.pfItem h3{
  margin: 0 0 6px;
  font-size: clamp(20px, 2vw, 27px); line-height: 1.1;
  font-weight: 300; letter-spacing: -0.01em;
}
.pfItem h3 a{ color: inherit; text-decoration: none; }
.pfItem h3 a:hover{ color: var(--accent); text-decoration: none; }
.pfMeta{
  display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.pfSumme{
  display: block; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* --- Navigation --- */
.pfNav{
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,0.14);
}
.pfCtrl{
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  background: transparent; color: var(--text);
  border: 1px solid rgba(15,23,42,0.22);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.pfCtrl:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }
.pfCount{
  min-width: 54px; text-align: center;
  font-size: 11px; letter-spacing: 0.14em; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.pfAlle{
  margin-left: auto;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--accent); text-decoration: none;
}
.pfAlle span{ display: inline-block; transition: transform 200ms ease; }
.pfAlle:hover{ text-decoration: none; }
.pfAlle:hover span{ transform: translateX(5px); }

@media (max-width: 900px){
  .pfRow{ grid-template-columns: 1fr; gap: 26px; padding: 32px 0; }
  .pfRow--medienRechts .pfMedia{ order: 1; }
  .pfRow--medienRechts .pfBody{ order: 2; }
  .pfLead{ margin-bottom: 22px; }
  .pfInfo{ min-height: 112px; }
}

/* =====================================================================
   Partner: Suchleiste, Sortierung, BKP-Angaben
   ===================================================================== */
.partnerBar{
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  padding-bottom: 18px; margin-bottom: 24px;
  border-bottom: 1px solid rgba(15,23,42,0.14);
}
.partnerSuche{
  flex: 1 1 340px; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: #fff; border: 1px solid rgba(15,23,42,0.18);
  transition: border-color 180ms ease;
}
.partnerSuche:focus-within{ border-color: var(--accent); }
.partnerSuche svg{ width: 16px; height: 16px; flex: none; color: var(--muted); }
.partnerSuche input{
  flex: 1; min-width: 0;
  font: inherit; font-size: 13.5px; color: var(--text);
  background: transparent; border: none; outline: none;
}
.partnerSuche input::placeholder{ color: rgba(0,0,0,0.38); }

.partnerSort{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.partnerSortLabel{
  margin-right: 4px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.partnerSortBtn{
  font: inherit; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; padding: 8px 14px; cursor: pointer;
  background: #fff; color: var(--muted); border: 1px solid rgba(15,23,42,0.18);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.partnerSortBtn:hover{ color: var(--accent); border-color: var(--accent); }
.partnerSortBtn.isActive{ background: var(--accent); border-color: var(--accent); color: #fff; }

.partnerCount{
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Ort */
.partnerOrt{
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 10px;
  font-size: 11.5px; font-weight: 500; color: var(--muted);
}
.partnerOrt svg{ width: 13px; height: 13px; flex: none; color: var(--accent); }

/* BKP-Angaben */
.partnerBkp{ list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 5px; }
.partnerBkp li{
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11.5px; line-height: 1.35;
}
.bkpNr{
  flex: none; padding: 2px 6px;
  font-size: 9px; letter-spacing: 0.10em; font-weight: 700;
  color: var(--accent); border: 1px solid rgba(123,30,90,0.28);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bkpGattung{ color: rgba(0,0,0,0.62); min-width: 0; }

.partnerText{ margin: 0 0 auto; }

.partnerLeer{
  margin: 8px 0 0; padding: 26px;
  text-align: center; font-size: 13px; color: var(--muted);
  border: 1px dashed rgba(15,23,42,0.20);
}

@media (max-width: 720px){
  .partnerBar{ gap: 12px; }
  .partnerSuche{ flex: 1 1 100%; }
  .partnerSort{ flex: 1 1 auto; }
  .partnerCount{ margin-left: auto; }
  .partnerSortBtn{ padding: 8px 11px; }
}

/* =====================================================================
   Kontaktseite kompakt auf schmalen Screens
   ===================================================================== */
@media (max-width: 760px){
  .kontaktSection{ padding-top: 30px; padding-bottom: 40px; }
  .kontaktLeft{ gap: 16px; }

  /* Aktionskarten werden zu flachen Zeilen: Icon links, Text rechts */
  .kontaktActions{ grid-template-columns: 1fr; gap: 10px; }
  .kontaktAction{
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-areas: "icon label" "icon value";
    align-items: center;
    column-gap: 14px; row-gap: 2px;
    padding: 14px 16px;
  }
  .kontaktActionIcon{ grid-area: icon; width: 26px; height: 26px; margin: 0; }
  .kontaktActionLabel{
    grid-area: label; margin: 0;
    font-size: 9px; letter-spacing: 0.20em;
  }
  .kontaktActionValue{ grid-area: value; font-size: 15px; margin: 0; }
  .kontaktActionHint{ display: none; }   /* der Text erklärt sich selbst */

  /* Info-Blöcke: zwei nebeneinander statt drei untereinander */
  .kontaktBlocks{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kontaktBlock{ padding: 16px 14px; }
  .kontaktBlock--cta{ grid-column: 1 / -1; }   /* Konzept-Hinweis über volle Breite */
  .kontaktBlock h3{ font-size: 11px; margin-bottom: 8px; }
  .kontaktHours dt, .kontaktHours dd{ font-size: 11.5px; }
  .kontaktLinks li{ font-size: 12px; }

  .kontaktMapWrap{ min-height: 240px; }
  .kontaktMap{ min-height: 240px; }
}

@media (max-width: 460px){
  .kontaktBlocks{ grid-template-columns: 1fr; }
  .kontaktMapWrap{ min-height: 200px; }
  .kontaktMap{ min-height: 200px; }
}

/* =====================================================================
   Putzstrukturen: selbst gerendertes Graustufen-Relief.
   Die gewählte RAL/NCS-Farbe wird per multiply darübergelegt — so trägt
   dieselbe Textur jeden Farbton. Ohne Farbwahl: gebrochenes Weiss.
   ===================================================================== */
.konzeptOptionImg.putzFlaeche{
  background-color: var(--putzfarbe, #efe9dd);
  background-blend-mode: multiply;
  background-size: 150px 150px;     /* ~120 mm Wand je Kachel */
  background-repeat: repeat;
  background-position: center;
  transition: background-color 260ms ease;
}
/* Wenn das Relief gewählt ist, etwas grösser zeigen */
.konzeptOption.isSelected .konzeptOptionImg.putzFlaeche{ background-size: 190px 190px; }

/* Selbst gerenderte Texturen mit eingebackener Farbe (Bleche, Sichtbeton).
   Kein multiply — Glanzlichter müssen aufhellen dürfen. */
.konzeptOptionImg.eigenFlaeche{
  background-size: 190px 190px;
  background-repeat: repeat;
  background-position: center;
}
.konzeptOption.isSelected .konzeptOptionImg.eigenFlaeche{ background-size: 240px 240px; }

/* =====================================================================
   Gezeichnete Ansichten (Geländer u.ä.): eine Darstellung, kein Muster.
   Darum immer ganz zeigen (contain) statt kacheln.
   ===================================================================== */
.bildFlaeche{
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-color: #f2f0ec;
}

/* =====================================================================
   Pläne: Marker (Nummer-Pin / Pfeil+Etikett), Editor und Upload-Liste.
   Die Marker-Klassen gelten am Bildschirm (Editor) wie im PDF (Planseite).
   ===================================================================== */
.planMarkerLayer{ position: absolute; inset: 0; pointer-events: none; }
.planMarkerLayer .planMarker{ pointer-events: auto; }

.planMarker{ position: absolute; z-index: 2; }
.planMarker.pin{
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
/* Pfeil: Spitze sitzt exakt am Punkt (0,0), Schaft zeigt nach aussen. */
.planMarker.arrow{ width: 0; height: 0; }
.planMarker.arrow .pmUnit{
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
}
.planMarker.arrow .pmHead{
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 9px solid var(--accent);
  transform: translateY(-5px);
}
.planMarker.arrow .pmShaft{
  position: absolute;
  left: 8px; top: 0;
  width: 52px;
  border-top: 2px solid var(--accent);
  transform: translateY(-1px);
}
.planMarker.arrow .pmLabel{
  position: absolute;
  left: 0; top: 0;
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.planMarkerLayer .planMarker{ cursor: grab; touch-action: none; }
.planMarkerLayer .planMarker:active{ cursor: grabbing; }

/* ---- Upload-Liste im Steuerbereich ---- */
.kdoPlanListe{ display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.kdoPlanItem{ display: flex; align-items: center; gap: 10px; }
.kdoPlanThumb{
  width: 54px; height: 40px;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 6px;
  background: #f2f0ec center / cover no-repeat;
  cursor: pointer;
  padding: 0;
}
.kdoPlanThumb:hover{ border-color: var(--accent); }
.kdoPlanName{ flex: 1 1 auto; font-size: 13px; color: #333; }

/* ---- Editor-Dialog ---- */
.planEditor{
  width: min(1120px, 95vw);
  max-width: 95vw;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(20,16,18,0.4);
  overflow: hidden;
}
.planEditor::backdrop{ background: rgba(20,16,18,0.6); }
.planEditorKopf{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.planEditorTitel{ flex: 1 1 auto; }
.planEditorClose{
  flex: 0 0 auto;
  padding: 8px 18px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.planEditorBody{
  display: flex;
  gap: 0;
  max-height: calc(92vh - 62px);
}
.planStage{
  position: relative;
  display: inline-block;
  flex: 1 1 auto;
  align-self: flex-start;
  max-width: 100%;
  margin: 16px;
  line-height: 0;
  cursor: crosshair;
}
.planStageImg{
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 100px);
  user-select: none;
}
.planSeite{
  flex: 0 0 290px;
  border-left: 1px solid rgba(0,0,0,0.1);
  padding: 14px;
  overflow-y: auto;
  background: #faf8f6;
}
.planSeiteHint{ font-size: 12.5px; color: #666; margin: 0 0 12px; line-height: 1.4; }
.planLeer{ font-size: 13px; color: #888; font-style: italic; }
.planMarkerListe{ display: flex; flex-direction: column; gap: 12px; }
.planMarkerRow{
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pmrKopf{ display: flex; align-items: center; gap: 8px; }
.pmrNum{
  flex: 0 0 auto;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pmrTyp{ display: inline-flex; border: 1px solid rgba(0,0,0,0.2); border-radius: 6px; overflow: hidden; }
.pmrTyp button{
  padding: 4px 10px;
  border: 0;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.pmrTyp button.isActive{ background: var(--accent); color: #fff; }
.pmrDel{
  margin-left: auto;
  width: 24px; height: 24px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.pmrDel:hover{ border-color: #b3261e; color: #b3261e; }
.pmrSel, .pmrFrei{ width: 100%; font-size: 13px; }
.pmrDirs{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pmrDirs button{
  padding: 4px 0;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}
.pmrDirs button.isActive{ background: var(--accent); color: #fff; border-color: var(--accent); }

@media (max-width: 720px){
  .planEditorBody{ flex-direction: column; max-height: calc(92vh - 62px); overflow-y: auto; }
  .planSeite{ flex: 1 1 auto; border-left: 0; border-top: 1px solid rgba(0,0,0,0.1); }
}

/* =====================================================================
   Eigene Materialien und eigene Unterkapitel
   ===================================================================== */
.konzeptEigenAdd{
  margin-top: 10px;
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px dashed var(--accent);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.konzeptEigenAdd:hover{ background: var(--accent); color: #fff; border-style: solid; }

/* Löschen-Knopf auf einer eigenen Kachel */
.konzeptEigenDel{
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.9);
  color: #666;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease;
}
.konzeptOptionWrap:hover .konzeptEigenDel{ opacity: 1; }
.konzeptEigenDel:hover{ border-color: #b3261e; color: #b3261e; }
@media (hover: none){ .konzeptEigenDel{ opacity: 1; } }

/* Dialog */
.eigenDialog{
  width: min(520px, 94vw);
  padding: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(20,16,18,0.4);
}
.eigenDialog::backdrop{ background: rgba(20,16,18,0.6); }
.eigenForm{ display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.eigenTitel{ margin: 0; font-size: 17px; }
.eigenKat{
  margin: -6px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.eigenFeld{ display: flex; flex-direction: column; gap: 5px; }
.eigenFeld > span{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.eigenFeld textarea{ resize: vertical; font: inherit; }
.eigenBildZeile{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eigenVorschau{
  width: 64px;
  height: 44px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 6px;
  background: #f2f0ec center / cover no-repeat;
}
.eigenVorschau[hidden]{ display: none; }
.eigenFarbe{ display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #555; }
.eigenAktionen{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* =====================================================================
   SEITENÜBERGÄNGE · STARTSEITEN-RHYTHMUS · PARTNER-RASTER
   (ganz unten lassen — überschreibt bewusst weiter oben Stehendes)
   ===================================================================== */

:root{
  --pageWipe: cubic-bezier(.76, 0, .24, 1);
  --headerOffset: 110px;      /* fixer Header: Platz beim Anker- und Snap-Sprung */
}

/* ---------- 1. Seitenübergang ----------------------------------------
   Der Vorhang traegt Logo und Titel. Beim Ankommen steht er als echtes
   Markup hinter <body> — so liegt er schon beim ersten Paint und nichts
   blitzt durch; er faehrt per CSS nach oben weg. Beim Weggehen baut
   main.js dieselbe Struktur nach und laesst sie hochfahren. */
.pageCurtain{
  position: fixed;
  inset: -25vh -25vw;
  z-index: 9998;
  background: var(--accent);
  pointer-events: none;
  display: grid;
  place-items: center;
  transform: translateY(160%) rotate(-3deg);
  transition: transform 620ms var(--pageWipe);
}
.pageCurtain.isIn{ transform: translateY(0) rotate(-3deg); }

/* Der Inhalt steht gerade, waehrend die Flaeche schraeg liegt. */
.pageCurtainInner{
  transform: rotate(3deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  text-align: center;
}
.pageCurtainLogo{
  width: min(340px, 62vw);
  height: auto;
  display: block;
}
.pageCurtainTitel{
  font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.32);
}

/* Ankommen: Flaeche faehrt hoch, Logo verblasst etwas frueher. */
.pageCurtain--intro{
  animation: pageReveal 820ms var(--pageWipe) both;
}
.pageCurtain--intro .pageCurtainInner{
  animation: pageRevealInner 460ms ease both;
}
@keyframes pageReveal{
  0%   { transform: translateY(0)     rotate(-3deg); }
  100% { transform: translateY(-160%) rotate(-3deg); }
}
@keyframes pageRevealInner{
  0%   { opacity: 1; transform: rotate(3deg) translateY(0); }
  100% { opacity: 0; transform: rotate(3deg) translateY(-18px); }
}

/* Weggehen: Logo kommt mit, sobald die Flaeche steht. */
.pageCurtain:not(.pageCurtain--intro) .pageCurtainInner{
  opacity: 0;
  transform: rotate(3deg) translateY(18px);
  transition: opacity 300ms ease 180ms, transform 300ms ease 180ms;
}
.pageCurtain.isIn .pageCurtainInner{
  opacity: 1;
  transform: rotate(3deg) translateY(0);
}

@media print{
  .pageCurtain{ display: none !important; }
}
@media (prefers-reduced-motion: reduce){
  .pageCurtain--intro{ display: none; }
  .pageCurtain{ transition: none; }
  .pageCurtain .pageCurtainInner{ transition: none; }
}

/* ---------- 2. Startseite: mehr Luft zwischen den Abschnitten -------- */
body:has(.hero) .section{
  /* Deutlich mehr Luft: die Kapitel sollen sich voneinander absetzen. */
  padding: clamp(76px, 9vw, 150px) 0 clamp(84px, 10vw, 168px);
}
/* Trennlinie zwischen den Kapiteln — der Farbwechsel allein trug zu wenig. */
body:has(.hero) .section + .section{
  border-top: 1px solid rgba(15,23,42,0.09);
}

/* ---------- 4. Partner: kompaktes Raster in einem Rahmen -------------
   60 Partner passten vorher nie auf eine Seite. Kleine Kacheln (Logo,
   Name, Ort) in einem scrollbaren Rahmen halten den Abschnitt auf
   Bildschirmhoehe; Beschreibung und BKP-Liste bleiben ueber die Suche
   auffindbar, weil die Suchbegriffe in data-suche am Artikel haengen. */
.partnerFrame{
  border: 1px solid rgba(15,23,42,0.16);
  background: #fff;
  padding: 14px;
  max-height: min(58svh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;      /* Seite scrollt nicht mit weiter */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
}
.partnerFrame::-webkit-scrollbar{ width: 8px; }
.partnerFrame::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 4px;
}

.partnerGrid{
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.partnerCard{
  padding: 12px 12px 10px;
  gap: 2px;
  align-items: center;
  text-align: center;
}
.partnerLogo{
  height: 44px;
  width: 100%;
  margin-bottom: 8px;
  place-items: center;
}
.partnerLogo:has(img){ justify-items: center; }
.partnerLogo img{ max-height: 32px; max-width: 100%; }
.partnerLogo--dark{ padding: 6px 10px; }
.partnerLogo--dark img{ max-height: 28px; }
.partnerLogo--text{ justify-items: center; }
.partnerWordmark{ font-size: 16px; }
.partnerWordmark--sm{ font-size: 13px; }

.partnerCard h3{
  font-size: 11.5px;
  letter-spacing: 0.06em;
  margin: 0 0 3px;
  line-height: 1.25;
}
.partnerRole{
  font-size: 9px;
  letter-spacing: 0.10em;
  margin: 0 0 4px;
  line-height: 1.3;
}
.partnerOrt{ font-size: 10px; margin: 0; justify-content: center; }

/* In der kompakten Kachel kein Platz — Inhalt bleibt aber durchsuchbar. */
.partnerCard .partnerBkp,
.partnerCard .partnerText,
.partnerCard .partnerLink{ display: none; }

@media (max-width: 1100px){
  .partnerGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .partnerFrame{ max-height: 62svh; padding: 10px; }
  .partnerGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .partnerCard{ padding: 9px 7px 8px; }
  .partnerLogo{ height: 34px; margin-bottom: 6px; }
  .partnerLogo img{ max-height: 24px; }
  .partnerCard h3{ font-size: 10px; letter-spacing: 0.03em; }
  .partnerRole{ display: none; }
  .partnerOrt{ font-size: 9px; }
  .partnerWordmark{ font-size: 12px; }
  .partnerWordmark--sm{ font-size: 10px; }
}

/* ---------- 5. Startseite: Kapitel voneinander abheben ---------------
   Vorher sahen Leistungen, Projekte und Partner identisch aus: gleiche
   weisse Flaeche, gleicher Kopf. Jetzt trennt sie eine Kapitelnummer,
   ein eigener Grundton und eine eigene Akzentfarbe an der Kopflinie. */
body:has(.hero){ counter-reset: kapitel; }
body:has(.hero) .section{
  counter-increment: kapitel;
  position: relative;
}

/* Kapitelnummer als Kicker ueber der Headline. */
body:has(.hero) .sectionHeadTitle h2::before{
  content: counter(kapitel, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.34em;
  color: var(--kapitelFarbe, var(--accent));
}
body:has(.hero) .section .sectionHead::before{
  height: 2px;
  background: var(--kapitelFarbe, var(--accent));
}

/* Kapitelfarben — exakt die Werte, die die Kacheln schon tragen
   (.tile--beratung / .tile--planung / .tile--bauleitung). Vorher standen
   hier eigene, knapp danebenliegende Toene; das las sich wie ein Fehler. */
body:has(.hero) .tilesSection{    --kapitelFarbe: var(--herbst1); }
body:has(.hero) .projekteSection{ --kapitelFarbe: var(--herbst2); }
body:has(.hero) .partnerSection{  --kapitelFarbe: var(--herbst3); }

/* Ruhige Flaechen. Punktraster, Schraffur und Gitternetz sind wieder
   raus — sie machten die Seite unruhig. Die Kapitel unterscheiden sich
   ueber ihre Farbe an Nummer und Kopflinie sowie ueber den Aufbau. */
body:has(.hero) .section{ background: var(--surface1); }
body:has(.hero) .projekteSection{ background: var(--surface2); }

body:has(.hero) .partnerSection .partnerFrame{
  border-color: color-mix(in srgb, var(--kapitelFarbe) 32%, transparent);
  background: var(--surface1);
}
/* ---------- 6. Projekte: ein grosses Bildfenster ---------------------
   Vorher drei Kategorie-Kacheln. Jetzt eine Flaeche, durch die man alle
   Projektbilder blaettert — die Kategorie bleibt als Link in der
   Bildunterschrift erhalten. */
.projektSlider{
  position: relative;
  margin-top: 8px;
  border: 1px solid rgba(15,23,42,0.14);
  background: #0e1013;
}
.projektSliderBuehne{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.projektSlide{
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 620ms ease, visibility 0s linear 620ms;
}
.projektSlide.isActive{
  opacity: 1;
  visibility: visible;
  transition: opacity 620ms ease;
}
.projektSlideBild{
  position: absolute;
  inset: 0;
  background: #0e1013 center / cover no-repeat;
}
/* Verlauf, damit die Schrift auf hellen wie dunklen Bildern traegt */
.projektSlideText{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 60px 30px 26px;
  background: linear-gradient(rgba(14,16,19,0), rgba(14,16,19,0.82));
  color: #fff;
}
.projektSlideKat{
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,0.45);
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
}
.projektSlideKat:hover{ background: #fff; color: #14171c; text-decoration: none; }
.projektSlideName{ font-size: 21px; font-weight: 500; line-height: 1.2; }
.projektSlideMeta{
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

/* Blaetterknoepfe */
.projektSliderBtn{
  position: absolute;
  top: calc(50% - 46px);
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  padding: 0;
  font: inherit; font-size: 24px; line-height: 1;
  color: #14171c;
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: none;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.projektSliderBtn:hover{ background: var(--kapitelFarbe, var(--accent)); color: #fff; }
.projektSliderBtn--prev{ left: 16px; }
.projektSliderBtn--next{ right: 16px; }

/* Zaehler und Punkte unter dem Bild */
.projektSliderFuss{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  background: #fff;
  border-top: 1px solid rgba(15,23,42,0.12);
}
.projektSliderZaehler{
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--kapitelFarbe, var(--accent));
  font-variant-numeric: tabular-nums;
  flex: none;
}
.projektSliderPunkte{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.projektSliderPunkt{
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  background: rgba(15,23,42,0.22);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.projektSliderPunkt:hover{ background: rgba(15,23,42,0.45); }
.projektSliderPunkt.isActive{
  background: var(--kapitelFarbe, var(--accent));
  transform: scale(1.35);
}

@media (max-width: 860px){
  .projektSliderBuehne{ aspect-ratio: 4 / 3; }
  .projektSlideText{ padding: 46px 18px 18px; }
  .projektSlideName{ font-size: 17px; }
  .projektSlideMeta{ font-size: 10px; letter-spacing: 0.10em; }
  .projektSliderBtn{ width: 38px; height: 38px; font-size: 20px; }
  .projektSliderBtn--prev{ left: 10px; }
  .projektSliderBtn--next{ right: 10px; }
  .projektSliderFuss{ padding: 11px 13px; }
}
@media (prefers-reduced-motion: reduce){
  .projektSlide{ transition: none; }
}

/* ---------- 7. Der Knopf zur Unterseite am Kapitelfuss --------------
   Stand vorher unter der Ueberschrift im Kopf. Dort musste man sich
   entscheiden, bevor man die Kacheln gesehen hatte; jetzt schliesst er
   das Kapitel ab. */
.sectionFuss{
  display: flex;
  justify-content: center;
  margin-top: 54px;
}
body:has(.hero) .sectionFuss .tilesAllLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: none;
  margin: 0;
  padding: 16px 34px;
  border: 2px solid var(--kapitelFarbe, var(--accent));
  color: var(--kapitelFarbe, var(--accent));
  font-weight: 700;
  transition: background 240ms ease, color 240ms ease;
}
body:has(.hero) .sectionFuss .tilesAllLink:hover{
  background: var(--kapitelFarbe, var(--accent));
  color: #fff;
  text-decoration: none;
}
.sectionFuss .tilesAllLink span{ transition: transform 220ms ease; }
.sectionFuss .tilesAllLink:hover span{ transform: translateX(5px); }

@media (max-width: 860px){
  .sectionFuss{ margin-top: 26px; }
  body:has(.hero) .sectionFuss .tilesAllLink{ padding: 14px 24px; width: 100%; }
}

/* =====================================================================
   PROJEKTE-UNTERSEITE: ruhigere Liste, klarere Rangfolge
   Vorher lagen Ort, Auftraggeber und Leistung im selben Grauton — beim
   Ueberfliegen verschwamm alles. Jetzt traegt der Projektname die Zeile,
   die Nebenangaben treten zurueck.
   ===================================================================== */
.referenzenTable td{
  padding: 11px 10px 11px 0;            /* mehr Luft je Zeile */
  vertical-align: baseline;
}
.refZeit{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(123,30,90,0.85);
}
.refName{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.refRegion{
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.50);
}
.refAuftrag,
.refLeistung{
  font-size: 12px;
  color: rgba(0,0,0,0.52);
}
.refSumme{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Leere Zellen bleiben leer — kein «?», kein Platzhalterzeichen. */

.refRow--linked:hover td{ background: rgba(123,30,90,0.045); }
.refRow.isActive td{ background: rgba(123,30,90,0.085); }
.refRow.isActive .refZeit{ color: var(--accent); }

/* ---- Detailkarte ohne Foto: der Text fuellt die Karte allein ---- */
.projektPanelInner--ohneBild .projektPanelText{
  padding: 22px 22px 24px;
  border-top: 3px solid var(--accent);
}
.projektPanelInner--ohneBild .projektPanelText h3{
  font-size: 22px;
  margin-bottom: 6px;
}

/* =====================================================================
   PROJEKTE-UNTERSEITE: Zeile klappt an Ort und Stelle auf
   ===================================================================== */
.refRow--linked{ cursor: pointer; }
.refPfeil{
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 10px;
  border-right: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg) translateY(-1px);
  transition: transform 220ms ease;
}
.refRow.isActive .refPfeil{ transform: rotate(45deg) translateY(-2px); }

.refDetailRow > td{
  padding: 0 0 18px;
  border-top: none;
  background: color-mix(in srgb, var(--accent) 4%, #fff);
}
.refDetailInner{
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 20px 26px;
  align-items: start;
  padding: 18px 20px 6px;
  border-left: 3px solid var(--accent);
}
.refDetailInner:not(:has(.refDetailBild)){ grid-template-columns: minmax(0, 1fr); }

.refDetailBild{
  position: relative;
  aspect-ratio: 4 / 3;
  background: #0b0d10 center / cover no-repeat;
}
.refDetailNav{
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.55));
}
.refDetailBtn{
  width: 26px; height: 26px;
  display: grid; place-items: center;
  padding: 0; font: inherit; font-size: 15px; line-height: 1;
  background: rgba(255,255,255,0.9); color: var(--text);
  border: none; cursor: pointer;
}
.refDetailBtn:hover{ background: var(--accent); color: #fff; }
.refDetailZahl{
  font-size: 10px; letter-spacing: 0.16em; font-weight: 700;
  color: #fff; font-variant-numeric: tabular-nums;
}

.refDetailDaten{
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 24px;
}
.refDetailDaten dt{
  font-size: 9px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 3px;
}
.refDetailDaten dd{ margin: 0; font-size: 13.5px; font-weight: 500; }
.refDetailBeschrieb{
  margin: 14px 0 0;
  font-size: 13px; line-height: 1.6; color: rgba(0,0,0,0.66);
  max-width: 70ch;
}

/* Kleine Bildschirme: nur Zeitraum, Projekt, Ort und Bausumme.
   Auftraggeber und Leistung stehen dann in der aufgeklappten Zeile. */
@media (max-width: 860px){
  .refNebenSpalte{ display: none; }
  .referenzenTable td{ padding: 10px 8px 10px 0; }
  .refName{ font-size: 13px; }
  .refRegion{ font-size: 10px; letter-spacing: 0.08em; }
  .refSumme{ font-size: 11.5px; }
  .refDetailInner{
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 14px 4px;
  }
}

/* =====================================================================
   LEISTUNGSSEITE: TU-Angebot als Gruppe, SIA-Tabelle zum Ausklappen
   ===================================================================== */
/* Das TU-Angebot ist jetzt eine Leistungsgruppe und traegt den
   Markenton wie die uebrigen Bereiche. */
#tu-angebot{ --accent: var(--herbst1); --tile-tint: rgba(123,30,90,0.34); }
#tu-angebot .leistungenGroupNum{ letter-spacing: 0.06em; }
#tu-angebot .tuCta{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,23,42,0.12);
}
#tu-angebot .tuCta p{ margin: 0; font-size: 14px; color: rgba(0,0,0,0.68); }

/* Die Phasentabelle bleibt angekuendigt, oeffnet aber erst auf Klick —
   vorher frass sie eine ganze Bildschirmseite. */
.siaDetails{ min-width: 0; }
.siaSummary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid rgba(15,23,42,0.18);
  background: #fff;
  cursor: pointer;
  list-style: none;
  transition: border-color 220ms ease, background 220ms ease;
}
.siaSummary::-webkit-details-marker{ display: none; }
.siaSummary:hover{ border-color: var(--accent); }
.siaSummaryText{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.siaSummaryText strong{
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
}
.siaSummaryText span{ font-size: 12.5px; color: rgba(0,0,0,0.58); }
.siaSummaryIcon{
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 240ms ease;
}
.siaDetails[open] .siaSummaryIcon{ transform: rotate(-135deg) translateY(-2px); }
.siaDetails[open] .siaSummary{
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, #fff);
}
.siaDetails .siaTableWrap{ margin-top: 14px; }

/* =====================================================================
   FEINSCHLIFF: Schriftgroessen Header und Hero, Scroll-Hinweis
   (ganz unten lassen — ueberschreibt bewusst weiter oben Stehendes)
   ===================================================================== */

/* Header: Navigation und Logo eine Spur kleiner */
.nav{ font-size: 13px; letter-spacing: 0.12em; gap: 22px; }
.logo{ height: 46px; }

/* Hero: die ganze Typo eine Stufe zurueck */
.heroKicker{ font-size: 12px; letter-spacing: 0.26em; margin-bottom: 14px; }
.heroLead{ font-size: clamp(25px, 3.05vw, 45px); }
.heroPairTitle,
.heroPairAmp{ font-size: 26px; }
.heroPairAmp{ line-height: 26px; }
.heroPairIcon{ width: 34px; height: 34px; }
.heroMain.isMini .heroPairTitle,
.heroMain.isMini .heroPairAmp{ font-size: 15px; }
.heroMain.isMini .heroPairAmp{ line-height: 15px; }
.heroMain.isMini .heroPairIcon{ width: 28px; height: 28px; }

/* Scroll-Hinweis: nur Wort und Pfeil, direkt an der Unterkante.
   Akzentlinie, Glaspille und Kreis sind weg — sie machten aus einem
   Hinweis einen Knopf. */
.heroScroll{
  position: absolute;
  left: 0; right: 0;
  bottom: 20px;
  z-index: 5;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  text-decoration: none;
}
.heroScroll::before{ content: none; }
.heroScrollLabel{
  background: none;
  border: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
  font-size: 10px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(255,255,255,0.7);
  transition: opacity 220ms ease;
}
.heroScrollArrow{
  width: auto; height: auto;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.7));
}
.heroScrollArrow svg{ width: 22px; height: 22px; }
.heroScroll:hover .heroScrollLabel,
.heroScroll:hover .heroScrollArrow{ opacity: 0.72; }

@media (max-width: 860px){
  .nav{ font-size: 12px; }
  .logo{ height: 40px; }
  .heroScroll{ bottom: 14px; }
  .heroScrollLabel{ font-size: 9px; letter-spacing: 0.22em; }
  .heroScrollArrow svg{ width: 18px; height: 18px; }
}


/* Unterseiten ohne sichtbaren Seitentitel: die Ueberschrift bleibt fuer
   Bildschirmleser und Suchmaschinen erhalten, nur eben unsichtbar. Ganz
   weglassen haette die Seite ohne <h1> zurueckgelassen. */
.nurFuerLeser{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header niedriger -----------------------------------------
   Der Balken war 160px hoch. Alles, was daran haengt, zieht mit:
   der Vorlauf von .page, der Innenabstand des Heros und der Versatz
   beim Anker-Sprung. Sonst rutschen Sprungziele unter den Header. */
.headerInner{ height: 104px; }
.page{ padding-top: 104px; }
.heroContent{ padding-top: 118px; }

:root{ --headerOffset: 78px; }
/* Nur die echten Sprungziele — ein pauschales [id] haette jedem
   Element mit id einen Versatz verpasst, auch im Konzept-Werkzeug. */
.scrollAnchor,
.leistungenGroup,
#weiter, #partner, #referenzen,
#beratung, #planung, #bauleitung, #tu-angebot{
  scroll-margin-top: var(--headerOffset);
}

@media (max-width: 860px){
  .headerInner{ height: 80px; }
  .page{ padding-top: 80px; }
  .heroContent{ padding-top: 96px !important; }
  :root{ --headerOffset: 64px; }
}
@media (max-width: 520px){
  .headerInner{ height: 72px; }
  .page{ padding-top: 72px; }
  .heroContent{ padding-top: 80px !important; }
}

/* ---------- Hero: Groesse haelt auch im halben Fenster --------------
   Vorher clamp(25px, 3.05vw, 45px): im Vollbild 45px, im halben Fenster
   (rund 960px) nur noch 29px. Der hoehere Sockel und der steilere
   Anstieg lassen die Schrift schon ab etwa 1250px ihre volle Groesse
   erreichen — im Vollbild bleibt alles wie gehabt. */
.heroLead{ font-size: clamp(38px, 3.6vw, 45px); }
.heroPairTitle,
.heroPairAmp{ font-size: clamp(24px, 1.9vw, 26px); }
.heroPairAmp{ line-height: 1; }
.heroKicker{ font-size: clamp(11px, 0.9vw, 12px); }

/* Der ganze Hero-Inhalt ein Stueck tiefer */
.heroContent{ padding-top: 152px; }
@media (max-width: 860px){
  .heroContent{ padding-top: 118px !important; }
}
@media (max-width: 520px){
  .heroContent{ padding-top: 96px !important; }
}

/* Kapiteltitel der Startseite zweizeilig: «Unsere» darueber, das
   Schlagwort darunter. Auf den Unterseiten bleibt der Titel einzeilig,
   darum haengt die Regel an body:has(.hero). */
body:has(.hero) .sectionHeadTitle h2 .sectionHeadVorwort{
  display: block;
  font-size: 0.52em;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kapitelFarbe, var(--accent));
  margin-bottom: 4px;
}

/* =====================================================================
   EINWILLIGUNG: Banner und Karten-Vorschau
   ===================================================================== */
.einwilligung{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9990;
  background: rgba(22,25,31,0.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 2px solid var(--accent);
  color: #f2f1ef;
  animation: einwilligungRein 420ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes einwilligungRein{
  from{ transform: translateY(100%); }
  to  { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .einwilligung{ animation: none; }
}
.einwilligungInner{
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding: 22px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.einwilligungText{ flex: 1 1 420px; min-width: 0; }
.einwilligungText h2{
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
}
.einwilligungText p{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.74);
  max-width: 78ch;
}
.einwilligungText a{ color: #ffffff; text-decoration: underline; }
.einwilligungKnoepfe{ display: flex; gap: 10px; flex: none; flex-wrap: wrap; }
.einwilligungBtn{
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 14px 24px;
  cursor: pointer;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.einwilligungBtn:hover{ border-color: #fff; background: rgba(255,255,255,0.10); }
.einwilligungBtn--ja{ background: var(--accent); border-color: var(--accent); }
.einwilligungBtn--ja:hover{ background: #93266c; border-color: #93266c; }

@media (max-width: 860px){
  .einwilligungInner{ padding: 18px 0 20px; gap: 16px; }
  .einwilligungKnoepfe{ width: 100%; }
  .einwilligungBtn{ flex: 1 1 auto; padding: 13px 16px; }
}

/* Karten-Vorschau: liegt dort, wo sonst die Google-Karte steht, und
   laedt sie erst auf Klick. */
.karteVorschau{
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 220px;
  height: 100%;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.78);
  transition: background 220ms ease, border-color 220ms ease;
}
.karteVorschau:hover{ background: rgba(255,255,255,0.09); border-color: var(--accent); }
.karteVorschau.istGeladen{
  display: block;
  padding: 0;
  min-height: 0;
  border: none;
  background: none;
  cursor: default;
}
.karteVorschauIcon{ color: var(--accent); }
.karteVorschauIcon svg{ width: 30px; height: 30px; }
.karteVorschauText{
  font-size: 12px;
  line-height: 1.55;
  max-width: 34ch;
}
.karteVorschauText strong{
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 4px;
}

/* Der Weg zurueck zur Wahl im Fussbereich */
.footerEinwilligung{
  font: inherit;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* =====================================================================
   RECHTSSEITE (Datenschutz & Impressum): reiner Lesetext
   ===================================================================== */
/* Die Zeilenlaenge an den Absaetzen begrenzen, nicht am Container:
   sonst zentrieren dessen auto-Raender den ganzen Block und er steht
   nicht mehr auf der Fluchtlinie der Ueberschrift. */
.rechtText > *{
  max-width: 74ch;
}
.rechtText h2{
  margin: 42px 0 10px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}
.rechtText h2:first-child{ margin-top: 0; }
.rechtText h2::before{
  content: "";
  display: block;
  width: 38px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 14px;
}
.rechtText p{
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(0,0,0,0.74);
}
.rechtText a{ color: var(--accent); text-decoration: underline; }
.rechtText code{
  font-size: 13px;
  padding: 1px 5px;
  background: rgba(15,23,42,0.06);
}
.rechtStand{
  margin-top: 40px !important;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted) !important;
}