/* =========================================================
   TRIQUANTIS ADVISORY – NACHBAU
   Inhaltsverzeichnis:
   1. Design-Variablen (:root)  -> HIER Farben/Fonts anpassen
   2. Reset & Basis
   3. Layout-Hilfsklassen (.shell, .section, Typo-Utilities)
   4. Buttons & Links
   5. Header & Navigation
   6. Hero
   7. Vertrauens-Leiste
   8. Leistungen
   9. Prozess-Schritte
   10. Tools-Karten
   11. Über uns
   12. CTA-Sektion
   13. Footer
   14. Responsive Anpassungen
   15. Unterseiten-Bausteine
   16. Honorarrechner
   17. Leistungsbereiche
   18. Werte-Karten
   ========================================================= */


/* ---------------------------------------------------------
   0. SCHRIFTEN
   Seit 14.11.2026 liegen die Schriften im Repo
   (assets/fonts/) statt bei Google. Damit baut der Browser
   keine Verbindung mehr zu fonts.googleapis.com und
   fonts.gstatic.com auf, es wird keine IP-Adresse der
   Besucher ins Ausland uebermittelt, und die
   Datenschutzerklaerung braucht dafuer keinen Abschnitt mehr.

   Geladen wird nur, was die Seite wirklich benutzt:
   Cormorant Garamond in 300/400/500 fuer die Ueberschriften,
   Inter in 400/500/600 fuer Fliesstext und Bedienelemente,
   je nur der Zeichensatz "latin" (Umlaute sind darin
   enthalten) und nur als woff2. Zusammen 144 KB.
   Dateien stammen aus den Fontsource-Paketen 5.1.0, die
   dieselben Schriftschnitte ausliefern wie Google.

   Kommt ein Schnitt dazu, die Datei nach assets/fonts/
   legen und hier eine Regel ergaenzen - sonst faellt der
   Browser still auf die Ersatzschrift zurueck.
   font-display: swap entspricht dem frueheren
   &display=swap in der Google-Adresse: Der Text ist sofort
   lesbar und wird nachtraeglich umgestellt.
--------------------------------------------------------- */
@font-face{
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');
}
@font-face{
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}


/* ---------------------------------------------------------
   1. DESIGN-VARIABLEN
   Alle Farben, Schriften und Abstände der Seite sind hier
   zentral definiert. Wer die Farbwelt oder Schriftgrössen
   ändern will, muss nur diesen Block bearbeiten.
--------------------------------------------------------- */
:root{
  /* Farben – Premium-Palette.
     Mengenverhältnis als Richtwert: ~65 % Ivory, 20 % Graphite,
     10 % Stone, 5 % Bronze. Bronze bleibt bewusst selten: kleine
     Linien, Labels, Icons, aktive Zustände – nie grosse Flächen. */
  --color-ivory:        #F6F4EF;  /* Hauptfläche der Seite */
  --color-stone:        #EAE7E0;  /* Abwechselnde Sektionen, ruhige Flächen */
  --color-graphite:     #171A1C;  /* Dunkle Sektionen, Footer, Haupt-CTA */
  --color-charcoal:     #222526;  /* Überschriften, wichtiger Text, Navigation */
  --color-slate:        #686B69;  /* Fliesstext, Beschreibungen */
  --color-slate-light:  #6F726F;  /* Meta-Infos – bewusst nur wenig heller als Slate,
                                     damit der Kontrast auf Ivory die 4.5:1 noch hält */
  --color-bronze:       #9A8260;  /* Akzent – sparsam einsetzen */
  --color-bronze-deep:  #7F684A;  /* Hover-Zustand des Akzents */
  --color-bronze-soft:  #B8A183;  /* Akzent auf dunklem Grund */
  --color-bronze-pale:  #EFE9DF;  /* Sehr zarte Akzentfläche (kleine Badges) */
  --color-border:       #D8D4CB;  /* Rahmen und Trennlinien, immer sehr fein */
  --color-warm-light:   #DEDAD1;  /* Heller Text auf dunklem Grund */

  /* Schriften */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;  /* Überschriften, editorial */
  --font-sans:    'Inter', system-ui, sans-serif;                   /* Fliesstext und UI */

  /* Schriftgrössen (fluid mit clamp = passt sich der Fensterbreite an) */
  --fs-d1: clamp(2.5rem, 6.5vw, 5.75rem);   /* Hero-Headline, 40–92px */
  --fs-d2: clamp(2rem, 4.4vw, 4rem);        /* Sektionstitel, 32–64px */
  --fs-d3: clamp(1.5rem, 2.6vw, 2.25rem);   /* Untertitel, 24–36px */
  --fs-lead: 1.125rem;
  --fs-label: 0.72rem;
  --fs-base: 1rem;

  /* Layout */
  --header-h: 4.5rem;                       /* Hoehe der Kopfzeile, ab 640px groesser */
  --container-max: 76rem;
  --container-pad: clamp(1.25rem, 5vw, 3.5rem);
  --section-pad: clamp(4rem, 8vw, 7.5rem);

  /* Sonstiges */
  --radius-sm: 6px;
  --radius-card: 10px;
  --shadow-card: 0 1px 2px rgba(23,26,28,.03), 0 18px 40px -32px rgba(23,26,28,.30);
  --transition-fast: .2s cubic-bezier(.4,0,.2,1);
  --transition-calm: .3s cubic-bezier(.25,.6,.35,1);
}


