/* horus-operations.de — horus. CI 2026 v1.2 */

/* ===== LATO (self-hosted, kein Google-Fonts-CDN) =====
   Lato wird von Google Fonts in den Gewichten 100, 300, 400, 700, 900 ausgeliefert.
   Es gibt kein eigenes Semibold (600) im Google-Subset; Gewichte 500/600 wurden
   bereits zuvor vom Browser synthetisch erzeugt. Der Self-Host übernimmt diesen
   Zustand: drei echte Gewichte (300, 400, 700), 500/600 bleiben browser-synthetisch.
   Subsets: latin (Pflicht für DE) und latin-ext (Sonderzeichen). */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/lato-300.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: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/lato-300-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: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lato-400.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: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lato-400-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: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/lato-700.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: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/lato-700-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;
}

:root {
  --olive:        #616D39;
  --olive-soft:   #E8EADD;
  --gold:         #D6AF53;
  --gold-soft:    #F5EBD1;
  --paper:        #FBFAF4;
  --ink:          #1E2211;
  --ink-soft:     #5A5F4A;
  --rule:         #D9D8C9;

  --max:          1100px;
  --gutter:       28px;
  --radius:       0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--olive); text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .18s ease, color .18s ease; }
a:hover { color: var(--ink); border-bottom-color: var(--gold); }

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

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

/* ===== HEADER ===== */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(6px);
  background: rgba(251, 250, 244, 0.92);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
}
.brand:hover { border: 0; }
.brand img { height: 34px; width: auto; }
.brand .wordmark {
  font-weight: 300;
  font-size: 22px;
  color: var(--olive);
  letter-spacing: -0.2px;
  line-height: 1;
}
.nav { display: flex; gap: 22px; align-items: center; }
.nav a {
  font-size: 14px;
  letter-spacing: 0.4px;
  color: var(--ink);
  border: 0;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] {
  border-bottom-color: var(--gold);
  color: var(--olive);
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--olive);
  cursor: pointer;
  letter-spacing: 0.6px;
}

@media (max-width: 760px) {
  .nav { display: none; flex-direction: column; gap: 0; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 6px 0; }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px var(--gutter); border-top: 1px solid var(--rule); border-bottom: 0; }
  .nav-toggle { display: inline-block; }
}

/* ===== HERO (olive) ===== */
.hero {
  background: var(--olive);
  color: var(--paper);
  padding: 96px 0 88px;
  position: relative;
  overflow: hidden;
}
.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 1;
}
.hero .eyebrow {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.hero h1 {
  font-weight: 300;
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.4px;
  margin: 0 0 22px;
  max-width: 22ch;
}
.hero .lead {
  font-weight: 300;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  max-width: 60ch;
  margin: 0 0 38px;
  color: rgba(251, 250, 244, 0.92);
}
.hero .gold-rule { width: 64px; height: 1.5px; background: var(--gold); margin: 0 0 28px; }

.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-meta {
  position: absolute;
  bottom: 28px;
  left: 0; right: 0;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 1.4px;
  color: rgba(251, 250, 244, 0.7);
  text-transform: uppercase;
}
.hero-meta .slogan { color: var(--gold); }

@media (max-width: 760px) {
  .hero { padding: 64px 0 72px; }
  .hero-meta { position: static; margin-top: 32px; flex-direction: column; gap: 6px; }
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-block;
  padding: 14px 26px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  border: 1.5px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  border-bottom: 1.5px solid var(--gold);
}
.btn:hover { background: transparent; color: var(--paper); border-bottom-color: var(--gold); }
.btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(251, 250, 244, 0.5);
  border-bottom: 1.5px solid rgba(251, 250, 244, 0.5);
}
.btn--ghost:hover { color: var(--gold); border-color: var(--gold); border-bottom-color: var(--gold); }

.btn--olive {
  background: var(--olive);
  color: var(--paper);
  border-color: var(--olive);
  border-bottom: 1.5px solid var(--olive);
}
.btn--olive:hover { background: transparent; color: var(--olive); border-color: var(--olive); border-bottom-color: var(--olive); }

/* ===== SECTIONS ===== */
.section { padding: 96px 0; }
.section--soft { background: var(--olive-soft); }
.section--paper { background: var(--paper); }
.section-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }

.section-eyebrow {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 8px;
}
.section-rule { width: 56px; height: 1.5px; background: var(--gold); margin-bottom: 28px; }

h2.section-title {
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.2px;
  color: var(--olive);
  margin: 0 0 22px;
  max-width: 24ch;
}
.lead-text {
  font-weight: 300;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.55;
  max-width: 62ch;
  margin: 0 0 32px;
  color: var(--ink);
}

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .section { padding: 64px 0; }
}

/* ===== HEBEL-FELDER (Vier Themenfelder) ===== */
.fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.field {
  background: var(--paper);
  padding: 32px 28px;
}
.field h3 {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.6px;
  color: var(--olive);
  text-transform: uppercase;
  margin: 0 0 6px;
}
.field .now {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 14px;
  line-height: 1.5;
}
.field .arrow {
  width: 16px;
  height: 1.5px;
  background: var(--gold);
  margin: 0 0 14px;
}
.field .target {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}

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

