/**
 * Feinschliff - Variante B (13.10.2026)
 *
 * Jonas: "ein sehr lightes aber durchdacht perfektioniertes designupgrade",
 * zuerst fuer Mobil ("da ist viel bedarf!!!"), dann Desktop. Lesbarkeit,
 * Umbrueche, Schriftgroessen, Raumnutzung. Design, Farben und Schriften
 * bleiben die der Kanzlei.
 *
 * Jede Regel steht bei dem Befund, der sie begruendet. Wer die Datei
 * entfernt, hat exakt Variante A.
 *
 * Gemessen am 13.10.2026 (Chrome, 375 und 1440 px):
 *   Kachellisten Startseite  Arial 16 px, "work_sans" 12 px und 18 px
 *                            gemischt - die Schrift work_sans wird gar nicht
 *                            geladen, es erscheint Helvetica
 *   Fliesstext               Roboto 15 px
 *   Kacheltitel              Libre Baskerville 28 px, Laufweite -0,9 px
 *   Teamfoto Anwaelte        1873 x 840 px im 500 px hohen blauen Kasten
 */

/* ------------------------------------------------------- 1. Umbrueche
 * Ueberschriften: kein einzelnes Wort allein in der letzten Zeile, Zeilen
 * etwa gleich lang. "E-Commerce" und kurze Nachsaetze ("Wir helfen!")
 * bleiben zusammen - die Spannen dafuer setzt der Paketbau (schenk-nb).
 */
h1, h2, h3, h4, .elementor-heading-title, .gt3-core-imagebox-title {
  text-wrap: balance;
}
/* Mit Satzgrenze nicht ausbalancieren: Dort soll der Umbruch NACH dem
 * Fragezeichen liegen ("Versicherung zahlt nicht? / Wir helfen!"), nicht in
 * der Mitte des ersten Satzes. */
.schenk-satz { text-wrap: wrap; }
.schenk-nb { white-space: nowrap; }

/* Kurze Texte: keine Einzelwoerter am Ende. Nicht fuer lange Absaetze -
 * dort erzeugt "pretty" im Chrome sichtbar verkuerzte Zeilen. */
li, .gt3-core-imagebox-description, .schenk-k__titel, .schenk-k__anriss {
  text-wrap: pretty;
}

/* Weisse Schrift auf Fotos (Beitragskopf, Aktuelles): ein weicher Schatten
 * hebt sie vom unruhigen Grund ab, ohne das Foto abzudunkeln. */
.gt3-page-title_has_img_bg .gt3-page-title__content,
.elementor-3133 .elementor-element-fc7ed9c .elementor-heading-title,
.elementor-3133 .elementor-element-fc7ed9c .elementor-widget-text-editor {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 18px rgba(0, 0, 0, .45);
}

/* ------------------------------------------- 2. Kachellisten (Startseite)
 * Eine Schrift, eine Groesse. Auf dem blauen Grund etwas leichter, dafuer
 * groesser und mit mehr Laufweite - so wirkt die Sans neben der Baskerville
 * ruhiger und bleibt gut lesbar (Weiss auf Blau, Kontrast ueber 8:1).
 */
