/* =========================================================
   RT Gruppe – Stylesheet
   Farbwelt: British Racing Green mit Elfenbein und Champagner.
   Schriften lokal (SIL Open Font License), keine externen Requests.
   ========================================================= */

/* --- Schriften ------------------------------------------------------- */
@font-face {
  font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --- Design-Tokens --------------------------------------------------- */
:root {
  /* Racing Green, bewusst heller gehalten als die vorherige Anthrazit-Fassung */
  --bg:#17302A;              /* Grundfläche, mittleres Racing Green */
  --deep:#102520;            /* tiefere Fläche für Kontrast */
  --surface:#1F3E36;         /* angehobene Fläche */
  --overlay:16,37,32;        /* dieselbe Farbe als RGB für Verläufe */

  --text:#F5F0E4;            /* Elfenbein */
  --muted:#C4D2C9;           /* gedämpftes Salbei-Elfenbein */
  --accent:#D3B278;          /* Champagner */
  --accent-soft:rgba(211,178,120,.5);

  --line:rgba(245,240,228,.24);
  --line-soft:rgba(245,240,228,.13);
  --button:#F0E4CB;

  /* Helle Abschnitte: Creme mit dunkelgrüner Schrift */
  --light:#F1EDE2;
  --light-deep:#E7E1D2;
  --light-text:#14291F;
  --light-muted:#4A6155;
  --light-line:rgba(20,41,31,.18);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);

  --gutter:64px;
  --section-space:104px;
  --header-h:88px;
}

/* --- Reset / Basis --------------------------------------------------- */
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
body {
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img {display:block;max-width:100%;height:auto}
picture {display:contents}
a {color:inherit}
button,input,textarea,select {font:inherit;color:inherit}
ul,ol {margin:0;padding:0;list-style:none}
dl,dd {margin:0}
p {margin:0}
[hidden] {display:none!important}
:focus-visible {outline:2px solid var(--accent);outline-offset:5px}

.container {width:min(100% - (var(--gutter) * 2),1440px);margin-inline:auto}

h1,h2,h3 {font-family:var(--serif);font-weight:400;text-wrap:balance;margin:0}
h1 {font-size:clamp(48px,7vw,104px);line-height:.98;letter-spacing:-.035em}
h2 {font-size:clamp(36px,4.3vw,64px);line-height:1.05;letter-spacing:-.025em}
h3 {font-size:clamp(28px,2.4vw,36px);line-height:1.1}

.eyebrow {
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}

.hairline {display:block;height:1px;background:var(--line);width:100%;margin-top:18px}
.hairline-inline {display:inline-block;width:88px;margin:0 0 4px 16px;vertical-align:middle}
.hairline-short {display:inline-block;width:40px;margin-right:16px;vertical-align:middle}

.skip-link {
  position:absolute;left:24px;top:-100px;z-index:100;
  background:var(--button);color:var(--bg);padding:12px 20px;
  text-decoration:none;font-size:14px;transition:top 180ms var(--ease);
}
.skip-link:focus-visible {top:16px}

/* --- Buttons und Links ----------------------------------------------- */
.button {
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  min-height:48px;padding:12px 24px;
  background:var(--button);color:var(--bg);text-decoration:none;
  border:1px solid transparent;border-radius:1px;
  font-size:14px;letter-spacing:.02em;
  transition:background-color 300ms var(--ease),color 300ms var(--ease);
}
.button:hover {background:#fff4e0}
.button-outline {
  background:transparent;color:var(--text);border-color:var(--line);
}
.button-outline:hover {background:rgba(245,240,228,.08);border-color:var(--accent)}
.button-arrow {display:inline-block;transition:transform 220ms var(--ease)}
.button:hover .button-arrow,
.button:focus-visible .button-arrow,
.link-underline:hover .button-arrow,
.link-underline:focus-visible .button-arrow {transform:translate(3px,-3px)}

.link-underline {
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  text-decoration:none;font-size:15px;color:var(--text);
  border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:border-color 300ms var(--ease),color 300ms var(--ease);
}
.link-underline:hover {border-color:var(--accent);color:var(--accent)}

/* --- Header ----------------------------------------------------------- */
.site-header {
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:var(--header-h);display:flex;align-items:center;
  background-color:transparent;border-bottom:1px solid transparent;
  transition:background-color 250ms var(--ease),border-color 250ms var(--ease);
}
.site-header.is-scrolled {background-color:rgba(var(--overlay),.96);border-color:var(--line)}
.header-inner {display:flex;align-items:center;justify-content:space-between;gap:32px}

.wordmark {text-decoration:none;display:inline-block;line-height:1}
.wordmark-name {
  display:block;font-family:var(--serif);font-size:32px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text);
}
.wordmark-sub {
  display:block;font-size:9px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--accent);margin-top:6px;padding-left:.2em;
}