/* ===== MANDAT-PAKETE ===== */
.packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.pkg {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 36px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pkg--featured {
  border-color: var(--olive);
  border-width: 1.5px;
}
.pkg--featured::before {
  content: "Empfohlen";
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--olive);
  color: var(--paper);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 5px 12px;
  font-weight: 700;
}
.pkg .name {
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin: 0 0 8px;
}
.pkg .price {
  font-weight: 300;
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.5px;
}
.pkg .price-meta {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.pkg ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  flex: 1;
}
.pkg li {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.pkg li:last-child { border-bottom: 0; }
.pkg li strong { color: var(--olive); font-weight: 600; }
.pkg .pkg-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 18px;
}

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

/* Wert-Zeile pro Paket auf der Mandat-Seite */
.pkg .pkg-value {
  font-size: 13px;
  color: var(--ink);
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--gold-soft);
  line-height: 1.5;
}
.pkg .pkg-value strong { color: var(--olive); font-weight: 600; }

/* ===== MANDAT-SEITE: TEMPO-GRID ===== */
.tempo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 32px;
}
.tempo-cell {
  background: var(--paper);
  padding: 28px 24px;
}
.tempo-cell .tempo-num {
  font-weight: 300;
  font-size: 32px;
  line-height: 1.05;
  color: var(--olive);
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}
.tempo-cell .tempo-label {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}
@media (max-width: 880px) {
  .tempo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .tempo-grid { grid-template-columns: 1fr; }
}

/* ===== MANDAT-SEITE: BUY-VS-BUILD-TABELLE ===== */
.bvb-table-wrap {
  margin-top: 32px;
  overflow-x: auto;
  border: 1px solid var(--rule);
}
.bvb-table-web {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
}
.bvb-table-web thead th {
  background: var(--olive);
  color: var(--paper);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 16px 20px;
  text-align: left;
  vertical-align: middle;
}
.bvb-table-web .bvb-axis-col { width: 22%; }
.bvb-table-web tbody td {
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.bvb-table-web tbody tr:last-child td { border-bottom: 0; }
.bvb-table-web .bvb-axis {
  font-weight: 600;
  color: var(--olive);
  background: var(--olive-soft);
  font-size: 14px;
  letter-spacing: 0.4px;
}
.bvb-anker {
  margin-top: 24px;
  padding: 24px 28px;
  background: var(--olive-soft);
  border-left: 3px solid var(--gold);
}
.bvb-anker .bvb-anker-headline {
  font-weight: 600;
  font-size: 18px;
  color: var(--olive);
  margin-bottom: 8px;
  letter-spacing: -0.1px;
}
.bvb-anker p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 70ch;
}
@media (max-width: 720px) {
  .bvb-table-web thead th, .bvb-table-web tbody td { padding: 12px 14px; font-size: 13px; }
  .bvb-anker { padding: 20px; }
}

/* ===== MANDAT-SEITE: REVERSAL-BAND ===== */
.reversal-section {
  background: var(--olive);
  color: var(--paper);
  padding: 56px var(--gutter);
}
.reversal-section .section-inner { padding: 0; }
.reversal-section .reversal-eyebrow {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 12px;
}
.reversal-section h2 {
  font-weight: 300;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.2;
  color: var(--paper);
  margin: 0 0 16px;
  max-width: 24ch;
}
.reversal-section p {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  color: rgba(251, 250, 244, 0.92);
  margin: 0;
  max-width: 70ch;
  font-weight: 300;
}