/* ---------------------------------------------------------
   2. RESET & BASIS
--------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;   /* Serifen-Headlines stehen bewusst eng */
  color: var(--color-charcoal);
  text-wrap: balance;
  overflow-wrap: break-word;  /* Notbremse: nie ueber den Bildschirmrand */
  hyphens: auto;              /* lange Komposita auf schmalen Geraeten trennen */
}

p{ margin: 0; }

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

img{
  max-width: 100%;
  display: block;
  height: auto;
  background: var(--color-stone); /* dezenter Platzhalter, falls Bild fehlt */
}

ul, ol{
  list-style: none;
  margin: 0;
  padding: 0;
}

address{ font-style: normal; }

svg{ display: block; }

::selection{
  background: var(--color-bronze-soft);
  color: var(--color-charcoal);
}

:focus-visible{
  outline: 2px solid var(--color-bronze);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-charcoal);
  color: var(--color-ivory);
  padding: .75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus{
  left: 1rem;
  top: 1rem;
}

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ---------------------------------------------------------
   3. LAYOUT-HILFSKLASSEN
--------------------------------------------------------- */
.shell{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section{
  padding-block: var(--section-pad);
}

.section--shell{
  background: var(--color-stone);
}

.section-header{
  max-width: 42rem;
}

/* Fuer Ueberschriften, die sonst auf breiten Bildschirmen umbrechen */
.section-header--wide{ max-width: 56rem; }
/* Volle Breite plus kleinere Headline: fuer lange Titel, die auf einer Zeile
   stehen sollen. Auf schmalen Bildschirmen bricht sie weiterhin normal um. */
.section-header--full{ max-width: none; }
.section-header--full .section-title{ font-size: clamp(1.9rem, 3.9vw, 3.4rem); }
.section-header--wide .lead{ max-width: 42rem; }

.section-title{
  margin-top: 1rem;
  font-size: var(--fs-d2);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.lead{
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  line-height: 1.625;
  color: var(--color-slate);
}

.label{
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--color-bronze);
}
.label--sky{ color: var(--color-bronze-soft); }

.text-sky{ color: var(--color-bronze-soft); }   /* Akzentwort auf dunklem Grund */
.text-bronze{ color: var(--color-bronze); }      /* Akzentwort auf hellem Grund */


/* ---------------------------------------------------------
   4. BUTTONS & LINKS
--------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: var(--radius-sm);
  padding: .75rem 1.5rem;
  font-size: .95rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn-sm{ padding: .625rem 1.5rem; font-size: .88rem; }

.btn-primary{
  background: var(--color-graphite);
  color: var(--color-ivory);
}
.btn-primary:hover{ background: var(--color-charcoal); }

.btn-outline{
  background: var(--color-ivory);
  border-color: var(--color-border);
  color: var(--color-charcoal);
}
.btn-outline:hover{
  border-color: var(--color-bronze);
  color: var(--color-bronze);
}

.btn-light{
  background: var(--color-ivory);
  color: var(--color-charcoal);
}
.btn-light:hover{ background: var(--color-warm-light); }

.btn-ghost-dark{
  background: transparent;
  border-color: rgba(246,244,239,.28);
  color: var(--color-ivory);
}
.btn-ghost-dark:hover{
  border-color: rgba(246,244,239,.65);
  background: rgba(246,244,239,.1);
}

.link-quiet{
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: 1.75rem;
  color: var(--color-bronze);
  font-size: .95rem;
  transition: color var(--transition-fast);
}
.link-quiet:hover{ color: var(--color-bronze-deep); }


/* ---------------------------------------------------------
   5. HEADER & NAVIGATION
   Eigenständiger Block: Logo links, Nav Mitte, CTA rechts.
   Kann unabhängig vom Rest der Seite verändert werden.
--------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-ivory);
  border-bottom: 1px solid var(--color-border);
}

.site-header__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
}

.logo{
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: var(--color-charcoal);
  flex: none;   /* zwischen 1024 und 1150px schrumpfte das Logo sonst auf 0 */
}

.logo__mark{
  display: inline-flex;
  color: var(--color-bronze);
}

.logo__text{
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo__brand{
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--color-charcoal);
}
.logo__brand--white{ color: var(--color-ivory); }

.logo__sub{
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: .55rem;
  letter-spacing: .38em;
  color: var(--color-bronze);
}
.logo__sub--sky{ color: var(--color-bronze-soft); }

/* Original-Logo (assets/img/logo.png) im Header. Die Datei ist freigestellt
   und nur für helle Flächen gedacht – der Footer nutzt darum weiter die
   Schriftzug-Variante oben, bis eine helle Logo-Version vorliegt. */
.logo__img{
  display: block;
  width: auto;
  height: 3.25rem;  /* ab 640px groesser, siehe Breakpoints */
  background: none; /* das Logo ist freigestellt – kein Platzhalter-Ton dahinter */
}

.main-nav{ display: none; }

.main-nav ul{
  display: flex;
  align-items: center;
  gap: 1rem;
}

.main-nav a{
  position: relative;
  display: inline-block;
  padding-block: .5rem;
  font-size: .9rem;
  white-space: nowrap;
  color: var(--color-slate);
  transition: color var(--transition-calm);
}
.main-nav a:hover{ color: var(--color-charcoal); }
.main-nav a.is-active{ color: var(--color-charcoal); }
.main-nav a.is-active::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-bronze);
}

