/* Audit 18.09.2026: eine Stilebene fuer den ganzen Gang. Zusammengefasst aus
   drei Dateien, weil jede zusaetzliche Datei im Kopf das erste Bild verzoegert
   (Befund 1, render-blocking). Reihenfolge unveraendert. */

/* ===== Kanon-Token (Befund 7) ===== */
/* Audit 18.09.2026, Befund 7: der Kanon-Token-Block, gemeinsam fuer alle elf
   Seiten der Pruefmenge. Er steht byte-gleich aus /assets/styles.css hier, damit
   auch /shop/ und /warenkorb/ ihn tragen - die beiden luden bisher keine der drei
   Dateien, die ihn fuehren (styles.css, umbau.css, typo-v5.css).

   Gemessen und im Bericht belegt: der SAUBERE Weg des Registers - den Block in die
   gemeinsame /styles.css ziehen und aus den Einzeldateien entfernen - haette
   396 Seiten veraendert, nicht elf. Deshalb der enge Weg.

   Ebenfalls gemessen: concept/shop.css referenziert heute KEINEN dieser Token; es
   fuehrt einen eigenen Satz (--s-ink, --s-paper, --s-line, --s-muted, --s-tint).
   Die Datei stellt die gemeinsame Grundlage her, sie macht die Shop-Farben nicht
   von selbst zu Kanon-Farben. Die zwei gemessenen Wertabweichungen stehen als
   Owner-Entscheid im Bericht. */
:root{
  --ink:#1d1d1f;
  --ink-mid:#474747;
  --ink-soft:#5F6763;
  --hairline:#d6d6d6;
  --canvas:#f5f5f7;
  --paper:#ffffff;
  --wash:#e8e8ed;
  --nav-scrolled:rgba(250,250,252,0.72);
  --blue:#087867;
  --blue-press:#066A5A;
  --link:#087867;
  --ember:#b64400;

  --finish-sky:#c8d8e0;
  --finish-citrus:#dddc8c;
  --finish-starlight:#f0e4d3;
  --finish-silver:#e3e4e5;
  --finish-blush:#e8d0d0;
  --finish-indigo:#596680;
  --finish-midnight:#2e3642;

  --font:'SF Pro Display','SF Pro Text',Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --fs-micro:12px;
  --fs-caption:14px;
  --fs-body:17px;
  --fs-body-lg:21px;
  --fs-subhead:clamp(1.3125rem,1.1rem + 1vw,1.75rem);   /* 21 -> 28 */
  --fs-h3:clamp(2.5rem,2.2rem + 1.2vw,2.75rem);          /* 40 -> 44 */
  --fs-h2:clamp(2.5rem,2rem + 2.4vw,3.5rem);             /* 40 -> 56 */
  --fs-h1:clamp(2.5rem,1.4rem + 5vw,6rem);               /* 40 -> 96 */

  --container:1200px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --section:clamp(4rem,9vw,7.5rem);

  --r-card:28px;
  --r-tile:20px;
  --r-pill:980px;
  --r-badge:36px;
  --r-link:10px;
}

/* ===== Korrekturen der Runde 3 bis 5 ===== */
/* Audit 18.09.2026, Runde 3. Eine Datei fuer die elf kleinen Befunde aus dem
   Register. Sie laedt als letzte und korrigiert gezielt, ohne eine der
   bestehenden Stilebenen umzuschreiben. Jede Regel traegt ihre Befundnummer. */

/* --- Befund 22 (Hallmark 51): grosse Ueberschriften ohne Umbruchstelle.
   Heute tritt kein Ueberlauf auf, der naechste lange Produktname loest ihn aus. */
body :is(h1, h2), body :is(.m-display, .era-display, .k-display) {
  overflow-wrap: break-word !important;
  min-width: 0;
}

/* --- Befund 19 (Hallmark 44): die untere Hero-Polsterung fuehrt in den naechsten
   Abschnitt, statt den Hero darueber schweben zu lassen. Sollwert 1,3x oben. */
