/* ============================================================
   TOPRAK HAUSTECHNIK — Designsystem «Werkplan» · Index D
   ------------------------------------------------------------
   Ruhig, minimal, klassisch (Referenz: Aman/Rüya):
   – durchgehend helle Grauflächen, keine dunklen Bänder
   – Graustufen-Palette, Pläne aus dem Portfolio in s/w
   – zentrierte Kompositionen, Haarlinien statt Boxen
   – PT Serif (Regular) + IBM Plex Mono für Annotationen
   ============================================================ */


/* ---------- Schriften (lokal, SIL Open Font License) ---------- */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-serif-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-serif-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-serif-700-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "PT Serif";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-serif-700-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-serif-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-serif-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-serif-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-serif-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* Graustufen */
  --paper:        #FFFFFF;   /* Seitenhintergrund, reinweiss (26.09.2026) */
  --paper-raised: #F7F7F4;   /* helle Flächen, Karten */
  --paper-deep:   #EFEFEC;   /* Footer, ruhige Bänder */
  --ink:          #111110;   /* Fliesstext, nahezu schwarz (26.09.2026) */
  --ink-soft:     #0B0B0A;   /* Überschriften */
  --ink-muted:    #4A4A45;   /* Sekundärtext, Annotationen */
  --line-strong:  #2A2A27;   /* Zeichnungslinien, Icons */
  --line-mid:     #6B6B64;   /* sekundäre Linien */
  --hairline:     #C9C8C3;
  --hairline-soft:#DCDBD6;

  /* Semantische Aliase (historisch farbig, jetzt grau) */
  --rot:          #2F2F2D;
  --rot-deep:     #1F1F1E;
  --blau:         #4A4A46;
  --gruen:        #8B8B85;
  --stahl:        #9A9A93;

  --plankopf:     #EFEFEC;
  --plankopf-line:#BDBDB7;
  --plankopf-text:#3A3A36;

  /* Typografie */
  --font-display: "PT Serif", "Times New Roman", Times, Georgia, serif;
  --font-body:    "PT Serif", "Times New Roman", Times, Georgia, serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  /* Raster */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 5rem;
  --space-6: 8rem;

  --maxw: 76rem;
  --radius: 0;
  --border: 1px solid var(--hairline);
}

/* ---------- Reset / Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--paper);
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0.008em;
  line-height: 1.18;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); }

p { margin: 0 0 var(--space-2); max-width: 44rem; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-mid); }
a:hover { text-decoration-color: var(--ink); }

:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 3px;
}

::selection { background: var(--ink); color: var(--paper); }

.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Mono-Beschriftungen (Plan-Annotationen) ---------- */

.mono,
.eyebrow,
.dim-label,
.nav-links a,
.plan-table th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Beschriftung über Titeln: natürlich gesetzt statt gesperrter Versalien */
.eyebrow,
.dim-label,
.mono {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  text-transform: none;
}
.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}
.eyebrow::before { align-self: center; }
.eyebrow-nr {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-right: -0.2rem;
}
.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--line-mid);
}
/* Linientypen je System — dezent, alles grau */
.eyebrow--rot::before   { background: var(--line-strong); }
.eyebrow--blau::before  { background: repeating-linear-gradient(90deg, var(--line-mid) 0 6px, transparent 6px 11px); }
.eyebrow--gruen::before { background: repeating-linear-gradient(90deg, var(--line-mid) 0 2px, transparent 2px 7px); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(236, 236, 234, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 5rem;
  transition: min-height 0.3s ease;
}

/* Beim Scrollen verdichtet sich der Header leicht */
.site-header.is-compact .container { min-height: 3.9rem; }
.site-header.is-compact .brand-logo { height: 2.7rem; }
.brand-logo { transition: height 0.3s ease; }

/* Feine Fortschrittslinie unter dem Header, wie eine Messlinie */
.scroll-progress {
  position: absolute;
  top: 100%;
  left: 0;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  color: var(--ink-soft);
  text-decoration: none;
}

/* Original-Logo (Icon | TH | Toprak Haustechnik) */
.brand-logo {
  height: 3.4rem;
  width: auto;
}
.brand-logo--footer { height: 4.2rem; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.brand-name .dot { color: var(--line-mid); }

.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.8rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--ink);
  padding-block: 0.4rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--line-mid); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--ink); }