.site-header__actions{
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Mobil steht hier nur die Sprachwahl – sie rueckt neben den
     Menue-Button; ab 1024px greift wieder space-between der Leiste. */
  margin-left: auto;
}
/* Der Erstgespraech-Button erscheint erst auf dem Desktop. */
.site-header__actions .btn{ display: none; }

/* --- Sprachwahl DE | EN ----------------------------------
   Zwei Textlinks, aktive Sprache in Bronze. Steht im Header
   (Desktop und Mobil) und zusaetzlich im mobilen Menue. */
.lang-switch{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
}
.lang-switch a{
  /* grosszuegige Tippflaeche, damit die zwei kurzen Kuerzel
     auch auf dem Handy sicher getroffen werden */
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding-inline: .3rem;
  color: var(--color-slate);
  transition: color var(--transition-fast);
}
.lang-switch a:hover{ color: var(--color-charcoal); }
.lang-switch a.is-active{ color: var(--color-bronze); }
.lang-switch span{ color: var(--color-border); }

.nav-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -.5rem;
  border: 0;
  background: transparent;
  color: var(--color-charcoal);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.mobile-nav{
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 40;
  overflow-y: auto;
  background: var(--color-ivory);
  border-top: 1px solid var(--color-border);
  padding: 1.25rem var(--container-pad);
}
.mobile-nav[hidden]{ display: none; }

.mobile-nav ul{
  border-top: 1px solid var(--color-border);
}
.mobile-nav li{
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav a{
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  font-size: 1.08rem;
  color: var(--color-charcoal);
}
.mobile-nav a.is-active{ color: var(--color-bronze); font-weight: 500; }

.mobile-nav__cta{
  width: 100%;
  margin-top: 1.5rem;
}

.mobile-nav__contact{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: .95rem;
  color: var(--color-slate);
}


/* ---------------------------------------------------------
   6. HERO
--------------------------------------------------------- */
.hero{
  position: relative;
  overflow: hidden;
  background: var(--color-graphite);
  color: var(--color-ivory);
}

.hero__grid{
  position: relative;
  display: grid;
  gap: 3rem;
  align-items: center;
  padding-block: 4rem;
}

.hero__headline{
  margin-top: 1.25rem;
  max-width: 24ch;
  /* Schauzeile: lieber ein langes Wort auf die naechste Zeile als eine
     Trennung mitten im Wort. overflow-wrap bleibt als Notbremse. */
  hyphens: manual;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 4.6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--color-ivory);
}

.hero__text{
  margin-top: 1.25rem;
  max-width: 36rem;
  font-size: var(--fs-lead);
  line-height: 1.625;
  color: var(--color-warm-light);
}

.hero__actions{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 2.25rem;
}

.hero__meta{
  display: grid;
  gap: .625rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(246,244,239,.15);
  font-size: .9rem;
  color: rgba(222,218,209,.80);
}
.hero__meta a{
  color: var(--color-ivory);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero__meta a:hover{ color: var(--color-bronze-soft); }

/* ---------------------------------------------------------
   7. VERTRAUENS-LEISTE
--------------------------------------------------------- */
.trust-bar{
  padding-block: 3rem;
  background: var(--color-stone);
  border-block: 1px solid var(--color-border);
}

.trust-bar__grid{
  display: grid;
  gap: 2rem;
}

.trust-bar__grid h3{
  font-size: 1.1rem;
}

.trust-bar__grid p{
  margin-top: .5rem;
  font-size: .94rem;
  line-height: 1.625;
  color: var(--color-slate);
}


/* ---------------------------------------------------------
   8. LEISTUNGEN
--------------------------------------------------------- */
.services-grid{
  display: grid;
  gap: 2.5rem;
  margin-top: 3rem;
}

.services-grid__subtitle{
  font-size: var(--fs-d3);
}

.check-list{
  display: grid;
  gap: 0;
  margin-top: 1.5rem;
}

.check-list li{
  position: relative;
  padding: .75rem 0 .75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  font-size: .95rem;
  color: var(--color-charcoal);
}
.check-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-bronze-soft);
}

