@import 'basis.css';

/* =====================================================================
   Zurwerra Treuhand — Baar ZG
   Haltung: nüchtern, verbindlich, zahlenfest. Wer einen Treuhänder sucht,
   sucht keine Stimmung, sondern jemanden, bei dem die Zahlen stimmen.
   Paradigma: KONTOBLATT. Linierte Zeilen, Positionsnummern links, Beträge
   rechtsbündig mit Tabellenziffern, Summen doppelt unterstrichen. Die
   Seite sieht aus wie das, was sie verkauft.
   ===================================================================== */

:root {
  --grund: oklch(0.978 0.003 250);
  --flaeche: oklch(0.945 0.005 250);
  --flaeche-2: oklch(0.9 0.007 250);
  --tinte: oklch(0.215 0.012 250);
  --leise: oklch(0.44 0.012 250);
  --linie: oklch(0.855 0.006 250);
  --linie-stark: oklch(0.35 0.012 250);
  --akzent: oklch(0.46 0.16 25);
  --auf-akzent: oklch(0.98 0.01 25);
  --dunkel: oklch(0.19 0.015 250);

  --serif: 'Sora', system-ui, sans-serif;
  --grotesk: 'Manrope', system-ui, sans-serif;
  --anzeige: 'Sora', system-ui, sans-serif;

  --mass: 74rem;
  --luft: clamp(3.25rem, 7vw, 6rem);
  --rand: clamp(1.25rem, 5vw, 3rem);
  --rundung: 0px;
  --weich: cubic-bezier(0.22, 1, 0.36, 1);
  --balken: oklch(0.19 0.015 250);
  --vorhang-grund: oklch(0.19 0.015 250);
  --vorhang-tinte: oklch(0.96 0.004 250);
}

body {
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.09rem);
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3 {
  font-family: var(--anzeige);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
h1 {
  font-size: clamp(2.1rem, 1.5rem + 3vw, 3.9rem);
}
h2 {
  font-size: clamp(1.65rem, 1.3rem + 1.8vw, 2.5rem);
}
h3 {
  font-size: clamp(1.1rem, 1.02rem + 0.5vw, 1.3rem);
  letter-spacing: -0.02em;
}

.marke {
  font-family: var(--anzeige);
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.marke small {
  margin-top: 0.28rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent);
}

.pos {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--akzent);
}

/* ---------- Auftritt: Kontoblatt neben dem Satz ---------------------- */

.auftritt {
  border-bottom: 1px solid var(--linie-stark);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.auftritt-in {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.auftritt h1 {
  margin-top: 1.1rem;
  max-width: 15ch;
}
.auftritt .lauf {
  max-width: 46ch;
  margin-top: 1.4rem;
  color: var(--leise);
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.15rem);
}
.auftritt-tun {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.8rem;
}
.auftritt-bild {
  margin-top: 2.5rem;
}

/* Das Blatt: sieht aus wie eine Abrechnung, ist eine Nutzenliste. */
.blatt {
  border: 1px solid var(--linie-stark);
  background: #fff;
}
.blatt-kopf {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--linie-stark);
  background: var(--flaeche);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.blatt-zeile {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  gap: 0.8rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--linie);
  font-size: 0.95rem;
}
.blatt-zeile span:first-child {
  color: var(--leise);
  font-size: 0.85rem;
}
.blatt-zeile b {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.blatt-summe {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-top: 3px double var(--linie-stark);
  font-family: var(--anzeige);
  font-weight: 600;
}
.blatt-summe b {
  white-space: nowrap;
}

/* ---------- Kennzahlenband -------------------------------------------- */

.band {
  background: var(--dunkel);
  color: oklch(0.95 0.004 250);
  --linie: oklch(0.32 0.012 250);
  --leise: oklch(0.72 0.01 250);
  --tinte: oklch(0.95 0.004 250);
}
.band p {
  color: var(--leise);
}
.zahlen {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linie);
}
.zahlen > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linie);
}
.zahlen dt {
  font-size: 0.95rem;
  color: var(--leise);
  max-width: 34ch;
}
.zahlen dd {
  margin: 0;
  font-family: var(--anzeige);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* ---------- Posten (Leistungen als Kontenplan) ------------------------ */

/* Die Postenliste sitzt fast immer in der rechten Spalte eines Zweispalters.
   Wie breit sie ist, hängt deshalb an ihrer Spalte, nicht am Fenster — der
   Umbruch auf die dreispaltige Kontenplan-Zeile gehört an eine Container-
   Abfrage. Vorher hing er an `min-width: 46rem`: genau dort halbiert sich der
   Zweispalter, die festen Spalten (Nummer, Betrag) frassen 264 px, und für den
   Text blieben 133 px — sechzehn Zeichen pro Zeile. */
.posten {
  border-top: 2px solid var(--linie-stark);
  container-type: inline-size;
  container-name: posten;
}
.posten-zeile {
  display: grid;
  gap: 0.4rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--linie);
}
.posten-zeile .nr {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--akzent);
  letter-spacing: 0.08em;
}
.posten-zeile p {
  margin: 0;
  color: var(--leise);
  max-width: 62ch;
  font-size: 0.97rem;
}
.posten-zeile .betrag {
  font-family: var(--anzeige);
  font-weight: 600;
  font-size: 1.1rem;
  white-space: nowrap;
}