/* ===== MANDAT-SEITE: PDF-DOWNLOAD-KARTEN ===== */
.pdf-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.pdf-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .18s ease, transform .18s ease;
  position: relative;
}
.pdf-card:hover {
  border-color: var(--olive);
  transform: translateY(-2px);
  color: var(--ink);
}
.pdf-card--featured { border-color: var(--olive); border-width: 1.5px; }
.pdf-card--featured::before {
  content: "Empfohlen";
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--olive);
  color: var(--paper);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 5px 12px;
  font-weight: 700;
}
.pdf-card .pdf-card-tier {
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 4px;
}
.pdf-card .pdf-card-price {
  font-weight: 300;
  font-size: 26px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.pdf-card .pdf-card-meta {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.pdf-card .pdf-card-cta {
  margin-top: auto;
  padding: 12px 16px;
  background: var(--olive-soft);
  color: var(--olive);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-align: center;
  border: 1px solid var(--rule);
  transition: background .18s ease, color .18s ease;
}
.pdf-card:hover .pdf-card-cta {
  background: var(--olive);
  color: var(--paper);
}
@media (max-width: 880px) {
  .pdf-cards { grid-template-columns: 1fr; }
}

/* ===== STARTSEITE: BESTANDSAUFNAHME-KARTE A.4 ===== */
.bestandsaufnahme-card {
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  padding: 36px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 40px;
  align-items: center;
}
.bestandsaufnahme-card .bestand-content {
  max-width: 70ch;
}
.bestandsaufnahme-card .bestand-eyebrow {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 8px;
}
.bestandsaufnahme-card h2 {
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.2;
  color: var(--olive);
  margin: 0 0 14px;
  letter-spacing: -0.2px;
  max-width: 22ch;
}
.bestandsaufnahme-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 8px;
}
.bestandsaufnahme-card .bestand-price {
  font-weight: 600;
  color: var(--olive);
}
.bestandsaufnahme-card .bestand-warranty {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
  font-style: normal;
}
.bestandsaufnahme-card .bestand-cta { align-self: center; }
@media (max-width: 880px) {
  .bestandsaufnahme-card { grid-template-columns: 1fr; padding: 28px 24px; }
}

/* ===== STARTSEITE: MANDAT-TEASER (kompakt) ===== */
.mandat-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0 0;
}
.mandat-teaser-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
}
.mandat-teaser-card.is-featured { border-color: var(--olive); border-width: 1.5px; position: relative; }
.mandat-teaser-card.is-featured::before {
  content: "Empfohlen";
  position: absolute;
  top: -11px;
  left: 18px;
  background: var(--olive);
  color: var(--paper);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  font-weight: 700;
}
.mandat-teaser-card .tier-name {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 6px;
}
.mandat-teaser-card .tier-price {
  font-weight: 300;
  font-size: 26px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.mandat-teaser-card .tier-meta {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.mandat-teaser-card .tier-hebel {
  font-size: 13px;
  color: var(--ink);
  margin-top: 10px;
}
.mandat-teaser-card .tier-hebel strong { color: var(--olive); font-weight: 600; }
.mandat-teaser-cta { margin-top: 28px; }
@media (max-width: 880px) {
  .mandat-teaser-grid { grid-template-columns: 1fr; }
}

/* ===== REFERENZEN: METHODE-ZEILE und BRIDGE ===== */
.tile .tile-method {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(97, 109, 57, 0.18);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.tile .tile-method strong { color: var(--olive); font-weight: 600; }
.case-bridge {
  margin-top: 56px;
  padding: 28px 32px;
  background: var(--olive-soft);
  border-left: 3px solid var(--gold);
}
.case-bridge p {
  font-weight: 300;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
}
.case-bridge .bridge-eyebrow {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 10px;
}

/* ===== SPRINT-TEASER ===== */
.sprint-teaser {
  background: var(--olive);
  color: var(--paper);
  padding: 56px var(--gutter);
}
.sprint-teaser .section-inner { padding: 0; }
.sprint-teaser .section-eyebrow { color: var(--gold); }
.sprint-teaser h2.section-title { color: var(--paper); }
.sprint-teaser .lead-text { color: rgba(251, 250, 244, 0.92); }

/* ===== PHILOSOPHIE-BLOCK ===== */
.philo {
  background: var(--gold-soft);
  padding: 64px var(--gutter);
}
.philo .section-inner {
  max-width: 780px;
  padding: 0;
}
.philo p {
  font-weight: 300;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 18px;
}
.philo .signature {
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--olive);
  margin-top: 20px;
  font-weight: 600;
}

/* ===== REFERENZSEITE · CTA-Schluss-Block ===== */
.ref-audit-cta {
  background: var(--paper);
  padding: 72px var(--gutter);
  border-top: 1px solid var(--rule);
}
.ref-audit-cta .section-inner {
  max-width: 780px;
  padding: 0;
  text-align: left;
}
.ref-audit-cta .eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 500;
  margin-bottom: 14px;
}
.ref-audit-cta h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.ref-audit-cta p {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 640px;
}
.ref-audit-cta .cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--olive);
  color: var(--paper);
  padding: 56px var(--gutter) 32px;
  margin-top: 0;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(251, 250, 244, 0.18);
}
.footer-inner h4 {
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  font-weight: 700;
}
.footer-inner p, .footer-inner li {
  font-size: 14px;
  color: rgba(251, 250, 244, 0.86);
  line-height: 1.6;
}
.footer-inner ul { list-style: none; padding: 0; margin: 0; }
.footer-inner li { padding: 4px 0; }
.footer-inner a {
  color: rgba(251, 250, 244, 0.86);
  border: 0;
}
.footer-inner a:hover { color: var(--gold); }
.footer-philo {
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  color: rgba(251, 250, 244, 0.92);
  line-height: 1.55;
  margin: 0;
}
.footer-bottom {
  max-width: var(--max);
  margin: 24px auto 0;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(251, 250, 244, 0.6);
}
.footer-bottom .slogan { color: var(--gold); }

@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* ===== INNER-PAGE HERO (kompakt) ===== */
.page-hero {
  background: var(--olive);
  color: var(--paper);
  padding: 80px 0 64px;
}
.page-hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.page-hero .eyebrow {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.page-hero h1 {
  font-weight: 300;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.15;
  margin: 0 0 18px;
  letter-spacing: -0.3px;
  max-width: 22ch;
}
.page-hero .lead {
  font-weight: 300;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  max-width: 62ch;
  color: rgba(251, 250, 244, 0.92);
  margin: 0 0 0;
}
.page-hero .gold-rule { width: 56px; height: 1.5px; background: var(--gold); margin: 0 0 24px; }

/* ===== METHODE-PAGE ===== */
.principle {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
}
.principle:last-child { border-bottom: 0; }
.principle .num {
  font-weight: 300;
  font-size: 38px;
  color: var(--olive);
  line-height: 1;
  letter-spacing: -0.5px;
}
.principle h3 {
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--ink);
}
.principle p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 32px;
}
.step {
  background: var(--paper);
  padding: 32px 24px;
}
.step .step-num {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 10px;
}
.step h3 {
  font-weight: 500;
  font-size: 17px;
  color: var(--olive);
  margin: 0 0 10px;
}
.step p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .steps { grid-template-columns: 1fr; }
  .principle { grid-template-columns: 1fr; gap: 8px; }
}

/* ===== REFERENZEN ===== */
.case-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
  flex-wrap: wrap;
  overflow-x: auto;
}
.case-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 24px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}
.case-tab:hover { color: var(--olive); }
.case-tab[aria-selected="true"] {
  color: var(--olive);
  border-bottom-color: var(--gold);
}