.services-grid__side{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.services-grid__block h3{
  font-size: var(--fs-d3);   /* gleich gross wie "Dienstleistungen" in der linken Spalte */
}
.services-grid__block p{
  margin-top: .5rem;
  font-size: .94rem;
  line-height: 1.625;
  color: var(--color-slate);
}


/* --- Fussnote unter Preisangaben --------------------------- */
.price-grid__note{
  margin-top: 2rem;
  font-size: .85rem;
  color: var(--color-slate-light);
}


/* ---------------------------------------------------------
   9. PROZESS-SCHRITTE
--------------------------------------------------------- */
.steps{
  display: grid;
  gap: 1rem;
  margin-top: 3.5rem;
}

/* Jede Stufe ist ein dunkler Kasten im Hero-Ton */
.steps__item{
  display: flex;
  flex-direction: column;
  padding: 2.25rem 1.25rem;
  background: var(--color-graphite);
  border-radius: var(--radius-card);
  text-align: center;
}

.steps__num{
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .3em;
  text-indent: .3em;        /* gleicht die Laufweite beim Zentrieren aus */
  color: var(--color-bronze-soft);
}

.steps__item h3{
  margin-top: 1rem;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.25;
  color: var(--color-bronze-soft);   /* gleiche Farbe wie die Nummer darueber */
}

.steps__text{
  margin-top: 1rem;
  font-size: .9rem;
  line-height: 1.65;
  /* Keine Silbentrennung: in den kurzen Texten der Ablauf-Kaesten wirkten
     die Trennstriche unruhig. overflow-wrap faengt Ausreisser ab. */
  hyphens: manual;
  overflow-wrap: break-word;
  color: var(--color-warm-light);
}


/* ---------------------------------------------------------
   10. TOOLS-KARTEN
--------------------------------------------------------- */
.tool-grid{
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}

.tool-card{
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: var(--color-graphite);   /* wie die Stufenkaesten im Ablauf */
  transition: border-color var(--transition-fast);
  height: 100%;
}
.tool-card:hover{ border-color: var(--color-bronze-soft); }

.tool-card a{
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
}

.tool-card__icon{ color: var(--color-bronze-soft); flex: none; }

/* Icon und Bezeichnung stehen auf einer Zeile */
.tool-card__head{
  display: flex;
  align-items: center;
  gap: .625rem;
}

.tool-card__kicker{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-bronze-soft);
}

.tool-card p{
  margin-top: 1rem;
  font-size: .9rem;
  line-height: 1.625;
  color: var(--color-warm-light);
}

.tool-card__arrow{
  margin-top: auto;
  padding-top: 1rem;
  color: var(--color-bronze-soft);
}


/* ---------------------------------------------------------
   11. ÜBER UNS
--------------------------------------------------------- */
.about{
  display: grid;
  gap: 3rem;
  align-items: center;
}

.about__image{
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 1 / 1;
}
.about__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__content .lead:first-of-type{ margin-top: 1.25rem; }
.about__content .lead{ color: var(--color-slate); }


/* ---------------------------------------------------------
   12. CTA-SEKTION
--------------------------------------------------------- */
.cta{
  position: relative;
  overflow: hidden;
  background: var(--color-graphite);
  color: var(--color-ivory);
}

.cta__inner{
  max-width: 36rem;
  padding-block: var(--section-pad) 8rem;
}

.cta h2{
  font-size: var(--fs-d2);
  color: var(--color-ivory);
}

.cta p{
  margin-top: 1.25rem;
  font-size: 1.05rem;
  line-height: 1.625;
  color: var(--color-warm-light);
}

.cta__actions{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 2rem;
}


/* ---------------------------------------------------------
   13. FOOTER
--------------------------------------------------------- */
.site-footer{
  background: var(--color-graphite);
  color: var(--color-warm-light);
}

.footer-grid{
  display: grid;
  gap: 2.5rem;
  padding-block: 3.5rem;
}

/* Im Footer steht der Firmenname als Schriftzug, nicht das Logo: die
   Bilddatei ist zu zwei Dritteln dunkler als der Footer-Hintergrund. */
.footer-grid__name{
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.25;
  /* helles Bronze: auf dem dunklen Footer wie die Spaltentitel */
  color: var(--color-bronze-soft);
}
.footer-grid__claim{
  margin-top: .375rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--color-warm-light);
}

.footer-grid__coords{
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: .68rem;
  letter-spacing: .14em;
  color: rgba(184,161,131,.75);
}

.footer-grid__col address,
.footer-list{
  margin-top: 1rem;
  font-size: .875rem;
  line-height: 1.75rem;
}

.footer-grid__col address a,
.footer-list a{
  color: var(--color-ivory);
  text-decoration: underline;
  text-decoration-color: rgba(184,161,131,.45);
  text-underline-offset: 4px;
}
.footer-list a{ text-decoration: none; }
.footer-list a:hover{ color: var(--color-ivory); }
.footer-grid__col address a:hover{ text-decoration-color: var(--color-bronze-soft); }

.footer-list--muted{
  color: rgba(222,218,209,.70);
}
.footer-list--muted span{ font-variant-numeric: tabular-nums; }

.footer-grid__subheading{ margin-top: 1.5rem; display: block; }

.footer-social{
  display: flex;
  gap: .75rem;
  margin-top: 1.5rem;
}
.footer-social a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(246,244,239,.2);
  border-radius: var(--radius-sm);
  color: var(--color-ivory);
  transition: border-color var(--transition-fast);
}
.footer-social a:hover{ border-color: rgba(246,244,239,.55); }

.site-footer__bottom{
  border-top: 1px solid rgba(246,244,239,.1);
}

.site-footer__bottom-inner{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-block: 1.5rem;
  font-size: .75rem;
  color: rgba(222,218,209,.60);
}

.site-footer__bottom-inner ul{
  display: flex;
  gap: 1.5rem;
}
.site-footer__bottom-inner a:hover{ color: var(--color-ivory); }


/* ---------------------------------------------------------
   14. RESPONSIVE ANPASSUNGEN
   Breakpoints angelehnt an gängige Tailwind-Werte:
   sm 640px · md 768px · lg 1024px
--------------------------------------------------------- */

/* Tablet aufwärts */
@media (min-width: 640px){
  :root{ --header-h: 5.5rem; }
  .logo__img{ height: 4rem; }

  .trust-bar__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .hero__actions{ flex-direction: row; }
  .cta__actions{ flex-direction: row; }
}