.nav-cta {
  border: 1px solid var(--ink);
  padding: 0.6rem 1.3rem !important;
  transition: background 0.25s ease, color 0.25s ease;
}
.nav-cta:hover {
  background: var(--ink);
  color: var(--paper) !important;
  border-bottom-color: var(--ink) !important;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: var(--border);
    display: none;
    padding: var(--space-3);
  }
  .site-nav.is-open { display: block; }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-links li { border-bottom: 1px solid var(--hairline-soft); }
  .nav-links a {
    display: block;
    padding: 0.9rem 0.25rem;
    border-bottom: none;
  }
  .nav-links a[aria-current="page"] { color: var(--ink-soft); font-weight: 600; }
  .nav-cta {
    margin-top: var(--space-2);
    text-align: center;
    border-bottom: none;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1rem 2.2rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn:hover {
  background: var(--ink);
  color: var(--paper-raised);
}

.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-raised);
}
.btn--primary:hover {
  background: transparent;
  color: var(--ink);
}

.btn--light { border-color: var(--ink); color: var(--ink); }

.btn .arrow {
  font-family: var(--font-body);
  transition: transform 0.3s ease;
}
.btn:hover .arrow { transform: translateX(5px); }

/* Ruhige Bild-Hover: Rahmen und Bild reagieren kaum merklich */
.plan-gallery figure,
.ref-card {
  transition: border-color 0.35s ease;
}
.plan-gallery figure:hover,
.ref-card:hover { border-color: var(--line-mid); }
.plan-gallery img,
.ref-card .ref-figure img {
  transition: filter 0.5s ease;
}
.plan-gallery figure:hover img,
.ref-card:hover .ref-figure img { filter: brightness(1.05); }

/* ---------- Sektionen ---------- */

.section { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

/* Zentrierte, ruhige Sektionsköpfe */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.section-head p { margin-bottom: 0; color: var(--ink-muted); max-width: 38rem; }
/* Prominenter Einleitungssatz unter dem Titel */
.section-head .section-lead {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--ink);
  max-width: 44rem;
}
.section-head .btn { margin-top: var(--space-2); }
.section-head .eyebrow { margin-bottom: 0; }
.section-head .eyebrow::before { display: none; }
.section-head .eyebrow::after { display: none; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  border-bottom: var(--border);
  overflow: hidden;
  background: var(--paper-raised);
}

/* Plan-Diashow: Pläne blenden langsam ein und wieder aus
   (liegt jetzt hinter bildlosen Abschnitten, z.B. dem CTA-Band) */
.plan-slides {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.plan-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity, transform;
}

/* Durchgehender, fixierter Plan-Hintergrund für Abschnitte ohne
   Bilder. Fixe Anheftung → über alle Abschnitte hinweg dasselbe
   Planbild, ohne Nahtstellen zwischen den Sektionen. */
.section--plan { position: relative; }
.section--plan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/plan-hero.jpg") center / cover no-repeat fixed;
  opacity: 0.18;
  filter: saturate(1.8);
  pointer-events: none;
}
.section--plan > .container { position: relative; z-index: 1; }

@media (max-width: 820px) {
  /* Fixe Anheftung ruckelt auf Mobilgeräten → normal scrollen */
  .section--plan::before { background-attachment: scroll; }
}

