/* MASOON TREUHAND V2 | einzige zentrale Designquelle */

@font-face {
  font-family:Inter;
  src:url("inter.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:block;
}

@font-face {
  font-family:Cormorant;
  src:url("cormorant.woff2") format("woff2");
  font-style:normal;
  font-weight:300 700;
  font-display:block;
}

/* =========================================================
   GLOBALE DESIGNWERTE
   ========================================================= */
:root {
  --black: #000000;
  --ink: #171715;
  --text: #484a4f;
  --white: #ffffff;
  --brand-gradient-1: #f3e8d4;
  --brand-gradient-2: #e8e5df;
  --brand-gradient-3: #c7cbd3;
  --brand-gradient-4: #8d96a8;
  --brand-gradient: linear-gradient(110deg,var(--brand-gradient-1) 0%,var(--brand-gradient-2) 38%,var(--brand-gradient-3) 66%,var(--brand-gradient-4) 100%);

  /* FLIESSTEXTE: Schrift, Farbe und Abstände
     Beispiel: "Bitte füllen Sie das Kontaktformular aus." */
  --font-body: "Inter", Arial, sans-serif;
  --body-size: 14px;
  --body-weight: 300;
  --body-line: 1.75;
  --body-spacing: 12px;

  /* KOPFZEILE UND NORMALE LINKS:
     z. B. Startseite, Unternehmen, Alle Beiträge ansehen, Beitrag anzeigen, Kontakt aufnehmen */
  --label-size: 14px;
  --label-spacing: 0;

  /* BEREICHSTITEL UND GROSSGESCHRIEBENE BEGRIFFE:
     z. B. FACHWISSEN, KONTAKT, BUCHHALTUNG, PERSONAL, STEUERN, BERATUNG */
  --uppercase-label-size: 11.5px;
  --uppercase-label-spacing: .10em;

  /* GEMEINSAME UI-WERTE:
     gelten für Kopfzeile, normale Links, Bereichstitel und grossgeschriebene Begriffe */
  --label-weight: 400;
  --label-line: 1.75;
  --label-color: #70737a;
  --small-title-bottom-space: 7px;
  --button-padding:15px 21px;

  /* GROSSE TITEL: Schrift und Abstand unten
     Beispiel: "Wir stehen Ihnen gerne zur Verfügung." / "Treuhandlösungen für Ihren Geschäftsalltag." */
  --font-heading: "Cormorant", Georgia, serif;
  --title-size: 58px;
  --title-weight: 700;
  --title-line: 1.08;
  --title-spacing: -0.018em;
  --title-bottom-space: 0px;
  --title-body-space: 30px;
  --title-wrap-width: 580px;

  /* ZWISCHENTITEL: Schrift und globale Abstände
     Beispiel: "Buchhaltung" / "Checkliste für die Steuererklärung" */
  --subtitle-size: 28px;
  --subtitle-weight: 700;
  --subtitle-line: 1.12;
  --subtitle-spacing: 0;
  --subtitle-top-space: 48px;
  --subtitle-bottom-space: 14px;

  /* HERO-TITEL GROSS: "Treuhand mit Struktur und Anspruch."
     Schriftgrösse, Zeilenhöhe und Laufweite des grossen Startseiten-Titels */
  --hero-title-size: clamp(52px, 4.8vw, 80px);
  --hero-title-line: .96;
  --hero-title-spacing: 0;
  --hero-title-bottom-space: 24px;

  /* KARTEN: gemeinsame Gestaltung für Dienstleistungen und Fachwissen */
  --card-top-space: 26px;
  --card-inline-space: 0px;
  --card-bottom-space: var(--card-top-space);
  --card-label-title-space: 31px;
  --card-meta-size: 11px;
  --card-meta-weight: 400;
  --card-meta-line: 1.5;
  --card-meta-spacing: .05em;
  --card-meta-color: #696969;
  --card-line-color: #d6d6d6;

  /* SEITENLAYOUT: Breite, Rand und globale Abstände */
  --content-width: 1280px;
  --page-gutter: clamp(34px,7.2vw,115px);
  --page-gutter-mobile: 24px;
  --section-space: 126px;
  --section-space-compact: 100px;
  --section-space-mobile: 50px;
  --page-bottom-space: 100px;
  --header-height: 122px;
  --secondary-column-start: calc(33.333333% + 15.333px);
  --content-table-line: #d7d5d1;
  --article-table-min-width: 1020px;
}

/* =========================================================
   WEBSITE: GRUNDLAGEN
   ========================================================= */

/* BOXEN */
*,*::before,*::after { box-sizing: border-box; }

/* HTML */
html { margin: 0; padding: 0; scroll-behavior: smooth; }

/* WEBSITE: Hintergrund und Grundschrift */
body {
  position:relative;
  margin:0;
  min-width:320px;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  color:var(--text);
  background-color:var(--white);
  background-image:url("images/backgrounds/background-2.png");
  background-size:100% auto;
  background-position:80% 3%;
  background-repeat:repeat-y;
  background-attachment:fixed;
  font-family:var(--font-body);
  font-size:var(--body-size);
  font-weight:var(--body-weight);
  line-height:var(--body-line);
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,picture,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }

/* GLOBALE AUSWAHLSPERRE: Inhalte nicht markieren, Formulare bleiben bedienbar */
body,
body * {
  -webkit-user-select:none;
  user-select:none;
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select:text;
  user-select:text;
}

main {
  flex:1 0 auto;
  padding-bottom:var(--page-bottom-space);
}

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

/* ABSCHNITTE: globale Abstände */
.section { padding:var(--section-space) 0 var(--section-space-compact); }
main > section:last-child { padding-bottom:0; }
.section-compact-top { padding-top:var(--section-space); }
.section-compact-bottom { padding-bottom:var(--section-space-compact); }

/* =========================================================
   KOPFZEILE
   ========================================================= */
.site-header {
  position:relative;
  z-index:1000;
  height:var(--header-height);
  color:var(--white);
  background:#1a1a1a;
}

.header-inner {
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
}

.site-brand {
  height:var(--header-height);
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

/* LOGO: MASOON TREUHAND Schriftzug */
.site-brand__text {
  display:inline-flex;
  align-items:center;
  width:var(--header-brand-width,auto);
  height:var(--header-brand-height,auto);
  white-space:nowrap;
  font-family:var(--font-heading);
  font-size:var(--header-brand-font-size,22px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:.020em;
  color:var(--white);
  background-image:var(--header-brand-image,none);
  background-size:contain;
  background-position:left center;
  background-repeat:no-repeat;
  transform:translateY(var(--header-logo-offset-y,2px));
}

.mobile-nav-toggle {
  display:none;
}

/* KOPFZEILE: Navigation, Position und Schriftwerte */
.site-nav {
  position:absolute;
  left:var(--secondary-column-start);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:34px;
  font-family:var(--font-body);
  font-size:var(--label-size);
  font-weight:var(--label-weight);
  line-height:var(--label-line);
  letter-spacing:var(--label-spacing);
}

.site-nav a {
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:-8px;
  padding:15px 0;
  text-transform:none;
  border:0;
  background-color:transparent;
  background-image:linear-gradient(#8d96a8,#8d96a8);
  background-repeat:no-repeat;
  background-position:left calc(100% - 3px);
  background-size:0 2px;
  transition:color 260ms ease,background-size .4s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  background-size:40px 2px;
}

@media (min-width:801px) and (max-width:1050px) {
  .site-nav { gap:20px; }
}


/* =========================================================
   BILDER: GEMEINSAME SCHWARZWEISSDARSTELLUNG
   Gilt für Hero Foto und Unternehmensfoto. Die Bücherabdunkelung bleibt im Hero.
   ========================================================= */
.photo-grayscale img {
  filter:grayscale(1);
  pointer-events:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

/* =========================================================
   SCHRIFTEN UND WIEDERVERWENDBARE ELEMENTE
   ========================================================= */

/* FLIESSTEXT: global
   Beispiel: "Bitte füllen Sie das Kontaktformular aus." / "Ordnungsgemässe Führung der Finanzbuchhaltung..." */
p,
.body-copy,
.content-card .article-table-wrap td,
.content-card .article-text-table td {
  margin:0;
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--body-size);
  font-weight:var(--body-weight);
  line-height:var(--body-line);
  letter-spacing:0;
}

/* FLIESSTEXT: Abstand zwischen aufeinanderfolgenden Absätzen
   Beispiel: mehrere Fliesstext Absätze direkt untereinander */
p + p,
.body-copy + .body-copy { margin-top:var(--body-spacing); }

/* GROSSE TITEL: global
   Beispiel: "Wir stehen Ihnen gerne zur Verfügung." / "Treuhandlösungen für Ihren Geschäftsalltag." */
.page-title,.section-title {
  max-width:var(--title-wrap-width);
  margin:0 0 var(--title-bottom-space);
  color:var(--ink);
  font-family:var(--font-heading);
  font-size:var(--title-size);
  font-weight:var(--title-weight);
  line-height:var(--title-line);
  letter-spacing:var(--title-spacing);
}

/* GROSSE TITEL: globaler Abstand zum Fliesstext
   Beispiel: Abstand von "Wir stehen Ihnen gerne zur Verfügung." zu "Bitte füllen Sie das Kontaktformular aus." */
.page-title + p,
.page-title + .body-copy,
.section-title + p,
.section-title + .body-copy { margin-top:var(--title-body-space); }

/* ZWISCHENTITEL: global
   Beispiel: "Buchhaltung" / "Checkliste für die Steuererklärung" */
.subtitle,
.service-card h3,
.knowledge-card h3 {
  margin:0;
  padding:0;
  color:var(--ink);
  font-family:var(--font-heading);
  font-size:var(--subtitle-size);
  font-weight:var(--subtitle-weight);
  line-height:var(--subtitle-line);
  letter-spacing:var(--subtitle-spacing);
  background:none;
  text-decoration-color:transparent;
  transition:text-decoration-color .6s ease;
}

/* Beispiel: «Checkliste für die Steuererklärung» */
.knowledge-card:hover h3,
.knowledge-card:focus-visible h3 {
  text-decoration-line:underline;
  text-decoration-color:currentColor;
  text-decoration-thickness:1px;
  text-underline-offset:6px;
}

/* ZWISCHENTITEL: globaler Abstand zum Fliesstext
   Beispiel: Abstand von "Buchhaltung" zum Text "Ordnungsgemässe Führung der Finanzbuchhaltung..." */
.service-card h3 + p,
.knowledge-card h3 + p,
.subtitle + p,
.subtitle + .body-copy { margin-top:var(--subtitle-bottom-space); }

/* ZWISCHENTITEL: globaler Abstand vom Fliesstext
   Beispiel: Abstand eines Fliesstexts zum folgenden Zwischentitel */
p + .subtitle,
.body-copy + .subtitle,
ul + .subtitle { margin-top:var(--subtitle-top-space); }

/* AUFZÄHLUNGEN: globale Bindestriche in Dienstleistungen und Inhaltskarten */
.service-detail__list,
.content-card ul {
  padding:0;
  list-style:none;
}

.service-detail__list li,
.content-card li {
  position:relative;
  padding-left:16px;
}

.service-detail__list li::before,
.content-card li::before {
  content:"–";
  position:absolute;
  left:0;
}

.service-detail__list li + li {
  margin-top:2px;
}

.content-card li + li {
  margin-top:5px;
}

/* FACHBEITRÄGE: gestapelte Listen mit Titel und Detailtext darunter */
.page-article-stacked-list .content-card li {
  padding-left:16px;
}

.page-article-stacked-list .content-card li::before {
  left:0;
}

.page-article-stacked-list .content-card li + li {
  margin-top:10px;
}

.page-article-stacked-list .content-card .item-label {
  display:block;
  margin-left:0;
  margin-bottom:1px;
}

.page-article-stacked-list .content-card .item-separator {
  display:none;
}

/* GANZ GROSSER HERO-TITEL: global
   Beispiel: "Treuhand mit Struktur und Anspruch." */
.home-hero__title {
  max-width:720px;
  margin:0;
  color:var(--ink);
  font-family:var(--font-heading);
  font-size:var(--hero-title-size);
  font-weight:var(--title-weight);
  line-height:var(--hero-title-line);
  letter-spacing:var(--hero-title-spacing);
}

/* HERO-TITEL: Abstand zum Fliesstext darunter
   Beispiel: Abstand von "Treuhand mit Struktur und Anspruch." zu "Auf der Basis von Diskretion..." */
.home-hero__title + .home-hero__copy { margin-top:var(--hero-title-bottom-space); }

/* GEMEINSAME SCHRIFT: Kopfzeile, Bereichstitel und Textlinks */
.contact-label,
.small-title,
.home-hero__actions,
.service-detail__toggle,
.section-label,
.action,
.article-back {
  font-family:var(--font-body);
  font-weight:var(--label-weight);
  line-height:var(--label-line);
}

/* GEMEINSAME TEXTFARBE: Die dunkle Kopfzeile bleibt weiss. */
.contact-label,
.small-title,
.home-hero__actions,
.service-detail__toggle,
.section-label,
.action,
.article-back {
  color:var(--label-color);
}

.action,
.article-back,
.service-detail__toggle {
  font-size:var(--label-size);
  letter-spacing:var(--label-spacing);
}

.article-back {
  display:inline-flex;
  align-items:center;
  gap:var(--article-back-gap,14px);
  margin-bottom:30px;
  transform:translateY(-5px);
}

.contact-label,
.small-title,
.home-hero__actions,
.section-label {
  font-size:var(--uppercase-label-size);
  letter-spacing:var(--uppercase-label-spacing);
}

/* KLEINER TITEL: Spezialfall mit kleinem Abstand zum Fliesstext
   Beispiel: "ADRESSE" zu "MASOON TREUHAND" / "TELEFON" zu "+41 79 966 36 36" */
.small-title + p,
.small-title + .body-copy { margin-top:var(--small-title-bottom-space); }

/* BEREICHSTITEL: Anordnung */
.section-label {
  display:flex;
  align-items:center;
  align-self:start;
  gap:14px;
  margin:0 0 30px;
  text-transform:uppercase;
  transition:color 260ms ease;
}

/* BLOGBEITRÄGE: Zurückpfeil */
.article-back__mark {
  display:inline-block;
  font-size:var(--article-back-mark-size,20px);
  font-weight:300;
  line-height:.7;
  letter-spacing:0;
  transform:none;
}

/* BLOGBEITRÄGE: unterer Zurücklink nach dem Fazit */
.content-card .article-back {
  margin:var(--subtitle-top-space) 0 0;
}

/* TEXTLINKS UND SCHALTFLÄCHEN: gemeinsame Abstände und untere Linie
   Beispiel: "Kontakt aufnehmen", "Alle Beiträge ansehen", "Mehr anzeigen" */
.action,
.service-detail__toggle {
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:var(--action-margin-bottom,-8px);
  padding:var(--action-padding,15px 0);
  text-transform:none;
  border:0;
  background-color:transparent;
  background-image:var(--action-line,linear-gradient(#8d96a8,#8d96a8));
  background-repeat:no-repeat;
  background-position:left calc(100% - 3px);
  background-size:0 2px;
  transition:color 260ms ease,background-size .4s ease;
}

/* ZEICHEN BEI TEXTLINKS UND SCHALTFLÄCHEN
   Pfeil bei Textlinks, Plus bei "Mehr anzeigen". */
.action::after,
.service-detail__toggle::after {
  content:var(--action-symbol,"\2197\FE0E");
  font-family:var(--action-symbol-font,Arial,sans-serif);
  font-size:var(--action-symbol-size,1.2em);
  font-weight:var(--action-symbol-weight,500);
  line-height:1;
  letter-spacing:0;
  text-transform:none;
  position:relative;
  top:var(--action-symbol-top,0px);
}

.article-back:hover,
.article-back:focus-visible,
.service-detail__toggle:hover,
.service-detail__toggle:focus-visible,
.service-detail__toggle[aria-expanded="true"] {
  color:var(--black);
}

.action:hover,
.action:focus-visible {
  background-size:40px 2px;
}

/* =========================================================
   KACHELN: GLOBAL
   Dienstleistungsraster und Karten werden auf allen Seiten gemeinsam verwendet.
   ========================================================= */
.service-grid,
.knowledge-grid {
  margin-top:var(--card-grid-top,58px);
  display:grid;
  grid-template-columns:var(--card-grid-columns,repeat(3,minmax(0,1fr)));
  column-gap:var(--card-column-gap,46px);
  row-gap:var(--card-row-gap,30px);
}

.knowledge-grid > div {
  display:flex;
  flex-direction:column;
}

.knowledge-grid > div > .knowledge-card {
  flex:1;
}

.knowledge-grid > div > .action {
  margin-top:var(--card-top-space);
}

@media (min-width:801px) and (max-width:1050px) {
  .service-grid,
  .knowledge-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* KARTEN: gemeinsame Basis für Dienstleistungen und Fachwissen */
.service-card,
.knowledge-card {
  display:flex;
  flex-direction:column;
  padding:var(--card-top-space) var(--card-inline-space) var(--card-bottom-space) 0;
  border-top:1px solid var(--card-line-color);
}

/* KARTEN: gemeinsame kleine Kennzeichnung oberhalb des Titels */
.service-card__number,
.knowledge-card__date {
  display:block;
  margin:0 0 var(--card-label-title-space);
  transform:translateY(var(--service-number-offset,0));
  color:var(--card-meta-color);
  font-family:var(--font-body);
  font-size:var(--card-meta-size);
  font-weight:var(--card-meta-weight);
  line-height:var(--card-meta-line);
  letter-spacing:var(--card-meta-spacing);
}

.knowledge-card__date {
  text-transform:uppercase;
}


/* =========================================================
   ABSCHLUSSKASTEN / KONTAKT
   ========================================================= */
.closing-card-section {
  padding-top:0;
  margin-bottom:calc(-1 * var(--page-bottom-space));
  background:var(--closing-background,#1a1a1a);
}

.closing-card {
  --ink:var(--closing-ink,var(--white));
  height:490px;
  padding:126px 0 100px;
  display:grid;
  grid-template-columns:var(--secondary-column-start) minmax(0,1fr);
  align-items:start;
  gap:0;
  color:var(--closing-ink,var(--white));
  border:0;
}

.closing-card > .section-label {
  margin-bottom:0;
  color:var(--closing-label-color,#bbbbbb);
}

.closing-card__content {
  --text:var(--closing-text-color,var(--white));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.closing-card .action {
  margin-top:26px;
  color:var(--closing-ink,var(--white));
}

/* =========================================================
   KÄSTEN: Inhaltsseiten, Disclaimer, Impressum, Datenschutz
   ========================================================= */
.legal-section { padding-top:var(--section-space); }

.content-card {
  padding:0;
}

.content-card > header {
  margin:0 0 var(--subtitle-top-space);
  padding-bottom:var(--subtitle-top-space);
  border-bottom:1px solid #d6d6d6;
}

.content-card > header > p {
  margin-left:0;
}

.content-card > div {
  width:auto;
  margin-left:242px;
}

.content-card .page-title {
  max-width:none;
}

/* INHALTSKARTEN: gemeinsame Trennzeichen und Tabellen für alle Fachbeiträge */
.content-card .item-separator,
.content-card .heading-separator {
  display:inline-block;
  width:0;
  height:14px;
  margin:0 7px;
  border-left:1px solid var(--content-table-line);
  font-size:0;
  line-height:0;
  vertical-align:middle;
}

/* ARBEITSRECHT: rahmenlose Texttabellen mit linksbündigen Spalten */
body.page-article-employment-termination .content-card .article-text-table {
  width:auto;
  margin:22px 0 26px;
  table-layout:auto;
  border-collapse:collapse;
}

body.page-article-employment-termination .content-card .article-text-table th,
body.page-article-employment-termination .content-card .article-text-table td {
  padding:0 46px 0 0;
  text-align:left;
  vertical-align:top;
}

body.page-article-employment-termination .content-card .article-text-table th {
  padding-bottom:10px;
}

body.page-article-employment-termination .content-card .article-text-table tr + tr td {
  padding-top:0;
}

body.page-article-employment-termination .content-card .article-text-table th:last-child,
body.page-article-employment-termination .content-card .article-text-table td:last-child {
  padding-right:0;
}

.content-card .article-table-wrap {
  margin:24px 0 36px;
  overflow-x:auto;
  border:1px solid var(--content-table-line);
}

.content-card .article-table-wrap table {
  width:100%;
  min-width:var(--article-table-min-width,100%);
  table-layout:fixed;
  border-collapse:collapse;
}

.content-card .article-table-wrap th,
.content-card .article-table-wrap td {
  padding:12px 14px;
  text-align:left;
  vertical-align:top;
  border-right:1px solid var(--content-table-line);
  border-bottom:1px solid var(--content-table-line);
}

.content-card .article-table-wrap th,
.content-card .article-table-wrap td:first-child,
.content-card .article-text-table th,
.content-card strong {
  color:#303236;
  font-weight:500;
}

.content-card .article-table-wrap tr:last-child td {
  border-bottom:0;
}

.content-card .article-table-wrap th:last-child,
.content-card .article-table-wrap td:last-child {
  border-right:0;
}

.content-card .table-list-line {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  column-gap:4px;
}

.legal-card {
  --subtitle-size:22px;
  --subtitle-bottom-space:7px;
  display:grid;
  grid-template-columns:var(--secondary-column-start) minmax(0,1fr);
  align-items:start;
  gap:0;
}

.legal-card .page-title {
  margin:0;
}

.legal-card .legal-copy {
  margin-top:0;
  padding-top:19px;
}

/* ABSCHLUSSKASTEN UND RECHTSEITENKASTEN: gemeinsame mobile Anordnung */


/* =========================================================
   FUSSZEILE
   ========================================================= */

/* FUSSZEILE: Hintergrund, Farbe und Grundschrift */
.site-footer {
  position:relative;
  color:#5e5e5e;
  border-top:1px solid #d6d6d6;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.025em;
}

/* FUSSZEILENBALKEN: Höhe, Innenabstand und Ausrichtung */
.footer-inner {
  position:relative;
  min-height:86px;
  padding:38px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

/* FUSSZEILENLINKS: Position, Abstände und Schrift */
.footer-links {
  position:absolute;
  left:var(--secondary-column-start);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:29px;
  text-transform:none;
}

/* FUSSZEILE: kleinere Abstände auf Tablets */
@media (min-width:801px) and (max-width:1050px) { .footer-links { gap:20px; } }

/* FUSSZEILE: mobile Anordnung */

/* =========================================================
   ZUSAMMENGEFÜHRT AUS assets/home.css
   ========================================================= */
/* MASOON TREUHAND V2 | nur Startseite */

/* =========================================================
   HERO
   ========================================================= */

.home-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:block;
  width:min(calc(100% - (2 * var(--page-gutter))),var(--content-width));
  height:max(560px, calc(100vh - var(--header-height) - 96px));
  margin:48px auto;
  background:#fff;
}

/* HERO-FOTO: liegt hinter der gesamten Hero-Fläche */
.home-hero__image {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#ddd;
}

.home-hero__image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:70% center;
  pointer-events:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

/* HERO-FOTO: dezente Abdunkelung des Bücherregals */
.home-hero__image::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.16) 44%,
    rgba(0,0,0,.10) 54%,
    rgba(0,0,0,.03) 66%,
    rgba(0,0,0,0) 78%
  );
}

/* HERO-FOTO: weicher heller Übergang vom Text zum Bild */
.home-hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 24%,
    rgba(255,255,255,.99) 31%,
    rgba(255,255,255,.95) 37%,
    rgba(255,255,255,.82) 43%,
    rgba(255,255,255,.62) 49%,
    rgba(255,255,255,.38) 54%,
    rgba(255,255,255,.16) 59%,
    rgba(255,255,255,.04) 63%,
    rgba(255,255,255,0) 67%
  );
}

/* HERO-FOTO: dezente geometrische Aufhellung */
.home-hero::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:rgba(255,255,255,.18);
  clip-path:polygon(0 0,49% 0,36% 100%,0 100%);
}

.home-hero__content {
  position:relative;
  z-index:5;
  width:100%;
  height:100%;
  display:block;
  background:none;
}

.home-hero__inner {
  position:absolute;
  left:0;
  bottom:0;
  width:min(720px,58%);
  height:auto;
  margin:0;
  padding:76px 74px 74px 4px;
  display:block;
}

/* HERO-FLIESSTEXT: Schrift und Abstand global geregelt */
.home-hero__copy {
  max-width:560px;
}

/* HERO-BEGRIFFE: nur Anordnung; Schriftwerte stehen in global.css */
.home-hero__actions {
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:28px;
}

/* HERO: Tablet */
@media (min-width:801px) and (max-width:1050px) {
  .home-hero__inner {
    padding-right:40px;
  }
}

/* HERO: Mobil */


/* =========================================================
   STARTSEITE: BEREICHSKÖPFE UND FACHWISSEN-ANORDNUNG
   Das Dienstleistungsraster ist gemeinsam in global.css geregelt.
   ========================================================= */

.home-services__head,
.home-knowledge__head {
  display:grid;
  grid-template-columns:var(--secondary-column-start) minmax(0,1fr) auto;
  align-items:end;
  gap:0;
}

.home-services__head > .action,
.home-knowledge__head > .action {
  transform:translateY(2px);
  margin-left:32px;
}

.home-knowledge {
  background:linear-gradient(
    to right,
    transparent 0,
    transparent var(--page-gutter),
    #f3f3f3 var(--page-gutter),
    #f3f3f3 calc(100% - var(--page-gutter)),
    transparent calc(100% - var(--page-gutter)),
    transparent 100%
  );
}

/* STARTSEITE: Mobil */

/* =========================================================
   ZUSAMMENGEFÜHRT AUS assets/company.css
   ========================================================= */
/* MASOON TREUHAND V2 | nur Unternehmensseite
   Enthält ausschliesslich die Anordnung von Einleitung und Portrait.
   Schriften, Farben, Rahmen und Kartenwerte bleiben global geregelt.
*/

/* =========================================================
   UNTERNEHMEN: EINLEITUNG UND PORTRAIT
   ========================================================= */
.company-intro {
  padding-top:var(--section-space);
  padding-bottom:var(--section-space-compact);
}

.company-intro__grid {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  column-gap:64px;
  align-items:start;
}

.company-intro__portrait {
  min-width:0;
  width:100%;
  margin:0;
}

.company-intro__portrait img {
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:58% center;
}

.company-intro__caption {
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:2px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:11px;
  font-weight:500;
  line-height:1.55;
  letter-spacing:.09em;
}

.company-intro__caption strong {
  font-weight:400;
}

.company-intro__caption span {
  color:var(--label-color);
  font-size:10px;
  white-space:nowrap;
}

/* =========================================================
   UNTERNEHMEN: WERTEBEREICH
   Abstände und Typografie kommen vollständig aus den globalen Regeln.
   ========================================================= */
.company-values {
  background:linear-gradient(
    to right,
    transparent 0,
    transparent var(--page-gutter),
    #f3f3f3 var(--page-gutter),
    #f3f3f3 calc(100% - var(--page-gutter)),
    transparent calc(100% - var(--page-gutter)),
    transparent 100%
  );
}

.company-values > .container {
  display:grid;
  grid-template-columns:var(--secondary-column-start) 1fr;
  column-gap:0;
}

:where(.company-values) .section-label {
  padding-top:10px;
  margin-bottom:0;
}

.company-values .service-grid {
  grid-column:1 / -1;
}

/* UNTERNEHMEN: Abschlussbereich ohne dunklen Hintergrund */
.company-values + .closing-card-section {
  --closing-ink:var(--ink);
  --closing-text-color:var(--text);
  --closing-label-color:var(--label-color);
  background:transparent;
}

/* =========================================================
   ZUSAMMENGEFÜHRT AUS assets/services.css
   ========================================================= */
/* MASOON TREUHAND V2 | Dienstleistungsseite
   Zeilenlayout nach V3. Schriften, Farben, Karten und Abstände aus global.css.
*/

/* LEISTUNGSZEILE: Nummer links, Titel mittig, Beschreibung rechts */
.service-detail {
  --service-number-offset:10px;
  display:grid;
  grid-template-columns:var(--service-detail-columns,var(--card-label-title-space) calc(var(--secondary-column-start) - var(--card-label-title-space) - var(--card-column-gap,46px) - var(--card-column-gap,46px)) minmax(0,1fr));
  column-gap:var(--card-column-gap,46px);
  align-items:start;
}

/* LEISTUNGSÜBERSICHT: eine durchgehende Zeile pro Dienstleistung */
.service-grid:has(.service-detail) {
  grid-template-columns:minmax(0,1fr);
  row-gap:0;
  border-bottom:1px solid var(--card-line-color);
}

/* MEHR ANZEIGEN: Plus-Zeichen globaler Textlink mit Plus statt Pfeil */
.service-detail__toggle {
  --action-symbol:"+";
  --action-symbol-top:2px;
  margin-top:var(--subtitle-bottom-space);
  background-image:none;
  cursor:pointer;
}


/* TÄTIGKEITEN: zwei Spalten, Reihenfolge zuerst links von oben nach unten */
.service-detail__list {
  width:80%;
  margin:16px 0 0;
  columns:2;
  column-gap:30px;
}

/* =========================================================
   ZUSAMMENGEFÜHRT AUS assets/contact.css
   ========================================================= */
/* =========================================================
   KONTAKTSEITE
   Nur Layout und Formular. Typografie bleibt global geregelt.
   ========================================================= */

/* GESAMTE KONTAKTSEITE: Abstand von oben
   Beispiel: Bereich mit "Kontakt" */
.contact-page {
  padding-top:var(--section-space);
}

/* HAUPTAUFTEILUNG: linke Kontaktangaben und rechtes Formular
   Beispiel: links "Wir stehen Ihnen gerne zur Verfügung.", rechts Formular */
.contact-page__grid {
  display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  gap:60px;
  align-items:start;
}

/* EINLEITUNGSTEXT unter dem grossen Titel
   Beispiel: "Bitte füllen Sie das Kontaktformular aus." */
.contact-page__lead {
  max-width:430px;
}

/* KONTAKTDATEN: Abstand nach oben und Abstand zwischen Adresse, Telefon und E Mail
   Beispiel: "Adresse", "Telefon", "E Mail" */
.contact-details {
  margin-top:72px;
  display:grid;
  gap:42px;
}

/* EINZELNER KONTAKTBLOCK: Icon links und Text rechts
   Beispiel: Icon + "Adresse" + "MASOON TREUHAND" */
.contact-detail {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  column-gap:24px;
  align-items:start;
  max-width:430px;
}

/* ICONS bei Adresse, Telefon und E Mail
   Beispiel: Standort Pin, Telefonhörer, Briefumschlag */
.contact-detail svg {
  width:28px;
  height:30px;
  margin-top:6px;
  color:var(--ink);
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* KONTAKT ICONS: vertikale Position je Icon separat steuerbar */
.contact-detail:nth-child(1) svg {
  transform:translate(-2px, 0px);
}

.contact-detail:nth-child(2) svg {
  transform:translateY(-2px);
}

.contact-detail:nth-child(3) svg {
  transform:translateY(-5px);
}

/* TEXTBEREICH neben den Icons
   Beispiel: "MASOON TREUHAND", "+41 79 966 36 36", "info@masoontreuhand.ch" */
.contact-detail__content {
  min-width:0;
}

/* LINKS bei Telefonnummer und E Mail
   Beispiel: "+41 79 966 36 36", "info@masoontreuhand.ch" */
.contact-detail a {
  transition:color 180ms ease;
}

/* LINKS bei Maus darüber oder Tastaturfokus
   Beispiel: Telefonnummer und E Mail Adresse */
.contact-detail a:hover,
.contact-detail a:focus-visible {
  color:var(--ink);
}

/* KONTAKTFORMULAR KASTEN: zweispaltige, ruhige Formulararchitektur
   Beispiel: "Nachname", "Vorname", "E Mail", "Telefon", "Nachricht", "Nachricht senden" */
.contact-form {
  position:relative;
  margin-top:9px;
  padding:58px 38px 50px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--card-column-gap,46px);
  align-content:start;
  overflow:hidden;
  background:#f2f2f2;
}

/* FORMULARFELDER: klare Abstände und ruhige Hierarchie
   Beispiel: "Nachname", "Vorname", "E Mail", "Telefon", "Nachricht" */
.contact-form__field {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:0 0 32px;
}

/* NACHRICHTENFELD: über die gesamte Formularbreite
   Beispiel: "Nachricht" */
.contact-form__field--message {
  grid-column:1 / -1;
}

/* NORMALE EINGABEFELDER: Darstellung und vollständige Grössenwerte
   Beispiel: "Nachname", "Vorname", "E Mail" und "Telefon" */
.contact-form input,
.contact-form textarea {
  width:100%;
  margin:0;
  padding:8px 0;
  color:var(--ink);
  caret-color:#8d96a8;
  background:transparent;
  border:0;
  border-bottom:1px solid #9a9a9a;
  border-radius:0;
  outline:none;
}

.contact-form input {
  min-height:42px;
}

.contact-form textarea {
  height:140px;
  resize:none;
}

/* BUTTON NACHRICHT SENDEN: bewusst rahmenlos und mit mehr Klickfläche
   Beispiel: "Nachricht senden ↗" */
.contact-form__submit {
  grid-column:1 / -1;
  justify-self:start;
  padding:var(--button-padding);
  color:var(--white);
  background:#1a1a1a;
  cursor:pointer;
}

/* VERSANDSTATUS: Nachricht bleibt im bestehenden Formularrahmen
   Beispiel: "Vielen Dank für Ihre Anfrage." */
.contact-form__response {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:62px;
  overflow:hidden;
  text-align:center;
  background:#f2f2f2;
}

.contact-form__response[hidden] {
  display:none;
}

/* VERSANDSTATUS: kurze Verlaufslinie läuft beim Anzeigen durch
   Beispiel: "Vielen Dank für Ihre Anfrage." */
.contact-form__response::before {
  content:"";
  position:absolute;
  top:0;
  left:-45%;
  width:45%;
  height:3px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    var(--brand-gradient-1) 16%,
    var(--brand-gradient-2) 42%,
    var(--brand-gradient-3) 68%,
    var(--brand-gradient-4) 84%,
    transparent 100%
  );
  animation:contact-response-sweep 950ms ease-out both;
}

/* VERSANDSTATUS: Formularfelder und Button werden während der Statusmeldung ausgeblendet */
.contact-form.is-status .contact-form__field,
.contact-form.is-status .contact-form__submit {
  visibility:hidden;
}

/* STATUSMELDUNG: Textblock wird ruhig eingeblendet
   Beispiel: "Wir haben Ihre Nachricht erhalten und melden uns in Kürze bei Ihnen." */
.contact-form__response-message {
  width:min(100%,420px);
  opacity:0;
  transform:translateY(10px);
  animation:contact-response-in 520ms 180ms ease-out forwards;
}

/* STATUSSYMBOL: Kreis für Erfolg oder Fehler
   Beispiel: Häkchen bei erfolgreichem Versand */
.contact-form__response-icon {
  width:66px;
  height:66px;
  margin:0 auto 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8d96a8;
  border:1.5px solid currentColor;
  border-radius:50%;
  opacity:0;
  transform:scale(.88);
  animation:contact-response-icon 520ms 80ms ease-out forwards;
}

/* ERFOLGSSYMBOL: Häkchen im Kreis
   Beispiel: "Vielen Dank für Ihre Anfrage." */
.contact-form__response-icon::before {
  content:"";
  width:22px;
  height:11px;
  display:var(--response-icon-before-display,block);
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translate(2px,-1px);
  opacity:var(--response-icon-before-opacity,1);
}

/* FEHLERSYMBOL: Ausrufezeichen statt Häkchen
   Beispiel: "Ihre Nachricht konnte nicht gesendet werden." */
.contact-form.is-error .contact-form__response-icon::before {
  content:"!";
  width:auto;
  height:auto;
  border:0;
  transform:none;
  font-family:var(--font-body);
  font-size:28px;
  font-weight:300;
  line-height:1;
}

/* STATUSTITEL: Abstand zum Text
   Beispiel: "Vielen Dank für Ihre Anfrage." */
.contact-form__response-title {
  margin-bottom:14px;
}

/* STATUSAKZENT: kurze Verlaufslinie unter der Meldung
   Beispiel: Linie unter "Wir haben Ihre Nachricht erhalten" */
.contact-form__response-accent {
  display:var(--response-accent-display,block);
  width:74px;
  height:1px;
  margin:24px auto 0;
  background:var(--brand-gradient);
  transform:scaleX(0);
  transform-origin:center;
  animation:contact-response-line 620ms 350ms ease-out forwards;
}

@keyframes contact-response-sweep {
  from { left:-45%; }
  to { left:100%; }
}

@keyframes contact-response-in {
  to { opacity:1; transform:translateY(0); }
}

@keyframes contact-response-icon {
  to { opacity:1; transform:scale(1); }
}

@keyframes contact-response-line {
  to { transform:scaleX(1); }
}

@media (prefers-reduced-motion:reduce) {
  .contact-form__response::before,
  .contact-form__response-message,
  .contact-form__response-icon,
  .contact-form__response-accent {
    animation:none;
    opacity:1;
    transform:none;
  }
}

/* =========================================================
   MOBILE ANSICHT: EINZIGE GLOBALE REGEL bis 800 px
   ========================================================= */
@media (max-width:800px) {
  /* MOBILE KOPFZEILE: Breite und Ausrichtung von Logo und Menü */
  .header-inner {
        width:calc(100% - (2 * var(--page-gutter-mobile)));
        margin-inline:auto;
        justify-content:space-between;
        gap:20px;
      }

      /* MOBILE MENÜSCHALTER: Grösse und Grunddarstellung */
      .mobile-nav-toggle {
        width:auto;
        height:38px;
        flex:0 0 auto;
        margin:0;
        padding:0;
        display:flex;
        align-items:center;
        gap:16px;
        color:var(--white);
        border:0;
        background:transparent;
        cursor:pointer;
      }

      /* MOBILE MENÜICON: Drei Linien des Hamburger Menüs */
      .mobile-nav-toggle__bar {
        position:relative;
        width:22px;
        height:16px;
        flex:0 0 22px;
        background:linear-gradient(currentColor,currentColor) 0 7px / 22px 2px no-repeat;
      }

      .mobile-nav-toggle__bar::before,
      .mobile-nav-toggle__bar::after {
        content:"";
        position:absolute;
        left:0;
        width:22px;
        height:2px;
        opacity:1;
        background:currentColor;
        transform-origin:center;
        transition:transform 220ms ease,opacity 220ms ease;
      }

      .mobile-nav-toggle__bar::before {
        top:0;
      }

      .mobile-nav-toggle__bar::after {
        top:14px;
      }

      .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar {
        background:transparent;
      }

      .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar::before {
        top:7px;
        transform:rotate(45deg);
      }

      .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar::after {
        top:7px;
        transform:rotate(-45deg);
      }

      /* MOBILE NAVIGATION: Aufgeklapptes Menü unter der Kopfzeile */
      .site-nav {
        position:absolute;
        top:100%;
        left:calc(-1 * var(--page-gutter-mobile));
        right:calc(-1 * var(--page-gutter-mobile));
        z-index:1001;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:26px var(--page-gutter-mobile);
        visibility:hidden;
        opacity:0;
        pointer-events:none;
        transform:translateY(-6px);
        transition:opacity 240ms ease,transform 240ms ease,visibility 240ms ease;
        background:
          linear-gradient(#9aa3b3,#9aa3b3) center top / calc(100% - (2 * var(--page-gutter-mobile))) 1px no-repeat,
          #1a1a1a;
      }

      .site-nav.is-open {
        visibility:visible;
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
      }

      .site-nav a {
        width:100%;
        margin:0;
        padding:9px 0;
        background-image:none;
      }

      .site-nav a[aria-current="page"] {
        color:#9aa3b3;
      }

      body.mobile-nav-open {
        overflow:hidden;
      }

    /* MOBILE KARTENRASTER: Dienstleistungen und Fachwissen einspaltig */
    .service-grid,
      .knowledge-grid {
        --service-detail-columns:minmax(0,1fr);
        grid-template-columns:1fr;
        grid-auto-rows:var(--card-grid-rows,auto);
        row-gap:0;
        border-bottom:1px solid var(--card-line-color);
      }

    /* MOBILE GRUNDWERTE: zentrale Grössen und Abstände */
    :root {
        --header-height:92px;
        --button-padding:18px 26px;
        --title-first-meta-space-mobile:52px;
        --card-top-space-mobile:22px;
        --card-grid-top:calc(var(--title-first-meta-space-mobile) - var(--card-top-space-mobile));
        --action-space-mobile:33px;
        --article-back-gap:12px;
        --article-back-mark-size:1.2em;
        --uppercase-label-size:11px;
        --header-brand-font-size:18px;
        --label-line:1;
        --title-size:40px;
        --hero-title-size:clamp(42px, 12vw, 58px);
        --subtitle-size:26px;
        --title-body-space:24px;
        --subtitle-top-space:38px;
        --subtitle-bottom-space:8px;
        --action-line:none;
        --page-bottom-space:0;
      }

      /* MOBILE GLOBALER HINTERGRUND */
      body {
        background-image:url("images/backgrounds/Hintergrund 3.png");
        background-size:228% auto;
        background-position:85% 30vh;
        background-repeat:no-repeat;
        background-attachment:fixed;
      }

      /* MOBILE INHALTSBREITE: seitlicher Abstand der Seiteninhalte */
      .container {
        width:calc(100% - (2 * var(--page-gutter-mobile)));
      }

      /* MOBILE ERSTER SEITENBEREICH: Abstand unterhalb der Kopfzeile */
      main > section:first-child {
        margin-top:var(--section-space-mobile);
        margin-bottom:var(--section-space-mobile);
        padding-top:0;
        padding-bottom:0;
        border-top:0;
      }

      /* MOBILE ABSCHNITTE: vertikale Abstände und obere Trennlinie */
      .section {
        padding-top:var(--section-space-mobile);
        padding-bottom:var(--section-space-mobile);
        border-top:1px solid var(--card-line-color);
      }

      /* MOBILE BEREICHSTITEL: gemeinsame Typografie für Bereichstitel und Kontaktbegriffe */
      .section-label,
      body .contact-detail__content .small-title {
        font-size:var(--uppercase-label-size);
        letter-spacing:var(--uppercase-label-spacing);
      }

      .section-label {
        padding-top:0;
        margin-bottom:30px;
      }

      /* MOBILE FACHWISSEN: Kartenhöhe und obere Linie */
      .home-knowledge,
      .knowledge-grid {
        --card-grid-rows:1fr;
        border-top:0;
      }

      /* MOBILE FACHWISSEN HAUPTSEITE: letzter Beitrag bis zur unteren Bereichsgrenze */
      body .section.section-compact-bottom:has(+ .closing-card-section.home-knowledge) {
        margin-bottom:0;
        padding-bottom:30px;
      }

      /* MOBILE TITEL UND BEREICHE: unerwünschte obere und untere Linien entfernen */
      .page-title,
      .section-title,
      .home-services,
      .home-services .service-grid,
      .home-services .service-grid > .service-card:first-child,
      .service-grid:has(> .service-detail),
      .company-values,
      .company-values .service-grid,
      .company-values .service-grid > .service-card:first-child,
      .knowledge-grid > div:first-child > .knowledge-card,
      .knowledge-grid {
        max-width:100%;
        border-top:0;
        border-bottom:0;
      }

      /* MOBILE KARTEN: Höhe und Innenabstände */
      .service-card,
      .knowledge-card {
        height:auto;
        align-content:start;
        padding-top:var(--card-top-space-mobile);
        padding-bottom:22px;
      }

      .service-card__number,
      .knowledge-card__date {
        margin-bottom:22px;
      }

    /* MOBILE ABSCHLUSSBEREICH: einspaltiger Aufbau */
    .closing-card {
        grid-template-columns:1fr;
        gap:30px;
        align-items:flex-start;
        padding-left:0;
        padding-right:0;
      }

      /* MOBILE dunkler Kasten-unten am Schluss: Abstand-Kasten oben und unten */
      .closing-card {
        height:auto;
        padding:80px 0 80px;
      }

      .closing-card__content > p br {
        display:inline;
        content:" ";
      }

      /* MOBILE FACHWISSEN: künstlichen Umbruch in EINORDNUNG ausblenden */
      body .closing-card-section.home-knowledge .closing-card__content > p br {
        display:none;
      }

      /* MOBILE FACHBEITRÄGE: Inhaltskarte ohne zusätzlichen Innenabstand */
      .content-card {
        padding:0;
      }

      /* MOBILE FACHBEITRÄGE: Abstand und Trennlinie unter dem Beitragskopf */
      .content-card > header {
        margin-bottom:30px;
        padding-bottom:30px;
        border-bottom:1px solid var(--card-line-color);
      }

      .content-card > div {
        width:100%;
        margin-left:0;
      }

      /* MOBILE TABELLEN: horizontal scrollbar bei breiten Tabellen */
      .content-card .article-table-wrap {
        width:100%;
        padding-bottom:12px;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
      }

      /* MOBILE FACHBEITRÄGE: Zurücklinks oben und unten ausblenden */
      body main > .section > .container > .article-back,
      .content-card .article-back {
        display:none;
      }

      /* MOBILE KÜNDIGUNGSBEITRAG: Texttabellen lesbar horizontal scrollen */
      body.page-article-employment-termination .content-card .article-text-table {
        display:block;
        width:100%;
        table-layout:auto;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
      }

      body.page-article-employment-termination .content-card .article-text-table th,
      body.page-article-employment-termination .content-card .article-text-table td {
        min-width:180px;
        padding-right:24px;
        font-size:14px;
        line-height:1.45;
        overflow-wrap:normal;
      }

      /* MOBILE RECHTSSEITEN: Impressum, Disclaimer und Datenschutz */
      .legal-card {
        min-height:0;
        padding-bottom:0;
        grid-template-columns:1fr;
        gap:1px;
        align-items:flex-start;
        padding-left:0;
        padding-right:0;
      }

      .legal-card > div:first-child {
        padding-bottom:20px;
        border-bottom:1px solid var(--card-line-color);
      }

    /* MOBILE FUSSZEILE: Höhe und vertikale Anordnung */
    .footer-inner {
        min-height:80px;
        padding-block:14px;
        flex-direction:column;
        justify-content:center;
        text-align:left;
      }
      /* MOBILE FUSSZEILE: Linkraster */
      .footer-links {
        position:static;
        width:100%;
        display:grid;
        grid-template-columns:repeat(4,auto);
        justify-content:start;
        gap:2px 14px;
        font-size:10px;
      }
      .footer-links .footer-home {
        grid-column:1 / -1;
        font-size:11px;
      }

  /* MOBILE STARTSEITE HERO: äusserer Hero Bereich */
  body .home-hero {
      width:calc(100% - (2 * var(--page-gutter-mobile)));
      height:auto;
      margin-inline:auto;
      display:grid;
      grid-template-columns:1fr;
      overflow:visible;
      background:transparent;
    }

    body .home-hero::before,
    body .home-hero::after {
      display:none;
    }

    /* MOBILE STARTSEITE HERO: lokaler abstrakter Hintergrund und obere Erweiterung */
    body .home-hero__content {
      position:relative;
      width:calc(100% + var(--page-gutter-mobile));
      height:auto;
      margin-top:calc(-1 * var(--section-space-mobile));
      padding-top:var(--section-space-mobile);
      display:flex;
      background-image:url("images/backgrounds/Hintergrund 3.png");
      background-size:228% auto;
      background-position:85% 16%;
      background-repeat:no-repeat;
    }

    /* MOBILE STARTSEITE HERO: Textbereich und unterer Innenabstand */
    body .home-hero__inner {
      position:static;
      width:calc(100% - var(--page-gutter-mobile));
      height:auto;
      min-height:auto;
      margin:0;
      padding:0 0 50px;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
    }

    body .home-hero__copy {
      max-width:none;
    }

    body .home-hero__copy br {
      display:none;
    }

    /* MOBILE STARTSEITE HERO: Abstand der Aktionslinks */
    body .home-hero__actions {
      margin-top:30px;
      gap:14px 22px;
    }

    /* MOBILE STARTSEITE HERO: Porträtgrösse */
    body .home-hero__image {
      position:relative;
      inset:auto;
      width:100%;
      height:420px;
      min-height:0;
      margin-bottom:32px;
      overflow:visible;
    }

    body .home-hero__image img {
      object-position:72% center;
    }

    /* MOBILE STARTSEITE HERO: Bildbeschriftung unter dem Porträt */
    body .home-hero__image::before {
      content:"TREUHAND UND BERATUNG · LUZERN";
      position:absolute;
      top:calc(100% + 14px);
      left:0;
      z-index:3;
      color:var(--label-color);
      font-family:var(--font-body);
      font-size:10px;
      font-weight:500;
      line-height:1.55;
      letter-spacing:.09em;
      white-space:nowrap;
    }

  /* MOBILE: Pfeil-Zeichen eine globale Regel für Textlinks wie
     "Kontakt aufnehmen", "Alle Dienstleistungen ansehen", "Alle Beiträge ansehen" */
  .action:not(.contact-form__submit) {
    --action-symbol:"\279A";
    --action-symbol-font:Arial,sans-serif;
    --action-symbol-size:1em;
    --action-symbol-weight:700;
    --action-symbol-top:-1px;
    display:flex;
    width:max-content;
    margin-top:var(--action-space-mobile) !important;
    margin-bottom:0 !important;
    padding:0 !important;
    transform:none;
  }

  /* MOBILE STARTSEITE: Überschriftenbereiche Dienstleistungen und Fachwissen */
  body .home-services__head,
    body .home-knowledge__head {
      display:flex;
      flex-direction:column;
      align-items:flex-start;
    }

    body .home-services__head > .action,
    body .home-services > .container > .action,
    body .home-knowledge__head > .action,
    body .home-knowledge > .container > .action {
      margin-left:0;
      color:var(--label-color);
    }

    body .home-knowledge,
    body .company-values {
      background:#f3f3f3;
    }

    body .company-values {
      padding-bottom:calc(var(--section-space-mobile) - 22px);
    }

  /* MOBILE UNTERNEHMEN: Einleitung und Wertebereich */
    body .company-intro__grid {
      grid-template-columns:1fr;
      gap:var(--section-space-mobile);
    }

    body .company-intro .page-title br {
      display:inline;
      content:" ";
    }

    body .company-intro .page-title br::after,
    .closing-card__content > p br::after {
      content:" ";
    }



    body .company-values > .container {
      grid-template-columns:1fr;
    }

    /* MOBILE UNTERNEHMEN: Abschlussbereich Zusammenarbeit unten optisch ausgleichen */
    body .company-values + .closing-card-section .closing-card {
      padding-bottom:75px;
    }

  /* MOBILE: Plus-Zeichen und Detailbereiche */
  body .service-detail {
      --service-number-offset:0;
      grid-template-columns:1fr;
      row-gap:0;
    }

    body .service-detail__toggle {
      --action-symbol-top:1px;
    }

    body .service-detail .subtitle {
      margin-bottom:var(--subtitle-bottom-space);
    }

    body .service-detail__list {
      width:100%;
      margin-top:8px;
      columns:1;
      column-gap:0;
    }

  /* MOBILE KONTAKT */
    /* MOBILE: Kontaktangaben und Formular untereinander
       Beispiel: zuerst "Wir stehen Ihnen gerne zur Verfügung.", danach Formular */
    body .contact-page__grid {
      grid-template-columns:1fr;
      gap:64px;
    }

    body .contact-page__lead br {
      display:none;
    }

    body .contact-details {
      margin-top:52px;
      gap:24px;
    }

    body .contact-detail {
      display:block;
      max-width:none;
    }

    body .contact-detail svg {
      display:none;
    }

    body .contact-detail__content {
      display:grid;
      grid-template-columns:1fr;
      column-gap:0;
      align-items:start;
    }

    body .contact-detail__content .small-title {
      font-weight:500;
      color:#000;
    }

    body .contact-detail__content .small-title + p {
      margin-top:var(--small-title-bottom-space);
    }

    /* MOBILE: Formular einspaltig mit ruhigen Innenabständen
       Beispiel: "Nachname" bis "Nachricht senden" */
    body .contact-form {
      height:auto;
      margin-top:0;
      padding:36px var(--page-gutter-mobile) 34px;
      grid-template-columns:1fr;
      column-gap:0;
    }

    body .contact-form__field {
      margin-bottom:28px;
    }

    body .contact-form__field--message,
    body .contact-form__submit {
      grid-column:1;
    }

    /* MOBILE: Nachricht etwas kompakter
       Beispiel: Feld unter "Nachricht" */
    body .contact-form input,
    body .contact-form textarea {
      font-size:16px;
    }

    body .contact-form textarea {
      height:120px;
    }

    /* MOBILE VERSANDSTATUS: Mindesthöhe für die sichtbare Statusmeldung */
    body .contact-form.is-status {
      min-height:360px;
    }

    /* MOBILE STATUSMELDUNG: Innenabstand
       Beispiel: "Vielen Dank für Ihre Anfrage." */
    body .contact-form__response {
      padding:32px var(--page-gutter-mobile);
    }

    body .contact-form__response-icon {
      width:58px;
      height:58px;
      margin-bottom:22px;
    }
}