/* Feinschliff (01.11.2026): einheitliche Typografie, Fokus, Leerzustände und ruhigere Raster auf den Hauptseiten.
   Wird im Root-Layout als letzte Datei geladen (nach unten.css) und verfeinert nur – Struktur und Farben bleiben. */

/* ── Typografie ─────────────────────────────────────────────────────────── */
/* Ausgewogene Zeilenumbrüche in Überschriften, keine Einzelwörter am Absatzende */
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
/* Lange deutsche Wörter (z. B. „Hochzeitsfotografie“) auf dem Handy sauber trennen statt mitten im Wort abzuschneiden */
@media (max-width: 600px) {
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}

/* ── Fokus, Auswahl, Bewegung ───────────────────────────────────────────── */
/* Sichtbarer Tastatur-Fokus überall dort, wo keine eigene Regel greift (:where = Spezifität 0) */
:where(a, button, summary, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
::selection { background: var(--mint); color: var(--fg); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Startseite ─────────────────────────────────────────────────────────── */
/* „So einfach geht’s“: am Desktop als ein Ablauf in fünf gleich breiten Schritten statt 3 + 2 */
@media (min-width: 1100px) {
  .v10-mini { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .v10-mini li { flex-direction: column; gap: 12px; padding: 18px 16px 20px; }
}
/* … am Handy als ruhige Zeitleiste statt fünf einzelner Karten */
@media (max-width: 767.98px) {
  .v10-mini { gap: 0; }
  .v10-mini li { position: relative; background: none; border: 0; border-radius: 0; padding: 0 0 18px; }
  .v10-mini li:not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 44px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--mint); }
}
/* Icons der Vorteile: einheitliche Linien-Icons */
.h8-ic svg { display: block; }
/* Städte rund um München: am Desktop zwei volle Reihen à 7 statt einer Restreihe */
@media (min-width: 1100px) {
  .h8-cities { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.h8-city b { -webkit-hyphens: auto; hyphens: auto; }

/* ── Suche: Stil-Kacheln ohne Beispielbild ──────────────────────────────── */
span.stf-i { background: linear-gradient(160deg, var(--mint2) 0%, var(--panel2) 100%); color: var(--green); font-family: var(--fd); letter-spacing: .02em; }

/* ── Ratgeber-Artikel: Inhaltsverzeichnis am Desktop immer sichtbar ─────── */
.bl-toc-d { display: none; }
@media (min-width: 861px) {
  .bl-grid { grid-template-columns: 240px minmax(0, 760px); }
  .bl-toc-m { display: none; }
  .bl-toc-d { display: block; margin: 2px 0 10px; border-left: 2px solid var(--line); }
  .bl-toc-d b { display: block; margin: 0 0 6px 14px; font-size: 13px; font-weight: 700; color: var(--fg3); }
  .bl-toc-d ol { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 280px); overflow: auto; font-size: 13.5px; line-height: 1.35; }
  .bl-toc-d a { display: block; margin-left: -2px; padding: 5px 10px 5px 14px; border-left: 2px solid transparent; color: var(--fg2); text-decoration: none; }
  .bl-toc-d a:hover { color: var(--green); border-left-color: var(--green); }
}

/* ── Fotografen-Bereich: Leerzustände mit ruhigem Icon statt nacktem Text ─ */
.dsh-empty { max-width: 52ch; margin-left: auto; margin-right: auto; line-height: 1.55; }
.dsh-empty::before {
  content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 14px;
  background: var(--mint2) center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7A55' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.5 6.5 5h11l2.5 8.5'/%3E%3Cpath d='M4 13.5V19h16v-5.5h-5a3 3 0 0 1-6 0z'/%3E%3C/svg%3E");
}
/* 13 Städte: München über zwei Spalten, damit beide Reihen voll sind */
@media (min-width: 1100px) {
  .h8-cities:has(> :nth-child(13):last-child) > :first-child { grid-column: span 2; }
}

/* ── Eigene Seite (Landingpage): „Über mich“ ohne Porträt nicht in die schmale Bildspalte quetschen ── */
.lp-ueber-g:not(:has(> .lp-portrait)) { grid-template-columns: minmax(0, 680px); }

/* ── Ratgeber: Sprungziele nicht unter der festen Kopfzeile verstecken ── */
.bl-prose h2, .bl-prose h3 { scroll-margin-top: 88px; }
/* Ratgeber-Karten: „Weiterlesen“ immer unten, damit die Links einer Reihe auf einer Linie stehen */
.bl-card { display: flex; flex-direction: column; }
.bl-card .bl-more { margin-top: auto; padding-top: 6px; }

/* ── Mein Konto: Seitenleiste breit genug für „Suchaufträge & Anfragen“ samt Zähler ── */
@media (min-width: 861px) {
  .acc-grid { grid-template-columns: 250px minmax(0, 1fr); }
}
.acc-nav a { align-items: center; gap: 8px; }

/* ── Karten-Links: beim Überfahren nicht den ganzen Karteninhalt unterstreichen (nur Schatten/Hebung) ── */
a:is(.bl-card, .bl-feat, .h8-city, .h8-tease, .card, .dsh-kpi, .kd-row-l, .vc-ph, .acc-mini-i, .chip):hover { text-decoration: none; }
.dsh-list a:hover, .tl a:hover, .ib-l a:hover { text-decoration: none; }
a.bl-card { transition: box-shadow .15s ease, border-color .15s ease; }
a.bl-card:hover { border-color: var(--line2); box-shadow: var(--sh); }
a.bl-card:hover h3 { color: var(--green); }

/* ── Ratgeber-Tabellen am Handy: lange deutsche Wörter trennen statt seitlich scrollen (lang="de" am <html>).
      Nur lange Wörter (ab 10 Zeichen, je Teil mind. 5), damit „Dezember“ oder „Gemeinde“ ganz bleiben.
      Vor Fußnoten in Zellen setzt ratgeber-convert.py ein schmales Leerzeichen, damit auch das Wort davor getrennt werden kann. ── */
table.bl-t td, table.bl-t th {
  -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 10 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5;
}
@media (max-width: 480px) {
  table.bl-t { font-size: 14px; }
  table.bl-t td, table.bl-t th { padding: 7px 6px; }
  /* ab vier Spalten etwas kompakter */
  table.bl-t:has(tr > :nth-child(4)) { font-size: 13px; }
  table.bl-t:has(tr > :nth-child(4)) :is(td, th) { padding: 6px 4px; }
}
/* ── Design-Feinschliff 03.11.2026 (Durchgang über alle CI-Aufnahmen, 390 + 1440 px) ───────────── */
/* Leiser Text (--fg3: Meta-Zeilen, „tiny“, Zeitstempel) war mit #7A8590 nur 3,8 : 1 auf Weiß bzw. 3,4 : 1 auf den hellgrauen Flächen –
   unter WCAG AA (4,5 : 1). #646F7A: ≥ 4,6 : 1 auf allen hellen Flächen, bleibt sichtbar heller als --fg2 */
:root { --fg3: #646F7A; }
/* Chat: Uhrzeiten in den Blasen waren zusätzlich auf 72 % abgeblendet (2,4 : 1) – volle Deckkraft, auf Grün etwas kräftigeres Weiß */
.cw .bub time { opacity: 1; }
.cw .cw-row.me .bub time { color: rgba(255, 255, 255, .92); }
/* „Veröffentlicht in“ (Presse-Band): #8a7a68 bei 10–11 px nur 4,2 : 1 */
.feat-k { color: #75674F; }
/* Tippflächen am Handy mindestens 44 px (Apple-Richtlinie; Knöpfe waren 40–42 px, kleine Symbole 22–36 px).
   Das Herz auf Profilkarten behält seine Größe, bekommt aber eine unsichtbar größere Trefferfläche. */
@media (max-width: 860px) {
  .btn { min-height: 44px; }
  .mg-alt .btn { width: 44px; }
  .mg-alt .inp { min-height: 44px; }
  .vc .fav::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
}
@media (max-width: 767.98px) {
  .dsh-back { width: 44px; height: 44px; margin-left: -4px; }
  .kd-check li { padding: 0; }
  .kd-check label { flex: 1; min-height: 44px; }
  .kd-x { min-width: 44px; min-height: 44px; opacity: .75; }
}
/* Profilkarten am Handy: „Beispielfotos ansehen“ brach neben „Profil ansehen“ zweizeilig um → kurz „Beispielfotos“ */
@media (max-width: 520px) { .vc-a .pm-zusatz, .prof-a .pm-zusatz { display: none; } }
/* … und „Individuelles Angebot“ immer rechtsbündig (sprang je nach Länge der Bewertungszeile zwischen links und rechts) */
@media (max-width: 860px) { .vc-p { margin-left: auto; text-align: right; } }
/* Silbentrennung in Überschriften (Handy-Regel oben) nur bei langen Wörtern und mit mind. 9 Zeichen je Seite:
   „Hochzeits-fotografen“ statt „Hochzeitsfo-tografen“ bzw. „Hoch-zeitsfotografie“ (Browser ohne Unterstützung trennen wie bisher) */
@media (max-width: 600px) { h1, h2, h3 { hyphenate-limit-chars: 18 9 9; } }
/* Ratgeber: Fußnoten-Verweise [1] vergrößerten den Abstand ihrer Zeile (unruhiger Satz); Tippfläche größer, ohne den Satz zu verändern */
sup.bl-ref { line-height: 0; font-size: .72em; vertical-align: baseline; position: relative; top: -.42em; }
sup.bl-ref a { padding: 10px 2px; text-decoration: none; font-weight: 600; }
/* Anmelden/Registrieren am Handy: Lena verdeckte das rechte Ende von E-Mail-Feld und „Anmelden“ – auf dem Formular ausblenden */
@media (max-width: 860px) { html body:has(.ap-tabs) .as-fab.as-fab.as-fab.as-fab { display: none !important; } }
/* So funktioniert's: vier Vorteile als 2 × 2 statt 3 + einzelnes „✓ sicher“ in der zweiten Zeile */
@media (max-width: 480px) { .v10-pills { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; } .v10-pills span { text-align: center; } }
/* Fotografen-Bereich am Handy: Max' runder Knopf lag über „Speichern“ (Profil-Editor, Leiste .pe-bar) bzw. „Seite öffnen“
   (Eigene Seite, .lpe-save) – über die Speichern-Leiste heben (unten.css hebt dort bisher nur die Ansicht-Pille) */
@media (max-width: 767.98px) {
  html body:has(.pe-bar) .fa-fab.fa-fab { bottom: calc(136px + env(safe-area-inset-bottom)) !important; }
  html body:has(.lpe-save) .fa-fab.fa-fab { bottom: calc(158px + env(safe-area-inset-bottom)) !important; }
}
/* Fotografen-Chat am Desktop: bei gebuchten Unterhaltungen (zwei Angebote + Rechnung) füllten die Karten die ganze Spalte, Verlauf und
   Eingabe lagen abgeschnitten darunter (Spalte mit overflow:hidden, bei 1440 × 900 nicht erreichbar). Jetzt scrollt die Spalte als Ganzes
   wie am Handy (unten.css): Kopf oben und Eingabe unten bleiben stehen, Chat.tsx springt beim Öffnen ans Ende; kurze Verläufe füllen
   die Höhe wie bisher (Eingabe unten). */
@media (min-width: 761px) {
  .dsh-inbox[data-testid="sec-thread"] .ib-r { overflow-y: auto; overscroll-behavior: contain; }
  .dsh-inbox[data-testid="sec-thread"] .ib-r > * { flex-shrink: 0; }
  .dsh-inbox[data-testid="sec-thread"] .ib-r > .th { position: sticky; top: 0; z-index: 6; background: var(--panel, #fff); }
  .dsh-inbox[data-testid="sec-thread"] .ib-r > .chat { flex: 1 0 auto; min-height: 0; }
  .dsh-inbox[data-testid="sec-thread"] .chat-msgs { flex: 1 0 auto; overflow: visible; min-height: 160px; }
  .dsh-inbox[data-testid="sec-thread"] .chat-in { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -8px 18px -14px rgba(16, 20, 24, .45); }
}
/* Fotografen-Bereich, Formularreihen: nie breiter als die Karte – „1fr“ (= minmax(auto, 1fr)) ließ in Einstellungen → „Identität & Gewerbe“
   Auswahl und Dateifeld am Handy über den Kartenrand ragen (gleiches Muster wie bei der Werbung) */
.pe-row > *, .pe-row3 > * { min-width: 0; }
/* Mehrere anfragen, Vorschläge am Handy: Sterne und „Profil“ unter den Text statt daneben – der Begründungstext stand sonst in einer
   schmalen Spalte („Bewertungen · 6 km / entfernt · am / Wunschtermin nicht / als belegt markiert“) */
@media (max-width: 560px) {
  label.sug { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center; }
  label.sug > input { grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
  label.sug > div { grid-column: 2 / -1; min-width: 0; }
  label.sug > .stars, label.sug > span.small { grid-column: 2; }
  label.sug > a { grid-column: 3; justify-self: end; padding: 10px 0 10px 12px; }
}
/* Suchauftrag, Angebote im Vergleich: Tabelle scrollt seitlich – „Nachricht schreiben“ einzeilig statt zweizeilig in der 170-px-Spalte */
.cmp .btn { white-space: nowrap; }
/* Admin-Formulare mit Feld + Knopf (Ablehnen, E-Mail, API-Schlüssel): am Handy darf der Knopf in die nächste Zeile („Ablehnen & Abo beenden“ brach dreizeilig um) */
@media (max-width: 560px) { form.item-row { flex-wrap: wrap; } form.item-row > .inp { flex: 1 1 200px; min-width: 0; } }
/* Admin → Werbung, Preiszeilen: Eingaben einer Reihe auf einer Linie, auch wenn „€ netto / Woche“ zweizeilig ist */
.item-row:has(> label) { align-items: flex-end; }
.item-row > label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Fotografen-Bereich, Listen mit Datum + Status („Kommende Termine“): am Handy Status unter den Titel, statt „Katharina · / Freising“ umzubrechen */
@media (max-width: 480px) {
  .dsh-list li > a:has(> .dsh-date):has(> .badge) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; }
  .dsh-list li > a:has(> .dsh-date):has(> .badge) > .dsh-date { grid-row: span 2; }
  .dsh-list li > a:has(> .dsh-date):has(> .badge) > .badge { grid-column: 2; justify-self: start; }
}
/* Für Fotografen, Rechner: Felder einer Reihe auf einer Linie, auch wenn eine Beschriftung zweizeilig ist („Fragebögen & Formulare“) */
.ffv-feld { display: flex; flex-direction: column; justify-content: flex-end; }
/* Stadtseite: „Alle 172 Hochzeitsfotografen in Berlin ansehen“ brach am Handy zweizeilig um – dort ohne Ortsnamen (steht in der Überschrift) */
@media (max-width: 480px) { .city-alle-ort { display: none; } }
/* Stadtseite unten: „Häufige Fragen“ und „Ratgeber“ klebten am Abschnitt davor – gleicher Abstand zwischen allen drei Blöcken */
.city-more > h2 { font-size: clamp(21px, 2.4vw, 26px); margin: 0 0 12px; }
.city-more > h2:not(:first-child) { margin-top: 36px; }
.city-more > .chips { margin: 0; gap: 8px; }
.city-more > ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
/* Stadtseite: „… in Zahlen“ (Go-Live-SEO 07.11.2026) – ruhige Faktenliste vor „In der Nähe“, gleiche Karte wie die Fragen */
.city-zahlen { margin-top: 32px; }
.city-zahlen > h2 { font-size: clamp(21px, 2.4vw, 26px); margin: 0 0 12px; }
.city-zahlen > ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.city-zahlen > ul > li { padding: 12px 14px; line-height: 1.5; }
.city-zahlen > ul > li + li { border-top: 1px solid var(--line); }
.city-zahlen > p { margin: 8px 2px 0; }
/* Buchungsschutz: Schritt-Titel standen ohne Abstand vor dem Text („Angebot digital annehmenLeistungsumfang …“) */
.flow li > b { display: block; margin-bottom: 2px; }
.flow li > span { color: var(--fg2); }
/* Profil, Pakete: Lücke unter dem Paketnamen (leere Faktenzeile + space-between) – Inhalt oben, Preis unten auf einer Linie */
.pks .pk { justify-content: flex-start; gap: 6px; }
.pks .pk > :empty, .lp-pk-k > ul:empty { display: none; }
.pks .pk > p { margin: 0; }
.pks .pk > .pr { margin-top: auto; padding-top: 8px; }
/* Projektseite: Paar · Datum · Ort als Einheiten – Umbruch zwischen den Teilen statt mitten im Ort („Villa / Rizzardi“) */
.pjg-meta-t { display: inline-block; max-width: 100%; }
/* Namen von Studios nie automatisch trennen (die Handy-Regel trennte „AERO BER-LIN Photography“); überlange Wörter brechen weiter um */
.prof-t h1, .vc h3 { -webkit-hyphens: manual; hyphens: manual; }
/* Profil am Handy: Anfrage-Leiste mit einzeiligem Knopf; links Bewertung/Ort + Hinweis, der bei Bedarf umbricht */
@media (max-width: 860px) {
  .mob-cta > div { min-width: 0; line-height: 1.3; }
  .mob-cta > .btn { flex: none; white-space: nowrap; padding: 11px 15px; font-size: 14.5px; min-height: 44px; }
}
/* Profilseite und Bestenliste am Desktop: Lena nur als runder Avatar wie auf Seiten mit Profilkarten (unten.css, body:has(.vc)) –
   die Pille lag über dem Anfrageformular bzw. über „Profil ansehen“ in der rechten Spalte der Liste */
@media (min-width: 768px) {
  html body:has(.prof) .as-fab.as-fab > .as-fab-t.as-fab-t.as-fab-t.as-fab-t,
  html body:has(.bl100) .as-fab.as-fab > .as-fab-t.as-fab-t.as-fab-t.as-fab-t { display: none !important; }
  html body:has(.prof) .as-fab.as-fab:hover > .as-fab-t.as-fab-t.as-fab-t.as-fab-t,
  html body:has(.prof) .as-fab.as-fab:focus-visible > .as-fab-t.as-fab-t.as-fab-t.as-fab-t,
  html body:has(.bl100) .as-fab.as-fab:hover > .as-fab-t.as-fab-t.as-fab-t.as-fab-t,
  html body:has(.bl100) .as-fab.as-fab:focus-visible > .as-fab-t.as-fab-t.as-fab-t.as-fab-t { display: block !important; }
}
/* Ratgeber: {{plattform-zahlen}} – Live-Zahlen wie der Ranking-Kasten, Zahlen groß links (Go-Live 07.11.2026) */
.bl-zahlen { border: 1px solid #e3ece6; border-radius: 14px; padding: 12px 14px; margin: 18px 0; }
.bl-zahlen dl { margin: 8px 0 0; display: grid; gap: 0; }
.bl-zahlen dl > div { display: grid; grid-template-columns: minmax(64px, max-content) 1fr; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid #f0f0f0; }
.bl-zahlen dt { font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.bl-zahlen dd { margin: 0; color: var(--fg2); line-height: 1.45; }

/* /anfrage/mehrere – Angaben als Formular (07.11.2026): Zeile „Eure Angaben“ und Überschrift über den Vorschlägen */
.ki-angaben{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-top:18px}
.ki-angaben .tiny{color:var(--fg2)}
.ki-h{font-size:20px;line-height:1.3;margin:22px 0 10px}