/*
Theme Name: Trail Ranger
Theme URI: https://trail-ranger.de/
Author: Trail Ranger
Description: Responsives WordPress-Theme für Trail Ranger. Abgeleitet aus dem freigegebenen Release Candidate v1.4.4 RC2.
Version: 1.5.0-rc1
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: trail-ranger
*/
:root {
  --forest: #234a34;
  --trail-orange: #d96b1f;
  --ink: #292a28;
  --paper: #fbfaf7;
  --line: #dfdfda;
  --page: 1536px;
  --line-spacing: 30px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
.page { width: min(100%, var(--page)); margin: 0 auto; }

.topbar {
  min-height: 52px;
  background: var(--forest);
  color: #fff;
  font-size: 14px;
}

.topbar__inner {
  min-height: 52px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.topbar__message { font-weight: 500; }
.topbar__contact { display: flex; align-items: center; gap: 36px; }
.topbar__contact a { text-decoration: none; }
.topbar__contact a:hover { text-decoration: underline; }

.header {
  height: 126px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.header__inner {
  height: 100%;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 390px 1fr;
  align-items: center;
  gap: 40px;
}

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

.brand__logo {
  width: 76px;
  height: 96px;
  display: block;
  object-fit: contain;
}

.brand__claim {
  max-width: 210px;
  color: var(--forest);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
}

.nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
}

.nav a {
  position: relative;
  padding: 12px 0 20px;
  text-decoration: none;
}

.nav a:hover { color: var(--forest); }

.nav a.active::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: 8px;
  height: 4px;
  background: var(--forest);
  clip-path: polygon(0 44%, 18% 18%, 38% 36%, 58% 11%, 79% 32%, 100% 18%, 98% 72%, 77% 60%, 55% 79%, 33% 63%, 12% 84%, 1% 67%);
}

.hero { background: var(--paper); }

.hero__grid {
  padding: 16px 48px 52px;
  display: grid;
  grid-template-columns: minmax(0, 13fr) minmax(320px, 7fr);
  align-items: start;
  gap: 42px;
}

.hero__copy {
  padding-left: 10px;
  align-self: start;
}

.hero h1 {
  margin: 0;
  max-width: 760px;
  font-family: "Kalam", cursive;
  font-size: clamp(33px, 2.35vw, 38px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.025em;
}

.brush-line {
  width: 92px;
  height: 8px;
  margin: var(--line-spacing) 0;
  background: var(--forest);
  clip-path: polygon(0 43%, 18% 18%, 38% 31%, 58% 9%, 79% 27%, 100% 18%, 98% 67%, 80% 60%, 61% 80%, 38% 65%, 19% 83%, 0 70%);
}

.hero__copy p {
  margin: 0;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.62;
  color: #2f312f;
}

.paper-button {
  width: 245px;
  min-height: 41px;
  padding: 0 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--forest);
  color: #fff;
  text-decoration: none;
  font-family: "Kalam", cursive;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background-color .2s ease, transform .2s ease;
  clip-path: polygon(1% 8%, 10% 2%, 19% 7%, 31% 1%, 44% 6%, 57% 2%, 69% 7%, 81% 2%, 99% 7%, 97% 22%, 100% 39%, 98% 56%, 100% 76%, 98% 94%, 84% 98%, 71% 94%, 58% 99%, 45% 95%, 32% 99%, 19% 95%, 1% 98%, 4% 80%, 1% 61%, 4% 43%, 1% 24%);
}

.paper-button:hover,
.paper-button:focus-visible {
  background: var(--trail-orange);
  transform: translateY(-1px);
}

.paper-button:focus-visible {
  outline: 3px solid rgba(217, 107, 31, .3);
  outline-offset: 4px;
}

.paper-button__arrow {
  font-family: "Inter", sans-serif;
  font-size: 21px;
  font-weight: 400;
}

.hero__visual {
  margin: 0;
  width: 100%;
  max-width: 430px;
  height: 430px;
  overflow: hidden;
  align-self: start;
  justify-self: end;
}

.hero__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: left top;
  mix-blend-mode: multiply;
}

@media (max-width: 1180px) {
  .header { height: auto; }
  .header__inner { padding: 18px 30px; grid-template-columns: 1fr; }
  .nav { justify-self: start; flex-wrap: wrap; gap: 24px; }
  .hero__grid { grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); padding: 20px 30px 48px; gap: 28px; }
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { justify-self: start; max-width: 520px; height: auto; }
  .hero__visual img { height: auto; object-fit: contain; }
}

@media (max-width: 700px) {
  :root { --line-spacing: 24px; }
  .topbar__inner { padding: 10px 18px; align-items: flex-start; flex-direction: column; gap: 6px; }
  .topbar__contact { gap: 14px; flex-wrap: wrap; }
  .header__inner { padding: 16px 18px; }
  .brand__logo { width: 64px; height: 82px; }
  .brand__claim { font-size: 14px; }
  .nav { gap: 16px 22px; font-size: 15px; }
  .hero__grid { padding: 18px 18px 40px; }
  .hero__copy { padding-left: 0; }
  .hero h1 { font-size: 31px; }
  .hero__copy p { font-size: 16px; }
  .paper-button { width: min(245px, 100%); }
}

/* Sprint 02: Unser Ansatz */
.hero__intro {
  display: grid;
  gap: 22px;
  max-width: 720px;
}

.hero__intro p { margin: 0; }

.hero__statement {
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 700;
}

.approach {
  border-top: 1px solid var(--line);
  background: #f3f1ea;
}

.approach__inner {
  padding: 88px 48px 92px;
}

.section-heading {
  max-width: 850px;
}

.section-heading__eyebrow {
  margin: 0 0 10px;
  color: var(--trail-orange);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 0;
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.section-heading__intro {
  margin: 22px 0 0;
  max-width: 790px;
  color: #363835;
  font-size: 18px;
  line-height: 1.62;
}

.approach__line {
  margin: 34px 0 46px;
}

.approach__trail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.approach__trail::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 27px;
  left: 5%;
  right: 5%;
  height: 4px;
  background: var(--forest);
  opacity: .22;
  clip-path: polygon(0 40%, 14% 10%, 29% 55%, 43% 20%, 58% 63%, 73% 18%, 88% 52%, 100% 25%, 100% 76%, 88% 63%, 73% 88%, 58% 72%, 43% 91%, 29% 70%, 14% 88%, 0 67%);
}

.approach-step {
  position: relative;
  z-index: 1;
  padding-top: 74px;
}

.approach-step__marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 2px solid var(--forest);
  background: #f3f1ea;
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: 16px;
  font-weight: 700;
  clip-path: polygon(7% 12%, 31% 4%, 54% 8%, 76% 3%, 95% 17%, 98% 42%, 93% 67%, 97% 88%, 71% 96%, 47% 92%, 24% 98%, 5% 82%, 8% 57%, 3% 34%);
}

.approach-step h3 {
  margin: 0 0 14px;
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: 23px;
  line-height: 1.2;
}

.approach-step p {
  margin: 0;
  color: #373936;
  font-size: 15px;
  line-height: 1.65;
}

.approach__cta {
  margin-top: 52px;
}

.approach__cta .paper-button {
  width: 258px;
}

.next-section {
  padding: 36px 48px;
  background: var(--paper);
  color: #777a75;
  font-size: 14px;
}

@media (max-width: 1060px) {
  .approach__trail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 34px;
  }

  .approach__trail::before { display: none; }
}

@media (max-width: 700px) {
  .hero__intro { gap: 18px; }
  .hero__statement { font-size: 19px !important; }
  .approach__inner { padding: 64px 18px 68px; }
  .section-heading__intro { font-size: 16px; }
  .approach__line { margin: 28px 0 36px; }
  .approach__trail { grid-template-columns: 1fr; gap: 34px; }
  .approach-step { padding: 0 0 0 76px; min-height: 58px; }
  .approach-step__marker { top: 0; }
  .approach-step h3 { font-size: 21px; }
  .approach__cta { margin-top: 40px; }
  .approach__cta .paper-button { width: min(258px, 100%); }
  .next-section { padding: 28px 18px; }
}

/* v0.6: Ergänzung Hero und horizontale Schildstrecke */
.hero__access {
  max-width: 720px;
  margin-top: 30px;
}

.hero__access h2 {
  margin: 0 0 12px;
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: clamp(23px, 1.7vw, 28px);
  line-height: 1.25;
  letter-spacing: -.015em;
}

.hero__access p {
  margin: 0;
}

/* TR-TRAIL-01 */
.approach__trail {
  align-items: start;
  gap: 34px;
}

.approach__trail::before {
  top: 72px;
  left: 3%;
  right: 3%;
  height: 7px;
  opacity: .26;
  background: var(--forest);
  clip-path: polygon(0 51%, 8% 31%, 16% 55%, 24% 25%, 33% 49%, 42% 20%, 51% 48%, 60% 30%, 69% 60%, 78% 30%, 88% 50%, 100% 25%, 100% 68%, 88% 74%, 78% 54%, 69% 82%, 60% 57%, 51% 72%, 42% 47%, 33% 74%, 24% 51%, 16% 79%, 8% 58%, 0 76%);
}

.approach-step {
  padding-top: 0;
  text-align: left;
}

.approach-step--two,
.approach-step--four {
  transform: translateY(14px);
}

/* TR-SCHD-01 */
.trail-sign {
  position: relative;
  z-index: 2;
  width: min(100%, 235px);
  min-height: 72px;
  margin-bottom: 30px;
  display: grid;
  place-items: center;
  padding: 14px 24px;
  background: var(--forest);
  color: #fff;
  font-family: "Kalam", cursive;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
  filter: none;
}

.trail-sign::after {
  content: "";
  position: absolute;
  top: 0;
  width: 34px;
  height: 100%;
  background: var(--forest);
}

.trail-sign--right {
  clip-path: polygon(0 10%, 79% 4%, 100% 50%, 79% 96%, 0 90%, 3% 67%, 0 42%);
}
.trail-sign--right::after { display: none; }

.trail-sign--left {
  clip-path: polygon(21% 4%, 100% 10%, 97% 42%, 100% 67%, 21% 96%, 0 50%);
}
.trail-sign--left::after { display: none; }

.approach-step h3 {
  margin-top: 0;
  font-size: 22px;
}

@media (max-width: 1060px) {
  .approach-step--two,
  .approach-step--four { transform: none; }
  .trail-sign { margin-bottom: 22px; }
}

@media (max-width: 700px) {
  .hero__access { margin-top: 24px; }
  .hero__access h2 { font-size: 23px; }
  .approach-step { padding: 0; }
  .trail-sign { width: min(235px, 100%); }
}


/* v0.6.1 – Schilder und globale Überschriftenregeln */
:root {
  --wood-dark: #654628;
  --wood-mid: #8a6137;
  --wood-light: #a87945;
}

/* Alle Überschriften der Website sind verbindlich Waldgrün. */
h1, h2, h3, h4, h5, h6,
.section-heading__eyebrow,
.brand__claim {
  color: var(--forest);
}

/* Die beiden hervorgehobenen Hero-Zwischenüberschriften sind gleich groß. */
.hero__statement,
.hero__access h2 {
  color: var(--forest) !important;
  font-family: "Kalam", cursive;
  font-size: clamp(23px, 1.7vw, 28px) !important;
  line-height: 1.25 !important;
  font-weight: 700;
  letter-spacing: -.015em;
}

/* TR-BER-02: alle vier Stationen auf einer gemeinsamen Grundlinie. */
.approach__trail {
  align-items: start;
}

.approach-step,
.approach-step--two,
.approach-step--four {
  transform: none;
}

/* TR-SCHD-01 – Holzwegweiser nach dem Vorbild der Hero-Illustration. */
.trail-sign {
  position: relative;
  width: min(100%, 240px);
  min-height: 74px;
  margin: 0 0 28px;
  padding: 14px 27px;
  display: grid;
  place-items: center;
  color: #fff8e8;
  font-family: "Kalam", cursive;
  font-size: 19px;
  line-height: 1.12;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 0 rgba(46, 28, 13, .48);
  border: 2px solid rgba(78, 50, 24, .72);
  background:
    linear-gradient(7deg, transparent 0 19%, rgba(255,255,255,.07) 20% 22%, transparent 23% 62%, rgba(54,31,13,.10) 63% 65%, transparent 66%),
    repeating-linear-gradient(2deg, rgba(255,255,255,.035) 0 2px, rgba(62,38,17,.045) 2px 4px, transparent 4px 9px),
    linear-gradient(100deg, var(--wood-dark), var(--wood-mid) 34%, var(--wood-light) 62%, var(--wood-mid));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -2px 0 rgba(61,37,16,.22);
}

.trail-sign::before {
  content: "";
  position: absolute;
  inset: 7px 12px;
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(67,40,17,.16);
  pointer-events: none;
}

.trail-sign--right {
  clip-path: polygon(0 8%, 79% 4%, 100% 50%, 79% 96%, 0 92%, 2% 67%, 0 42%);
}

.trail-sign--left {
  clip-path: polygon(21% 4%, 100% 8%, 98% 42%, 100% 67%, 21% 96%, 0 50%);
}

/* Beschriftung steht ausschließlich auf dem Schild. */
.approach-step h3 { display: none; }

.approach-step p {
  margin: 0;
  max-width: 250px;
}

/* Der horizontale Trail liegt bei allen vier Schildern auf gleicher Höhe. */
.approach__trail::before {
  top: 34px;
}

@media (max-width: 1060px) {
  .approach-step,
  .approach-step--two,
  .approach-step--four { transform: none; }
}

@media (max-width: 700px) {
  .hero__statement,
  .hero__access h2 { font-size: 23px !important; }
  .trail-sign { width: min(240px, 100%); }
}


/* v0.6.2 – Präzisierung nach Nutzerfeedback */
.topbar__message {
  white-space: nowrap;
}

.brand {
  align-items: center;
  gap: 16px;
}

.brand__claim {
  display: grid;
  gap: 1px;
  max-width: none;
  min-width: 132px;
  line-height: 1.16;
  text-align: left;
}

.brand__claim span {
  display: block;
}

/* Hero-CTA entfernt: Der Ansatz folgt unmittelbar unter dem Hero. */
.hero__copy > .brush-line:last-child {
  margin-bottom: 0;
}

/* TR-SCHD-01: alle Wegweiser zeigen nach rechts und erhalten eine sichtbare Holzmaserung. */
.trail-sign,
.trail-sign--left,
.trail-sign--right {
  clip-path: polygon(0 8%, 78% 4%, 100% 50%, 78% 96%, 0 92%, 2% 67%, 0 42%);
  border: 2px solid rgba(72, 43, 19, .82);
  background:
    radial-gradient(ellipse at 19% 36%, transparent 0 7px, rgba(58, 34, 15, .28) 8px 9px, transparent 10px 17px),
    radial-gradient(ellipse at 62% 70%, transparent 0 5px, rgba(255, 239, 204, .12) 6px 7px, transparent 8px 15px),
    repeating-linear-gradient(1deg,
      rgba(255,255,255,.00) 0 3px,
      rgba(255,244,216,.10) 4px 5px,
      rgba(63,37,16,.12) 6px 7px,
      rgba(255,255,255,.00) 8px 13px),
    repeating-linear-gradient(94deg,
      rgba(50,29,12,.08) 0 1px,
      transparent 2px 13px,
      rgba(255,255,255,.04) 14px 15px,
      transparent 16px 27px),
    linear-gradient(100deg, #5f4023 0%, #81572f 27%, #a5743f 55%, #7a502b 79%, #5f3d20 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 248, 224, .14),
    inset 0 -3px 0 rgba(53, 30, 12, .28);
}

.trail-sign::before {
  inset: 6px 13px 7px 10px;
  border-top: 1px solid rgba(255, 244, 218, .14);
  border-bottom: 1px solid rgba(55, 31, 13, .22);
  background:
    linear-gradient(2deg, transparent 0 48%, rgba(255,245,219,.07) 49% 50%, transparent 51% 100%);
}

@media (max-width: 1180px) {
  .topbar__message { white-space: normal; }
}

/* v0.7 – KICK-Fragen, neue H1-Formulierung, Brush-Lines entfernt, TR-SCHD-01 als Bild-Master */
:root {
  --kick-size: 16px;
}

/* TR-LIN-01 ist verworfen und wird nicht mehr verwendet. */
.brush-line,
.approach__line {
  display: none !important;
}

.section-kicker {
  margin: 0 0 14px;
  color: var(--trail-orange) !important;
  font-size: var(--kick-size);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: .015em;
}

.hero h1,
.section-heading h2 {
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: clamp(33px, 2.35vw, 38px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.025em;
}

.hero__intro {
  margin-top: 28px;
}

.hero__access {
  margin-top: 28px;
}

/* Sichtbarer, ruhiger Hinweis, dass die Startseite unterhalb des Hero weitergeht. */
.hero {
  position: relative;
  padding-bottom: 20px;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1px;
  transform: translateX(-50%);
  width: 38px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--forest);
  text-decoration: none;
  font-size: 28px;
  line-height: 1;
  opacity: .72;
}

.scroll-cue:hover,
.scroll-cue:focus-visible {
  color: var(--trail-orange);
  opacity: 1;
}

.approach__inner {
  padding-top: 28px;
}

.approach__trail {
  margin-top: 46px;
  align-items: start;
}

/* TR-SCHD-01: direkt aus der vorhandenen Hero-Illustration abgeleiteter Bild-Master. */
.trail-sign,
.trail-sign::before,
.trail-sign::after {
  display: none !important;
}

.trail-sign-image {
  width: min(100%, 268px);
  height: auto;
  display: block;
  margin: 0 0 24px;
}

.approach-step {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  transform: none !important;
}

.approach-step p {
  max-width: 268px;
  min-height: 104px;
}

.approach__trail::before {
  top: 79px;
}

@media (max-width: 1060px) {
  .approach-step p { min-height: 0; }
}

@media (max-width: 700px) {
  :root { --kick-size: 15px; }
  .hero h1,
  .section-heading h2 { font-size: 31px; }
  .scroll-cue { display: none; }
  .approach__trail { margin-top: 36px; }
  .trail-sign-image { width: min(268px, 100%); }
}

/* Sprint 02 final – TR-SCHD-01 als wiederverwendbarer Holzschild-Master */
.trail-sign-image { display: none !important; }

.trail-sign-master {
  position: relative;
  width: min(100%, 268px);
  margin: 0 0 24px;
  flex: 0 0 auto;
}

.trail-sign-master img {
  width: 100%;
  height: auto;
  display: block;
}

.trail-sign-master span {
  position: absolute;
  inset: 12% 14% 13% 8%;
  display: grid;
  place-items: center;
  color: #2b241b;
  font-family: "Kalam", cursive;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.08;
  font-weight: 700;
  text-align: center;
  letter-spacing: -.015em;
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
}

/* Alle vier Schilder und alle Textblöcke beginnen auf derselben Linie. */
.approach__trail {
  align-items: stretch;
}

.approach-step {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}

.approach-step p {
  max-width: 100%;
}

@media (max-width: 1060px) {
  .trail-sign-master span { font-size: 18px; }
}

@media (max-width: 700px) {
  .trail-sign-master { width: min(268px, 100%); }
  .trail-sign-master span { font-size: 18px; }
}

/* Sprint 03 – Unsere Leistungen */
.services {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.services__inner {
  padding: 84px 48px 92px;
}

.services__heading {
  max-width: 940px;
}

.services__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.service-card {
  min-width: 0;
  min-height: 380px;
  padding: 30px 28px 32px;
  border: 1px solid rgba(35, 74, 52, .62);
  border-radius: 10px;
  background: #fffefb;
  display: flex;
  flex-direction: column;
}

.service-card__icon {
  width: 58px;
  height: 58px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
  color: var(--forest);
}

.service-card__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card h3 {
  margin: 0 0 24px;
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.service-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
  color: #343633;
  font-size: 15px;
  line-height: 1.45;
}

.service-card__list li {
  position: relative;
  padding-left: 24px;
}

/* TR-MARK-01 – konturierte Waldgrün-Raute */
.service-card__list li::before {
  content: "◇";
  position: absolute;
  left: 0;
  top: -.05em;
  color: var(--forest);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 600;
}

.services__cta {
  margin-top: 48px;
}

.services__cta .paper-button {
  width: 286px;
}

@media (max-width: 1180px) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-card { min-height: 340px; }
}

@media (max-width: 700px) {
  .services__inner { padding: 64px 18px 68px; }
  .services__grid { grid-template-columns: 1fr; margin-top: 38px; }
  .service-card { min-height: auto; padding: 26px 24px 28px; }
  .services__cta { margin-top: 40px; }
  .services__cta .paper-button { width: min(286px, 100%); }
}

/* Sprint 03 final – Kartenaktionen und TR-POP-01 Drawer */
.service-card h3 {
  min-height: 58px;
}

.service-card__list {
  flex: 1 1 auto;
}

.service-card__actions {
  margin-top: 30px;
  display: grid;
  gap: 12px;
}

.card-button {
  width: 100%;
  min-height: 40px;
  padding: 9px 16px;
  border: 0;
  background: var(--forest);
  color: #fff;
  cursor: pointer;
  font-family: "Kalam", cursive;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 700;
  clip-path: polygon(1% 8%, 10% 2%, 19% 7%, 31% 1%, 44% 6%, 57% 2%, 69% 7%, 81% 2%, 99% 7%, 97% 22%, 100% 39%, 98% 56%, 100% 76%, 98% 94%, 84% 98%, 71% 94%, 58% 99%, 45% 95%, 32% 99%, 19% 95%, 1% 98%, 4% 80%, 1% 61%, 4% 43%, 1% 24%);
  transition: background-color .2s ease, transform .2s ease;
}

.card-button:hover,
.card-button:focus-visible {
  background: var(--trail-orange);
  transform: translateY(-1px);
}

.card-button:focus-visible {
  outline: 3px solid rgba(217, 107, 31, .3);
  outline-offset: 3px;
}

body.drawer-open { overflow: hidden; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 28, 23, .44);
  backdrop-filter: blur(2px);
}

.info-drawer {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  width: min(560px, 94vw);
  height: 100dvh;
  padding: 72px 44px 44px;
  overflow-y: auto;
  background: var(--paper);
  border-left: 1px solid rgba(35, 74, 52, .25);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform .28s ease, visibility .28s step-end;
}

.info-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .28s ease, visibility 0s;
}

.drawer__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(35, 74, 52, .35);
  border-radius: 50%;
  background: transparent;
  color: var(--forest);
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
}

.drawer__close:hover,
.drawer__close:focus-visible {
  border-color: var(--trail-orange);
  color: var(--trail-orange);
}

.drawer__content h2 {
  margin: 0 0 22px;
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: clamp(31px, 4vw, 43px);
  line-height: 1.08;
}

.drawer__content > p:not(.section-kicker) {
  margin: 0 0 30px;
  color: #353734;
  font-size: 16px;
  line-height: 1.65;
}

.drawer__content h3 {
  margin: 30px 0 14px;
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: 22px;
  line-height: 1.2;
}

.drawer__content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.drawer__content li {
  position: relative;
  padding-left: 25px;
  color: #343633;
  font-size: 15px;
  line-height: 1.5;
}

.drawer__content li::before {
  content: "◇";
  position: absolute;
  left: 0;
  top: -.04em;
  color: var(--forest);
  font-size: 17px;
  font-weight: 600;
}

.examples-drawer .drawer__content {
  min-height: 100%;
}

@media (max-width: 700px) {
  .service-card h3 { min-height: 0; }
  .info-drawer { width: 100%; padding: 70px 22px 34px; }
}

