/* Schriften: Bitter (Text) und Jost (Auszeichnungen), seit 10/2026 vom
   eigenen Server statt von Google Fonts. Vorher lud jeder Seitenaufruf die
   Schriften bei Google und uebertrug dabei die IP-Adresse der Besucher -
   ohne Einwilligung datenschutzrechtlich nicht haltbar (LG Muenchen I,
   3 O 17493/20). Es sind variable Schriften: eine Datei je Schnitt deckt
   alle Staerken ab. "latin" reicht fuer Deutsch und Spanisch; "latin-ext"
   wird nur geladen, wenn ein Zeichen daraus vorkommt. Lizenz: SIL OFL 1.1,
   siehe fonts/LIZENZ-OFL.txt. */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/bitter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/bitter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/bitter-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/bitter-latin-ext-wght-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/jost-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/jost-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --navy: #16233f;
  --navy-dark: #0d1526;
  --navy-mid: #223357;
  --cream: #faf8f4;
  --cream-2: #f1ebe0;
  --text: #221f1a;
  --muted: #665f57;
  --sage: #889c80;
  --sage-dark: #6d8266;
  --gold: #c1943f;
  --gold-dark: #a17a30;
  --gold-tint: #f6ead2;
  --rose: #cf8f8a;
  --max: 760px;
  --max-wide: 1080px;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Bitter', Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif);
  color: var(--text);
  background: #fff;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* height:auto gehoert zwingend dazu: sonst behaelt ein Bild, das ueber
   max-width verkleinert wird, die Hoehe aus seinem height-Attribut. Das
   Buchcover (700 x 1113) stand dadurch 259px breit und 1120px hoch da. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}
.wrap.wide { max-width: var(--max-wide); }

.kicker {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
}
.kicker.on-dark { color: #e7c98a; }

/* ---------- Header / Nav ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(8px);
  box-shadow: 0 1px 0 rgba(22,35,63,.08);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.18rem;
  letter-spacing: .02em;
  font-weight: 600;
}
.brand img { width: 34px; height: 34px; object-fit: contain; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--navy);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--sans);
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
}
.main-nav a {
  position: relative;
  padding: 6px 1px;
  color: var(--navy);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transition: right .25s ease;
}
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }
.main-nav a.active { color: var(--gold-dark); }


/* ---------- Signature angled banner (hero + page titles) ---------- */
.hero-home, .page-title-only {
  position: relative;
  color: #fff;
  text-align: center;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.page-title-only { padding: 96px 24px 120px; }
.page-title-only h1 {
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 1.7rem;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}

/* ---------- Home hero ---------- */
.hero-home {
  padding: 76px 24px 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62vh;
}
.hero-home .hero-inner { max-width: 680px; }
.hero-home p.hero-quote {
  font-style: italic;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero-home .hero-rule {
  width: 64px; height: 2px;
  background: var(--gold);
  margin: 26px auto 0;
}

/* Toc chip row (legal pages) */
.toc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -70px 0 40px;
  position: relative;
  z-index: 2;
  justify-content: center;
}
.toc-chips a {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .04em;
  background: #fff;
  border: 1px solid var(--cream-2);
  box-shadow: 0 6px 20px rgba(22,35,63,.1);
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--navy);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.toc-chips a:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(22,35,63,.16); color: var(--gold-dark); }

/* ---------- Content sections ---------- */
section.block {
  padding: 68px 24px;
}
section.block.alt { background: var(--cream); }
section.block.cta-band { background: linear-gradient(180deg, #fff 0%, var(--gold-tint) 100%); text-align: center; }

.block h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 0;
  color: var(--navy);
}
.block h3 {
  font-size: 1.22rem;
  color: var(--navy);
  margin-bottom: 6px;
}
.block .lead-quote {
  font-style: italic;
  font-size: 1.18rem;
  color: var(--navy-mid);
  margin: 0 0 18px;
  padding-left: 18px;
  border-left: 3px solid var(--gold);
}

/* Photos sit beside the text they belong to instead of as a huge full-width
   slab above it -- floated on wider screens, stacked+centered on phones. */
.block .wrap::after { content: ""; display: table; clear: both; }
.block img.section-photo {
  border-radius: 10px;
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 4px auto 20px;
  box-shadow: 0 14px 34px rgba(22,35,63,.16);
}
@media (min-width: 640px) {
  .block img.section-photo {
    float: left;
    margin: 4px 30px 16px 0;
  }
  .block.alt img.section-photo {
    float: right;
    margin: 4px 0 16px 30px;
  }
}
.block .cta {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .92rem;
  color: var(--navy);
  border-bottom: 2px solid var(--sage);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.block .cta:hover { color: var(--gold-dark); border-color: var(--gold); }

/* teaser icon badges (home) */
.teaser-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--gold-tint);
  color: var(--gold-dark);
  margin-bottom: 16px;
  font-size: 1.4rem;
  float: none;
}

/* ---------- About page intro (portrait + text) ---------- */
.about-intro {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 42px;
  align-items: start;
}
.portrait-frame { position: relative; }
.portrait-frame::before {
  content: "";
  position: absolute;
  top: -18px; left: -18px;
  width: 100%; height: 100%;
  border-radius: 14px;
  background: var(--gold-tint);
  z-index: 0;
}
/* Die Portraitdatei ist 392 x 928 - fast zweieinhalbmal so hoch wie breit,
   weil unten viel leerer Hintergrund steht. Ungeschnitten wurde daraus in der
   260px-Spalte ein 615px hoher Streifen neben zwei Absaetzen Text. Deshalb
   hier auf 3:4 beschnitten, vom oberen Rand her - Kopf und Schultern bleiben
   drin, der leere Teil faellt weg. Die Datei selbst bleibt unangetastet. */
.portrait-frame img {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(22,35,63,.22);
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  object-position: center top;
}
/* Seit 09/2026 steht auf "Ueber mich" das Foto vor dem Wandbild mit dem
   Tukan. Es wird NICHT beschnitten: es lebt vom Wandbild ueber ihr, ein
   Zuschnitt auf 3:4 wuerde genau das abschneiden. Dafuer ist die Spalte
   breiter, damit Gesicht und Wandbild gross genug bleiben. */
/* Zwei Spalten erst ab 900px. Darunter blieb neben dem 340px breiten Foto
   fuer den Text nur ein schmaler Streifen (bei 641px gut 150px) - auf
   Tablets und grossen Handys quer las sich das wie eine Zeitungsspalte. */
@media (min-width: 900px) {
  .about-intro:has(.portrait-frame.ungeschnitten) { grid-template-columns: 340px 1fr; gap: 52px; align-items: center; }
}
@media (max-width: 899px) {
  .about-intro:has(.portrait-frame.ungeschnitten) { grid-template-columns: minmax(0, 1fr); }
  .portrait-frame.ungeschnitten { width: calc(100% - 18px); max-width: 340px; margin: 18px auto 34px; }
}
.portrait-frame.ungeschnitten img { aspect-ratio: auto; object-fit: fill; display: block; }
@media (max-width: 640px) {
  .about-intro { grid-template-columns: 1fr; }
  .portrait-frame { max-width: 220px; margin: 0 auto 34px; }
}
@media (max-width: 640px) {
  .portrait-frame.ungeschnitten { max-width: 320px; }
}

/* value / benefit list */
.benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0;
  list-style: none;
  margin: 0;
}
@media (min-width: 720px) {
  .benefits-grid { grid-template-columns: 1fr 1fr; }
}
.benefit-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--cream-2);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 8px 22px rgba(22,35,63,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.benefit-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(22,35,63,.12); }
.benefit-num {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.benefit-card p { margin: 0; }

ul.plain {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

/* offer / service cards */
.offer-card {
  position: relative;
  border: 1px solid var(--cream-2);
  border-top: 3px solid var(--sage);
  border-radius: 10px;
  padding: 28px 30px;
  margin-bottom: 22px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22,35,63,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.offer-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(22,35,63,.12); }
.offer-card.featured { border-top-color: var(--gold); background: linear-gradient(180deg, var(--gold-tint) 0%, #fff 130px); }
.offer-card .card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.offer-card .card-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.offer-card.featured .card-icon { background: var(--gold-dark); }
.offer-card h3 { margin: 0; }
.offer-card .meta {
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--gold-dark);
  background: var(--gold-tint);
  border-radius: 999px;
  padding: 5px 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 10px 0 14px;
}
.offer-card ul.plain li { padding: 4px 0; }
.offer-card ul.plain li:before { content: "— "; color: var(--sage-dark); }

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* ---------- Book block ---------- */
.book-block {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 38px;
  align-items: start;
}
.book-block .book-cover { position: relative; }
.book-block img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(22,35,63,.28);
  transform: rotate(-2deg);
}
.book-badge {
  position: absolute;
  top: -12px; right: -14px;
  background: var(--gold);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(161,122,48,.4);
  transform: rotate(4deg);
}
@media (max-width: 640px) {
  .book-block { grid-template-columns: 1fr; }
  .book-block .book-cover { max-width: 200px; margin: 0 auto 20px; }
}

/* ---------- Info card (booking placeholder) ---------- */
.info-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--cream);
  border: 1px solid var(--cream-2);
  border-left: 4px solid var(--sage);
  border-radius: 10px;
  padding: 22px 24px;
  margin-top: 22px;
}
.info-card .card-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.info-card p { margin: 0; color: var(--muted); font-size: .95rem; }