.case { display: none; }
.case[aria-hidden="false"] { display: block; }

.case-meta {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 12px;
}
.case h2 {
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 24ch;
}
.case-lead {
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 62ch;
  margin: 0 0 32px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 32px 0;
}
.tile {
  background: var(--olive-soft);
  padding: 24px 22px;
  border-top: 2px solid var(--olive);
}
.tile .tile-label {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 12px;
}
.tile .tile-num {
  font-weight: 300;
  font-size: 32px;
  line-height: 1.05;
  color: var(--olive);
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}
.tile .tile-desc {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}

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

.case-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.case-section h3 {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 14px;
}
.case-section h4 {
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 18px 0 6px;
}
.case-section p { font-size: 15px; line-height: 1.6; color: var(--ink); }

.results {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.results li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.results li::before {
  content: "";
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--gold);
  margin-top: 12px;
}

.pullquote {
  border-left: 2px solid var(--gold);
  padding: 10px 0 10px 22px;
  margin: 32px 0;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 60ch;
}
.pullquote .src {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ===== ÜBER MICH ===== */
.about-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
}
.about-grid .headshot-wrap {
  position: sticky;
  top: 100px;
}
.headshot {
  background: var(--olive-soft);
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.headshot--photo {
  background: var(--paper);
}
.headshot--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.headshot .placeholder {
  text-align: center;
  padding: 24px;
}
.headshot .placeholder-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px dashed var(--olive);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--olive);
  font-size: 28px;
  font-weight: 300;
}
.headshot .placeholder-label {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 6px;
}
.headshot .placeholder-note {
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.headshot-caption {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 12px;
  text-align: center;
}

.about-content h2 {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--olive);
  margin: 32px 0 12px;
}
.about-content h2:first-child { margin-top: 0; }
.about-content p { font-size: 16px; line-height: 1.65; color: var(--ink); margin: 0 0 14px; }

@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-grid .headshot-wrap { position: static; max-width: 320px; }
}

/* ===== INTRO-TEAM auf Startseite ===== */
.intro-team {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: center;
}
.intro-team .intro-headshot .headshot {
  max-width: 220px;
}
.intro-team .intro-text .section-title {
  margin-top: 0;
}

@media (max-width: 760px) {
  .intro-team {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: left;
  }
  .intro-team .intro-headshot .headshot {
    max-width: 200px;
    margin: 0;
  }
}

/* ===== KONTAKT ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 64px;
  align-items: start;
}
.contact-card { }
.contact-card h2 {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 12px;
}
.contact-card .contact-line {
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--ink);
}
.contact-card .contact-line strong { color: var(--olive); font-weight: 600; }
.contact-card .contact-meta { font-size: 13px; color: var(--ink-soft); margin: 16px 0 0; line-height: 1.55; }

.contact-block {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.contact-block:last-child { border-bottom: 0; padding-bottom: 0; }

.medienhafen-figure {
  margin: 0;
  display: block;
}
.medienhafen-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background: var(--olive-soft);
  border: 1px solid var(--rule);
}
.medienhafen-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.photo-rule {
  width: 32px;
  height: 1px;
  background: var(--gold);
  margin: 14px 0 8px 0;
}
.medienhafen-caption {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .medienhafen-photo { aspect-ratio: 4 / 5; max-width: 480px; }
}

/* ===== LEGAL (Impressum, Datenschutz) ===== */
.legal-content {
  max-width: 720px;
  margin: 0 auto;
}
.legal-content h2 {
  font-weight: 600;
  font-size: 16px;
  color: var(--olive);
  margin: 32px 0 10px;
  letter-spacing: 0.4px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin: 22px 0 6px;
}
.legal-content p, .legal-content li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
.legal-content ul { padding-left: 20px; }
.legal-content .meta {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

/* ===== UTILITY ===== */
.spacer-32 { height: 32px; }
.spacer-48 { height: 48px; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.tight { max-width: 60ch; }

/* Print ===== */
@media print {
  .site-header, .site-footer, .nav-toggle { display: none; }
  body { background: white; color: black; }
  .hero, .page-hero, .sprint-teaser { background: white; color: black; }
  a { color: black; border: 0; }
}

/* ===== HORUS-FLOW: MODAL + INLINE-CAL (Web3Forms + Cal.com) ===== */

body.horus-modal-open { overflow: hidden; }

.horus-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(30, 34, 17, 0.78);
  z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.horus-modal-overlay[hidden] { display: none; }

.horus-modal-card {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--paper);
  border-top: 4px solid var(--olive);
  box-shadow: 0 24px 80px rgba(30, 34, 17, 0.35);
  margin: auto;
}

.horus-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: transparent; border: 0;
  font-size: 28px; line-height: 1;
  color: var(--ink-soft); cursor: pointer;
  padding: 4px 10px;
  font-family: inherit;
}
.horus-modal-close:hover { color: var(--olive); }

.horus-modal-body { padding: 36px 40px 32px; }
.horus-modal-body[hidden] { display: none; }

.horus-modal-body .step-tag {
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--olive); font-weight: 700;
  display: inline-block; border-bottom: 1px solid var(--gold);
  padding-bottom: 3px; margin-bottom: 12px;
}

.horus-modal-body h2 {
  font-weight: 300; font-size: 26px; line-height: 1.25;
  color: var(--ink); margin: 6px 0 12px;
}