/* Hero über die gesamte Breite: Text am Satzspiegel, Bild bis an den Rand */
.hero .container {
  position: relative;
  z-index: 1;
  max-width: none;
  min-height: min(84vh, 48rem);
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  align-items: stretch;
  gap: clamp(2rem, 4vw, 4.5rem);
  padding-block: 0;
  padding-inline: 0;
}
.hero-copy {
  padding-left: max(clamp(1.25rem, 4vw, 2.5rem), calc((100vw - 76rem) / 2));
  padding-block: clamp(3rem, 7vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.hero-copy h1 { max-width: 16ch; }

.hero-copy .lead {
  font-size: 1.1rem;
  color: var(--ink);
  max-width: 32rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Hero-Bild rechts: füllt die volle Höhe des Hero (kein weisser Rand
   oben/unten), links weich in den Grund eingeblendet */
.hero-visual {
  position: relative;
  display: block;
}
.hero-visual img {
  width: 100%;
  height: 100%;
  min-height: min(84vh, 48rem);
  object-fit: cover;
  object-position: 62% center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
}

@media (max-width: 900px) {
  .hero .container {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0;
  }
  .hero-copy {
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
    padding-block: clamp(3rem, 8vw, 4.5rem) var(--space-3);
  }
  .hero-visual img {
    height: min(48vh, 24rem);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%);
  }
}

/* ---------- Kernkompetenzen: Bild links (1:3), wie der Hero ---------- */

.komp-section { position: relative; overflow: hidden; }
/* Bild beginnt direkt am Faktenband: keine harte Bildkante im Planhintergrund */
.komp-section.section { padding-top: 0; }
.komp-section .komp-content { padding-top: clamp(2.5rem, 5vw, 3.75rem); }
.komp-section .container {
  max-width: none;
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 3rem);
}
/* Linkes Bild blutet an den linken Rand, rechts weicher Übergang */
.komp-media {
  position: relative;
  min-height: 26rem;
}
/* Bild füllt die volle Höhe der Spalte (kein Leerraum unten) */
.komp-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(90deg, #000 74%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 74%, transparent 100%);
}
/* Unterkante leicht ausblenden, damit keine harte Bildkante sichtbar ist */
.komp-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  background: linear-gradient(180deg, transparent 0%, var(--paper) 100%);
  pointer-events: none;
  z-index: 1;
}
.komp-content {
  padding-right: max(clamp(1.25rem, 4vw, 2.5rem), calc((100vw - 76rem) / 2));
  padding-block: var(--space-2);
}
.komp-content .section-head { align-items: flex-start; text-align: left; margin-bottom: var(--space-4); }

@media (max-width: 860px) {
  .komp-section .container { grid-template-columns: 1fr; }
  .komp-media { min-height: 0; }
  .komp-media img {
    position: static;
    height: 40vh;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .komp-media::after { display: none; }
  .komp-section .komp-content { padding-top: var(--space-3); }
  .komp-content {
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  }
}

.komp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4) var(--space-3);
}
.komp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.komp .komp-icon {
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: 0.4rem;
}
.komp h3 { margin-bottom: 0; font-size: 1.1rem; }
.komp p { font-size: 0.95rem; color: var(--ink-muted); margin-bottom: 0; }

/* Einzelnes gerahmtes Bild (Passepartout, zentriert) */
.plan-single {
  max-width: 56rem;
  margin: 0 auto var(--space-5);
  background: var(--paper-raised);
  border: var(--border);
  padding: var(--space-3);
}
.plan-single img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border: 1px solid var(--hairline-soft);
}
.plan-single figcaption {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  padding-top: 0.9rem;
}

/* Bild-Text-Kachel: Bild als gerahmte Kachel neben Inhalt.
   .media-split--rev dreht die Seiten (Bild rechts). */
.media-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.media-split--rev .media-figure { order: 2; }

.media-figure {
  margin: 0;
  background: var(--paper-raised);
  border: var(--border);
  padding: var(--space-2);
}
.media-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--hairline-soft);
  display: block;
}
.media-figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0.75rem;
}

/* Rahmenlose Bildkachel (ohne Passepartout/Rahmen) */
.media-figure--bare {
  background: none;
  border: none;
  padding: 0;
  overflow: hidden;
}
.media-figure--bare img {
  border: none;
  aspect-ratio: 3 / 2;
}

/* Effekt: sanfter Dauer-Zoom (Ken Burns) */
.fx-kenburns img {
  transform-origin: 60% 40%;
  animation: kenburns 20s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-kenburns img { animation: none; }
}
/* Effekt: Parallax beim Scrollen (per JS über [data-parallax]) */
.fx-parallax { overflow: hidden; }
.fx-parallax img { will-change: transform; }

/* Abschnitt mit wechselndem Plan-Hintergrund (nur lokal).
   Gefüllte, near-weisse Basis (nicht das graue --paper) → der Plan
   liegt auf einer vollen Fläche statt transparent zu wirken. */
.section--slides {
  position: relative;
  overflow: hidden;
  background: var(--paper-raised);
}
.section--slides > .container { position: relative; z-index: 1; }
.section--slides .plan-slides img { opacity: 0; }
/* Basis-Plan (auch ohne JS / bei reduzierter Bewegung sichtbar) */
.section--slides .plan-slides img:first-child { opacity: 0.26; }