.primary-nav {display:flex;align-items:center;gap:40px}
.nav-list {display:flex;align-items:center;gap:36px}
.nav-list a {
  text-decoration:none;font-size:14px;color:var(--muted);
  position:relative;padding:12px 0;display:inline-block;
  transition:color 250ms var(--ease);
}
.nav-list a::after {
  content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform 300ms var(--ease);
}
.nav-list a:hover {color:var(--text)}
.nav-list a:hover::after,.nav-list a:focus-visible::after {transform:scaleX(1)}
.nav-cta {min-height:44px;padding:10px 20px}

.menu-toggle {
  display:none;align-items:center;gap:12px;
  min-height:44px;padding:8px 4px;background:none;border:0;cursor:pointer;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text);
}
.menu-toggle-bars {display:block;width:26px}
.menu-toggle-bars i {
  display:block;height:1px;background:var(--text);
  transition:transform 250ms var(--ease),opacity 250ms var(--ease);
}
.menu-toggle-bars i + i {margin-top:7px}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:first-child {transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:last-child {transform:translateY(-4px) rotate(-45deg)}

/* --- Hero ------------------------------------------------------------- */
.hero {
  position:relative;isolation:isolate;overflow:hidden;
  min-height:760px;display:grid;align-items:center;
  padding-block:calc(var(--header-h) + 72px) 108px;
}
.hero-image {
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;z-index:-2;
  animation:hero-settle 1800ms var(--ease) both;
}
.hero::after {
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(var(--overlay),.82),rgba(var(--overlay),.42) 48%,rgba(var(--overlay),.14) 74%),
    linear-gradient(0deg,rgba(var(--overlay),.46),transparent 45%),
    linear-gradient(180deg,rgba(var(--overlay),.55),transparent 22%);
}
.hero-inner {max-width:900px}
.hero-reveal {animation:hero-enter 900ms var(--ease) both;animation-delay:var(--delay,0ms)}
.hero h1 {margin-block:26px 22px}
.hero-lead {font-size:clamp(17px,1.5vw,21px);color:var(--text);max-width:640px}
.hero-actions {display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;margin-top:40px}

.hero-keywords {
  position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:14px;text-align:right;
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(245,240,228,.92);
  padding-right:26px;text-shadow:0 1px 10px rgba(var(--overlay),.85);
}
.hero-keywords::after {
  content:"";position:absolute;right:0;top:4px;bottom:4px;width:1px;background:var(--line);
}
.hero-scrollline {
  position:absolute;left:var(--gutter);bottom:56px;width:120px;height:1px;
  background:linear-gradient(90deg,var(--accent),rgba(245,240,228,.12));
}

@keyframes hero-settle {from{transform:scale(1.035)}to{transform:scale(1)}}
@keyframes hero-enter {from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* --- Sections --------------------------------------------------------- */
.section {padding-block:var(--section-space)}

/* 3. Gruppeneinleitung */
.intro-section {
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--deep);
}
.intro-grid {display:grid;grid-template-columns:32% 1fr;gap:48px}
.intro-body h2 {margin-bottom:24px}
.intro-body p {color:var(--muted);max-width:720px;font-size:clamp(16px,1.3vw,19px)}

/* 4. Geschäftsbereiche */
.business-section {background:var(--bg)}
.business-head {
  display:grid;grid-template-columns:1fr auto;gap:48px;
  align-items:end;margin-bottom:56px;
}
.business-head h2 {margin-top:22px}
.business-head-note {color:var(--muted);font-size:16px;line-height:1.7;max-width:320px}