.button-primary {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .02em;
  background: linear-gradient(180deg, var(--navy-mid), var(--navy));
  color: #fff !important;
  padding: 15px 32px;
  border-radius: 999px;
  font-size: 1rem;
  margin-top: 10px;
  box-shadow: 0 10px 24px rgba(22,35,63,.28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(22,35,63,.34); }

.notice {
  background: #fff8e6;
  border: 1px solid #f1e2ad;
  color: #6b5b12;
  padding: 14px 18px;
  border-radius: 6px;
  font-size: .9rem;
  margin-bottom: 24px;
}
.notice.success { background: #eaf6ec; border-color: #b7dfc0; color: #1f5c2c; }
.notice.error   { background: #fde8e8; border-color: #f0b8b8; color: #7a1f1f; }
.notice a { text-decoration: underline; }

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 44px;
  align-items: start;
}
@media (max-width: 780px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-sidebar {
  background: var(--navy);
  color: #dfe3ea;
  border-radius: 14px;
  padding: 32px 30px;
}
.contact-sidebar h3 { color: #fff; font-size: 1.05rem; margin-top: 0; }
.contact-sidebar .sidebar-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
  font-size: .92rem;
}
.contact-sidebar .sidebar-item svg { flex: none; margin-top: 2px; color: #e7c98a; }
.contact-sidebar a.sidebar-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .88rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 12px 18px;
  margin-top: 8px;
  transition: background .2s ease, transform .2s ease;
}
.contact-sidebar a.sidebar-cta:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }

/* ---------- Self-built contact form ---------- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  margin-top: 18px;
}
.contact-form label {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--navy);
  margin-bottom: 6px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 1rem;
  background: #fff;
  color: var(--text);
}
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}
.contact-form .hp-field { position: absolute; left: -9999px; top: -9999px; }
.contact-form button { align-self: flex-start; border: none; cursor: pointer; }

/* ---------- Footer ---------- */
footer {
  background: var(--navy);
  color: #dfe3ea;
  padding: 56px 24px 30px;
  font-size: .92rem;
  border-top: 3px solid var(--gold);
}
/* Die Regeln fuer .foot-grid, .foot-brand und .foot-contact-icons sind mit
   dem schlanken Footer entfallen - im Markup gibt es sie nicht mehr. */
/* Footer seit 09/2026: nur noch das Rechtliche, keine zweite Sitemap in zwei
   Sprachen mehr. Auf dem Handy umbrechen die Links, die Trennpunkte wandern
   mit. */
.foot-rechtliches {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
  font-family: var(--sans);
  font-size: .86rem;
}
.foot-rechtliches a { color: #e7e2d8; text-decoration: none; }
.foot-rechtliches a:hover { color: #e7c98a; text-decoration: underline; }
.foot-rechtliches span { color: rgba(255,255,255,.3); }
.foot-zeile {
  max-width: 980px;
  margin: 22px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.15);
  font-family: var(--sans);
  font-size: .78rem;
  color: #9aa5b8;
  text-align: center;
}

/* ==========================================================================
   Zweizeilige Kopfzeile und Popups (09/2026)

   Gleiche Form wie auf fidelak.de, fidelak.works und backoffice-services.de:
   oben schmal Sprache und die beiden Aktionen, darunter Marke und Navigation.
   Farben, Schriften und Rundungen bleiben die dieser Seite - Navy, Gold,
   Bitter und Jost aus dem Block ganz oben.

   "Termin buchen" und "Kontakt" sind dadurch keine Menuepunkte mehr, sondern
   Aktionen: aus sechs Eintraegen werden vier.
   ========================================================================== */

/* .site-header war bisher selbst die Kopfzeilen-Zeile (flex). Jetzt enthaelt
   sie zwei Zeilen untereinander, also Block statt Flex - der Innenabstand
   wandert nach .cl-header-main. */
.site-header {
  display: block;
  padding: 0;
}

.cl-topbar { background: var(--navy); }
.cl-topbar-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 1rem;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .7rem;
}
.cl-lang {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(228, 220, 205, .7);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.cl-lang a { color: rgba(228, 220, 205, .7); text-decoration: none; }
.cl-lang a.active, .cl-lang a:hover { color: #fff; }

.cl-topbar-btn {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .07em;
  padding: .32rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cl-topbar-btn.ghost  { background: transparent; color: #e4dccd; border-color: rgba(228, 220, 205, .4); }
.cl-topbar-btn.ghost:hover { background: rgba(255, 255, 255, .1); }
.cl-topbar-btn.filled { background: var(--gold); color: var(--navy); }
.cl-topbar-btn.filled:hover { background: #d9ad5c; }

.cl-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 14px 28px;
  position: relative;
}

.cl-nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: .4rem; }
.cl-nav-toggle span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; }

/* Umbruchpunkt 900px - derselbe wie auf fidelak.de, fidelak.works und
   backoffice-services.de, damit die Navigation ueberall bei derselben Breite
   die Form wechselt. (Vorher 820px, aus der Zeit der statischen Seiten.) */
@media (max-width: 900px) {
  /* Die obere Zeile bleibt sichtbar - Sprache, Termin und Nachricht stehen
     nur hier, also darf sie auf dem Handy nicht verschwinden. Nur enger
     gesetzt. */
  .cl-topbar-inner { gap: .4rem; }
  .cl-topbar-btn { padding: .28rem .7rem; font-size: .7rem; }
  .cl-nav-toggle { display: flex; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--cream-2);
    z-index: 30;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: .7rem 0; width: 100%; }
}

/* ===== Popups: Termin und Kontakt ===== */

/* Gescrollt wird der Hintergrund, nicht die weisse Flaeche.
   Vorher hing der Balken im abgerundeten Kasten selbst: er lief in der
   rechteckigen Rinne, waehrend die Ecken rund sind, und die eigene Faerbung
   (cremefarbene Bahn, goldener Griff mit Pillenform) liess ihn wie ein
   zweites, danebengelegtes Element aussehen. Dieselbe Loesung wie auf
   fidelak.de und fidelak.works, die es von Anfang an so hatten. */
.cl-modal {
  background: #fff;
  border-radius: 1.75rem;
  width: 100%;
  max-width: 42rem;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(13, 21, 38, .45);
}

.cl-modal-kalender {
  max-width: 51.25rem;
  height: 82vh;
  flex-direction: column;
  overflow: hidden;
}
.cl-modal-kalender .cl-modal-head { align-items: center; padding: 1rem 1.75rem; }
.cl-modal-kalender iframe { flex: 1; width: 100%; border: 0; }

.cl-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--cream-2);
}
.cl-modal-head h2 { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--navy); margin: 0; }
.cl-modal-intro { font-family: var(--sans); font-size: .82rem; color: var(--muted); margin: .25rem 0 0; line-height: 1.55; }
.cl-modal-close {
  flex-shrink: 0; margin: -.25rem -.5rem 0 0; width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 999px; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--muted);
  transition: background .2s ease, color .2s ease;
}
.cl-modal-close:hover { background: var(--cream-2); color: var(--navy); }

.cl-form { padding: 1.5rem 1.75rem; font-family: var(--sans); }
.cl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 520px) { .cl-form-row { grid-template-columns: 1fr; } }
.cl-form label { display: block; margin-top: .75rem; }
.cl-form-row label { margin-top: 0; }
.cl-form label span {
  display: block;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem;
}
.cl-form input[type="text"], .cl-form input[type="email"], .cl-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: .875rem;
  color: var(--text);
  background: #fff;
  border: 2px solid var(--cream-2);
  border-radius: .75rem;
  padding: .75rem 1rem;
  transition: border-color .2s ease;
}
.cl-form input:focus, .cl-form textarea:focus { outline: none; border-color: var(--gold); }
.cl-form textarea { resize: vertical; }
.cl-form-captcha { max-width: 24rem; }
.cl-hp { position: absolute; left: -9999px; }