/* Seiten-Kopf mit wechselndem Plan-Hintergrund (statt fixem Plan) */
.page-hero--slides::before { display: none; }
.page-hero--slides .plan-slides img { opacity: 0; }
.page-hero--slides .plan-slides img:first-child { opacity: 0.2; }

/* Gerahmtes Foto im Textfluss (z.B. Inhaber-Spalte) */
.inline-figure {
  margin: var(--space-3) 0 0;
  background: var(--paper-raised);
  border: var(--border);
  padding: var(--space-2);
}
.inline-figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--hairline-soft);
  display: block;
}
.inline-figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0.7rem;
}

/* Definitions-/Programmliste rechts der Kachel */
.media-list { display: block; }
.media-list .eyebrow { margin-bottom: var(--space-2); }
.media-list h2 { margin-bottom: var(--space-3); }
.spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.spec-list li {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: 0.5rem 1.5rem;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.spec-list li:last-child { border-bottom: 1px solid var(--hairline); }
.spec-list .spec-term {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.spec-list .spec-desc {
  font-size: 0.95rem;
  color: var(--ink-muted);
}

/* Büro: Porträt und Werdegang des Inhabers */
.inhaber-portrait {
  margin: 0 0 var(--space-3);
  max-width: 18rem;
  border: var(--border);
  background: var(--paper-raised);
  padding: var(--space-1);
}
.inhaber-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.werdegang { margin-top: var(--space-3); }

@media (max-width: 820px) {
  .media-split { grid-template-columns: 1fr; gap: var(--space-3); }
  .media-split--rev .media-figure { order: 0; }
  .spec-list li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Masslinie → stille Trennlinie mit Beschriftung */
.dimline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  margin-block: var(--space-3);
}
.dimline::before {
  content: "";
  width: 3rem;
  height: 1px;
  background: var(--line-mid);
}
.dimline .tick,
.dimline .arrow-l,
.dimline .arrow-r { display: none; }
.dim-label { color: var(--ink-muted); white-space: nowrap; }

/* ---------- Faktenband ---------- */

.factband {
  border-bottom: var(--border);
  background: var(--paper);
}
.factband ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1.6rem, 4vw, 4rem);
  list-style: none;
  margin: 0;
  padding: 1.4rem clamp(1.25rem, 4vw, 2.5rem);
  justify-content: center;
}
.factband li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-muted);
}

/* ---------- Bildbänder (Pläne / Modelle, in Graustufen) ---------- */

.imageband {
  margin: 0;
  border-block: var(--border);
  background: var(--paper-raised);
  overflow: hidden;
}
.imageband img {
  width: 100%;
  height: min(72vh, 36rem);
  object-fit: cover;
  display: block;
}
/* Höheres Band, z.B. für Fotos mit Personen (weniger Beschnitt) */
.imageband--tall img {
  height: min(88vh, 46rem);
  object-position: center 30%;
}
.imageband figcaption {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  padding: 1.1rem 1.5rem;
  border-top: var(--border);
}

/* Plan-Galerie: Referenzpläne mit Passepartout */
.plan-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-3);
}
.plan-gallery figure {
  margin: 0;
  background: var(--paper-raised);
  border: var(--border);
  padding: var(--space-3);
}
.plan-gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--hairline-soft);
}
.plan-gallery figcaption {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  padding-top: 0.9rem;
}

/* ---------- Fachbereiche (ehem. Karten → offene Spalten) ---------- */

.system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4) var(--space-4);
}

.system-card {
  position: relative;
  background: transparent;
  border: none;
  border-top: 1px solid var(--hairline);
  padding: var(--space-4) var(--space-2) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}

.system-card .sys-id {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.system-card h3 { margin-bottom: 0; }
.system-card p { font-size: 0.95rem; color: var(--ink-muted); margin-bottom: 0; }
.system-card .sys-icon { width: 2.8rem; height: 2.8rem; }
.system-card .sys-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-mid);
  padding-bottom: 0.2rem;
}
.system-card .sys-link:hover { border-bottom-color: var(--ink); }

/* Leistungslisten */
.service-section {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-5);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: var(--border);
}
.service-section:last-of-type { border-bottom: var(--border); }
@media (max-width: 820px) {
  .service-section { grid-template-columns: 1fr; gap: var(--space-3); }
}

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.4rem 2rem;
}
.service-list li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.4rem;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 0.95rem;
}
.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 0.7rem;
  height: 1px;
  background: var(--line-mid);
}