.business-grid {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.business-card {
  position:relative;isolation:isolate;overflow:hidden;
  grid-column:span 2;min-height:500px;
  border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:32px;transition:border-color 300ms var(--ease);
}
.business-card.featured {grid-column:span 3;min-height:480px}
.card-media {
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;transition:transform 900ms var(--ease);
}
/* Ausschnitte so gewählt, dass der eingebaute RT-GRUPPE-Schriftzug
   im Bild vollständig sichtbar bleibt (Position je Motiv unterschiedlich). */
.media-finance {object-position:14% 30%}      /* Schriftzug oben links */
.media-media {object-position:50% 50%}        /* Schriftzug auf dem Monitor */
.media-innovation {object-position:28% 18%}   /* Schriftzug oben links */
.media-trade {object-position:42% 44%}        /* Schriftzug am Schiffsrumpf */
.media-realestate {object-position:60% 55%}   /* Schriftzug mittig rechts */
.business-card::after {
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(var(--overlay),.34),rgba(var(--overlay),.08) 30%,rgba(var(--overlay),.56) 60%,rgba(var(--overlay),.97));
}
.card-index {color:var(--text)}
.card-body {margin-top:auto}
.card-body h3 {margin-bottom:12px}
.business-card p {font-size:15px;color:var(--muted)}
.card-claim {color:var(--text);margin-bottom:8px;font-size:16px}
.card-services {font-size:14px;letter-spacing:.01em}
.card-status {
  margin-top:18px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(211,178,120,.42);
  padding:7px 12px;display:inline-block;
}
@media (min-width:1100px) {.card-status {white-space:nowrap}}
.business-card:not(.featured) h3 {font-size:clamp(26px,2vw,30px)}
.card-body .button {margin-top:22px}
.business-card:focus-within {border-color:var(--accent)}

@media (hover:hover) and (pointer:fine) {
  .business-card:hover .card-media {transform:scale(1.035)}
  .business-card:hover {border-color:rgba(211,178,120,.62)}
}

/* 5. Haltung */
.stance {display:grid;grid-template-columns:55% 45%;background:var(--deep)}
.stance-media {position:relative;min-height:560px;overflow:hidden}
/* Alpen: Schriftzug unten links – Ausschnitt hält die untere linke Ecke. */
.stance-media img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 72%}
.stance-body {display:flex;align-items:center;padding:96px clamp(32px,5vw,88px)}
.stance-inner {max-width:620px}
.stance-body h2 {margin-block:24px 48px}
.values {display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.value {border-top:1px solid var(--line);padding-top:18px}
.value dt {font-size:16px;color:var(--text);margin-bottom:8px}
.value dd {font-size:14px;color:var(--muted);line-height:1.55}

/* 6. Kontaktabschluss */
.contact-section {
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg);
}
.contact-grid {display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center}
.contact-action {max-width:420px}
.contact-lead {color:var(--muted);font-size:16px;margin-bottom:26px}
.contact-note {
  margin-top:20px;font-size:12px;line-height:1.6;color:rgba(196,210,201,.75);
  border-left:1px solid var(--line);padding-left:14px;
}

/* --- Footer ----------------------------------------------------------- */
.site-footer {background:var(--deep);padding-block:64px 40px}
.footer-grid {
  display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:center;
  padding-bottom:36px;
}
.footer-domains {display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;font-size:14px}
.footer-domains span[aria-current] {color:var(--muted)}
.footer-legal {display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:flex-end;font-size:14px}
.footer-legal a {text-decoration:none;color:var(--muted);transition:color 250ms var(--ease)}
.footer-legal a:hover {color:var(--text)}
.footer-legal .is-pending {color:rgba(196,210,201,.45);cursor:default}
.footer-baseline {
  display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;
  border-top:1px solid var(--line-soft);padding-top:28px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(196,210,201,.7);
}

/* --- Reveal ----------------------------------------------------------- */
[data-reveal] {opacity:1;transform:none}
[data-reveal].reveal-pending {opacity:0;transform:translateY(20px)}
[data-reveal].reveal-ready {
  transition:opacity 800ms var(--ease),transform 800ms var(--ease);
  transition-delay:var(--delay,0ms);
}

/* =========================================================
   Tablet 768–1099 px
   ========================================================= */
@media (max-width:1099px) {
  :root {--gutter:32px;--section-space:80px}
  .container {width:calc(100% - (var(--gutter) * 2))}
  .hero {min-height:640px}
  .hero-keywords {display:none}
  .intro-grid {grid-template-columns:28% 1fr;gap:32px}
  .business-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .business-card,.business-card.featured {grid-column:auto;min-height:440px}
  .business-card:last-child {grid-column:1 / -1;min-height:420px}
  .stance {grid-template-columns:1fr}
  .stance-media {min-height:420px}
  .stance-body {padding:64px 32px}
  .values {gap:24px}
  .card-status {letter-spacing:.1em;padding:7px 10px}
  .contact-grid {grid-template-columns:1fr;gap:32px;align-items:start}
  .contact-action {max-width:560px}
}

/* =========================================================
   Kompakte Navigation < 900 px (Disclosure-Menü)
   ========================================================= */
