@import 'basis.css';

/* =====================================================================
   Brunnhofer & Partner — Rechtsanwälte, Zug
   Haltung: präzise, unaufgeregt, unbequem ehrlich. Eine Kanzlei verkauft
   nicht Freundlichkeit, sondern Urteilsvermögen.
   Paradigma: SPALTENSATZ. Links haftet die Frage, rechts läuft die
   Antwort — wie eine Randspalte im Kommentarband. Die ganze Seite ist
   dunkel; Papierweiss kommt nur dort vor, wo es um Geld geht.
   ===================================================================== */

:root {
  --grund: oklch(0.185 0.028 260);
  --flaeche: oklch(0.235 0.03 260);
  --flaeche-2: oklch(0.28 0.032 260);
  --tinte: oklch(0.955 0.006 260);
  --leise: oklch(0.755 0.014 260);
  --linie: oklch(0.33 0.028 260);
  --akzent: oklch(0.795 0.115 79);
  --auf-akzent: oklch(0.24 0.05 70);
  --papier: oklch(0.955 0.005 260);
  --papier-tinte: oklch(0.24 0.025 260);
  --papier-leise: oklch(0.44 0.02 260);
  --papier-linie: oklch(0.86 0.008 260);

  --serif: 'Spectral', Georgia, serif;
  --grotesk: 'Archivo', system-ui, sans-serif;
  --anzeige: var(--serif);

  --mass: 76rem;
  --luft: clamp(3.5rem, 8vw, 7rem);
  --rand: clamp(1.25rem, 5vw, 3rem);
  --rundung: 0px;
  --weich: cubic-bezier(0.22, 1, 0.36, 1);
  --balken: oklch(0.13 0.022 260);
  --vorhang-grund: oklch(0.145 0.025 260);
  --vorhang-tinte: var(--tinte);
}

body {
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.12rem);
  line-height: 1.68;
  font-weight: 400;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
h1 {
  font-size: clamp(2.35rem, 1.6rem + 3.6vw, 4.3rem);
}
h2 {
  font-size: clamp(1.85rem, 1.4rem + 2.1vw, 2.8rem);
}
h3 {
  font-size: clamp(1.2rem, 1.1rem + 0.7vw, 1.45rem);
}

.marke {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.marke small {
  margin-top: 0.3rem;
  font-family: var(--grotesk);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent);
}

.merk {
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--akzent);
}

/* ---------- Auftritt: Satzspiegel links, Bild rechts bis zum Rand ---- */

.auftritt {
  position: relative;
  border-bottom: 1px solid var(--linie);
}
.auftritt-in {
  display: grid;
  gap: 0;
}
.auftritt-satz {
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem);
}
.auftritt h1 {
  margin-top: 1.4rem;
  max-width: 14ch;
}
.auftritt .lauf {
  max-width: 44ch;
  margin-top: 1.6rem;
  color: var(--leise);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
}
.auftritt-tun {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.auftritt-bild {
  position: relative;
  min-height: 20rem;
}
.auftritt-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auftritt-bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 30%, color-mix(in oklch, var(--grund) 85%, transparent));
}

.kennung {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linie);
  font-family: var(--grotesk);
}
.kennung > div {
  padding: 1.1rem var(--rand);
  border-bottom: 1px solid var(--linie);
}
.kennung dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise);
}
.kennung dd {
  margin: 0.35rem 0 0;
  font-family: var(--serif);
  font-size: 1.15rem;
}

/* ---------- Spaltensatz ---------------------------------------------- */

.spalten {
  display: grid;
  gap: 1.6rem;
}
.spalten-titel h2 {
  max-width: 16ch;
}
.spalten-titel p {
  margin-top: 1rem;
  color: var(--leise);
  font-size: 0.98rem;
  max-width: 34ch;
}
.spalten-inhalt > * + * {
  margin-top: 2.2rem;
}

.satzstueck {
  padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
}
.satzstueck:first-child {
  padding-top: 0;
  border-top: 0;
}
.satzstueck .ziffer {
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--akzent);
}
.satzstueck h3 {
  margin: 0.5rem 0 0.6rem;
}
.satzstueck p {
  color: var(--leise);
  max-width: 60ch;
}

/* ---------- Papierband (dort, wo es um Geld geht) -------------------- */

.papier {
  background: var(--papier);
  color: var(--papier-tinte);
  --linie: var(--papier-linie);
  --leise: var(--papier-leise);
  --tinte: var(--papier-tinte);
  --flaeche: oklch(0.985 0.003 260);
  --feld-grund: #fff;
  --feld-tinte: var(--papier-tinte);
}
.papier .merk {
  color: oklch(0.52 0.11 72);
}
.papier p {
  color: var(--papier-leise);
}

/* ---------- Honorartafel ---------------------------------------------- */

.tafel {
  border-top: 2px solid currentColor;
}
.tafel-zeile {
  display: grid;
  gap: 0.35rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linie);
}
.tafel-zeile h3 {
  font-family: var(--grotesk);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
}
.tafel-zeile p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--leise);
  max-width: 58ch;
}
.tafel-zeile .betrag {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Anwältinnen ------------------------------------------------ */

.anwaelte {
  display: grid;
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 3rem);
  background: var(--linie);
  border: 1px solid var(--linie);
}
.anwalt {
  background: var(--grund);
  padding: clamp(1.5rem, 4vw, 2rem);
}
.anwalt .bild {
  margin-bottom: 1.2rem;
}
.anwalt .rolle {
  margin-top: 0.4rem;
  font-family: var(--grotesk);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent);
}
.anwalt p {
  margin-top: 0.9rem;
  color: var(--leise);
  font-size: 0.96rem;
}
.anwalt ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  font-family: var(--grotesk);
  font-size: 0.86rem;
  color: var(--leise);
}
.anwalt li {
  padding: 0.3rem 0;
  border-top: 1px solid var(--linie);
}