.cl-form-status { display: none; margin-top: 1rem; border-radius: .75rem; padding: .75rem 1rem; font-size: .82rem; font-weight: 500; }
.cl-form-status.pending { display: block; background: var(--cream-2); color: var(--muted); }
.cl-form-status.ok      { display: block; background: #e7f2ea; color: #2f6b45; }
.cl-form-status.error   { display: block; background: #f9e7e6; color: #9b3b34; }

.cl-form-foot {
  margin-top: 1.25rem;
  display: flex; flex-direction: column-reverse; align-items: center; gap: .75rem;
}
.cl-form-foot p { flex: 1; margin: 0; font-size: .69rem; line-height: 1.6; color: var(--muted); text-align: center; }
.cl-dsgvo { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cl-dsgvo:hover { color: var(--gold-dark); }
.cl-form-foot button {
  width: 100%; flex-shrink: 0;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: .85rem 2rem;
  cursor: pointer;
  transition: background .2s ease;
}
.cl-form-foot button:hover { background: var(--navy-mid); }
.cl-form-foot button:disabled { opacity: .6; cursor: not-allowed; }
@media (min-width: 640px) {
  .cl-form-foot { flex-direction: row; justify-content: space-between; }
  .cl-form-foot p { text-align: left; }
  .cl-form-foot button { width: auto; }
}

/* ==========================================================================
   Kundenstimmen (09/2026)

   Die Seite zeigt die freigegebenen Stimmen und darunter das Formular, mit
   dem neue eingehen. Statt Portraitfotos bekommt jede Stimme einen Kreis mit
   den Initialen - das kommt ohne Bilddaten aus und sieht auch dann
   aufgeraeumt aus, wenn jemand anonym bleiben moechte (dann steht ein
   Sternzeichen darin).
   ========================================================================== */

.cl-echtheit {
  font-family: var(--sans);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--muted);
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 0 .6rem .6rem 0;
  padding: 14px 18px;
  margin: 22px 0 36px;
}

.cl-stimmen {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .cl-stimmen { grid-template-columns: 1fr 1fr; } }

.cl-stimme {
  margin: 0;
  background: #fff;
  border: 1px solid var(--cream-2);
  border-radius: 1rem;
  padding: 26px 26px 22px;
  box-shadow: 0 10px 30px rgba(22, 35, 63, .06);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cl-stimme blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text);
}
/* Die Anfuehrungszeichen setzt die Gestaltung, nicht der eingesendete Text -
   sonst stehen je nach Einsendung mal welche da und mal nicht. */
.cl-stimme blockquote::before { content: "\201E"; color: var(--gold); }
.cl-stimme blockquote::after  { content: "\201C"; color: var(--gold); }

.cl-stimme figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--cream-2);
  font-family: var(--sans);
}
.cl-stimme figcaption strong { display: block; font-size: .92rem; font-weight: 600; color: var(--navy); }
.cl-stimme figcaption em { display: block; font-style: normal; font-size: .78rem; color: var(--muted); margin-top: 2px; }

.cl-kreis {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.cl-kreis.anonym { background: var(--gold-tint); color: var(--gold-dark); font-size: 1rem; }

.cl-stimmen-leer {
  background: var(--cream);
  border: 1px dashed var(--cream-2);
  border-radius: 1rem;
  padding: 30px 26px;
  text-align: center;
}
.cl-stimmen-leer p { margin: 0 0 18px; color: var(--muted); }
.cl-btn-gold {
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--gold);
  color: var(--navy);
  border-radius: 999px;
  padding: .85rem 2rem;
  transition: background .2s ease;
}
.cl-btn-gold:hover { background: var(--gold-dark); color: #fff; }

/* ---- Das Formular. Nutzt die Feldformen des Kontakt-Popups weiter, steht
        hier aber fest auf der Seite: wer drei Textfelder ausfuellt, soll den
        Kasten nicht versehentlich zuklicken koennen. ---- */
.cl-feedback {
  max-width: 44rem;
  margin-top: 26px;
  font-family: var(--sans);
}
.cl-feedback label { display: block; margin-top: 1.1rem; }
.cl-feedback .cl-form-row label { margin-top: 0; }
.cl-feedback label > span {
  display: block;
  margin-bottom: .4rem;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cl-feedback input[type="text"], .cl-feedback input[type="email"], .cl-feedback textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: .875rem;
  color: var(--text);
  background: #fff;
  border: 2px solid var(--cream-2);
  border-radius: .75rem;
  padding: .75rem 1rem;
  transition: border-color .2s ease;
}
.cl-feedback input:focus, .cl-feedback textarea:focus { outline: none; border-color: var(--gold); }
.cl-feedback textarea { resize: vertical; }
.cl-feedback small {
  display: block;
  margin-top: .4rem;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--muted);
}

.cl-feedback fieldset { border: none; padding: 0; margin: 1.4rem 0 0; }
.cl-feedback legend {
  padding: 0;
  margin-bottom: .6rem;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Die Beschriftungen der Auswahl und der Einwilligung sind ganze Saetze und
   duerfen nicht in Versalien stehen wie die Feldnamen darueber. */
.cl-feedback .cl-wahl-eintrag > span,
.cl-feedback .cl-einwilligung > span {
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  margin-bottom: 0;
}
.cl-feedback .cl-einwilligung > span { font-size: .84rem; line-height: 1.6; }

/* ---- Einwilligung, darunter die lebende Vorschau -------------------------
   Erst das Haekchen ueber die ganze Breite, darunter die beiden Fassungen
   nebeneinander. So stehen sie direkt untereinander vergleichbar da und
   bekommen jede genug Breite fuer ein paar Zeilen Zitat. */
.cl-einw-block {
  display: block;
  margin-top: 1.6rem;
}

.cl-feedback .cl-einwilligung { margin-top: 0 !important; align-items: flex-start; }

.cl-vorschau-feld {
  min-width: 0;
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 20px;
  align-items: start;
}
@media (min-width: 720px) { .cl-vorschau-feld { grid-template-columns: 1fr 1fr; } }
/* Ueberschrift und Hinweis laufen ueber beide Spalten. */
.cl-vorschau-titel, .cl-vorschau-hinweis { grid-column: 1 / -1; }
.cl-vorschau-titel {
  font-family: var(--sans);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .6rem;
}
.cl-vorschau-stimme { position: relative; transition: opacity .2s ease; }
.cl-vorschau-stimme blockquote.leer { color: var(--muted); font-style: italic; }
.cl-vorschau-stimme blockquote.leer::before,
.cl-vorschau-stimme blockquote.leer::after { content: ""; }

/* Untersagt: der rote Strich quer durch die Box. Er liegt als eigene Ebene
   darueber, damit der Text darunter lesbar bleibt - es soll erkennbar
   bleiben, was da nicht veroeffentlicht wird. */
.cl-vorschau-stimme.untersagt { opacity: .75; border-color: #e6b8b4; }
.cl-vorschau-stimme.untersagt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 1rem;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1.5px), #c0392b calc(50% - 1.5px), #c0392b calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(to bottom left,  transparent calc(50% - 1.5px), #c0392b calc(50% - 1.5px), #c0392b calc(50% + 1.5px), transparent calc(50% + 1.5px));
}