.horus-modal-lead {
  font-size: 15px; color: var(--ink-soft);
  line-height: 1.55; max-width: 60ch; margin: 0 0 24px;
}

.horus-modal-form .field {
  margin-bottom: 14px;
  padding: 0;
  background: transparent;
}
.horus-modal-form .field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 0;
}
.horus-modal-form .field label {
  display: block;
  font-size: 11px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 6px; font-weight: 600;
}
.horus-modal-form .field input,
.horus-modal-form .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: inherit; font-size: 15px;
  color: var(--ink); border-radius: 0;
}
.horus-modal-form .field input:focus,
.horus-modal-form .field textarea:focus {
  border-color: var(--olive); outline: none;
}
/* Browser-Autofill (Chrome/Safari) sonst gelblicher Hintergrund + ueberschriebene Farben. */
.horus-modal-form .field input:-webkit-autofill,
.horus-modal-form .field input:-webkit-autofill:hover,
.horus-modal-form .field input:-webkit-autofill:focus,
.horus-modal-form .field textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}

.horus-modal-form .consent-row {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 12px 0 6px;
  padding: 12px 14px;
  background: var(--olive-soft);
  border: 1px solid var(--rule);
}
.horus-modal-form .consent-row input[type=checkbox] {
  margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--olive); cursor: pointer;
}
.horus-modal-form .consent-row label {
  font-size: 13px; color: var(--ink); line-height: 1.5;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  cursor: pointer; margin: 0;
}
.horus-modal-form .consent-row label a {
  color: var(--olive); border-bottom: 1px solid var(--rule);
}

.horus-modal-form .submit-row {
  margin: 18px 0 6px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}

.horus-modal-form .validation-msg {
  font-size: 13px; color: #B33A1F;
  display: none; line-height: 1.5;
}
.horus-modal-form .validation-msg.show { display: block; }
.horus-modal-form .validation-msg a {
  color: #B33A1F; border-bottom: 1px solid rgba(179, 58, 31, 0.4);
  margin-left: 4px;
}

.horus-modal-form .privacy-note {
  font-size: 12px; color: var(--ink-soft);
  line-height: 1.5; margin: 10px 0 0;
}
.horus-modal-form .privacy-note a {
  color: var(--olive); border-bottom: 1px solid var(--rule);
}

/* Cal.com Inline Container.
   Cal.com sized den eingebetteten Iframe selbst dynamisch via postMessage,
   sobald der offizielle Loader aktiv ist. Min-height ist bewusst niedrig,
   damit der Container exakt so hoch wird wie der Inhalt es braucht und
   keine Leerflaechen oben oder unten entstehen. Border und Hintergrund
   weg, weil das eingebettete Cal.com selbst eine Karte mit weissem
   Hintergrund mitbringt — doppelter Rahmen wirkt unruhig. */
.horus-cal-inline {
  width: 100%;
  min-height: 420px;
  margin-top: 8px;
  overflow: visible;
}
.horus-cal-inline iframe {
  width: 100% !important;
  border: 0;
  display: block;
}

/* Inline-Variante (kontakt.html / audit.html) */
.horus-cal-section {
  margin-top: 24px;
  padding: 28px;
  background: var(--olive-soft);
}
.horus-cal-section h3 {
  font-weight: 300; font-size: 22px;
  color: var(--olive); margin: 0 0 6px;
}
.horus-cal-section p {
  font-size: 14px; color: var(--ink-soft);
  margin: 0 0 18px; max-width: 60ch;
}

@media (max-width: 640px) {
  .horus-modal-overlay { padding: 16px 8px; }
  .horus-modal-body { padding: 28px 22px 24px; }
  .horus-modal-body h2 { font-size: 21px; }
  .horus-modal-form .field-row { grid-template-columns: 1fr; gap: 0; }
  .horus-cal-section { padding: 22px 18px; }
  /* Mobile: Cal.com regelt Hoehe selbst, Container darf wachsen.
     Niedriges Minimum verhindert, dass leerer Raum oben/unten entsteht. */
  .horus-cal-inline { min-height: 540px; }
}

/* =====================================================================
   INTRO · "Tore zu Horus"
   Einmal pro Session. Olive-Tor, Gold-Naht, Falke, Wortmarke, Slogan.
   Gesamtlauf ca. 3,9 Sekunden. Per Klick oder Escape ueberspringbar.
   Strikt GPU-Pfad: alle Bewegungen ueber transform/opacity, keine
   width/height-Keyframes (sonst Layout-Recalc je Frame). Seiteninhalt
   startet unsichtbar und fadet ein, damit nichts unter dem Vorhang
   durchblitzt.
   ===================================================================== */

.intro-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--paper);
  overflow: hidden;
  cursor: pointer;
  transform: translateZ(0);
  will-change: opacity, transform;
  animation: intro-veil-out .9s cubic-bezier(.4, 0, .2, 1) 3.05s forwards;
}

/* Vorhang ueberspringen, wenn schon gelaufen oder reduzierte Bewegung. */
html.intro-skip .intro-veil { display: none !important; }

/* Zwei olivgruene Torflaechen, links und rechts. */
.intro-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.2%; /* Subpixel-Ueberlappung, damit keine Naht blitzt */
  background: var(--olive);
  z-index: 2;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.intro-door--left  { left: 0;  animation: intro-door-left  1.3s cubic-bezier(.7, 0, .2, 1) 1.0s forwards; }
.intro-door--right { right: 0; animation: intro-door-right 1.3s cubic-bezier(.7, 0, .2, 1) 1.0s forwards; }