/* ---------- Phasen (SIA) ---------- */

.phases {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3) var(--space-2);
}
/* Vierstufige Prozessreihe (Startseite) bleibt vierspaltig */
.phases--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phases--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .phases,
  .phases--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.phase {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-3);
  text-align: center;
}

.phase .phase-num {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.1em;
  line-height: 1;
}
.phase h3 {
  font-size: 1.05rem;
  margin: 0.7rem 0 0.4rem;
}
.phase p {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 0 auto;
  max-width: 22rem;
}

/* ---------- Planliste (Tabelle) ---------- */

.plan-table-wrap {
  overflow-x: auto;
  border: var(--border);
  background: var(--paper-raised);
}

.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 42rem;
}
.plan-table th {
  text-align: left;
  color: var(--ink-muted);
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  font-size: 0.62rem;
}
.plan-table td {
  padding: 0.95rem 1.2rem;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: top;
}
.plan-table tr:last-child td { border-bottom: none; }
.plan-table .proj-nr {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-muted);
  white-space: nowrap;
}
.plan-table .proj-name { font-weight: 700; }

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line-mid);
  color: var(--ink-muted);
  margin: 0.1rem 0.2rem 0.1rem 0;
  white-space: nowrap;
}
.tag--rot, .tag--blau, .tag--gruen { color: var(--ink-muted); }

.stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--line-mid);
  padding: 0.3rem 0.7rem;
}

/* ---------- Referenz-Karten ---------- */

.ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-3);
}
.ref-card {
  background: var(--paper-raised);
  border: var(--border);
  display: flex;
  flex-direction: column;
}
.ref-card .ref-figure {
  border-bottom: var(--border);
  background: var(--paper-raised);
  padding: var(--space-3);
}
.ref-card .ref-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--hairline-soft);
}
.ref-card .ref-body { padding: var(--space-3); }
.ref-card h3 { font-size: 1.1rem; }
.ref-card .ref-meta {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-muted);
  margin-bottom: 0.4rem;
}
.ref-card p { font-size: 0.92rem; color: var(--ink-muted); margin-bottom: 0.8rem; }
/* Positionsnummer wie in der Projekttabelle */
.ref-card .ref-nr {
  font-size: 0.74rem;
  letter-spacing: normal;
  margin-right: 0.9rem;
}

/* Eckdatenzeile: leere Felder und leere Zeilen bleiben unsichtbar */
.ref-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1rem;
  margin: 0 0 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--hairline-soft);
}
.ref-facts > div:has(> dd:empty) { display: none; }
.ref-facts:not(:has(dd:not(:empty))) { display: none; }
.ref-facts dt {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ref-facts dd {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ---------- Werte ---------- */

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
}
.value {
  text-align: center;
}
.value::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--line-mid);
  margin: 0 auto var(--space-2);
}
.value h3 { font-size: 1.05rem; }
.value p { font-size: 0.92rem; color: var(--ink-muted); margin: 0 auto; max-width: 24rem; }

/* ---------- CTA — hell und ruhig ---------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--paper-raised);
  border-block: var(--border);
}
.cta-band .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.cta-band h2 { margin: 0; color: var(--ink-soft); }
.cta-band p { color: var(--ink-muted); margin: 0.5rem 0 0; }

/* ---------- Kontakt ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-5);
}
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-info dl { margin: 0; }
.contact-info dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--space-3);
}
.contact-info dd {
  margin: 0.3rem 0 0;
  font-size: 1.05rem;
}
.contact-info dd a { color: var(--ink); }

.form {
  background: var(--paper-raised);
  border: var(--border);
  padding: var(--space-4);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field--full { grid-column: 1 / -1; }

.form-field label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: var(--border);
  padding: 0.85rem 0.95rem;
  border-radius: 0;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 1.5px solid var(--ink);
  outline-offset: 1px;
}
.form-note {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: var(--space-2) 0 var(--space-3);
}

/* ---------- Footer: Plankopf — hell ---------- */

.plankopf {
  background: var(--plankopf);
  color: var(--plankopf-text);
  border-top: var(--border);
}