.cl-vorschau-hinweis {
  margin: .6rem 0 0;
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.55;
  color: var(--muted);
}
.cl-vorschau-hinweis.untersagt { color: #9b3b34; font-weight: 500; }

.cl-wahl-eintrag {
  display: flex !important;
  align-items: flex-start;
  gap: .6rem;
  margin: 0 0 .5rem !important;
  font-size: .9rem;
  color: var(--text);
  cursor: pointer;
}
.cl-wahl-eintrag input { margin-top: .15rem; accent-color: var(--navy); }

/* Sterne: nur fuer Mara, nicht fuer die Seite. Deshalb schlicht gehalten. */
.cl-sterne-reihe { display: flex; gap: .3rem; }
.cl-sterne-reihe label { margin: 0 !important; cursor: pointer; line-height: 1; }
.cl-sterne-reihe input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Hoehere Gewichtung als .cl-feedback label > span weiter oben - sonst
   erben die Sterne die Groesse der Feldbeschriftungen. */
.cl-feedback .cl-sterne-reihe span { font-size: 1.9rem; letter-spacing: normal; text-transform: none; color: var(--cream-2); margin-bottom: 0; transition: color .15s ease; }
/* Eine Note faerbt alle Sterne bis zu ihr, nicht nur den angeklickten -
   so ist es ueberall, und alles andere liest sich wie ein Fehler.
   Beim Ueberfahren dasselbe, eine Stufe dunkler als Vorschau. */
.cl-feedback .cl-sterne-reihe:has(label:nth-child(1) input:checked) label:nth-child(-n+1) span,
.cl-feedback .cl-sterne-reihe:has(label:nth-child(2) input:checked) label:nth-child(-n+2) span,
.cl-feedback .cl-sterne-reihe:has(label:nth-child(3) input:checked) label:nth-child(-n+3) span,
.cl-feedback .cl-sterne-reihe:has(label:nth-child(4) input:checked) label:nth-child(-n+4) span,
.cl-feedback .cl-sterne-reihe:has(label:nth-child(5) input:checked) label:nth-child(-n+5) span { color: var(--gold); }
.cl-feedback .cl-sterne-reihe label:hover span,
.cl-feedback .cl-sterne-reihe label:has(~ label:hover) span { color: var(--gold-dark); }
.cl-sterne-reihe label:focus-within span { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.cl-einwilligung {
  display: flex !important;
  align-items: flex-start;
  gap: .7rem;
  margin-top: 1.4rem !important;
  background: var(--cream);
  border-radius: .75rem;
  padding: 16px 18px;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--text);
  cursor: pointer;
}
.cl-einwilligung input { margin-top: .25rem; flex-shrink: 0; accent-color: var(--navy); }
.cl-einwilligung > span { display: block; }

.cl-feedback .cl-form-status { margin-top: 1.2rem; }
.cl-feedback .cl-form-foot { margin-top: 1.4rem; }

/* Entwurfshinweis auf den Rechtsseiten, die noch keinen verbindlichen Text
   haben, und die Platzhalter darin. Beides faellt bewusst auf. */
.cl-entwurf {
  font-family: var(--sans);
  font-size: .9rem;
  line-height: 1.6;
  background: #fdf3e3;
  border-left: 4px solid var(--gold-dark);
  border-radius: 0 .6rem .6rem 0;
  padding: 16px 20px;
  margin: 0 0 32px;
  color: #6b4d15;
}
.cl-entwurf strong { color: #5a3f0f; }
/* Stand-Datum unter Rechtstexten */
.cl-stand { margin-top: 2.4rem; font-family: var(--sans); font-size: .85rem; color: var(--muted, #6b7280); }
mark { background: #fdf0d0; color: #6b4d15; padding: 1px 4px; border-radius: 3px; }
.cl-musterformular {
  border: 1px solid var(--cream-2);
  border-radius: .8rem;
  padding: 20px 24px;
  background: var(--cream);
  font-family: var(--sans);
  font-size: .9rem;
}
.cl-musterformular p { margin: 0 0 14px; }
.cl-musterformular p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Buchseite (09/2026)

   Leseprobe als Bildergalerie, nicht als PDF: das Buch wird verkauft, es soll
   also nicht als Datei herunterladbar sein.
   ========================================================================== */

.cl-buch-daten { list-style: none; padding: 0; margin: 22px 0; font-family: var(--sans); font-size: .88rem; }
.cl-buch-daten li { padding: 8px 0; border-top: 1px solid var(--cream-2); color: var(--muted); }
.cl-buch-daten li:last-child { border-bottom: 1px solid var(--cream-2); }
.cl-buch-daten strong { display: inline-block; min-width: 8.5rem; color: var(--navy); font-weight: 600; }

/* Hinweis auf die drei Sprachfassungen. Einziger Weg auf die englische
   Buchseite - sie steht in keinem Menue. */
.cl-buch-sprachen { display: flex; align-items: flex-start; gap: 10px; margin: -6px 0 24px;
  font-family: var(--sans); font-size: .88rem; color: var(--muted); text-align: left; }
.cl-buch-sprachen svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--gold-dark); }
.cl-buch-sprachen a { color: var(--navy); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--gold); text-underline-offset: 3px; }
.cl-buch-sprachen a:hover { color: var(--gold-dark); }
.cl-buch-sprachen strong { color: var(--navy); font-weight: 600; }

/* "Write to me" ist auf der englischen Seite ein Link (WhatsApp), kein Knopf. */
a.cl-topbar-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* --- Umschlag als Papierstapel, mit dem Zettel zur Leseprobe -------------
   Er steht oben im Buchblock an der Stelle, an der sonst nur das Umschlagbild
   stuende. Die Leseprobe braucht damit keinen eigenen Abschnitt: vorher war
   das ein halber Bildschirm fuer etwas, das man ohnehin vergroessern muss, um
   es zu lesen. */
/* Unten Platz fuer den Zettel, damit er unter dem Umschlag haengt und nicht
   auf dem Bild liegt. */
.cl-buchstapel { position: relative; padding-bottom: 34px; }
.cl-stapel-knopf {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.cl-stapel-knopf img {
  position: relative;
  z-index: 3;
  width: 100%;
  height: auto;
  display: block;
  border-radius: .4rem;
  border: 1px solid var(--cream-2);
  box-shadow: 0 18px 40px rgba(22, 35, 63, .28);
  transform: rotate(-2.4deg);
  transition: transform .22s ease;
}
.cl-stapel-knopf:hover img { transform: rotate(-3.4deg) translateY(-4px); }

/* Die angedeuteten Blaetter darunter: sie sagen, dass da mehr ist als ein
   Bild, ohne eigenen Platz zu brauchen. */
.cl-blatt {
  position: absolute;
  inset: 0;
  border-radius: .4rem;
  background: #fffdf9;
  border: 1px solid var(--cream-2);
  transition: transform .22s ease;
}
.cl-blatt.b2 { z-index: 2; transform: rotate(1.2deg) translate(7px, 6px); box-shadow: 0 10px 24px rgba(22,35,63,.14); }
.cl-blatt.b3 { z-index: 1; transform: rotate(4.4deg) translate(15px, 12px); box-shadow: 0 10px 24px rgba(22,35,63,.10); }
.cl-stapel-knopf:hover .cl-blatt.b2 { transform: rotate(2.4deg) translate(11px, 8px); }
.cl-stapel-knopf:hover .cl-blatt.b3 { transform: rotate(6.6deg) translate(21px, 15px); }

/* Der Zettel haengt schraeg an der unteren Ecke. */
.cl-zettel {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%) rotate(-5deg);
  display: inline-block;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--navy);
  background: var(--gold);
  border-radius: .35rem;
  padding: .5rem 1.1rem;
  box-shadow: 0 10px 22px rgba(22, 35, 63, .28);
  transition: transform .22s ease, background .22s ease;
}
.cl-stapel-knopf:hover .cl-zettel {
  transform: translateX(-50%) rotate(-7deg) translateY(3px);
  background: #d3a851;
}

/* Die Grossansicht: das Blatt ueber der Seite, mit Pfeilen und Zaehler. */
.cl-lupe {
  position: fixed; inset: 0; z-index: 9500;
  display: none; align-items: center; justify-content: center;
  gap: 12px; padding: 3.5rem 1rem;
  background: rgba(13, 21, 38, .9);
}
.cl-lupe.offen { display: flex; }
.cl-lupe-blatt { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .7rem; min-width: 0; }
.cl-lupe img {
  max-width: min(92vw, 720px);
  max-height: 80vh;
  width: auto; height: auto;
  border-radius: .4rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.cl-lupe figcaption {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.7);
}
.cl-lupe-zu, .cl-lupe-pfeil {
  background: rgba(255,255,255,.12);
  border: none; color: #fff; cursor: pointer;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.cl-lupe-zu:hover, .cl-lupe-pfeil:hover { background: rgba(255,255,255,.3); }
.cl-lupe-zu { position: absolute; top: 1.1rem; right: 1.1rem; width: 2.6rem; height: 2.6rem; font-size: 1.6rem; line-height: 1; }
.cl-lupe-pfeil { flex-shrink: 0; width: 2.9rem; height: 2.9rem; font-size: 2rem; line-height: 1; }
@media (max-width: 680px) {
  .cl-lupe { padding: 3.2rem .6rem 1.4rem; flex-wrap: wrap; align-content: center; }
  .cl-lupe-blatt { order: -1; width: 100%; }
  .cl-lupe img { max-height: 68vh; }
  .cl-lupe-pfeil { width: 3.2rem; height: 3.2rem; }
}

/* --- Kaufen --------------------------------------------------------------- */
.cl-kauf {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 26px;
}
@media (min-width: 820px) { .cl-kauf { grid-template-columns: auto 1fr 1fr; align-items: start; } }

.cl-kauf-preis {
  background: var(--navy);
  color: #fff;
  border-radius: 1rem;
  padding: 26px 30px;
  text-align: center;
  align-self: start;
}
.cl-kauf-preis .betrag { display: block; font-family: var(--serif); font-size: 2.1rem; font-weight: 700; }
/* Hinweis, dass es ein PDF ist und kein gedrucktes Buch - bewusst deutlich. */
.cl-kauf-hinweis {
  max-width: 760px; margin: 0 0 28px;
  padding: 14px 18px; border-left: 4px solid var(--gold);
  background: var(--cream, #faf6ef); border-radius: 0 .6rem .6rem 0;
  font-size: 1rem; line-height: 1.6;
}
.cl-kauf-preis .zusatz {
  display: block; margin-top: 6px;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}

.cl-kauf-weg h3 {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark);
  margin: 0 0 .6rem;
}
.cl-kauf-weg p { font-size: .95rem; color: var(--muted); margin: 0 0 16px; }
.cl-qr {
  width: 100%; max-width: 230px; height: auto;
  border: 1px solid var(--cream-2); border-radius: .8rem; background: #fff;
}

/* Das Symbol richtet sich nach der Schriftgroesse statt an festen 20px -
   sonst verschwindet es neben der Beschriftung. */
.cl-btn-whatsapp {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  letter-spacing: .02em; text-decoration: none;
  background: #25d366; color: #0b3d20;
  border-radius: 999px; padding: .9rem 1.9rem;
  transition: background .2s ease;
}
.cl-btn-whatsapp svg { width: 1.6em; height: 1.6em; flex-shrink: 0; }
.cl-btn-whatsapp:hover { background: #1fbb59; color: #062d16; }

/* Zwei Wege nebeneinander (WhatsApp und Formular); bricht schmal um. */
.cl-kauf-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cl-coaching-links a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.cl-coaching-links a:hover { color: var(--gold-dark); }

/* --- Hinweis auf das Buch, der auf "Ueber mich" stehen bleibt -------------- */
.cl-buchhinweis {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
}
@media (min-width: 720px) { .cl-buchhinweis { grid-template-columns: 200px 1fr; gap: 38px; } }
.cl-buchhinweis img {
  width: 100%; height: auto;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(22,35,63,.28);
  transform: rotate(-2deg);
}
.cl-buchhinweis > a { display: block; max-width: 200px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Popup mit reinem Text (Datenschutzhinweise)

   Anders als beim Kontaktformular scrollt hier nicht der Hintergrund, sondern
   der Text im Kasten: die Erklaerung ist lang, und die Kopfzeile mit dem
   Schliessen-Knopf soll nicht nach oben wegwandern. Der Balken laeuft dabei in
   einem rechteckigen Bereich INNERHALB der abgerundeten Flaeche - genau
   deshalb faellt er nicht auf.
   -------------------------------------------------------------------------- */
.cl-modal-text {
  max-width: 46rem;
  max-height: 86vh;
  flex-direction: column;
}
.cl-modal-text .cl-modal-head { flex-shrink: 0; }

.cl-modal-body {
  overflow-y: auto;
  padding: 1.5rem 1.75rem 1.75rem;
  font-family: var(--sans);
  font-size: .88rem;
  line-height: 1.7;
  color: var(--text);
  overscroll-behavior: contain;
}
.cl-modal-body h3 {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy);
  margin: 1.6rem 0 .5rem;
}
.cl-modal-body h3:first-child { margin-top: 0; }
.cl-modal-body p { margin: 0 0 .9rem; }
.cl-modal-body p:last-child { margin-bottom: 0; }
.cl-modal-body strong { color: var(--navy); font-weight: 600; }
.cl-modal-body a { color: var(--gold-dark); }

.cl-modal-mehr {
  margin-top: 1.4rem !important;
  padding-top: 1.1rem;
  border-top: 1px solid var(--cream-2);
  font-size: .82rem;
}
.cl-modal-mehr a { color: var(--gold-dark); text-decoration: none; font-weight: 600; }
.cl-modal-mehr a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .cl-modal-body { padding: 1.25rem 1.25rem 1.5rem; }
  .cl-modal-text .cl-modal-head { padding: 1.1rem 1.25rem; }
}

/* Die beiden Fassungen der Vorschau, jede mit ihrer Beschriftung. Gleich hoch,
   damit sie sich wirklich vergleichen lassen. */
.cl-vorschau-fassung { min-width: 0; display: flex; flex-direction: column; height: 100%; }
.cl-vorschau-fassung .cl-stimme { flex: 1; }
.cl-vorschau-marke {
  display: block;
  margin-bottom: .45rem;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* Das Buch im Fuss. Klein, aber als Bild - ein weiterer Textlink neben vier
   Rechtslinks waere untergegangen. */
.foot-buch {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  max-width: 980px;
  margin: 0 auto 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.15);
  text-decoration: none;
}
.foot-buch img {
  width: 46px; height: auto;
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.foot-buch:hover img { transform: translateY(-2px) rotate(-2deg); }
.foot-buch span {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e7c98a;
}
.foot-buch:hover span { color: #fff; }

/* --- Teilen unter dem Umschlag -------------------------------------------
   Einfache Links, keine Widgets der Anbieter: ein eingebundenes Facebook-
   oder LinkedIn-Skript wuerde schon beim Anzeigen der Seite Daten der
   Besucher uebertragen. Ein Link tut nichts, bis jemand ihn anklickt. */
.cl-teilen { margin-top: 26px; text-align: center; }
.cl-teilen-titel {
  display: block;
  margin-bottom: .7rem;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cl-teilen-reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.cl-teilen-knopf {
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cream-2);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.cl-teilen-knopf svg { width: 1.15rem; height: 1.15rem; }
.cl-teilen-knopf:hover { transform: translateY(-2px); color: #fff; border-color: transparent; }
.cl-teilen-knopf.wa:hover { background: #25d366; color: #0b3d20; }
.cl-teilen-knopf.fb:hover { background: #1877f2; }
.cl-teilen-knopf.ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.cl-teilen-knopf.tg:hover { background: #229ed9; }
.cl-teilen-knopf.kopie:hover { background: var(--gold); color: var(--navy); }

.cl-teilen-rueckmeldung {
  display: block;
  min-height: 1.2em;
  margin-top: .6rem;
  font-family: var(--sans);
  font-size: .76rem;
  color: var(--gold-dark);
}


/* =========================================================================
   Preise auf "Mein Angebot" / "Mis Servicios"
   Dunkles Band mit zwei Karten: links das kostenlose Kennenlernen, rechts
   die Einzelsitzung mit dem Preis der Region. Darueber der Weg in drei
   Schritten, darunter der Hinweis fuer die jeweils andere Region.
   ========================================================================= */
section.block.cl-preise {
  position: relative; overflow: hidden;
  padding: 84px 24px 72px;
  color: #fff;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(193,148,63,.28), transparent 60%),
    radial-gradient(700px 380px at 100% 110%, rgba(136,156,128,.22), transparent 60%),
    linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 55%, var(--navy-dark) 100%);
}
.cl-preise::before {                  /* feine Linien als ruhiger Hintergrund */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 38px);
}
.cl-preise .wrap { position: relative; }

.cl-preise-kopf { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.cl-preise-kopf h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.25; margin: 8px 0 14px; }
.cl-preise-kopf p { color: rgba(255,255,255,.82); font-size: 1.08rem; margin: 0 auto; }
.cl-online-marke {
  display: inline-flex !important; align-items: center; gap: 10px;
  margin-top: 22px !important; padding: 9px 18px;
  font-family: var(--sans); font-size: .9rem !important; font-weight: 600; letter-spacing: .02em;
  color: var(--navy) !important; background: #e7c98a; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.cl-online-marke svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* Der Weg in drei Schritten */
.cl-weg {
  list-style: none; padding: 0; margin: 0 auto 48px; max-width: 860px;
  display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: none;
}
.cl-weg li {
  position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center;
  font-family: var(--sans);
}
.cl-weg .nr {
  grid-row: span 2; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--navy); background: linear-gradient(180deg, #ecd49b, var(--gold));
  box-shadow: 0 0 0 6px rgba(193,148,63,.18);
}
.cl-weg strong { font-size: 1rem; letter-spacing: .02em; }
.cl-weg li > span:last-child { font-size: .86rem; color: rgba(255,255,255,.7); }
@media (min-width: 760px) {
  .cl-weg { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .cl-weg li { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 6px; }
  .cl-weg .nr { grid-row: auto; margin-bottom: 6px; }
  .cl-weg li + li::before {           /* Verbindungslinie zwischen den Schritten */
    content: ""; position: absolute; top: 22px; right: 50%; width: 100%; height: 2px; z-index: -1;
    background: linear-gradient(90deg, rgba(231,201,138,.15), rgba(231,201,138,.7), rgba(231,201,138,.15));
  }
}

/* Die beiden Karten */
.cl-preis-karten { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: stretch; }
@media (min-width: 860px) { .cl-preis-karten { grid-template-columns: 1fr 1fr; gap: 30px; } }

.cl-preis-karte {
  position: relative; display: flex; flex-direction: column;
  background: #fff; color: var(--text);
  border-radius: 20px; padding: 40px 34px 34px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cl-preis-karte:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(0,0,0,.34); }
.cl-preis-karte h3 { margin: 0 0 6px; font-size: 1.35rem; color: var(--navy); }
.cl-preis-karte.gratis { background: linear-gradient(180deg, #fff 0%, #fff 60%, var(--cream) 100%); }
.cl-preis-karte.sitzung { outline: 2px solid var(--gold); outline-offset: -2px; }
.cl-preis-karte.sitzung::after {      /* goldener Schimmer oben */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--gold-dark), #ecd49b, var(--gold-dark));
}

.cl-preis-band, .cl-preis-region {
  position: absolute; top: -15px; left: 34px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px;
}
.cl-preis-band { color: #fff; background: var(--sage-dark); box-shadow: 0 8px 18px rgba(109,130,102,.45); }
.cl-preis-region { color: var(--navy); background: #e7c98a; box-shadow: 0 8px 18px rgba(161,122,48,.4); }
.cl-preis-region svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.cl-preis-zahl { display: flex; flex-direction: column; margin: 10px 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--cream-2); }
.cl-preis-zahl .betrag {
  font-family: var(--serif); font-weight: 700; line-height: 1.05;
  font-size: clamp(2.6rem, 6vw, 3.6rem); color: var(--navy); letter-spacing: -.01em;
}
.cl-preis-karte.gratis .betrag { color: var(--sage-dark); }
.cl-preis-zahl .einheit {
  margin-top: 8px; font-family: var(--sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

.cl-preis-liste { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.cl-preis-liste li { position: relative; padding: 7px 0 7px 32px; font-size: .98rem; line-height: 1.5; }
.cl-preis-liste li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l2.9 2.9 6-6.3' fill='none' stroke='%23a17a30' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}
.cl-preis-karte.gratis .cl-preis-liste li::before {
  background-color: #e6ede3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l2.9 2.9 6-6.3' fill='none' stroke='%236d8266' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cl-preis-karte .button-primary, .cl-preis-karte .cl-btn-gold { align-self: flex-start; margin-top: 0; }

/* Hinweis fuer die andere Region */
.cl-region-hinweis {
  margin: 34px auto 0; max-width: 980px;
  display: grid; grid-template-columns: auto 1fr; gap: 16px 18px; align-items: center;
  padding: 22px 26px; border-radius: 16px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(231,201,138,.45);
  backdrop-filter: blur(4px);
}
.cl-region-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(231,201,138,.18); color: #e7c98a;
}
.cl-region-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cl-region-text { display: flex; flex-direction: column; gap: 2px; font-family: var(--sans); }
.cl-region-text strong { font-size: 1.08rem; color: #fff; }
.cl-region-text span { color: rgba(255,255,255,.8); font-size: .95rem; }
.cl-btn-hell {
  grid-column: 1 / -1; justify-self: start;
  font-family: var(--sans); font-weight: 600; font-size: .95rem; letter-spacing: .02em;
  color: var(--navy); background: #fff; border: 0; cursor: pointer;
  padding: 13px 24px; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .2s ease, background .2s ease;
}
.cl-btn-hell:hover { transform: translateY(-2px); background: #e7c98a; }
@media (min-width: 760px) {
  .cl-region-hinweis { grid-template-columns: auto 1fr auto; }
  .cl-btn-hell { grid-column: auto; justify-self: end; }
}
.cl-preise-fuss { text-align: center; margin: 22px 0 0; font-family: var(--sans); font-size: .82rem; color: rgba(255,255,255,.6); }
.cl-preise-fuss a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.cl-preise-fuss a:hover { color: #fff; }

/* Kleine Korrekturen an den Preiskarten: Band ueber dem Goldstreifen,
   Knoepfe ohne Browser-Rahmen. */
.cl-preis-band, .cl-preis-region { z-index: 2; }
.cl-preis-karte button { border: 0; cursor: pointer; }
.cl-preis-karte .cl-btn-whatsapp { align-self: flex-start; }

/* Massage: die drei Bereiche Espalda, Cabeza, Rostro */
.cl-zonen { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 820px) { .cl-zonen { grid-template-columns: repeat(3, 1fr); } }
.cl-zone {
  background: #fff; border: 1px solid var(--cream-2); border-radius: 18px;
  padding: 32px 28px 26px; text-align: center;
  box-shadow: 0 12px 30px rgba(22,35,63,.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cl-zone:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(22,35,63,.12); }
.cl-zone-icon {
  width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, #fff, var(--gold-tint));
  box-shadow: inset 0 0 0 1px rgba(193,148,63,.35);
  color: var(--gold-dark);
}
.cl-zone-icon svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-zone h3 { margin: 0 0 8px; color: var(--navy); font-size: 1.3rem; }
.cl-zone p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.6; }

/* Menue ohne Zeilenumbruch. Auf Spanisch stehen sechs Punkte im Menue
   (mit "Masajes"); zwischen 901 und 1180px wird es dafuer etwas enger. */
@media (min-width: 901px) {
  .main-nav a { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .main-nav { gap: 15px; font-size: .76rem; letter-spacing: .02em; }
}

/* Massage: Nutzen ueber den drei Bereichen */
.cl-nutzen { max-width: 820px; margin: 0 auto 44px; }
.cl-nutzen h2 { text-align: center; margin: 0 0 26px; }
.cl-nutzen h2 em { font-style: italic; font-weight: 600; }
.cl-nutzen-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.cl-nutzen-liste li {
  position: relative; padding: 18px 22px 18px 62px;
  background: #fff; border: 1px solid var(--cream-2); border-radius: 14px;
  box-shadow: 0 8px 22px rgba(22,35,63,.05); line-height: 1.6;
}
.cl-nutzen-liste li::before {
  content: ""; position: absolute; left: 20px; top: 20px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l2.9 2.9 6-6.3' fill='none' stroke='%23a17a30' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;
}
.cl-nutzen-liste strong { color: var(--navy); }

/* Teilen im Fuss: helle Knoepfe auf dem dunklen Grund */
.cl-teilen.im-fuss { margin: 6px 0 22px; }
.cl-teilen.im-fuss .cl-teilen-titel { color: rgba(255,255,255,.6); }
.cl-teilen.im-fuss .cl-teilen-knopf { background: transparent; border-color: rgba(255,255,255,.25); color: #e7e2d8; }
.cl-teilen.im-fuss .cl-teilen-rueckmeldung { color: #e7c98a; }
button.cl-teilen-knopf { padding: 0; margin: 0; font: inherit; vertical-align: middle; }
a.cl-teilen-knopf { vertical-align: middle; }

/* ==========================================================================
   Fehlerseite 404 (10/2026)

   Kein Bildbanner wie auf den anderen Seiten, sondern eine ruhige Flaeche in
   Creme: die "0" in der 404 ist das Clarum-Blatt. Darunter die Wege, die es
   gibt - dieselben Seiten wie im Menue, als Kacheln.
   ========================================================================== */
.cl-404 {
  background: radial-gradient(900px 520px at 50% 0%, var(--gold-tint) 0%, var(--cream) 55%, #fff 100%);
  padding: 56px 20px 72px;
  text-align: center;
}
.cl-404-innen { max-width: 760px; margin: 0 auto; }
.cl-404-zahl { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 18px; }
.cl-404-zahl span {
  font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: clamp(4.6rem, 14vw, 7.5rem); line-height: 1;
  color: var(--navy); letter-spacing: .02em;
}
.cl-404-zahl img {
  width: clamp(70px, 12vw, 112px); height: auto; margin: 0 4px;
  filter: drop-shadow(0 8px 18px rgba(161,122,48,.25));
  animation: cl-404-blatt 6s ease-in-out infinite;
  transform-origin: 50% 85%;
}
@keyframes cl-404-blatt { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .cl-404-zahl img { animation: none; } }
.cl-404 h1 { margin: 6px 0 16px; color: var(--navy); font-size: clamp(1.6rem, 4vw, 2.2rem); }
.cl-404-text { max-width: 600px; margin: 0 auto 34px; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.cl-404-wege {
  list-style: none; padding: 0; margin: 0 0 34px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; text-align: left;
}
.cl-404-wege a {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 64px; padding: 14px 44px 14px 18px; border-radius: 12px;
  background: #fff; border: 1px solid var(--cream-2); color: var(--navy); text-decoration: none;
  box-shadow: 0 6px 18px rgba(22,35,63,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cl-404-wege a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(22,35,63,.12); border-color: var(--gold); }
.cl-404-wege strong { font-family: var(--sans); font-size: .9rem; font-weight: 600; letter-spacing: .03em; }
.cl-404-wege small { font-family: var(--sans); font-size: .78rem; color: var(--muted); }
.cl-404-wege .pfeil { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--gold-dark); font-size: 1.1rem; }
.cl-404-wege li.erste a { background: var(--navy); border-color: var(--navy); color: #fff; }
.cl-404-wege li.erste small { color: #e7c98a; }
.cl-404-wege li.erste .pfeil { color: var(--gold); }
.cl-404-aktionen .cl-btn-gold { border: 0; cursor: pointer; }
.cl-404-aktionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; }
.cl-404-sprache { font-family: var(--sans); font-size: .88rem; color: var(--navy); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ==========================================================================
   Kopf flacher (10/2026)

   Kopfzeilen und Titelbanner waren zusammen auf dem Handy fast ein halber
   Bildschirm, bevor der erste Satz kam. Jetzt: etwas weniger Luft in der
   Markenzeile, ein niedrigeres Titelbanner, und auf dem Handy beides
   deutlich kompakter.
   ========================================================================== */
.cl-header-main { padding-top: 10px; padding-bottom: 10px; }
.page-title-only { padding: 70px 24px 92px; }
.hero-home { min-height: 52vh; padding: 64px 24px 110px; }

@media (max-width: 640px) {
  .cl-topbar-inner { height: 34px; padding: 0 .75rem; }
  .cl-topbar-btn { padding: .22rem .65rem; }
  .cl-header-main { padding: 7px 16px; }
  .brand { font-size: 1.02rem; gap: 8px; }
  .brand img { width: 28px; height: 28px; }
  .page-title-only { padding: 38px 18px 56px; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
  .page-title-only h1 { font-size: 1.3rem; }
  .page-title-only .kicker { margin-bottom: 4px; }
  .hero-home { min-height: 0; padding: 48px 20px 76px; }
  .cl-404 { padding: 36px 16px 56px; }
}

/* ==========================================================================
   Titelbilder als <picture> (10/2026)

   Das Bild liegt als eigenes Element hinter dem Inhalt (z-index -2), der
   Farbverlauf darueber (::before, -1) - vorher waren beide zusammen ein
   CSS-Hintergrund. isolation sorgt dafuer, dass die negativen Ebenen im
   Banner bleiben und nicht hinter der Seite verschwinden. Der Verlauf kommt
   pro Seite aus --hero-verlauf.
   ========================================================================== */
.cl-hero { isolation: isolate; overflow: hidden; }
.cl-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-verlauf, rgba(15,25,45,.6)); }
.cl-hero-bild, .cl-hero-bild img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.cl-hero-bild img { object-fit: cover; object-position: center; display: block; }

/* <picture> von cl_bild(): ohne eigene Box, damit sich das <img> darin
   verhaelt wie vorher (Floats, Breiten, Rahmen). */
picture.cl-bild { display: contents; }

/* ==========================================================================
   Popups als <dialog> (10/2026)

   Der Browser legt das Fenster in die oberste Ebene und zeichnet den
   abgedunkelten Hintergrund (::backdrop). Waehrend ein Dialog offen ist,
   scrollt die Seite dahinter nicht mit.
   ========================================================================== */
dialog.cl-modal {
  border: 0;
  padding: 0;
  color: inherit;
  width: calc(100% - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog.cl-modal::backdrop { background: rgba(13, 21, 38, .72); }
dialog.cl-modal-kalender { overflow: hidden; }
dialog.cl-modal-kalender[open], dialog.cl-modal-text[open] { display: flex; }
dialog.cl-modal-text { overflow: hidden; }
html:has(dialog.cl-modal[open]) { overflow: hidden; }

/* ---------------------------------------------------------------
   Abgrenzung Coaching / Therapie (cl_hinweis_coaching, cl_abgrenzung)
   --------------------------------------------------------------- */
.cl-hinweis-coaching {
  font-family: var(--sans);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 40rem;
  margin: 1.4rem auto 0;
}
.cl-hinweis-coaching strong { color: var(--navy); }
.cl-hinweis-coaching a { color: var(--gold-dark); text-underline-offset: 3px; }
.cl-hinweis-coaching.on-dark { color: rgba(255,255,255,.6); text-align: center; font-size: .82rem; margin-top: .9rem; }
.cl-hinweis-coaching.on-dark strong { color: rgba(255,255,255,.85); }
.cl-hinweis-coaching.on-dark a { color: var(--gold); }
.cl-hinweis-coaching.on-dark a:hover { color: #fff; }

.cl-abgrenzung { scroll-margin-top: 90px; }
.cl-abgrenzung h3 { margin-top: 1.8rem; }
.cl-krise {
  margin-top: 2rem;
  padding: 18px 22px;
  background: #fff;
  border-left: 4px solid var(--gold-dark);
  border-radius: 0 .6rem .6rem 0;
}
.cl-krise h3 { margin-top: 0; }
.cl-krise p { margin-bottom: 0; }
.cl-krise a { white-space: nowrap; }

.cl-kalender-kopf { display: flex; align-items: center; gap: 14px; padding: .9rem 1.75rem; }
.cl-kalender-kopf picture { flex: none; display: block; }
.cl-kalender-kopf img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 12px rgba(22,35,63,.18); }
.cl-modal-kalender .cl-kalender-hinweis { margin: 0; padding: 0; }
.cl-modal-kalender .cl-kalender-hinweis a { color: var(--gold-dark); }

/* ---------------------------------------------------------------
   Neue Startseite - Vorschau (php/startseite2.php, Uebergabe P2).
   Eigene Klassen mit cl2-, damit nichts an den bestehenden Seiten
   veraendert wird. Faellt die Entscheidung gegen die neue Startseite,
   kann dieser Block ersatzlos weg.
   --------------------------------------------------------------- */
.cl2 { --cl2-tint: #f6ead2; font-size: 17px; line-height: 1.6; }
.cl2-wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.cl2-schmal { max-width: 760px; }
.cl2 h1 { font-family: var(--serif); font-weight: 600; color: var(--navy); font-size: 2.75rem; line-height: 1.15; margin: 0 0 18px; letter-spacing: -.01em; }
.cl2 h2 { font-family: var(--serif); font-weight: 600; color: var(--navy); font-size: 2rem; line-height: 1.2; margin: 0 0 10px; }
.cl2-hero { background: linear-gradient(180deg, var(--cream) 0%, #fff 100%); padding: 56px 0 48px; }
.cl2-hero-raster { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; }
.cl2-kicker { font: 600 13px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); margin: 0 0 14px; }
.cl2-lead { font-size: 1.15rem; color: var(--muted); margin: 0 0 26px; max-width: 560px; }
.cl2-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 22px; }
.cl2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 600 16px var(--sans); cursor: pointer; border: 0; text-align: center; line-height: 1.25; }
.cl2-btn-gold { background: var(--gold); color: var(--navy); box-shadow: 0 6px 18px rgba(193,148,63,.35); }
.cl2-btn-gold:hover { background: var(--gold-dark); color: #fff; }
.cl2-btn-rand { color: var(--navy); border: 2px solid var(--navy); background: transparent; }
.cl2-btn-rand:hover { background: var(--navy); color: #fff; }
.cl2-fakten { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 14px var(--sans); color: var(--navy); padding: 0; margin: 0; list-style: none; }
.cl2-fakten li::before { content: "✓"; color: #6d8266; font-weight: 700; margin-right: 6px; }
.cl2-portraet { display: block; }
.cl2-portraet img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 60%; border-radius: 200px 200px 24px 24px; box-shadow: 0 20px 40px rgba(22,35,63,.18); }

.cl2-zitat { position: relative; overflow: hidden; color: #fff; text-align: center; padding: 72px 22px; background: var(--navy-dark, #0d1526); }
.cl2-zitat .cl2-zitat-bild { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.cl2-zitat::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(13,21,38,.66), rgba(13,21,38,.76)); }
.cl2-zitat p { position: relative; z-index: 2; font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1.45; max-width: 760px; margin: 0 auto; }
.cl2-strich { position: relative; z-index: 2; width: 64px; height: 2px; background: var(--gold); margin: 22px auto 0; }

.cl2-abschnitt { padding: 64px 0; }
.cl2-alt { background: var(--cream); }
.cl2-sub { color: var(--muted); margin: 0 0 30px; max-width: 640px; }
.cl2-raster3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cl2-kachel { display: block; background: #fff; border: 1px solid var(--cream-2); border-radius: 16px; padding: 22px; color: inherit; }
a.cl2-kachel:hover { border-color: var(--gold); }
.cl2-kachel h3 { font-family: var(--serif); font-size: 1.15rem; color: var(--navy); margin: 8px 0 6px; line-height: 1.3; }
.cl2-kachel p { margin: 0; color: var(--muted); font-size: 1rem; }
.cl2-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--cl2-tint); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.cl2-schritte { counter-reset: cl2s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0; }
.cl2-schritte li { padding: 22px; background: #fff; border-radius: 16px; border-top: 4px solid var(--gold); }
.cl2-schritte li::before { counter-increment: cl2s; content: counter(cl2s); font: 700 15px var(--sans); display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; align-items: center; justify-content: center; margin-bottom: 10px; }
.cl2-schritte strong { display: block; color: var(--navy); font-size: 1.15rem; margin-bottom: 4px; }
.cl2-schritte span { color: var(--muted); font-size: 1rem; }
.cl2-dauer { font: 500 14px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cl2-betrag { font: 600 30px var(--serif); color: var(--navy); margin: 4px 0 6px; }
.cl2-hervor { border: 2px solid var(--gold); }
.cl2-notiz { font: 400 15px var(--sans); color: var(--muted); margin-top: 18px; }
.cl2-link { font: 600 16px var(--sans); color: var(--navy); border-bottom: 2px solid #889c80; padding-bottom: 2px; }
.cl2-link:hover { border-bottom-color: var(--gold); }
.cl2-frage { background: #fff; border: 1px solid var(--cream-2); border-radius: 12px; padding: 0 18px; margin-bottom: 10px; }
.cl2-frage summary { cursor: pointer; min-height: 56px; display: flex; align-items: center; gap: 12px; font: 600 17px var(--sans); color: var(--navy); list-style: none; }
.cl2-frage summary::-webkit-details-marker { display: none; }
.cl2-frage summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--gold-dark); }
.cl2-frage[open] summary::after { content: "–"; }
.cl2-frage p { margin: 0 0 16px; color: var(--muted); }
.cl2-schluss { background: var(--navy); color: #fff; text-align: center; padding: 60px 0; }
.cl2-schluss h2 { color: #fff; }
.cl2-schluss > .cl2-wrap > p { color: #dfe3ea; margin: 0 0 24px; }

@media (max-width: 820px) {
  .cl2 { font-size: 16px; }
  .cl2-hero { padding: 24px 0 36px; }
  .cl2-hero-raster { grid-template-columns: 1fr; gap: 18px; }
  .cl2-portraet { order: -1; width: 132px; }
  .cl2-portraet img { aspect-ratio: 1 / 1; border-radius: 50%; object-position: 50% 50%; box-shadow: 0 10px 24px rgba(22,35,63,.18); }
  .cl2 h1 { font-size: 1.85rem; }
  .cl2-lead { font-size: 1.05rem; margin-bottom: 20px; }
  .cl2-btn { width: 100%; }
  .cl2-raster3, .cl2-schritte { grid-template-columns: 1fr; }
  .cl2-anlaesse { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cl2-anlaesse .cl2-kachel { padding: 14px; }
  .cl2-anlaesse h3 { font-size: 1rem; }
  .cl2-anlaesse p { font-size: .875rem; line-height: 1.45; }
  .cl2-anlaesse .cl2-icon { width: 32px; height: 32px; font-size: 16px; }
  .cl2-zitat p { font-size: 1.3rem; }
  .cl2 h2 { font-size: 1.6rem; }
  .cl2-abschnitt { padding: 48px 0; }
  .cl2-kicker { font-size: 12px; }
}
.cl2-schluss .cl-hinweis-coaching { text-align: center; margin-top: 1.8rem; }

/* ---------------------------------------------------------------
   Barrierefreiheit (Uebergabe P10)
   --------------------------------------------------------------- */
/* Auf den heutigen Startseiten ist der Schriftzug "Clarum Coaching" die H1 -
   er soll genauso aussehen wie vorher als <span class="kicker">. */
h1.kicker { margin: 0 0 10px; line-height: 1.6; }

/* Sprunglink "Zum Inhalt": unsichtbar, bis er per Tab den Fokus bekommt. */
.cl-sprung { position: absolute; left: -9999px; top: 0; z-index: 2000; }
.cl-sprung:focus { left: 1rem; top: .5rem; background: #fff; color: var(--navy); padding: .6rem 1.1rem; border-radius: 8px; font: 600 15px var(--sans); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
main:focus, dialog.cl-modal:focus { outline: none; }

/* Sichtbarer Fokus nur bei Tastaturbedienung (nicht beim Tippen/Klicken). */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px;
}

/* Klickflaechen: unsichtbar auf 44 px Hoehe (Menueknopf 44 x 44) vergroessert,
   die Optik bleibt. DE/ES stehen so dicht beieinander, dass sie in der Breite
   nur bis zur Mitte des Abstands wachsen (sonst ueberlappten sie). */
.cl-lang a, .cl-topbar-btn, .cl-nav-toggle, .foot-rechtliches a { position: relative; }
.cl-lang a::after, .cl-topbar-btn::after, .cl-nav-toggle::after, .foot-rechtliches a::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: max(100%, 44px); width: 100%;
}
.cl-lang a::after { width: calc(100% + .8rem); }
.cl-nav-toggle::after { width: max(100%, 44px); }
/* Zeilen der Fusslinks so weit auseinander, dass sich die Flaechen nicht
   ueberdecken, wenn sie auf dem Handy umbrechen. */
.foot-rechtliches { row-gap: 22px; }
/* Die Tippflaechen der oberen Zeile ragen ein paar Pixel in die Kopfzeile
   darunter - die obere Zeile muss deshalb darueber liegen. */
.cl-topbar { position: relative; z-index: 3; }

/* ---------------------------------------------------------------
   Mein Angebot / Mis servicios (Uebergabe P15): einheitliche Kartendaten,
   Haeufige Fragen, sichtbare Platzhalter fuer Maras Angaben.
   --------------------------------------------------------------- */
.cl-zielgruppe { font-size: 1.05rem; color: var(--muted); margin: 0 0 28px; max-width: 760px; }
.cl-karte-daten { display: grid; grid-template-columns: 1fr; gap: 6px 22px; margin: 14px 0 16px; padding: 14px 16px; background: var(--cream); border-radius: 12px; font-family: var(--sans); font-size: .92rem; }
.cl-karte-daten > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 10px; }
.cl-karte-daten dt { font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; padding-top: .15rem; }
.cl-karte-daten dd { margin: 0; color: var(--text); }
@media (min-width: 760px) { .cl-karte-daten { grid-template-columns: 1fr 1fr; } }
.cl-karte-knopf { margin-top: 10px; min-height: 44px; border: 0; cursor: pointer; }
.cl-mara { background: #fff3c4; color: #6b4d15; border-radius: 4px; padding: 0 .3em; font-family: var(--sans); }
.cl-faq { max-width: 760px; }
.cl-faq details { background: #fff; border: 1px solid var(--cream-2); border-radius: 12px; padding: 0 18px; margin-bottom: 10px; }
.cl-faq summary { cursor: pointer; min-height: 56px; display: flex; align-items: center; gap: 12px; font: 600 1.02rem var(--sans); color: var(--navy); list-style: none; }
.cl-faq summary::-webkit-details-marker { display: none; }
.cl-faq summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--gold-dark); }
.cl-faq details[open] summary::after { content: "–"; }
.cl-faq details p { margin: 0 0 16px; color: var(--muted); }
.cl-faq a { color: var(--gold-dark); font-weight: 600; }
.cl-faq-knopf { background: none; border: 0; padding: 0; color: var(--gold-dark); font: 600 1em var(--sans); text-decoration: underline; cursor: pointer; }
@media (max-width: 559px) {
  .cl-karte-daten > div { grid-template-columns: 1fr; gap: 0; padding: 4px 0; }
  .cl-karte-daten > div + div { border-top: 1px solid var(--cream-2); }
}

/* ---------------------------------------------------------------
   Kontakt-Popup kompakt (10/2026): passt auf einem Laptop (etwa 625 px
   sichtbare Hoehe) ohne Scrollen. Reicht der Platz doch nicht, scrollt nur
   das Formular - die Kopfzeile mit dem Schliessen-Knopf bleibt stehen, und
   der Balken laeuft INNERHALB der weissen Flaeche statt am runden Rand.
   --------------------------------------------------------------- */
dialog#cl-kontakt-modal { overflow: hidden; }
dialog#cl-kontakt-modal[open] { display: flex; flex-direction: column; }
#cl-kontakt-modal .cl-modal-head { flex-shrink: 0; padding: 1rem 1.5rem; }
#cl-kontakt-modal .cl-form { overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.5rem 1.25rem; }
#cl-kontakt-modal .cl-form label { margin-top: .6rem; }
#cl-kontakt-modal .cl-form-row label { margin-top: 0; }
#cl-kontakt-modal .cl-form label span { margin-bottom: .3rem; }
#cl-kontakt-modal .cl-form input[type="text"],
#cl-kontakt-modal .cl-form input[type="email"],
#cl-kontakt-modal .cl-form textarea { padding: .55rem .85rem; }

.cl-form-abschluss { display: flex; align-items: flex-end; gap: .75rem; margin-top: .6rem; }
.cl-form-abschluss .cl-form-captcha { flex: 1; max-width: none; margin-top: 0 !important; }
.cl-form-senden {
  flex: none;
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: var(--navy); color: #fff; border: none; border-radius: 999px;
  min-height: 44px; padding: .7rem 1.6rem; cursor: pointer; transition: background .2s ease;
}
.cl-form-senden:hover { background: var(--navy-mid); }
.cl-form-senden:disabled { opacity: .6; cursor: not-allowed; }
.cl-form-datenschutz { margin: .75rem 0 0; font-size: .69rem; line-height: 1.55; color: var(--muted); }
@media (max-width: 520px) {
  .cl-form-abschluss { flex-direction: column; align-items: stretch; }
  .cl-form-senden { width: 100%; }
}

/* Schmale Scrollbalken in Seitenfarben fuer die Popups (Kontakt, Datenschutz). */
#cl-kontakt-modal .cl-form, .cl-modal-body { scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
#cl-kontakt-modal .cl-form::-webkit-scrollbar, .cl-modal-body::-webkit-scrollbar { width: 8px; }
#cl-kontakt-modal .cl-form::-webkit-scrollbar-track, .cl-modal-body::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
#cl-kontakt-modal .cl-form::-webkit-scrollbar-thumb, .cl-modal-body::-webkit-scrollbar-thumb { background: var(--cream-2); border-radius: 999px; }
#cl-kontakt-modal .cl-form::-webkit-scrollbar-thumb:hover, .cl-modal-body::-webkit-scrollbar-thumb:hover { background: var(--gold); }