@media (max-width:899px) {
  :root {--header-h:72px}
  html {scroll-padding-top:88px}

  .site-header {height:var(--header-h)}
  .site-header.is-menu-open {background-color:var(--deep);border-color:var(--line)}
  .wordmark-name {font-size:26px}
  .menu-toggle {display:inline-flex}

  .primary-nav {
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--deep);border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 28px;
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  }
  .primary-nav[hidden] {display:none}
  .nav-list {flex-direction:column;align-items:stretch;gap:0}
  .nav-list li + li {border-top:1px solid var(--line-soft)}
  .nav-list a {
    display:block;padding:18px 0;font-size:18px;color:var(--text);
    font-family:var(--serif);letter-spacing:0;
  }
  .nav-list a::after {display:none}
  .nav-cta {margin-top:22px;width:100%}

  /* Ohne JavaScript: kein Disclosure-Button, Navigation flach im Header-Block. */
  html:not(.js) .menu-toggle {display:none}
  html:not(.js) .site-header {position:static;height:auto;padding-block:14px 18px;background-color:var(--deep);border-bottom-color:var(--line)}
  html:not(.js) .hero {padding-block:64px 76px}
  html:not(.js) .header-inner {flex-wrap:wrap;gap:16px}
  html:not(.js) .primary-nav {
    position:static;width:100%;background:none;border:0;padding:0;max-height:none;
  }
  html:not(.js) .nav-list a {padding:12px 0;font-size:16px}
}

/* =========================================================
   Mobile < 768 px
   ========================================================= */
@media (max-width:767px) {
  :root {--gutter:20px;--section-space:60px}
  body {font-size:16px}

  .hero {min-height:680px;padding-block:calc(var(--header-h) + 58px) 76px}
  .hero-image {object-position:60% 50%}
  .hero::after {
    background:
      linear-gradient(90deg,rgba(var(--overlay),.86),rgba(var(--overlay),.56) 70%),
      linear-gradient(0deg,rgba(var(--overlay),.55),transparent 50%),
      linear-gradient(180deg,rgba(var(--overlay),.6),transparent 26%);
  }
  .hero h1 {margin-block:20px 18px}
  .hero-actions {flex-direction:column;align-items:flex-start;gap:18px;margin-top:32px}
  .hero-actions .button {width:100%}
  .hero-scrollline {left:var(--gutter);bottom:36px;width:84px}

  .intro-grid {grid-template-columns:1fr;gap:28px}
  .business-head {grid-template-columns:1fr;gap:24px;align-items:start;margin-bottom:36px}
  .business-head-note {max-width:none}
  .business-grid {grid-template-columns:1fr}
  .business-card,.business-card.featured {grid-column:auto;min-height:470px;padding:24px}
  .business-card:last-child {grid-column:auto}

  .stance-media {min-height:340px}
  .stance-body {padding:52px 20px 60px}
  .stance-body h2 {margin-block:18px 34px}
  .values {grid-template-columns:1fr;gap:20px}

  .contact-grid {grid-template-columns:1fr;gap:32px;align-items:start}
  .contact-action {max-width:none}
  .contact-action .button {width:100%}

  .footer-grid {grid-template-columns:1fr;gap:28px;justify-items:start;text-align:left}
  .footer-domains,.footer-legal {justify-content:flex-start}
  .footer-baseline {flex-direction:column;gap:12px}
}

@media (max-width:359px) {
  .hero h1 {font-size:42px}
  .business-card {padding:20px}
}

/* =========================================================
   Reduzierte Bewegung
   ========================================================= */
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {animation:none!important;transition:none!important}
  [data-reveal].reveal-pending {opacity:1!important;transform:none!important}
  .hero-image,.card-media,.button-arrow {transform:none!important}
}

/* =========================================================
   V2 – Unterseiten (/finance, /media), Formulare, Rechtsseiten
   Basis: code-bausteine/unterseiten.css, vollständig ausgebaut
   ========================================================= */

/* Aktiver Navigationspunkt */
.nav-list a[aria-current="page"] {
  color:var(--text);
  text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:10px;
}
.nav-list a[aria-current="page"]::after {display:none}
.footer-legal a[aria-current="page"],
.footer-domains a[aria-current="page"] {color:var(--text)}

/* Breadcrumb */
.breadcrumb {padding-block:calc(var(--header-h) + 26px) 0;background:var(--deep)}
.breadcrumb ol {display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted)}
.breadcrumb a {text-decoration:none;border-bottom:1px solid transparent;transition:border-color 250ms var(--ease)}
.breadcrumb a:hover {border-color:var(--accent)}
.breadcrumb li + li::before {content:"/";margin-right:10px;color:rgba(196,210,201,.5)}
.breadcrumb [aria-current="page"] {color:var(--text)}