/* Erst wenn die Spalte selbst 36 rem breit ist, tr\u00e4gt sie drei Spuren: Nummer,
   Text, Betrag. Darunter stehen die drei Teile untereinander \u2014 der Text hat
   dann die ganze Spalte und bleibt bei 45 bis 75 Zeichen. Die festen Spuren\n   sind knapper als vorher (3 rem statt 4,5 rem, 7 rem statt 9 rem): die Nummer\n   ist dreistellig, der Betrag ein Wort. */
@container posten (min-width: 36rem) {
  .posten-zeile {
    grid-template-columns: 3rem 1fr 7rem;
    gap: 1.25rem;
    align-items: baseline;
  }
  .posten-zeile .nr {
    grid-row: 1 / span 2;
  }
  .posten-zeile h3 {
    grid-column: 2;
  }
  .posten-zeile p {
    grid-column: 2;
  }
  .posten-zeile .betrag {
    grid-column: 3;
    grid-row: 1 / span 2;
    text-align: right;
  }
}

/* ---------- Textblöcke ------------------------------------------------- */

.seitenkopf {
  padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--linie-stark);
}
.seitenkopf p {
  max-width: 58ch;
  margin-top: 1.1rem;
  color: var(--leise);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.14rem);
}
.brotkrume {
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
  color: var(--leise);
}
.brotkrume a {
  color: var(--akzent);
  text-decoration: none;
  font-weight: 600;
}

.zweispalt {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.satz {
  font-family: var(--anzeige);
  font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.9rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.03em;
  max-width: 30ch;
}

/* ---------- Personen ---------------------------------------------------- */

.leute {
  display: grid;
  gap: 1px;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--linie);
  border: 1px solid var(--linie);
}
.person {
  background: #fff;
  padding: clamp(1.4rem, 3.5vw, 1.9rem);
}
.person .bild {
  margin-bottom: 1.1rem;
}
.person .rolle {
  margin-top: 0.3rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent);
}
.person p {
  margin-top: 0.8rem;
  color: var(--leise);
  font-size: 0.95rem;
}

/* ---------- Karten ------------------------------------------------------- */

.karte {
  padding: clamp(1.4rem, 3.5vw, 1.9rem);
  border: 1px solid var(--linie-stark);
  background: #fff;
}
.zeiten {
  display: grid;
  margin: 0.9rem 0 0;
}
.zeiten div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.93rem;
}
.zeiten div:last-child {
  border-bottom: 0;
}
.zeiten dd {
  margin: 0;
  color: var(--leise);
  text-align: right;
}

/* ---------- Pakete -------------------------------------------------------- */

.pakete {
  background: var(--dunkel);
  color: oklch(0.95 0.004 250);
  --linie: oklch(0.32 0.012 250);
  --leise: oklch(0.72 0.01 250);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.pakete-kopf {
  max-width: 44rem;
}
.pakete-kopf p {
  margin-top: 1rem;
  color: var(--leise);
}
.paketreihe {
  display: grid;
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 3rem);
  background: var(--linie);
  border: 1px solid var(--linie);
}
.paket {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 3.5vw, 1.9rem);
  background: var(--dunkel);
}
.paket[data-beliebt] {
  background: oklch(0.24 0.016 250);
}
.paket-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.marke-beliebt {
  padding: 0.22rem 0.6rem;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.paket .preis {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 1rem 0 0.4rem;
  font-family: var(--anzeige);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.paket .preis span {
  font-family: var(--grotesk);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--leise);
  letter-spacing: 0;
}
.paket > p {
  color: var(--leise);
  font-size: 0.93rem;
}
.paket ul {
  list-style: none;
  margin: 1rem 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--leise);
}
.paket li {
  display: grid;
  grid-template-columns: 0.95rem 1fr;
  gap: 0.55rem;
}
.paket li::before {
  content: '';
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.3rem;
  background: var(--akzent);
  clip-path: polygon(14% 46%, 6% 58%, 40% 90%, 96% 22%, 86% 12%, 39% 68%);
}
.paket .knopf {
  margin-top: auto;
  width: 100%;
}
.pakete-fuss {
  margin-top: 1.5rem;
  max-width: 60ch;
  font-size: 0.85rem;
  color: var(--leise);
}