/* ---------- Zitat ------------------------------------------------------ */

.zitat {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-block: 1px solid var(--linie);
}
.zitat blockquote {
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
  max-width: 26ch;
}
.zitat cite {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--grotesk);
  font-style: normal;
  font-size: 0.84rem;
  color: var(--leise);
}

/* ---------- Karten für Kontakt ----------------------------------------- */

.karte {
  padding: clamp(1.5rem, 4vw, 2rem);
  border: 1px solid var(--linie);
  background: var(--flaeche);
}
.zeiten {
  display: grid;
  margin: 1rem 0 0;
  font-family: var(--grotesk);
}
.zeiten div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.92rem;
}
.zeiten div:last-child {
  border-bottom: 0;
}
.zeiten dd {
  margin: 0;
  color: var(--leise);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- Pakete (nach 21st.dev „Pricing Section 1") ---------------- */

.pakete {
  background: oklch(0.145 0.025 260);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.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.5rem, 4vw, 2rem);
  background: oklch(0.185 0.028 260);
}
.paket[data-beliebt] {
  background: oklch(0.225 0.03 260);
}
.paket-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.marke-beliebt {
  padding: 0.24rem 0.65rem;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-family: var(--grotesk);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.paket .preis {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 1rem 0 0.4rem;
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.7rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.paket .preis span {
  font-family: var(--grotesk);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--leise);
}
.paket > p {
  color: var(--leise);
  font-size: 0.94rem;
}
.paket ul {
  list-style: none;
  margin: 1.1rem 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-family: var(--grotesk);
  font-size: 0.9rem;
  color: var(--leise);
}
.paket li {
  display: grid;
  grid-template-columns: 0.95rem 1fr;
  gap: 0.6rem;
}
.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%;
}

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

.fuss {
  background: oklch(0.13 0.022 260);
  color: var(--leise);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.6rem;
}
.fuss .marke {
  color: var(--tinte);
  margin-bottom: 0.9rem;
  display: inline-flex;
  flex-direction: column;
}
.fuss a:hover {
  color: var(--tinte);
}

.seitenkopf {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.8rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf p {
  max-width: 56ch;
  margin-top: 1.2rem;
  color: var(--leise);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.18rem);
}
.brotkrume {
  margin-bottom: 1rem;
  font-family: var(--grotesk);
  font-size: 0.78rem;
  color: var(--leise);
}
.brotkrume a {
  color: var(--akzent);
  text-decoration: none;
}

/* ---------- Ab Tablet ---------------------------------------------------- */

@media (min-width: 46rem) {
  .kennung {
    grid-template-columns: repeat(4, 1fr);
  }
  .kennung > div {
    border-right: 1px solid var(--linie);
  }
  .kennung > div:last-child {
    border-right: 0;
  }
  .anwaelte {
    grid-template-columns: repeat(2, 1fr);
  }
  .paketreihe {
    grid-template-columns: repeat(3, 1fr);
  }
  .tafel-zeile {
    grid-template-columns: 1fr 10rem;
    align-items: baseline;
    gap: 1.5rem;
  }
  .tafel-zeile .betrag {
    grid-row: 1 / span 2;
    grid-column: 2;
    text-align: right;
  }
}

@media (min-width: 62rem) {
  .auftritt-in {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: stretch;
  }
  .auftritt-satz {
    padding-right: clamp(2rem, 4vw, 4rem);
  }
  .auftritt-bild {
    min-height: 34rem;
    /* Bis an den rechten Bildschirmrand. Vorher: `calc(-1 * (50vw - 50%))` —
       die 50% lösen sich gegen die GRID-SPALTE auf, nicht gegen den
       Satzspiegel; auf 1440px schob das Bild 314px über den Rand hinaus
       und ein Drittel des Motivs war abgeschnitten. Jetzt wird der
       Abstand aus Satzspiegelbreite und Aussenrand gerechnet. */
    margin-right: calc(-1 * (var(--rand) + max(0px, (100vw - var(--mass)) / 2)));
  }
  .spalten {
    grid-template-columns: 0.8fr 1.6fr;
    gap: 4rem;
  }
  .spalten-titel {
    position: sticky;
    top: 6.5rem;
  }
  .anwaelte {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* =====================================================================
   Feinschliff — ui-ux-pro-max (Kontrast) + impeccable (Craft)
   Gemessene Werte und Begründung: _SKILLS-ANGEWENDET.md
   Feldrand   1.53:1 → 3.20:1  (WCAG 1.4.11, Bedienelement-Rand ≥3:1)
   Platzhalter          → 8.53:1  (WCAG 1.4.3, Fliesstext ≥4.5:1)
   Akzent als Text 9.69:1 → 9.69:1
   Knopfbeschriftung 8.64:1 → 8.64:1
   ===================================================================== */
:root {
  --feld-linie: oklch(0.506 0.028 260);
  --platzhalter: oklch(0.755 0.014 260);
  --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;
  }
}


/* ---------- 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; }
}