/* Unterseiten-Hero: Text und Bild strikt getrennt, kein Textüberlappen */
.subpage-hero {
  display:grid;grid-template-columns:minmax(0,48fr) minmax(0,52fr);
  align-items:stretch;background:var(--deep);border-bottom:1px solid var(--line);
}
.subpage-hero__copy {
  padding:80px clamp(24px,4vw,64px) 88px;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
}
.subpage-hero__copy > * {max-width:680px}
.subpage-hero h1 {font-size:clamp(42px,4.4vw,78px);line-height:1.02;hyphens:auto;margin-block:22px 20px}
.subpage-hero--media h1 {font-size:clamp(44px,5.8vw,88px)}
.subpage-hero__lead {color:var(--muted);font-size:clamp(16px,1.4vw,19px);max-width:520px}
.subpage-hero__actions {display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:40px}
.subpage-hero__figure {position:relative;overflow:hidden;min-height:520px;background:var(--deep)}
.subpage-hero__image {
  width:100%;height:100%;object-fit:cover;object-position:center;
  animation:hero-split 1400ms var(--ease) both;
}
.subpage-hero--finance .subpage-hero__image {object-position:32% 45%}
.subpage-hero--media .subpage-hero__image {object-position:50% 50%}
@keyframes hero-split {from{transform:scale(1.025)}to{transform:scale(1)}}

/* Abschnitts-Kopf für Unterseiten */
.section-head {display:grid;grid-template-columns:1fr minmax(0,380px);gap:48px;align-items:end;margin-bottom:56px}
.section-head h2 {margin-top:20px}
.section-head p {color:var(--muted);font-size:16px;line-height:1.7}
.eyebrow-rule {display:flex;align-items:center;gap:20px}
.eyebrow-rule .hairline {width:88px;margin-top:0;flex:none}

/* Leistungen */
.service-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.service-grid--media {grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px}
.service-block {border-top:1px solid var(--line);padding-top:24px}
.service-block__index {font-size:11px;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:14px}
.service-block h3 {font-size:clamp(24px,2vw,30px);margin-bottom:10px}
.service-block__sub {color:var(--text);font-size:15px;margin-bottom:14px}
.service-block p:last-child {color:var(--muted);font-size:16px;line-height:1.7;max-width:46ch}

/* Prozess */
.process-section {background:var(--deep);border-block:1px solid var(--line)}
.process-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.process-step {position:relative;padding-top:30px;border-top:1px solid var(--line)}
.process-step__index {
  position:absolute;top:-19px;left:0;
  width:38px;height:38px;border:1px solid rgba(211,178,120,.55);border-radius:50%;
  display:grid;place-items:center;background:var(--deep);
  font-size:11px;letter-spacing:.1em;color:var(--accent);
}
.process-step h3 {font-size:clamp(20px,1.6vw,24px);margin-block:16px 10px}
.process-step p {color:var(--muted);font-size:15px;line-height:1.65}

/* Haltung auf Unterseiten */
.approach-grid {display:grid;grid-template-columns:1fr minmax(0,420px);gap:64px;align-items:start}
.approach-grid h2 {margin-top:20px}
.approach-grid > div:first-child p {color:var(--muted);margin-top:22px;max-width:46ch;font-size:17px}
.approach-values {border-left:1px solid var(--line);padding-left:48px}
.approach-values li {border-bottom:1px solid var(--line);padding-block:18px}
.approach-values li:first-child {padding-top:0}
.approach-values strong {font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,28px);display:block}
.approach-values span {color:var(--muted);font-size:14px;display:block;margin-top:6px}

/* FAQ – native details/summary, ohne JS vollständig nutzbar */
.faq-grid {display:grid;grid-template-columns:1fr minmax(0,58%);gap:64px;align-items:start}
.faq details {border-bottom:1px solid var(--line);padding-block:20px}
.faq details:first-of-type {border-top:1px solid var(--line)}
.faq summary {
  cursor:pointer;min-height:44px;font-size:18px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:6px;transition:color 250ms var(--ease);
}
.faq summary::-webkit-details-marker {display:none}
.faq summary:hover {color:var(--accent)}
.faq summary::after {
  content:"";flex:none;width:14px;height:14px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/14px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1px 14px no-repeat;
  transition:transform 180ms var(--ease);
}
.faq details[open] summary::after {transform:rotate(90deg);background-size:14px 1px,0 0}
.faq details p {max-width:65ch;color:var(--muted);font-size:16px;line-height:1.7;margin-top:14px}