ul.gt3_styled_list,
ul.gt3_styled_list li,
ul.gt3_styled_list li span {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
ul.gt3_styled_list li {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .015em;
  margin-bottom: .45em;
}
ul.gt3_styled_list li *:not(strong):not(b), ul.gt3_styled_list li p { font-size: inherit; line-height: inherit; font-weight: inherit; margin: 0; }
.elementor-column[data-settings*="background_background"] ul.gt3_styled_list li {
  font-weight: 300;
  letter-spacing: .025em;
}

/* Kacheltitel: die enge Laufweite (-0,9 px) laesst die Baskerville in
 * 28 px zusammenkleben. Etwas Luft. */
.elementor-widget-heading .elementor-heading-title { letter-spacing: -.01em; }

/* Kachelknoepfe ("Mehr erfahren", "kostenfreies Erstgespraech ...") */
.elementor-widget-gt3-core-button .elementor_gt3_btn_text { letter-spacing: .02em; }

/* ------------------------------------------------ 3. Rechtsgebiets-Karten
 * Icons waren 39 px klein, darueber und darunter viel leerer Rand.
 */
.gt3-core-imagebox-img img { width: 56px; height: 56px; object-fit: contain; }
.gt3-core-imagebox-title, h4.gt3-core-imagebox-title { margin-top: .4em; }

/* ------------------------------------------ 4. Teamfoto "Unsere Anwaelte"
 * Das Foto ist 1873 x 840 px gross, also sehr breit. Im WordPress-
 * Zusatz-CSS steht fuer diesen Bereich "height: 500px !important":
 *   - auf dem Telefon: Foto klein in einem 500 px hohen blauen Kasten
 *     (Stephans Hinweis vom 27.09., bisher mit "contain" behoben)
 *   - auf breiten Bildschirmen: 500 px schneiden das Foto auf Brusthoehe ab
 * Jetzt folgt die Hoehe dem Foto - auf dem Telefon randlos mit allen sieben
 * Personen, am Rechner hoechstens so hoch wie der Bildschirm. Der Selektor
 * muss die WordPress-Regel an Spezifitaet uebertreffen.
 */
.elementor-3134 section.elementor-section.elementor-top-section.elementor-element.elementor-element-315f0694.elementor-section-stretched.elementor-section-content-middle.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default {
  height: min(calc(100vw * 840 / 1873), calc(100vh - 120px)) !important;
  min-height: 0 !important;
  padding: 0 !important;
  background-size: cover !important;
  background-position: center 42% !important;
  background-repeat: no-repeat !important;
}
@media (max-width: 767px) {
  .elementor-3134 .elementor-element-315f0694 > .elementor-container { display: none; }
}

/* 5. "Unsere Anwaelte" (Startseite) und das Aktuelles-Foto: seit 13.10. im
 *    gemeinsamen Stilblock (tools/lib/nachbereiten.mjs), gilt fuer A und B. */

/* --------------------------------------------- 6. Fliesstext allgemein */
body { letter-spacing: .005em; }
.elementor-widget-text-editor p,
#main_content > p { line-height: 1.65; }

/* =================================================================== MOBIL */
@media (max-width: 767px) {

  /* Grundschrift 15 -> 16 px: die Untergrenze fuer muehelos lesbaren Text
   * auf dem Telefon. */
  body, .elementor-widget-text-editor, #main_content { font-size: 16px; }

  /* Lange deutsche Woerter in grossen Ueberschriften trennen statt
   * abschneiden ("VERSICHERUNGS-RECHT"). */
  /* Lange Seitentitel ("VERSICHERUNGSRECHT") brechen nur an der Wortfuge,
   * die der Paketbau als weiche Trennstelle setzt - nie mitten in der Silbe. */
  h1 {
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  /* Grosse Titel etwas kleiner, damit sie nicht drei Viertel des
   * Bildschirms fuellen. */
  .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(24px, 7.6vw, 32px) !important; line-height: 1.2 !important; }
  .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(24px, 7.2vw, 30px) !important; line-height: 1.25 !important; }
  .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(22px, 6.4vw, 27px) !important; line-height: 1.28 !important; }

  /* Kacheln der Startseite: weniger Innenrand oben und unten. */
  .elementor-top-column[data-settings*="background_background"] > .elementor-widget-wrap.elementor-element-populated { padding-top: 34px; padding-bottom: 34px; }
  ul.gt3_styled_list { padding-left: 22px !important; }
  ul.gt3_styled_list li { font-size: 17px; }

  /* Rechtsgebiets-Karten: Icon links neben Titel und Text statt
   * darueber - halbiert die Hoehe jeder Karte, das Icon wird groesser. */
  .gt3-core-imagebox-wrapper.elementor-image_icon-position-default {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 16px;
    align-items: start;
    text-align: left;
  }
  .gt3-core-imagebox-wrapper.elementor-image_icon-position-default .gt3-core-imagebox-img { margin: 4px 0 0; }
  .gt3-core-imagebox-wrapper.elementor-image_icon-position-default .gt3-core-imagebox-img img { width: 52px; height: 52px; }
  .gt3-core-imagebox-wrapper.elementor-image_icon-position-default .gt3-core-imagebox-content { text-align: left; }
  .gt3-core-imagebox-wrapper .gt3-core-imagebox-title { margin-top: 0; }
  .elementor-widget-gt3-core-imagebox > .elementor-widget-container { padding: 24px 20px !important; }

  /* Teamkarten: Funktion und Kontakt in lesbarer Groesse. */
  .gt3_team_info .team-positions, .team-positions, .team_position { font-size: 15px !important; font-weight: 400 !important; line-height: 1.45 !important; }
  .team_field, .team_info_wrapper .team_field, .gt3_single_team_info { font-size: 15px !important; }

  /* Kontakt: Die Karte stand mit 900 px Hoehe vor dem Formular. */
  .elementor-widget-google_maps iframe, .elementor-custom-embed iframe { height: 300px !important; }

  /* Fusszeile: 13 px Roboto Light auf Dunkelblau ist auf dem Telefon kaum
   * zu lesen. 15 px Regular, Linklisten dichter, Tippflaeche ueber 32 px. */
  #footer .widget, #footer .widget p, #footer .widget li, #footer .widget a { font-size: 15px !important; font-weight: 400 !important; }
  #footer .widget ul li { padding-top: 2px !important; padding-bottom: 2px !important; margin: 0 !important; }
  #footer .widget ul li a { display: inline-block; padding: 6px 0; }
  #footer .widget-title, #footer .widgettitle { margin-top: 26px !important; margin-bottom: 10px !important; }
}

/* ================================================================= TABLET
 * Drei Kacheln nebeneinander auf 768-1024 px: Die 28-px-Titel zerbrachen
 * mitten im Wort ("Markenanmel-dung", "Abmahnunge-n"), lange Woerter
 * ("Berufsunfaehigkeitsversicherung") ragten aus der Spalte.
 */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-top-column[data-settings*="background_background"] .elementor-heading-title { font-size: 22px !important; line-height: 1.3 !important; }
  .elementor-top-column[data-settings*="background_background"] > .elementor-widget-wrap.elementor-element-populated { padding-left: 20px; padding-right: 20px; }
  ul.gt3_styled_list li { font-size: 15px; -webkit-hyphens: auto; hyphens: auto; }
  ul.gt3_styled_list { padding-left: 20px !important; }
}

/* ================================================================ DESKTOP */
@media (min-width: 768px) {
  /* Fusszeile: Light 13 px -> Regular 14 px. */
  #footer .widget, #footer .widget p, #footer .widget li, #footer .widget a { font-size: 14px !important; font-weight: 400 !important; }
}
@media (min-width: 1025px) {
  /* Fliesstext 15 -> 16 px, Zeilenlaenge begrenzen (rund 75 Zeichen). */
  .elementor-widget-text-editor p, #main_content > p, #main_content > ul li { font-size: 16px; }
  #main_content > p, #main_content > ul, #main_content > ol { max-width: 46em; }
}