/* ---------- Fuss ----------------------------------------------------------- */

.fuss {
  background: oklch(0.15 0.012 250);
  color: oklch(0.78 0.008 250);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.6rem;
}
.fuss .marke {
  display: inline-flex;
  flex-direction: column;
  color: #fff;
  margin-bottom: 0.9rem;
}
.fuss a:hover {
  color: #fff;
}

@media (min-width: 46rem) {
  .zahlen > div {
    padding-inline: 0;
  }
  .leute {
    grid-template-columns: repeat(2, 1fr);
  }
  .paketreihe {
    grid-template-columns: repeat(3, 1fr);
  }
  .zweispalt {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 62rem) {
  .auftritt-in {
    grid-template-columns: 1.25fr 0.85fr;
    gap: 4rem;
  }
  .auftritt-bild {
    margin-top: 0;
  }
  .leute {
    grid-template-columns: repeat(4, 1fr);
  }
  .zweispalt {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
  }
  .zweispalt-haft > :first-child {
    position: sticky;
    top: 6.5rem;
  }
}


/* =====================================================================
   Feinschliff — ui-ux-pro-max (Kontrast) + impeccable (Craft)
   Gemessene Werte und Begründung: _SKILLS-ANGEWENDET.md
   Feldrand   1.46:1 → 3.23:1  (WCAG 1.4.11, Bedienelement-Rand ≥3:1)
   Platzhalter          → 7.29:1  (WCAG 1.4.3, Fliesstext ≥4.5:1)
   Akzent als Text 7.28:1 → 7.28:1
   Knopfbeschriftung 7.29:1 → 7.29:1
   ===================================================================== */
:root {
  --feld-linie: oklch(0.635 0.012 250);
  --platzhalter: oklch(0.440 0.012 250);
  --akzent-text: var(--akzent);
}

/* Ein Formularfeld muss man sehen, bevor man hineinklickt. */
.feld input,
.feld select,
.feld textarea {
  border-color: var(--feld-linie);
}
.feld input::placeholder,
.feld textarea::placeholder {
  color: var(--platzhalter);
  opacity: 1;
}
.feld > label {
  font-size: 0.9rem;
}

/* Sichtbarer Fokus auf allem, was man bedienen kann. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* Kein Inhalt darf auf ein Skript warten, um sichtbar zu werden. */
@media (prefers-reduced-motion: reduce) {
  [data-auftritt],
  [data-auftritt] > *,
  [data-schnitt] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}


/* ---------------------------------------------------------------------
   Gemessene Einzelkorrekturen. Jede Textfarbe dieser Demo wurde auf
   allen fünf Seiten gegen ihren tatsächlichen Hintergrund gerechnet
   (`_kontrast.html`); diese Paare lagen unter der Schwelle. Der neue
   Wert ist der kleinste, der sie erreicht — die Farbe bleibt also so
   nah am Original wie möglich.
   --------------------------------------------------------------------- */
.fuss .marke small {
  color: #b95f61; /* vorher 2.53:1 */
}
.band .pos {
  color: #bb6567; /* vorher 2.39:1 */
}
.band .nr {
  color: #bb6567; /* vorher 2.39:1 */
}


/* ---------- Navigation auf schmalen Schirmen --------------------------
   Kein Hamburger: die Abschnitte stehen als eigene Zeile unter der Marke,
   immer sichtbar und immer klickbar. Fünf Links hinter zwei Klicks zu
   verstecken kostet Aufrufe der Unterseiten.

   Diese Regeln stehen bewusst in stil.css: sie wird nach basis.css
   geladen und hat damit das letzte Wort.
   ---------------------------------------------------------------------- */
@media (max-width: 55.99rem) {
  .kopf-in {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .menue {
    display: flex;
    order: 3;
    width: 100%;
    gap: 0.15rem;
    margin: 0 calc(var(--rand, 1.25rem) * -1);
    padding: 0 var(--rand, 1.25rem);
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--linie, rgba(128, 128, 128, 0.25));
  }
  .menue::-webkit-scrollbar {
    display: none;
  }
  .menue a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.7rem;
    font-family: var(--grotesk, system-ui, sans-serif);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--leise, currentColor);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    opacity: 1;
  }
  .menue a:first-child {
    padding-left: 0;
  }
  .menue a[aria-current='page'] {
    color: var(--akzent, currentColor);
    font-weight: 600;
    border-bottom-color: currentColor;
  }
}