/* Sprint 03 – Vergleich TR-INF-01A/B/C */
.info-mode-test {
  margin: 34px 0 22px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.info-mode-test__label {
  margin-right: 4px;
  color: var(--forest);
  font-size: 14px;
  font-weight: 600;
}

.info-mode-test__button {
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid rgba(35, 74, 52, .42);
  border-radius: 8px;
  background: transparent;
  color: var(--forest);
  font: 600 13px/1.2 "Inter", sans-serif;
  cursor: pointer;
}

.info-mode-test__button:hover,
.info-mode-test__button:focus-visible,
.info-mode-test__button.is-active {
  border-color: var(--forest);
  background: var(--forest);
  color: #fff;
}

/* TR-INF-01 – gemeinsame Abmessungen: 48 % Breite, 94 % Höhe. */
.info-drawer {
  top: 3vh !important;
  bottom: auto !important;
  width: min(48vw, 820px) !important;
  height: 94vh !important;
  max-height: 94vh !important;
  padding: 34px 38px 28px !important;
  border: 1px solid rgba(35, 74, 52, .18);
  border-radius: 14px;
  overflow: hidden !important;
  box-shadow: 0 14px 44px rgba(29, 45, 34, .18);
  transition: transform .34s cubic-bezier(.22,.8,.26,1), opacity .22s ease !important;
}

.drawer__content {
  height: 100%;
  max-height: 100%;
  overflow: hidden !important;
}

.drawer__content h2 {
  margin: 0 42px 10px 0 !important;
  font-size: clamp(25px, 2vw, 34px) !important;
  line-height: 1.08 !important;
}

.drawer__content > p:not(.section-kicker) {
  margin: 0 0 14px !important;
  font-size: 13.5px !important;
  line-height: 1.42 !important;
}

.drawer__content h3 {
  margin: 12px 0 5px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.drawer__content ul {
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
  row-gap: 2px;
}

.drawer__content li {
  margin: 0 !important;
  padding-left: 15px !important;
  font-size: 12.5px !important;
  line-height: 1.36 !important;
}

.drawer__content li::before {
  font-size: 11px !important;
}

/* A – von rechts */
body[data-info-mode="right"] .info-drawer {
  right: 2vw !important;
  left: auto !important;
  transform: translateX(calc(100% + 4vw));
  transform-origin: center center;
  opacity: 0;
}
body[data-info-mode="right"] .info-drawer.is-open {
  transform: translateX(0);
  opacity: 1;
}

/* B – von links */
body[data-info-mode="left"] .info-drawer {
  left: 2vw !important;
  right: auto !important;
  transform: translateX(calc(-100% - 4vw));
  transform-origin: center center;
  opacity: 0;
}
body[data-info-mode="left"] .info-drawer.is-open {
  transform: translateX(0);
  opacity: 1;
}

/* C – wächst aus der gewählten Karte in die Bildschirmmitte. */
body[data-info-mode="card"] .info-drawer {
  left: 26vw !important;
  right: auto !important;
  transform: scale(.12);
  transform-origin: var(--info-origin-x, 50%) var(--info-origin-y, 50%);
  opacity: 0;
}
body[data-info-mode="card"] .info-drawer.is-open {
  transform: scale(1);
  opacity: 1;
}

@media (max-width: 900px) {
  .info-drawer {
    left: 3vw !important;
    right: auto !important;
    width: 94vw !important;
    height: 94vh !important;
    padding: 30px 24px 24px !important;
  }
  .drawer__content ul { grid-template-columns: 1fr; }
  body[data-info-mode="card"] .info-drawer { left: 3vw !important; }
}

/* Hotfix Sprint 03 – funktionierende Testpanels auch bei lokal geöffneten HTML-Dateien. */
.drawer-backdrop[hidden] {
  display: none !important;
}

.info-drawer {
  pointer-events: none;
}

.info-drawer.is-open {
  visibility: visible !important;
  pointer-events: auto;
}

body[data-info-mode="right"] .info-drawer,
body[data-info-mode="left"] .info-drawer,
body[data-info-mode="card"] .info-drawer {
  visibility: hidden;
}

body[data-info-mode="right"] .info-drawer.is-open,
body[data-info-mode="left"] .info-drawer.is-open,
body[data-info-mode="card"] .info-drawer.is-open {
  visibility: visible;
}


/* Sprint 03 – Varianten direkt über die realen Leistungskarten.
   Karte 1 und 2: von links, Karte 3 und 4: aus der Karte heraus in die Bildschirmmitte. */
.info-mode-test { display: none !important; }
.info-drawer {
  visibility: hidden !important;
  pointer-events: none;
  opacity: 0;
}
.info-drawer.is-open {
  visibility: visible !important;
  pointer-events: auto;
  opacity: 1;
}
.info-drawer--left {
  left: 2vw !important;
  right: auto !important;
  transform: translateX(calc(-100% - 4vw)) !important;
  transform-origin: center center !important;
}
.info-drawer--left.is-open { transform: translateX(0) !important; }
.info-drawer--right {
  right: 2vw !important;
  left: auto !important;
  transform: translateX(calc(100% + 4vw)) !important;
  transform-origin: center center !important;
}
.info-drawer--right.is-open { transform: translateX(0) !important; }
.info-drawer--card {
  left: 26vw !important;
  right: auto !important;
  transform: scale(.12) !important;
  transform-origin: var(--info-origin-x, 50%) var(--info-origin-y, 50%) !important;
}
.info-drawer--card.is-open { transform: scale(1) !important; }
@media (max-width: 900px) {
  .info-drawer--left,
  .info-drawer--right,
  .info-drawer--card {
    left: 3vw !important;
    right: auto !important;
  }
  .info-drawer--left { transform: translateX(calc(-100% - 6vw)) !important; }
  .info-drawer--right { transform: translateX(calc(100% + 6vw)) !important; }
  .info-drawer--card { transform: scale(.12) !important; }
  .info-drawer--left.is-open,
  .info-drawer--right.is-open { transform: translateX(0) !important; }
  .info-drawer--card.is-open { transform: scale(1) !important; }
}

/* =========================================================
   Sprint 03 FINAL – TR-INF-01 zentral aus der Bildschirmmitte
   Diese Regeln überschreiben alle früheren Testvarianten.
   ========================================================= */
.info-mode-test { display: none !important; }
.drawer-backdrop[hidden] { display: none !important; }
.drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1900 !important;
  background: rgba(20, 31, 24, .34) !important;
  backdrop-filter: blur(1px);
}

.info-drawer,
.info-drawer--left,
.info-drawer--right,
.info-drawer--card,
body[data-info-mode="right"] .info-drawer,
body[data-info-mode="left"] .info-drawer,
body[data-info-mode="card"] .info-drawer {
  position: fixed !important;
  z-index: 2000 !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(48vw, 820px) !important;
  height: 94vh !important;
  max-height: 94vh !important;
  margin: 0 !important;
  padding: 34px 38px 28px !important;
  border: 1px solid rgba(35, 74, 52, .18) !important;
  border-radius: 14px !important;
  background: var(--natural-white, #fbfaf4) !important;
  box-shadow: 0 14px 44px rgba(29, 45, 34, .18) !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(.92) !important;
  transform-origin: center center !important;
  transition: transform .28s cubic-bezier(.22,.8,.26,1), opacity .20s ease, visibility 0s linear .28s !important;
}

.info-drawer.is-open,
.info-drawer--left.is-open,
.info-drawer--right.is-open,
.info-drawer--card.is-open,
body[data-info-mode="right"] .info-drawer.is-open,
body[data-info-mode="left"] .info-drawer.is-open,
body[data-info-mode="card"] .info-drawer.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(1) !important;
  transition-delay: 0s !important;
}

.info-drawer .drawer__content {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

@media (max-width: 900px) {
  .info-drawer,
  .info-drawer--left,
  .info-drawer--right,
  .info-drawer--card,
  body[data-info-mode="right"] .info-drawer,
  body[data-info-mode="left"] .info-drawer,
  body[data-info-mode="card"] .info-drawer {
    width: 94vw !important;
    height: 94vh !important;
    max-height: 94vh !important;
    padding: 30px 24px 24px !important;
  }
}


/* =========================================================
   Sprint 04 FINAL – TR-PRZ-01 und Arbeitsprinzipien
   ========================================================= */
.workflow {
  background: #f4f1e7;
  border-top: 1px solid var(--line);
}

.workflow__inner {
  padding: 84px 48px 96px;
}

.workflow__heading {
  max-width: 940px;
}

.workflow-process {
  max-width: 1020px;
  margin: 52px auto 0;
  display: grid;
  justify-items: center;
}

.workflow-step,
.workflow-branch {
  width: 100%;
}

.workflow-step--main {
  max-width: 760px;
  padding: 28px 34px;
  border: 1px solid rgba(35, 74, 52, .5);
  border-radius: 10px;
  background: #fffefb;
  text-align: center;
}

.workflow-step__number {
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--forest);
  border-radius: 50%;
  color: var(--forest);
  font-weight: 700;
}

.workflow-step h3,
.workflow-branch h3,
.workflow-option h4 {
  margin: 0;
  color: var(--forest);
  font-family: "Kalam", cursive;
}

.workflow-step h3,
.workflow-branch h3 {
  font-size: 26px;
  line-height: 1.2;
}

.workflow-step p,
.workflow-option p {
  margin: 14px 0 0;
  color: #343633;
  font-size: 15px;
  line-height: 1.62;
}

.workflow-connector {
  padding: 12px 0;
  color: var(--forest);
  font-size: 25px;
  line-height: 1;
}

.workflow-branch {
  padding: 30px;
  border: 1px solid rgba(35, 74, 52, .5);
  border-radius: 10px;
  background: #fffefb;
}

.workflow-branch__title {
  text-align: center;
}

.workflow-branch__grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.workflow-option {
  position: relative;
  min-height: 240px;
  padding: 28px 26px 26px;
  border: 1px solid rgba(35, 74, 52, .34);
  border-radius: 10px;
  background: #fbfaf4;
}

.workflow-option__symbol {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--forest);
  border-radius: 50%;
  color: var(--forest);
  font-size: 22px;
  font-weight: 700;
}

.workflow-option h4 {
  margin-top: 18px;
  font-size: 23px;
  line-height: 1.18;
}

.principles {
  margin-top: 78px;
}

.principles > h2 {
  margin: 0;
  max-width: 820px;
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: clamp(35px, 4.6vw, 58px);
  line-height: 1.05;
}

