/* ==========================================================================
   REVIA Mediation – Farbwelt Dunkelgrün · Weiß · Gold
   Baut auf style.css und inhalte.css auf und tauscht nur die Farben.
   Grün aus den REVIA-Angeboten (Juli 2026): #0D2B22 / #1C372F
   ========================================================================== */

.theme-green {
  --ink: #0d2b22;          /* edles, dunkles Grün */
  --ink-2: #123629;        /* Flächen auf Grün */
  --bone: #f7f3ea;         /* warmes Weiß */
  --bone-2: #ece5d6;
  --on-ink: #eef0e9;
  --on-ink-muted: #a7b5ac;
  --on-bone: #10261f;      /* Text auf Weiß: tiefes Grün statt Schwarz */
  --on-bone-muted: #4f5d55;
  --line-ink: rgba(238, 240, 233, .15);
  --line-bone: rgba(16, 38, 31, .16);
  background: var(--ink);
}

/* Flächen */
.theme-green .site-header.is-solid { background: rgba(10, 34, 27, .93); }
.theme-green .hero,
.theme-green .hero--image { background:
    radial-gradient(70% 55% at 50% 112%, rgba(195, 154, 91, .22), rgba(195, 154, 91, .05) 55%, transparent 75%),
    linear-gradient(180deg, #08201a 0%, #0d2b22 100%); }
.theme-green .chapter--ink { background:
    radial-gradient(60% 50% at 100% 0%, rgba(195, 154, 91, .09), transparent 70%),
    radial-gradient(50% 45% at 0% 100%, rgba(195, 154, 91, .05), transparent 70%),
    linear-gradient(180deg, #0d2b22 0%, #0a231c 100%); }
.theme-green .chapter--ink2 { background:
    radial-gradient(55% 45% at 50% 0%, rgba(195, 154, 91, .11), transparent 70%),
    linear-gradient(180deg, #133a2d 0%, #0d2b22 100%); }
.theme-green .chapter--bone { background:
    radial-gradient(50% 40% at 0% 0%, rgba(195, 154, 91, .10), transparent 70%),
    radial-gradient(40% 35% at 100% 100%, rgba(13, 43, 34, .06), transparent 70%),
    #f7f3ea; }
.theme-green .bridge { background: linear-gradient(180deg, #0a231c 0%, #0d2b22 100%); }
.theme-green .closing { background: linear-gradient(180deg, #0d2b22 0%, #08201a 100%); }
.theme-green .price--main { background: linear-gradient(160deg, #164233 0%, #0d2b22 60%); }
.theme-green .site-footer { background: #08201a; }

/* Hero-Bild: grüner Schleier, damit Text lesbar bleibt (auch solange das Foto fehlt) */
.theme-green .hero__bg { background: radial-gradient(80% 70% at 75% 55%, #1c4a3a 0%, #0d2b22 55%, #08201a 100%); }
.theme-green .hero__bg::after { background:
    linear-gradient(90deg, rgba(8, 32, 26, .92) 0%, rgba(8, 32, 26, .74) 38%, rgba(8, 32, 26, .38) 68%, rgba(8, 32, 26, .22) 100%),
    linear-gradient(180deg, rgba(8, 32, 26, .55) 0%, rgba(8, 32, 26, 0) 28%, rgba(8, 32, 26, 0) 70%, rgba(8, 32, 26, .8) 100%); }
.theme-green .hero__bg img { transform: none; object-position: 60% 45%; }
@media (max-width: 860px) {
  .theme-green .hero__bg::after { background: linear-gradient(180deg, rgba(8, 32, 26, .72) 0%, rgba(8, 32, 26, .62) 55%, rgba(8, 32, 26, .92) 100%); }
}

/* Porträt auf Grün */
.theme-green .portrait-v1 { background: radial-gradient(120% 90% at 50% 30%, #1d4a3b 0%, #123629 45%, #0a231c 100%); }
.theme-green .portrait-v1::after { background: linear-gradient(180deg, transparent 68%, rgba(8, 32, 26, .8) 100%); }

/* Phasen der Mediation */
.phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: clamp(2.5rem, 5vw, 4rem); counter-reset: ph; }
.phase { position: relative; padding: 2.2rem 1.4rem 0 0; border-top: 1px solid var(--line-bone); }
.phase::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--bone); border: 1.5px solid var(--gold-ink); }
.phase:first-child::before { background: var(--gold); border-color: var(--gold); }
.phase__no { display: block; font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .9rem; }
.phase h3 { font-size: var(--step-1); font-weight: 400; line-height: 1.2; margin-bottom: .6rem; }
.phase .q { font-family: var(--serif, "Cormorant Garamond", serif); font-style: italic; font-size: 1.12rem; color: var(--gold-ink); margin-bottom: .7rem; line-height: 1.35; }
.phase p:last-child { font-size: .95rem; color: var(--on-bone-muted); line-height: 1.55; }
.phases-frame { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem var(--gutter); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.phases-frame div { padding: 1.3rem 1.4rem; border: 1px dashed rgba(133, 100, 47, .5); }
.phases-frame b { display: block; font-weight: 500; margin-bottom: .35rem; }
.phases-frame p { font-size: .95rem; color: var(--on-bone-muted); }
@media (max-width: 1000px) {
  .phases { grid-template-columns: 1fr; }
  .phase { padding: 0 0 2rem 2rem; border-top: 0; border-left: 1px solid var(--line-bone); }
  .phase::before { top: 2px; left: -6px; }
  .phases-frame { grid-template-columns: 1fr; }
}

/* Grundsätze */
.principles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.principles li { border-top: 1px solid var(--line-ink); padding-top: 1.2rem; }
.principles b { display: block; font-weight: 400; font-size: var(--step-1); color: var(--gold); margin-bottom: .5rem; }
.principles span { font-size: .95rem; color: var(--on-ink-muted); line-height: 1.55; display: block; }
@media (max-width: 1000px) { .principles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .principles { grid-template-columns: 1fr; } }

/* Anlässe als Karten */
.contexts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.context { padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line-bone); background: rgba(255, 255, 255, .45); }
.context h3 { font-size: var(--step-1); font-weight: 400; margin-bottom: .6rem; }
.context p { color: var(--on-bone-muted); font-size: .98rem; }
@media (max-width: 760px) { .contexts { grid-template-columns: 1fr; } }

/* Bereichswechsel Coaching ↔ Mediation in der Navigation */
.nav .nav__switch { color: var(--gold); }
.nav .nav__switch::before { content: "↔ "; opacity: .7; }

/* Ergebnis ohne Foto: zweispaltig Text */
.result--text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); align-items: start; }
@media (max-width: 860px) { .result--text { grid-template-columns: 1fr; } }

/* Hero-Foto Besprechungsraum: verblasst und grün getönt, damit die Headline links gut lesbar bleibt */
.theme-green .hero__bg img { object-position: 62% 40%; filter: saturate(.55) brightness(.78) contrast(.95); opacity: .62; }
.theme-green .hero__bg::after { background:
    linear-gradient(90deg, rgba(8, 32, 26, .94) 0%, rgba(8, 32, 26, .86) 34%, rgba(8, 32, 26, .55) 62%, rgba(8, 32, 26, .35) 100%),
    linear-gradient(180deg, rgba(8, 32, 26, .55) 0%, rgba(8, 32, 26, 0) 26%, rgba(8, 32, 26, 0) 66%, rgba(8, 32, 26, .85) 100%); }
@media (max-width: 860px) {
  .theme-green .hero__bg img { object-position: 70% 40%; opacity: .5; }
  .theme-green .hero__bg::after { background: linear-gradient(180deg, rgba(8, 32, 26, .78) 0%, rgba(8, 32, 26, .7) 55%, rgba(8, 32, 26, .94) 100%); }
}
.theme-green .bridge__answer { max-width: 34ch; }

/* „Der Preis des Abwartens“ mit Bild: nachdenklicher Arzt rechts, Überschrift links, Spalten unten auf tiefem Grün */
.cost--image { overflow: hidden; }
.cost--image > .wrap { position: relative; z-index: 2; }
.cost__bg { position: absolute; inset: 0; z-index: 0; }
.cost__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 25%; filter: saturate(.5) brightness(.8) contrast(.95); opacity: .6; }
.cost__bg::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, #0b261e 0%, rgba(11, 38, 30, .95) 30%, rgba(11, 38, 30, .7) 52%, rgba(11, 38, 30, .35) 75%, rgba(11, 38, 30, .25) 100%),
    linear-gradient(180deg, rgba(11, 38, 30, .55) 0%, rgba(11, 38, 30, 0) 18%, rgba(11, 38, 30, 0) 42%, rgba(11, 38, 30, .88) 62%, #0b261e 82%); }
.theme-green .cost--image { background: #0b261e; }
.theme-green .cost--image::before { display: none; }
@media (max-width: 860px) {
  .cost__bg img { object-position: 75% 20%; opacity: .4; height: 55%; }
  .cost__bg::after { background: linear-gradient(180deg, rgba(11, 38, 30, .5) 0%, rgba(11, 38, 30, .85) 30%, #0b261e 55%); }
}

/* Ergebnis mit Hintergrundbild (Vereinbarung am Tisch) */
.result--image { overflow: hidden; }
.result--image > .wrap { position: relative; z-index: 2; }
.result__bg { position: absolute; inset: 0; z-index: 0; }
.result__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: saturate(.5) brightness(.85) contrast(.95); opacity: .5; }
.result__bg::after { content: ""; position: absolute; inset: 0; background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgba(11, 38, 30, .45) 0%, rgba(11, 38, 30, .72) 70%, rgba(11, 38, 30, .9) 100%),
    linear-gradient(90deg, rgba(11, 38, 30, .55) 0%, rgba(11, 38, 30, .2) 45%, rgba(11, 38, 30, .5) 100%); }
.theme-green .result--image { background: #0b261e; }
.theme-green .result--image::before { display: none; }
@media (max-width: 860px) {
  .result__bg img { opacity: .35; }
  .result__bg::after { background: rgba(11, 38, 30, .7); }
}

/* Preise: zwei Karten (Stundensatz, Mediationstag) */
.prices--2 { margin-top: 1.4rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.prices--m3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 960px) { .prices--2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Wechsel Grün / Weiß: Farben passen sich der jeweiligen Fläche an
   ========================================================================== */
.theme-green .chapter--ink, .theme-green .chapter--ink2 {
  --on-bone: #eef0e9; --on-bone-muted: #a7b5ac; --line-bone: rgba(238, 240, 233, .15); --gold-ink: #c39a5b;
}
.theme-green .chapter--bone, .theme-green .bridge--light {
  --on-ink: #10261f; --on-ink-muted: #4f5d55; --line-ink: rgba(16, 38, 31, .16); --gold: #85642f;
}
.theme-green .bridge--light { background:
    radial-gradient(50% 40% at 0% 0%, rgba(195, 154, 91, .10), transparent 70%),
    #f7f3ea; color: #10261f; color-scheme: light; }
.theme-green .bridge--light::before { display: none; }
.theme-green .chapter--bone .btn, .theme-green .bridge--light .btn { --b: #c39a5b; color: #0d2b22; }
.theme-green .chapter--bone .btn:hover, .theme-green .bridge--light .btn:hover { color: #85642f; }

/* Kosten-Abschnitt auf Weiß: Foto mit cremefarbenem Schleier */
.theme-green .cost--light { background: #f7f3ea; }
.theme-green .cost--light .cost__bg img { filter: saturate(.7) contrast(.95); opacity: .75; }
.theme-green .cost--light .cost__bg::after { background:
    linear-gradient(90deg, #f7f3ea 0%, rgba(247, 243, 234, .96) 30%, rgba(247, 243, 234, .7) 52%, rgba(247, 243, 234, .25) 75%, rgba(247, 243, 234, .1) 100%),
    linear-gradient(180deg, rgba(247, 243, 234, .4) 0%, rgba(247, 243, 234, 0) 18%, rgba(247, 243, 234, 0) 42%, rgba(247, 243, 234, .9) 62%, #f7f3ea 82%); }
@media (max-width: 860px) {
  .theme-green .cost--light .cost__bg img { opacity: .5; }
  .theme-green .cost--light .cost__bg::after { background: linear-gradient(180deg, rgba(247, 243, 234, .4) 0%, rgba(247, 243, 234, .85) 30%, #f7f3ea 55%); }
}
.theme-green .chapter--ink .context, .theme-green .chapter--ink2 .context { background: rgba(255, 255, 255, .04); }
/* Preise auf Grün: Stundensatz-Karte bleibt hell, Empfehlung grün */
.theme-green .chapter--ink2 .price:not(.price--main) { --on-bone: #10261f; --on-bone-muted: #4f5d55; --line-bone: rgba(16, 38, 31, .16); --gold-ink: #85642f; color: #10261f; background: #f7f3ea; }
.theme-green .chapter--ink2 .price:not(.price--main) .link { color: #10261f; }
.theme-green .chapter--ink2 .price-start .btn { --b: #c39a5b; color: #0d2b22; }
.theme-green .chapter--ink2 .price-start .btn:hover { color: #c39a5b; }
.theme-green .chapter--ink2 .prices { background: rgba(238, 240, 233, .15); }
/* Gold-Akzente für Zwischenüberschriften */
.theme-green .context h3 { color: var(--gold-ink); }
.theme-green .phases-frame b { color: var(--gold-ink); }