/* ---------- Wegweiser zwischen den Abschnitten --------------------------- */
/* Eine kurze Linie mit Spitze, die sich zeichnet, wenn die Grenze zwischen
   zwei Abschnitten in Sicht kommt. Sie sitzt in einem Kasten ohne eigene
   Höhe, mitten auf der Grenze — die Seite verschiebt sich dadurch nicht.
   Der Kasten steht nicht im HTML; wegweiser.js baut ihn. */

.wegweiser {
  position: relative;   /* eigener Bezug, damit kein Abschnitt umgestellt wird */
  height: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}
.wegweiser svg {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -50%;
  display: block;
  overflow: visible;
}
.wegweiser-linie {
  stroke: var(--weg-ton, currentColor);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.05s cubic-bezier(.22, .61, .36, 1);
}
.wegweiser-spitze {
  stroke: var(--weg-ton, currentColor);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  translate: 0 -5px;
  transition: opacity 0.4s ease-out 0.75s, translate 0.5s cubic-bezier(.22, .61, .36, 1) 0.75s;
}
.wegweiser[data-an] .wegweiser-linie { stroke-dashoffset: 0 !important; }
.wegweiser[data-an] .wegweiser-spitze { opacity: 1; translate: 0 0; }

/* Die Naht ist gestrichelt — dafür zeichnet nicht der Strich, sondern die
   Deckkraft, sonst frisst die Strichelung den dashoffset. */
.wegweiser[data-art="naht"] .wegweiser-linie {
  stroke-dasharray: 5 4 !important;
  stroke-dashoffset: 0 !important;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.wegweiser[data-art="naht"][data-an] .wegweiser-linie { opacity: 1; }

@media (max-width: 45.99rem) { .wegweiser svg { width: 18px; height: 52px; } }


/* ---------- Gezeichneter Rahmen und antwortende Zeilen ------------------- */
/* Beim Überfahren zeichnet sich ein Rahmen: erst laufen die waagrechten
   Linien aus der Mitte nach aussen, dann wachsen die senkrechten dazu. Zwei
   Pseudoelemente, kein SVG. Der Rahmen liegt 5 px ausserhalb und fängt
   keine Zeiger ab — das Trefferfeld bleibt, wie es war. */

.knopf { position: relative; }
.knopf::before,
.knopf::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 7px;
  pointer-events: none;
  border: 1.5px solid transparent;
}
.knopf::before {
  border-top-color: var(--akzent);
  border-bottom-color: var(--akzent);
  transform: scaleX(0);
  transition: transform 0.26s cubic-bezier(.22, .61, .36, 1);
}
.knopf::after {
  border-left-color: var(--akzent);
  border-right-color: var(--akzent);
  transform: scaleY(0);
  transition: transform 0.26s cubic-bezier(.22, .61, .36, 1) 0.14s;
}
.knopf:hover::before, .knopf:focus-visible::before { transform: scaleX(1); }
.knopf:hover::after,  .knopf:focus-visible::after  { transform: scaleY(1); }

/* Die Zeilen der Preiskarte antworten nacheinander, nicht alle zugleich —
   45 ms Abstand liest sich als Bewegung, gleichzeitig wäre es ein Ruck. */
.paket li { transition: transform 0.34s cubic-bezier(.22, .61, .36, 1); }
.paket:hover li { transform: translateX(4px); }
.paket:hover li:nth-child(1) { transition-delay: 0s; }
.paket:hover li:nth-child(2) { transition-delay: 0.045s; }
.paket:hover li:nth-child(3) { transition-delay: 0.09s; }
.paket:hover li:nth-child(4) { transition-delay: 0.135s; }
.paket:hover li:nth-child(5) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .knopf::before, .knopf::after { display: none; }
  .paket li, .paket:hover li { transform: none; transition: none; }
}