.principles__grid {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.principle-card {
  min-height: 208px;
  padding: 25px 23px;
  border: 1px solid rgba(35, 74, 52, .45);
  border-radius: 10px;
  background: #fffefb;
}

.principle-card h3 {
  position: relative;
  margin: 0;
  padding-left: 24px;
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: 23px;
  line-height: 1.2;
}

.principle-card h3::before {
  content: "◇";
  position: absolute;
  left: 0;
  top: -.08em;
  color: var(--forest);
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 600;
}

.principle-card p {
  margin: 15px 0 0;
  color: #343633;
  font-size: 14px;
  line-height: 1.58;
}

.workflow__cta {
  margin-top: 48px;
}

.workflow__cta .paper-button {
  width: 286px;
}

@media (max-width: 1100px) {
  .principles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .workflow__inner { padding: 64px 18px 72px; }
  .workflow-process { margin-top: 38px; }
  .workflow-step--main,
  .workflow-branch { padding: 24px 20px; }
  .workflow-branch__grid { grid-template-columns: 1fr; }
  .workflow-option { min-height: auto; }
  .principles { margin-top: 60px; }
  .principles__grid { grid-template-columns: 1fr; }
  .principle-card { min-height: auto; }
  .workflow__cta .paper-button { width: min(286px, 100%); }
}

/* =========================================================
   Sprint 04 Abschlusskorrekturen – TR-H2-01, TR-ABS-02,
   verschmälerter TR-PRZ-01
   ========================================================= */

/* TR-H2-01: gleiche Überschriftengröße wie „Unser Ansatz“. */
.principles > h2 {
  font-size: clamp(33px, 2.35vw, 38px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.025em;
}

/* TR-ABS-02: Abstand vom Abschlussbutton zum orangefarbenen
   Einstieg des folgenden Bereichs um etwa 50 % reduzieren. */
.services__inner {
  padding-bottom: 46px;
}

.workflow__inner {
  padding-top: 42px;
}

/* TR-PRZ-01: Arbeitsablauf rund 20 % schmaler. */
.workflow-process {
  max-width: 816px;
}

.workflow-step--main {
  max-width: 608px;
}

.workflow-branch {
  max-width: 816px;
}

@media (max-width: 760px) {
  .principles > h2 { font-size: 31px; }
  .services__inner { padding-bottom: 34px; }
  .workflow__inner { padding-top: 32px; }
  .workflow-process,
  .workflow-step--main,
  .workflow-branch { max-width: 100%; }
}


/* =========================================================
   Sprint 05 – kompakter Kartenprozess + Projekte
   Basis: Sprint 04 final
   ========================================================= */

/* Sprint 04: Arbeitsablauf auf Desktop kompakt und auf einem
   Bildschirm erfassbar; gleicher ruhiger Kartenstil. */
.workflow-cards {
  width: 100%;
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: .92fr .82fr 1.55fr .92fr;
  gap: 14px;
  align-items: stretch;
}
.workflow-card,
.project-card {
  min-width: 0;
  padding: 20px 18px;
  border: 1px solid rgba(35, 74, 52, .45);
  border-radius: 10px;
  background: #fffefb;
}
.workflow-card {
  min-height: 250px;
}
.workflow-card__number,
.project-card__number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--forest);
  border-radius: 50%;
  color: var(--forest);
  font-weight: 700;
  font-size: 14px;
}
.workflow-card h3,
.project-card h3,
.practice-project-card h3 {
  margin: 14px 0 0;
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: 22px;
  line-height: 1.18;
}
.workflow-card > p {
  margin: 13px 0 0;
  color: #343633;
  font-size: 13px;
  line-height: 1.48;
}
.workflow-card__options {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.workflow-card__option {
  padding: 12px;
  border: 1px solid rgba(35, 74, 52, .28);
  border-radius: 8px;
  background: #fbfaf4;
}
.workflow-card__option strong {
  color: var(--forest);
  font-size: 13px;
  line-height: 1.3;
}
.workflow-card__option p {
  margin: 8px 0 0;
  color: #343633;
  font-size: 11.5px;
  line-height: 1.38;
}
.workflow .principles {
  margin-top: 58px;
}
.workflow .workflow__cta {
  margin-top: 38px;
}

.projects {
  background: #f6f3e9;
  border-top: 1px solid rgba(35, 74, 52, .12);
}
.projects__inner {
  padding: 54px 22px 70px;
}
.project-flow {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.project-card {
  min-height: 276px;
}
.project-card ul {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.project-card li {
  position: relative;
  margin-top: 11px;
  padding-left: 23px;
  color: #343633;
  font-size: 13.5px;
  line-height: 1.4;
}
.project-card li::before {
  content: "◇";
  position: absolute;
  left: 0;
  top: -.08em;
  color: var(--forest);
  font-size: 15px;
  font-weight: 600;
}
.projects__cta {
  margin-top: 38px;
}
.projects__cta .paper-button {
  width: 278px;
}

.practice-projects {
  background: #fffefb;
}
.practice-projects__inner {
  padding: 54px 22px 80px;
}
.practice-project-card {
  margin-top: 34px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  border: 1px solid rgba(35, 74, 52, .45);
  border-radius: 10px;
  background: #fffefb;
}
.practice-project-card__status {
  color: var(--orange);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .035em;
}
.practice-project-card p {
  margin: 14px 0 0;
  color: #343633;
  line-height: 1.58;
}
.practice-project-card__placeholder {
  min-height: 210px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(35, 74, 52, .48);
  border-radius: 8px;
  background: #f6f3e9;
  color: var(--forest);
  text-align: center;
  font-size: 14px;
}

@media (max-width: 1180px) {
  .workflow-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .workflow-cards,
  .project-flow,
  .practice-project-card { grid-template-columns: 1fr; }
  .workflow-card { min-height: auto; }
  .workflow-card__options { grid-template-columns: 1fr; }
  .projects__inner,
  .practice-projects__inner { padding: 46px 18px 58px; }
  .project-card { min-height: auto; }
  .projects__cta .paper-button { width: min(278px, 100%); }
}

/* =========================================================
   Sprint 05 – Layout Review 02
   Basis: TrailRanger_Sprint05_HTML.zip
   ========================================================= */

/* TR-SEP-01: einheitliche, schmale Trennlinie zwischen
   allen Hauptbereichen. Übergänge bleiben kompakt und fließend. */
.approach,
.services,
.workflow,
.projects,
.practice-projects {
  border-top: 1px solid rgba(35, 74, 52, .18);
}

/* Kompakter Übergang: Abschlussbutton -> Trennlinie -> Kicker. */
.services__inner,
.workflow__inner,
.projects__inner {
  padding-bottom: 44px;
}
.workflow__inner,
.projects__inner,
.practice-projects__inner {
  padding-top: 36px;
}

/* Sprint 04: alle horizontalen Ablaufkarten gleich breit. */
.workflow-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.workflow-card,
.workflow-card--wide {
  width: auto;
  min-height: 250px;
}
.workflow-card__options {
  grid-template-columns: 1fr;
}
.workflow-card__option {
  padding: 10px;
}
.workflow-card__option p {
  font-size: 11px;
  line-height: 1.34;
}
.workflow-card h3 {
  min-height: 2.36em;
}
.workflow-safety-note {
  max-width: 980px;
  margin: 24px auto 0;
  padding: 14px 18px;
  border-left: 3px solid var(--forest);
  background: rgba(35, 74, 52, .055);
  color: #343633;
  font-size: 14px;
  line-height: 1.52;
}
.workflow-safety-note strong { color: var(--forest); }

/* Sprint 05: exakt drei Punkte pro Projektkarte und einzeilige
   Bezeichnung "Nächste Schritte". */
.project-card h3 {
  min-height: 2.36em;
}

/* Praxisprojekt: nur Bullet-Listen zweispaltig; alle Texte
   davor und danach bleiben über die volle Breite lesbar. */
.practice-project {
  margin-top: 30px;
}
.practice-project__full {
  max-width: 1020px;
  margin: 0 auto 28px;
}
.practice-project__full h3,
.practice-list h3,
.before-after > h3 {
  margin: 0;
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: 25px;
  line-height: 1.2;
}
.practice-project__full p {
  margin: 12px 0 0;
  color: #343633;
  font-size: 16px;
  line-height: 1.66;
}
.practice-project__lists {
  max-width: 1020px;
  margin: 4px auto 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.practice-list {
  padding: 24px 25px;
  border: 1px solid rgba(35, 74, 52, .38);
  border-radius: 10px;
  background: #fffefb;
}
.practice-list ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.practice-list li {
  position: relative;
  margin-top: 11px;
  padding-left: 24px;
  color: #343633;
  font-size: 15px;
  line-height: 1.45;
}
.practice-list li::before {
  content: "◇";
  position: absolute;
  left: 0;
  top: -.06em;
  color: var(--forest);
  font-size: 16px;
  font-weight: 600;
}

/* TR-VN-01: Vorher/Nachher-Paare nehmen 90 % der verfügbaren
   Seitenbreite ein und stehen auf Desktop nebeneinander. */
.before-after {
  width: 90%;
  margin: 40px auto 0;
}
.before-after > h3 {
  margin-bottom: 22px;
}
.before-after__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}
.before-after__pair figure {
  margin: 0;
}
.image-placeholder {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(35, 74, 52, .52);
  border-radius: 9px;
  background: #f3efe3;
  color: var(--forest);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
}
.before-after__pair figcaption {
  margin-top: 9px;
  color: #5b5e58;
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 1180px) {
  .workflow-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-card h3 { min-height: auto; }
}

@media (max-width: 760px) {
  .workflow__inner,
  .projects__inner,
  .practice-projects__inner { padding-top: 30px; }
  .services__inner,
  .workflow__inner,
  .projects__inner { padding-bottom: 36px; }
  .practice-project__lists,
  .before-after__pair { grid-template-columns: 1fr; }
  .before-after { width: 100%; }
  .practice-project__full p { font-size: 15px; }
}

/* =========================================================
   Sprint 05 – Layout Review 03
   Basis: TrailRanger_Sprint05_Review02_Layout.zip
   ========================================================= */

/* TR-NAV-01: Navigation bleibt dauerhaft sichtbar. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1200;
}
.header {
  position: sticky;
  top: 52px;
  z-index: 1190;
  transition: height .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.header__inner,
.brand__logo,
.brand__claim,
.nav {
  transition: all .22s ease;
}
body.is-scrolled .header {
  height: 84px;
  box-shadow: 0 1px 0 rgba(35, 74, 52, .16);
}
body.is-scrolled .brand__logo {
  width: 56px;
  height: 66px;
}
body.is-scrolled .brand__claim {
  font-size: 14px;
  line-height: 1.2;
}
body.is-scrolled .nav {
  font-size: 15px;
  gap: 26px;
}
body.is-scrolled .nav a {
  padding-top: 10px;
  padding-bottom: 15px;
}

/* Anker landen unter der permanent sichtbaren Navigation. */
[data-scroll-section] {
  scroll-margin-top: 150px;
}

/* Projekttexte und Listen beginnen auf derselben linken Inhaltsachse. */
.practice-project__full,
.practice-project__lists,
.before-after {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.practice-project__full,
.practice-project__lists {
  text-align: left;
}
.before-after {
  width: 90%;
  margin-left: 0;
  margin-right: auto;
}

/* TR-SCR-01: dezenter Pfeil am Ende jedes Hauptbereichs. */
.approach,
.services,
.workflow,
.projects {
  position: relative;
}
.section-scroll-cue {
  width: 34px;
  height: 34px;
  margin: 16px auto 4px;
  display: grid;
  place-items: center;
  color: var(--forest);
  text-decoration: none;
  font-size: 28px;
  line-height: 1;
  border-radius: 50%;
  transition: transform .18s ease, background-color .18s ease;
}
.section-scroll-cue:hover,
.section-scroll-cue:focus-visible {
  transform: translateY(3px);
  background: rgba(35, 74, 52, .07);
  outline: none;
}

/* Fließende Bereichsübergänge: Pfeil und nächster Kicker liegen kompakt. */
.approach__inner,
.services__inner,
.workflow__inner,
.projects__inner {
  padding-bottom: 22px;
}
.services__inner,
.workflow__inner,
.projects__inner,
.practice-projects__inner {
  padding-top: 24px;
}
.section-kicker {
  scroll-margin-top: 150px;
}

@media (max-width: 900px) {
  .topbar { position: relative; }
  .header { top: 0; }
  body.is-scrolled .header { height: auto; }
  body.is-scrolled .brand__logo { width: 64px; height: 78px; }
  body.is-scrolled .brand__claim { font-size: 15px; }
  [data-scroll-section] { scroll-margin-top: 112px; }
}

/* Sprint 06: Zusammenarbeit */
.collaboration,
.together {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.together { background: #f3f1ea; }

.collaboration__inner,
.together__inner {
  padding: 72px 48px 78px;
}

.collaboration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 40px;
  align-items: stretch;
}

.collaboration-card {
  min-width: 0;
  min-height: 270px;
  padding: 28px 24px;
  border: 1px solid rgba(35, 74, 52, .32);
  border-radius: 10px;
  background: rgba(251, 250, 247, .9);
  display: flex;
  flex-direction: column;
}

.collaboration-card h3 {
  margin: 0 0 24px;
  min-height: 58px;
  color: var(--forest);
  font-family: "Kalam", cursive;
  font-size: 23px;
  line-height: 1.2;
}

.collaboration-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.collaboration-card li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.45;
}

.collaboration-card li::before {
  content: "◇";
  position: absolute;
  left: 0;
  top: -.02em;
  color: var(--forest);
  font-size: 17px;
  line-height: 1;
}

.collaboration-card--text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.58;
}

.collaboration__cta,
.together__cta {
  margin-top: 34px;
}

@media (max-width: 1100px) {
  .collaboration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .collaboration__inner,
  .together__inner { padding: 54px 18px 62px; }
  .collaboration-grid { grid-template-columns: 1fr; gap: 16px; }
  .collaboration-card { min-height: auto; }
  .collaboration-card h3 { min-height: 0; }
}


/* =========================================================
   v1.0 PreReview – Sprint 07 bis 09
   ========================================================= */
.about,
.contact,
.footer {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.contact { background: #f3f1ea; }
.about__inner,
.contact__inner { padding: 72px 48px 42px; }

.about__story { max-width: 920px; margin-top: 36px; }
.about__story h3,
.contact-form > label { color: var(--forest); }
.about__story h3 { margin: 0 0 16px; font-family: "Kalam", cursive; font-size: 25px; }
.about__story p,
.about__mission p:not(.section-kicker) { font-size: 17px; line-height: 1.72; margin: 0; }
.about__mission { max-width: 920px; margin-top: 54px; padding-top: 32px; border-top: 1px solid var(--line); }
.about__mission .section-kicker { margin-bottom: 14px; }
.about__cta { margin-top: 34px; }

.contact-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:40px; }
.contact-card { min-height:210px; padding:26px 22px; border:1px solid rgba(35,74,52,.32); border-radius:10px; background:rgba(251,250,247,.92); }
.contact-card h3 { min-height:42px; margin:0 0 18px; color:var(--forest); font-family:"Kalam",cursive; font-size:23px; }
.contact-card p,.contact-card ul { margin:0; padding:0; font-size:15px; line-height:1.65; }
.contact-card ul { list-style:none; display:grid; gap:9px; }
.contact-card li { position:relative; padding-left:22px; }
.contact-card li::before { content:"◇"; position:absolute; left:0; color:var(--forest); }
.contact-card a,.footer a { color:var(--forest); text-decoration:none; }
.contact-card a:hover,.footer a:hover { text-decoration:underline; }

.contact-form { max-width:920px; margin-top:44px; }
.contact-form__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; }
.contact-form label { display:grid; gap:8px; font-weight:600; font-size:14px; }
.contact-form input,.contact-form textarea { width:100%; box-sizing:border-box; border:1px solid rgba(35,74,52,.38); border-radius:8px; background:#fff; padding:12px 13px; font:inherit; color:var(--ink); }
.contact-form textarea { resize:vertical; }
.contact-form > label:not(.consent) { margin-top:20px; }
.contact-form .consent { display:flex; grid-template-columns:none; align-items:flex-start; gap:10px; margin-top:18px; color:var(--ink); font-weight:400; }
.contact-form .consent input { width:auto; margin-top:3px; }
.contact-form__submit { border:0; margin-top:22px; cursor:pointer; }
.contact-form__status { min-height:1.4em; margin:12px 0 0; font-size:14px; }
.contact__closing { margin-top:54px; margin-bottom:10px; max-width:760px; }
.contact__closing p { margin:0 0 18px; font-size:17px; line-height:1.55; }

.footer { background:#eeece5; }
.footer__inner { padding:34px 48px 26px; }
.footer__kicker { margin-bottom:24px; }
.footer__grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:46px; }
.footer h2 { margin:0 0 12px; color:var(--forest); font-family:"Kalam",cursive; font-size:20px; }
.footer p { margin:0; font-size:14px; line-height:1.65; }
.footer__bottom { display:flex; justify-content:space-between; gap:24px; margin-top:32px; padding-top:18px; border-top:1px solid var(--line); }
.footer__bottom p:last-child { white-space:nowrap; }

@media (max-width: 1050px) {
  .contact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .about__inner,.contact__inner,.footer__inner { padding-left:18px; padding-right:18px; }
  .contact-grid,.contact-form__grid,.footer__grid { grid-template-columns:1fr; }
  .contact-card { min-height:auto; }
  .footer__bottom { flex-direction:column; }
  .footer__bottom p:last-child { white-space:normal; }
}

.legal-page { padding:72px 48px; max-width:980px; } .legal-page h1,.legal-page h2 { color:var(--forest); } .legal-page h1 { font-size:42px; } .legal-page h2 { margin-top:32px; font-size:24px; } .legal-page p { line-height:1.7; } @media(max-width:700px){.legal-page{padding:48px 18px;}}

/* =========================================================
   v1.1 PreColdRead – verbindliches Trail-Ranger-Kapitelprinzip
   ========================================================= */
:root {
  --tr-header-total: 112px;
  --tr-chapter-pad: clamp(20px, 2.4vh, 34px);
  --tr-wood-light: #d7b47a;
  --tr-wood-mid: #b9864f;
  --tr-wood-dark: #7a4c29;
}

.topbar { min-height: 34px; }
.topbar__inner { min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
.header { height: 78px; position: sticky; top: 0; z-index: 80; }
.header__inner { padding: 0 34px; grid-template-columns: 330px 1fr; }
.brand__logo { width: 54px; height: 66px; }
.brand__claim { font-size: 13px; }
.nav { gap: 22px; font-size: 14px; }
.nav__item { position: relative; }
.nav__item > a { display: block; }
.nav__submenu {
  position: absolute;
  z-index: 120;
  top: calc(100% - 7px);
  left: -14px;
  min-width: 250px;
  padding: 8px;
  display: none;
  background: var(--paper);
  border: 1px solid rgba(35,74,52,.25);
  border-radius: 8px;
}
.nav__submenu a { padding: 9px 11px; color: var(--forest); white-space: normal; }
.nav__item:hover .nav__submenu,
.nav__item:focus-within .nav__submenu { display: grid; }

/* Ein Kapitel = ein Bildschirm. Gleiche Architektur auf allen Seiten. */
.chapter {
  position: relative;
  min-height: calc(100svh - var(--tr-header-total));
  height: auto;
  padding-bottom: 118px !important;
  overflow: visible;
  scroll-margin-top: 78px;
  border-top: 0 !important;
}
.chapter > .page,
.chapter > [class$="__inner"] {
  padding-top: var(--tr-chapter-pad) !important;
  padding-bottom: var(--tr-chapter-pad) !important;
}
.section-heading { max-width: none; }
.section-heading__intro {
  max-width: 1320px;
  margin-top: 10px;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.45;
}
.section-heading h2,
.principles h2 {
  font-size: clamp(34px, 3.2vw, 50px);
  line-height: 1.02;
}
.section-kicker {
  color: var(--trail-orange) !important;
  font-family: "Kalam", cursive !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.section-kicker--in-heading { display: none !important; }

.chapter-transition {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: min(calc(100% - 96px), var(--page));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 5px;
}
.chapter-transition__line { width: 100%; height: 1px; background: var(--line); }
.chapter-transition__arrow {
  width: 32px; height: 24px; display: grid; place-items: center;
  color: var(--forest); text-decoration: none; font-size: 26px; line-height: 1;
}
.chapter-transition__kicker { margin: 0; width: 100%; text-align: left; }

/* Einheitliche rechteckige Holztafeln */
.wood-card {
  position: relative;
  border: 1px solid rgba(91,55,30,.55) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.13), transparent 18%, rgba(82,44,20,.09) 39%, transparent 57%, rgba(255,255,255,.10) 79%, transparent),
    repeating-linear-gradient(4deg, rgba(92,52,27,.12) 0 1px, transparent 1px 10px),
    linear-gradient(135deg, var(--tr-wood-light), var(--tr-wood-mid) 54%, #cda268) !important;
  color: #2b241d;
  overflow: hidden;
}
.wood-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(91deg, transparent 0 54px, rgba(75,40,20,.07) 55px 56px, transparent 57px 112px);
  mix-blend-mode: multiply;
}
.wood-card > * { position: relative; z-index: 1; }
.wood-card h3 { color: var(--forest) !important; }
.wood-card li::marker { color: var(--forest); }

/* Leistungen: kompakt, Symbol links vor der Überschrift, ein Button */
.services__inner { padding-left: 48px !important; padding-right: 48px !important; }
.services__grid { gap: 16px !important; margin-top: 18px !important; }
.service-card {
  min-height: 0 !important;
  padding: 18px 16px 16px 68px !important;
  display: flex !important;
  flex-direction: column;
}
.service-card__icon {
  position: absolute !important;
  left: 16px; top: 18px;
  width: 40px !important; height: 48px !important;
  margin: 0 !important;
}
.service-card__icon svg { width: 40px !important; height: 40px !important; stroke: var(--forest) !important; }
.service-card h3 { min-height: 2.35em !important; margin: 0 0 8px !important; font-size: 18px !important; line-height: 1.15 !important; }
.service-card__list { margin: 0 0 10px !important; gap: 3px !important; font-size: 13px !important; line-height: 1.28 !important; }
.service-card__actions { margin-top: auto !important; gap: 6px !important; }
.card-button { min-height: 31px !important; padding: 5px 10px !important; font-size: 12px !important; }

/* Unser Ansatz: Wegweisertext Waldgrün */
.trail-sign-master span { color: var(--forest) !important; }
.approach__inner { padding-left: 48px !important; padding-right: 48px !important; }
.approach__trail { margin-top: 16px !important; gap: 18px !important; }
.approach-step { padding-top: 0 !important; }
.approach-step p { font-size: 13px !important; line-height: 1.42 !important; }
.trail-sign-master { margin-bottom: 8px !important; }

/* Arbeitsweise: identische Holztafeln und kompakte Alternativen */
.workflow__inner { padding-left: 48px !important; padding-right: 48px !important; }
.workflow-cards { gap: 14px !important; margin-top: 16px !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
.workflow-card { padding: 15px !important; min-width: 0 !important; }
.workflow-card--wide { grid-column: auto !important; }
.workflow-card__number { font-size: 13px !important; }
.workflow-card h3 { font-size: 18px !important; margin: 4px 0 7px !important; }
.workflow-card p { font-size: 12.5px !important; line-height: 1.36 !important; }
.workflow-card__options { display: grid !important; gap: 7px !important; }
.workflow-card__option { padding: 0 !important; border: 0 !important; background: transparent !important; }
.workflow-card__option strong { font-size: 12px !important; color: var(--forest); }
.workflow-safety-note {
  margin: 10px 0 0 !important; padding: 0 !important; max-width: none !important;
  text-align: left !important; white-space: nowrap; font-size: 13px !important;
  background: transparent !important; border: 0 !important;
}

/* Auf unsere Arbeit ... als eigenes Unterkapitel */
.principles-page__inner { padding-left: 48px !important; padding-right: 48px !important; }
.principles { margin: 0 !important; }
.principles__grid { margin-top: 14px !important; gap: 12px !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
.principle-card { padding: 14px !important; }
.principle-card h3 { margin: 0 0 5px !important; font-size: 17px !important; }
.principle-card p { margin: 0 !important; font-size: 12px !important; line-height: 1.34 !important; }

/* Projekte */
.projects__inner,.practice-projects__inner,.collaboration__inner,.together__inner,.about__inner,.contact__inner { padding-left: 48px !important; padding-right: 48px !important; }
.project-flow { gap: 12px !important; margin-top: 16px !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
.project-card { padding: 14px !important; }
.project-card h3 { font-size: 17px !important; margin: 5px 0 8px !important; white-space: nowrap; }
.project-card ul { font-size: 12px !important; line-height: 1.35 !important; }
.practice-project__lists { display: flex !important; justify-content: flex-start; gap: 18px !important; }
.practice-list { flex: 0 1 32%; max-width: 33.333%; padding: 15px !important; }
.practice-project__full { max-width: none !important; }
.practice-project__full p { font-size: 13px !important; line-height: 1.4 !important; }
.before-after { margin-top: 12px !important; }
.before-after__pair { width: 90% !important; margin-left: 0 !important; gap: 14px !important; }
.image-placeholder { min-height: 110px !important; }

/* Zusammenarbeit */
.collaboration-grid { gap: 14px !important; margin-top: 16px !important; }
.collaboration-card { padding: 15px !important; }
.collaboration-card h3 { font-size: 18px !important; margin: 0 0 8px !important; }
.collaboration-card ul,.collaboration-card p { font-size: 12.5px !important; line-height: 1.36 !important; }
.service-area-info { margin: 12px 0 10px; text-align: left; }
.service-area-info h3 { margin: 0 0 3px; color: var(--forest); font-family: "Kalam", cursive; font-size: 18px; }
.service-area-info p { margin: 2px 0; font-size: 13px; line-height: 1.3; }

/* Über uns */
.about__story,.about__mission { max-width: 1320px !important; }
.about__story p,.about__mission p { font-size: 15px !important; line-height: 1.48 !important; }

/* Kontakt */
.contact-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 14px !important; }
.contact-card { padding: 15px !important; }
.contact-form { margin-top: 14px !important; }
.contact-form textarea { min-height: 76px !important; }
.contact__closing { margin-top: 16px !important; padding: 0 !important; text-align: left !important; }
.contact__closing p { margin: 0; }

/* Einheitliche CTA-Abstände */
.approach__cta,.services__cta,.workflow__cta,.projects__cta,.collaboration__cta,.together__cta,.about__cta { margin-top: 14px !important; }

/* Drawers bleiben zentral und kompakt */
.info-drawer { width: min(720px, 86vw) !important; height: 94vh !important; max-height: 94vh !important; }

@media (max-width: 1100px) {
  .chapter { min-height: auto; padding-bottom: 112px !important; }
  .services__grid,.workflow-cards,.principles__grid,.collaboration-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .project-flow { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .workflow-safety-note { white-space: normal; }
}
@media (max-width: 700px) {
  :root { --tr-header-total: 90px; }
  .chapter-transition { width: calc(100% - 36px); }
  .services__grid,.workflow-cards,.principles__grid,.project-flow,.collaboration-grid,.contact-grid { grid-template-columns: 1fr !important; }
  .practice-project__lists { display: grid !important; }
  .practice-list { max-width: none; }
  .nav__submenu { position: static; display: none; }
  .nav__item:focus-within .nav__submenu { display: grid; }
}

/* v1.1.1 – Korrekturen vor dem Cold Read */
:root {
  --page: 1720px;
  --tr-header-total: 132px;
  --tr-wood-light: #e0bd82;
  --tr-wood-mid: #c39158;
  --tr-wood-dark: #765033;
}

/* Kopfbereich: Logo vollständig sichtbar, Navigation großzügiger */
.header {
  height: 98px !important;
  overflow: visible;
}
.header__inner {
  padding: 0 42px !important;
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr) !important;
  gap: 24px !important;
  overflow: visible;
}
.brand { min-width: 0; gap: 16px; }
.brand__logo {
  width: 82px !important;
  height: 82px !important;
  object-fit: contain !important;
  object-position: center !important;
  flex: 0 0 82px;
}
.brand__claim { max-width: 220px; font-size: 14px !important; line-height: 1.32; }
.nav {
  width: 100%;
  justify-content: flex-end;
  gap: clamp(13px, 1.45vw, 25px) !important;
  font-size: clamp(13px, .95vw, 15px) !important;
}
.nav a { padding-top: 18px; padding-bottom: 18px; }

/* Mouse-over-Unterpunkte ohne zusätzliche Box */
.nav__submenu {
  top: calc(100% - 2px) !important;
  left: -10px !important;
  min-width: 270px !important;
  padding: 7px 10px 9px !important;
  background: rgba(251,250,247,.98) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.nav__submenu a {
  padding: 5px 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Einheitlicher Zurück-Button an fester Position */
.chapter-back {
  position: fixed;
  z-index: 150;
  left: 14px;
  top: 143px;
  border: 0;
  padding: 6px 9px;
  background: rgba(251,250,247,.92);
  color: var(--forest);
  font: 600 13px/1.2 "Inter", Arial, sans-serif;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, background-color .18s ease;
}
.chapter-back.is-visible { opacity: 1; pointer-events: auto; }
.chapter-back:hover, .chapter-back:focus-visible { background: #f0ede3; }
.chapter-back:focus-visible { outline: 2px solid var(--trail-orange); outline-offset: 2px; }

/* Kapitelarchitektur: Übergang immer sichtbar und identisch */
.chapter {
  min-height: calc(100svh - var(--tr-header-total)) !important;
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}
.chapter > .page,
.chapter > [class$="__inner"] {
  width: min(100%, var(--page));
  flex: 1 1 auto;
}
.chapter-transition {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(calc(100% - 96px), var(--page)) !important;
  margin: auto auto 8px !important;
  flex: 0 0 auto;
  gap: 4px !important;
}
.chapter-transition__line,
.chapter-transition__arrow,
.chapter-transition__kicker { display: block !important; }
.chapter-transition__arrow { margin: 0 auto; text-align: center; }
.chapter-transition__kicker { min-height: 21px; }

/* Holztafeln: deutliche, wiedererkennbare Holzoptik */
.wood-card {
  border: 1px solid #7b5637 !important;
  border-radius: 7px !important;
  background-color: #c99c63 !important;
  background-image:
    radial-gradient(ellipse at 12% 22%, rgba(92,52,26,.15) 0 2px, transparent 3px),
    radial-gradient(ellipse at 78% 63%, rgba(92,52,26,.12) 0 3px, transparent 4px),
    repeating-linear-gradient(1deg, rgba(84,48,25,.14) 0 1px, transparent 1px 8px),
    linear-gradient(100deg, rgba(255,255,255,.19), transparent 22%, rgba(94,55,29,.10) 43%, transparent 68%, rgba(255,255,255,.12)),
    linear-gradient(135deg, var(--tr-wood-light), var(--tr-wood-mid) 56%, #c79a62) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
}
.wood-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(99,60,34,.2);
  border-radius: 4px;
  pointer-events: none;
}
.wood-card::after {
  opacity: .62;
  background:
    repeating-linear-gradient(91deg, transparent 0 50px, rgba(75,40,20,.07) 51px 52px, transparent 53px 104px),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(255,255,255,.035) 16px 17px) !important;
}

/* Gleichmäßige Typografie und Abstände in allen Holztafeln */
.wood-card h3 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  font-size: 17px !important;
  line-height: 1.18 !important;
  letter-spacing: -.01em;
}
.wood-card p,
.wood-card ul {
  margin-top: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.38 !important;
}
.wood-card ul { padding-left: 18px !important; }

/* Leistungen: Symbol exakt links neben der zweizeiligen Überschrift */
.service-card {
  padding: 16px 14px 15px 62px !important;
  min-height: 255px !important;
}
.service-card__icon {
  left: 14px !important;
  top: 16px !important;
  width: 34px !important;
  height: 42px !important;
}
.service-card__icon svg { width: 34px !important; height: 34px !important; }
.service-card h3 {
  min-height: 2.36em !important;
  margin-bottom: 14px !important;
  font-size: 17px !important;
}
.service-card__list { margin-bottom: 12px !important; }

/* Unser Ansatz: sichtbare Leerzeile zwischen Wegweiser und Beschreibung */
.trail-sign-master { margin-bottom: 17px !important; }
.approach-step p { margin-top: 0 !important; }

/* Arbeitsweise/Projekte/Zusammenarbeit: gleiche Holztafel-Definition */
.workflow-card,
.principle-card,
.project-card,
.practice-list,
.collaboration-card {
  padding: 16px !important;
}
.workflow-card h3,
.principle-card h3,
.project-card h3,
.practice-list h3,
.collaboration-card h3 { margin-bottom: 11px !important; }
.workflow-card__option + .workflow-card__option { margin-top: 9px; }
.workflow-card__option strong { display: block; margin-bottom: 5px; }

@media (max-width: 1340px) {
  .header__inner { grid-template-columns: 330px minmax(0,1fr) !important; padding: 0 26px !important; }
  .brand__logo { width: 72px !important; height: 72px !important; flex-basis: 72px; }
  .brand__claim { font-size: 13px !important; }
  .nav { gap: 13px !important; font-size: 13px !important; }
}
@media (max-width: 1100px) {
  .chapter-back { top: 122px; }
  .chapter { min-height: auto !important; padding-bottom: 0 !important; }
}
@media (max-width: 700px) {
  .chapter-back { left: 7px; top: 105px; font-size: 12px; }
  .header__inner { grid-template-columns: 1fr !important; }
  .brand__logo { width: 64px !important; height: 64px !important; }
  .chapter-transition { width: calc(100% - 36px) !important; }
}

/* v1.2 – Design Freeze vor dem Cold Read */

/* v1.2 – Design Freeze vor dem Cold Read */
:root {
  --tr-topbar-height: 34px;
  --tr-header-height: 86px;
  --tr-header-total: 120px;
  --tr-button-space: 33px; /* ca. 80 % der Standard-Buttonhöhe */
  --tr-wood-bg: #dfbd84;
  --tr-wood-line: rgba(100, 61, 31, .16);
}

/* Top-Bar: nur ein Pfeil links vor der Bedarfsmeldung. */
.topbar__inner {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}
.chapter-back {
  position: static !important;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--forest);
  font: 700 21px/1 "Inter", Arial, sans-serif;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, color .16s ease;
}
.chapter-back.is-visible { opacity: 1; pointer-events: auto; }
.chapter-back:hover, .chapter-back:focus-visible { color: var(--trail-orange); }
.chapter-back:focus-visible { outline: 2px solid var(--trail-orange); outline-offset: 2px; }

/* Logo nur auf der Startseite, niemals verkleinert. */
.header { height: var(--tr-header-height) !important; }
.header__inner {
  height: 100%;
  padding: 0 42px !important;
  grid-template-columns: 390px minmax(0, 1fr) !important;
  gap: 28px !important;
}
.brand { visibility: visible; opacity: 1; }
.brand__logo {
  width: 82px !important;
  height: 82px !important;
  flex: 0 0 82px !important;
  object-fit: contain !important;
}
body:not(.at-start) .header__inner { grid-template-columns: minmax(0, 1fr) !important; }
body:not(.at-start) .brand { display: none !important; }

/* Navigation auf Unterseiten immer vollständig, breit und positionsstabil. */
.nav {
  width: 100%;
  justify-content: space-between !important;
  gap: clamp(18px, 2vw, 38px) !important;
  font-size: clamp(14px, .98vw, 16px) !important;
}
body:not(.at-start) .nav { justify-self: stretch !important; }
.nav__item { position: relative; }
.nav__submenu {
  top: calc(100% - 3px) !important;
  left: 0 !important;
  min-width: max-content !important;
  padding: 2px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.nav__submenu a {
  padding: 3px 0 !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--forest);
}

/* Ein Kapitel pro Bildschirm; derselbe Abschluss auf allen Kapiteln. */
.chapter {
  min-height: calc(100svh - var(--tr-header-total)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}
.chapter > .page,
.chapter > [class$="__inner"] {
  width: min(100%, var(--page));
  flex: 1 1 auto;
}
.chapter-transition {
  width: min(calc(100% - 96px), var(--page)) !important;
  margin: 0 auto 5px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: 1px 24px auto;
  gap: 4px !important;
  flex: 0 0 auto;
}
.chapter-transition__line { display: block !important; width: 100%; height: 1px; background: var(--line); }
.chapter-transition__arrow { display: block !important; margin: 0 auto !important; font-size: 27px; line-height: 24px; }
.chapter-transition__kicker { display: block !important; min-height: 22px; margin: 0 !important; text-align: left !important; }

/* Exakt eine orange Kick-off-Definition. */
.section-kicker,
.chapter-transition__kicker,
.footer__kicker .section-kicker {
  color: var(--trail-orange) !important;
  font-family: "Kalam", cursive !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.section-kicker--in-heading { display: none !important; }

/* Texte nutzen ohne Illustration die verfügbare Breite. */
.section-heading,
.section-heading__intro,
.about__story,
.about__mission { max-width: none !important; }

/* TR-KRT-03: einzige Holztafel – helle Holzstruktur mit unterer Abrisskante. */
.wood-card {
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding-bottom: 26px !important;
  background-color: var(--tr-wood-bg) !important;
  background-image:
    radial-gradient(ellipse at 13% 24%, rgba(112, 70, 34, .14) 0 2px, transparent 3px),
    radial-gradient(ellipse at 79% 62%, rgba(112, 70, 34, .11) 0 3px, transparent 4px),
    repeating-linear-gradient(0deg, transparent 0 8px, var(--tr-wood-line) 9px, transparent 10px 17px),
    linear-gradient(96deg, rgba(255,255,255,.34), transparent 23%, rgba(105,64,31,.08) 46%, transparent 68%, rgba(255,255,255,.19)),
    linear-gradient(135deg, #efd8aa 0%, #dfbd84 52%, #e9cc98 100%) !important;
  clip-path: polygon(
    0 0, 100% 0, 100% 91%, 97% 94%, 94% 92%, 91% 96%, 87% 93%,
    83% 97%, 79% 94%, 75% 98%, 71% 95%, 67% 99%, 63% 95%, 59% 98%,
    55% 94%, 51% 98%, 47% 95%, 43% 99%, 39% 95%, 35% 97%, 31% 93%,
    27% 96%, 23% 92%, 19% 95%, 15% 91%, 11% 94%, 7% 91%, 3% 94%, 0 92%
  ) !important;
  filter: drop-shadow(0 6px 6px rgba(45, 35, 24, .18));
  box-shadow: none !important;
}
.wood-card::before {
  content: "";
  position: absolute;
  inset: 0 0 9% 0;
  border: 1px solid rgba(104, 67, 37, .30);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  pointer-events: none;
}
.wood-card::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .48;
  background:
    repeating-linear-gradient(91deg, transparent 0 54px, rgba(85,48,22,.06) 55px 56px, transparent 57px 108px),
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(255,255,255,.05) 17px 18px) !important;
  pointer-events: none;
}
.wood-card > * { position: relative; z-index: 1; }
.wood-card h3 {
  margin: 0 0 13px !important;
  color: var(--forest) !important;
  font-family: "Kalam", cursive !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}
.wood-card p,
.wood-card ul {
  margin-top: 0 !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
}

/* Leistungen: kompakt; Symbol links vor der maximal zweizeiligen Überschrift. */
.services__grid { align-items: stretch; }
.service-card {
  min-height: 238px !important;
  padding: 16px 14px 27px 62px !important;
}
.service-card__icon {
  left: 15px !important;
  top: 16px !important;
  width: 34px !important;
  height: 42px !important;
}
.service-card__icon svg { width: 34px !important; height: 34px !important; }
.service-card h3 {
  min-height: 2.36em !important;
  margin-bottom: 14px !important;
  font-size: 18px !important;
}
.service-card__list { margin: 0 0 12px !important; gap: 3px !important; }
.service-card__actions { margin-top: auto !important; }

/* Unser Ansatz: Schrift der Wegweiser immer waldgrün. */
.trail-sign-master span { color: var(--forest) !important; }

/* Einheitliche Holztafeln für alle Kartenfamilien. */
.workflow-card,
.principle-card,
.project-card,
.practice-list,
.collaboration-card,
.contact-card {
  padding: 16px 16px 28px !important;
}
.practice-list { flex: 0 1 32%; max-width: 33.333%; }
.workflow-card__option strong { color: var(--forest); }
.workflow-safety-note { margin-left: 0 !important; text-align: left !important; white-space: nowrap; }

/* Einheitliche 80/80-Regel vor und nach den kapitelabschließenden Buttons. */
.approach__cta,
.services__cta,
.workflow__cta,
.projects__cta,
.collaboration__cta,
.together__cta,
.about__cta {
  margin-top: var(--tr-button-space) !important;
  margin-bottom: var(--tr-button-space) !important;
}
.contact-form__submit {
  margin-top: var(--tr-button-space) !important;
  margin-bottom: var(--tr-button-space) !important;
}

@media (max-width: 1340px) {
  .header__inner { padding: 0 28px !important; }
  .brand__logo { width: 82px !important; height: 82px !important; flex-basis: 82px !important; }
  .nav { gap: 14px !important; font-size: 13px !important; }
}
@media (max-width: 1100px) {
  .chapter { min-height: auto !important; }
  .workflow-safety-note { white-space: normal; }
  .topbar__inner { grid-template-columns: 28px minmax(0,1fr) !important; }
  .topbar__contact { grid-column: 2; }
}
@media (max-width: 700px) {
  :root { --tr-header-total: 92px; }
  .topbar__inner { display: flex !important; }
  .header__inner { grid-template-columns: 1fr !important; padding: 0 18px !important; }
  .brand__logo { width: 82px !important; height: 82px !important; }
  .nav { justify-content: flex-start !important; gap: 16px 20px !important; }
  .chapter-transition { width: calc(100% - 36px) !important; }
  .practice-list { max-width: none; }
}


/* v1.2.1 – Korrektur auf Basis des Projekt-Reviews */
:root {
  --tr-card-title-size: 17px;
  --tr-card-text-size: 13px;
  --tr-card-line-height: 1.42;
  --tr-card-pad-x: 20px;
  --tr-card-pad-top: 18px;
  --tr-card-pad-bottom: 34px;
  --tr-button-space: 33px;
}

/* Menü: rechtsbündig, dezent und auf jeder Seite positionsstabil. */
.header__inner {
  grid-template-columns: 390px minmax(0, 1fr) !important;
  gap: 24px !important;
}
.nav {
  width: auto !important;
  margin-left: auto !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  gap: clamp(13px, 1.35vw, 22px) !important;
  font-size: clamp(13px, .9vw, 15px) !important;
}
body:not(.at-start) .header__inner { grid-template-columns: minmax(0, 1fr) !important; }
body:not(.at-start) .nav { width: auto !important; justify-self: end !important; }

/* Zurück-Pfeil: in der grünen Top-Bar klar sichtbar. */
.chapter-back {
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.chapter-back:hover,
.chapter-back:focus-visible { color: #fff !important; opacity: .8; }

/* TR-KRT-03: eindeutige helle Holztafel mit Abrisskante. */
.wood-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: var(--tr-card-pad-top) var(--tr-card-pad-x) var(--tr-card-pad-bottom) !important;
  text-align: left !important;
  background-color: #e4c58d !important;
  background-image: url("assets/wood-board-light.svg") !important;
  background-size: cover !important;
  background-position: center !important;
  clip-path: polygon(
    0 0,100% 0,100% 90%,98% 92%,96% 91%,94% 95%,91% 93%,88% 97%,85% 94%,82% 98%,79% 95%,76% 99%,73% 95%,70% 98%,67% 94%,64% 99%,61% 95%,58% 98%,55% 94%,52% 99%,49% 95%,46% 98%,43% 94%,40% 99%,37% 95%,34% 98%,31% 94%,28% 97%,25% 93%,22% 96%,19% 92%,16% 95%,13% 91%,10% 94%,7% 91%,4% 94%,0 92%
  ) !important;
  filter: drop-shadow(0 6px 6px rgba(45,35,24,.22)) !important;
  box-shadow: none !important;
}
.wood-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 9% 0 !important;
  border: 1px solid rgba(105,68,38,.32) !important;
  border-bottom: 0 !important;
  pointer-events: none !important;
}
.wood-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg,rgba(255,255,255,.10),transparent 22%,rgba(92,55,28,.05) 50%,transparent 78%,rgba(255,255,255,.08)) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
.wood-card > * { position: relative !important; z-index: 1 !important; }
.wood-card h3,
.wood-card p,
.wood-card ul,
.wood-card li { text-align: left !important; }
.wood-card h3 {
  min-height: 0 !important;
  margin: 0 0 14px !important;
  color: var(--forest) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: var(--tr-card-title-size) !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}
.wood-card h3::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 12px;
  background: rgba(35,74,52,.72);
}
.wood-card p,
.wood-card ul {
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: "Inter", Arial, sans-serif !important;
  font-size: var(--tr-card-text-size) !important;
  line-height: var(--tr-card-line-height) !important;
  font-weight: 400 !important;
}
.wood-card ul { padding-left: 18px !important; }
.wood-card li + li { margin-top: 3px !important; }

/* Leistungen: Icon links vor dem Titel; Titel und Text beginnen auf derselben Textachse. */
.service-card {
  min-height: 230px !important;
  padding: 18px 18px 34px 64px !important;
}
.service-card__icon {
  left: 18px !important;
  top: 17px !important;
  width: 32px !important;
  height: 42px !important;
}
.service-card__icon svg { width: 32px !important; height: 32px !important; }
.service-card h3 { margin-bottom: 14px !important; font-size: var(--tr-card-title-size) !important; }
.service-card__list { margin: 0 0 14px !important; }
.service-card__actions { margin-top: auto !important; }

/* Alle übrigen Holztafeln folgen derselben Typografie und Innenlogik. */
.workflow-card,
.principle-card,
.project-card,
.practice-list,
.collaboration-card {
  padding: var(--tr-card-pad-top) var(--tr-card-pad-x) var(--tr-card-pad-bottom) !important;
  text-align: left !important;
}
.workflow-card__number,
.project-card__number { align-self: flex-start !important; }

/* Unser Ansatz: gleicher Abstand Wegweiser–Linie und Linie–Text, insgesamt verdoppelt. */
.approach__trail { --approach-sign-gap: 16px; }
.approach__trail::before { top: 79px !important; }
.trail-sign-master { margin-bottom: calc(var(--approach-sign-gap) * 2) !important; }
.approach-step p { margin-top: 0 !important; }

/* Über uns: bewusster Absatz vor dem Zielsatz. */
.about__mission p + p { margin-top: 1em !important; }

/* Kontakt: bewusst ohne Holztafeln, nur klare Kontaktinformationen. */
.contact-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 28px;
  margin-top: 30px;
  padding: 0;
}
.contact-list__item {
  min-width: 0;
  padding: 0 22px 0 0;
  border-right: 1px solid var(--line);
}
.contact-list__item:last-child { border-right: 0; }
.contact-list__item h3 {
  margin: 0 0 10px;
  color: var(--forest);
  font: 700 17px/1.25 "Inter",Arial,sans-serif;
}
.contact-list__item p,
.contact-list__item ul { margin: 0; padding: 0; font-size: 14px; line-height: 1.55; }
.contact-list__item ul { list-style: none; display: grid; gap: 5px; }
.contact-list__item li { position: relative; padding-left: 17px; }
.contact-list__item li::before { content: "◇"; position: absolute; left: 0; color: var(--forest); }
.contact-list__item a { color: var(--forest); text-decoration: none; }
.contact-list__item a:hover { text-decoration: underline; }

/* 80/80: gleiche Weißräume vor und nach jedem kapitelabschließenden Button. */
.approach__cta,
.services__cta,
.workflow__cta,
.projects__cta,
.collaboration__cta,
.together__cta,
.about__cta,
.contact-form__submit {
  margin-top: var(--tr-button-space) !important;
  margin-bottom: var(--tr-button-space) !important;
}

@media (max-width: 1100px) {
  .nav { gap: 12px !important; font-size: 12.5px !important; }
  .contact-list { grid-template-columns: 1fr; gap: 16px; }
  .contact-list__item { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 14px; }
  .contact-list__item:last-child { border-bottom: 0; }
}
@media (max-width: 700px) {
  .nav { justify-content: flex-start !important; }
  .service-card { padding-left: 60px !important; }
}


/* v1.2.2 – Projektkorrektur: Holztafeln, stabile Navigation, Kontaktlayout */
:root {
  --tr-topbar-height: 34px;
  --tr-header-height: 86px;
  --tr-header-total: 120px;
  --tr-card-title-size: 17px;
  --tr-card-text-size: 13px;
}

/* Kopfbereich bleibt beim Scrollen vollständig stabil. */
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  min-height: var(--tr-topbar-height) !important;
}
.topbar__inner { min-height: var(--tr-topbar-height) !important; }
.header {
  position: sticky !important;
  top: var(--tr-topbar-height) !important;
  z-index: 110 !important;
  height: var(--tr-header-height) !important;
  min-height: var(--tr-header-height) !important;
  overflow: visible !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(35,74,52,.10) !important;
}
body.is-scrolled .header,
body.is-scrolled .brand__logo,
body.is-scrolled .brand__claim,
body.is-scrolled .nav,
body.is-scrolled .nav a {
  height: unset !important;
  width: unset !important;
  font-size: inherit !important;
  padding: unset !important;
  transform: none !important;
}
.header__inner {
  height: var(--tr-header-height) !important;
  min-height: var(--tr-header-height) !important;
  align-items: center !important;
  overflow: visible !important;
}
.brand { align-self: center !important; cursor: zoom-in; }
.brand__logo {
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  min-height: 82px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
.nav,
.nav__submenu a {
  font-family: "Inter", Arial, sans-serif !important;
  font-weight: 500 !important;
}
.nav { align-self: center !important; }
.nav a { padding: 12px 0 !important; }
.nav a.active::after { display: none !important; }
.nav__submenu { top: calc(100% - 1px) !important; }
.nav__submenu a { font-size: inherit !important; }

/* Zurückpfeil: sichtbar, weiß, fett; Mouse-over orange. */
.chapter-back {
  color: #fff !important;
  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  opacity: 0 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.26) !important;
}
.chapter-back.is-visible { opacity: 1 !important; pointer-events: auto !important; }
.chapter-back:hover,
.chapter-back:focus-visible { color: var(--trail-orange) !important; opacity: 1 !important; }

/* Natürliche Holzstruktur, Abrisskante und einheitliche Typografie. */
.wood-card {
  background-color: #e2c18a !important;
  background-image: url("assets/wood-board-light.svg") !important;
  background-size: cover !important;
  background-position: center !important;
  filter: drop-shadow(0 5px 5px rgba(50,34,20,.20)) !important;
}
.wood-card::after {
  background: linear-gradient(90deg,rgba(255,255,255,.08),transparent 18%,rgba(79,45,22,.045) 50%,transparent 82%,rgba(255,255,255,.07)) !important;
}
.wood-card h3,
.wood-card p,
.wood-card ul,
.wood-card li,
.wood-card strong {
  font-family: "Inter", Arial, sans-serif !important;
  text-align: left !important;
}
.wood-card h3 {
  font-size: var(--tr-card-title-size) !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
}
.wood-card p,
.wood-card ul,
.wood-card li,
.wood-card strong {
  font-size: var(--tr-card-text-size) !important;
  line-height: 1.42 !important;
}

/* Servicekarten: Icon bleibt links; Überschrift und Text teilen dieselbe linke Textachse. */
.service-card {
  display: grid !important;
  grid-template-columns: 34px minmax(0,1fr) !important;
  grid-template-rows: auto 1fr auto !important;
  column-gap: 14px !important;
  align-content: start !important;
  padding: 18px 18px 34px !important;
}
.service-card__icon {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 34px !important;
  height: 42px !important;
  align-self: start !important;
}
.service-card h3 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 2.55em !important;
  margin: 0 0 14px !important;
  align-self: start !important;
}
.service-card h3::after { margin-top: 12px !important; }
.service-card__list {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin: 0 !important;
  padding-left: 18px !important;
}
.service-card__actions {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

/* Nummerierte Holztafeln: Nummer und Überschrift in derselben Zeile. */
.numbered-card__heading {
  display: flex !important;
  align-items: baseline !important;
  gap: 9px !important;
  margin: 0 0 14px !important;
  color: var(--forest) !important;
}
.numbered-card__heading h3 {
  flex: 1 1 auto !important;
  margin: 0 !important;
}
.numbered-card__heading h3::after { margin-top: 12px !important; }
.workflow-card__number,
.project-card__number {
  flex: 0 0 auto !important;
  color: var(--forest) !important;
  font: 700 var(--tr-card-title-size)/1.22 "Inter",Arial,sans-serif !important;
}
.workflow-card__options,
.workflow-card__option { grid-column: 1 / -1 !important; }
.workflow-card__option strong {
  display: block !important;
  margin: 0 0 6px !important;
  color: var(--forest) !important;
  font-weight: 700 !important;
}
.workflow-card__option + .workflow-card__option { margin-top: 13px !important; }

/* Unnummerierte Tafeln erhalten ein dezentes Icon links vor der Überschrift. */
.wood-card__heading {
  display: grid !important;
  grid-template-columns: 24px minmax(0,1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
}
.wood-card__heading h3 { margin: 0 !important; }
.wood-card__heading h3::after { margin-top: 12px !important; }
.wood-card__marker {
  color: var(--forest) !important;
  font: 700 25px/1 "Inter",Arial,sans-serif !important;
  transform: translateY(-1px);
}

/* Kontakt: Formular links, Telefon/E-Mail/Rückmeldung rechts untereinander. */
.contact-content {
  display: grid !important;
  grid-template-columns: minmax(0,1.45fr) minmax(280px,.7fr) !important;
  gap: clamp(38px,5vw,82px) !important;
  align-items: start !important;
  margin-top: 28px !important;
}
.contact-content .contact-form { margin-top: 0 !important; max-width: none !important; }
.contact-content .contact-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.contact-content .contact-list__item {
  padding: 0 0 18px !important;
  margin: 0 0 18px !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
.contact-content .contact-list__item:last-child {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}

/* Großansicht des Logos. */
.logo-dialog {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20,31,24,.60);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.logo-dialog.is-open { opacity: 1; pointer-events: auto; }
.logo-dialog__panel {
  position: relative;
  width: min(90vw,680px);
  max-height: 90vh;
  padding: 38px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
.logo-dialog__panel img { max-width: 100%; max-height: 76vh; object-fit: contain; }
.logo-dialog__close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: 0;
  background: transparent;
  color: var(--forest);
  font: 700 30px/1 "Inter",Arial,sans-serif;
  cursor: pointer;
}

@media (max-width: 900px) {
  .contact-content { grid-template-columns: 1fr !important; }
  .contact-content .contact-list { margin-top: 12px !important; }
}


/* =========================================================
   v1.2.3 – kompakte Navigation, echte Wegweiser-Holzstruktur,
   passende Karten-Icons
   ========================================================= */
:root {
  --tr-topbar-height: 32px !important;
  --tr-header-height: 46px !important;
  --tr-header-total: 78px !important;
}
.topbar { min-height: var(--tr-topbar-height) !important; height: var(--tr-topbar-height) !important; }
.topbar__inner { min-height: var(--tr-topbar-height) !important; height: var(--tr-topbar-height) !important; padding-top:0 !important; padding-bottom:0 !important; }
.header { height: var(--tr-header-height) !important; min-height: var(--tr-header-height) !important; top: var(--tr-topbar-height) !important; }
.header__inner { height: var(--tr-header-height) !important; min-height: var(--tr-header-height) !important; padding-top:0 !important; padding-bottom:0 !important; }
.nav { font-size:14px !important; line-height:1 !important; gap:16px !important; }
.nav a { padding:10px 0 !important; line-height:1 !important; }
.brand__logo { width:76px !important; height:76px !important; }
.chapter { scroll-margin-top: calc(var(--tr-header-total) + 10px) !important; }
.chapter > .page, .chapter > [class$="__inner"] { padding-top:clamp(26px,3.2vh,42px) !important; }
.section-heading h2, .principles h2 { margin-top:0 !important; }

.wood-card {
  background-color:#d5b27b !important;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.08),transparent 22%,rgba(54,31,15,.06) 52%,transparent 80%),
    url("assets/wood-sign-texture.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.wood-card::after {
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 26%,rgba(74,43,22,.045) 70%,transparent) !important;
  opacity:1 !important;
}

.wood-card__marker {
  width:25px !important; height:25px !important; display:inline-block !important;
  color:var(--forest) !important; font-size:0 !important; background-color:currentColor !important;
  -webkit-mask-repeat:no-repeat !important; -webkit-mask-position:center !important; -webkit-mask-size:contain !important;
  mask-repeat:no-repeat !important; mask-position:center !important; mask-size:contain !important;
}
.wood-icon--calendar {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' d='M14 20h36v32H14zM22 12v16M42 12v16M14 30h36M23 39l6 6 12-13'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' d='M14 20h36v32H14zM22 12v16M42 12v16M14 30h36M23 39l6 6 12-13'/%3E%3C/svg%3E") !important;
}
.wood-icon--eye {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' d='M6 32s10-16 26-16 26 16 26 16-10 16-26 16S6 32 6 32z'/%3E%3Ccircle cx='32' cy='32' r='7' fill='black'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' d='M6 32s10-16 26-16 26 16 26 16-10 16-26 16S6 32 6 32z'/%3E%3Ccircle cx='32' cy='32' r='7' fill='black'/%3E%3C/svg%3E") !important;
}
.wood-icon--bike {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='45' r='10'/%3E%3Ccircle cx='49' cy='45' r='10'/%3E%3Cpath d='M16 45l12-21 10 21H16zm12-21h12l9 21M26 18h9'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='45' r='10'/%3E%3Ccircle cx='49' cy='45' r='10'/%3E%3Cpath d='M16 45l12-21 10 21H16zm12-21h12l9 21M26 18h9'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.wood-icon--target {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='5'%3E%3Ccircle cx='30' cy='34' r='22'/%3E%3Ccircle cx='30' cy='34' r='12'/%3E%3Cpath d='M30 34L53 11M42 11h11v11'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='5'%3E%3Ccircle cx='30' cy='34' r='22'/%3E%3Ccircle cx='30' cy='34' r='12'/%3E%3Cpath d='M30 34L53 11M42 11h11v11'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.wood-icon--tool {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' d='M38 10a14 14 0 0 0-13 19L10 44l10 10 15-15a14 14 0 0 0 19-13l-9 7-10-10z'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' d='M38 10a14 14 0 0 0-13 19L10 44l10 10 15-15a14 14 0 0 0 19-13l-9 7-10-10z'/%3E%3C/svg%3E") !important;
}
.wood-icon--handshake {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round' d='M8 24l12-10 11 7 8-4 17 12-9 13-13 9-8-6-6 2-12-13zM24 24l10 8M18 31l13 10M31 21l-7 8'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round' d='M8 24l12-10 11 7 8-4 17 12-9 13-13 9-8-6-6 2-12-13zM24 24l10 8M18 31l13 10M31 21l-7 8'/%3E%3C/svg%3E") !important;
}
.wood-icon--document {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' d='M16 8h24l10 10v38H16zM40 8v12h12M24 31h18M24 41h18'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' d='M16 8h24l10 10v38H16zM40 8v12h12M24 31h18M24 41h18'/%3E%3C/svg%3E") !important;
}
.wood-icon--sign {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' d='M30 8v48M13 16h35l8 8-8 8H13l8-8z'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' d='M30 8v48M13 16h35l8 8-8 8H13l8-8z'/%3E%3C/svg%3E") !important;
}
@media(max-width:1100px){
  :root{--tr-header-height:48px !important;--tr-header-total:80px !important;}
  .nav{gap:12px !important;font-size:13px !important;}
}

/* =========================================================
   v1.3 – Visual Harmony based on the approved Trail Ranger
   mockup and the user's natural wood texture.
   ========================================================= */
:root{
  --tr-green:#173f27;
  --tr-green-2:#234a34;
  --tr-orange:#d75b09;
  --tr-cream:#f8f5ee;
  --tr-paper:#fffdf8;
  --tr-ink:#17231b;
  --tr-topbar-height:28px !important;
  --tr-header-height:52px !important;
  --tr-header-total:80px !important;
  --tr-content-max:1440px;
  --tr-card-gap:18px;
  --tr-button-space:28px;
}
html{scroll-behavior:smooth;scroll-padding-top:84px;background:var(--tr-cream)}
body{background:var(--tr-cream);color:var(--tr-ink);font-family:"Inter",Arial,sans-serif;overflow-x:hidden}
.page{width:min(var(--tr-content-max),calc(100% - 64px));margin-inline:auto}

/* Header / navigation: compact, stable, right aligned. */
.topbar{position:sticky;top:0;z-index:100;height:var(--tr-topbar-height)!important;min-height:var(--tr-topbar-height)!important;background:var(--tr-green)!important;color:#fff;border:0!important}
.topbar__inner{height:var(--tr-topbar-height)!important;min-height:var(--tr-topbar-height)!important;padding:0 28px!important;display:grid!important;grid-template-columns:36px 1fr auto!important;align-items:center!important}
.topbar__message{font-size:12px!important;font-weight:600!important;letter-spacing:.01em;white-space:nowrap}
.topbar__contact{gap:18px!important;font-size:11px!important}
.topbar__contact a{color:#fff!important}
.chapter-back{display:grid!important;place-items:center;width:30px!important;height:28px!important;padding:0!important;color:#fff!important;background:transparent!important;border:0!important;font:900 29px/1 Arial,sans-serif!important;opacity:0;pointer-events:none;transition:color .16s ease,opacity .16s ease}
.chapter-back.is-visible{opacity:1;pointer-events:auto}
.chapter-back:hover,.chapter-back:focus-visible{color:var(--tr-orange)!important}
.header{position:sticky!important;top:var(--tr-topbar-height)!important;z-index:95;height:var(--tr-header-height)!important;min-height:var(--tr-header-height)!important;background:rgba(255,253,248,.98)!important;border:0!important;box-shadow:0 1px 0 rgba(23,63,39,.12)}
.header__inner{height:100%!important;min-height:0!important;padding:0 30px!important;display:grid!important;grid-template-columns:minmax(250px,360px) 1fr!important;align-items:center!important}
.brand{display:flex!important;align-items:center!important;gap:10px!important;align-self:start!important;position:relative;z-index:2;text-decoration:none}
.brand__logo{width:92px!important;height:92px!important;object-fit:contain!important;transform:none!important;margin-top:-20px!important}
.brand__claim{font-size:12px!important;line-height:1.15!important;color:var(--tr-green)!important}
.nav{justify-self:end!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:17px!important;width:auto!important;font-size:13px!important;font-weight:600!important;white-space:nowrap}
.nav a{padding:17px 0 14px!important;color:var(--tr-green)!important;text-decoration:none!important;font-family:"Inter",Arial,sans-serif!important}
.nav a.active::after{display:none!important}
.nav a:hover,.nav a:focus-visible{color:var(--tr-orange)!important}
.nav__submenu{top:100%!important;left:0!important;min-width:0!important;padding:4px 0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.nav__submenu a{padding:5px 0!important;color:var(--tr-green)!important;font:600 12px/1.25 "Inter",Arial,sans-serif!important;background:transparent!important}
body:not(.at-start) .brand{visibility:hidden!important;pointer-events:none!important}
body:not(.at-start) .header__inner{grid-template-columns:1fr!important}
body:not(.at-start) .nav{grid-column:1;justify-self:end!important}
body:not(.at-start) .header{background:var(--tr-green)!important;box-shadow:none!important}
body:not(.at-start) .nav a{color:#fff!important}
body:not(.at-start) .nav a:hover,body:not(.at-start) .nav a:focus-visible{color:var(--tr-orange)!important}
body:not(.at-start) .nav__submenu a{color:#fff!important}
body.is-scrolled .header,body.is-scrolled .header__inner{height:var(--tr-header-height)!important;min-height:var(--tr-header-height)!important}

/* Chapter rhythm */
.chapter{position:relative;scroll-margin-top:82px!important;background:var(--tr-paper);min-height:calc(100svh - var(--tr-header-total));display:flex;flex-direction:column}
.chapter:nth-of-type(even){background:#faf8f2}
.chapter>.page{flex:1;padding-top:clamp(24px,3vh,42px)!important;padding-bottom:16px!important}
.section-heading{margin-bottom:clamp(18px,2.2vh,28px)!important}
.section-heading__intro{max-width:none!important;width:100%;font-size:clamp(14px,1.05vw,16px)!important;line-height:1.55!important}
.section-kicker{font-family:"Kalam",cursive!important;font-weight:700!important;font-size:clamp(18px,1.5vw,23px)!important;line-height:1.1!important;color:var(--tr-orange)!important;letter-spacing:0!important}
.section-heading h2,.principles h2{font-family:"Inter",Arial,sans-serif!important;font-size:clamp(30px,3vw,46px)!important;line-height:1.05!important;color:var(--tr-green)!important;margin:.18em 0 .42em!important}
.chapter-transition{margin-top:auto!important;padding:8px 32px 12px!important;display:grid!important;grid-template-columns:1fr 44px 1fr!important;grid-template-areas:"line arrow line2" "kicker kicker kicker"!important;align-items:center!important;gap:4px 18px!important;background:transparent!important}
.chapter-transition__line{grid-area:line;height:1px!important;background:rgba(23,63,39,.65)!important}
.chapter-transition::before{content:"";grid-area:line2;height:1px;background:rgba(23,63,39,.65)}
.chapter-transition__arrow{grid-area:arrow;color:var(--tr-green)!important;font:700 30px/1 Arial,sans-serif!important;text-decoration:none;text-align:center}
.chapter-transition__kicker{grid-area:kicker;margin:2px 0 0!important;text-align:center!important}

/* Hero, allow the logo to stand free. */
.hero__grid{padding-top:36px!important;align-items:center!important}
.hero__copy--logo-clearance{padding-top:32px!important}
.hero h1{font-size:clamp(30px,3.45vw,54px)!important;line-height:1.08!important;max-width:760px!important;margin-top:12px!important;color:var(--tr-green)!important}
.hero__visual{border-radius:0!important;overflow:visible!important}
.hero__visual img{border-radius:0 0 46% 10%/0 0 12% 7%!important}

/* Approved natural wood system: light texture + torn lower edge. */
.wood-card{
  position:relative!important;
  isolation:isolate;
  box-sizing:border-box!important;
  overflow:hidden!important;
  border:1px solid rgba(91,61,27,.28)!important;
  border-radius:2px 2px 0 0!important;
  background-color:#d9bd91!important;
  background-image:linear-gradient(rgba(255,248,231,.16),rgba(205,170,118,.07)),url("assets/wood-texture-natural.png")!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:0 7px 12px rgba(48,34,18,.17)!important;
  clip-path:polygon(0 0,100% 0,100% 94%,97% 96%,94% 94%,91% 98%,88% 95%,84% 99%,80% 95%,76% 98%,72% 94%,68% 98%,64% 95%,60% 99%,56% 95%,52% 98%,48% 95%,44% 99%,40% 94%,36% 98%,32% 95%,28% 99%,24% 95%,20% 98%,16% 95%,12% 99%,8% 95%,4% 98%,0 95%)!important;
  padding:18px 20px 28px!important;
  color:#1a241c!important;
}
.wood-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(88,53,21,.08) 1px,transparent 1px);background-size:34px 100%;opacity:.2;pointer-events:none}
.wood-card::after{content:""!important;position:absolute!important;inset:auto 0 0!important;height:13px!important;background:linear-gradient(to bottom,transparent,rgba(65,40,18,.12))!important;opacity:1!important;pointer-events:none!important}
.wood-card,.wood-card h3,.wood-card p,.wood-card li{font-family:"Inter",Arial,sans-serif!important;text-align:left!important}
.wood-card h3{font-size:clamp(16px,1.2vw,19px)!important;line-height:1.18!important;font-weight:700!important;color:var(--tr-green)!important;margin:0!important}
.wood-card p,.wood-card li{font-size:clamp(12px,.9vw,14px)!important;line-height:1.45!important}
.wood-card__heading,.numbered-card__heading{display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;align-items:center!important;gap:11px!important;min-height:46px!important;padding:0 0 11px!important;margin:0 0 14px!important;border-bottom:1px solid rgba(23,63,39,.72)!important;text-align:left!important}
.wood-card__marker,.step-card__icon{width:30px!important;height:30px!important;min-width:30px!important;margin:0!important}
.numbered-card__heading h3,.wood-card__heading h3{align-self:center!important}

/* Services: icon remains left, title and body share one clean axis. */
.services__grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:var(--tr-card-gap)!important;align-items:stretch!important}
.service-card{min-height:315px!important;padding:18px 18px 27px!important;display:grid!important;grid-template-columns:36px 1fr!important;grid-template-rows:auto 1fr auto!important;column-gap:10px!important;align-items:start!important}
.service-card__icon{grid-column:1;grid-row:1;width:32px!important;height:32px!important;margin:0!important;color:var(--tr-green)!important}
.service-card h3{grid-column:2;grid-row:1;min-height:48px!important;display:flex;align-items:center;margin:0!important;padding:0 0 12px!important;border-bottom:1px solid rgba(23,63,39,.72)!important}
.service-card__list{grid-column:1/-1;grid-row:2;margin:14px 0 0!important;padding:0!important;list-style:none!important;align-self:start!important}
.service-card__list li{padding-left:0!important;margin:0 0 7px!important}
.service-card__list li::before{display:none!important}
.service-card__actions{grid-column:1/-1;grid-row:3;align-self:end!important;margin-top:16px!important}
.card-button{font-family:"Inter",Arial,sans-serif!important}

/* Workflow, projects and all card grids: equal heights and thematic icons. */
.workflow-cards,.project-flow,.principles__grid,.collaboration-grid,.practice-project__lists{gap:var(--tr-card-gap)!important;align-items:stretch!important}
.workflow-card,.project-card,.principle-card,.collaboration-card,.practice-list{height:100%!important;min-height:0!important}
.workflow-card>p,.project-card ul,.principle-card p,.collaboration-card>p,.collaboration-card ul,.practice-list ul{margin:0!important}
.workflow-card__options{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important;margin-top:0!important}
.workflow-card__option{padding:0!important;background:transparent!important;border:0!important}
.workflow-card__option strong{display:block;margin-bottom:7px;color:var(--tr-green);font-size:13px}
.workflow-safety-note{white-space:nowrap!important;max-width:none!important;text-align:left!important;font-size:13px!important}
.project-card ul,.collaboration-card ul,.practice-list ul{list-style:none!important;padding:0!important;display:grid!important;gap:6px!important}
.project-card li,.collaboration-card li,.practice-list li{padding-left:19px!important;position:relative}
.project-card li::before,.collaboration-card li::before,.practice-list li::before{content:""!important;display:block!important;position:absolute;left:1px;top:.48em;width:7px;height:7px;border:1.5px solid var(--tr-green);transform:rotate(45deg);background:transparent}
.principles__grid .wood-card__heading{border-bottom:1px solid rgba(23,63,39,.72)!important}
.principle-card h3::before{display:none!important}

/* Approach: exact rhythm around the sign and text. */
.approach-step{display:grid!important;grid-template-rows:auto 1fr!important;align-items:start!important}
.trail-sign-master{margin-bottom:24px!important}
.approach-step p{margin-top:0!important;padding-top:24px!important;border-top:1px solid rgba(23,63,39,.28)!important}
.trail-sign-master span{color:var(--tr-green)!important}

/* Buttons: identical 80/80 breathing space. */
.approach__cta,.services__cta,.workflow__cta,.projects__cta,.collaboration__cta,.together__cta,.about__cta{margin-top:var(--tr-button-space)!important;margin-bottom:var(--tr-button-space)!important}
.paper-button{font-family:"Inter",Arial,sans-serif!important;background:var(--tr-green)!important;color:#fff!important;border-radius:3px!important;box-shadow:none!important}
.paper-button:hover,.paper-button:focus-visible{background:var(--tr-orange)!important}

/* Contact: form left, clean contact list right, closing note beside button. */
.contact-content{display:grid!important;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr)!important;gap:58px!important;align-items:start!important}
.contact-form{max-width:none!important;margin-top:12px!important}
.contact-list{display:grid!important;gap:24px!important;padding-top:12px!important}
.contact-list__item{display:grid!important;grid-template-columns:34px 1fr!important;column-gap:12px!important;position:relative}
.contact-list__item::before{content:"";grid-column:1;width:25px;height:25px;background:var(--tr-green);align-self:start;margin-top:2px;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.contact-list__item:nth-child(1)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M15 8l12 16-8 8c6 10 13 17 23 23l8-8 14 12-7 7C34 71-7 29 8 6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M15 8l12 16-8 8c6 10 13 17 23 23l8-8 14 12-7 7C34 71-7 29 8 6z'/%3E%3C/svg%3E")}
.contact-list__item:nth-child(2)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' d='M7 15h50v34H7zM8 17l24 19 24-19'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' d='M7 15h50v34H7zM8 17l24 19 24-19'/%3E%3C/svg%3E")}
.contact-list__item:nth-child(3)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' d='M8 10h48v34H28L15 55V44H8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='black' stroke-width='5' d='M8 10h48v34H28L15 55V44H8z'/%3E%3C/svg%3E")}
.contact-list__item h3,.contact-list__item p,.contact-list__item ul{grid-column:2;margin:0!important}
.contact-list__item h3{color:var(--tr-green);font-size:15px;margin-bottom:5px!important}
.contact-list__item ul{list-style:none;padding:0;display:grid;gap:7px;font-size:13px}
.contact-list__item li::before{content:"✓";color:var(--tr-green);font-weight:800;margin-right:8px}
.contact-form__actions{display:flex!important;align-items:center!important;gap:26px!important;margin-top:22px!important}
.contact-form__actions .contact-form__submit{margin:0!important;flex:0 0 auto}
.contact-form__note{margin:0!important;font-size:16px!important;line-height:1.35;color:var(--tr-green);font-weight:500}
.contact-form__status{grid-column:1/-1}

/* About – visible paragraph break before the goal. */
.about__mission p:nth-of-type(3){margin-top:22px!important}

/* Drawers harmonized with the same palette. */
.info-drawer{background:var(--tr-paper)!important;border:1px solid rgba(23,63,39,.25)!important}

@media(max-width:1100px){
  .page{width:min(100% - 36px,var(--tr-content-max))}
  .nav{gap:11px!important;font-size:12px!important}
  .topbar__contact{display:none!important}
  .services__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .workflow-safety-note{white-space:normal!important}
}
@media(max-width:760px){
  .topbar__message{font-size:10px!important;overflow:hidden;text-overflow:ellipsis}
  .header__inner{grid-template-columns:1fr!important;padding-inline:16px!important}
  .brand__logo{width:72px!important;height:72px!important;margin-top:-12px!important}
  .brand__claim{display:none!important}
  .nav{overflow-x:auto!important;justify-self:stretch!important;justify-content:flex-start!important;gap:16px!important;padding-left:86px!important;scrollbar-width:none}
  body:not(.at-start) .nav{padding-left:0!important}
  .nav::-webkit-scrollbar{display:none}
  .services__grid,.workflow-cards,.project-flow,.principles__grid,.collaboration-grid,.practice-project__lists{grid-template-columns:1fr!important}
  .service-card{min-height:0!important}
  .workflow-card__options{grid-template-columns:1fr!important}
  .contact-content{grid-template-columns:1fr!important;gap:34px!important}
  .contact-form__actions{align-items:flex-start!important;flex-direction:column!important;gap:14px!important}
  .chapter{min-height:auto!important}
}

/* =========================================================
   v1.3.2 – PreColdRead UI consolidation
   Approved natural wood texture, consistent kick-offs,
   navigation, cards and chapter transitions.
   ========================================================= */
:root{
  --kick-size:16px;
  --tr-separator:#a7aaa5;
}

/* 1 + added request: every orange kick-off uses one exact format and starts left. */
.section-kicker,
.chapter-transition__kicker,
.footer__kicker .section-kicker{
  display:block!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
  color:var(--tr-orange)!important;
  font-family:"Kalam",cursive!important;
  font-size:var(--kick-size)!important;
  line-height:1.25!important;
  font-weight:700!important;
  letter-spacing:0!important;
}

/* 2: pale neutral separators. */
.chapter-transition__line{
  background:var(--tr-separator)!important;
  opacity:.62!important;
  height:1px!important;
}

/* 3: the clickable target is centered exactly on the visible arrow. */
.chapter-transition{
  position:relative!important;
}
.chapter-transition__arrow{
  display:grid!important;
  place-items:center!important;
  width:48px!important;
  height:40px!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  color:var(--tr-green)!important;
  font:800 34px/1 Arial,sans-serif!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transform:none!important;
  position:relative!important;
  z-index:4!important;
}
.chapter-transition__arrow:hover,
.chapter-transition__arrow:focus-visible{color:var(--tr-orange)!important}

/* 4: one wood-card system based on the approved user texture. */
.wood-card,
.service-card,
.workflow-card,
.project-card,
.principle-card,
.collaboration-card,
.practice-list{
  background-color:#d8bd91!important;
  background-image:
    linear-gradient(rgba(250,241,220,.06),rgba(113,79,40,.05)),
    url("assets/wood-texture-user.png")!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  color:#18231b!important;
  text-align:left!important;
}
.wood-card h3,.wood-card p,.wood-card li,
.service-card h3,.service-card li,
.workflow-card h3,.workflow-card p,
.project-card h3,.project-card li,
.principle-card h3,.principle-card p,
.collaboration-card h3,.collaboration-card p,.collaboration-card li,
.practice-list h3,.practice-list li{
  text-align:left!important;
}

/* Approved heading configuration: icon left, max. two lines, two fine rules below. */
.wood-card__heading,
.numbered-card__heading{
  grid-template-columns:32px minmax(0,1fr)!important;
  align-items:center!important;
  gap:11px!important;
  min-height:58px!important;
  margin:0 0 14px!important;
  padding:0 0 10px!important;
  border:0!important;
  position:relative!important;
}
.wood-card__heading::after,
.numbered-card__heading::after{
  content:""!important;
  grid-column:1/-1!important;
  width:100%!important;
  height:5px!important;
  margin-top:4px!important;
  background:linear-gradient(to bottom,
    rgba(23,63,39,.75) 0 1px,
    transparent 1px 3px,
    rgba(23,63,39,.42) 3px 4px,
    transparent 4px)!important;
}
.wood-card__heading h3,
.numbered-card__heading h3{
  min-height:44px!important;
  max-height:44px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  margin:0!important;
  font-size:17px!important;
  line-height:1.25!important;
}

/* Services receive exactly the same heading rhythm. */
.service-card{
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr)!important;
  grid-template-rows:64px 1fr auto!important;
  column-gap:11px!important;
  min-height:0!important;
  padding:18px 18px 26px!important;
}
.service-card__icon{
  grid-column:1!important;
  grid-row:1!important;
  width:30px!important;
  height:30px!important;
  align-self:center!important;
}
.service-card h3{
  grid-column:2!important;
  grid-row:1!important;
  min-height:44px!important;
  max-height:44px!important;
  align-self:center!important;
  position:relative!important;
  overflow:hidden!important;
  padding:0!important;
  border:0!important;
  font-size:17px!important;
  line-height:1.25!important;
}
.service-card h3::after{
  content:""!important;
  position:absolute!important;
  left:-43px!important;
  right:0!important;
  bottom:-10px!important;
  height:5px!important;
  background:linear-gradient(to bottom,
    rgba(23,63,39,.75) 0 1px,
    transparent 1px 3px,
    rgba(23,63,39,.42) 3px 4px,
    transparent 4px)!important;
}
.service-card__list{
  grid-column:1/-1!important;
  grid-row:2!important;
  margin:15px 0 0!important;
  padding:0!important;
  align-self:start!important;
}
.service-card__list li,
.project-card li,
.collaboration-card li,
.practice-list li{
  position:relative!important;
  padding-left:19px!important;
}
.service-card__list li::before,
.project-card li::before,
.collaboration-card li::before,
.practice-list li::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:2px!important;
  top:.48em!important;
  width:7px!important;
  height:7px!important;
  border:1.5px solid var(--tr-green)!important;
  transform:rotate(45deg)!important;
  background:transparent!important;
}

/* Equivalent cards start their text/options on one common axis. */
.workflow-card,
.project-card,
.principle-card,
.collaboration-card,
.practice-list{
  display:flex!important;
  flex-direction:column!important;
}
.workflow-card > p,
.workflow-card__options,
.project-card > ul,
.principle-card > p,
.collaboration-card > p,
.collaboration-card > ul,
.practice-list > ul{
  margin-top:0!important;
}
.workflow-card__options{align-items:start!important}
.workflow-card__option strong{margin-top:0!important}

/* 5: safety-critical note. */
.workflow-safety-note{
  color:var(--tr-green)!important;
  font-weight:700!important;
}

/* 6: navigation has the same compact start-page appearance on every chapter. */
.header,
body:not(.at-start) .header{
  background:rgba(255,253,248,.98)!important;
  box-shadow:0 1px 0 rgba(23,63,39,.12)!important;
}
body:not(.at-start) .nav a{color:var(--tr-green)!important}
body:not(.at-start) .nav a:hover,
body:not(.at-start) .nav a:focus-visible{color:var(--tr-orange)!important}
body:not(.at-start) .header__inner{
  grid-template-columns:minmax(250px,360px) 1fr!important;
}
body:not(.at-start) .nav{
  grid-column:2!important;
  justify-self:end!important;
}
.nav__submenu{
  padding-top:1px!important;
  margin-top:-2px!important;
}
.nav__submenu a{padding:3px 0!important}

/* 7: full start logo + closable one-third-screen modal. */
.header{overflow:visible!important}
.brand{overflow:visible!important}
.brand__logo{
  width:104px!important;
  height:104px!important;
  object-fit:contain!important;
  margin-top:-25px!important;
  clip-path:none!important;
}
.logo-dialog__panel{width:min(33vw,520px)!important;max-width:calc(100vw - 48px)!important}
.logo-dialog__panel img{width:100%!important;height:auto!important;object-fit:contain!important}

/* 8: one line less for the message field and compact contact ending. */
.contact-form textarea{min-height:112px!important;max-height:112px!important}
.contact-form__actions{margin-top:16px!important}

/* 9: replace the wrench with manual pruning shears everywhere the tool icon is used. */
.wood-icon--tool{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='48' r='8'/%3E%3Ccircle cx='45' cy='48' r='8'/%3E%3Cpath d='M23 42L39 16M40 42L25 17M37 18c5-7 11-8 16-7-1 7-5 12-13 14M27 19c-4-6-9-8-15-7 1 7 5 11 12 14'/%3E%3C/g%3E%3C/svg%3E")!important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='48' r='8'/%3E%3Ccircle cx='45' cy='48' r='8'/%3E%3Cpath d='M23 42L39 16M40 42L25 17M37 18c5-7 11-8 16-7-1 7-5 12-13 14M27 19c-4-6-9-8-15-7 1 7 5 11 12 14'/%3E%3C/g%3E%3C/svg%3E")!important;
}

/* 10: top-bar baseline and one typography for message, phone and email. */
.topbar__inner{
  grid-template-columns:36px minmax(0,1fr) auto!important;
  column-gap:8px!important;
  justify-items:start!important;
}
.topbar__message,
.topbar__contact,
.topbar__contact a{
  font-family:"Inter",Arial,sans-serif!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:600!important;
}
.topbar__contact{justify-self:end!important}
.chapter-back{justify-self:start!important}

@media(max-width:760px){
  .logo-dialog__panel{width:min(84vw,440px)!important}
  .service-card h3,.wood-card__heading h3,.numbered-card__heading h3{font-size:16px!important}
}


/* =========================================================
   v1.3.3 PreColdRead – final chapter rhythm + wood system
   ========================================================= */
:root{
  --tr-topbar-height:28px !important;
  --tr-header-height:30px !important;
  --tr-sticky-total:58px !important;
}

/* 1–3: compact, stable navigation. Same typography and position everywhere. */
.topbar{
  position:sticky !important;
  top:0 !important;
  height:var(--tr-topbar-height) !important;
  min-height:var(--tr-topbar-height) !important;
  z-index:100 !important;
}
.topbar__inner{
  height:var(--tr-topbar-height) !important;
  min-height:var(--tr-topbar-height) !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.header,
body:not(.at-start) .header{
  position:sticky !important;
  top:var(--tr-topbar-height) !important;
  height:var(--tr-header-height) !important;
  min-height:var(--tr-header-height) !important;
  z-index:95 !important;
  overflow:visible !important;
  background:rgba(255,253,248,.98) !important;
  border:0 !important;
  box-shadow:none !important;
}
.header__inner,
body:not(.at-start) .header__inner{
  height:var(--tr-header-height) !important;
  min-height:var(--tr-header-height) !important;
  grid-template-columns:minmax(230px,300px) 1fr !important;
  align-items:center !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.nav,
body:not(.at-start) .nav{
  grid-column:2 !important;
  justify-self:end !important;
  align-self:center !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  margin:0 !important;
  transform:none !important;
}
.nav a,
body:not(.at-start) .nav a{
  font-family:"Inter",Arial,sans-serif !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:650 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
  padding:0 !important;
}
.nav__submenu{
  top:calc(100% + 1px) !important;
  min-width:max-content !important;
  width:max-content !important;
  padding:3px 0 0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.nav__submenu a{
  display:block !important;
  width:max-content !important;
  max-width:none !important;
  white-space:nowrap !important;
  font:600 12px/1.1 "Inter",Arial,sans-serif !important;
  padding:3px 0 !important;
}
.chapter{scroll-margin-top:calc(var(--tr-sticky-total) + 6px) !important;}

/* Keep the start-page logo complete without increasing menu-bar height. */
.at-start .brand{
  position:relative !important;
  align-self:start !important;
  height:0 !important;
  overflow:visible !important;
  z-index:10 !important;
}
.at-start .brand__logo{
  position:absolute !important;
  top:2px !important;
  left:0 !important;
  width:104px !important;
  height:104px !important;
  margin:0 !important;
  object-fit:contain !important;
  clip-path:none !important;
}
body:not(.at-start) .brand{visibility:hidden !important;pointer-events:none !important;}

/* 4–5: orange text appears once, only as the preview of the next chapter. */
.section-kicker--in-heading,
.footer__kicker{display:none !important;}
.section-kicker,
.chapter-transition__kicker{
  font-family:"Kalam",cursive !important;
  font-size:clamp(18px,1.5vw,23px) !important;
  line-height:1.1 !important;
  font-weight:700 !important;
  color:var(--tr-orange) !important;
  text-align:left !important;
}
.subsection-title{
  margin:0 0 18px !important;
  color:var(--tr-green) !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-size:clamp(24px,2.3vw,38px) !important;
  line-height:1.15 !important;
  font-weight:700 !important;
}
.info-panel__eyebrow{
  margin:0 0 8px !important;
  color:var(--tr-green) !important;
  font:700 12px/1.2 "Inter",Arial,sans-serif !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
}
.chapter-transition{
  width:100vw !important;
  max-width:none !important;
  margin-top:auto !important;
  margin-left:calc(50% - 50vw) !important;
  padding:8px max(28px,calc((100vw - 1180px)/2)) 10px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto 1px 24px !important;
  grid-template-areas:"kicker" "line" "arrow" !important;
  gap:6px !important;
  background:transparent !important;
  box-sizing:border-box !important;
}
.chapter-transition::before{display:none !important;content:none !important;}
.chapter-transition__kicker{
  grid-area:kicker !important;
  width:100% !important;
  margin:0 !important;
  text-align:left !important;
}
.chapter-transition__line{
  grid-area:line !important;
  display:block !important;
  width:100% !important;
  height:1px !important;
  background:rgba(92,96,93,.18) !important;
}
.chapter-transition__arrow{
  grid-area:arrow !important;
  display:flex !important;
  width:32px !important;
  height:24px !important;
  margin:0 auto !important;
  padding:0 !important;
  align-items:center !important;
  justify-content:center !important;
  color:var(--tr-green) !important;
  font:700 27px/24px Arial,sans-serif !important;
  text-decoration:none !important;
}

/* 2: natural wood texture taken from the approved start-page sign material. */
.wood-card{
  background-color:#d5b888 !important;
  background-image:
    linear-gradient(rgba(255,248,230,.10),rgba(111,72,31,.05)),
    url("assets/wood-sign-texture.png") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.wood-card::before{display:none !important;content:none !important;}

/* 3, 7, 8: icons stay left. Heading and body text share exactly one axis. No rules. */
.wood-card__heading,
.numbered-card__heading{
  display:grid !important;
  grid-template-columns:32px minmax(0,1fr) !important;
  align-items:center !important;
  gap:11px !important;
  min-height:44px !important;
  margin:0 0 14px !important;
  padding:0 !important;
  border:0 !important;
}
.wood-card__heading::after,
.numbered-card__heading::after,
.service-card h3::after{display:none !important;content:none !important;}
.wood-card__heading h3,
.numbered-card__heading h3,
.service-card h3{
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  text-align:left !important;
}
.principles__grid .wood-card__heading{border:0 !important;}
.wood-card h3::before,
.principle-card h3::before{display:none !important;content:none !important;}

/* Body axis = heading-text axis (32 px icon + 11 px gap). */
.workflow-card>p,
.workflow-card__options,
.project-card>ul,
.principle-card>p,
.collaboration-card>p,
.collaboration-card>ul,
.practice-list>ul{
  margin-left:43px !important;
  width:calc(100% - 43px) !important;
  box-sizing:border-box !important;
}

/* Services use the same icon/title/body axis. */
.service-card{
  grid-template-columns:32px minmax(0,1fr) !important;
  grid-template-rows:auto 1fr auto !important;
  column-gap:11px !important;
}
.service-card__icon{grid-column:1 !important;grid-row:1 !important;}
.service-card h3{grid-column:2 !important;grid-row:1 !important;align-self:center !important;}
.service-card__list{
  grid-column:2 !important;
  grid-row:2 !important;
  margin:14px 0 0 !important;
  padding:0 !important;
  width:100% !important;
}
.service-card__actions{grid-column:1/-1 !important;grid-row:3 !important;}

/* Diamond bullets sit outside the shared text axis; the text itself remains aligned. */
.service-card__list li,
.project-card li,
.collaboration-card li,
.practice-list li{
  position:relative !important;
  padding-left:0 !important;
}
.service-card__list li::before,
.project-card li::before,
.collaboration-card li::before,
.practice-list li::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:-17px !important;
  top:.48em !important;
  width:7px !important;
  height:7px !important;
  border:1.5px solid var(--tr-green) !important;
  transform:rotate(45deg) !important;
  background:transparent !important;
}

/* 6: the approach signs do not need separator rules. */
.trail-sign-master{margin-bottom:24px !important;}
.approach-step p{
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:0 !important;
}

/* 9: keep this heading on one line. */
.workflow-card--wide .numbered-card__heading h3{
  white-space:nowrap !important;
  font-size:16px !important;
}

@media(max-width:980px){
  .nav{gap:11px !important;}
  .nav a{font-size:12px !important;}
  .header__inner,body:not(.at-start) .header__inner{grid-template-columns:180px 1fr !important;}
}
@media(max-width:760px){
  :root{--tr-header-height:42px !important;--tr-sticky-total:70px !important;}
  .header,.header__inner{height:var(--tr-header-height) !important;min-height:var(--tr-header-height) !important;}
  .chapter-transition{padding-left:18px !important;padding-right:18px !important;}
  .workflow-card>p,.workflow-card__options,.project-card>ul,.principle-card>p,.collaboration-card>p,.collaboration-card>ul,.practice-list>ul{
    margin-left:0 !important;width:100% !important;
  }
}

/* ==========================================================
   MASTER UPDATE – lightened wood + consistent chapter footer
   Basis: v1.3.3. Only the expressly approved changes below.
   ========================================================== */

/* All wood cards retain the approved texture, only slightly lighter. */
.wood-card {
  background-color: #dfc69c !important;
  background-image:
    linear-gradient(rgba(255,255,255,.27), rgba(255,255,255,.16)),
    url("assets/wood-sign-texture.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* All wooden wayfinders are slightly lighter for improved readability. */
.trail-sign-master img {
  filter: brightness(1.13) saturate(.94) contrast(.98) !important;
}

/* Orange kick-off lines always start on the shared left content axis. */
.chapter-transition__kicker,
.section-kicker {
  text-align: left !important;
  justify-self: start !important;
}

/* Chapter footer: full-width line, then kick-off and arrow on one level. */
.chapter-transition {
  width: 100vw !important;
  max-width: none !important;
  margin-top: auto !important;
  margin-left: calc(50% - 50vw) !important;
  padding: 8px max(28px, calc((100vw - 1180px) / 2)) 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  grid-template-rows: 1px auto !important;
  grid-template-areas:
    "line line"
    "kicker arrow" !important;
  align-items: center !important;
  gap: 7px 14px !important;
  box-sizing: border-box !important;
}
.chapter-transition__line {
  grid-area: line !important;
  width: 100% !important;
  height: 1px !important;
}
.chapter-transition__kicker {
  grid-area: kicker !important;
  width: auto !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}
.chapter-transition__arrow {
  grid-area: arrow !important;
  justify-self: end !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

@media (max-width: 760px) {
  .chapter-transition {
    grid-template-columns: minmax(0, 1fr) 38px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .chapter-transition__arrow {
    width: 38px !important;
    height: 34px !important;
  }
}

/* ==========================================================
   MASTER v1.3.4 – confirmed chapter navigation refinement
   Only the explicitly approved master changes below.
   ========================================================== */

/* Slightly lighter wood, while preserving the approved texture. */
.wood-card {
  background-color: #e3cca5 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.32), rgba(255,255,255,.20)),
    url("assets/wood-sign-texture.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Slightly lighter wooden wayfinders, with unchanged structure. */
.trail-sign-master img {
  filter: brightness(1.17) saturate(.93) contrast(.97) !important;
}

/* Every chapter footer sits at the foot of its chapter. */
.chapter {
  display: flex !important;
  flex-direction: column !important;
}
.chapter-transition {
  margin-top: auto !important;
}

/* Full-width divider; kick-off left on the shared content axis;
   arrow centered on exactly the same row as the kick-off. */
.chapter-transition {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  padding: 8px 0 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 42px minmax(0,1fr) !important;
  grid-template-rows: 1px auto !important;
  grid-template-areas:
    "line line line"
    "kicker arrow spacer" !important;
  align-items: center !important;
  column-gap: 0 !important;
  row-gap: 7px !important;
  box-sizing: border-box !important;
}
.chapter-transition__line {
  grid-area: line !important;
  width: 100% !important;
  height: 1px !important;
  background: rgba(92,96,93,.18) !important;
}
.chapter-transition__kicker,
.section-kicker {
  text-align: left !important;
  justify-self: start !important;
}
.chapter-transition__kicker {
  grid-area: kicker !important;
  width: auto !important;
  margin: 0 !important;
  padding-left: max(28px, calc((100vw - 1180px) / 2)) !important;
  line-height: 1.15 !important;
}
.chapter-transition__arrow {
  grid-area: arrow !important;
  justify-self: center !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

/* The destination chapter heading must remain readable below the sticky bars. */
.chapter {
  scroll-margin-top: calc(var(--tr-sticky-total) + 8px) !important;
}

@media (max-width: 760px) {
  .chapter-transition {
    grid-template-columns: minmax(0,1fr) 38px minmax(0,1fr) !important;
  }
  .chapter-transition__kicker {
    padding-left: 18px !important;
  }
  .chapter-transition__arrow {
    width: 38px !important;
    height: 34px !important;
  }
}

/* ==========================================================
   MASTER v1.3.5 – explicitly approved logo, title and wood freeze
   Basis: v1.3.4 Master. No other visual system changes.
   ========================================================== */

/* Keep the navigation column exactly where it was, but remove the former
   clickable header logo and every associated enlargement interaction. */
.header__brand-spacer{
  display:block !important;
  width:100% !important;
  height:1px !important;
  grid-column:1 !important;
}
.brand,
.logo-dialog{display:none !important;}

/* One shared title construction for Start, Über uns and Kontakt. */
.section-title-row{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:22px !important;
}
.section-title-row__logo{
  display:block !important;
  width:auto !important;
  height:clamp(78px,7vw,104px) !important;
  max-width:92px !important;
  object-fit:contain !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  transition:none !important;
  pointer-events:none !important;
}
.section-title-row__logo:hover,
.section-title-row__logo:focus{
  transform:none !important;
  filter:none !important;
}

/* Hero title spans the full content width and consists of exactly two lines
   on desktop, with the requested break after “auf”. */
.hero__grid{
  grid-template-columns:minmax(0,1fr) minmax(300px, .72fr) !important;
  align-items:start !important;
}
.hero__title-row{
  grid-column:1 / -1 !important;
  width:100% !important;
  margin:0 0 18px !important;
}
.hero__title-row h1{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  color:var(--tr-green) !important;
  font-family:"Kalam",cursive !important;
  font-size:clamp(31px,3.1vw,48px) !important;
  line-height:1.04 !important;
  font-weight:700 !important;
  letter-spacing:-.018em !important;
}
.hero-title__line{
  display:block !important;
  white-space:nowrap !important;
}
.hero__copy--logo-clearance{
  padding-top:0 !important;
}
.hero__visual{
  align-self:start !important;
  margin-top:clamp(8px,1.4vh,18px) !important;
}

/* Main chapter headings use the hero typeface, at the existing smaller scale. */
.section-heading h2,
.principles h2{
  font-family:"Kalam",cursive !important;
  font-size:clamp(30px,3vw,46px) !important;
  line-height:1.05 !important;
  font-weight:700 !important;
  color:var(--tr-green) !important;
}
#principles-title{
  white-space:nowrap !important;
}

/* About and Contact show the logo once, in the same left title position as Start. */
.about__heading,
.contact__heading{
  width:100% !important;
  margin-bottom:clamp(18px,2.2vh,28px) !important;
}
.about__heading h2,
.contact__heading h2{
  margin:0 !important;
}
.section-title-row__content{
  min-width:0 !important;
}
.contact__heading .section-heading__intro{
  margin-top:10px !important;
}

/* Every orange kick-off starts exactly on the shared page content axis. */
.chapter-transition__kicker,
.section-kicker{
  text-align:left !important;
  justify-self:start !important;
}
.chapter-transition__kicker{
  padding-left:max(32px,calc((100vw - var(--tr-content-max))/2)) !important;
}

/* Frozen light-spruce wood system. This versioned asset is the single source
   for every wooden card; it must not be replaced without an explicit change. */
.wood-card{
  background-color:#e8d7b8 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,.12)),
    url("assets/wood-texture-fichte-frozen-v1.png") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.trail-sign-master img{
  filter:brightness(1.18) saturate(.78) contrast(.96) !important;
  transition:none !important;
  transform:none !important;
}
.trail-sign-master:hover img,
.trail-sign-master:focus-within img{
  filter:brightness(1.18) saturate(.78) contrast(.96) !important;
  transform:none !important;
}

@media(max-width:1180px){
  .hero__title-row h1{
    font-size:clamp(29px,3.25vw,40px) !important;
  }
  .section-title-row__logo{
    height:clamp(72px,7vw,92px) !important;
    max-width:82px !important;
  }
}

@media(max-width:900px){
  .hero__grid{
    grid-template-columns:1fr !important;
  }
  .hero__title-row{
    grid-column:1 !important;
  }
  .hero-title__line{
    white-space:normal !important;
  }
  #principles-title{
    white-space:normal !important;
  }
}

@media(max-width:760px){
  .section-title-row{
    column-gap:14px !important;
  }
  .section-title-row__logo{
    height:66px !important;
    max-width:54px !important;
  }
  .hero__title-row h1{
    font-size:30px !important;
  }
  .chapter-transition__kicker{
    padding-left:18px !important;
  }
}

/* The frozen spruce wayfinder is already rendered in its final light tone. */
.trail-sign-master img,
.trail-sign-master:hover img,
.trail-sign-master:focus-within img{
  filter:none !important;
}

/* ==========================================================
   MASTER v1.3.6 – title/logo placement, chapter kick-offs and
   frozen spruce-card refinements. Basis: v1.3.5 Master.
   Only the explicitly requested changes are included below.
   ========================================================== */

/* One logo per chapter, always to the right of the page heading. */
.section-title-row,
.section-heading.section-title-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-rows:auto auto !important;
  column-gap:clamp(20px,2.4vw,38px) !important;
  align-items:start !important;
  width:100% !important;
}
.section-title-row > h1,
.section-title-row > h2,
.section-title-row > .section-title-row__content{
  grid-column:1 !important;
  min-width:0 !important;
}
.section-heading.section-title-row > h2{
  grid-row:1 !important;
}
.section-heading.section-title-row > .section-heading__intro{
  grid-column:1 !important;
  grid-row:2 !important;
}
.section-title-row__logo{
  grid-column:2 !important;
  grid-row:1 / span 2 !important;
  justify-self:end !important;
  align-self:start !important;
  display:block !important;
  width:auto !important;
  height:clamp(78px,6.3vw,96px) !important;
  max-width:96px !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  transform:none !important;
  transition:none !important;
  filter:none !important;
  pointer-events:none !important;
}
.section-title-row__logo:hover,
.section-title-row__logo:focus{
  transform:none !important;
  transition:none !important;
  filter:none !important;
}

/* Move hero title + logo down by one heading line while retaining exactly two lines. */
.hero__grid{
  grid-template-columns:minmax(0,1fr) minmax(320px,.72fr) !important;
  grid-template-rows:auto auto !important;
  align-items:start !important;
}
.hero__title-row{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  padding-top:clamp(36px,3.3vw,52px) !important;
  margin:0 0 18px !important;
}
.hero__title-row h1{
  grid-column:1 !important;
  grid-row:1 / span 2 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.hero-title__line{
  display:block !important;
  white-space:nowrap !important;
}
.hero__copy{
  grid-column:1 !important;
  grid-row:2 !important;
}
.hero__visual{
  grid-column:2 !important;
  grid-row:2 !important;
  align-self:center !important;
  margin-top:0 !important;
  transform:translateY(-18px) !important;
}

/* All orange kick-off texts start on the exact shared page-content axis. */
.chapter-transition__kicker,
.section-kicker{
  text-align:left !important;
  justify-self:start !important;
}
.chapter-transition__kicker{
  box-sizing:border-box !important;
  padding-left:max(32px,calc((100vw - var(--tr-content-max))/2)) !important;
}

/* A single, unambiguous approach wayfinder made from the frozen spruce texture. */
.trail-sign-master{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  width:min(292px,100%) !important;
  min-height:94px !important;
  margin:0 auto 24px !important;
  padding:15px 45px 15px 22px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background-color:#ead9b9 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.20),rgba(255,255,255,.08)),
    url("assets/wood-texture-fichte-frozen-v1.png") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  clip-path:polygon(0 0,84% 0,100% 50%,84% 100%,0 100%,3% 92%,1% 81%,3% 68%,1% 55%,2% 42%,0 28%,2% 14%) !important;
  filter:drop-shadow(0 4px 5px rgba(48,34,18,.18)) !important;
}
.trail-sign-master::before{
  content:"" !important;
  position:absolute !important;
  inset:3px !important;
  z-index:-1 !important;
  clip-path:inherit !important;
  box-shadow:inset 0 0 0 1px rgba(76,49,21,.52) !important;
  pointer-events:none !important;
}
.trail-sign-master img{
  display:none !important;
}
.trail-sign-master span{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  width:100% !important;
  margin:0 !important;
  color:var(--tr-green) !important;
  text-align:center !important;
  text-shadow:none !important;
}

/* Frozen light-spruce texture for all remaining wooden cards. */
.wood-card{
  --wood-edge:polygon(0 0,100% 0,100% 94.4%,97.1% 93.1%,95.4% 98.8%,91.7% 96.1%,88.4% 99.3%,84.7% 94.0%,81.2% 97.9%,77.6% 95.0%,74.1% 99.5%,70.4% 96.3%,67.0% 93.8%,63.2% 99.0%,59.6% 95.4%,55.8% 99.4%,52.1% 94.7%,48.6% 97.6%,44.8% 93.5%,41.1% 99.2%,37.4% 96.0%,33.7% 98.8%,30.1% 93.9%,26.5% 99.2%,22.7% 95.5%,19.2% 98.6%,15.4% 93.7%,11.8% 99.0%,8.0% 96.2%,4.2% 98.3%,0 94.9%) !important;
  background-color:#e8d7b8 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,.12)),
    url("assets/wood-texture-fichte-frozen-v1.png") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  clip-path:var(--wood-edge) !important;
}
.wood-card:nth-child(3n+2){
  --wood-edge:polygon(0 0,100% 0,100% 96.8%,96.7% 94.1%,93.5% 99.2%,89.9% 95.7%,86.2% 98.6%,82.8% 93.6%,79.1% 99.4%,75.5% 96.2%,71.9% 98.7%,68.3% 94.0%,64.6% 99.2%,61.1% 95.5%,57.3% 98.9%,53.8% 93.8%,50.2% 99.4%,46.5% 96.0%,42.8% 98.4%,39.2% 94.1%,35.6% 99.1%,31.9% 95.2%,28.2% 98.8%,24.6% 93.7%,20.9% 99.3%,17.4% 96.0%,13.6% 98.5%,10.0% 94.3%,6.4% 99.0%,3.0% 95.5%,0 97.1%) !important;
}
.wood-card:nth-child(3n){
  --wood-edge:polygon(0 0,100% 0,100% 95.3%,97.2% 98.8%,93.6% 94.0%,90.1% 99.4%,86.5% 96.1%,82.9% 98.5%,79.2% 93.5%,75.7% 99.2%,72.0% 95.7%,68.4% 98.9%,64.8% 94.1%,61.2% 99.4%,57.6% 95.2%,54.0% 98.6%,50.4% 93.8%,46.8% 99.1%,43.1% 96.0%,39.5% 98.7%,35.9% 94.0%,32.2% 99.4%,28.6% 95.4%,25.0% 98.8%,21.4% 93.6%,17.8% 99.2%,14.2% 96.1%,10.6% 98.5%,7.0% 94.2%,3.5% 99.0%,0 95.9%) !important;
}

/* Remove every line after wooden-card headings and use one shared spacing rhythm. */
.wood-card__heading,
.numbered-card__heading,
.principles__grid .wood-card__heading{
  min-height:44px !important;
  margin:0 0 18px !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
}
.wood-card__heading::before,
.wood-card__heading::after,
.numbered-card__heading::before,
.numbered-card__heading::after,
.wood-card h3::before,
.wood-card h3::after,
.service-card h3::before,
.service-card h3::after{
  display:none !important;
  content:none !important;
  border:0 !important;
}

/* Service-card bullet lists start at one common vertical position. */
.service-card{
  grid-template-rows:58px minmax(0,1fr) auto !important;
}
.service-card__icon,
.service-card h3{
  align-self:start !important;
}
.service-card h3{
  min-height:44px !important;
  display:flex !important;
  align-items:flex-start !important;
  padding-top:1px !important;
}
.service-card__list{
  margin:20px 0 0 !important;
  align-self:start !important;
}

/* Requested wording remains on one line on desktop. */
#principles-title{
  white-space:nowrap !important;
}

/* “Wofür steht Trail Ranger?” uses the current page-heading typeface. */
.about__mission .subsection-title{
  font-family:"Kalam",cursive !important;
  font-weight:700 !important;
  color:var(--tr-green) !important;
}

@media(max-width:900px){
  .hero__grid{
    grid-template-columns:1fr !important;
  }
  .hero__title-row,
  .hero__copy,
  .hero__visual{
    grid-column:1 !important;
  }
  .hero__visual{
    grid-row:3 !important;
    transform:none !important;
  }
  .hero-title__line,
  #principles-title{
    white-space:normal !important;
  }
}

@media(max-width:760px){
  .section-title-row,
  .section-heading.section-title-row{
    column-gap:14px !important;
  }
  .section-title-row__logo{
    height:64px !important;
    max-width:56px !important;
  }
  .hero__title-row{
    padding-top:30px !important;
  }
  .chapter-transition__kicker{
    padding-left:18px !important;
  }
  .trail-sign-master{
    width:min(270px,100%) !important;
    min-height:88px !important;
  }
}

/* v1.3.6 final alignment refinements after viewport review. */
.chapter-transition__kicker{
  padding-left:max(48px,calc((100vw - var(--page))/2 + 48px)) !important;
}

/* No connector may visually read as a second board behind the approach sign. */
.approach__trail::before{
  display:none !important;
  content:none !important;
}

/* More irregular, less repetitive broken/torn lower edges. */
.wood-card{
  --wood-edge:polygon(0 0,100% 0,100% 95.8%,97.3% 94.0%,94.1% 99.1%,89.2% 96.4%,84.8% 99.4%,79.7% 94.6%,74.0% 98.7%,68.2% 96.0%,63.4% 99.5%,57.1% 93.8%,51.6% 98.9%,45.3% 95.1%,39.1% 99.3%,33.6% 94.4%,27.2% 98.6%,21.4% 96.2%,16.0% 99.2%,10.7% 93.9%,5.1% 98.8%,0 96.0%) !important;
}
.wood-card:nth-child(3n+2){
  --wood-edge:polygon(0 0,100% 0,100% 97.0%,96.4% 93.9%,92.0% 98.8%,87.3% 96.1%,81.8% 99.4%,76.5% 94.3%,70.9% 98.2%,65.0% 95.5%,59.8% 99.3%,54.1% 93.7%,48.4% 98.9%,42.6% 96.0%,36.9% 99.4%,30.8% 94.1%,25.6% 98.4%,19.9% 95.8%,14.3% 99.1%,8.5% 94.0%,3.7% 98.7%,0 96.9%) !important;
}
.wood-card:nth-child(3n){
  --wood-edge:polygon(0 0,100% 0,100% 95.1%,97.8% 98.8%,93.0% 94.2%,88.4% 99.2%,82.6% 95.9%,77.1% 98.6%,71.4% 93.8%,66.0% 99.4%,60.5% 95.2%,54.7% 98.9%,49.3% 94.0%,43.6% 99.3%,37.7% 95.7%,32.0% 98.4%,26.4% 93.9%,20.8% 99.1%,15.0% 95.4%,9.2% 98.8%,4.0% 94.3%,0 97.0%) !important;
}

@media(max-width:760px){
  .chapter-transition__kicker{
    padding-left:18px !important;
  }
}
/* ==========================================================
   MASTER v1.3.7 – final review round before Cold Read.
   Basis: v1.3.6 Master. Only the explicitly requested changes.
   ========================================================== */

/* Keep the transition visible at the bottom edge of every chapter and
   reserve its space so chapter content cannot cover it. */
.chapter{
  min-height:calc(100svh - var(--tr-sticky-total)) !important;
  padding-bottom:74px !important;
}
.chapter-transition{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:0 !important;
  z-index:12 !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(to bottom,rgba(255,253,248,0),rgba(255,253,248,.96) 22%,rgba(255,253,248,.98)) !important;
}
.chapter-transition__line,
.chapter-transition__kicker,
.chapter-transition__arrow{
  visibility:visible !important;
  opacity:1 !important;
}

/* Exact shared left axis: page margin + the established 48 px inner inset. */
.chapter-transition__kicker{
  padding-left:max(80px,calc((100vw - var(--tr-content-max))/2 + 48px)) !important;
}

/* Start illustration begins two text lines higher. */
.hero__visual{
  transform:translateY(-66px) !important;
}

/* New Leistungen subpage: compact three-board layout that fits the
   established one-screen chapter system. */
.task-catalog__inner{
  padding-left:48px !important;
  padding-right:48px !important;
}
.task-catalog__heading{
  margin-bottom:clamp(16px,2vh,24px) !important;
}
.task-catalog__grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
  margin-top:18px !important;
}
.task-card{
  min-height:310px !important;
  padding:22px 22px 34px !important;
}
.task-card .wood-card__heading{
  margin:0 0 16px !important;
  min-height:44px !important;
}
.task-card__lead,
.task-card > ul{
  margin-left:43px !important;
  width:calc(100% - 43px) !important;
  box-sizing:border-box !important;
}
.task-card__lead{
  margin-top:0 !important;
  margin-bottom:12px !important;
  font-size:13px !important;
  line-height:1.42 !important;
}
.task-card > ul{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.task-card li{
  position:relative !important;
  margin:0 !important;
  padding:0 !important;
  font-size:13px !important;
  line-height:1.42 !important;
}
.task-card li + li{margin-top:6px !important;}
.task-card li::before{
  content:"" !important;
  position:absolute !important;
  left:-17px !important;
  top:.48em !important;
  width:7px !important;
  height:7px !important;
  border:1.5px solid var(--tr-green) !important;
  background:transparent !important;
  transform:rotate(45deg) !important;
}
.task-catalog__cta{
  margin-top:var(--tr-button-space) !important;
}
.wood-icon--infrastructure{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 50h48M13 50V31h38v19M18 31V20h28v11M18 39h28M25 31v19M39 31v19M13 25h38'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 50h48M13 50V31h38v19M18 31V20h28v11M18 39h28M25 31v19M39 31v19M13 25h38'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Requested line breaks in collaboration card headings. */
#zusammenarbeit .collaboration-card h3{
  line-height:1.16 !important;
}

@media(max-width:980px){
  .hero__visual{transform:none !important;}
  .task-catalog__grid{grid-template-columns:1fr !important;}
  .task-card{min-height:0 !important;}
  .chapter{padding-bottom:72px !important;}
}
@media(max-width:760px){
  .chapter-transition__kicker{padding-left:18px !important;}
  .task-catalog__inner{padding-left:18px !important;padding-right:18px !important;}
  .task-card__lead,.task-card > ul{margin-left:0 !important;width:100% !important;}
  .task-card > ul{padding-left:18px !important;}
}


/* ==========================================================
   MASTER v1.3.8 – final transition visibility and alignment review.
   Basis: v1.3.7 Master. Only the explicitly requested changes.
   ========================================================== */

:root{
  /* Exact text start used by the chapter headings at every desktop width. */
  --tr-shared-left-axis:max(48px,calc((100vw - var(--tr-content-max))/2 + 16px));
}

/* 1: move the start illustration slightly down so title and logo remain clear. */
.hero__visual{
  transform:translateY(-38px) !important;
}

/* 2, 3 and 7: every chapter transition is fully visible at the chapter foot.
   The more compact footer also reserves less vertical space for the content. */
.chapter{
  padding-bottom:50px !important;
}
.chapter-transition{
  bottom:0 !important;
  min-height:42px !important;
  padding:4px 0 5px !important;
  grid-template-rows:1px 32px !important;
  row-gap:4px !important;
  overflow:visible !important;
}
.chapter-transition__line{
  align-self:start !important;
}
.chapter-transition__kicker{
  padding-left:var(--tr-shared-left-axis) !important;
  line-height:1.05 !important;
  align-self:center !important;
}
.chapter-transition__arrow{
  width:42px !important;
  height:32px !important;
  font-size:26px !important;
  line-height:32px !important;
  align-self:center !important;
  justify-self:center !important;
}

/* 4: stronger separation between the explanatory lead and the bullet list. */
.task-card__lead{
  margin-bottom:20px !important;
}

/* 5 and 6: kick-offs and footer use the same left axis as headings and body. */
.footer__inner{
  padding-left:16px !important;
  padding-right:16px !important;
}
.footer__grid,
.footer__bottom{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Short desktop viewports keep the established design while reducing only
   vertical whitespace and card height. This preserves the mandatory chapter
   footer on Start, Leistungen and the other one-screen chapters. */
@media (min-width:981px) and (max-height:820px){
  .chapter > .page,
  .chapter > [class$="__inner"]{
    padding-top:18px !important;
    padding-bottom:8px !important;
  }
  .section-heading{
    margin-bottom:12px !important;
  }
  .section-heading h2,
  .principles h2{
    margin-top:.08em !important;
    margin-bottom:.28em !important;
  }
  .section-heading__intro{
    line-height:1.44 !important;
  }
  .approach__cta,
  .services__cta,
  .task-catalog__cta,
  .workflow__cta,
  .projects__cta,
  .collaboration__cta,
  .together__cta,
  .about__cta{
    margin-top:14px !important;
    margin-bottom:14px !important;
  }

  /* Start page: compact only the vertical whitespace. */
  .hero__title-row{
    padding-top:24px !important;
    margin-bottom:12px !important;
  }
  .hero__intro{
    margin-top:16px !important;
    gap:16px !important;
  }
  .hero__access{
    margin-top:18px !important;
  }
  .hero__copy p{
    line-height:1.48 !important;
  }

  /* Leistungen and Aufgaben/Objekte: shorter boards, unchanged content. */
  .service-card{
    min-height:285px !important;
    padding-top:15px !important;
    padding-bottom:23px !important;
  }
  .service-card__list{
    margin-top:15px !important;
  }
  .task-card{
    min-height:282px !important;
    padding-top:18px !important;
    padding-bottom:28px !important;
  }

  /* Principles is the densest one-screen chapter. Keep all eight boards while
     tightening only their internal vertical rhythm. */
  .principles__grid{
    gap:10px !important;
    margin-top:10px !important;
  }
  .principle-card{
    padding:13px 15px 20px !important;
  }
  .principles__grid .wood-card__heading{
    min-height:36px !important;
    margin-bottom:10px !important;
  }
  .principle-card > p{
    line-height:1.34 !important;
  }
}

@media(max-width:980px){
  .hero__visual{
    transform:none !important;
  }
}

@media(max-width:760px){
  :root{--tr-shared-left-axis:18px;}
  .chapter{
    padding-bottom:48px !important;
  }
  .chapter-transition{
    min-height:40px !important;
    grid-template-rows:1px 30px !important;
    padding-bottom:4px !important;
  }
  .chapter-transition__arrow{
    width:38px !important;
    height:30px !important;
    line-height:30px !important;
  }
  .footer__inner{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

/* Keep the sticky menu fully opaque so the previous chapter footer cannot
   show through when the next chapter is aligned below it. */
.header,
body:not(.at-start) .header{
  background:var(--tr-paper) !important;
}


/* ==========================================================
   v1.3.9 Review – final alignment and content corrections.
   Basis: v1.3.8 Review/Master. Only the explicitly requested changes.
   ========================================================== */

:root{
  /* Exact chapter text axis: page left edge plus the established 48 px inset. */
  --tr-shared-left-axis:max(48px,calc((100vw - var(--page))/2 + 48px));
}

/* Kick-off text begins on exactly the same left edge as every chapter heading
   and body-text block, including wide desktop viewports. */
.chapter-transition__kicker{
  padding-left:var(--tr-shared-left-axis) !important;
}

/* One clearly visible blank text line between the lead sentence and the list
   in all three “Aufgaben und Objekte” wooden boards. The higher specificity is
   intentional because the frozen generic wood-card rule resets paragraph margins. */
.task-card.wood-card > .task-card__lead{
  margin-bottom:24px !important;
}

/* After removing the intermediate heading, the mission copy remains aligned
   with the established text column. */
.about__mission,
.about__mission p{
  text-align:left !important;
}

@media(max-width:760px){
  :root{--tr-shared-left-axis:18px;}
  .hero__grid,
  .approach__inner,
  .services__inner,
  .task-catalog__inner,
  .workflow__inner,
  .principles-page__inner,
  .projects__inner,
  .practice-projects__inner,
  .collaboration__inner,
  .together__inner,
  .about__inner,
  .contact__inner{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}


/* ==========================================================
   v1.3.9.edit.2 – shared navigation and top-bar refinements.
   Basis: v1.3.9.edit.1. Only the explicitly requested changes.
   ========================================================== */

/* Every main-navigation label uses one identical type definition in every
   chapter. Submenu labels use the same size as the top-level labels. */
.nav,
body.at-start .nav,
body:not(.at-start) .nav{
  font-family:"Inter",Arial,sans-serif !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:650 !important;
  letter-spacing:.01em !important;
}
.nav > .nav__item > a,
body.at-start .nav > .nav__item > a,
body:not(.at-start) .nav > .nav__item > a,
.nav__submenu a,
body.at-start .nav__submenu a,
body:not(.at-start) .nav__submenu a{
  font-family:"Inter",Arial,sans-serif !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:650 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
}

/* “Bei Bedarf” begins exactly on the same desktop text axis as headings and
   body copy. The back arrow sits compactly to its left. */
.topbar__inner{
  padding-left:16px !important;
  padding-right:28px !important;
  grid-template-columns:20px minmax(0,1fr) auto !important;
  column-gap:12px !important;
}
.chapter-back{
  width:20px !important;
  height:24px !important;
  font-family:Arial,sans-serif !important;
  font-size:20px !important;
  line-height:1 !important;
  font-weight:900 !important;
  transform:scaleX(.72) !important;
  transform-origin:left center !important;
}

@media(max-width:760px){
  .topbar__inner{
    padding-left:0 !important;
    padding-right:0 !important;
    grid-template-columns:14px minmax(0,1fr) auto !important;
    column-gap:4px !important;
  }
  .chapter-back{
    width:14px !important;
    font-size:18px !important;
  }
}


/* ==========================================================
   v1.3.9.edit.3 – final content rhythm and chapter ending review.
   Basis: v1.3.9.edit.2. Only the explicitly requested changes.
   ========================================================== */

/* Start: halve the distance between the two-line hero heading and the first
   introductory paragraph. All following start-page copy moves upward with it. */
.hero__grid{
  align-content:start !important;
  grid-template-rows:max-content max-content !important;
  row-gap:0 !important;
}
.hero__title-row{
  margin-bottom:9px !important;
}
.hero__intro{
  margin-top:14px !important;
}

/* Über uns: halve the space above the core message. */
.about__mission{
  margin-top:27px !important;
  padding-top:16px !important;
}

/* Core message: forest green, bold and memorable, framed by restrained
   compass and leaf icons. The sentence itself remains editable. */
.about__mission-highlight{
  display:grid !important;
  grid-template-columns:26px minmax(0,auto) 26px !important;
  align-items:center !important;
  justify-content:start !important;
  column-gap:12px !important;
  max-width:980px !important;
  color:var(--tr-green) !important;
  font-weight:700 !important;
  font-size:18px !important;
  line-height:1.42 !important;
}
.about__mission-highlight::before,
.about__mission-highlight::after{
  content:"" !important;
  display:block !important;
  width:24px !important;
  height:24px !important;
  background:var(--tr-green) !important;
}
.about__mission-highlight::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='23'/%3E%3Cpath d='M39 25l-5 10-10 5 5-10zM32 6v6M32 52v6M6 32h6M52 32h6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat !important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='23'/%3E%3Cpath d='M39 25l-5 10-10 5 5-10zM32 6v6M32 52v6M6 32h6M52 32h6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat !important;
}
.about__mission-highlight::after{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M52 10C31 12 16 22 13 38c-2 10 5 17 15 16 17-2 26-19 24-44Z'/%3E%3Cpath d='M16 50c9-11 18-19 31-27M29 39l-1-10M38 31l9 1'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat !important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M52 10C31 12 16 22 13 38c-2 10 5 17 15 16 17-2 26-19 24-44Z'/%3E%3Cpath d='M16 50c9-11 18-19 31-27M29 39l-1-10M38 31l9 1'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* Mandatory chapter structure: every existing chapter ends with a visible
   divider, orange kick-off and centered down arrow. */
.chapter{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:calc(100svh - var(--tr-sticky-total)) !important;
  padding-bottom:64px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
.chapter-transition{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;
  width:100vw !important;
  min-height:54px !important;
  padding:5px 0 7px !important;
  z-index:20 !important;
  overflow:visible !important;
  visibility:visible !important;
  opacity:1 !important;
  background:linear-gradient(to bottom,rgba(255,253,248,0),rgba(255,253,248,.97) 22%,rgba(255,253,248,1)) !important;
}
.chapter-transition__line,
.chapter-transition__kicker,
.chapter-transition__arrow{
  visibility:visible !important;
  opacity:1 !important;
}
.chapter-transition__kicker{
  color:var(--tr-orange) !important;
}
.chapter-transition__arrow{
  display:grid !important;
  place-items:center !important;
  color:var(--tr-green) !important;
  text-decoration:none !important;
}

@media (min-width:981px) and (max-height:820px){
  .hero__title-row{margin-bottom:6px !important;}
  .hero__intro{margin-top:8px !important;}
  .about__mission{margin-top:20px !important;padding-top:12px !important;}
  .chapter{padding-bottom:60px !important;}
}

@media(max-width:760px){
  .about__mission-highlight{
    grid-template-columns:22px minmax(0,1fr) 22px !important;
    column-gap:9px !important;
    font-size:17px !important;
  }
  .about__mission-highlight::before,
  .about__mission-highlight::after{
    width:20px !important;
    height:20px !important;
  }
  .chapter{padding-bottom:62px !important;}
}

/* ==========================================================
   v1.3.10 PreColdRead – editor removed and mandatory chapter
   ending permanently visible for every active main/subpage.
   Basis: v1.3.9.edit.3. No other design changes.
   ========================================================== */
:root{
  --tr-fixed-transition-height:54px;
}

/* Reserve space so the fixed chapter ending never covers chapter content. */
.chapter{
  padding-bottom:calc(var(--tr-fixed-transition-height) + 12px) !important;
}

/* Only the transition of the currently visible chapter is shown. It is fixed
   to the lower viewport edge, so varying card or text heights cannot hide it. */
.chapter-transition{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100vw !important;
  height:var(--tr-fixed-transition-height) !important;
  min-height:var(--tr-fixed-transition-height) !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  z-index:95 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr) !important;
  grid-template-rows:1px 53px !important;
  grid-template-areas:
    "line line line"
    "kicker arrow spacer" !important;
  column-gap:0 !important;
  row-gap:0 !important;
  align-items:center !important;
  background:rgba(255,253,248,.985) !important;
  box-shadow:0 -8px 18px rgba(23,63,39,.035) !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .14s ease !important;
}
.chapter:nth-of-type(even) .chapter-transition{
  background:rgba(250,248,242,.985) !important;
}
.chapter-transition.is-current-transition{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
.chapter-transition::before,
.chapter-transition::after{
  display:none !important;
  content:none !important;
}
.chapter-transition__line{
  grid-area:line !important;
  display:block !important;
  align-self:start !important;
  width:100% !important;
  height:1px !important;
  margin:0 !important;
  background:var(--tr-separator,#a7aaa5) !important;
  opacity:.62 !important;
}
.chapter-transition__kicker{
  grid-area:kicker !important;
  align-self:center !important;
  justify-self:stretch !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 16px 0 var(--tr-shared-left-axis) !important;
  box-sizing:border-box !important;
  color:var(--tr-orange) !important;
  text-align:left !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  line-height:1.15 !important;
}
.chapter-transition__arrow{
  grid-area:arrow !important;
  align-self:center !important;
  justify-self:center !important;
  display:grid !important;
  place-items:center !important;
  width:42px !important;
  height:42px !important;
  margin:0 !important;
  padding:0 !important;
  color:var(--tr-green) !important;
  font:800 28px/1 Arial,sans-serif !important;
  text-decoration:none !important;
  pointer-events:auto !important;
}
.chapter-transition__arrow:hover,
.chapter-transition__arrow:focus-visible{
  color:var(--tr-orange) !important;
}

@media(max-width:760px){
  :root{
    --tr-fixed-transition-height:50px;
  }
  .chapter-transition{
    grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) !important;
    grid-template-rows:1px 49px !important;
  }
  .chapter-transition__kicker{
    padding-left:18px !important;
    padding-right:8px !important;
    font-size:14px !important;
  }
  .chapter-transition__arrow{
    width:38px !important;
    height:38px !important;
    font-size:25px !important;
  }
}

/* ==========================================================
   v1.3.11 PreColdRead – hero illustration clearance only.
   Basis: v1.3.10 PreColdRead. No other design changes.
   ========================================================== */
/* The illustration remains in its existing grid position but is moved below
   the two-line hero heading and logo, so neither is covered. */
.hero__visual{
  transform:translateY(28px) !important;
}

@media(max-width:980px){
  .hero__visual{
    transform:none !important;
  }
}

/* v1.3.11 navigation safety: hidden fixed transitions and all of their
   descendants must never intercept a click. Only the current chapter arrow
   is interactive and visible. */
.chapter-transition:not(.is-current-transition),
.chapter-transition:not(.is-current-transition) *{
  pointer-events:none !important;
}
.chapter-transition:not(.is-current-transition) .chapter-transition__arrow,
.chapter-transition:not(.is-current-transition) .chapter-transition__kicker,
.chapter-transition:not(.is-current-transition) .chapter-transition__line{
  visibility:hidden !important;
  opacity:0 !important;
}
.chapter-transition.is-current-transition,
.chapter-transition.is-current-transition .chapter-transition__arrow{
  pointer-events:auto !important;
}
.chapter-transition.is-current-transition .chapter-transition__arrow,
.chapter-transition.is-current-transition .chapter-transition__kicker,
.chapter-transition.is-current-transition .chapter-transition__line{
  visibility:visible !important;
  opacity:1 !important;
}

/* ==========================================================
   v1.4.0 ColdRead – consolidated, user-approved cold-read changes.
   Basis: v1.3.11 PreColdRead. No unrelated design changes.
   ========================================================== */

/* 43: long copy outside cards uses intentional desktop line groups. */
.copy-line{
  display:block;
}
@media(max-width:760px){
  .copy-line{display:inline;}
}

/* 9 + 43: a slightly stronger Trail-Ranger-orange divider and one fixed
   navigation position. The pointer may remain centered while advancing. */
.chapter-transition__line{
  height:2px !important;
  background:var(--tr-orange,var(--trail-orange)) !important;
  opacity:.48 !important;
}
.chapter-transition__arrow{
  left:auto !important;
  right:auto !important;
}
.chapter-transition__kicker{
  padding-left:var(--tr-shared-left-axis) !important;
}

/* Contact is the end of the guided journey: orange divider only, no kickoff. */
.contact-footer-divider{
  width:100vw;
  height:2px;
  margin-top:auto;
  margin-left:calc(50% - 50vw);
  background:var(--tr-orange,var(--trail-orange));
  opacity:.48;
}

/* 18: safety note uses the normal website type system and is clearly visible. */
.workflow-safety-note{
  max-width:980px !important;
  margin:14px auto 0 !important;
  padding:12px 16px !important;
  border-left:4px solid var(--tr-orange,var(--trail-orange)) !important;
  border-radius:4px !important;
  background:rgba(35,74,52,.055) !important;
  color:var(--tr-green,var(--forest)) !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-size:15px !important;
  line-height:1.45 !important;
  font-weight:700 !important;
  text-align:left !important;
}

/* Illustration 2: a restrained detail action, not a navigation CTA. */
.equipment-trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  margin:12px 0 0;
  padding:7px 0;
  border:0;
  background:transparent;
  color:var(--tr-green,var(--forest));
  font:700 14px/1.25 "Inter",Arial,sans-serif;
  text-decoration:underline;
  text-decoration-color:rgba(217,107,31,.55);
  text-underline-offset:4px;
  cursor:pointer;
}
.equipment-trigger::before{
  content:"◉";
  color:var(--tr-orange,var(--trail-orange));
  font-size:13px;
}
.equipment-trigger:hover,
.equipment-trigger:focus-visible{
  color:var(--tr-orange,var(--trail-orange));
}

.equipment-modal{
  width:min(1040px,calc(100vw - 48px));
  max-height:88vh;
  padding:0;
  border:0;
  border-radius:10px;
  background:#fbfaf7;
  color:var(--ink);
  box-shadow:0 24px 70px rgba(18,42,28,.28);
  overflow:auto;
}
.equipment-modal::backdrop{
  background:rgba(16,31,22,.62);
  backdrop-filter:blur(2px);
}
.equipment-modal__content{
  padding:28px 30px 24px;
}
.equipment-modal__close{
  position:sticky;
  top:10px;
  float:right;
  z-index:3;
  width:38px;
  height:38px;
  margin:10px 10px 0 0;
  border:1px solid rgba(35,74,52,.2);
  border-radius:50%;
  background:rgba(251,250,247,.96);
  color:var(--tr-green,var(--forest));
  font:700 26px/1 Arial,sans-serif;
  cursor:pointer;
}
.equipment-modal__content h2{
  margin:0;
  color:var(--tr-green,var(--forest));
  font-family:"Kalam",cursive;
  font-size:clamp(28px,3vw,40px);
  line-height:1.05;
}
.equipment-modal__intro{
  margin:4px 0 16px;
  font-weight:600;
}
.equipment-modal__content img{
  display:block;
  width:100%;
  height:auto;
  max-height:66vh;
  object-fit:contain;
  border-radius:4px;
  background:#faf7ef;
}
.equipment-modal__caption{
  margin:14px 0 0;
  color:var(--tr-green,var(--forest));
  font-weight:600;
}
@media(max-width:760px){
  .equipment-modal{width:calc(100vw - 20px);max-height:92vh;}
  .equipment-modal__content{padding:22px 16px 18px;}
}

/* 13, 24, 25, 27: collaboration starts with the no-risk test drive, then
   three engagement forms, then clearly separated area/type cards. */
.trial-offer-card{
  margin:18px 0 18px;
  padding:16px 20px;
  border:1px solid rgba(35,74,52,.20);
  border-left:5px solid var(--tr-orange,var(--trail-orange));
  border-radius:6px;
  background:rgba(35,74,52,.035);
}
.trial-offer-card h3{
  margin:0 0 6px;
  color:var(--tr-green,var(--forest));
  font:700 18px/1.25 "Inter",Arial,sans-serif;
}
.trial-offer-card p{
  margin:0;
  font-size:14px;
  line-height:1.48;
}
.collaboration-grid--three{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
}
.service-area-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}
.service-area-card{
  position:relative;
  padding:15px 18px 14px;
  border:1px solid rgba(35,74,52,.18);
  border-radius:5px;
  background:rgba(255,255,255,.55);
}
.service-area-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:var(--tr-orange,var(--trail-orange));
  opacity:.62;
}
.service-area-card h3{
  margin:0 0 8px;
  color:var(--tr-green,var(--forest));
  font:700 17px/1.2 "Inter",Arial,sans-serif;
}
.service-area-card p{
  margin:0 0 4px;
  font-size:13.5px;
  line-height:1.4;
}
.service-area-card p:last-child{margin-bottom:0;}
@media(max-width:900px){
  .collaboration-grid--three,
  .service-area-cards{grid-template-columns:1fr !important;}
}

/* 14 + 32: six-step, low-friction path from interest to a concrete next step. */
.onboarding-flow{
  margin-top:18px;
  padding-top:2px;
}
.onboarding-flow > h3{
  margin:0 0 12px;
  color:var(--tr-green,var(--forest));
  font:700 18px/1.2 "Inter",Arial,sans-serif;
}
.onboarding-flow__steps{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.onboarding-flow__step{
  position:relative;
  min-height:82px;
  padding:10px 8px 8px;
  border:1px solid rgba(35,74,52,.14);
  border-radius:5px;
  background:rgba(255,255,255,.46);
  text-align:center;
}
.onboarding-flow__step:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:-9px;
  top:29px;
  z-index:2;
  color:var(--tr-orange,var(--trail-orange));
  font-weight:800;
}
.onboarding-flow__number{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  margin:0 auto 7px;
  border:2px solid var(--tr-green,var(--forest));
  border-radius:50%;
  color:var(--tr-green,var(--forest));
  font-size:12px;
  font-weight:800;
}
.onboarding-flow__label{
  display:block;
  font-size:12.5px;
  line-height:1.25;
  font-weight:650;
}
@media(max-width:980px){
  .onboarding-flow__steps{grid-template-columns:repeat(3,minmax(0,1fr));}
  .onboarding-flow__step:nth-child(3)::after{display:none;}
}
@media(max-width:620px){
  .onboarding-flow__steps{grid-template-columns:1fr;}
  .onboarding-flow__step::after{display:none !important;}
}

/* 34 + 38: concise competence anchor, without turning About into a CV. */
.about__competence-anchor{
  max-width:980px;
  margin:18px 0 0;
  padding:12px 16px;
  border-left:4px solid var(--tr-green,var(--forest));
  background:rgba(35,74,52,.045);
  color:var(--tr-green,var(--forest));
  font-weight:700;
  line-height:1.5;
}

/* 40: the frozen spruce texture remains untouched; only the lower silhouette
   gets a more natural, torn / broken edge inspired by the supplied reference. */
.wood-card{
  --wood-edge:polygon(
    0 0,100% 0,100% 95.5%,97.8% 94.1%,95.6% 98.6%,92.9% 96.9%,90.2% 99.5%,
    86.7% 95.1%,83.9% 97.7%,80.5% 93.8%,76.9% 99.1%,73.7% 96.4%,69.8% 98.8%,
    66.1% 94.6%,62.6% 99.5%,59.0% 96.7%,55.2% 98.3%,51.7% 93.4%,47.9% 99.2%,
    43.8% 95.5%,40.6% 98.9%,36.4% 94.1%,32.7% 99.6%,29.3% 96.2%,25.2% 98.1%,
    21.5% 93.6%,17.3% 99.0%,14.0% 96.8%,10.4% 98.7%,7.2% 94.4%,3.7% 99.3%,0 96.1%
  ) !important;
}
.wood-card:nth-child(3n+2){
  --wood-edge:polygon(
    0 0,100% 0,100% 96.6%,97.0% 99.2%,94.4% 94.3%,90.8% 98.5%,87.4% 95.9%,
    83.6% 99.4%,79.9% 94.0%,76.0% 98.2%,72.5% 96.1%,68.3% 99.5%,64.7% 94.7%,
    60.8% 98.8%,57.2% 95.6%,53.0% 99.3%,49.4% 93.9%,45.5% 98.4%,41.9% 96.2%,
    37.6% 99.6%,33.8% 94.5%,29.9% 98.5%,25.8% 95.2%,21.9% 99.1%,18.0% 93.8%,
    13.8% 98.8%,10.3% 96.3%,6.2% 99.4%,2.9% 94.8%,0 97.4%
  ) !important;
}
.wood-card:nth-child(3n){
  --wood-edge:polygon(
    0 0,100% 0,100% 94.8%,96.9% 98.9%,93.7% 96.0%,89.8% 99.4%,86.4% 93.7%,
    82.0% 98.6%,78.6% 95.5%,74.3% 99.5%,70.7% 94.4%,66.5% 98.7%,62.8% 96.0%,
    58.7% 99.2%,55.1% 93.5%,50.8% 98.8%,47.2% 95.8%,43.0% 99.5%,39.2% 94.2%,
    35.1% 98.6%,31.5% 96.4%,27.4% 99.3%,23.1% 93.9%,19.3% 98.9%,15.4% 95.4%,
    11.2% 99.4%,7.5% 94.6%,3.9% 98.6%,0 95.7%
  ) !important;
}
.trail-sign-master{
  clip-path:polygon(
    0 0,84% 0,100% 50%,84% 100%,80% 97%,75% 99%,70% 95%,64% 98%,59% 94%,
    53% 99%,47% 96%,41% 99%,35% 94%,29% 98%,24% 95%,18% 99%,13% 96%,8% 99%,
    4% 95%,0 97%,2% 82%,0 68%,2% 53%,0 38%,2% 24%,0 12%
  ) !important;
}

/* Keep the two-line hero exactly as approved, but allow safe responsive wrap. */
.hero-title__line{white-space:normal !important;}

/* Removed navigation-only paper buttons leave no empty vertical gap. */
.approach__cta,.services__cta,.task-catalog__cta,.workflow__cta,.projects__cta,
.collaboration__cta,.together__cta,.about__cta{display:none !important;}

/* Tighten the added collaboration/together content only enough to coexist with
   the permanently visible chapter navigation bar. */
#zusammenarbeit .collaboration__inner,
#gemeinsam-zum-ziel .together__inner{
  padding-bottom:10px !important;
}

/* v1.4.0 hero final: preserve the long-established two-line desktop lock. */
.hero__title-row h1{
  font-size:clamp(30px,2.6vw,40px) !important;
}
.hero-title__line{
  white-space:nowrap !important;
}
@media(max-width:980px){
  .hero-title__line{white-space:normal !important;}
}

/* 43: browser-native typographic cleanup for free-standing copy. */
.section-heading__intro,
.hero__intro p,
.hero__access p,
.practice-project__full p,
.about__story p,
.about__mission p,
.about__competence-anchor,
.contact__heading p{
  text-wrap:pretty;
}
.section-heading h2,
.hero h1,
.practice-project__full h3,
.about__story h3,
.onboarding-flow > h3,
.chapter-transition__kicker{
  text-wrap:balance;
}

/* v1.4.0 torn-edge refinement: fewer, uneven breaks avoid a saw-tooth rhythm. */
.wood-card{
  --wood-edge:polygon(
    0 0,100% 0,100% 96.2%,97.4% 95.1%,95.5% 98.7%,92.1% 97.3%,88.6% 99.1%,86.2% 95.4%,
    81.8% 96.9%,78.1% 99.4%,74.7% 98.0%,72.0% 94.8%,67.5% 96.5%,63.1% 99.0%,
    58.7% 97.5%,55.8% 95.1%,51.2% 98.8%,46.5% 99.4%,43.7% 95.8%,38.1% 97.2%,
    34.7% 94.9%,29.4% 98.6%,24.2% 97.8%,19.5% 99.3%,16.0% 95.6%,11.1% 97.1%,
    6.7% 94.9%,2.7% 98.2%,0 96.2%
  ) !important;
}
.wood-card:nth-child(3n+2){
  --wood-edge:polygon(
    0 0,100% 0,100% 95.5%,96.8% 98.5%,93.9% 97.2%,90.8% 94.6%,86.9% 99.2%,82.3% 97.7%,
    78.8% 95.0%,74.1% 98.8%,69.8% 99.3%,66.0% 95.5%,61.4% 97.0%,56.9% 94.7%,52.5% 98.9%,
    48.7% 97.6%,44.1% 99.4%,39.0% 95.2%,35.6% 96.9%,31.2% 94.8%,26.4% 98.7%,21.8% 97.4%,
    17.2% 99.2%,13.5% 95.3%,9.1% 97.1%,4.8% 94.9%,0 97.0%
  ) !important;
}
.wood-card:nth-child(3n){
  --wood-edge:polygon(
    0 0,100% 0,100% 97.1%,96.5% 95.2%,92.7% 99.1%,89.2% 97.5%,84.8% 94.7%,80.1% 98.8%,
    76.2% 97.0%,71.4% 99.4%,67.8% 95.4%,62.9% 96.9%,58.4% 94.8%,54.2% 98.7%,49.1% 97.7%,
    45.6% 99.3%,40.7% 95.1%,36.2% 97.0%,31.8% 94.7%,27.0% 98.9%,22.4% 97.4%,18.6% 99.2%,
    14.0% 95.5%,9.7% 96.8%,5.3% 94.9%,0 96.3%
  ) !important;
}


/* ==========================================================
   v1.4.1 ColdRead – post-cold-read refinements only.
   Basis: v1.4.0 ColdRead. No unrelated design changes.
   ========================================================== */

/* Start: two clear messages, each heading followed by its copy. */
#start .hero__intro,
#start .hero__access{
  display:block !important;
  margin-top:0 !important;
}
#start .hero__intro h2,
#start .hero__access h2{
  margin:0 0 8px !important;
  color:var(--tr-green,var(--forest)) !important;
  font-family:"Kalam",cursive !important;
  font-size:clamp(20px,1.65vw,25px) !important;
  line-height:1.12 !important;
  font-weight:700 !important;
}
#start .hero__intro p,
#start .hero__access p{
  margin:0 !important;
  font-size:15px !important;
  line-height:1.45 !important;
}
#start .hero__access{
  margin-top:18px !important;
}
.inline-equipment-link{
  appearance:none;
  display:inline;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--tr-green,var(--forest));
  font:inherit;
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:rgba(215,91,9,.6);
  text-underline-offset:3px;
  cursor:pointer;
}
.inline-equipment-link:hover,
.inline-equipment-link:focus-visible{
  color:var(--tr-orange,var(--trail-orange));
}

/* Long free copy uses deliberate semantic lines without extra visual gaps. */
.copy-line + .copy-line{margin-top:2px;}
@media(max-width:760px){.copy-line + .copy-line{margin-top:0;}}

/* 1.1: compact workflow cards so the full workflow and chapter ending stay visible. */
#arbeitsweise .workflow-cards{
  gap:10px !important;
  margin-top:12px !important;
}
#arbeitsweise .workflow-card{
  padding:11px 13px 10px !important;
  min-height:0 !important;
}
#arbeitsweise .workflow-card h3{
  margin:2px 0 5px !important;
  line-height:1.12 !important;
}
#arbeitsweise .workflow-card > p,
#arbeitsweise .workflow-card__option p{
  font-size:12.25px !important;
  line-height:1.30 !important;
}
#arbeitsweise .workflow-card__options{
  gap:2px !important;
}
#arbeitsweise .workflow-card__option + .workflow-card__option{
  margin-top:0 !important;
}
#arbeitsweise .workflow-card__option strong{
  margin:0 0 2px !important;
  line-height:1.15 !important;
}

/* 1.2: safety note is a compact trust box, matching the test-drive introduction. */
.workflow-safety-box{
  max-width:none !important;
  margin:10px 0 0 !important;
  padding:9px 14px !important;
  border:1px solid rgba(35,74,52,.20) !important;
  border-left:5px solid var(--tr-orange,var(--trail-orange)) !important;
  border-radius:6px !important;
  background:rgba(35,74,52,.035) !important;
  font-size:13.5px !important;
  line-height:1.35 !important;
}
#arbeitsweise .equipment-trigger{
  margin-top:8px !important;
  padding:4px 0 !important;
}

/* 2: six compact wooden wayfinding signs, one row, no numbers or arrows. */
.onboarding-flow{
  margin-top:14px !important;
}
.onboarding-flow > h3{
  margin-bottom:8px !important;
}
.onboarding-flow__steps{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:8px !important;
}
.onboarding-flow__step.onboarding-sign{
  min-height:64px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  padding:9px 21px 9px 10px !important;
  border:0 !important;
  border-radius:0 !important;
  background-color:transparent !important;
  background-image:url("assets/signs/TR-SCHD-01-FICHTE-FROZEN-v1.png") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:100% 100% !important;
  text-align:left !important;
}
.onboarding-flow__step::after,
.onboarding-flow__number{
  display:none !important;
  content:none !important;
}
.onboarding-flow__icon{
  flex:0 0 23px !important;
  width:23px !important;
  height:23px !important;
}
.onboarding-flow__label{
  font-size:11.25px !important;
  line-height:1.16 !important;
  font-weight:750 !important;
  color:var(--tr-green,var(--forest));
}
@media(max-width:980px){
  .onboarding-flow__steps{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media(max-width:620px){
  .onboarding-flow__steps{grid-template-columns:1fr !important;}
}

/* 3: only half the former gap before the footer. */
#kontakt .contact__inner{
  padding-bottom:21px !important;
}
.contact-footer-divider{
  margin-top:0 !important;
}

/* 4: keep Trail-Ranger orange, but make all chapter separators quieter. */
.chapter-transition__line,
.contact-footer-divider{
  opacity:.30 !important;
}

/* 6: competence anchor follows the same calm box language as the test offer. */
.about__competence-anchor.competence-box{
  max-width:none !important;
  margin:16px 0 0 !important;
  padding:13px 18px !important;
  border:1px solid rgba(35,74,52,.20) !important;
  border-left:5px solid var(--tr-orange,var(--trail-orange)) !important;
  border-radius:6px !important;
  background:rgba(35,74,52,.035) !important;
  color:var(--tr-green,var(--forest)) !important;
  font-weight:700 !important;
  line-height:1.45 !important;
}

/* 8: longer topbar invitation still starts on the shared left axis. */
.topbar__message{
  max-width:min(540px,48vw) !important;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 9: modal is now primarily the larger illustration plus one title. */
.equipment-modal{
  width:min(1240px,calc(100vw - 32px)) !important;
  max-height:94vh !important;
}
.equipment-modal__content{
  padding:20px 22px 18px !important;
}
.equipment-modal__content h2{
  margin:0 0 10px !important;
  font-size:clamp(27px,2.4vw,36px) !important;
}
.equipment-modal__content img{
  width:100% !important;
  max-height:82vh !important;
  object-fit:contain !important;
  border-radius:4px !important;
}

/* Keep the fixed chapter navigation exactly at the same pointer position. */
.chapter-transition__arrow{
  justify-self:center !important;
}

/* ==========================================================
   v1.4.2 ColdRead – final review refinements only.
   Basis: v1.4.1 ColdRead. No unrelated design changes.
   ========================================================== */

/* 1: Start page – only the first message block moves down by one text line;
   subsequent start-page content keeps its established position. */
#start .hero__intro{
  transform:translateY(20px) !important;
}
@media(max-width:760px){
  #start .hero__intro{transform:none !important;}
}

/* 2: orange chapter/contact separators remain Trail-Ranger orange, but are
   deliberately quieter. Match the specificity of the active-transition rule. */
.chapter-transition.is-current-transition .chapter-transition__line{
  opacity:.18 !important;
}
.contact-footer-divider{
  opacity:.18 !important;
}

/* 3: restore one clear blank line before Option 2. The common workflow row
   grows with the wide card, so all wooden cards retain equal height. */
#arbeitsweise .workflow-card__option--second{
  margin-top:14px !important;
}
#arbeitsweise .workflow-card{
  min-height:292px !important;
  padding-bottom:14px !important;
}

/* 4: long “Unser erstes Projekt” chapter – no next-page CTA until the actual
   chapter end. Before that, a neutral scroll cue makes the required scroll
   direction obvious without looking like the orange chapter navigation. */
.project-scroll-cue{
  position:fixed;
  left:50%;
  bottom:15px;
  z-index:94;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border:1px solid rgba(35,74,52,.16);
  border-radius:999px;
  background:rgba(255,253,248,.94);
  box-shadow:0 5px 16px rgba(23,63,39,.06);
  color:rgba(35,74,52,.78);
  font-family:"Inter",Arial,sans-serif;
  font-size:12.5px;
  line-height:1;
  font-weight:650;
  letter-spacing:.01em;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(4px);
  transition:opacity .16s ease,transform .16s ease;
}
.project-scroll-cue.is-visible{
  visibility:visible;
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.project-scroll-cue__arrow{
  display:inline-block;
  font:800 19px/1 Arial,sans-serif;
  animation:tr-scroll-cue 1.35s ease-in-out infinite;
}
@keyframes tr-scroll-cue{
  0%,100%{transform:translateY(-1px);}
  50%{transform:translateY(3px);}
}
@media(prefers-reduced-motion:reduce){
  .project-scroll-cue__arrow{animation:none;}
}
@media(max-width:760px){
  .project-scroll-cue{font-size:11.5px;bottom:12px;}
}

/* 5: one additional visual text line before the onboarding sequence. */
#gemeinsam-zum-ziel .onboarding-flow{
  margin-top:30px !important;
}

/* 6: reduce the oversized gap from “Über uns” to “Die Idee hinter Trail Ranger”. */
#ueber-uns .about__story{
  margin-top:18px !important;
}

/* 7: the passion statement is now a second box in the same visual language as
   the competence anchor; the existing icon treatment remains intact. */
#ueber-uns .about__mission-highlight.mission-box{
  max-width:none !important;
  margin:0 !important;
  padding:13px 18px !important;
  border:1px solid rgba(35,74,52,.20) !important;
  border-left:5px solid var(--tr-orange,var(--trail-orange)) !important;
  border-radius:6px !important;
  background:rgba(35,74,52,.035) !important;
  box-sizing:border-box !important;
}

/* 8: halve only the space from the contact divider to the three footer columns. */
.footer__inner{
  padding-top:17px !important;
}

/* ==========================================================
   v1.4.3 Release Candidate – approved post-Cold-Read changes.
   Basis: v1.4.2 ColdRead. No unrelated design changes.
   ========================================================== */

/* 1 + 3: one additional visual line above the hero title. The logo moves with
   the two-line title and remains vertically aligned with that title block. */
#start .hero__title-row{
  padding-top:clamp(56px,4.6vw,72px) !important;
}
#start .hero__title-row .section-title-row__logo{
  align-self:center !important;
  height:clamp(76px,6vw,88px) !important;
  max-width:92px !important;
}