@keyframes intro-door-left  { to { transform: translate3d(-101%, 0, 0); } }
@keyframes intro-door-right { to { transform: translate3d( 101%, 0, 0); } }

/* Goldene Naht: scaleY statt height-Animation. */
.intro-seam {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5px;
  height: 56vh;
  background: var(--gold);
  transform: translate3d(-50%, -50%, 0) scaleY(0);
  transform-origin: 50% 50%;
  z-index: 3;
  will-change: transform, opacity;
  animation:
    intro-seam-draw .9s cubic-bezier(.34, 1.4, .64, 1) forwards,
    intro-seam-out  .5s cubic-bezier(.4, 0, .2, 1) 1.05s forwards;
}
@keyframes intro-seam-draw {
  to { transform: translate3d(-50%, -50%, 0) scaleY(1); }
}
@keyframes intro-seam-out  { to { opacity: 0; } }

/* Bildmarke in der Mitte: Falke, Wortmarke, Goldlinie, Slogan. */
.intro-emblem {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translate3d(-50%, -46%, 0);
  will-change: opacity, transform;
  animation: intro-emblem-in 1.1s cubic-bezier(.2, .7, .2, 1) 1.55s forwards;
}
@keyframes intro-emblem-in {
  from { opacity: 0; transform: translate3d(-50%, -46%, 0); }
  to   { opacity: 1; transform: translate3d(-50%, -50%, 0); }
}

.intro-falcon {
  width: clamp(96px, 12vw, 140px);
  height: auto;
  display: block;
}

.intro-wordmark {
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(44px, 6.5vw, 68px);
  color: var(--olive);
  letter-spacing: -.6px;
  line-height: 1;
  margin-top: 22px;
}

/* Goldlinie unter Wortmarke: scaleX statt width-Animation. */
.intro-rule {
  width: 84px;
  height: 1.5px;
  background: var(--gold);
  margin: 18px 0 14px;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  will-change: transform;
  animation: intro-rule-draw .7s cubic-bezier(.34, 1.4, .64, 1) 2.15s forwards;
}
@keyframes intro-rule-draw {
  to { transform: scaleX(1); }
}

.intro-slogan {
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  animation: intro-slogan-in .65s cubic-bezier(.4, 0, .2, 1) 2.45s forwards;
}
@keyframes intro-slogan-in { to { opacity: 1; } }

/* Vorhang lueftet sich am Ende. */
@keyframes intro-veil-out {
  to {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -1vh, 0);
  }
}

/* Schneller Abbruch bei Klick oder Escape. */
.intro-veil.is-dismissed {
  animation: none;
  transition: opacity .35s cubic-bezier(.4, 0, .2, 1), transform .35s cubic-bezier(.4, 0, .2, 1);
  opacity: 0;
  transform: translate3d(0, -1vh, 0);
  pointer-events: none;
}

/* Reduzierte Bewegung: Vorhang vollstaendig deaktivieren. */
@media (prefers-reduced-motion: reduce) {
  .intro-veil { display: none !important; }
}

/* Druck: keine Animation in PDF-Exports. */
@media print {
  .intro-veil { display: none !important; }
}

/* Weiche Landung des Seiteninhalts hinter dem Vorhang.
   Statt mehrere Body-Direktkinder einzeln einzublenden, wird der gesamte
   Seiteninhalt im .page-content-Wrapper als EIN Composite-Layer gefaded.
   Vorteile:
   - nur eine Animation laeuft parallel zum Vorhang (statt 7+)
   - der GPU-Compositor verwaltet zwei Layer, nicht acht
   - kein backdrop-filter im sticky-Header wird waehrend der Tor-
     Oeffnung berechnet
   visibility:hidden als Initial-State haelt das Layer aus der Render-
   Pipeline, bis die Animation per Keyframe explizit auf visible schaltet. */
html:not(.intro-skip) .page-content {
  visibility: hidden;
  opacity: 0;
  animation: intro-page-in 1.1s cubic-bezier(.22, .61, .36, 1) 2.55s forwards;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
@keyframes intro-page-in {
  from { visibility: visible; opacity: 0; }
  to   { visibility: visible; opacity: 1; }
}

/* Vollstaendig sichtbar machen, sobald die Sequenz lief, damit
   will-change und Composite-Layer sauber abgebaut werden koennen. */
html.intro-done .page-content,
html.intro-skip .page-content {
  visibility: visible;
  opacity: 1;
  animation: none;
  will-change: auto;
  transform: none;
}

/* Schnell-Variante: bei Klick / Escape den Seiteninhalt zuegig nachziehen. */
html.intro-fast .page-content {
  animation: intro-page-in .4s cubic-bezier(.4, 0, .2, 1) 0s forwards !important;
}

/* ============================================================
   MANDAT V7.3-NACHZUG · 2026-05-17
   Neue Komponenten für die mandat.html-Seite nach V7.3-Substanz.
   Klassen werden nur auf der Mandat-Seite verwendet.
   ============================================================ */

/* ===== PAKET-BADGES (Bonus Gold / Add-on Olive-Soft) ===== */
.pkg-bonus {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--gold);
  color: var(--ink);
  display: flex;
  gap: 12px;
  align-items: center;
}
.pkg-bonus-tag {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  padding: 4px 8px;
  background: rgba(30, 34, 17, 0.12);
  flex-shrink: 0;
}
.pkg-bonus-body {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}
.pkg-bonus-body strong { color: var(--ink); font-weight: 700; }