.plankopf a { color: var(--plankopf-text); text-decoration: none; }
.plankopf a:hover { color: var(--ink-soft); }

.plankopf-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-4);
  padding-block: var(--space-5);
}
@media (max-width: 820px) {
  .plankopf-main { grid-template-columns: 1fr; gap: var(--space-3); }
}

.plankopf .brand-name { color: var(--ink-soft); }
.plankopf .brand-sub { color: var(--ink-muted); }
.plankopf-main p {
  font-size: 0.9rem;
  margin-top: var(--space-2);
  max-width: 24rem;
}

.plankopf h4 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}
.plankopf ul { list-style: none; margin: 0; padding: 0; }
.plankopf li { margin-bottom: 0.55rem; font-size: 0.92rem; }

/* Titelblock wie auf dem Werkplan — Haarlinien auf hellem Grund */
.titleblock {
  border-top: 1px solid var(--plankopf-line);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.titleblock > div {
  border-right: 1px solid var(--plankopf-line);
  padding: 0.75rem 0.95rem;
}
.titleblock > div:last-child { border-right: none; }
.titleblock .tb-label {
  display: block;
  color: var(--ink-muted);
  font-size: 0.52rem;
  margin-bottom: 0.2rem;
}
.titleblock .tb-value { color: var(--plankopf-text); }
@media (max-width: 820px) {
  .titleblock { grid-template-columns: repeat(3, 1fr); }
  .titleblock > div { border-bottom: 1px solid var(--plankopf-line); }
  .titleblock > div:nth-child(3n) { border-right: none; }
}
@media (max-width: 480px) {
  .titleblock { grid-template-columns: repeat(2, 1fr); }
  .titleblock > div:nth-child(3n) { border-right: 1px solid var(--plankopf-line); }
  .titleblock > div:nth-child(2n) { border-right: none; }
}

/* ---------- Seiten-Hero (Unterseiten) ---------- */

.page-hero {
  position: relative;
  border-bottom: var(--border);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--paper-raised);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/plan-hero.jpg") center 20% / cover no-repeat;
  opacity: 0.08;
}
.page-hero .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-hero p {
  font-size: 1.05rem;
  color: var(--ink-muted);
  max-width: 40rem;
}
.page-hero .eyebrow::before { display: none; }

/* ---------- Text-Seiten (Rechtliches) ---------- */

.prose { max-width: 44rem; margin-inline: auto; }
.prose h2 { margin-top: var(--space-5); font-size: 1.4rem; }
.prose h3 { font-size: 1.05rem; margin-top: var(--space-3); }

/* ---------- Animations-Ausgangszustände ---------- */

html.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}
html.has-js.reduced-motion [data-reveal] {
  opacity: 1;
  transform: none;
}

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

/* Werkplan in der Diashow aufhellen, 26.09.2026
   Gemessen: plan-werkplan.jpg hat Helligkeit 212 von 255, die drei
   anderen Plaene 239 bis 245. Er wirkt als Hintergrund deshalb grau
   und schwer. Nur die Diashow wird aufgehellt, als grosses Vollbild
   auf Startseite und Referenzen bleibt der Plan unveraendert.

   Korrigiert am 28.09.2026: Vorher lief die Aufhellung ueber
   :first-child. Das traf aber nur zufaellig den Werkplan. Auf
   referenzen.html steht er an dritter Stelle, dort wurde also
   plan-heizzentrale.jpg aufgehellt und der Werkplan blieb grau.
   Jetzt haengt die Regel am Dateinamen und ist unabhaengig davon,
   an welcher Stelle das Bild in der Diashow steht. */
.plan-slides img { filter: brightness(1.08); }
.plan-slides img[src$="plan-werkplan.jpg"] { filter: brightness(1.32); }

/* ---------------------------------------------------------------
   Kontaktformular: Fallenfeld und Rueckmeldung, 26.09.2026
   Das Fallenfeld liegt ausserhalb des Bildschirms. Menschen sehen
   es nie, Roboter fuellen es aus und werden dadurch erkannt.
   --------------------------------------------------------------- */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--paper-raised);
  border-left: 3px solid var(--ink);
  font-size: 0.98rem;
  line-height: 1.6;
}
.form-status:focus { outline: none; }
.form-status--ok { border-left-color: var(--ink); }
.form-status--fehler { border-left-color: #8C2F2F; }