/* 4: one additional clear line before the second start-page message. */
#start .hero__access{
  margin-top:38px !important;
}

/* 5: keep the equipment detail link, but remove the decorative button/dot
   before “Trail Ranger im Einsatz ansehen”. */
#arbeitsweise .equipment-trigger::before{
  content:none !important;
  display:none !important;
}

/* 6: the long project chapter has a working, clickable fixed scroll cue until
   its true end. The next-chapter CTA is still shown only at the project end. */
.project-scroll-cue{
  cursor:pointer !important;
  pointer-events:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
.project-scroll-cue.is-visible{
  pointer-events:auto !important;
}
.project-scroll-cue:hover,
.project-scroll-cue:focus-visible{
  color:var(--tr-green,var(--forest)) !important;
  border-color:rgba(35,74,52,.30) !important;
  outline:none !important;
}

/* Project results: ten approved before/after pairs. Pair images use the same
   4:3 crop so the visual comparison remains calm even when source perspectives
   differ. Only the before image receives explanatory copy. */
#praxisprojekte .before-after{
  width:100% !important;
  margin-top:24px !important;
}
#praxisprojekte .before-after > h3{
  margin:0 0 16px !important;
}
#praxisprojekte .before-after__pair{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
  margin:0 0 26px !important;
  align-items:start !important;
}
#praxisprojekte .before-after__figure{
  margin:0 !important;
  min-width:0 !important;
}
#praxisprojekte .before-after__image-wrap{
  position:relative !important;
  overflow:hidden !important;
  border-radius:5px !important;
  background:#eef0eb !important;
  border:1px solid rgba(35,74,52,.12) !important;
}
#praxisprojekte .before-after__image-wrap img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/3 !important;
  object-fit:cover !important;
}
#praxisprojekte .before-after__label{
  position:absolute !important;
  top:10px !important;
  left:10px !important;
  z-index:2 !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  background:rgba(255,253,248,.92) !important;
  color:var(--tr-green,var(--forest)) !important;
  font:700 11px/1 "Inter",Arial,sans-serif !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  box-shadow:0 1px 5px rgba(23,63,39,.08) !important;
}
#praxisprojekte .before-after__label--after{
  background:rgba(35,74,52,.90) !important;
  color:#fff !important;
}
#praxisprojekte .before-after__figure figcaption{
  margin:8px 2px 0 !important;
  color:var(--tr-green,var(--forest)) !important;
  font:600 13.5px/1.4 "Inter",Arial,sans-serif !important;
  text-align:left !important;
}
@media(max-width:760px){
  #praxisprojekte .before-after__pair{
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin-bottom:24px !important;
  }
}