@media (min-width: 768px){
  .footer-grid{ grid-template-columns: repeat(12, 1fr); }
  .footer-grid__brand{ grid-column: span 4; }
  .footer-grid__col{ grid-column: span 3; }
  .footer-grid__col:nth-of-type(2){ grid-column: span 2; }
}

/* Desktop */
@media (min-width: 1024px){
  .site-header__actions{ margin-left: 0; }
  .site-header__actions .btn{ display: inline-flex; }
  .main-nav{ display: block; }
  .nav-toggle{ display: none; }
  .mobile-nav{ display: none; }
  .hero__grid{ padding-block: 6rem; }
  .services-grid{ grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .services-grid__list{ grid-column: span 7; }
  .services-grid__side{ grid-column: span 5; padding-left: 2rem; border-left: 1px solid var(--color-border); }
  /* Fünf Kästen nebeneinander brauchen Platz – dazwischen drei Spalten */
  .steps{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
}

@media (min-width: 1280px){
  .main-nav ul{ gap: 1.75rem; }
  .steps{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Ab hier gilt: jede Sektion mit der Klasse .section / .section--shell
   kann komplett aus dem HTML entfernt werden, ohne dass andere
   Sektionen ihr Layout verlieren – jede Sektion ist in sich
   abgeschlossen und nutzt keine Nachbar-Selektoren. */


/* =========================================================
   15. UNTERSEITEN-BAUSTEINE
   Zusätzliche Komponenten für Leistungen, Pakete,
   Steuererklärungen, Tools und Über uns. Bauen auf denselben
   Design-Variablen von ganz oben auf.
   ========================================================= */

/* --- Seiten-Header (heller Hero für Unterseiten) ---------- */
.page-hero{
  background: var(--color-ivory);
  border-bottom: 1px solid var(--color-border);
}
.page-hero__inner{
  padding-block: 3.5rem 4rem;
}
.page-hero h1{
  margin-top: 1rem;
  max-width: 42rem;
  font-size: var(--fs-d1);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.page-hero .label,
.page-hero .lead{ max-width: 42rem; }
/* Breiter Titel-Kasten fuer lange Hero-Headlines (z. B. Ueber uns) */
.page-hero--wide h1{ max-width: 52rem; }
.page-hero__actions{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 2rem;
}

/* Kleiner Hinweis unter den Hero-Buttons (z. B. Sprache eines Downloads). */
.page-hero__note{
  margin-top: .875rem;
  font-size: .875rem;
  color: var(--color-slate-light);
}

@media (min-width: 640px){
  .page-hero__actions{ flex-direction: row; }
}
@media (min-width: 1024px){
  .page-hero__inner{ padding-block: 5rem 6rem; }
}

/* --- Mini-Karten (kleine Feature-Liste mit Balken) --------- */
.mini-grid{
  display: grid;
  gap: 2rem 2.5rem;
  margin-top: 2.5rem;
}
.mini-card__bar{
  width: 2rem;
  height: 3px;
  background: var(--color-bronze-soft);
}
.mini-card h3{
  margin-top: 1rem;
  font-size: 1.05rem;
}
.mini-card p{
  margin-top: .5rem;
  font-size: .93rem;
  line-height: 1.625;
  color: var(--color-slate);
}

@media (min-width: 640px){ .mini-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px){ .mini-grid.mini-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px){ .mini-grid:not(.mini-grid--4){ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Zweispaltiger Listenblock (Aufbau / Netzwerk) --------- */
.split-lists{
  display: grid;
  gap: 3rem;
}
.split-lists h2{ font-size: var(--fs-d3); }
.split-lists > div > p.split-lists__intro{
  margin-top: 1rem;
  font-size: .98rem;
  line-height: 1.625;
  color: var(--color-slate);
}
.divided-list{
  margin-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}
.divided-list li{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  padding-block: .75rem;
  border-bottom: 1px solid var(--color-border);
}
.divided-list li .name{
  font-size: .95rem;
  font-weight: 500;
  color: var(--color-charcoal);
}
.divided-list li .desc{
  font-size: .88rem;
  color: var(--color-slate);
}

@media (min-width: 1024px){ .split-lists{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }

/* --- Hervorhebungsbox mit CTA ------------------------------ */
.highlight-box{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 2rem;
}
.highlight-box h2{ font-size: var(--fs-d3); }
.highlight-box p{
  margin-top: .75rem;
  max-width: 36rem;
  font-size: .98rem;
  line-height: 1.625;
  color: var(--color-slate);
}
.highlight-box__actions{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex-shrink: 0;
}

/* Erst ab 768px nebeneinander – bei 640px lief der Button sonst
   neun Pixel ueber den rechten Rand hinaus. */
@media (min-width: 768px){
  .highlight-box{ flex-direction: row; flex-wrap: wrap; align-items: center; padding: 2.5rem; }
  .highlight-box__actions{ flex-direction: row; }
}

/* --- Preis-Detailkarten (Steuererklärungen / Tools) --------- */
.price-detail-grid{
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
  /* Jede Karte waechst beim Aufklappen fuer sich, nicht die ganze Zeile */
  align-items: start;
}
.price-detail-card{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-ivory);
  padding: 1.5rem;
  transition: border-color var(--transition-calm), box-shadow var(--transition-calm);
}
.price-detail-card:hover,
.price-detail-card:focus-within{
  border-color: var(--color-bronze-soft);
  box-shadow: var(--shadow-card);
}
.price-detail-card:focus{ outline: none; }   /* Fokus zeigt sich durch Rahmen und Inhalt */
.price-detail-card h3{ font-size: 1.05rem; }
.price-detail-card__price{
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-bronze);
}
/* "ab" bleibt klein, damit der Betrag die Zeile traegt */
.price-detail-card__from{
  font-family: var(--font-sans);
  font-size: .85rem;
  letter-spacing: .02em;
  color: var(--color-slate-light);
}
.price-detail-card__period{
  margin-top: .375rem;
  font-size: .8rem;
  color: var(--color-slate-light);
}
.price-detail-card__desc{
  margin-top: 1rem;
  font-size: .92rem;
  line-height: 1.625;
  color: var(--color-slate);
}
.price-detail-card__docs{
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.price-detail-card__docs p{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-slate-light);
}
.price-detail-card__docs ul{
  margin-top: .5rem;
  display: grid;
  gap: .25rem;
}
.price-detail-card__docs li{
  font-size: .85rem;
  line-height: 1.375;
  color: var(--color-slate);
}
.price-detail-card__link{
  display: flex;
  align-items: center;
  gap: .375rem;
  padding-top: 1.25rem;
  font-size: .9rem;
  color: var(--color-bronze);
}

/* Hinweis, dass hinter der Karte mehr steckt */
.price-detail-card__hint{
  margin-top: 1rem;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-bronze);
}

/* Aufklappender Teil: 0fr -> 1fr animiert die Hoehe, ohne sie fest zu
   setzen. :focus-within sorgt dafuer, dass die Karte auch per Tastatur
   und auf Touch-Geraeten (Antippen setzt den Fokus, siehe tabindex="0"
   im HTML) aufgeht – dort gibt es kein Hover. */
.price-detail-card__more{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-calm);
}
.price-detail-card__more > div{ overflow: hidden; }
.price-detail-card:hover .price-detail-card__more,
.price-detail-card:focus-within .price-detail-card__more{ grid-template-rows: 1fr; }
.price-detail-card:hover .price-detail-card__hint,
.price-detail-card:focus-within .price-detail-card__hint{ display: none; }

@media (min-width: 640px){ .price-detail-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Spaltenzahl folgt der Anzahl Preiskarten – seit 13.11.2026 sind es drei
   (Privatpersonen, Paar/Ehepaar, Selbstständige). Kommt eine Karte dazu
   oder fällt eine weg, diese Zahl mitändern. */
@media (min-width: 1024px){ .price-detail-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Nummerierte Prozess-Liste (horizontale Zeilen) --------- */
.process-list{ margin-top: 0; }
/* Nummer, Titel und Text im selben Format wie die Partnerleistungen
   auf leistungen.html (.label / .service-list__name / __desc). */
.process-list li{
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: .85rem;
  border-bottom: 1px solid var(--color-border);
}
.process-list li:last-child{ border-bottom: 0; }
.process-list .num{
  flex: none;
  min-width: 1.75rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--color-bronze);
  font-variant-numeric: tabular-nums;
}
.process-list h3{
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-charcoal);
}
.process-list p{
  margin-top: .25rem;
  font-size: .9rem;
  line-height: 1.625;
  color: var(--color-slate);
}

/* --- App-Showcase (derzeit ungenutzt) --------------------------- */
.app-showcase{
  display: grid;
  gap: 3rem;
  align-items: center;
  margin-top: 3rem;
}
.app-showcase__text{ font-size: 1rem; line-height: 1.625; color: var(--color-slate); }
.app-showcase__steps{
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
.app-showcase__steps h3{ margin-top: .75rem; font-size: 1.05rem; }
.app-showcase__steps p{ margin-top: .375rem; font-size: .92rem; line-height: 1.625; color: var(--color-slate); }
.app-showcase__num{
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--color-bronze);
}
.app-showcase__icon-row{
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--color-bronze);
}
.app-showcase__actions{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 2.25rem;
}
.app-showcase__mock{
  position: relative;
  max-width: 280px;
  margin-inline: auto;
}
.app-showcase__mock-decor{
  position: absolute;
  left: -1.25rem;
  top: -1.25rem;
  width: 6rem;
  height: 6rem;
  border-radius: 6px;
  background: var(--color-bronze-pale);
  z-index: 0;
}
.app-showcase__mock img{
  position: relative;
  z-index: 1;
  border-radius: var(--radius-card);
}

@media (min-width: 640px){ .app-showcase__steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px){
  .app-showcase{ grid-template-columns: repeat(12, 1fr); }
  .app-showcase__main{ grid-column: span 7; order: 1; }
  .app-showcase__mock{ grid-column: span 5; order: 2; }
}

/* --- FAQ-Akkordeon ------------------------------------------- */
.faq-grid{
  display: grid;
  gap: 0 3.5rem;
  margin-top: 2.5rem;
}
.faq-col{ border-top: 1px solid var(--color-border); }
.faq-item{ border-bottom: 1px solid var(--color-border); }
.faq-item summary{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
  font-size: 1rem;
  color: var(--color-charcoal);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary .icon-plus{
  flex-shrink: 0;
  margin-top: .125rem;
  color: var(--color-bronze);
  transition: transform var(--transition-calm);
}
.faq-item[open] summary .icon-plus{ transform: rotate(45deg); }
.faq-item p{
  padding-bottom: 1.25rem;
  padding-right: 2.5rem;
  font-size: .94rem;
  line-height: 1.625;
  color: var(--color-slate);
}

@media (min-width: 1024px){ .faq-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Drei Preiskarten nebeneinander, sobald der Platz reicht */
@media (min-width: 1024px){ .tool-grid:has(> :nth-child(3)){ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Checkliste (mehrspaltig mit Checkbox-Icon) -------------- */
.checklist-grid{
  display: grid;
  gap: 2rem 2.5rem;
  margin-top: 2.5rem;
}
.checklist-group h3{ font-size: 1.05rem; }
.checklist-group ul{ margin-top: 1rem; display: grid; gap: .5rem; }
.checklist-group li{
  display: flex;
  gap: .75rem;
  font-size: .93rem;
  line-height: 1.375;
  color: var(--color-slate);
}
.checklist-group li::before{
  content: "";
  flex-shrink: 0;
  width: .875rem;
  height: .875rem;
  margin-top: .1875rem;
  border: 1px solid var(--color-bronze);
  border-radius: 2px;
}
.checklist-actions{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 2.5rem;
}

@media (min-width: 640px){ .checklist-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px){ .checklist-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px){ .checklist-actions{ flex-direction: row; } }

/* --- Team-Karten (Über uns) -------------------------------- */
.team-grid{
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}
.team-card{
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-ivory);
  padding: 1.5rem;
}
.team-card__head{ display: flex; align-items: flex-start; gap: 1.25rem; }
.team-card__photo{
  flex-shrink: 0;
  width: 5rem;
  height: 6rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-stone);
}
.team-card__photo img{ width: 100%; height: 100%; object-fit: cover; }
.team-card__name{ font-size: 1.2rem; }
.team-card__role{ margin-top: .25rem; font-size: .85rem; color: var(--color-bronze); }
.team-card__edu{ margin-top: .75rem; font-size: .85rem; line-height: 1.625; color: var(--color-slate); }
.team-card blockquote{
  margin: 1.5rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--color-bronze-soft);
  font-size: .98rem;
  line-height: 1.625;
  color: var(--color-charcoal);
}

@media (min-width: 640px){ .team-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Info-Spalten (Standort / Kontakt / Öffnungszeiten) ------ */
.info-grid{
  display: grid;
  gap: 2.5rem;
}
.info-grid address,
.info-grid p.info-text{
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 2rem;
  color: var(--color-charcoal);
}
.info-grid dl{ margin-top: 1rem; display: grid; gap: .5rem; }
.info-grid dt{ font-size: 1rem; color: var(--color-slate); }
.info-grid dd{ margin: 0; font-size: 1rem; color: var(--color-charcoal); }

@media (min-width: 640px){ .info-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px){ .info-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Kontaktformular (kontakt.html) ---------------------------- */
.contact-layout{ display: grid; gap: 3rem; }
.contact-form{ display: grid; gap: 1.25rem; }
.contact-form__row{ display: grid; gap: 1.25rem; }
.contact-form__field{ display: grid; gap: .4rem; }
.contact-form__field span{ font-size: var(--fs-label); font-weight: 500; color: var(--color-charcoal); }
.contact-form input,
.contact-form select,
.contact-form textarea{
  width: 100%; padding: .8rem 1rem; font: inherit; font-size: 1rem; color: var(--color-charcoal);
  background: var(--color-ivory); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{ outline: none; border-color: var(--color-bronze); box-shadow: 0 0 0 3px var(--color-bronze-pale); }
.contact-form textarea{ resize: vertical; min-height: 9rem; }
.contact-form__note{ font-size: .9rem; color: var(--color-slate); }
.contact-form__error{ font-size: .95rem; color: #b42318; }
.contact-form .btn{ justify-self: start; }
.info-grid--stack{ grid-template-columns: 1fr; align-content: start; }
@media (min-width: 640px){ .contact-form__row{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){
  .contact-layout{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .info-grid--stack{ grid-template-columns: 1fr; }
}

/* --- Rechtliche Seiten (Impressum / Datenschutz) ---------------- */
.legal{ max-width: 46rem; }
.legal h2{ font-family: var(--font-display); font-size: var(--fs-d3); color: var(--color-charcoal); margin: 2.5rem 0 .75rem; }
.legal h2:first-child{ margin-top: 0; }
/* Zwischenueberschriften der Rechtsseiten laufen in Inter, nicht in der
   Serife: Gewicht 600 gibt es bei Cormorant Garamond nicht, der Browser
   rechnete sich daraus ein kuenstliches Fett. Die font-family muss hier
   stehen, sonst erbt h3 die Serife aus der globalen Ueberschriften-Regel. */
.legal h3{ font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--color-charcoal); margin: 1.5rem 0 .4rem; }
.legal p, .legal address{ font-style: normal; line-height: 1.7; color: var(--color-slate); margin: 0 0 1rem; }
.legal a{ color: var(--color-bronze); }
.legal__todo{ background: var(--color-bronze-pale); padding: 0 .3em; border-radius: 3px; }
.legal__meta{ margin-top: 2.5rem; font-size: .85rem; color: var(--color-slate-light); }

/* ---------------------------------------------------------
   16. HONORARRECHNER (Seite honorarrechner.html)
   Formular links, mitlaufende Kalkulation rechts. Nutzt die
   Feld-Styles von .contact-form weiter.
--------------------------------------------------------- */
.fee-layout{
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.fee-form{
  display: grid;
  gap: 2.5rem;
}

.fee-block{
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  padding-top: 1.75rem;
}
.fee-block:first-child{ border-top: 0; padding-top: 0; }

.fee-block__title{
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--color-bronze);
}

.fee-block__note{
  margin-top: .75rem;
  font-size: .95rem;
  color: var(--color-slate);
}

.fee-grid-2{
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

/* Enthaltene Leistungen: reine Auflistung, nicht wählbar */
.fee-list{
  margin-top: 1.25rem;
  display: grid;
  gap: .1rem;
}
.fee-list li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 1rem;
  color: var(--color-charcoal);
}
/* Wählbare Zusatzleistungen */
.fee-options{
  margin-top: 1.25rem;
  display: grid;
  gap: .1rem;
}
.fee-options label{
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 1rem;
  color: var(--color-charcoal);
  cursor: pointer;
}
.fee-options label > span:first-of-type{ flex: 1; }
.fee-options input[type="checkbox"]{
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--color-graphite);
  cursor: pointer;
}
.fee-options label:hover{ color: var(--color-bronze); }

/* Ergebnisblock */
.fee-summary__inner{
  padding: 1.75rem;
  background: var(--color-stone);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.fee-summary__title{
  font-size: var(--fs-d3);
  letter-spacing: -.01em;
}

.fee-summary__total{ margin-top: 1.75rem; }

.fee-summary__amount{
  margin-top: .5rem;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--color-charcoal);
}

.fee-summary__month{
  margin-top: .4rem;
  font-size: .95rem;
  color: var(--color-slate);
}
.fee-summary__month span{ font-variant-numeric: tabular-nums; }

.fee-summary__cta{
  width: 100%;
  margin-top: 1.75rem;
}

.fee-summary__note{
  margin-top: 1rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--color-slate);
}

@media (min-width: 640px){
  .fee-grid-2{ grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
}

@media (min-width: 1024px){
  .fee-layout{ grid-template-columns: minmax(0,1fr) 22rem; gap: 4rem; }
  .fee-summary__inner{ position: sticky; top: 7rem; }
}

/* ---------------------------------------------------------
   17. LEISTUNGSBEREICHE (Seite leistungen.html)
   Pro Bereich: Einleitung links, Untergruppen mit ihren
   Dienstleistungslisten rechts.
--------------------------------------------------------- */
.service-area__inner{
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.service-area__intro .lead{ max-width: 32rem; }

.service-groups{
  display: grid;
  gap: 3rem;
}

.service-group__bar{
  width: 2rem;
  height: 3px;
  background: var(--color-bronze);
}

.service-group__title{
  margin-top: 1.25rem;
  font-size: 1.5rem;
  letter-spacing: -.01em;
}

.service-group__note{
  margin-top: .5rem;
  font-size: .95rem;
  color: var(--color-slate);
}

.service-list{
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.service-list li{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  padding-block: .85rem;
  border-bottom: 1px solid var(--color-border);
}
.service-list__name{
  font-size: 1rem;
  color: var(--color-charcoal);
}
.service-list__desc{
  font-size: .9rem;
  color: var(--color-slate);
}

/* Hauptüberschrift bleibt deutlich grösser als die Subüberschriften */
.service-area__intro .section-title{ font-size: clamp(2rem, 3vw, 2.75rem); }

@media (min-width: 1024px){
  .service-area__inner{
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: 5rem;
  }
}

/* ---------------------------------------------------------
   18. WERTE-KARTEN (Seite ueber-uns.html)
   Dunkle Kaesten wie die Ablaufstufen. Auf Geraeten mit Maus
   klappt der Zusatztext beim Darueberfahren auf; wo es keinen
   Hover gibt (Touch), steht er dauerhaft da.
--------------------------------------------------------- */
.values{
  display: grid;
  gap: 1rem;
  margin-top: 3.5rem;
}

.values__card{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.25rem 1.25rem;
  background: var(--color-graphite);
  border-radius: var(--radius-card);
  text-align: center;
}

.values__icon{
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
  background: none;   /* der globale Platzhalter-Ton wuerde sonst durchscheinen */
}

.values__title{
  margin-top: 1.25rem;
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.25;
  color: var(--color-bronze-soft);
}

.values__detail p{
  margin-top: 1rem;
  font-size: .9rem;
  line-height: 1.65;
  hyphens: manual;      /* wie bei den Ablauf-Kaesten: keine Trennstriche */
  overflow-wrap: break-word;
  color: var(--color-warm-light);
}

@media (hover: hover){
  /* 0fr -> 1fr animiert die Hoehe, ohne sie fest zu setzen */
  .values__detail{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-calm);
  }
  .values__detail > p{ overflow: hidden; }
  .values__card:hover .values__detail,
  .values__card:focus-within .values__detail{ grid-template-rows: 1fr; }
}

@media (min-width: 640px){
  .values{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px){
  .values{ grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

@media (min-width: 1280px){
  .values{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}