/* Web-Anbau – Feinschliff „modern und präzise“.
   Wird nach site.css geladen (Schrift und Farbtoken stehen dort): schmalere, leichtere Überschriften in Graphit,
   große Flächen in Graphit statt Blau, gerade Etiketten, ein feiner Stempel, eine ruhige Bildbearbeitung. */

html { scrollbar-color: var(--text) var(--raster); }
body { line-height: 1.55; }

/* ---------- Schrift: schmaler, leichter, schwarz statt blau ---------- */
h1, h2 { color: var(--text); font-weight: 600; font-stretch: 88%; letter-spacing: -0.032em; line-height: 0.98; }
h3 { color: var(--text); font-weight: 600; font-stretch: 94%; letter-spacing: -0.012em; }
strong { font-weight: 600; }
.held-titel { font-size: min(7.6vw, 7.75rem); line-height: 0.92; letter-spacing: -0.04em; }
@media (max-width: 47.99em) { .held-titel { font-size: 15vw; } }
.schau-satz, .kontakt-titel, .recht-titel { font-weight: 600; font-stretch: 88%; }
.marke { font-weight: 650; font-stretch: 90%; letter-spacing: -0.02em; }
.fuer-absatz { font-weight: 400; letter-spacing: -0.01em; }
.fuer-titel { font-weight: 600; }
.frage-f { font-weight: 550; }
.kontakt-mail { font-weight: 600; font-stretch: 85%; letter-spacing: -0.04em; }
.fuss-name { color: var(--text); font-weight: 600; font-stretch: 82%; letter-spacing: -0.05em; }

/* ---------- Farbe: Text und Ränder in Graphit, Ultramarin nur als Akzent ---------- */
.kopf, .held-aktion, .preis-aktion, .fuss-meta nav, .fuss-oben a, .recht-inhalt a { color: var(--text); }
.recht-inhalt a.knopf { color: var(--auf-tinte); }
.kontakt-formular { position: relative; grid-column: 1 / 9; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem var(--gutter); justify-items: start; margin-top: 4rem; }
.feld { display: grid; gap: 0.5rem; width: 100%; font-weight: 650; }
.feld input, .feld textarea { width: 100%; min-height: 3.25rem; padding: 0.75rem 0.9rem; border: 1px solid var(--auf-tinte-2); border-radius: 0; background: rgb(255 255 255 / 0.08); color: var(--auf-tinte); font: inherit; font-weight: 400; }
.feld textarea { min-height: 10rem; resize: vertical; }
.feld-breit { grid-column: 1 / -1; }
.feld-hinweis { color: var(--auf-tinte-2); font-size: var(--step-small); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 47.99em) {
  .kontakt-formular { grid-column: 1; grid-template-columns: 1fr; margin-top: 2.5rem; }
}
.held-fakten strong, .tafel-text strong { color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--tinte); }
}

/* Große Flächen in Graphit statt Blau */
.schau, .kontakt, .recht-kopf { background: var(--graphit); }
.ansatz-foto::before { background: var(--graphit); }
.studie-wahl[aria-pressed="true"] { color: var(--graphit); }
.knopf-hell { color: var(--graphit); }
.kontakt ::selection, .recht-kopf ::selection { color: var(--graphit); }
@media (hover: hover) and (pointer: fine) {
  .knopf-hell:hover { background: #ffffff; }
}

/* Der Preis steht auf Graphit, das Etikett bleibt der eine kräftige Farbpunkt */
.preis { background: var(--graphit); color: var(--auf-tinte); }
.preis h2 { color: var(--auf-tinte); }
.preis-aktion { color: var(--auf-tinte); }
.preis ::selection { background: var(--auf-tinte); color: var(--graphit); }
.preis :focus-visible { outline-color: var(--auf-tinte); }

/* ---------- Stempel: fein, gerade, ohne raue Kante ---------- */
.stempel, .keks-stempel, .stempel-abdruck { color: var(--text); }
.stempel { width: clamp(5.5rem, 7.5vw, 7.25rem); rotate: 0deg; }
.stempel g, .keks-stempel g, .stempel-abdruck g { filter: none; }
.stempel circle:first-of-type, .keks-stempel circle:first-of-type, .stempel-abdruck circle:first-of-type { stroke-width: 3; }
.stempel circle:last-of-type, .keks-stempel circle:last-of-type, .stempel-abdruck circle:last-of-type { stroke-width: 1.5; }
.stempel-rund { font-weight: 600; }
.stempel-mitte { font-weight: 650; }
.keks-stempel { transform: none; }

/* ---------- Etiketten: gerade Schilder statt schief geklebter Aufkleber ---------- */
.tafel-verb { font-size: clamp(3rem, 1rem + 5.6vw, 7rem); }
.tafel-verb h2, .tafel:nth-child(even) .tafel-verb h2 { rotate: 0deg; padding: 0.08em 0.28em 0.14em; }
.preis-etikett { rotate: 0deg; padding: 0.04em 0.24em 0.1em; }
@media (hover: hover) and (pointer: fine) {
  .preis-etikett:hover { rotate: 0deg; scale: 1.02; }
  .rahmchen:hover { transform: scale(2.4); }
}
.intro.ist-live .intro-etikett, .intro.ist-schmal .intro-etikett { rotate: 0deg; color: var(--text); font-weight: 600; font-stretch: 88%; }

/* ---------- Fotos: eine ruhige, einheitliche Bildbearbeitung ---------- */
.held-bild img, .ansatz-foto img, .zeile-bild, .tafel-bild, .rahmchen img { filter: saturate(0.9) contrast(1.03); }

/* ---------- Wer dahintersteht: Foto links, Text rechts ---------- */
.ueber { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; padding: var(--section) var(--margin) 0; }
.ueber-foto { grid-column: 1 / 5; margin: 0; aspect-ratio: 4 / 5; }
.ueber-foto img { width: 100%; height: 100%; object-fit: cover; }
.platzfoto { display: grid; place-items: center; background: var(--raster); color: var(--text-2); }
.ueber-text { grid-column: 6 / 13; display: grid; gap: 1.25rem; max-width: 34em; font-size: var(--step-lead); line-height: 1.38; }
.ueber-text h2 { font-size: var(--step-head); margin-bottom: 0.5rem; }
@media (max-width: 47.99em) {
  .ueber { grid-template-columns: 1fr; row-gap: 2rem; }
  .ueber-foto { grid-column: 1; width: 70%; }
  .ueber-text { grid-column: 1; font-size: var(--step-body); }
}

/* Hochformat-Ausschnitt: Das Schild hängt in der linken Bildhälfte */
.zeile-bild--schild { object-position: 22% 50%; }

/* Preisteil: zwei Absätze in einer Spalte */
.preis-text { grid-column: 1 / 7; display: grid; gap: 1.25rem; }
.preis-text p { grid-column: auto; }
@media (max-width: 47.99em) { .preis-text { grid-column: 1; } }

/* Platzhalter dürfen im Text umbrechen und auf Graphit lesbar bleiben */
.platz { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kontakt .link { color: inherit; }

/* Gestapelte Fragen auf dem Tablet: die Antwort darf die Breite nutzen */
@media (max-width: 63.99em) {
  .frage-a { max-width: 62ch; }
}
/* Archivo braucht etwas mehr Zeilenhöhe, damit die Überschrift in ihrer Zeile bleibt */
.recht-teil h2 { line-height: 1.3; }