.era-world-hero { padding-bottom: 88px; }
.k-system-intro { padding-bottom: 106px; }
.section.page-intro { padding-bottom: 106px; }
.r-scanner { padding-bottom: 70px; }

/* --- Befund 18 (Hallmark 44b): auf 390 px war der Hero hoeher als das Sichtfeld,
   die Komposition wurde von der Falz durchgeschnitten. */
@media (max-width: 700px) {
  .era-world-hero { padding: 30px 22px 40px; gap: 22px; }
  .era-world-hero h1 { font-size: 46px; line-height: 1.06; margin-bottom: 18px; }
  .era-world-hero > div > p:not(.era-eyebrow) { font-size: 15px; margin-bottom: 16px; }
  .era-world-hero figure img { height: 290px; }
  .s-shop-hero { padding-top: 26px; padding-bottom: 36px; }
  .s-shop-hero h1 { font-size: 36px; line-height: 1.06; }
  /* Das Kopfbild trug 488 px und schob den Hero auf 984 px. */
  .s-shop-hero .s-hero-art img { max-height: 340px; object-fit: cover; }
}

/* --- Befund 20 (Hallmark 25): Prosa lief bis 190 Zeichen je Zeile. Sollwert sind
   75 Zeichen, gerechnet als halbe Schriftgroesse je Zeichen - also 37,5em. 36em
   laesst Luft. Gemessen: bis auf die Einstiegszeile sind alle betroffenen Absaetze
   linksbuendig, die Grenze verschiebt dort nichts ausser der Zeilenlaenge. */
body p { max-width: min(36em, 100%) !important; }
/* Die Einstiegszeile trug max-width:660px !important (77,6 Zeichen). */
.k-corrected .r-scanner .r-scan-description, .r-scan-description { max-width: 620px !important; margin-inline: auto; }
/* Kleiner gesetzte Absaetze brauchen eine engere Grenze: 75 Zeichen sind 37,5em,
   bei 12 px also 450 px, nicht 620. */
body :is(.era-journey-note, .era-tax),
body :is(.story-horizontal, .story-journey) .era-journey-note { max-width: 36em !important; }
body .era-journey-note { margin-inline: auto; }
/* Bausteine, die ihre Spaltenbreite tragen sollen, bleiben aussen vor. */
body :is(td, th, figcaption, .k-plan-number, .footer-bottom, .s-notice, .k-fine, table, .era-eyebrow) p,
body :is(td p, th p),
body p:is(.k-plan-number, .era-eyebrow, .s-eyebrow, .k-plan-price) { max-width: none !important; }

/* --- Befund 23 (Hallmark 56): zwei Bausteine klebten gleichzeitig auf top:0.
   Der Kopf gewinnt, der klebende Baustein im Inhalt setzt unter ihm auf. */
:root { --kopfhoehe: 84px; }
@media (max-width: 700px) { :root { --kopfhoehe: 96px; } }
.era-header { z-index: 90; }
.k-modal-top { top: var(--kopfhoehe); z-index: 2; }

/* --- Befund 28 (Hallmark 14): der feste Kopf animierte height und padding und
   zwang den Browser bei jedem Bild zu einem neuen Layout. Gleiche Bauart wie der
   Befund N5/N7b vom 17.09. Der Wechsel bleibt, der Uebergang faellt weg. */
@media (max-width: 700px) {
  body.era-theme .era-header { transition: none !important; }
}

/* --- Befund 12: das Video-Element der Marketing-Welt war der einzige Haltepunkt
   im Auftritt ohne sichtbaren Fokusring. */
body video:focus-within,
body video:focus-visible,
body video:focus,
body :is(.wc-film, [data-video], .m-video):focus-visible {
  outline: 2px solid #0A7E68 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(10, 126, 104, .25) !important;
}

