/* ============================================================
   Korrekturrunde „Anmerkungen Hövemeyer 11.09.2026“
   Ergänzt /css/original.css, ohne die Datei selbst zu verändern.
   Eingebunden auf allen Seiten außer der Karriereseite (Webflow).
   ============================================================ */

/* Keine einzelnen Wörter allein in der letzten Zeile. Browser ohne
   Unterstützung brechen wie bisher um. */
p, blockquote, li, figcaption { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- Buttons: sichtbarer Hover ----------
   Vorher wurde Orange nur um eine Nuance dunkler (#f59b00 → #e08e00). */
.btn-primary, .btn-ghost, .btn-outline, .hw-knopf {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
@media (hover: hover) {
  .btn-primary:hover, .hw-knopf--voll:hover {
    background-color: #f59b00;
    background-image: linear-gradient(120deg, #ffd50c 0%, #ff8b04 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px rgba(245, 155, 0, .8);
  }
  .btn-ghost:hover { background-color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .45); }
  .btn-outline:hover, .hw-knopf--rand:hover { transform: translateY(-2px); }
}
.btn-primary:active, .btn-ghost:active, .btn-outline:active, .hw-knopf:active { transform: translateY(0); box-shadow: none; }

/* Kontakt-Buttons: px-6/py-3 fehlen im kompilierten Bundle. */
.hw-knopf { padding: .75rem 1.5rem; }

/* ---------- Startseite: Hero ----------
   Weniger Abdunkelung oben, damit die Gesichter im Video zu sehen sind;
   nach unten dichter, weil dort jetzt der Text steht. */
.hw-hero-schleier {
  background: linear-gradient(to top,
    rgba(52, 51, 60, .88) 0%, rgba(52, 51, 60, .62) 34%,
    rgba(52, 51, 60, .40) 64%, rgba(52, 51, 60, .34) 100%);
}
/* items-end fehlt im kompilierten Tailwind-Bundle, deshalb hier. */
.hw-hero { align-items: flex-end; min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); }
.hw-hero > .container-page { padding-top: 140px; padding-bottom: 64px; }
@media (min-width: 1024px) { .hw-hero > .container-page { padding-top: 160px; padding-bottom: 88px; } }
/* Ab 1280 px zweizeilig: „Beratung, die man / nicht zweimal erklären muss.“ */
@media (min-width: 1280px) {
  .hw-umbruch-schmal { display: none; }
  .hw-hero-titel { max-width: none; }
  .hw-hero-text { max-width: 62rem; }
}

/* ---------- Startseite: Punkte im Partner-Slider enger ---------- */
[data-team-slider] [data-team-dot] { padding: 6px; }

/* ---------- Startseite: „Persönlich“ auf dem Handy ----------
   61 px plus p-10 waren auf 390 px breiter als der Bildschirm (schon im
   Original so). Die Spalte darf nicht mehr über den Inhalt wachsen. */
@media (max-width: 1023px) {
  #kanzlei .grid-cols-1 { grid-template-columns: minmax(0, 1fr); }
  /* Seitenverhältnis + min-height 300px ergab 437 px Breite */
  #kanzlei .rounded-card.overflow-hidden { max-width: 100%; }
}


/* ---------- Footer: Menü zweispaltig, ohne Leistungsspalte ----------
   Das Raster hatte vier Spalten; mit drei Kindern bliebe rechts eine leere
   Spur samt Abstand stehen. */
@media (min-width: 1024px) {
  .hw-footer-raster { grid-template-columns: 1fr auto auto; column-gap: 96px; }
}
.hw-footer-menue {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto);
  column-gap: 56px; row-gap: .5rem; justify-content: start;
}
.hw-footer-tel { display: inline-block; margin-top: .75rem; }

/* ---------- Kontaktbereich: Karte breiter, weiße Box tiefer ----------
   Die Karte nutzt jetzt die ganze Spalte (vorher 128 px eingerückt), die weiße
   Box sitzt auf der Unterkante der Karte statt mittig. margin-top in Prozent
   bezieht sich auf die Breite des Containers – bei 16:9 ist 56.25 % genau die
   Kartenhöhe. Unter 1024 px bleibt alles untereinander wie bisher. */
@media (min-width: 1024px) {
  .hw-kontakt-karte { margin-left: 0; }
  .hw-kontakt-map { aspect-ratio: 16 / 9; }
  .hw-kontakt-box {
    top: 0; left: 32px; right: 32px; width: auto;
    translate: none; transform: none;
    margin-top: calc(56.25% - 64px);
    padding: 32px;
  }
  /* 1024–1279 px: Box über die Breite, Routentext darunter (Box ≈ 330 px hoch) */
  .hw-kontakt-text { padding: 300px 40px 40px; }
}
@media (min-width: 1280px) {
  .hw-kontakt-raster { grid-template-columns: 5fr 7fr; }
  .hw-kontakt-box { left: -40px; right: auto; width: 330px; margin-top: calc(56.25% - 90px); }
  .hw-kontakt-text { padding: 40px 40px 40px 330px; }
}

/* ---------- Kopfleiste: Button „Kontakt aufnehmen“ im Dunkelgrau ----------
   Öffnet das Kontaktformular (Typeform), der Navigationslink „Kontakt“ bleibt.
   Neben Logo und „Jetzt bewerben“ passt er erst ab 768 px. */
.hw-kopf-knoepfe { display: flex; align-items: center; gap: 12px; flex: none; }
.hw-kopf-kontakt {
  display: none; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 6px; background: #34333c; color: #fff;
  font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .025em;
  text-transform: uppercase; white-space: nowrap; text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
@media (min-width: 768px) { .hw-kopf-kontakt { display: inline-flex; } }
@media (hover: hover) {
  .hw-kopf-kontakt:hover { background: #4a4954; transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .45); }
}
.hw-kopf-kontakt:active { transform: translateY(0); box-shadow: none; }
@media (min-width: 768px) { header a[aria-label] { flex: none; } }
/* 1024–1279 px: Logo, sechs Links und zwei Buttons in einer Zeile –
   alles etwas kompakter, ab 1280 px wieder in Originalgröße. */
@media (min-width: 1024px) and (max-width: 1279px) {
  header a[aria-label] img { width: 180px; height: auto; }
  header nav.lg\:flex { gap: 16px; }
  header nav.lg\:flex a { font-size: 14px; }
  .hw-kopf-knoepfe { gap: 8px; }
  .hw-kopf-knoepfe > a { padding-left: 14px !important; padding-right: 14px !important; font-size: 13px !important; letter-spacing: .01em; }
}

/* ---------- Startseite: Mitarbeiterstimmen ----------
   Der 235-px-Kreis war höher als Zitat und Name, darunter blieb viel Luft.
   Kreis etwas kleiner, Text mittig daneben. Auf dem Handy steht das Foto
   über dem Text, statt ihn in eine 139 px schmale Spalte zu drücken. */
.hw-stimme__zeile { align-items: center; }
@media (min-width: 768px) {
  .hw-stimme__bild { width: 200px; height: 200px; margin-left: -130px; }
}
@media (min-width: 640px) and (max-width: 767px) {
  .hw-stimme__bild { width: 180px; height: 180px; margin-left: -110px; }
}
@media (max-width: 639px) {
  .hw-stimme__zeile { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hw-stimme__bild { width: 140px; height: 140px; margin-left: 0; }
}

/* ---------- Footer: Zeile mit Firmierung und Rechtslinks größer ---------- */
footer .text-xs.text-white\/70 { font-size: 14px; line-height: 20px; }

/* ============================================================
   Review 18.09.2026 – Darstellung auf Telefon und Tablet
   ============================================================ */

/* ---------- Aktuelles-Slider: Karte so breit wie der Bildschirm ----------
   Die Karten waren fest 800 px breit, auf dem Handy lag der Text außerhalb. */
[data-news-track] article { width: min(800px, calc(100vw - 40px)) !important; }
@media (max-width: 767px) {
  [data-news-track] > div + div { margin-left: 20px !important; }
  /* Text unter das Bild, sonst lag er unter den Pfeilen */
  [data-news-track] article { background: #34333c; }
  [data-news-track] article > div[style*="linear-gradient(to top"] { display: none; }
  [data-news-caption] {
    position: static !important; opacity: 1 !important; pointer-events: auto !important;
    padding: 20px 18px 24px !important;
  }
  [data-news-prev], [data-news-next] { top: 30% !important; }
}

/* ---------- Startseite „Was wir tun“: Bild oben, Text darunter ----------
   Die Karten hatten ein festes Seitenverhältnis; auf dem Handy stand der Text
   über dem Bild und lief oben heraus. */
@media (max-width: 767px) {
  #leistungen article { aspect-ratio: auto !important; }
  #leistungen article > img { position: relative !important; height: 230px !important; }
  #leistungen article > div[style*="linear-gradient(to top"] { display: none; }
  #leistungen article > div:last-child {
    position: static !important; padding: 24px 24px 28px !important; background: #34333c;
  }
}

/* ---------- Partner-Slider: genauso Bild oben, Text darunter ---------- */
@media (max-width: 767px) {
  [data-team-slider] { aspect-ratio: auto !important; }
  [data-team-slider] > img[data-team-img] { position: relative !important; height: 280px !important; }
  [data-team-slider] > div[style*="linear-gradient(to bottom"] { display: none; }
  [data-team-slider] figcaption {
    position: static !important; padding: 22px 20px 4px !important; background: #34333c;
  }
  [data-team-slider] figcaption blockquote { max-width: none; }
  [data-team-slider] > div:has(> [data-team-dot]) { position: static !important; translate: none !important; transform: none !important; justify-content: center; padding: 4px 0 10px; background: #34333c; }
  [data-team-slider] [data-team-prev], [data-team-slider] [data-team-next] { top: 140px !important; opacity: 1 !important; }
}

/* ---------- Mitarbeiterstimmen: Kreis nicht über den Kartenrand ----------
   Auf dem Tablet ragte das runde Foto links aus der Karte und wurde vom
   Bildschirmrand abgeschnitten. */
@media (max-width: 1023px) {
  .hw-stimme__bild { margin-left: 0 !important; }
}

/* ---------- Mitarbeiterstimmen: keine Luft über und unter kurzen Zitaten ----------
   Der 200-px-Kreis gab die Kartenhöhe vor. Bei kurzen Zitaten (Silke Henri)
   standen dadurch oben und unten 26 px mehr Luft als bei den langen Zitaten.
   Das Foto liegt jetzt absolut mittig an derselben Stelle, die Karte richtet
   sich nach dem Text – die Karten dürfen unterschiedlich hoch sein
   (Kundenwunsch 21.09.2026).
   Nur ab 1024 px: darunter steht der Kreis im Textfluss innerhalb der Karte,
   dort waere er bei kurzen Zitaten oben und unten aus der Karte gelaufen. */
@media (min-width: 1024px) {
  .hw-stimme__zeile { position: relative; padding-left: 102px; }
  .hw-stimme__bild {
    position: absolute; left: -130px; top: 50%; margin-left: 0;
    transform: translateY(-50%);
  }
}

/* ---------- Mobiles Menü (unter 1024 px) ----------
   Gleiches Menü wie auf der Karriereseite (Kundenwunsch 18.09.2026): weißes
   Panel von rechts, 280 px, Inhalt rechts ausgerichtet, Logo oben, darunter die
   Links und der orange Button. Der Burger wird zum X. */
.hw-burger {
  display: grid; place-items: center; width: 44px; height: 44px; position: relative;
  padding: 0; border: 0; background: transparent; cursor: pointer; color: #34333c;
  z-index: 60;
}
.hw-burger span {
  position: absolute; left: 10px; width: 24px; height: 2px; background: currentColor;
  transition: transform .3s ease, opacity .3s ease;
}
.hw-burger span:first-child { transform: translateY(-4px); }
.hw-burger span:last-child { transform: translateY(4px); }
.hw-burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.hw-burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
@media (min-width: 1024px) { .hw-burger { display: none; } }

.hw-menue {
  position: fixed; inset: 0 0 0 auto; z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  width: min(280px, 86vw); padding: 0 30px 0 20px; background: #fff;
  transform: translateX(100%); overflow-y: auto;
  /* geschlossen unsichtbar, damit die Links nicht per Tab erreichbar sind */
  visibility: hidden;
  transition: transform .4s ease, visibility .4s;
}
.hw-menue--offen { transform: translateX(0); visibility: visible; }
.hw-menue__logo { width: 180px; height: auto; margin-bottom: 44px; }
.hw-menue__nav { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hw-menue__link {
  font-size: 17px; font-weight: 400; line-height: 34px; color: #34333c;
  text-decoration: none; transition: color .15s;
}
.hw-menue__link--aktiv, .hw-menue__link:hover { color: #f59b00; }
.hw-menue__voll {
  margin-top: 44px; display: inline-flex; align-items: center; justify-content: center;
  width: 180px; padding: 13px 20px; border-radius: 7px; background: #f59b00;
  color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; text-decoration: none;
}
@media (prefers-reduced-motion: reduce) { .hw-menue { transition: none; } }

/* ---------- Sehr schmale Telefone (bis 399 px) ----------
   Bei 320 px lief die große Schrift aus dem Kasten heraus. */
@media (max-width: 399px) {
  .hw-wortmarke { font-size: 26px !important; }
  #kanzlei .rounded-card.bg-grau, #kanzlei .rounded-card.bg-dunkelgrau { padding: 26px !important; }
}

/* ---------- Schriftgrößen auf dem Telefon (Review 18.09.2026) ----------
   Einheitliche Staffel: Hero 34 px, Abschnittsüberschrift 32 px, große
   Wortkarten 34 px. Vorher standen dort 40 px, 62 px und 70 px aus dem
   Original, das war auf 390 px deutlich zu groß. */
@media (max-width: 767px) {
  .heading-display { font-size: 34px !important; line-height: 1.12 !important; }
  .hw-wort-gross { font-size: 34px !important; }
  h2[class*="text-[62px]"] { font-size: 32px !important; }
  /* Pfeile der Slider: 64 px wirkten auf dem Handy wie Vollbild-Knöpfe */
  [data-news-prev], [data-news-next] { width: 44px !important; height: 44px !important; }
  [data-team-prev], [data-team-next] { width: 40px !important; height: 40px !important; }
  [data-news-prev] svg, [data-news-next] svg { width: 18px !important; height: 18px !important; }
  [data-team-prev] svg, [data-team-next] svg { width: 16px !important; height: 16px !important; }
  /* Fließtext in den Karten: 24 px aus dem Original wirkten auf 390 px wie eine
     zweite Überschrift. 18 px passt zur übrigen Textgröße. */
  p[class*="text-[24px]"] { font-size: 18px !important; line-height: 1.6 !important; }
}

/* ---------- Kopfleiste auf dem Handy: nur Logo und Menü ----------
   „Jetzt bewerben" lag neben dem Logo und überdeckte es fast; beide Buttons
   stehen im Menü. Dadurch passt das Logo wieder in voller Breite. */
@media (max-width: 767px) {
  .hw-kopf-knoepfe > a { display: none !important; }
  header a[aria-label] img { width: 244px; max-width: 100%; height: auto; }
}
@media (max-width: 360px) {
  header a[aria-label] img { width: 210px; }
}


/* ---------- Startseite „Über uns": Schriftgrößen an die übrige Seite ----------
   Aus dem Original kamen 62 px für die Überschrift, 70/61 px für „Regional" und
   „Persönlich" und 24 px Fließtext. Das war deutlich größer als alles andere auf
   der Seite (Kundenhinweis 21.09.2026). Die Handy-Werte stehen weiter unten und
   bleiben unberührt. */
@media (min-width: 768px) {
  #kanzlei h2[class*="text-[62px]"] { font-size: clamp(2rem, 4vw, 3.5rem); }
  #kanzlei .hw-wort-gross { font-size: clamp(2rem, 3.2vw, 2.75rem); }
  #kanzlei p[class*="text-[24px]"] { font-size: 18px; line-height: 1.65; }
  #kanzlei p[class*="text-[24px]"][class*="font-bold"] { font-size: 20px; line-height: 1.4; }
}

/* ---------- Zwei-Klick-Lösung für die Google-Karte (14.10.2026) ----------
   Ohne Klick wird kein iframe eingesetzt, es geht also keine Verbindung zu
   Google und es können keine Cookies gesetzt werden (§ 25 Abs. 1 TDDDG).
   Als Vorschau liegt ein selbst gehosteter Kartenausschnitt (OpenStreetMap,
   entsättigt und ins Markengrau getont) im Rahmen – dadurch sieht die Stelle
   nach Karte aus, ohne dass Daten abfließen. */
.hw-karte-sperre {
  position: absolute; inset: 0; overflow: hidden;
  /* isolation statt z-index: die Ebenen (Bild, Schleier, Inhalt) bleiben im
     Platzhalter. Mit z-index:1 lag der Platzhalter über der weißen Kontaktbox
     und hat deren obere Kante verdeckt (Kundenhinweis 14.10.2026). */
  isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  background: #2d2c36;
}
.hw-karte-sperre__bild {
  position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover;
}
.hw-karte-sperre::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 46%, rgba(22, 21, 27, .74) 0%, rgba(22, 21, 27, .52) 55%, rgba(22, 21, 27, .34) 100%);
}
.hw-karte-sperre__inhalt {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 28px 24px; text-align: center;
}
.hw-karte-sperre__text {
  margin: 0; max-width: 30rem; font-size: 14px; line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}
.hw-karte-sperre__hinweis { margin: 0; font-size: 13px; line-height: 1.5; }
.hw-karte-sperre__hinweis a {
  color: rgba(255, 255, 255, .72); text-decoration: underline;
  text-underline-offset: 3px; transition: color .2s ease;
}
.hw-karte-sperre__hinweis a:hover { color: #f59b00; }
.hw-karte-sperre__quelle {
  position: absolute; right: 12px; bottom: 10px; z-index: 2; margin: 0;
  font-size: 11px; line-height: 1.4; color: rgba(255, 255, 255, .55);
}
@media (max-width: 480px) {
  .hw-karte-sperre__inhalt { gap: 14px; padding: 20px 16px; }
  .hw-karte-sperre__text { font-size: 13px; }
  .hw-karte-sperre__quelle { right: 10px; bottom: 8px; font-size: 10px; }
}
/* Ab 1024 px liegt die weiße Kontaktbox über der unteren Kante der Karte.
   Text, Button und Quellenangabe rücken deshalb nach oben, damit nichts
   dahinter verschwindet (Kundenhinweis 14.10.2026). */
@media (min-width: 1024px) {
  .hw-karte-sperre { align-items: flex-start; }
  .hw-karte-sperre::after {
    background: radial-gradient(ellipse at 50% 28%, rgba(22, 21, 27, .74) 0%, rgba(22, 21, 27, .52) 55%, rgba(22, 21, 27, .34) 100%);
  }
  .hw-karte-sperre__inhalt { padding-top: 22px; gap: 14px; }
  .hw-karte-sperre__quelle { bottom: 74px; }
}
/* 1024–1179 px: Der sichtbare Streifen über der Box ist nur ~190 px hoch,
   deshalb hier kompakter setzen. */
@media (min-width: 1024px) and (max-width: 1179px) {
  .hw-karte-sperre__inhalt { padding-top: 14px; gap: 10px; }
  .hw-karte-sperre__text { font-size: 13px; line-height: 1.5; max-width: 24rem; }
  .hw-karte-sperre__hinweis { font-size: 12px; }
}
@media (min-width: 1280px) {
  .hw-karte-sperre__inhalt { padding-top: 32px; gap: 16px; }
  .hw-karte-sperre__quelle { bottom: 100px; }
}