/* 7: Streckenarten and Einsatzgebiete use the same calm card language as the
   free test-drive introduction. Two cards remain a maximum of half width each. */
#zusammenarbeit .service-area-cards{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
}
#zusammenarbeit .service-area-card{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  padding:14px 18px !important;
  border:1px solid rgba(35,74,52,.20) !important;
  border-left:5px solid var(--tr-orange,var(--trail-orange)) !important;
  border-radius:6px !important;
  background:rgba(35,74,52,.035) !important;
}
#zusammenarbeit .service-area-card::before{
  content:none !important;
  display:none !important;
}
@media(max-width:900px){
  #zusammenarbeit .service-area-cards{
    grid-template-columns:1fr !important;
  }
}

/* 8: the passion statement remains in its approved box, now without icons. */
#ueber-uns .about__mission-highlight{
  display:block !important;
}
#ueber-uns .about__mission-highlight::before,
#ueber-uns .about__mission-highlight::after{
  content:none !important;
  display:none !important;
}

/* Preserve the quieter orange separators approved during Cold Read. */
.chapter-transition.is-current-transition .chapter-transition__line,
.contact-footer-divider{
  opacity:.18 !important;
}


/* v1.4.4 RC2 – technische Release-Fixes; Design unverändert */
.topbar__message-link{color:inherit;text-decoration:none;display:block}
.topbar__message-link:hover,.topbar__message-link:focus-visible{text-decoration:underline;text-underline-offset:3px}
.consent a{color:var(--tr-green,#234a34);font-weight:600}
.legal-body .brand{display:flex!important;visibility:visible!important;pointer-events:auto!important}
.legal-body .header__inner{justify-content:flex-start!important}
.legal-page a{color:var(--tr-green,#234a34)}
.legal-page .legal-updated{color:#666;font-size:14px;margin-top:-8px}
.legal-page h2{scroll-margin-top:96px}

/* =========================================================
   WordPress integration + responsive theme layer
   These rules are intentionally appended to preserve the
   frozen v1.4.4 RC2 frontend as closely as possible.
   ========================================================= */
:root{
  --tr-wp-adminbar:0px;
}
body.admin-bar{--tr-wp-adminbar:32px;}
@media(max-width:782px){body.admin-bar{--tr-wp-adminbar:46px;}}
body.admin-bar .topbar{top:var(--tr-wp-adminbar)!important;}
body.admin-bar .header{top:calc(var(--tr-topbar-height) + var(--tr-wp-adminbar))!important;}

/* Content written with the standard WordPress page editor. */
.tr-editor-content{margin:0;}
.tr-editor-content > *:first-child{margin-top:0!important;}
.tr-editor-content > *:last-child{margin-bottom:0!important;}
.section-heading__intro.tr-editor-content p{margin:0;}
.section-heading__intro.tr-editor-content p + p{margin-top:10px;}
.hero__copy .wp-block-group{margin:0;}
.hero__copy .wp-block-group + .wp-block-group{margin-top:38px;}
.hero__copy h2{font-family:"Inter",Arial,sans-serif;color:var(--tr-green);font-size:clamp(22px,1.6vw,28px);line-height:1.18;margin:0 0 12px;font-weight:800;}
.hero__copy p{margin:0;}

/* Logged-in editors get a subtle non-public edit shortcut. */
.tr-admin-edit-link{position:absolute;right:18px;top:112px;z-index:10;font:600 11px/1 "Inter",Arial,sans-serif;text-decoration:none;padding:6px 8px;border-radius:4px;background:rgba(255,253,248,.92);color:var(--tr-green);border:1px solid rgba(35,74,52,.2);}
.tr-admin-edit-link:hover{color:var(--tr-orange);}
.chapter{position:relative;}

/* Mobile navigation: desktop remains unchanged; small screens use a compact menu. */
.mobile-nav-toggle{display:none;border:0;background:transparent;color:var(--tr-green);font:700 13px/1 "Inter",Arial,sans-serif;align-items:center;gap:7px;padding:8px 0;cursor:pointer;}
.mobile-nav-toggle__bars,.mobile-nav-toggle__bars::before,.mobile-nav-toggle__bars::after{display:block;width:20px;height:2px;background:currentColor;content:"";transition:transform .2s ease,opacity .2s ease;}
.mobile-nav-toggle__bars{position:relative;}
.mobile-nav-toggle__bars::before{position:absolute;top:-6px;left:0;}
.mobile-nav-toggle__bars::after{position:absolute;top:6px;left:0;}
body.mobile-nav-open .mobile-nav-toggle__bars{background:transparent;}
body.mobile-nav-open .mobile-nav-toggle__bars::before{transform:translateY(6px) rotate(45deg);}
body.mobile-nav-open .mobile-nav-toggle__bars::after{transform:translateY(-6px) rotate(-45deg);}

@media(max-width:760px){
  .header__inner,body:not(.at-start) .header__inner{display:grid!important;grid-template-columns:1fr auto!important;padding-inline:16px!important;position:relative!important;}
  .header__brand-spacer{display:block!important;}
  .mobile-nav-toggle{display:flex!important;grid-column:2;justify-self:end;z-index:3;}
  .nav,body.at-start .nav,body:not(.at-start) .nav{
    display:none!important;
    position:absolute!important;
    top:100%!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-height:calc(100vh - var(--tr-topbar-height) - var(--tr-header-height) - 20px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:10px 18px 16px!important;
    margin:0!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    background:rgba(255,253,248,.99)!important;
    border-top:1px solid rgba(35,74,52,.12)!important;
    box-shadow:0 12px 24px rgba(20,45,31,.12)!important;
  }
  body.mobile-nav-open .nav,body.mobile-nav-open.at-start .nav,body.mobile-nav-open:not(.at-start) .nav{display:flex!important;}
  .nav__item{width:100%!important;}
  .nav > .nav__item > a,body.at-start .nav > .nav__item > a,body:not(.at-start) .nav > .nav__item > a{
    display:block!important;color:var(--tr-green)!important;font-size:14px!important;padding:10px 0!important;
  }
  .nav__submenu{position:static!important;display:block!important;opacity:1!important;visibility:visible!important;transform:none!important;padding:0 0 5px 14px!important;}
  .nav__submenu a,body.at-start .nav__submenu a,body:not(.at-start) .nav__submenu a{display:block!important;color:var(--tr-green)!important;font-size:12.5px!important;padding:6px 0!important;}
  .topbar__inner{padding-left:8px!important;padding-right:8px!important;}
  .topbar__message{min-width:0!important;}
  .chapter{scroll-margin-top:calc(var(--tr-topbar-height) + var(--tr-header-height) + 8px);}
  .tr-admin-edit-link{display:none;}
}

/* WordPress forms and messages. */
.contact-form__status.is-success{color:var(--tr-green);font-weight:700;}
.contact-form__status.is-error{color:#8a2c23;font-weight:700;}
.contact-form__honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;}

/* Legal pages use WordPress-generated URLs and remain responsive. */
.legal-page .wp-block-heading{color:var(--tr-green);}
.legal-page p,.legal-page li{max-width:78ch;}

/* WordPress image replacement keeps project pairs consistent. */
.before-after__image-wrap img{width:100%;height:100%;object-fit:cover;display:block;}

/* Admin-bar and mobile-safe fixed chapter navigation. */
@media(max-width:620px){
  .chapter-transition.is-current-transition{left:12px!important;right:12px!important;}
  .chapter-transition__kicker{max-width:calc(100vw - 84px)!important;}
}