/* --- Befund 30 (Hallmark 39b): der Eingabeblock des Website-Checks traegt seine
   Kante am Rahmen, nicht am Feld. Die Kante wird deutlicher, das Feld bekommt im
   Ruhezustand eine eigene, damit es als Feld erkennbar ist. Zustandswechsel ueber
   Grund und Umriss, nie ueber die Rahmenbreite. */
.r-scan-input { border-color: #5F6763; }
.r-scan-input input {
  border: 1px solid transparent !important;
  background: #fffdf7 !important;
  transition: background-color .15s ease;
}
.r-scan-input input:hover { background: #fff !important; }
.r-scan-input input:focus-visible {
  outline: 2px solid #0A7E68;
  outline-offset: -2px;
  background: #fff !important;
}

/* --- Befund 31 (Hallmark 54): Kapitelzeile und Ueberschrift standen in derselben
   Rasterzeile nebeneinander - das erkennbare Muster "Nummer links, Titel rechts".
   Beide Bausteine stehen jetzt auf einer Spalte, die Kapitelzeile ueber dem Titel. */
body .k-plan, body .quality-packages-ready .k-plan { grid-template-columns: 1fr !important; }
body .k-plan > * { min-width: 0; }
body .k-plan > * { grid-column: 1 !important; }
body .k-plan .k-plan-number { grid-row: auto !important; align-self: start; }
body .k-spatial-intro { grid-template-columns: 1fr !important; }
body .k-spatial-intro > * { grid-column: 1 !important; }

/* --- Befund 25: zwei Kleintexte im Markenraum standen bei 8 und 9 px mit Kontrast
   4,0 auf dem Motivgrund #718474. Unter 12 px ist unabhaengig vom Kontrast keine
   vertretbare Lesegroesse; der Grund wird eine Stufe dunkler, damit Weiss auf ihm
   die 4,5 erreicht (gerechnet 5,3). */
.era-social-motif { background: #5F6F62; }
.era-hero-seal > span { font-size: 12px; letter-spacing: .16em; }
.era-tine-statement > span { font-size: 12px; letter-spacing: .16em; }

/* --- Befund 32: der Einstieg in den Markenraum fuellte auf dem Laptop nur ein
   Drittel des Sichtfelds, das untere Drittel blieb leer. Der Textblock steht jetzt
   vertikal mittig, statt oben zu kleben; das Bild bleibt in seiner Choreografie. */
@media (min-width: 701px) {
  html.m-on #markenraum .k-spatial-intro {
    top: 50%;
    transform: translateY(-50%);
  }
}

/* --- Befund 7, Teilbefund mit eigener Messung: die Ueberschrift des Warenkorbs
   lief als einzige Seitenueberschrift des Auftritts in Outfit 500 statt in der
   Anzeigeschrift Bodoni Moda 400. Die Serif-Regel in concept/shop.css nennt
   .s-hero-copy h1, .s-category-intro h1 und .s-section-heading h2 - .s-flow-page h1
   fehlte darin. */
.s-flow-page h1 { font-family: var(--era-serif, 'Bodoni Moda', Georgia, serif); font-weight: 400; letter-spacing: -.035em; }

/* --- Befund 8: "Assistent" auf /partner/ heisst im Hauptmenue "Assistenten".
   Die Schreibweise wird im HTML gesetzt, nicht hier; diese Zeile haelt nur die
   Fundstelle fest. */

/* --- Befund 14: die kursiv gesetzte zweite Ueberschriftenzeile ist ein bewusstes
   Stilmittel des Hauses, aber auf der Startseite trugen es 16 von 16 Ueberschriften.
   Es bleibt in den erzaehlenden Raeumen (Einstieg, Welten, Marketing, Brand,
   Markenraum, Gespraech) und faellt in den Erklaerabschnitten weg. Damit bleibt die
   Handschrift, die Gleichfoermigkeit geht. Zum Zurueckdrehen genuegt dieser Block. */
#websites > .r-web-opening h2 em,
h2#website-packages-title em,
h2#connection-title em,
#betreuung h2 em {
  font-style: normal;
}