.pkg-addon {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--olive-soft);
  border-left: 3px solid var(--gold);
  display: flex;
  gap: 12px;
  align-items: center;
}
.pkg-addon-tag {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--olive);
  padding: 4px 8px;
  background: var(--paper);
  flex-shrink: 0;
}
.pkg-addon-body {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}
.pkg-addon-body strong { color: var(--olive); font-weight: 600; }

/* ===== KAPAZITÄTS-ZEILE ===== */
.kapazitaet-zeile {
  margin-top: 32px;
  padding: 18px 24px;
  background: var(--gold-soft);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.kapazitaet-zeile .kap-label {
  display: block;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 4px;
}

/* ===== BELEGE-TABELLE (Cross-Tier Wert-Belege) ===== */
.beleg-table-wrap {
  margin-top: 32px;
  overflow-x: auto;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.beleg-table {
  width: 100%;
  border-collapse: collapse;
}
.beleg-table thead th {
  background: var(--olive);
  color: var(--paper);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 14px 18px;
  text-align: left;
  vertical-align: middle;
}
.beleg-table .beleg-wert-col { width: 22%; }
.beleg-table .beleg-pain-col { width: 28%; }
.beleg-table .beleg-method-col { width: 28%; }
.beleg-table .beleg-mandant-col { width: 22%; }
.beleg-table tbody td {
  padding: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.beleg-table tbody tr:last-child td { border-bottom: 0; }
.beleg-table tbody tr:nth-child(even) td { background: rgba(232, 234, 221, 0.32); }
.beleg-table .beleg-wert {
  background: var(--olive-soft);
  border-right: 1px solid var(--rule);
}
.beleg-table tbody tr:nth-child(even) .beleg-wert { background: var(--olive-soft); }
.beleg-table .beleg-wert strong {
  display: block;
  font-weight: 600;
  font-size: 18px;
  color: var(--olive);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}
.beleg-table .beleg-wert-meta {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}
@media (max-width: 760px) {
  .beleg-table thead { display: none; }
  .beleg-table tbody tr { display: block; border-bottom: 1px solid var(--rule); padding: 18px; }
  .beleg-table tbody tr:last-child { border-bottom: 0; }
  .beleg-table tbody td { display: block; padding: 8px 0; border-bottom: 0; background: transparent !important; }
  .beleg-table tbody td.beleg-wert { background: transparent !important; border-right: 0; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); }
  .beleg-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--olive);
    font-weight: 700;
    margin-bottom: 4px;
  }
}

/* ===== UMSETZUNGS-GRID (4 Cells, ähnlich tempo-grid, aber mit längeren Labels) ===== */
.umsetzungs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 40px;
}
.ums-cell {
  background: var(--paper);
  padding: 26px 22px;
}
.ums-cell .ums-num {
  font-weight: 300;
  font-size: 26px;
  line-height: 1.1;
  color: var(--olive);
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}
.ums-cell .ums-label {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
@media (max-width: 880px) {
  .umsetzungs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .umsetzungs-grid { grid-template-columns: 1fr; }
}

/* ===== KI-SCHULUNGS-MODULE-GRID ===== */
.schulung-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.schulung-cell {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  padding: 22px 20px;
}
.schulung-cell .schulung-mod {
  font-weight: 600;
  font-size: 15px;
  color: var(--olive);
  margin-bottom: 8px;
}
.schulung-cell .schulung-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
@media (max-width: 880px) {
  .schulung-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .schulung-grid { grid-template-columns: 1fr; }
}

.schulung-beleg-row {
  margin-top: 24px;
  padding: 22px 28px;
  background: var(--paper);
  border-left: 3px solid var(--gold);
}
.schulung-beleg-row .schulung-beleg-eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 6px;
}
.schulung-beleg-row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

/* ===== BESTANDSAUFNAHME-GRID ===== */
.bestand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 32px;
}
.bestand-cell {
  background: var(--paper);
  padding: 28px 22px;
}
.bestand-cell .bestand-num {
  font-weight: 300;
  font-size: 28px;
  line-height: 1.1;
  color: var(--olive);
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}
.bestand-cell .bestand-label {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
@media (max-width: 880px) {
  .bestand-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .bestand-grid { grid-template-columns: 1fr; }
}

.bestand-mass-row {
  margin-top: 24px;
  padding: 24px 28px;
  background: var(--olive-soft);
  border-left: 3px solid var(--gold);
}
.bestand-mass-row .bestand-mass-eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 8px;
}
.bestand-mass-row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 70ch;
}

/* ===== KLAUSELN-STRANG ===== */
.klauseln-strang p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 12px;
  padding-left: 20px;
  position: relative;
}
.klauseln-strang p::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}
.klauseln-strang p:last-child { margin-bottom: 0; }
.klauseln-strang p strong { color: var(--olive); font-weight: 600; }
.klauseln-strang a { color: var(--olive); border-bottom: 1px solid var(--rule); }
.klauseln-strang a:hover { border-bottom-color: var(--gold); color: var(--ink); }

/* ===== PDF-CARDS · 4-Karten-Variante ===== */
.pdf-cards--four {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1080px) {
  .pdf-cards--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .pdf-cards--four { grid-template-columns: 1fr; }
}