/* Anfragebereich und Formular */
.request-section {background:var(--deep);border-top:1px solid var(--line)}
.request-grid {display:grid;grid-template-columns:minmax(0,40%) 1fr;gap:64px;align-items:start}
.request-intro p {color:var(--muted);margin-top:22px;max-width:40ch}
.request-contact {margin-top:32px;font-size:15px}
.request-contact a {color:var(--accent);text-underline-offset:4px}
.form-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.field {display:flex;flex-direction:column;gap:8px}
.field--wide {grid-column:1 / -1}
.field label {font-size:13px;letter-spacing:.04em;color:var(--muted)}
.field .req {color:var(--accent)}
.field input,.field textarea,.field select {
  background:rgba(245,240,228,.04);border:1px solid var(--line);border-radius:1px;
  color:var(--text);padding:14px 16px;min-height:48px;font-size:16px;
  transition:border-color 250ms var(--ease),background-color 250ms var(--ease);
}
.field textarea {min-height:132px;resize:vertical;line-height:1.6}
.field input:hover,.field textarea:hover,.field select:hover {border-color:rgba(245,240,228,.4)}
.field input:focus,.field textarea:focus,.field select:focus {outline:none;border-color:var(--accent);background:rgba(245,240,228,.07)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
.field .error {font-size:13px;color:#e3a9a0;min-height:0}
.field[data-invalid] input,.field[data-invalid] textarea,.field[data-invalid] select {border-color:#e3a9a0}
.form-note {grid-column:1 / -1;font-size:13px;line-height:1.6;color:rgba(196,210,201,.8);border-left:1px solid var(--line);padding-left:14px}
.form-actions {grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:4px}
.form-status {font-size:14px;line-height:1.6;max-width:52ch}
.form-status:empty {display:none}
.form-status[data-state="info"] {color:var(--accent)}
.form-status[data-state="error"] {color:#e3a9a0}
.form-privacy {grid-column:1 / -1;font-size:12px;color:rgba(196,210,201,.75);line-height:1.6}

/* Rechts- und Textseiten */
.legal-page {padding-block:calc(var(--header-h) + 72px) 96px}
.legal-page .container {max-width:820px}
.legal-page h1 {font-size:clamp(40px,4.6vw,64px);margin-bottom:16px}
.legal-page h2 {font-size:clamp(24px,2.2vw,32px);margin-block:48px 16px}
.legal-page h3 {font-size:20px;margin-block:28px 8px}
.legal-page p,.legal-page li {color:var(--muted);font-size:16px;line-height:1.75}
.legal-page p + p {margin-top:14px}
.legal-page ul {list-style:disc;padding-left:22px;margin-top:12px;display:grid;gap:8px}
.legal-page a {color:var(--accent);text-underline-offset:4px}
.legal-lead {color:var(--text)!important;font-size:18px!important}
.data-list {display:grid;grid-template-columns:minmax(0,200px) 1fr;gap:12px 32px;margin-top:20px}
.data-list dt {font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(196,210,201,.75);padding-top:3px}
.data-list dd {color:var(--text);font-size:16px}
.legal-note {
  margin-top:48px;border:1px solid var(--line);padding:22px 24px;
  font-size:14px;line-height:1.7;color:var(--muted);
}

/* ---- Tablet ---- */
@media (max-width:1099px) {
  .subpage-hero__figure {min-height:420px}
  .subpage-hero__copy {padding:64px 32px 72px}
  .service-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}
  .service-grid > .service-block:last-child:nth-child(odd) {grid-column:1 / -1}
  .process-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 32px}
  .section-head {grid-template-columns:1fr;gap:20px;align-items:start;margin-bottom:40px}
  .approach-grid,.faq-grid,.request-grid {grid-template-columns:1fr;gap:40px}
  .approach-values {border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .approach-values li:first-child {padding-top:18px}
}

/* ---- Unter 900 px: Hero einspaltig, Text zuerst, Foto ungeschnitten ---- */
@media (max-width:899px) {
  .subpage-hero {grid-template-columns:1fr}
  .subpage-hero h1 {font-size:clamp(40px,6.4vw,58px)}
  .subpage-hero__copy {padding:56px clamp(20px,4vw,32px) 48px}
  .subpage-hero__figure {min-height:0;border-top:1px solid var(--line)}
  .subpage-hero__image {height:auto;object-fit:contain}
}

/* ---- Mobile ---- */
@media (max-width:767px) {
  .breadcrumb {padding-top:calc(var(--header-h) + 20px)}
  .subpage-hero__copy {padding:44px 20px 40px}
  .subpage-hero h1 {font-size:clamp(38px,11vw,52px)}
  .subpage-hero__actions {flex-direction:column;align-items:stretch;gap:16px;margin-top:32px}
  .subpage-hero__actions .button {width:100%}
  .subpage-hero__actions .link-underline {justify-content:center}

  .service-grid,.service-grid--media,.process-grid {grid-template-columns:1fr;gap:36px}
  .service-grid > .service-block:last-child:nth-child(odd) {grid-column:auto}
  .process-grid {gap:44px}
  .form-grid {grid-template-columns:1fr}
  .form-actions .button {width:100%}
  .data-list {grid-template-columns:1fr;gap:4px 0}
  .data-list dd + dt {margin-top:14px}
  .legal-page {padding-block:calc(var(--header-h) + 48px) 72px}
}

/* --- V2: Kartenaktionen auf der Startseite --------------------------- */
.card-actions {display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:22px}
.card-actions .button {margin-top:0}
.footer-domains a {text-decoration:none}
.footer-domains > li > a:not(.link-underline) {color:var(--muted);transition:color 250ms var(--ease)}
.footer-domains > li > a:not(.link-underline):hover {color:var(--text)}

/* Startseiten-Hero: Schlagworte oben rechts, damit sie den im Bild
   integrierten RT-GRUPPE-Schriftzug nicht überlagern. */
.hero-keywords {top:30%;transform:none}
@media (max-width:1399px) {.hero-keywords {display:none}}

/* Mobile: Hero-Text und gebrandetes Foto strikt getrennt */
@media (max-width:767px) {
  .hero {
    display:flex;flex-direction:column;min-height:0;overflow:visible;
    padding-block:calc(var(--header-h) + 44px) 0;background:var(--deep);
  }
  .hero-inner {order:1;margin-bottom:44px}
  .hero picture {display:contents}
  .hero-image {
    position:static;order:2;width:100%;height:auto;
    object-fit:contain;object-position:center;animation:none;
    border-top:1px solid var(--line);
  }
  .hero::after {display:none}
  .hero-scrollline {display:none}
  .card-actions {flex-direction:column;align-items:stretch;gap:16px}
  .card-actions .button {width:100%}
  .card-actions .link-underline {justify-content:center}
}
.field .optional {color:rgba(196,210,201,.6)}
.noscript-note {grid-column:1 / -1}

/* Sehr schmale Displays: lange Komposita wie "Handlungsspielraum"
   müssen vollständig in eine Zeile passen, ohne Wortbruch. */
@media (max-width:360px) {
  .subpage-hero h1 {font-size:30px;letter-spacing:-.02em}
}

/* Externe Bereichsdomains auf der Gruppenseite */
.nav-ext {font-size:10px;margin-left:4px;color:var(--accent)}
.card-domain {
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(196,210,201,.85);
}

/* =========================================================
   Helle Abschnitte (Creme auf Racing Green)
   ========================================================= */
.section--light {
  background:var(--light);color:var(--light-text);
  border-block:1px solid var(--light-line);
}
.section--light h2,.section--light h3,.section--light .legal-lead {color:var(--light-text)}
.section--light .eyebrow {color:var(--light-muted)}
.section--light p {color:var(--light-muted)}
.section--light .hairline {background:var(--light-line)}
.section--light .service-block,
.section--light .process-step,
.section--light .approach-values li,
.section--light .faq details,
.section--light .faq details:first-of-type {border-color:var(--light-line)}
.section--light .service-block__index,
.section--light .process-step__index {color:#3C5C4B}
.section--light .process-step__index {background:var(--light);border-color:rgba(20,41,31,.3)}
.section--light .service-block__sub,
.section--light .value dt,
.section--light .approach-values strong {color:var(--light-text)}
.section--light .faq summary {color:var(--light-text)}
.section--light .faq summary:hover {color:#2C6B4F}
.section--light .faq summary::after {
  background:
    linear-gradient(#3C5C4B,#3C5C4B) center/14px 1px no-repeat,
    linear-gradient(#3C5C4B,#3C5C4B) center/1px 14px no-repeat;
}
.section--light .faq details[open] summary::after {background-size:14px 1px,0 0}
.section--light .button {background:var(--light-text);color:var(--light);}
.section--light .button:hover {background:#24493A}
.section--light :focus-visible {outline-color:#2C6B4F}
.section--light .link-underline {color:var(--light-text);border-color:var(--light-line)}
.section--light .link-underline:hover {color:#2C6B4F;border-color:#2C6B4F}

/* =========================================================
   Erweiterte Bewegung – ruhig, einmalig, reduced-motion-fest
   ========================================================= */

/* Scroll-Fortschritt im Header */
.scroll-progress {
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;
  background:linear-gradient(90deg,var(--accent),rgba(211,178,120,.25));
  transform:scaleX(var(--progress,0));transform-origin:left;
  will-change:transform;pointer-events:none;
}

/* Überschriften zeilenweise aufdecken – gesteuert vom vorhandenen Reveal-System */
.line-reveal {display:block;overflow:hidden;padding-bottom:.04em}
.line-reveal > span {display:block;transform:none;transition:transform 900ms var(--ease)}
[data-reveal].reveal-pending .line-reveal > span {transform:translateY(108%)}
[data-reveal].reveal-ready .line-reveal:nth-child(2) > span {transition-delay:90ms}
[data-reveal].reveal-ready .line-reveal:nth-child(3) > span {transition-delay:180ms}

/* Haarlinien zeichnen sich beim Eintritt */
.hairline {transform-origin:left;transition:transform 900ms var(--ease)}
[data-reveal].reveal-pending .hairline {transform:scaleX(0)}

/* Karten und Blöcke heben sich dezent */
.service-block {transition:transform 500ms var(--ease),border-color 400ms var(--ease)}
@media (hover:hover) and (pointer:fine) {
  .service-block:hover {transform:translateY(-4px);border-color:var(--accent-soft)}
  .process-step:hover .process-step__index {border-color:var(--accent);color:var(--text)}
  .button {overflow:hidden;position:relative}
  .button::after {
    content:"";position:absolute;inset:0;background:rgba(255,255,255,.28);
    transform:translateX(-101%) skewX(-12deg);transition:transform 700ms var(--ease);
  }
  .button:hover::after {transform:translateX(101%) skewX(-12deg)}
  .value:hover dt,.approach-values li:hover strong {color:var(--accent)}
}
.process-step__index {transition:border-color 400ms var(--ease),color 400ms var(--ease)}
.value dt,.approach-values strong {transition:color 300ms var(--ease)}

/* Wortmarke reagiert dezent */
.wordmark .wordmark-sub {transition:letter-spacing 500ms var(--ease)}
.wordmark:hover .wordmark-sub {letter-spacing:.48em}
.wordmark--unit:hover .wordmark-sub {letter-spacing:.26em}

/* Bildkarten: Verlauf zieht beim Hover leicht an */
.business-card::after {transition:opacity 600ms var(--ease)}
@media (hover:hover) and (pointer:fine) {
  .business-card:hover::after {opacity:.82}
}

@media (prefers-reduced-motion:reduce) {
  .scroll-progress {display:none}
  .line-reveal > span {transform:none!important;transition:none!important}
  .hairline {transform:none!important}
  .button::after {display:none}
}

/* Formular: Bot-Falle unsichtbar, Statusfarben */
.honeypot {position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status[data-state="ok"] {color:#8FCBA5}
.section--light .form-status[data-state="ok"] {color:#1F6B44}
.section--light .form-status[data-state="error"] {color:#A4302A}
.section--light .field input,
.section--light .field textarea,
.section--light .field select {background:rgba(20,41,31,.04);border-color:var(--light-line);color:var(--light-text)}
.section--light .field label {color:var(--light-muted)}
.section--light .form-note,
.section--light .form-privacy {color:var(--light-muted);border-color:var(--light-line)}

/* Helle Abschnitte: Fliesstexte verbindlich auf den dunklen Grünton */
.section--light .service-block p,
.section--light .service-block p:last-child,
.section--light .faq details p,
.section--light .process-step p,
.section--light .section-head p,
.section--light .request-intro p,
.section--light .intro-body p,
.section--light .contact-lead,
.section--light .contact-note,
.section--light .business-head-note,
.section--light .approach-values span,
.section--light .value dd,
.section--light .card-services,
.section--light .legal-page p,
.section--light .legal-page li {color:var(--light-muted)}
.section--light .contact-note {border-color:var(--light-line)}
.section--light .contact-note a,
.section--light .intro-body a,
.section--light a:not(.button) {color:#1F5A3E}
.section--light .card-status {color:#1F5A3E;border-color:rgba(31,90,62,.4)}

/* Lange Komposita in Rechtsseiten-Überschriften umbrechen lassen */
.legal-page h1 {hyphens:auto;overflow-wrap:break-word}
.legal-page h2 {hyphens:auto}
@media (max-width:400px) {
  .legal-page h1 {font-size:clamp(26px,8vw,34px)}
}