/* ===== LIEFERGEGENSTAND-BOX (gemeinsame Substanz aller Tiers) ===== */
.liefer-box {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
}
.liefer-box .liefer-eyebrow {
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 14px;
}
.liefer-box .liefer-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.liefer-box .liefer-list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 16px;
  position: relative;
}
.liefer-box .liefer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  background: var(--gold);
}
@media (max-width: 880px) {
  .liefer-box .liefer-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .liefer-box .liefer-list { grid-template-columns: 1fr; }
}

/* ===== PRICING-MECHANIK-ZEILE ===== */
.pricing-mechanik {
  margin-top: 18px;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: 0.1px;
}

/* ===== EIGNUNGS-ZEILE in Tier-Karten ===== */
.pkg .pkg-eignung {
  font-size: 13px;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.5;
}
.pkg .pkg-eignung-label {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  padding: 2px 7px;
  background: var(--olive-soft);
  margin-right: 8px;
  vertical-align: 1px;
}

/* ============================================================================
   MANDAT-V8-NACHZUG · 2026-05-19/20
   Liefergegenstand pro Tier-Karte, Eignung als dezente Mini-Zeile,
   konsolidierter Konditionen-Container (Kapazitaet plus Klauseln),
   Tier-Bruecke mit zentrierten CTAs unter den Karten.
   ========================================================================== */

/* Karten-Layout-Override: .pkg ul (Hebel-Zeile) bekommt KEIN flex-grow,
   damit der Liefergegenstand DIREKT unter den Hebeln startet.
   addon und bonus werden mit margin-top: auto ans Karten-Ende gepinnt.
   Mindestabstand zur eignung-mini-Zeile wird ueber margin-bottom auf
   eignung-mini erzwungen (Margins kollabieren in Flex-Column nicht). */
.pkg ul { flex: 0 0 auto !important; }
.pkg .pkg-addon, .pkg .pkg-bonus { margin-top: auto; }
.pkg .pkg-eignung-mini { margin-bottom: 22px; }

/* Liefergegenstand pro Tier-Karte */
.pkg-liefer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.pkg-liefer-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  margin-bottom: 8px;
}
.pkg-liefer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pkg-liefer-list li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 14px;
  position: relative;
  border-bottom: 0;
}
.pkg-liefer-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--olive);
  font-weight: 700;
}
.pkg-liefer-list li.pkg-liefer-extra {
  color: var(--olive);
  font-weight: 600;
}
.pkg-liefer-list li.pkg-liefer-extra::before {
  content: "+";
}

/* Eignung-Mini-Zeile (dezent, in der Karte) */
.pkg-eignung-mini {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
}

/* Personentage-Klammer-Uebersetzung (dezent, gleiche Zeile) */
.price-meta-soft {
  color: var(--ink-soft);
  font-size: 12px;
}

/* Konsolidierter Konditionen-Container: Kapazitaet prominent oben,
   Kleingedrucktes als ruhige Footnote-Zeile unten. Ein Block statt drei. */
.konditionen-container {
  margin: 28px 0;
  background: transparent;
  border-left: none;
  padding: 0;
  overflow: hidden;
}
.konditionen-container .kc-kapazitaet {
  padding: 20px 28px 16px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.konditionen-container .kc-eyebrow {
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 700;
  flex-shrink: 0;
}
.konditionen-container .kc-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  flex: 1 1 320px;
}
.konditionen-container .kc-body strong {
  color: var(--olive);
  font-weight: 700;
}
.konditionen-container .kc-klauseln {
  padding: 12px 28px 14px;
  border-top: 1px solid rgba(97, 109, 57, 0.18);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.konditionen-container .kc-klauseln span {
  flex: 0 1 auto;
  white-space: nowrap;
}
.konditionen-container .kc-klauseln span + span::before {
  content: "·";
  color: var(--gold);
  margin-right: 8px;
  font-weight: 700;
}
@media (max-width: 720px) {
  .konditionen-container .kc-kapazitaet { padding: 16px 20px 12px; }
  .konditionen-container .kc-klauseln {
    padding: 10px 20px 12px;
    gap: 4px 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .konditionen-container .kc-klauseln span {
    white-space: normal;
  }
  .konditionen-container .kc-klauseln span + span::before {
    content: "";
    margin-right: 0;
  }
}

/* Tier-Bruecke (Lese-Hilfe nach Konditionen-Container) · Frage zentriert,
   Buttons zentral darunter mit Belt-and-suspenders-Zentrierung. */
.tier-bruecke {
  margin: 36px 0 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
.tier-bruecke-frage {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 600;
  text-align: center;
}
.tier-bruecke-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  text-align: center;
}
.tier-bruecke-ctas .btn {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}
/* Ghost-Button auf hellem Hintergrund (Tier-Bruecke liegt auf Paper).
   Default-Ghost ist fuer Hero auf Olive designed (Paper-Farbe), waere
   hier unsichtbar. Override: Olive-Text und Olive-Border. */
.tier-bruecke-ctas .btn--ghost {
  color: var(--olive);
  border-color: var(--olive);
  border-bottom-color: var(--olive);
  background: transparent;
}
.tier-bruecke-ctas .btn--ghost:hover {
  background: var(--olive);
  color: var(--paper);
  border-color: var(--olive);
  border-bottom-color: var(--olive);
}
@media (max-width: 720px) {
  .tier-bruecke-ctas { flex-direction: column; gap: 12px; }
  .tier-bruecke-ctas .btn {
    display: block;
    margin: 0 auto;
    max-width: 320px;
    width: 100%;
  }
}