.se-pa-datei-vollstaendig{--se-pa-datei:1}
/* ^ Diese Zeile ist ein Anker, kein Stil.                                  */
/* Beim Einfuegen in den WordPress-Editor gehen gelegentlich die ersten      */
/* Zeichen verloren. Faellt hier der Punkt weg, bleibt trotzdem eine Regel   */
/* mit geschweiften Klammern stehen - daran findet der CSS-Parser wieder     */
/* Anschluss, und der Variablenblock weiter unten bleibt heil.               */
/* Ohne diesen Anker verschluckt ein fehlendes Zeichen den ganzen Kopf der   */
/* Datei, die Schalenbreite faellt weg und das Raster laeuft aus dem Bild.   */

/* ==========================================================================
   SE LEGAL · RECHTSGEBIETSSEITEN (Practice Area)
   --------------------------------------------------------------------------
   Diese Datei ersetzt den kompletten Rechtsgebiets-Teil aus css/pages.css.
   Sie wird ausschliesslich auf Seiten geladen, die functions.php ueber
   se_pa_is_page() als Rechtsgebietsseite kennzeichnet (body.se-practice-area).

   AUFBAU
     0  Stellschrauben: Marke, Typoskala, Seitenachse, Kartenstapel
     1  Seitenachse: ein linker Rand fuer alle Abschnitte
     2  Hero
     3  Einleitung + Portraitleiste
     4  Schnellnavigation (#sei-toc)
     5  Dienstleistungen: Basis (Dokumentfluss)
     6  Dienstleistungen: Desktop-Stapel ab 1200px
     7  Karteninhalt: Textspalte und Leistungsspalte
     8  Team
     9  Einleitung: Spaltenrhythmus
    10  FAQ
    11  Bewegung reduzieren
    12  Spaltenbreiten der Sprungleiste pro Rechtsgebiet
    13  Flache Laptopbildschirme
    14  Verweise im Fliesstext

   Bewertungen, Kontakt und Medienleiste am Seitenende sind die Bausteine
   der Startseite. Ihre Gestaltung steht in css/seh26-home.css (siehe 6b).

   WIE DIE SEITE IM FUSION-CODE AUFGEBAUT IST
   Jede Rechtsgebietsseite hat dieselbe Containerfolge. Welche Klasse an
   welchem Container und welcher Spalte stehen muss, beschreibt
   BAUANLEITUNG.md. Diese Datei gestaltet ausschliesslich ueber diese
   Klassen; der Inhalt (Texte, Karten, Links) steht vollstaendig in
   Avada-Elementen und laesst sich im Builder bearbeiten.

   REGELN FUER DIESE DATEI
   - Jeder Selektor steht genau EINMAL. Kein Block ueberschreibt einen
     frueheren Block derselben Datei.
   - !important nur dort, wo eine fremde Quelle (Avada-Inline-Stil,
     css/global.css) es erzwingt. Jede Stelle ist kommentiert.
     Moeglich wurde das durch se_pa_fix_style_order() in der functions.php:
     diese Datei wird garantiert NACH Avadas dynamischem Stylesheet gedruckt,
     gleiche Spezifitaet gewinnt daher bereits ohne !important.
   - Schriftgroessen fuer Fliesstext skalieren NICHT mit dem Kartenmassstab.
     Lesetext bleibt auf jeder Breite 16px, wie im Rest der Seite.
   ========================================================================== */


/* ==========================================================================
   0 · STELLSCHRAUBEN
   --------------------------------------------------------------------------
   Alle Masse des Layouts stehen hier als Custom Properties. Einzelne Werte
   lassen sich pro Seite im WordPress-Backend ueberschreiben, ohne diese Datei
   anzufassen:

     Seite bearbeiten -> Benutzerdefinierte Felder ->
       se_pa_stack_step      z. B.  14px
       se_pa_card_gutter     z. B.  30px
       se_pa_nav_columns     z. B.  1fr 1.4fr 1.2fr 1.4fr 1.1fr 1fr
       ... (vollstaendige Liste in der functions.php, Abschnitt 4)

   functions.php druckt daraus einen wenige Byte grossen <style>-Block und
   setzt nur die tatsaechlich abweichenden Werte. Ohne Custom Field gilt der
   Standardwert von hier.
   ========================================================================== */

body.se-practice-area {
  /* Marke */
  --se-pa-navy: #0f305d;
  --se-pa-gold: #b09069;
  --se-pa-gold-dark: #866c4d;
  --se-pa-copy: #666666;
  --se-pa-card-bg: #f1f3f5;
  --se-pa-card-bg-active: #ffffff;
  --se-pa-team-navy: #0f305d;
  --se-pa-team-gold: #b09069;
  --se-pa-team-muted: #889ab5;
  --se-pa-team-soft: #f3f4f5;

  /* Schrift · siehe Abschnitt 0b */
  --se-pa-serif: "Merriweather", "SE Merriweather Ersatz", Georgia, "Times New Roman", serif;
  --se-pa-sans: "Open Sans", "SE Open Sans Ersatz", Arial, sans-serif;

  /*
   * TYPOSKALA DES KOPFBEREICHS
   * Bis 1024px dieselben Formeln wie auf der Startseite (seh26-home.css,
   * --seh26v2-hero-size und --seh26v2-hero-subtitle): die Schrift waechst
   * stufenlos mit der Fensterbreite, am Handy 30px / 18px.
   * Ab 1025px steht der Titel in der schmaleren Textspalte neben dem Motiv -
   * dort gilt die Regel weiter unten.
   */
  --se-pa-hero-h1: clamp(30px, calc(19.82px + 2.61vw), 55px);
  --se-pa-hero-sub: clamp(18px, calc(13.12px + 1.253vw), 30px);

  /*
   * SEITENACHSE
   * Die linke Kante, an der auf jeder Breite Ueberschriften und Text
   * beginnen. Identisch mit Startseite und Kontaktseite:
   *
   *   bis 782px   15px + 1.92vw                    (390px -> 22.5px)
   *   ab 783px    30px + 1.92vw, hoechstens +26.46px
   *   breit       die 1378px-Reihe mittig, Text 26.46px darin
   *
   * --se-pa-rand gilt fuer Container der Seite. Sie brechen aus dem
   * 30px-Innenabstand von #main aus; ihre Prozentwerte beziehen sich deshalb
   * auf die Breite OHNE diesen Rand - das gleicht --se-pa-main-pad aus.
   * --se-pa-rand-voll gilt fuer Elemente, deren Bezug die volle
   * Fensterbreite ist (die Karten im Stapel).
   */
  --se-pa-main-pad: 30px;
  --se-pa-shell: 1378px;
  --se-pa-gutter-max: 26.46px;
  --se-pa-rand: calc(15px + 1.92vw);
  --se-pa-rand-voll: calc(15px + 1.92vw);

  /*
   * MASSSTAB DES KARTENSTAPELS
   * --se-pa-px ist die Einheit, in der der Desktop-Stapel rechnet.
   * 1px  = Originalgroesse (ab 1495px Breite und 900px Hoehe)
   * <1px = gleichmaessig verkleinert (siehe Abschnitt 6)
   * Er wirkt auf Kopf, Buttons, Rahmen und Abstaende des Stapels - nicht auf
   * den Lesetext in den Karten.
   */
  --se-pa-px: 1px;

  /* Geometrie des Dienstleistungsbereichs */
  --se-pa-card-width: 1482px;     /* Kartenbreite auf Desktop */
  --se-pa-card-gutter: 6.5px;     /* Seitenluft der Karte, wenn sie anstoesst */
  --se-pa-stack-step: 12px;       /* Versatz je Karte im Stapel */
  --se-pa-card-gap: 16px;
  --se-pa-card-bottom-gap: 8px;
  --se-pa-reading-end-gap: 72px;
  --se-pa-last-card-tail: 96px;
  --se-pa-scroll-spacer: 44px;    /* sichtbares Navy zwischen zwei Karten */

  /*
   * TIEFENSCHAERFE IM STAPEL
   * Eine Karte, die von der naechsten zugedeckt wird, tritt zurueck: sie
   * wird gleitend unscharf und etwas blasser - im Takt des Scrollens, nicht
   * auf einen Schlag. --se-pa-cover (0 bis 1) setzt practice-area.js.
   *   --se-pa-card-blur  Unschaerfe, wenn die Karte ganz bedeckt ist
   *   --se-pa-card-dim   so viel Deckkraft verliert sie dabei
   * 0px bzw. 0 schalten den jeweiligen Effekt ab.
   */
  --se-pa-card-blur: 1.6px;
  --se-pa-card-dim: .32;

  /* Hoehen. Startwerte; practice-area.js misst die echten Hoehen nach und
     schreibt sie als Inline-Variable. Die Startwerte der Titelhoehe stehen
     je Layout in Abschnitt 18a. */
  --se-pa-title-height: 99px;
  --se-pa-nav-height: 120px;

  /* Die beiden Masse der schmalen Buttonleiste (Leiste, Buttons, Pfeile und
     Bildmarke rechnen damit). */
  --se-pa-nav-pad-top: clamp(10px, 2vw, 14px);
  --se-pa-nav-button-min-h: clamp(53px, 8.3vw, 66px);

  /*
   * Hoehe des dauerhaft klebenden Megamenues. practice-area.js misst sie am
   * echten Element und schreibt sie als --se-pa-site-header-offset-measured.
   */
  --se-pa-site-header-offset: var(--se-pa-site-header-offset-measured, 0px);

  /* Bildmarke im blauen Balken (Abschnitt 6c). Andere Grafik? Nur hier. */
  --se-pa-bildmarke: url("https://se-legal.de/wp-content/uploads/2026/07/Bildmarke_Blau.png.webp");

  /*
   * Vom Script nachgezogen. Sechs Karten sind der Normalfall, also fuenf
   * Stufen Stapeltiefe. Bei einer anderen Kartenzahl korrigiert
   * practice-area.js den Wert.
   */
  --se-pa-stack-depth: calc(5 * var(--se-pa-stack-step));
  --se-pa-release-y: 0px;
  --se-pa-card-release-y: 0px;
}

@media (min-width: 783px) {
  body.se-practice-area {
    --se-pa-rand: max(
      calc(30px + min(1.92vw, var(--se-pa-gutter-max))),
      calc((100% + 2 * var(--se-pa-main-pad) - var(--se-pa-shell)) / 2 + var(--se-pa-gutter-max))
    );
    --se-pa-rand-voll: max(
      calc(30px + min(1.92vw, var(--se-pa-gutter-max))),
      calc((100% - var(--se-pa-shell)) / 2 + var(--se-pa-gutter-max))
    );
  }
}

/*
 * Ab 1025px: der Titel passt auf jeder Seite in eine Zeile.
 * --------------------------------------------------------------------------
 * Ein Titel "Rechtsanwalt fuer ..." ist in Merriweather 600 zwischen 12.7 em
 * (Erbrecht) und 16 em (Auslaenderrecht) breit - gemessen. Mit fest 55px
 * passten in die Textspalte (2/3 der Achse) nur 15.75 em: Familienrecht
 * blieb einzeilig, Auslaenderrecht brach um, und die Koepfe waren
 * unterschiedlich hoch. Deshalb wurde Auslaenderrecht einmal von Hand auf
 * 45px gesetzt.
 *
 * Jetzt richtet sich die Groesse nach der Spalte: 16.5 em passen immer auf
 * eine Zeile, hoechstens 55px. Bei 1440px sind das 52px, bei 1280px 48px.
 * Laengere Titel brechen ausgewogen in zwei Zeilen um.
 *
 *   Spalte = 0.6533 x Achsenbreite   (2/3-Spalte im Avada-Raster, gemessen)
 *
 * Die Unterzeile haelt das Verhaeltnis 30 : 55 zum Titel.
 */
@media (min-width: 1025px) {
  body.se-practice-area {
    --se-pa-hero-spalte: calc(0.6533 * min(
      var(--se-pa-shell) - 2 * var(--se-pa-gutter-max),
      100vw - 2 * (30px + min(1.92vw, var(--se-pa-gutter-max)))
    ));
    --se-pa-hero-h1: min(55px, calc(var(--se-pa-hero-spalte) / 16.5));
    --se-pa-hero-sub: clamp(22px, calc(var(--se-pa-hero-h1) * 30 / 55), 30px);
  }
}

/* Eingeloggt kommt die 32px hohe WordPress-Adminleiste dazu. Ist der Kopf
   gemessen, steckt sie bereits in der Messung. */
body.se-practice-area.admin-bar {
  --se-pa-site-header-offset: var(--se-pa-site-header-offset-measured, 32px);
}

/* ==========================================================================
   0b · SCHRIFTWECHSEL OHNE SPRUNG
   --------------------------------------------------------------------------
   Bis Merriweather und Open Sans geladen sind, zeichnet der Browser mit einer
   Systemschrift. Deren Zeilenhoehe und Buchstabenbreite weichen ab; sobald die
   echte Schrift eintrifft, springt der gesamte Text darunter - der Effekt, den
   man beim Laden sieht.

   Hier bekommen die Ersatzschriften dieselben Masse wie die echten. Der
   Browser reserviert dadurch von Anfang an exakt den Platz, den die spaeter
   eintreffende Schrift braucht. Der Wechsel ist dann nicht mehr sichtbar.

   Die Werte sind nicht geschaetzt:
     ascent/descent  Ausgangspunkt aus den Schriftdateien (fontTools):
                     Merriweather  upm 2000, Ascender 1968, Descender -546
                     Open Sans     upm 2048, Ascender 2189, Descender -600
                     Diese Rohwerte gelten aber fuer die UNSKALIERTE Schrift.
                     Zusammen mit size-adjust ergeben sie eine zu hohe Zeile
                     Die Werte unten sind deshalb im Browser nachgezogen,
                     bis eine Zeile mit line-height:normal exakt so hoch ist
                     wie mit der echten Schrift - geprueft ueber alle neun
                     Schriftgroessen, die die Seite verwendet (14 bis 32px),
                     je Familie getrennt. Alle achtzehn treffen exakt.
     size-adjust     im Browser gemessen, und zwar am ECHTEN Seitentext
                     (alle Ueberschriften und rund 6.000 Zeichen Fliesstext
                     aus Familienrecht und Pferderecht) und je Schriftschnitt
                     im GLEICHEN Gewicht - sonst misst man den Gewichts-
                     unterschied mit und landet zweistellig daneben.
                     Merriweather 600 zu Times  121.00%
                     Open Sans 300 zu Arial     101.17%
                     Die Pruefskripte brechen ab, wenn die echte Schrift
                     nicht geladen ist - sonst misst man unbemerkt eine
                     Systemschrift gegen eine andere und bekommt plausible,
                     aber falsche Werte.

   Georgia liess sich nicht messen (auf dem Pruefsystem nicht vorhanden) und
   bekommt deshalb bewusst KEINE eigene angepasste Variante. Es steht in der
   Reihenfolge hinter der angepassten Times-Ersatzschrift: wo Times New Roman
   vorhanden ist (Windows, macOS), greift der gemessene Wert; sonst gilt wie
   bisher der ungeaenderte Fallback.

   Die Regeln sind rein additiv. Ist die echte Schrift da, aendert sich nichts.
   ========================================================================== */

@font-face {
  font-family: "SE Merriweather Ersatz";
  src: local("Times New Roman"), local("Liberation Serif"), local("Nimbus Roman"), local("Tinos");
  font-weight: 400 700;
  ascent-override: 81.18%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 121.00%;
}

@font-face {
  font-family: "SE Open Sans Ersatz";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"), local("Roboto");
  font-weight: 300 700;
  ascent-override: 105.81%;
  descent-override: 29.01%;
  line-gap-override: 0%;
  size-adjust: 101.17%;
}


/* ==========================================================================
   0c · DIE BEIDEN FEHLENDEN SCHRIFTSCHNITTE
   --------------------------------------------------------------------------
   WARUM DIESER BLOCK EXISTIERT

   Auf der Familienrecht-Seite sitzt die Schrift richtig, auf einer frisch
   angelegten Rechtsgebietsseite wirkte dieselbe Ueberschrift deutlich fetter
   und der Vorspann dicker - bei identischem CSS und identischem Fusion-Code.
   Das lag nicht an dieser Datei, sondern an Avada:

   Avada schreibt pro Seite ein eigenes dynamisches Stylesheet und legt darin
   NUR die Schriftschnitte an, die die Seiteneinstellungen dieser einen Seite
   anfordern. Zwei Seiten, zwei Dateien, zwei verschiedene Schriftbestaende.
   Nachgezaehlt an den ausgelieferten Dateien:

     familienrecht     .../fusion-styles/813ff45e...min.css   73 @font-face
     auslaenderrecht   .../fusion-styles/9e9c74c2...min.css   64 @font-face

   Die Differenz sind exakt die beiden Schnitte, die die Rechtsgebietsseiten
   ueberall benutzen:

     Merriweather 600   5 Bloecke   fehlt
     Open Sans    300  10 Bloecke   fehlt

   Fehlt ein Schnitt, erfindet der Browser ihn:
     - Merriweather 600 wird aus dem 400er kuenstlich fett gerechnet
       (faux bold) - das ist das "viel fetter" aus der Rueckmeldung.
     - Open Sans 300 faellt auf 400 zurueck - das ist das "wirkt dicker
       bzw. dunkler".

   Beides passiert lautlos, ohne Fehlermeldung, und laesst sich im Backend
   nur ueber die Seiteneinstellungen jeder einzelnen Seite nachziehen. Eine
   duplizierte Seite bringt immer die Einstellungen ihrer Vorlage mit - der
   Fehler kaeme also bei jeder weiteren neuen Seite zurueck.

   Deshalb stehen die fehlenden Bloecke hier. Diese Datei laedt auf JEDER
   Rechtsgebietsseite; damit hat jede Seite beide Schnitte, unabhaengig von
   ihren Avada-Seitenoptionen.

   HERKUNFT DER BLOECKE
   Woertlich aus dem Avada-Stylesheet der Familienrecht-Seite uebernommen -
   gleiche Dateien, gleiche unicode-range, gleiches font-display. Nur die
   Adressen sind von absolut (https://se-legal.de/...) auf serverrelativ
   (/wp-content/...) gekuerzt, damit sie auch auf einer Testdomain greifen.
   Alle 15 Dateien wurden vor der Aufnahme einzeln geprueft (HTTP 200).

   KEIN ZUSAETZLICHER LADEVORGANG
   Ein @font-face-Block laedt nichts. Der Browser holt eine Schriftdatei
   erst, wenn Text sie tatsaechlich braucht - und genau diese Dateien holt
   die Familienrecht-Seite ohnehin. Auf Seiten, deren Avada-Stylesheet die
   Schnitte schon mitbringt, ist der Block eine wirkungslose Dublette.
   ========================================================================== */

/* Merriweather 600 - fuer jede Ueberschrift der Seite. */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSeqnJ-mFqA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSequJ-mFqA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSeqlJ-mFqA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSeqkJ-mFqA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/u-4e0qyriQwlOrhSvowK_l5UcA6zuSYEqOzpPe3HOZJ5eX1WtLaQwmYiSeqqJ-k.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Open Sans 300 ("Book") - Unterzeilen, Vorspann, Listen. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu1aB.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu1aB.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu1aB.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu1aB.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu1aB.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTVOmu1aB.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTUGmu1aB.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu1aB.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   1 · SEITENACHSE
   --------------------------------------------------------------------------
   Alle Abschnitte mit Text beginnen auf derselben linken Kante wie Start-
   und Kontaktseite (--se-pa-rand, Abschnitt 0). Dafuer genuegt der seitliche
   Innenabstand des Containers: Avada verbreitert die Reihe um den
   Spaltenabstand und zieht sie um dieselbe Strecke zurueck, die aeusseren
   Spalten schliessen also buendig mit dem Innenabstand ab - bei jedem
   Spaltenabstand und jeder Spaltenzahl.

   Im Backend tragen die Container weiterhin eigene Werte (30px, 65px ...).
   Sie werden hier vereinheitlicht, damit keine Seite davon abweichen kann.
   Die Regel braucht kein !important: Avada setzt den Innenabstand ueber
   Variablen, nicht als Inline-Wert.

   Bewusst NICHT auf der Achse: der Kartenstapel (breiter als der Text) und
   die Teamkarten. Bewertungen, Kontakt und Medienleiste sind die Bausteine
   der Startseite (Klasse seh26v2); ihre Achse setzt css/seh26-home.css.
   ========================================================================== */

body.se-practice-area :is(
  .fusion-fullwidth.se-pa-hero,
  .fusion-fullwidth.se-pa-intro,
  .fusion-fullwidth.se-toc-wrap,
  .fusion-fullwidth.se-pa-services-title-container,
  .fusion-fullwidth.se-pa-services-navigation-container,
  .fusion-fullwidth.faq-section
) {
  padding-left: var(--se-pa-rand);
  padding-right: var(--se-pa-rand);
}


/* ==========================================================================
   2 · HERO
   --------------------------------------------------------------------------
   EIN Container fuer alle Geraete (Klasse se-pa-hero). Frueher waren es
   zwei - einer fuer Rechner und Tablet, einer fuer das Handy - mit
   doppeltem Text, zwei H1 im Quelltext und eigenen Schriftgroessen.
   Genau daraus kamen die Unterschiede zwischen den Seiten.

   Aufbau im Fusion-Code:
     Spalte se-pa-hero-copy     Titel (H1) se-pa-hero-title
                                Unterzeile se-pa-hero-tagline
     Spalte se-pa-hero-actions  zwei Buttons

   GEOMETRIE
     ab 783px   Motiv rechts, Verlauf nach links ins Blau. Feste Hoehe
                (--se-pa-hero-hoehe), der Block aus Titel, Unterzeile und
                Buttons steht senkrecht mittig darin - auf jeder Seite, egal
                ob Titel oder Unterzeile ein- oder zweizeilig sind.
     bis 782px  Motiv oben als Streifen, Verlauf nach unten,
                Titel 250px unter der Oberkante
   Derselbe Umschaltpunkt wie auf der Startseite.

   ABSTAND UNTERZEILE -> BUTTONS
     --se-pa-hero-luecke: 44px am Rechner, 34px bis 1024px (wie die
     Startseite). Frueher waren fuer die Unterzeile immer zwei Zeilen
     reserviert; bei einzeiliger Unterzeile standen so 88px Luft vor den
     Buttons und der Titel sass sichtbar zu weit oben.

   DAS MOTIV
   Der Container zeichnet sein Hintergrundbild nicht selbst (Groesse 0),
   sondern reicht es an ::before weiter (background-image: inherit). Dort
   liegt der Verlauf als Maske. Das funktioniert unabhaengig davon, ob das
   Bild von Avada als Variable kommt oder von WP Rocket erst beim Laden
   eingesetzt wird - ohne JavaScript, schon beim ersten Bild.
   ========================================================================== */

body.se-practice-area .fusion-fullwidth.se-pa-hero {
  /* Mindestpolster; die Hoehe selbst setzt --se-pa-hero-hoehe. */
  --se-pa-hero-pad-top: 60px;
  --se-pa-hero-pad-bottom: 60px;
  --se-pa-hero-luecke: 44px;
  /* So hoch wie der Kopf vorher mit einzeiligem Titel - die Seiten
     verschieben sich nicht. Waechst mit der Schrift. */
  --se-pa-hero-hoehe: calc(1.3 * var(--se-pa-hero-h1) + 2.66 * var(--se-pa-hero-sub) + 340px);
  --se-pa-hero-image-start: 42%;
  --se-pa-hero-focus: center top;
  --se-pa-hero-fade: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .06) 12%,
    rgba(0, 0, 0, .20) 26%,
    rgba(0, 0, 0, .42) 40%,
    rgba(0, 0, 0, .66) 55%,
    rgba(0, 0, 0, .85) 70%,
    rgba(0, 0, 0, .96) 85%,
    rgba(0, 0, 0, 1) 100%
  );

  position: relative;
  isolation: isolate;
  padding-top: var(--se-pa-hero-pad-top);
  padding-bottom: var(--se-pa-hero-pad-bottom);
  min-height: var(--se-pa-hero-hoehe);
  /* Avada setzt Bildgroesse und -wiederholung als Inline-Variable; das Bild
     des Containers selbst bleibt unsichtbar (siehe oben). */
  background-size: 0 0 !important;
  background-repeat: no-repeat !important;
}

body.se-practice-area .fusion-fullwidth.se-pa-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--se-pa-hero-image-start);
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: var(--se-pa-hero-focus);
  background-size: cover;
  background-color: var(--awb-background-color, transparent);
  background-blend-mode: var(--awb-background-blend-mode, normal);
  -webkit-mask-image: var(--se-pa-hero-fade);
  mask-image: var(--se-pa-hero-fade);
  pointer-events: none;
}

body.se-practice-area .fusion-fullwidth.se-pa-hero > .fusion-builder-row {
  position: relative;
  z-index: 1;
  /* Die Zeile fuellt die Hoehe des Kopfes; Textspalte und Buttons stehen
     als ein Block in ihrer Mitte. */
  align-content: center;
}

/* Avadas eigenes Fade-Kind darf das ::before nicht ueberdecken.
   .fullwidth-faded traegt ein Inline-display von Avada. */
body.se-practice-area .fusion-fullwidth.se-pa-hero > .fullwidth-faded {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Schrift
   --------------------------------------------------------------------------
   Groesse und Zeilenhoehe kommen aus der Typoskala (Abschnitt 0), nicht aus
   den Avada-Feldern: Avada setzt beide als Inline-Stil an die Ueberschrift
   und rechnet sie unter 361px eigenmaechtig herunter (daher die 14px, die
   frueher am kleinen Handy standen). Nur !important gewinnt dagegen.

   text-wrap: balance verteilt zweizeilige Titel gleichmaessig - kein
   einzelnes Wort mehr allein in der zweiten Zeile.
   -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-hero .se-pa-hero-title {
  margin: 0 0 10px;
}

body.se-practice-area .se-pa-hero .se-pa-hero-title .fusion-title-heading {
  color: #ffffff;
  font-size: var(--se-pa-hero-h1) !important;
  line-height: 1.3 !important;
  text-wrap: balance;
}

body.se-practice-area .se-pa-hero .se-pa-hero-tagline {
  /* Avada setzt die Abstaende ueber eigene Variablen pro Geraet, am Handy
     stand dort frueher ein rechter Rand von 22% - die Ursache fuer drei-
     und vierzeilige Unterzeilen. Hier gilt fuer alle Geraete dasselbe. */
  margin: 0 !important;
}

body.se-practice-area .se-pa-hero .se-pa-hero-tagline .fusion-title-heading {
  color: #6c7d97;
  font-size: var(--se-pa-hero-sub) !important;
  line-height: 1.33 !important;
  text-wrap: balance;
}

/* Abstand Unterzeile -> Buttons: allein --se-pa-hero-luecke. Avadas
   Spaltenabstand (20px) und der Rand unter dem ersten Button (20px) fallen
   weg - sonst saesse der Block nicht in der Mitte. */
body.se-practice-area .se-pa-hero .se-pa-hero-copy {
  margin-bottom: 0 !important;
}

body.se-practice-area .se-pa-hero .se-pa-hero-copy > .fusion-column-wrapper {
  padding-bottom: var(--se-pa-hero-luecke);
}

body.se-practice-area .se-pa-hero .se-pa-hero-actions .fusion-button {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  body.se-practice-area .fusion-fullwidth.se-pa-hero {
    --se-pa-hero-luecke: 34px;
  }
}

/* --------------------------------------------------------------------------
   Bis 782px · Motiv oben, Text darunter
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
  body.se-practice-area .fusion-fullwidth.se-pa-hero {
    --se-pa-hero-pad-top: 250px;
    --se-pa-hero-pad-bottom: 34px;
    /* Text unter dem Motiv: keine feste Hoehe, der Kopf endet mit den
       Buttons. */
    --se-pa-hero-hoehe: 0px;
    --se-pa-hero-strip-extra: 40px;
    --se-pa-hero-focus: center top;
    --se-pa-hero-fade: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, .94) 22%,
      rgba(0, 0, 0, .74) 44%,
      rgba(0, 0, 0, .44) 64%,
      rgba(0, 0, 0, .18) 82%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  body.se-practice-area .fusion-fullwidth.se-pa-hero::before {
    bottom: auto;
    left: 0;
    height: calc(var(--se-pa-hero-pad-top) + var(--se-pa-hero-strip-extra));
  }

  /* Ueber dem Motiv etwas heller als am Rechner, sonst versinkt die
     Unterzeile im Verlauf. */
  body.se-practice-area .se-pa-hero .se-pa-hero-tagline .fusion-title-heading {
    color: #9ba7b9;
  }

  /* Lange Zeilen am Tablet im Hochformat sind schwer zu lesen. */
  body.se-practice-area .se-pa-hero .se-pa-hero-tagline {
    max-width: 34ch;
  }

  /* Die Buttons stehen bis 604px untereinander und nehmen die volle Breite
     (Regeln dafuer in css/global.css, Abschnitt .hero-section); zwischen
     605px und 782px stehen sie nebeneinander, wie auf der Startseite. */
}
/* ==========================================================================
   3 · EINLEITUNG UND PORTRAITLEISTE
   ========================================================================== */

body.se-practice-area .se-pa-intro {
  position: relative;
  overflow: visible;
  padding-top: 28px;
  padding-bottom: 0;
}

/* Unterzeile der Hauptueberschrift: typografisch identisch zum rechten Titel. */
body.se-practice-area .se-pa-intro .se-pa-intro-lead-sub {
  display: block;
  margin-top: 6px;
  color: var(--se-pa-copy);
  font-family: var(--se-pa-sans);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.33;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------------------------
   Inhalt kommt aus Yoasts [wpseo_breadcrumb] - dieselbe Quelle wie auf den
   uebrigen Seiten, damit Trenner, Startseiten-Bezeichnung und Hierarchie
   ueberall gleich sind und das Schema dazu passt.

   Gestaltung bewusst leise: kleine Schrift, gedecktes Grau, aktueller Punkt
   nicht verlinkt und etwas dunkler. Sie sitzt ueber der Einleitungs-
   ueberschrift auf derselben Rasterlinie wie der uebrige Inhalt.
   -------------------------------------------------------------------------- */

/*
 * Anordnung von Breadcrumb, Autorenangabe und Bewertung
 * --------------------------------------------------------------------------
 * Beide sitzen in derselben vollbreiten Spalte am Anfang der Einleitung.
 *
 * Desktop: nebeneinander auf einer Linie - Autorenangabe links, Breadcrumb
 *          (und darunter die Bewertung) rechts und schmal. Die Reihenfolge im
 *          Markup bleibt Breadcrumb zuerst, weil sie inhaltlich der
 *          Seitenpfad ist; getauscht wird nur optisch ueber order.
 * Darunter: gestapelt, Breadcrumb zuerst.
 */
@media (min-width: 1024px) {
  /*
   * Zwei Zeilen:
   *   Zeile 1  Breadcrumb, linksbuendig ueber der Autorenangabe
   *   Zeile 2  Autorenangabe links, Google-Bewertung rechts
   *
   * Ein Raster statt einer Flex-Zeile, weil die drei Elemente im Markup
   * Geschwister sind (Breadcrumb, Bewertung, Autorenangabe). Mit Flex haette
   * die Bewertung vor der Autorenangabe gestanden.
   *
   * align-items: start setzt beide Bloecke der zweiten Zeile auf dieselbe
   * Oberkante. Weil in beiden die goldene Kleinschrift die erste Zeile ist
   * und beide dieselbe Schriftgroesse und Zeilenhoehe haben, liegen
   * "FACHLICH VERANTWORTLICH" und "BEWERTUNGEN AUF GOOGLE" damit exakt auf
   * einer Linie. Der Test misst das nach.
   */
  body.se-practice-area .se-pa-intro .fusion-layout-column:has(.se-pa-author-slot)
  > .fusion-column-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "pfad  pfad"
      "autor bewertung";
    align-items: start;
    column-gap: 28px;
    /* Luft zur Ueberschrift darunter. */
    padding-bottom: 26px;
  }

  body.se-practice-area .se-pa-intro .se-pa-breadcrumb {
    grid-area: pfad;
    justify-self: start;
    margin-bottom: 46px;
    text-align: left;
  }

  body.se-practice-area .se-pa-intro .se-pa-author-slot {
    grid-area: autor;
    min-width: 0;
  }

  @media (min-width: 1024px) {
  body.se-practice-area .se-pa-intro .se-pa-reviews-slot {
    grid-area: bewertung;
    justify-self: end;
    transform: translateX(-45.6px);
  }
}

  /*
   * Die Trennlinie ueber der Autorenangabe entfaellt hier: der Breadcrumb
   * darueber uebernimmt die Trennung, eine zweite Linie waere Doppelung.
   * Wichtig fuer die Ausrichtung der goldenen Zeilen: kein padding-top.
   */
  body.se-practice-area .se-pa-intro .se-pa-author {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  /*
   * Der Textblock beginnt immer an der Oberkante, das Foto bleibt mittig.
   * Ohne diese Zeile haenge die Ausrichtung der goldenen Zeilen davon ab,
   * ob der Text hoeher ist als das Foto - bei einem Autor ohne Funktion
   * oder ohne Pruefdatum waere sie es nicht mehr.
   */
  body.se-practice-area .se-pa-intro .se-pa-author-text {
    align-self: flex-start;
  }
}

body.se-practice-area .se-pa-breadcrumb {
  margin: 0 0 18px;
  font-family: var(--se-pa-sans);
  /* Die bestehende Live-Seite setzt 11px. 12px hier, weil die Zeile im neuen
     Layout auf der Rasterlinie steht statt in einer schmalen Randspalte. */
  font-size: 12px;
  line-height: 1.5;
  color: #8a8f98;
}

body.se-practice-area .se-pa-breadcrumb a {
  color: #8a8f98;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

body.se-practice-area .se-pa-breadcrumb a:hover,
body.se-practice-area .se-pa-breadcrumb a:focus-visible {
  color: var(--se-pa-gold);
  border-bottom-color: rgba(176, 144, 105, .5);
  opacity: 1;
}

/* Aktuelle Seite: Yoast setzt dafuer .breadcrumb_last. */
body.se-practice-area .se-pa-breadcrumb .breadcrumb_last {
  color: var(--se-pa-navy);
  font-weight: 600;
}

/* Yoast gibt den Trenner als reinen Text aus; etwas Luft drumherum. */
body.se-practice-area .se-pa-breadcrumb > span > span {
  margin-inline: 1px;
}

@media (max-width: 640px) {
  body.se-practice-area .se-pa-breadcrumb {
    margin-bottom: 16px;
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   Google-Bewertung
   --------------------------------------------------------------------------
   Steht auf Desktop rechts unter dem Breadcrumb, darunter im Fluss. Das
   Plugin bringt seine eigene Gestaltung mit; hier nur Platzierung, Groesse
   und die kleine Beschriftung darueber.
   -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-reviews {
  margin: 8px 0 0;
  line-height: 1.2;
}

/*
 * flex statt inline-flex: als Inline-Box sass der Block auf einer Textlinie
 * und bekam dadurch rund 6px Vorlauf von oben - genau so viel, wie die
 * goldene Zeile gegenueber "FACHLICH VERANTWORTLICH" versetzt war.
 * width: fit-content erhaelt das enge Umschliessen des Inhalts.
 */
body.se-practice-area .se-pa-reviews-link {
  display: flex;
  width: fit-content;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}

body.se-practice-area .se-pa-reviews-label {
  color: var(--se-pa-gold);
  font-family: var(--se-pa-sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Die Bewertungsgrafik des Plugins bleibt dezent. */
body.se-practice-area .se-pa-reviews img,
body.se-practice-area .se-pa-reviews svg {
  max-width: 100%;
  height: auto;
}

@media (min-width: 1024px) {
  body.se-practice-area .se-pa-intro .se-pa-reviews {
    /* Kein Vorlauf: die goldene Zeile muss exakt auf der Hoehe von
       "FACHLICH VERANTWORTLICH" in der linken Spalte beginnen. */
    margin-top: 0;
    text-align: right;
  }

  body.se-practice-area .se-pa-intro .se-pa-reviews-link {
    align-items: flex-end;
    margin-left: auto;
  }
}

@media (max-width: 1023px) {
  body.se-practice-area .se-pa-intro .se-pa-reviews {
    margin: 0 0 18px;
  }
}

/* --------------------------------------------------------------------------
   Autorenangabe
   --------------------------------------------------------------------------
   Bewusst zurueckhaltend: eine Zeile in kleiner Schrift, feine Trennlinie,
   keine Flaeche und keine Farbe ausser dem Marken-Navy. Sie soll die
   Verantwortung sichtbar machen, ohne der Ueberschrift den Rang abzulaufen.
   Der Inhalt kommt aus dem Shortcode [se_pa_author] (php/practice-area.php).
   -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 48, 93, .12);
}

body.se-practice-area .se-pa-author-photo {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

body.se-practice-area .se-pa-author-text {
  margin: 0;
  padding: 0;
  font-family: var(--se-pa-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--se-pa-copy);
}

body.se-practice-area .se-pa-author-label {
  display: block;
  color: var(--se-pa-gold);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

body.se-practice-area .se-pa-author-name {
  color: var(--se-pa-navy);
  font-weight: 600;
}

body.se-practice-area .se-pa-author-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 144, 105, .5);
}

body.se-practice-area .se-pa-author-name a:hover {
  color: var(--se-pa-gold-dark);
}

/* Funktion und Pruefvermerk stehen als eigene Zeilen darunter. */
body.se-practice-area .se-pa-author-role,
body.se-practice-area .se-pa-author-review {
  display: block;
  color: var(--se-pa-copy);
  font-weight: 400;
}

body.se-practice-area .se-pa-author-review {
  margin-top: 2px;
  font-size: 12px;
  opacity: .85;
}

/* Portraitleiste. Aufgebaut von practice-area.js aus den Teamkarten. */
body.se-practice-area .se-pa-hero-team {
  --se-pa-hero-team-size: 100px;
  --se-pa-hero-team-overlap: 10px;

  position: absolute;
  z-index: 40;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: auto;
}

body.se-practice-area .se-pa-hero-team-item {
  position: relative;
  flex: 0 0 var(--se-pa-hero-team-size);
  width: var(--se-pa-hero-team-size);
  height: var(--se-pa-hero-team-size);
  margin: 0;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .96);
  border-radius: 50%;
  background: #ffffff;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
  outline-offset: 4px;
  box-shadow:
    0 0 0 1px var(--se-pa-gold),
    0 12px 28px rgba(11, 36, 70, .18),
    0 4px 10px rgba(11, 36, 70, .10);
}

/* Desktop: Portraits heben sich beim Hover nach vorne. */
@media (min-width: 1024px) and (hover: hover) {

  body.se-practice-area .se-pa-hero-team-item {
    transition:
      transform .24s ease,
      box-shadow .24s ease,
      filter .24s ease;
    transform-origin: center bottom;
  }

  body.se-practice-area .se-pa-hero-team-item:hover {
    z-index: 20;
    transform: translateY(-10px) scale(1.10);
    box-shadow:
      0 0 0 1px var(--se-pa-gold),
      0 20px 38px rgba(11, 36, 70, .25),
      0 8px 18px rgba(11, 36, 70, .16);
  }
}

body.se-practice-area .se-pa-hero-team-item + .se-pa-hero-team-item,
body.se-practice-area .se-pa-hero-team-toggle {
  margin-inline-start: calc(0px - var(--se-pa-hero-team-overlap));
}


/* --------------------------------------------------------------------------
   Stapelrichtung der Portraitleiste
   --------------------------------------------------------------------------
   Ohne eigene Angabe legt der Browser jedes spaetere Geschwister ueber das
   vorherige - das Bild ganz RECHTS laege dann vorne. Gewollt ist die andere
   Richtung: das erste Portrait steht vorne, jedes weitere reiht sich dahinter
   ein. Erst dadurch liest sich die Reihe als Stapel, der nach hinten laeuft,
   und die abgeblendeten Portraits am Ende sitzen sichtbar HINTER ihren
   Nachbarn statt davor.

   Die Leiter galt bisher nur unterhalb von 1024px. Sie gilt jetzt auf jeder
   Breite - am schmalen Geraet aendert sich dadurch nichts, am Desktop dreht
   sie die Reihenfolge um.

   Aufgeklappt (.is-expanded) bleibt es bei der normalen Reihenfolge: dort
   ueberlappen sich die Portraits kaum noch, und alle sind gleichberechtigt.
   -------------------------------------------------------------------------- */
body.se-practice-area
.se-pa-intro
.se-pa-hero-team:not(.is-expanded)
.se-pa-hero-team-item:nth-child(1) {
  z-index: 10;
}

body.se-practice-area
.se-pa-intro
.se-pa-hero-team:not(.is-expanded)
.se-pa-hero-team-item:nth-child(2) {
  z-index: 9;
}

body.se-practice-area
.se-pa-intro
.se-pa-hero-team:not(.is-expanded)
.se-pa-hero-team-item:nth-child(3) {
  z-index: 8;
}

body.se-practice-area
.se-pa-intro
.se-pa-hero-team:not(.is-expanded)
.se-pa-hero-team-item:nth-child(4) {
  z-index: 7;
}

body.se-practice-area
.se-pa-intro
.se-pa-hero-team:not(.is-expanded)
.se-pa-hero-team-item:nth-child(5) {
  z-index: 6;
}

body.se-practice-area
.se-pa-intro
.se-pa-hero-team:not(.is-expanded)
.se-pa-hero-team-item:nth-child(6) {
  z-index: 5;
}

body.se-practice-area
.se-pa-intro
.se-pa-hero-team:not(.is-expanded)
.se-pa-hero-team-item:nth-child(7) {
  z-index: 4;
}

body.se-practice-area
.se-pa-intro
.se-pa-hero-team:not(.is-expanded)
.se-pa-hero-team-item:nth-child(8) {
  z-index: 3;
}

/* Plus bleibt immer ganz vorne und klickbar. */
body.se-practice-area
.se-pa-intro
.se-pa-hero-team-toggle {
  z-index: 20;
}


/* --------------------------------------------------------------------------
   Abgeblendete Portraits und der goldene Schalter
   --------------------------------------------------------------------------
   Auf schmalen Geraeten passen nicht alle Personen nebeneinander. Die
   uebrigen stehen deshalb abgeblendet daneben - sichtbar genug, um zu zeigen,
   dass da mehr ist, aber ohne von den ersten abzulenken. Der Schalter klappt
   alle auf.
   -------------------------------------------------------------------------- */

/*
 * Eingeklappte Portraits: blauer Verlauf statt Schwarzweiss
 * --------------------------------------------------------------------------
 * Graustufen liessen die Personen aussehen, als waeren sie nicht mehr im
 * Haus. Stattdessen derselbe Navy-Verlauf, der auch ueber den Headerbildern
 * liegt - die Person bleibt farbig erkennbar, der Verlauf sagt nur "gerade
 * nicht im Vordergrund". Der Verlauf liegt als eigene Ebene ueber dem Bild,
 * damit das Foto selbst unveraendert bleibt.
 */
body.se-practice-area .se-pa-hero-team-item.is-dimmed {
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(176, 144, 105, .5),
    0 6px 14px rgba(11, 36, 70, .10);
  transition: opacity .25s ease, margin-inline-start .25s ease;
}

body.se-practice-area .se-pa-hero-team-item.is-dimmed::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(
      158deg,
      rgba(15, 48, 93, .90) 0%,
      rgba(15, 48, 93, .78) 45%,
      rgba(23, 66, 120, .62) 100%
    );
  pointer-events: none;
  transition: opacity .25s ease;
}

/*
 * Die abgeblendeten Portraits ruecken enger zusammen als die scharfen.
 * Nur ausgegraut sah aus wie ein Gestaltungsfehler; zusammengeschoben liest
 * sich die Reihe als eingeklappter Stapel, den der goldene Schalter oeffnet.
 * Der Zusatz haengt an der Bildgroesse, damit er auf jeder Breite gleich
 * stark wirkt.
 */
body.se-practice-area .se-pa-hero-team-item.is-dimmed {
  margin-inline-start: calc(
    0px - var(--se-pa-hero-team-overlap) - var(--se-pa-hero-team-size) * .22
  );
}

/*
 * Am Desktop rutschen sie noch deutlich weiter nach hinten.
 * --------------------------------------------------------------------------
 * Mit 22% Zusatzversatz stand das abgeblendete Portrait fast so breit da wie
 * ein scharfes. Dadurch las es sich nicht als "liegt dahinter", sondern als
 * "ist blau eingefaerbt" - die Rueckmeldung dazu war eindeutig.
 *
 * 58% statt 22%: sichtbar bleibt rund ein Drittel der Bildbreite. Zusammen
 * mit der Stapelrichtung weiter oben (das linke Portrait liegt vorne) sitzt
 * das abgeblendete Bild damit erkennbar HINTER seinem linken Nachbarn und
 * belegt nur noch einen schmalen Streifen.
 *
 * Nur ab 1024px. Im schmalen Layout ist die ganze Reihe kleiner und der
 * Platz knapper - dort bleibt es beim bisherigen, bestaetigten Versatz.
 */
@media (min-width: 1024px) {
  body.se-practice-area .se-pa-hero-team-item.is-dimmed {
    margin-inline-start: calc(
      0px - var(--se-pa-hero-team-overlap) - var(--se-pa-hero-team-size) * .58
    );
  }
}

/* Aufgeklappt stehen wieder alle im normalen Abstand. */
body.se-practice-area .se-pa-hero-team.is-expanded .se-pa-hero-team-item {
  margin-inline-start: calc(0px - var(--se-pa-hero-team-overlap));
}

body.se-practice-area .se-pa-hero-team.is-expanded .se-pa-hero-team-item:first-child {
  margin-inline-start: 0;
}

body.se-practice-area .se-pa-hero-team-toggle {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--se-pa-hero-team-size);
  width: var(--se-pa-hero-team-size);
  height: var(--se-pa-hero-team-size);
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--se-pa-gold);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  box-shadow:
    0 0 0 1px var(--se-pa-gold),
    0 12px 28px rgba(11, 36, 70, .18);
  transition: background-color .2s ease, transform .2s ease;
}

body.se-practice-area .se-pa-hero-team-toggle[hidden] {
  display: none !important;
}

/* Plus aus zwei Balken - kein zusaetzlicher Request, und der Wechsel zu
   Minus ist eine reine Drehung. */
body.se-practice-area .se-pa-hero-team-toggle::before,
body.se-practice-area .se-pa-hero-team-toggle::after {
  content: "";
  position: absolute;
  background: #ffffff;
  border-radius: 1px;
  transition: transform .25s ease, opacity .25s ease;
}

body.se-practice-area .se-pa-hero-team-toggle::before {
  width: 42%;
  height: 2px;
}

body.se-practice-area .se-pa-hero-team-toggle::after {
  width: 2px;
  height: 42%;
}

body.se-practice-area .se-pa-hero-team.is-expanded .se-pa-hero-team-toggle::after {
  transform: scaleY(0);
  opacity: 0;
}

body.se-practice-area .se-pa-hero-team-toggle:hover {
  background: var(--se-pa-gold-dark);
}

body.se-practice-area .se-pa-hero-team-toggle:focus-visible {
  outline: 3px solid var(--se-pa-navy);
  outline-offset: 3px;
}

/* Aufgeklappt: alle scharf, in mehreren Zeilen, ohne Ueberlappung. */
body.se-practice-area .se-pa-hero-team.is-expanded {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

body.se-practice-area .se-pa-hero-team.is-expanded .se-pa-hero-team-item,
body.se-practice-area .se-pa-hero-team.is-expanded .se-pa-hero-team-toggle {
  margin-inline-start: 0;
}

/* Aufgeklappt faellt der Verlauf weg. */
body.se-practice-area .se-pa-hero-team.is-expanded .se-pa-hero-team-item.is-dimmed {
  filter: none;
  opacity: 1;
}

body.se-practice-area .se-pa-hero-team.is-expanded .se-pa-hero-team-item.is-dimmed::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.se-practice-area .se-pa-hero-team-item.is-dimmed,
  body.se-practice-area .se-pa-hero-team-toggle,
  body.se-practice-area .se-pa-hero-team-toggle::before,
  body.se-practice-area .se-pa-hero-team-toggle::after {
    transition: none;
  }
}

/* [hidden] gegen Avadas globales display auf button-Elementen absichern. */
body.se-practice-area .se-pa-hero-team-item[hidden] {
  display: none !important;
}

body.se-practice-area .se-pa-hero-team-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 24%;
  transform: scale(1.14);
  transform-origin: center 28%;
}

@keyframes sePaHeroTeamEnter {
  from { opacity: 0; transform: translate3d(34px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

body.se-practice-area .se-pa-hero-team.is-entering .se-pa-hero-team-item:not([hidden]) {
  animation: sePaHeroTeamEnter 460ms cubic-bezier(.22, .75, .25, 1) both;
  animation-delay: var(--se-pa-hero-team-delay, 0ms);
}


/* ==========================================================================
   4 · SCHNELLNAVIGATION / INHALTSVERZEICHNIS (#sei-toc)
   --------------------------------------------------------------------------
   Traeger ist ein natives <details>: klappt ohne JavaScript und ohne
   Hoehenanimation, es kann nichts nachrutschen. Der Inhalt steht auch
   geschlossen vollstaendig im Markup - Suchmaschinen und Sprachausgaben
   lesen die Sprungziele mit.

   Dieser Block lag bisher zusaetzlich als base64-Inline-<style> (7,3 KB) in
   JEDER Rechtsgebietsseite. Er steht jetzt nur noch hier und ist cachebar.
   Die prefers-reduced-motion-Regel dazu steht gebuendelt in Abschnitt 10.
   ========================================================================== */

body.se-practice-area .se-toc-wrap {
  margin-top: 0;
  margin-bottom: 72px;
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * Achse des Inhaltsverzeichnisses
 * --------------------------------------------------------------------------
 * Keine eigene Rechnung: der Container traegt den Seitenrand aus Abschnitt 1,
 * Avadas Raster setzt die Spalte damit von selbst auf die Achse.
 */
body.se-practice-area .se-toc-wrap .se-pa-toc-col {
  margin-bottom: 0;
}

/* Autorenangabe und Bewertung stehen im schmalen Layout ueber dem
   Inhaltsverzeichnis (siehe unten). Die Autorenangabe sitzt optisch etwas
   hoeher. */
@media (max-width: 1023px) {
  /* Autor optisch etwas höher innerhalb des Meta-Blocks. */
  body.se-practice-area
  .se-pa-intro-meta
  .se-pa-author-slot {
    transform: translateY(-8px);
  }
}

body.se-practice-area #sei-toc {
  --toc-navy: var(--se-navy, #0f305d);
  --toc-gold: var(--se-gold-detail, #b09069);
  --toc-line: #dfe1e4;
  --toc-surface: var(--se-grey, #f2f2f2);
  width: 100%;
  max-width: 760px;
  box-sizing: border-box;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Autorenangabe und Bewertung ueber dem Inhaltsverzeichnis (nur schmal)
   --------------------------------------------------------------------------
   practice-area.js verschiebt beide Bloecke im Mobillayout hierher (Modul 3b).
   Oben in der Einleitung bleiben dann nur Breadcrumb und Portraits, hier
   stehen die beiden Vertrauensangaben zusammen - aufgeteilt statt gestapelt.
   Verschoben, nicht kopiert: beide gibt es weiterhin genau einmal im DOM.
   -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-intro-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(15, 48, 93, .12);
}

/* Die Trennlinie der Autorenangabe entfaellt hier - der Block hat schon
   eine eigene Kante nach unten. */
body.se-practice-area .se-pa-intro-meta .se-pa-author {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

body.se-practice-area .se-pa-intro-meta .se-pa-reviews {
  margin: 0;
}

/* Smartphone: Google-Bewertung vor Autor, mit mehr Abstand. */
@media (max-width: 599.98px) {

  body.se-practice-area .se-pa-intro-meta {
    gap: 26px;

    /*
     * Die Bewertung soll mittig zwischen Einleitungstext und Autorenzeile
     * stehen. Unter ihr sind es die 26px Reihenabstand von oben, ueber ihr
     * waren es 70px: 20px Aussenabstand des letzten Einleitungsabsatzes
     * plus 50px Innenabstand des Abschnitts (nachgemessen, 390px bis 599px
     * identisch).
     *
     * Die Differenz wird hier abgezogen, nicht am Abschnitt darueber. Der
     * Grund: die Metaleiste entsteht erst, wenn practice-area.js Bewertung
     * und Autor unter den Text schiebt. Steht sie nicht da, greift diese
     * Regel gar nicht - und der Abschnitt behaelt seinen normalen Abstand.
     */
    margin-top: -44px;
  }

  body.se-practice-area
  .se-pa-intro-meta
  .se-pa-reviews-slot {
    order: 1;
  }

  body.se-practice-area
  .se-pa-intro-meta
  .se-pa-author-slot {
    order: 2;
    transform: none;
  }
}

/* Ab hier ist genug Platz fuer beides nebeneinander. */
@media (min-width: 600px) {
  body.se-practice-area .se-pa-intro-meta {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }

  body.se-practice-area .se-pa-intro-meta .se-pa-reviews-slot {
    flex: 0 0 auto;
  }

  body.se-practice-area .se-pa-intro-meta .se-pa-reviews {
    text-align: right;
  }

  body.se-practice-area .se-pa-intro-meta .se-pa-reviews-link {
    align-items: flex-end;
    margin-left: auto;
  }
}

/*
 * Breite des Inhaltsverzeichnisses, solange die Einleitung zweispaltig steht
 * --------------------------------------------------------------------------
 * Genau so breit wie der linke Textblock darueber, rechts auf derselben
 * Kante. Die Spalte des Inhaltsverzeichnisses ist im Fusion-Code eine
 * halbe Spalte (1_2) im selben Raster wie die Einleitung - sie hat damit
 * von sich aus exakt diese Breite. Das Verzeichnis fuellt sie nur aus.
 */
@media (min-width: 1025px) {
  body.se-practice-area #sei-toc {
    max-width: none;
  }
}

body.se-practice-area #sei-toc *,
body.se-practice-area #sei-toc *::before,
body.se-practice-area #sei-toc *::after {
  box-sizing: border-box;
}

body.se-practice-area #sei-toc details {
  border: 1px solid var(--toc-navy);
  background: #ffffff;
}

body.se-practice-area #sei-toc summary {
  padding: 0;
  color: var(--toc-navy);
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
}

body.se-practice-area #sei-toc summary::-webkit-details-marker {
  display: none;
}

body.se-practice-area #sei-toc summary::marker {
  content: "";
}

body.se-practice-area #sei-toc .toc-text {
  flex: 1 1 auto;
  padding: 17px 20px;
  line-height: 1.3;
}

body.se-practice-area #sei-toc .toc-icon {
  flex: 0 0 54px;
  color: #ffffff;
  background: var(--toc-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.se-practice-area #sei-toc .toc-icon svg {
  width: 21px;
  height: 21px;
  display: block;
  transition: transform .25s ease;
}

body.se-practice-area #sei-toc details[open] .toc-icon svg {
  transform: rotate(-180deg);
}

body.se-practice-area #sei-toc summary:hover .toc-text {
  color: var(--toc-gold);
}

body.se-practice-area #sei-toc summary:focus-visible {
  outline: 3px solid var(--toc-gold);
  outline-offset: -3px;
}

body.se-practice-area #sei-toc nav {
  padding: 20px 24px 22px;
  border-top: 1px solid var(--toc-line);
  background: var(--toc-surface);
}

body.se-practice-area #sei-toc ol,
body.se-practice-area #sei-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.se-practice-area #sei-toc ol {
  counter-reset: se-pa-toc;
}

body.se-practice-area #sei-toc ol > li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 30px;
  counter-increment: se-pa-toc;
}

body.se-practice-area #sei-toc ol > li:last-child {
  margin-bottom: 0;
}

body.se-practice-area #sei-toc ol > li::before {
  content: counter(se-pa-toc) ".";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--toc-gold);
  font-size: 16px;
  line-height: 1.45;
}

body.se-practice-area #sei-toc a {
  color: var(--toc-navy);
  font-size: 16px;
  line-height: 1.45;
  text-decoration: none;
  transition: color .18s ease;
}

body.se-practice-area #sei-toc a:hover {
  color: var(--toc-gold);
}

body.se-practice-area #sei-toc a:focus-visible {
  outline: 2px solid var(--toc-gold);
  outline-offset: 2px;
}

body.se-practice-area #sei-toc ul {
  margin-top: 9px;
}

body.se-practice-area #sei-toc ul li {
  position: relative;
  margin: 0 0 7px;
  padding-left: 26px;
}

body.se-practice-area #sei-toc ul li:last-child {
  margin-bottom: 0;
}

/*
 * EIN Pfeil statt zwei Bauteilen.
 *
 * Vorher zeichneten zwei Pseudoelemente den Pfeil: ein 1,5px hoher Balken
 * und ein um 45 Grad gedrehtes 6x6-Kaestchen mit 1,5px Raendern. Beide
 * Formen sind schmaler als ein Geraetepixel, und jeder Listenpunkt beginnt
 * auf einer anderen Nachkommastelle (gemessen: 1296,25 / 1354,75 / 1387,5 /
 * 1420,25 / 1453 / 1511,5). Der Browser rundet die beiden Formen deshalb bei
 * jedem Punkt anders - mal wird der Balken 1px, mal 2px, mal sitzt die
 * Spitze einen halben Pixel daneben. Genau das sind die "verschiedenen"
 * Pfeile.
 *
 * Jetzt ist es eine einzige Zeichnung, die als Maske ueber eine Farbflaeche
 * gelegt wird. Der Browser rastert sie an jeder Position identisch, und die
 * Farbe kommt weiterhin aus --toc-gold.
 *
 * Die Hoehe der Maskenflaeche entspricht der Zeilenhoehe der ersten Zeile,
 * die Ausrichtung ist "center". Dadurch sitzt der Pfeil bei einzeiligen wie
 * bei mehrzeiligen Eintraegen auf derselben Linie wie die erste Textzeile.
 */
body.se-practice-area #sei-toc ul li::before {
  content: "";
  position: absolute;
  top: calc(.62em - 4.5px);
  left: 2px;
  width: 15px;
  height: 10px;
  background-color: var(--toc-gold);
  -webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%2010'><path%20d='M.9%205h11.4M8.7%201.4%2012.3%205l-3.6%203.6'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/></svg>") no-repeat center / 15px 10px;
  mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%2010'><path%20d='M.9%205h11.4M8.7%201.4%2012.3%205l-3.6%203.6'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/></svg>") no-repeat center / 15px 10px;
}

/* Das zweite Bauteil des alten Pfeils entfaellt ersatzlos. */
body.se-practice-area #sei-toc ul li::after {
  content: none;
}

body.se-practice-area #sei-toc ul a {
  color: #5d6b80;
  font-size: 15px;
}

@media (max-width: 640px) {
  body.se-practice-area #sei-toc .toc-text {
    padding: 14px 16px;
    font-size: 15px;
  }

  body.se-practice-area #sei-toc .toc-icon {
    flex-basis: 46px;
  }

  body.se-practice-area #sei-toc nav {
    padding: 16px 18px 18px;
  }

  body.se-practice-area #sei-toc ol > li {
    margin-bottom: 12px;
    padding-left: 26px;
  }

  body.se-practice-area #sei-toc a {
    font-size: 15px;
  }

  body.se-practice-area #sei-toc ul a {
    font-size: 14.5px;
  }

  body.se-practice-area #sei-toc ul li {
    padding-left: 24px;
  }
}


/* ==========================================================================
   5 · DIENSTLEISTUNGEN · BASIS
   --------------------------------------------------------------------------
   Drei Container, alle aus Avada-Elementen (siehe BAUANLEITUNG.md):

     se-pa-services-title-container       Spalte se-pa-services-heading
                                            Titel  se-pa-services-title
                                            Text   se-pa-services-subtitle
     se-pa-services-navigation-container  Text   se-pa-services-navigation
                                            (eine Liste von Sprunglinks)
     se-pa-services-cards-container       je Karte EINE Spalte
                                            se-pa-services-topic + id:
                                              Text   se-pa-services-practice-label
                                              Titel  se-pa-services-topic-title
                                              Text   se-pa-services-copy
                                              Titel  se-pa-services-reference-kicker
                                              Text   se-pa-services-reference-links

   Mobile first: Titel und Sprungleiste kleben oben, die Karten laufen im
   normalen Dokumentfluss untereinander. Der Desktop-Stapel in Abschnitt 6
   baut darauf auf.

   Die Zahl der Karten ist frei. Jede Karte braucht nur ihre id und einen
   Eintrag in der Sprungleiste, der darauf zeigt.
   ========================================================================== */

.se-pa-services-part,
.se-pa-services-part *,
.se-pa-services-part *::before,
.se-pa-services-part *::after {
  box-sizing: border-box;
}

.se-pa-services-part {
  font-family: var(--se-pa-sans);
}

/* Avada-Elemente bringen eigene Aussenabstaende mit (Variablen pro Geraet).
   Im Dienstleistungsbereich kommen alle Abstaende aus dieser Datei. */
body.se-practice-area .se-pa-services-part :is(.fusion-title, .fusion-text) {
  margin: 0;
}

body.se-practice-area .se-pa-services-part .fusion-text > p:last-child {
  margin-bottom: 0;
}


/* -------------------------------------------------------------------------- */
/* Container 1 · Titel                                                        */
/* -------------------------------------------------------------------------- */

.se-pa-services-title-container {
  position: sticky;
  z-index: 41;
  /* Unter dem klebenden Seitenkopf, nicht dahinter. */
  top: calc(var(--se-pa-site-header-offset) - 18px);
  min-height: 0;
  padding-top: 28px;
  padding-bottom: 8px;
  background: var(--se-pa-navy);
  box-shadow: 0 -24px 0 0 var(--se-pa-navy);
}

/* Avada setzt display am Spalteninneren mit einer Regel aus fuenf Klassen;
   Container- und Spaltenklasse zusammen gewichten hoeher - ohne !important.
   Dasselbe Muster gilt fuer die Karten weiter unten. */
body.se-practice-area .se-pa-services-title-container .se-pa-services-heading.fusion-layout-column > .fusion-column-wrapper {
  position: relative;
  display: block;
}

body.se-practice-area .se-pa-services-heading .se-pa-services-title .fusion-title-heading {
  margin: 0 0 6px;
  color: #ffffff;
  font-family: var(--se-pa-serif);
  font-style: normal;
  font-weight: 600;
  /* Avada setzt Groesse und Zeilenhoehe inline. */
  font-size: 22px !important;
  line-height: 1.2 !important;
}

/* Die Unterzeile gehoert zur Desktop-Ansicht; im schmalen Layout wuerde sie
   den klebenden Kopf zu hoch machen. */
body.se-practice-area .se-pa-services-heading .se-pa-services-subtitle {
  display: none;
  color: #c3c9d2;
  font-family: var(--se-pa-sans);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.33;
}

body.se-practice-area .se-pa-services-heading .se-pa-services-subtitle p {
  margin: 0;
  color: inherit;
  font: inherit;
}


/* -------------------------------------------------------------------------- */
/* Container 2 · Sprungleiste                                                 */
/* -------------------------------------------------------------------------- */

.se-pa-services-navigation-container {
  position: sticky;
  z-index: 40;
  top: calc(var(--se-pa-site-header-offset) + var(--se-pa-title-height) - 18px);
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: transparent;
  /* Schutz gegen die 1px-Compositing-Naht ueber der Leiste. */
  box-shadow: 0 -3px 0 0 var(--se-pa-navy);
}

/* Schatten unter der Leiste. Der Container waechst mit Polsterung und
   Buttonhoehe, der Schatten wandert dadurch automatisch mit. */
.se-pa-services-navigation-container::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 48px;
  background: linear-gradient(
    to bottom,
    rgba(15, 48, 93, .38) 0%,
    rgba(15, 48, 93, .25) 24%,
    rgba(15, 48, 93, .13) 52%,
    rgba(15, 48, 93, .05) 76%,
    rgba(15, 48, 93, 0) 100%
  );
  pointer-events: none;
}

/*
 * Die Leiste ist ein Textelement mit einer gewoehnlichen Linkliste - im
 * Builder bearbeitbar wie jeder andere Text. Liste und Listenpunkte treten
 * hier aus dem Layout zurueck (display: contents); die Links sind damit
 * direkte Eintraege der Leiste und werden als Buttons gesetzt.
 *
 * Im schmalen Layout laeuft die Leiste bis an den Bildschirmrand und laesst
 * sich seitlich schieben; der erste Button beginnt trotzdem auf der Achse.
 */
body.se-practice-area .se-pa-services-navigation-container .se-pa-services-navigation {
  --se-pa-nav-gap: 7px;

  position: relative;
  z-index: 3;
  width: auto;
  height: auto;
  margin: 0 calc(-1 * var(--se-pa-rand));
  padding: var(--se-pa-nav-pad-top) var(--se-pa-rand) 0;
  display: flex;
  align-items: stretch;
  gap: var(--se-pa-nav-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--se-pa-rand);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /*
   * Navy nur bis etwa zur halben Buttonhoehe. Darunter bleibt die Leiste
   * durchsichtig, damit der Schatten weich in die erste Karte uebergeht.
   * Die Buttons selbst sind deckend.
   */
  background: linear-gradient(
    to bottom,
    var(--se-pa-navy) 0%,
    var(--se-pa-navy) 54%,
    transparent 54%,
    transparent 100%
  );
}

body.se-practice-area .se-pa-services-navigation::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body.se-practice-area .se-pa-services-navigation :is(ul, li) {
  display: contents;
}

body.se-practice-area .se-pa-services-navigation > :is(p, br) {
  display: none;
}

body.se-practice-area .se-pa-services-navigation a {
  flex: 0 0 clamp(155px, 34vw, 340px);
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: var(--se-pa-nav-button-min-h);
  padding: clamp(7px, 1.3vw, 12px) clamp(12px, 2vw, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d7dce2;
  border-radius: 7px;
  background: #ffffff;
  color: #333333;
  opacity: 1;
  box-shadow: none;
  overflow: hidden;
  font-family: var(--se-pa-sans);
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 500;
  line-height: 1.18;
  white-space: normal;
  hyphens: auto;
  text-align: center;
  text-decoration: none;
  scroll-snap-align: center;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

body.se-practice-area .se-pa-services-navigation a:hover {
  border-color: rgba(176, 144, 105, .62);
  background: #ffffff;
}

/* Genau ein aktiver Button. Die Klasse setzt practice-area.js aus derselben
   Quelle wie aria-current. */
body.se-practice-area .se-pa-services-navigation a.is-active,
body.se-practice-area .se-pa-services-navigation a.is-active:hover,
body.se-practice-area .se-pa-services-navigation a.is-active:focus,
body.se-practice-area .se-pa-services-navigation a.is-active:focus-visible,
body.se-practice-area .se-pa-services-navigation a.is-active:active {
  border-color: var(--se-pa-gold);
  background: var(--se-pa-gold);
  color: #ffffff;
  opacity: 1;
}

body.se-practice-area .se-pa-services-navigation a:focus-visible {
  outline: 3px solid var(--se-pa-gold);
  outline-offset: -4px;
}

/* --------------------------------------------------------------------------
   Blaetterpfeile der Sprungleiste
   --------------------------------------------------------------------------
   practice-area.js legt sie an und blendet sie ein und aus. Ist die Leiste
   am Anfang oder am Ende, verschwindet der jeweilige Pfeil.

   Die Selektoren tragen body.se-practice-area und einzelne Eigenschaften
   !important: Avada gestaltet <button> im dynamischen Stylesheet mit hoeher
   gewichteten Selektoren.
   -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-services-nav-arrow {
  position: absolute;
  z-index: 20 !important;
  /* Mitte der Buttonzeile: Innenabstand der Leiste plus halbe Buttonhoehe. */
  top: calc(var(--se-pa-nav-pad-top) + var(--se-pa-nav-button-min-h) / 2);
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--se-pa-gold) !important;
  background-color: var(--se-pa-gold) !important;
  background-image: none !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
  transition: background-color .2s ease;
}

body.se-practice-area .se-pa-services-nav-arrow[hidden] {
  display: none !important;
}

body.se-practice-area .se-pa-services-nav-arrow--prev { left: 4px; }
body.se-practice-area .se-pa-services-nav-arrow--next { right: 4px; }

/* Winkel aus zwei Rahmenkanten - kein zusaetzlicher Request. */
body.se-practice-area .se-pa-services-nav-arrow::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  /* Nicht currentColor: Avada kann color am Button ueberschreiben. */
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  background: none;
}

body.se-practice-area .se-pa-services-nav-arrow--prev::before {
  transform: translateX(2px) rotate(-135deg);
}

body.se-practice-area .se-pa-services-nav-arrow--next::before {
  transform: translateX(-2px) rotate(45deg);
}

body.se-practice-area .se-pa-services-nav-arrow:hover {
  background: var(--se-pa-gold-dark) !important;
  background-color: var(--se-pa-gold-dark) !important;
}

body.se-practice-area .se-pa-services-nav-arrow:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}


/* -------------------------------------------------------------------------- */
/* Container 3 · Karten                                                       */
/* -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-services-cards-container {
  position: relative;
  z-index: 1;
  /* Abstand letzte Karte -> Praxisgruppe. */
  padding: 0 0 28px;
  overflow: visible;
  isolation: isolate;
  background: var(--se-pa-navy);
}

/*
 * Die Reihe ist die Buehne des Stapels. Avada gibt ihr per Inline-Stil eine
 * Breite von 104% und negative Raender - dagegen hilft nur !important.
 * Block statt Flex: die Karten liegen im normalen Fluss untereinander, nur
 * so wirken der negative Rand und die Abstandshalter des Stapels.
 */
body.se-practice-area .se-pa-services-cards-container > .fusion-builder-row {
  display: flow-root;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0;
  overflow: visible;
}

/* Messsonde von practice-area.js: nimmt keinen Platz ein und rendert nichts. */
.se-pa-services-probe {
  position: absolute;
  width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Traegt auf Desktop die zusaetzliche Scrollstrecke hinter jeder Karte.
   Im Dokumentfluss (schmal) ist er 0 hoch und damit wirkungslos. */
.se-pa-services-scroll-spacer {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}

/*
 * Die Karte. Avadas Spaltenbreite und -abstaende stehen in eigenen
 * Variablen; die Selektoren hier sind hoeher gewichtet und gewinnen ohne
 * !important. Innen beginnt der Text auf der Seitenachse.
 */
body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic {
  position: relative;
  float: none;
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 18px;
  padding: 74px var(--se-pa-rand-voll) 68px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--se-pa-card-bg);
  scroll-margin-top: 20px;
  transition: background-color .45s ease;
}

body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic:nth-last-child(1 of .se-pa-services-topic) {
  margin-bottom: 0;
}

body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic.is-active-card {
  background: var(--se-pa-card-bg-active);
}

body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic.fusion-layout-column > .fusion-column-wrapper {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
}

/* Kleine Goldzeile ueber dem Titel. */
body.se-practice-area .se-pa-services-topic .se-pa-services-practice-label {
  margin: 0 0 13px;
  color: var(--se-pa-gold);
  font-family: var(--se-pa-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-practice-label p {
  margin: 0;
  font: inherit;
  color: inherit;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-topic-title .fusion-title-heading {
  margin: 0 0 4px;
  color: var(--se-pa-navy);
  font-family: var(--se-pa-serif);
  font-style: normal;
  font-weight: 600;
  /* Avada setzt Groesse und Zeilenhoehe inline. */
  font-size: 22px !important;
  line-height: 1.27 !important;
  text-wrap: balance;
}

/* Fliesstext der Karte. */
body.se-practice-area .se-pa-services-topic .se-pa-services-copy {
  margin-top: 20px;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-copy p {
  margin: 0 0 20px;
  color: var(--se-pa-copy);
  font-family: var(--se-pa-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-copy > :last-child {
  margin-bottom: 0;
}

/* Aufzaehlungen im Fliesstext. Die Scopung per > haelt Listen innerhalb
   anderer Bausteine unberuehrt. */
body.se-practice-area .se-pa-services-topic .se-pa-services-copy > :is(ul, ol) {
  margin: 0 0 20px;
  padding-left: 22px;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-copy > :is(ul, ol) > li {
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  color: var(--se-pa-navy);
  font-family: var(--se-pa-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 27px;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-copy > :is(ul, ol) > li:last-child {
  margin-bottom: 0;
}

/* Mobile: deutlicherer Kontrast zwischen aktiver und uebriger Karte. */
@media (max-width: 720px) {
  body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic:not(.is-active-card) {
    background: #e6e9ed;
  }

  body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic {
    padding-bottom: 56px;
  }
}


/* ==========================================================================
   5a · NAECHSTER FREIER TERMIN IM DIENSTLEISTUNGSKOPF
   --------------------------------------------------------------------------
   Nur wenn im Seiten-Metafeld eine Calenso-Kategorie hinterlegt ist und
   Calenso einen Termin liefert. Sonst entsteht kein Element.
   practice-area.js haengt die Zeile an die Titelspalte an.
     Desktop: rechts im Dienstleistungskopf
     Schmal:  direkt unter dem Titel
   ========================================================================== */

.se-pa-availability {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: max-content;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-family: var(--se-pa-sans);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

.se-pa-availability-link {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 5px;
  width: max-content;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  white-space: nowrap;
}

.se-pa-availability-text {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: baseline;
  gap: 4px;
  width: max-content;
  white-space: nowrap;
}

.se-pa-availability-label {
  color: rgba(255, 255, 255, .72);
  font-weight: 400;
  white-space: nowrap;
}

.se-pa-availability-date {
  color: #ffffff;
  font-weight: 700;
  white-space: nowrap;
}

.se-pa-availability-link:hover,
.se-pa-availability-link:focus {
  color: var(--se-pa-gold);
}

/* Gruener Punkt */
.se-pa-availability-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #22c55e;
}

/* Pfeil, aus CSS gezeichnet. */
.se-pa-link-arrow {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 8px;
  flex: 0 0 11px;
  margin-left: 3px;
  color: #ffffff;
}

.se-pa-link-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}

.se-pa-link-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 1199.98px) {
  .se-pa-availability {
    align-items: flex-start;
    margin-top: 7px;
  }
}

/* ==========================================================================
   6 · DIENSTLEISTUNGEN · DESKTOP-STAPEL
   --------------------------------------------------------------------------
   BREAKPOINT 1200px. Wird der Wert geaendert, muss er an genau zwei Stellen
   mitgezogen werden:
     - hier und im Gegenstueck (max-width: 1199.98px)
     - js/practice-area.js  ->  DESKTOP_MIN

   MASSSTAB
   Zwischen 1200px und 1495px Breite bzw. 640px und 900px Hoehe wird
   --se-pa-px von 0.78px bis 1px gefuehrt. Damit schrumpfen Kopf, Buttons,
   Rahmen und Abstaende des Stapels gleichmaessig - die Karte gewinnt die
   Hoehe, die der klebende Kopf abgibt. Der Lesetext in der Karte bleibt
   16px; nur Ueberschriften und Bedienelemente skalieren mit.
   ========================================================================== */

@media (min-width: 1200px) {

  body.se-practice-area {
    --se-pa-px-breite: clamp(0.84px, calc(0.0542373vw + 0.1891525px), 1px);
    --se-pa-px-hoehe: clamp(0.78px, calc(0.0846dvh + 0.24px), 1px);
    --se-pa-px: min(var(--se-pa-px-breite), var(--se-pa-px-hoehe));

    --se-pa-stack-step: calc(12 * var(--se-pa-px));
    --se-pa-card-bottom-gap: calc(8 * var(--se-pa-px));
    --se-pa-reading-end-gap: calc(72 * var(--se-pa-px));
    --se-pa-last-card-tail: calc(96 * var(--se-pa-px));
    --se-pa-scroll-spacer: calc(44 * var(--se-pa-px));

    /* Vorgabe, falls kein klebender Kopf gefunden wird. */
    --se-pa-site-header-offset:
      var(--se-pa-site-header-offset-measured, calc(40 * var(--se-pa-px)));

    /* Dockhoehe des Stapels. Titel- und Leistenhoehe misst practice-area.js. */
    --se-pa-stack-top: calc(
      var(--se-pa-site-header-offset)
      + var(--se-pa-title-height)
      + var(--se-pa-nav-height)
    );

    /*
     * Eckenrundung der Karten, nach oben durch den Stapelversatz begrenzt.
     * Vom Stapel sieht man je Karte nur einen Streifen in Hoehe des
     * Versatzes - ein groesserer Radius hinterliess dort eine Treppe aus
     * Schraegkanten.
     */
    --se-pa-card-radius: min(calc(14 * var(--se-pa-px)), var(--se-pa-stack-step));

    /* Alle Karten exakt gleich hoch: der Rest des Fensters unter dem Dock. */
    --se-pa-card-height: max(
      calc(280 * var(--se-pa-px)),
      calc(100dvh - var(--se-pa-stack-top) - var(--se-pa-stack-depth) - var(--se-pa-card-bottom-gap))
    );

    /*
     * Seitenluft fuer die Innenscrollleiste: der Scrollbereich der Karte
     * reicht um diesen Wert ueber die Achse hinaus, die Leiste sitzt also
     * neben dem Text statt darauf.
     */
    --se-pa-scroll-luft: calc(34 * var(--se-pa-px));
  }

  body.se-practice-area.admin-bar {
    --se-pa-site-header-offset:
      var(--se-pa-site-header-offset-measured, calc(40 * var(--se-pa-px) + 32px));
  }


  /* ------------------------------------------------------------------------ */
  /* Titel                                                                    */
  /* ------------------------------------------------------------------------ */

  /* Titelbalken und Sprungleiste docken lueckenlos unter dem Seitenkopf an. */
  .se-pa-services-title-container {
    z-index: 30;
    top: var(--se-pa-site-header-offset);
    padding-top: 0;
    padding-bottom: 0;
    transform: translate3d(0, var(--se-pa-release-y), 0);
  }

  /*
   * Ueberschrift, Unterzeile und Terminblock in einem Raster. Der klebende
   * Kopf nimmt dem Kartentext Hoehe weg - deshalb so schmal wie moeglich:
   * 36px ueber der Ueberschrift, 14px unter der Unterzeile.
   */
  body.se-practice-area .se-pa-services-title-container .se-pa-services-heading.fusion-layout-column > .fusion-column-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 32px;
    padding-top: calc(36 * var(--se-pa-px));
    padding-bottom: calc(14 * var(--se-pa-px));
  }

  body.se-practice-area .se-pa-services-heading .se-pa-services-title {
    grid-column: 1;
    grid-row: 1;
  }

  body.se-practice-area .se-pa-services-heading .se-pa-services-title .fusion-title-heading {
    font-size: calc(28 * var(--se-pa-px)) !important;
    line-height: 1.14 !important;
  }

  body.se-practice-area .se-pa-services-heading .se-pa-services-subtitle {
    display: block;
    grid-column: 1;
    grid-row: 2;
    font-size: calc(22 * var(--se-pa-px));
  }

  .se-pa-availability {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
    margin-right: 8px;
  }


  /* ------------------------------------------------------------------------ */
  /* Sprungleiste                                                             */
  /* ------------------------------------------------------------------------ */

  .se-pa-services-navigation-container {
    z-index: 31;
    top: calc(var(--se-pa-site-header-offset) + var(--se-pa-title-height));
    /* Schmaler Navystreifen unter den Buttons, damit die Leiste nicht auf
       der ersten Karte aufsitzt. */
    padding-bottom: calc(12 * var(--se-pa-px));
    background: var(--se-pa-navy);
    transform: translate3d(0, var(--se-pa-release-y), 0);

    /* Buttonhoehe und Innenabstand stehen am CONTAINER: die Blaetterpfeile
       sind Kinder des Containers und rechnen mit denselben Werten. */
    --se-pa-nav-button-h: calc(76 * var(--se-pa-px));
    --se-pa-nav-pad: calc(8 * var(--se-pa-px));

    /* Gemessene Leistenbreite (practice-area.js). Damit sitzen die Pfeile
       auf den Kanten der Leiste. */
    --se-pa-nav-width: 100%;
  }

  /* Am Desktop kein Schatten unter der Leiste - er zeichnet sonst sichtbar
     durch die Bildmarke. */
  .se-pa-services-navigation-container::after {
    content: none;
  }

  /*
   * Die Leiste spannt ueber die Achse. Der kleine Innenabstand (Platz fuer
   * den Schatten des aktiven Buttons) wird durch einen gleich grossen
   * negativen Rand ausgeglichen - die Buttons beginnen exakt auf der Achse.
   */
  body.se-practice-area .se-pa-services-navigation-container .se-pa-services-navigation {
    /*
     * Spaltenbreiten pro Rechtsgebiet. Ueberschreibbar
     *  - im Fusion-Code ueber eine eigene Klasse am Textelement (Abschnitt 12)
     *  - oder im Backend ueber das Custom Field se_pa_nav_columns
     * Passt die Anzahl nicht zur Kartenzahl, blaettert die Leiste seitenweise.
     */
    --se-pa-nav-columns: 1.05fr 1.45fr 1.25fr 1.45fr 1.15fr 1.05fr;

    width: auto;
    height: calc(var(--se-pa-nav-button-h) + 2 * var(--se-pa-nav-pad));
    margin: 0 calc(-1 * var(--se-pa-nav-pad));
    padding: var(--se-pa-nav-pad);
    display: grid;
    grid-template-columns: var(--se-pa-nav-columns);
    align-items: center;
    gap: calc(6 * var(--se-pa-px));
    overflow: hidden;
    background: none;
    scroll-snap-type: none;
    scroll-padding-inline: var(--se-pa-nav-pad);
  }

  body.se-practice-area .se-pa-services-navigation a {
    position: relative;
    z-index: 1;
    flex: none;
    height: var(--se-pa-nav-button-h);
    min-height: 0;
    padding: var(--se-pa-nav-button-pad, calc(14 * var(--se-pa-px))) calc(11 * var(--se-pa-px));
    display: grid;
    place-items: center;
    background: #ffffff;
    border-radius: calc(7 * var(--se-pa-px));
    font-size: max(14px, calc(16 * var(--se-pa-px)));
    font-weight: 400;
    line-height: 1.2;
    hyphens: manual;
    scroll-snap-align: none;
  }

  body.se-practice-area .se-pa-services-navigation a.is-active {
    z-index: 2;
    box-shadow: 0 calc(5 * var(--se-pa-px)) calc(13 * var(--se-pa-px)) rgba(91, 68, 42, .24);
  }

  /* --------------------------------------------------------------------
   * MEHR BUTTONS ALS ABGESTIMMTE SPALTEN: DIE LEISTE BLAETTERT
   * --------------------------------------------------------------------
   * Passt die Zahl der Spaltenbreiten nicht zur Zahl der Karten, setzt
   * practice-area.js .se-pa-nav-paged auf den Container: fuenf Buttons je
   * Ansicht, goldene Pfeile, Verlauf an der Schnittkante. Beim Scrollen
   * durch die Karten schiebt sich die Leiste mit.
   * -------------------------------------------------------------------- */

  /* Ohne Blaettermodus gibt es am Desktop keine Pfeile. */
  body.se-practice-area .se-pa-services-nav-arrow {
    display: none !important;
  }

  body.se-practice-area .se-pa-nav-paged .se-pa-services-navigation {
    --se-pa-nav-fade-links: 0px;
    --se-pa-nav-fade-rechts: 0px;

    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Verlauf als Maske an der Seite, an der etwas fehlt. Die Klassen
       is-cut-left / is-cut-right setzt dieselbe Funktion, die die Pfeile
       steuert. */
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 var(--se-pa-nav-fade-links),
      #000 calc(100% - var(--se-pa-nav-fade-rechts)),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 var(--se-pa-nav-fade-links),
      #000 calc(100% - var(--se-pa-nav-fade-rechts)),
      transparent 100%
    );
  }

  body.se-practice-area .se-pa-nav-paged .se-pa-services-navigation::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* Fuenf Buttons je Ansicht und ein Rest vom sechsten - so sieht man, dass
     es rechts weitergeht, ohne dass ein Button angeschnitten wirkt. */
  body.se-practice-area .se-pa-nav-paged .se-pa-services-navigation a {
    flex: 0 0 calc((100% - 24 * var(--se-pa-px)) / 5.3);
    scroll-snap-align: center;
  }

  body.se-practice-area .se-pa-nav-paged .se-pa-services-nav-arrow {
    display: flex !important;
    top: calc(var(--se-pa-nav-pad) + var(--se-pa-nav-button-h) / 2);
  }

  body.se-practice-area .se-pa-nav-paged .se-pa-services-nav-arrow[hidden] {
    display: none !important;
  }

  body.se-practice-area .se-pa-nav-paged .se-pa-services-nav-arrow--prev {
    left: calc(50% - var(--se-pa-nav-width) / 2 + 4px);
  }

  body.se-practice-area .se-pa-nav-paged .se-pa-services-nav-arrow--next {
    right: calc(50% - var(--se-pa-nav-width) / 2 + 4px);
  }

  body.se-practice-area .se-pa-nav-paged.is-cut-left .se-pa-services-navigation {
    --se-pa-nav-fade-links: calc(74 * var(--se-pa-px));
  }

  body.se-practice-area .se-pa-nav-paged.is-cut-right .se-pa-services-navigation {
    --se-pa-nav-fade-rechts: calc(74 * var(--se-pa-px));
  }


  /* ------------------------------------------------------------------------ */
  /* Kartenstapel                                                             */
  /* ------------------------------------------------------------------------ */

  body.se-practice-area .se-pa-services-cards-container {
    padding-top: var(--se-pa-card-gap);
  }

  .se-pa-services-scroll-spacer {
    min-height: var(--se-pa-scroll-spacer);
  }

  /*
   * Jede Karte klebt unter dem Kopf und ist exakt gleich hoch - nur so deckt
   * jede Folgekarte ihre Vorgaengerin restlos ab.
   *
   * Breite: 1482px, darunter mit 6.5px Seitenluft. Der Text darin beginnt
   * trotzdem auf der Seitenachse: der seitliche Innenabstand ist genau der
   * Weg von der Kartenkante bis zur Achse.
   */
  body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic {
    --se-pa-card-box: min(var(--se-pa-card-width), calc(100% - 2 * var(--se-pa-card-gutter)));

    position: sticky;
    z-index: var(--se-pa-card-z, 1);
    top: var(--se-pa-stack-top);
    width: var(--se-pa-card-box);
    max-width: none;
    height: var(--se-pa-card-height);
    min-height: var(--se-pa-card-height);
    max-height: var(--se-pa-card-height);
    margin: 0 auto calc(0px - var(--se-pa-stack-step));
    /* Auf flachen Fenstern faellt die Polsterung mit - sonst frisst sie den
       gewonnenen Platz gleich wieder auf. */
    padding-block: clamp(calc(30 * var(--se-pa-px)), 4.6dvh, calc(72 * var(--se-pa-px)));
    /* minus 1px: der Rahmen der Karte liegt ebenfalls innerhalb dieser Strecke */
    padding-inline: calc(var(--se-pa-rand-voll) - (100% - var(--se-pa-card-box)) / 2 - 1px);
    border: 1px solid rgba(15, 48, 93, .13);
    border-radius: var(--se-pa-card-radius);
    overflow: hidden;
    box-shadow:
      0 calc(-13 * var(--se-pa-px)) calc(30 * var(--se-pa-px)) rgba(15, 48, 93, .11),
      0 calc(5 * var(--se-pa-px)) calc(18 * var(--se-pa-px)) rgba(15, 48, 93, .08);
    scroll-margin-top: calc(var(--se-pa-stack-top) + var(--se-pa-card-offset, 0px));
    transform: translate3d(
      0,
      calc(var(--se-pa-card-offset, 0px) + var(--se-pa-card-release-y, 0px)),
      0
    );
  }

  body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic:nth-last-child(1 of .se-pa-services-topic) {
    margin-bottom: 0;
  }

  /* Stapelversatz und -reihenfolge schon aus dem CSS, damit der erste Paint
     stimmt. practice-area.js schreibt dieselben Werte danach inline -
     identisch bis zehn Karten, korrigierend darueber.
     Gezaehlt wird mit "of .se-pa-services-topic": die Karten sind Avada-
     Spalten (div), dazwischen liegen die Abstandshalter des Stapels (auch
     div) - nth-of-type wuerde sie mitzaehlen. */
  .se-pa-services-topic:nth-child(1 of .se-pa-services-topic)  { --se-pa-card-offset: calc(0 * var(--se-pa-stack-step)); --se-pa-card-z: 1; }
  .se-pa-services-topic:nth-child(2 of .se-pa-services-topic)  { --se-pa-card-offset: calc(1 * var(--se-pa-stack-step)); --se-pa-card-z: 2; }
  .se-pa-services-topic:nth-child(3 of .se-pa-services-topic)  { --se-pa-card-offset: calc(2 * var(--se-pa-stack-step)); --se-pa-card-z: 3; }
  .se-pa-services-topic:nth-child(4 of .se-pa-services-topic)  { --se-pa-card-offset: calc(3 * var(--se-pa-stack-step)); --se-pa-card-z: 4; }
  .se-pa-services-topic:nth-child(5 of .se-pa-services-topic)  { --se-pa-card-offset: calc(4 * var(--se-pa-stack-step)); --se-pa-card-z: 5; }
  .se-pa-services-topic:nth-child(6 of .se-pa-services-topic)  { --se-pa-card-offset: calc(5 * var(--se-pa-stack-step)); --se-pa-card-z: 6; }
  .se-pa-services-topic:nth-child(7 of .se-pa-services-topic)  { --se-pa-card-offset: calc(6 * var(--se-pa-stack-step)); --se-pa-card-z: 7; }
  .se-pa-services-topic:nth-child(8 of .se-pa-services-topic)  { --se-pa-card-offset: calc(7 * var(--se-pa-stack-step)); --se-pa-card-z: 8; }
  .se-pa-services-topic:nth-child(9 of .se-pa-services-topic)  { --se-pa-card-offset: calc(8 * var(--se-pa-stack-step)); --se-pa-card-z: 9; }
  .se-pa-services-topic:nth-child(10 of .se-pa-services-topic) { --se-pa-card-offset: calc(9 * var(--se-pa-stack-step)); --se-pa-card-z: 10; }

  /*
   * Eine Karte, die im Stapel hinten liegt, wird unten um die volle
   * Stapeltiefe beschnitten und kann nie unter der obersten hervorschauen.
   * Oben behaelt sie ihre Rundung. clip-path veraendert das Layout nicht.
   */
  body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic.is-behind {
    clip-path: inset(
      0 0 var(--se-pa-stack-depth) 0
      round var(--se-pa-card-radius) var(--se-pa-card-radius) 0 0
    );
  }


  /* ------------------------------------------------------------------------ */
  /* Tiefenschaerfe                                                           */
  /* ------------------------------------------------------------------------ */

  /*
   * Faehrt eine Karte herein, tritt die darunter liegende im selben Mass
   * zurueck: unscharf und etwas blasser, stufenlos mit dem Scrollweg.
   * --se-pa-cover laeuft von 0 (frei) bis 1 (ganz bedeckt) und kommt aus
   * practice-area.js - weich ein- und ausgeblendet, ohne Sprung.
   *
   * Frueher schaltete eine Klasse zwischen scharf und 3px unscharf um, mitten
   * in der Bewegung und auf allen Karten ausser einer. Das wirkte hart.
   *
   * Die Unschaerfe liegt auf dem Inhalt, nicht auf der Karte: Rand, Rundung
   * und Schatten bleiben gestochen. Sie gilt nur fuer Karten, die gerade
   * bedeckt werden (.is-covered) - alle anderen tragen gar keinen Filter.
   */
  body.se-practice-area .se-pa-services-topic.is-covered > .fusion-column-wrapper {
    filter: blur(calc(var(--se-pa-cover, 0) * var(--se-pa-card-blur)));
    opacity: calc(1 - var(--se-pa-cover, 0) * var(--se-pa-card-dim));
  }

  /*
   * Kein Uebergang: der Wert folgt dem Scrollweg in feinen Stufen (acht je
   * Karte, siehe practice-area.js). Jede Stufe zeichnet den Inhalt genau
   * einmal neu. Ein Uebergang wuerde dazwischen jedes Bild neu zeichnen -
   * gemessen doppelt so teuer, ohne sichtbaren Gewinn. Avada gibt dem
   * Spalteninneren sonst einen eigenen Uebergang auf filter mit.
   */
  body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic > .fusion-column-wrapper {
    transition: none;
  }

  /* Wer in der Karte mit der Tastatur arbeitet, sieht sie immer scharf. */
  body.se-practice-area .se-pa-services-topic:focus-within > .fusion-column-wrapper {
    filter: none;
    opacity: 1;
  }
}


/* ==========================================================================
   7 · KARTENINHALT · TEXTSPALTE UND LEISTUNGSSPALTE
   --------------------------------------------------------------------------
   Die fuenf Elemente einer Karte stehen im Fusion-Code untereinander. Am
   Desktop ordnet ein Raster sie in zwei Spalten:

     Goldzeile     | Kicker ("Dazu beraten wir Sie")
     Titel         |   (unten buendig mit dem Titel)
     Fliesstext    | Leistungen (Linkliste)

   Die Trennlinie der rechten Spalte ist ein eigenes Rasterelement
   (::before), sie laeuft dadurch ueber die volle Hoehe.
   ========================================================================== */

/* Kicker: Open Sans 300, wie die Unterzeile der Einleitung. */
body.se-practice-area .se-pa-services-topic .se-pa-services-reference-kicker .fusion-title-heading {
  margin: 0;
  padding: 0;
  border: 0;
  color: #333333;
  font-family: var(--se-pa-sans);
  font-style: normal;
  font-weight: 300;
  /* Avada setzt Groesse und Zeilenhoehe inline. */
  font-size: 22px !important;
  line-height: 1.35 !important;
  letter-spacing: normal;
  text-transform: none;
}

/*
 * LEISTUNGSKACHELN
 * Jeder Eintrag ist ein abgeschlossenes Feld mit eigener Flaeche und Kante
 * und einer goldenen Pfeiltaste. Im Builder ist es eine einfache Linkliste.
 */
body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links :is(ul, ol) {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links li {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links li::before,
body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links li::marker {
  content: none;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links li > a {
  position: relative;
  min-height: 58px;
  padding: 12px 62px 12px 15px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(15, 48, 93, .15);
  border-radius: 3px;
  background: rgba(15, 48, 93, .028);
  color: var(--se-pa-navy);
  font-family: var(--se-pa-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.32;
  text-decoration: none;
  box-shadow: none;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    color .18s ease;
}

/* Die goldene Pfeiltaste sitzt im Feld. */
body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links li > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 9px;
  width: 40px;
  height: 40px;
  margin: 0;
  border: 0;
  border-radius: 2px;
  background-color: var(--se-pa-gold);
  background-image: url("https://se-legal.de/wp-content/uploads/2026/05/right-rounded-arrow-light.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 19px;
  transform: translateY(-50%);
  transition: background-color .18s ease, transform .18s ease;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links li > a:focus-visible {
  outline: 2px solid var(--se-pa-gold);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Bis 1199px · Leistungen unter dem Text, getrennt durch eine Goldlinie      */
/* -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  body.se-practice-area .se-pa-services-topic .se-pa-services-reference-kicker {
    margin-top: 30px;
    padding-top: 28px;
    border-top: 2px solid var(--se-pa-gold);
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links {
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  body.se-practice-area .se-pa-services-topic .se-pa-services-reference-kicker {
    padding-top: 26px;
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-reference-kicker .fusion-title-heading {
    font-size: 17px !important;
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links li > a {
    min-height: 56px;
    padding: 13px 58px 13px 14px;
    font-size: 14px;
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links li > a::after {
    right: 8px;
    width: 38px;
    height: 38px;
  }
}

/* -------------------------------------------------------------------------- */
/* Ab 1200px · Text links, Leistungen rechts                                  */
/* -------------------------------------------------------------------------- */

@media (min-width: 1200px) {

  /*
   * Der Karteninhalt ist ein eigener Scrollbereich. Das Mausrad scrollt
   * trotzdem die Seite (practice-area.js); bewegen laesst sich der Inhalt
   * ueber die goldene Leiste, per Tastatur und auf Touchgeraeten.
   */
  body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic.fusion-layout-column > .fusion-column-wrapper {
    position: relative;
    width: calc(100% + var(--se-pa-scroll-luft));
    max-width: none;
    height: 100%;
    max-height: 100%;
    margin: 0 calc(0px - var(--se-pa-scroll-luft)) 0 0;
    padding: 0 var(--se-pa-scroll-luft) 0 0;

    display: grid;
    grid-template-columns: minmax(0, 1.52fr) minmax(calc(390 * var(--se-pa-px)), .88fr);
    grid-template-rows: auto auto 1fr;
    column-gap: calc(54 * var(--se-pa-px));
    align-items: start;
    align-content: start;

    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--se-pa-gold) transparent;
  }

  body.se-practice-area .se-pa-services-topic > .fusion-column-wrapper::-webkit-scrollbar {
    width: calc(7 * var(--se-pa-px));
  }

  body.se-practice-area .se-pa-services-topic > .fusion-column-wrapper::-webkit-scrollbar-track {
    background: transparent;
  }

  body.se-practice-area .se-pa-services-topic > .fusion-column-wrapper::-webkit-scrollbar-thumb {
    background: var(--se-pa-gold);
    border-radius: 999px;
  }

  body.se-practice-area .se-pa-services-topic > .fusion-column-wrapper::-webkit-scrollbar-thumb:hover {
    background: #92734f;
  }

  /* Trennlinie der rechten Spalte, ueber alle Zeilen. */
  body.se-practice-area .se-pa-services-topic > .fusion-column-wrapper::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    justify-self: start;
    width: 0;
    border-left: 1px solid rgba(15, 48, 93, .14);
    pointer-events: none;
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-practice-label {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: calc(13 * var(--se-pa-px));
    font-size: max(10px, calc(11 * var(--se-pa-px)));
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-topic-title {
    grid-column: 1;
    grid-row: 2;
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-topic-title .fusion-title-heading {
    font-size: calc(25 * var(--se-pa-px)) !important;
    line-height: 1.24 !important;
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-copy {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
    margin-top: calc(25 * var(--se-pa-px));
  }

  /* Stichpunkte im Fliesstext zweispaltig. */
  body.se-practice-area .se-pa-services-topic .se-pa-services-copy > :is(ul, ol) {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(34 * var(--se-pa-px));
    row-gap: 9px;
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-copy > :is(ul, ol) > li {
    min-width: 0;
    margin: 0;
    break-inside: avoid;
  }

  /* Kicker: unten buendig mit dem Titel links. Beide haben 4px Abstand
     nach unten, die Grundlinien liegen dadurch gleich. */
  body.se-practice-area .se-pa-services-topic .se-pa-services-reference-kicker {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    margin: 0 0 4px;
    padding-left: calc(42 * var(--se-pa-px));
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    min-width: 0;
    /* Derselbe Abstand, mit dem links der Fliesstext unter dem Titel beginnt. */
    margin-top: calc(25 * var(--se-pa-px));
    padding: 0 0 calc(8 * var(--se-pa-px)) calc(42 * var(--se-pa-px));
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links :is(ul, ol) {
    gap: calc(8 * var(--se-pa-px));
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links li > a {
    min-height: calc(58 * var(--se-pa-px));
    padding:
      calc(12 * var(--se-pa-px))
      calc(62 * var(--se-pa-px))
      calc(12 * var(--se-pa-px))
      calc(15 * var(--se-pa-px));
    font-size: max(14px, calc(15 * var(--se-pa-px)));
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links li > a::after {
    right: calc(9 * var(--se-pa-px));
    width: calc(40 * var(--se-pa-px));
    height: calc(40 * var(--se-pa-px));
    background-size: calc(19 * var(--se-pa-px)) calc(19 * var(--se-pa-px));
  }
}

/* ==========================================================================
   6c · BILDMARKE IM BLAUEN BALKEN
   --------------------------------------------------------------------------
   Die Marke stand frueher oben in der rechten Spalte und hat dort rund 150px
   Hoehe belegt - Platz, der den Leistungen fehlte. Sie sitzt jetzt gross und
   stark abgeschwaecht im Titelbalken, so wie das Markenelement im Footer.

   Verankert ist sie an der rechten Kante des Containers, also am
   Fensterrand: right: 0 gilt auf jeder Breite, und die Marke laeuft dort
   angeschnitten aus.

   Die Grafik wird als MASKE benutzt, nicht als Bild. Dadurch bestimmt allein
   die Deckkraft hier die Wirkung - unabhaengig davon, welche Farben in der
   Vorlage stecken. Ueber den Balken hinaus wird sie beschnitten; das
   Anschneiden ist gewollt und entspricht dem Footer.
   ========================================================================== */

/*
 * Die Marke sitzt am UNTEREN Balken und waechst nach oben ueber den Titel.
 *
 * Warum nicht am Titelbalken? Der ist nur rund 116px hoch. Eine Marke, die
 * darin Platz findet, ist entweder winzig oder fast vollstaendig
 * abgeschnitten - beides war der Fall. Die Buttonleiste liegt eine Ebene
 * hoeher als der Titelbalken, ihr Pseudoelement darf deshalb nach oben ueber
 * den Titel hinausragen. Damit stehen rund 220px statt 116px zur Verfuegung.
 *
 * Hoehe und Position rechnen mit --se-pa-title-height und --se-pa-nav-height.
 * Beide misst practice-area.js an den echten Containern; die Marke passt sich
 * dadurch jeder Balkenhoehe an, auf jedem Geraet, ohne feste Zahlen.
 *
 * Der Ueberstand nach oben wird per clip-path genau an der Oberkante des
 * blauen Blocks gekappt - das ist das gewollte leichte Anschneiden. Nach
 * rechts laeuft sie ueber den Bildschirmrand hinaus.
 *
 * Sie liegt unter den Buttons (die tragen z-index 3) und unter dem
 * Schattenverlauf (z-index 2).
 */

body.se-practice-area {
  /* Wie viel groesser als der blaue Block. 1 = buendig, mehr = angeschnitten. */
  --se-pa-marke-faktor: 1.8;
  --se-pa-marke-hoehe: calc(
    (var(--se-pa-title-height) + var(--se-pa-nav-height)) * var(--se-pa-marke-faktor)
  );
  /* Anteil, der rechts weggeschnitten wird. */
  --se-pa-marke-ueberstand: .12;
}

.se-pa-services-navigation-container::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;

  /*
   * Der rechte Anschnitt entsteht ueber die MASKE, nicht ueber die Position:
   * das Element bleibt vollstaendig im Bild, die Grafik darin ist breiter als
   * ihr Kasten und links verankert. Mit "right: -x" haette die Seite sonst
   * 28px horizontalen Ueberlauf bekommen - der Test hat das gemeldet.
   */
  width: calc(var(--se-pa-marke-hoehe) * (1 - var(--se-pa-marke-ueberstand)));
  height: var(--se-pa-marke-hoehe);
  background-color: rgba(255, 255, 255, .075);
  -webkit-mask-image: var(--se-pa-bildmarke);
  mask-image: var(--se-pa-bildmarke);
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: auto var(--se-pa-marke-hoehe);
  mask-size: auto var(--se-pa-marke-hoehe);


  pointer-events: none;
}

/*
 * NUR AM DESKTOP
 * --------------------------------------------------------------------------
 * Ab 1024px liegt die Buttonleiste (z-index 31) ueber dem Titelbalken (30).
 * Die Marke haengt deshalb an der Leiste und ragt von dort nach oben ueber
 * den Titel. Unter 1024px gibt es keine Marke: dort bricht der Titel ueber
 * die volle Breite um, die Marke lag hinter Text und Buttons und wirkte
 * unruhig.
 */
@media (min-width: 1024px) {
  /*
   * Oben rechts verankert.
   * Durch die groessere Marke waechst sie nach links und unten,
   * ohne dass sich die rechte obere Ecke verschiebt.
   */
  .se-pa-services-navigation-container::before {
    top: calc(-1 * var(--se-pa-title-height));
    bottom: auto;
  }
}

@media (max-width: 1023.98px) {
  .se-pa-services-navigation-container::before {
    content: none;
  }
}
/* ==========================================================================
   6b · NACH DEM KARTENSTAPEL
   --------------------------------------------------------------------------
   Bewertungen, Kontakt und Medienleiste sind dieselben Bausteine wie auf
   Start-, Kontakt- und Leistungsseite (Klasse seh26v2). Gestaltung und
   Verhalten kommen vollstaendig aus css/seh26-home.css und
   js/seh26-home.js - hier steht dafuer bewusst nichts.

   Voraussetzung ist der Kurzcode [seh26_v2_assets] im Seiteninhalt (er
   steht im Kontaktbaustein). Er setzt die Body-Klasse seh26v2-page, an der
   Inhaltsachse, Handy-Typografie und der buendige Seitenabschluss haengen.
   ========================================================================== */

/*
 * Sprungziele: Ankerspruenge auf ganze Abschnitte (Inhaltsverzeichnis ->
 * Team, Kontakt) fuehrt seh26-home.js aus. Es haelt dabei den Abstand
 * scroll-margin-top ein - fuer seine eigenen Bausteine 40px, so hoch wie
 * die klebende Kopfleiste. Die uebrigen Abschnitte bekommen denselben Wert,
 * sonst laege ihre Oberkante unter der Kopfleiste.
 */
body.se-practice-area .fusion-fullwidth[id] {
  scroll-margin-top: 40px;
}


/* ==========================================================================
   8 · TEAM
   --------------------------------------------------------------------------
   Beide aeusseren Team-Container sind viewport-breit. Die horizontale
   Avada-Parent-Verschiebung misst practice-area.js aus und neutralisiert sie;
   CSS setzt nur die stabile Basis.

   Im Rasterblock steht durchgaengig !important. Das ist hier kein
   Selbstueberschreiben, sondern der einzige Weg gegen Avadas Spaltensystem:
   .fusion-layout-column bekommt Breite, Float und Aussenabstaende teils
   inline am Element, teils aus dem dynamischen Stylesheet.
   ========================================================================== */

body.se-practice-area .se-pa-team-intro,
body.se-practice-area .se-pa-team-grid-wrap {
  position: relative;
  left: 0;
  right: auto;
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------- */
/* Container 1 · Team-Einleitung                                              */
/* -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-team-intro {
  z-index: 2;
  padding: 65px 30px 35px;
  overflow: visible;
  background: var(--se-pa-team-navy);
  color: #ffffff;
  isolation: isolate;
  /* Navy einige Pixel ueber beide Containerkanten hinausziehen -
     verhindert helle Subpixel-/Compositing-Naehte. */
  box-shadow:
    0 -3px 0 var(--se-pa-team-navy),
    0 3px 0 var(--se-pa-team-navy);
}

/* --------------------------------------------------------------------------
   Abstand ueber "Praxisgruppe" auf Handy und Tablet
   --------------------------------------------------------------------------
   65px Innenabstand oben plus der Abstand unter dem Kartenstapel ergaben auf
   schmalen Geraeten eine sehr grosse Leerflaeche zwischen der letzten Karte
   und der Teamueberschrift. 40px reichen, damit der Navyblock nicht gedraengt
   wirkt. Die Regel steht bewusst NACH der Basisregel: beide sind gleich
   spezifisch, es entscheidet die Reihenfolge.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  body.se-practice-area .se-pa-team-intro {
    padding-top: 40px;
    padding-bottom: 30px;
  }
}

body.se-practice-area .se-pa-team-intro::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -35px;
  width: 0;
  height: 0;
  border-top: 38px solid var(--se-pa-team-navy);
  border-right: 120px solid transparent;
  border-left: 120px solid transparent;
  transform: translateX(-50%);
  pointer-events: none;
}

body.se-practice-area .se-pa-team-intro > .fusion-builder-row.fusion-row {
  display: flex;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body.se-practice-area .se-pa-team-intro-title,
body.se-practice-area .se-pa-team-intro-tagline,
body.se-practice-area .se-pa-team-intro-copy {
  width: 100%;
  padding: 0;
  margin-bottom: 0;
}

body.se-practice-area .se-pa-team-intro-title {
  margin: 5px 0 10px;
}

body.se-practice-area .se-pa-team-intro-title .fusion-title-heading {
  width: 100%;
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: inherit;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 28.8px;
  letter-spacing: normal;
  text-align: center;
}

body.se-practice-area .se-pa-team-intro-tagline {
  margin: 5px 0;
}

body.se-practice-area .se-pa-team-intro-tagline > p {
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--se-pa-team-muted);
  font-family: inherit;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
  line-height: 24.2px;
  letter-spacing: normal;
  text-align: center;
}

body.se-practice-area .se-pa-team-intro-copy {
  max-width: 760px;
  margin: 25px auto 0;
  text-align: center;
}

body.se-practice-area .se-pa-team-intro-copy > p {
  width: 100%;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, .54);
  font-family: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20.8px;
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* Container 2 · Teamkarten · Basis                                           */
/* -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-team-grid-wrap {
  z-index: 1;
  padding: 80px 0 72px;
  overflow: visible;
  background: var(--se-pa-team-soft);
}

body.se-practice-area .se-pa-team-grid-wrap > .fusion-builder-row.fusion-row {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  align-items: stretch;
}

body.se-practice-area .se-pa-team-grid-wrap .fusion-layout-column.se-pa-team-card {
  position: relative;
  float: none;
  clear: none;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 100%;
  min-height: 328px;
  margin: 0;
  padding: 0;
  flex: none;
}

body.se-practice-area .se-pa-team-card > .fusion-column-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 328px;
  margin: 0;
  padding: 40px 34px 26px;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  box-sizing: border-box;
}

/* Profil-Pfeil. Der Slot-Wrapper existiert nur, damit Avadas wpautop den
   Link nicht in einen Absatz wickelt - er nimmt keinen Platz ein. */
body.se-practice-area .se-pa-team-card > .fusion-column-wrapper > div:first-child,
body.se-practice-area .se-pa-team-card-arrow-slot,
body.se-practice-area .se-pa-team-card-arrow-inner {
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

body.se-practice-area a.se-pa-team-card-arrow {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  display: block;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--se-pa-team-gold);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
}

body.se-practice-area a.se-pa-team-card-arrow .fusion-button-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Avada haengt an .fusion-button ein eigenes ::after - das muss weg. */
body.se-practice-area a.se-pa-team-card-arrow::after {
  content: none;
  display: none;
}

body.se-practice-area a.se-pa-team-card-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background-image: url("https://se-legal.de/wp-content/uploads/2026/05/right-rounded-arrow-light.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* Die globale Regel a:not(.fusion-button):hover setzt sonst opacity .7. */
body.se-practice-area a.se-pa-team-card-arrow:hover,
body.se-practice-area a.se-pa-team-card-arrow:focus-visible {
  background: var(--se-pa-team-gold);
  opacity: 1;
}

body.se-practice-area a.se-pa-team-card-arrow:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -5px;
}

body.se-practice-area .se-pa-team-card-arrow[aria-disabled="true"] {
  pointer-events: none;
  cursor: default;
}

/* Foto. display:contents nimmt den wpautop-Wrapper vollstaendig aus dem
   Layout - Link und Bild bleiben direkte Layoutkinder des Fotorahmens. */
body.se-practice-area .se-pa-team-photo-slot {
  display: contents;
}

body.se-practice-area .se-pa-team-photo-placeholder {
  display: grid;
  width: 150px;
  min-width: 150px;
  height: 150px;
  min-height: 150px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
}

body.se-practice-area .se-pa-team-photo-placeholder .se-pa-team-photo-link {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  line-height: 0;
}

body.se-practice-area .se-pa-team-photo-placeholder img.se-pa-team-real-photo {
  display: block;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  height: 150px;
  min-height: 150px;
  max-height: 150px;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: center top;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

/* Name, Funktion, Zusatzzeile */
body.se-practice-area .se-pa-team-card-name {
  width: 100%;
  margin: 28px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #d5d8dc;
}

body.se-practice-area .se-pa-team-card-name.fusion-title,
/*
 * Der Name der Teamkarte ist verlinkt wie Pfeil und Foto. Er soll sich davon
 * aber nicht absetzen - Farbe und Unterstreichung kommen weiter von der
 * Ueberschrift. Ohne diese Regel faerbt Avada den Namen blau.
 */
body.se-practice-area .se-pa-team-card-name a {
  color: inherit;
  text-decoration: none;
}

body.se-practice-area .se-pa-team-card-name a:hover,
body.se-practice-area .se-pa-team-card-name a:focus-visible {
  color: inherit;
  text-decoration: none;
}

body.se-practice-area .se-pa-team-card-role.fusion-text {
  margin-bottom: 0;
}

/* Avadas Heading-Cascade traegt hier hoehere Spezifitaet als der Klassenpfad. */
body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card-name .fusion-title-heading {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--se-pa-team-navy) !important;
  font-family: var(--se-pa-sans) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-synthesis: none !important;
  line-height: 24px !important;
  text-align: center !important;
}

/*
 * ZEILEN FUER DEN NAMEN RESERVIEREN - jetzt reihenweise statt pauschal
 *
 * Hier stand eine feste Regel: unterhalb von 560px bekam JEDE
 * Namensueberschrift zwei Zeilen reserviert. Gedacht war sie fuer den einen
 * Fall, in dem ein Name umbricht und die Funktionsangabe der Nachbarkarte
 * dadurch eine Zeile hoeher begann. Sie traf aber auch alle Karten, bei
 * denen beide Namen einzeilig sind - dort stand dann ueberall eine leere
 * Zeile zu viel.
 *
 * Die Reservierung haengt jetzt an der tatsaechlichen Zeilenzahl der Reihe
 * und wird von practice-area.js gesetzt (Modul "Namenszeilen"). Sie greift
 * genau dann, wenn in derselben Reihe ein Name wirklich umbricht - und dann
 * fuer alle Karten dieser Reihe. Kein Bezug mehr auf einzelne Personen,
 * kein fester Breakpoint: die Regel folgt der Namenslaenge.
 *
 * Der Wert landet als Inline-min-height auf .fusion-title-heading. Hier
 * bleibt nur die Zusicherung, dass die Ueberschrift wachsen darf.
 */
body.se-practice-area .se-pa-team-grid-wrap
.se-pa-team-card-name .fusion-title-heading {
  height: auto;
}

body.se-practice-area .se-pa-team-card-role {
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
}

body.se-practice-area .se-pa-team-card-role > p,
body.se-practice-area .se-pa-team-card-extra,
body.se-practice-area .se-pa-team-card-extra > p {
  margin: 0;
  padding: 0;
  color: #5c5c5c;
  font-family: var(--se-pa-sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}


/* -------------------------------------------------------------------------- */
/* Teamraster · Breakpoints                                                   */
/* Mobil zwei Spalten, 721-1199 zwei Spalten groesser, 1200-1494 drei Spalten, */
/* ab 1495 das abgestimmte Desktopraster mit Hover.                           */
/* -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  body.se-practice-area .se-pa-team-grid-wrap > .fusion-builder-row.fusion-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 14px !important;
    width: calc(100% - 24px) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card > .fusion-column-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 258px !important;
    margin: 0 !important;
    padding: 16px 10px 14px !important;
  }

  body.se-practice-area a.se-pa-team-card-arrow {
    position: absolute !important;
    z-index: 10 !important;
    top: 0 !important;
    right: 0 !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
  }

  /* Einzelne Teamkarte einer Praxisgruppe bleibt in Rasterbreite und mittig. */
  body.se-practice-area .se-pa-team-grid-wrap > .fusion-builder-row.fusion-row
  > .se-pa-team-card:first-of-type:last-of-type {
    grid-column: 1 / -1;
    width: calc((100% - 12px) / 2) !important;
    max-width: 254px !important;
    justify-self: center;
  }

  /* Desktop-Spaltenabstand zwischen FAQ-Frage 5 und 6 mobil raus. */
  body.se-practice-area #faq .se-pa-faq-col-2 {
    margin-top: 0 !important;
  }

  /* Slider-Abstaende; die Werte misst practice-area.js aus dem echten Layout. */
  body.se-practice-area .se-pa-slider-mobile-padding-target {
    padding-bottom: var(--se-pa-slider-mobile-bottom-padding) !important;
  }

  body.se-practice-area .se-pa-slider-mobile-gap-target {
    margin-top: var(--se-pa-slider-mobile-margin-top) !important;
  }
}

/* Touchgeraete: :hover darf nach einem Tap den Namen nicht weiss festhalten. */
@media (max-width: 720px) and (hover: none),
       (max-width: 720px) and (pointer: coarse) {
  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card > .fusion-column-wrapper:hover {
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card
  > .fusion-column-wrapper:hover .se-pa-team-photo-placeholder {
    background: transparent !important;
    border-color: transparent !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card
  > .fusion-column-wrapper:hover .se-pa-team-card-name .fusion-title-heading {
    color: var(--se-pa-team-navy) !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card
  > .fusion-column-wrapper:hover .se-pa-team-card-role > p,
  body.se-practice-area .se-pa-team-card > .fusion-column-wrapper:hover .se-pa-team-card-extra {
    color: #5c5c5c !important;
  }
}

@media (min-width: 721px) and (max-width: 1199px) {
  body.se-practice-area .se-pa-team-grid-wrap > .fusion-builder-row.fusion-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: calc(100% - 48px) !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: stretch !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card > .fusion-column-wrapper {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  body.se-practice-area .se-pa-team-photo-placeholder,
  body.se-practice-area .se-pa-team-photo-placeholder .se-pa-team-photo-link,
  body.se-practice-area .se-pa-team-photo-placeholder img.se-pa-team-real-photo {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap > .fusion-builder-row.fusion-row
  > .se-pa-team-card:first-of-type:last-of-type {
    grid-column: 1 / -1;
    width: calc((100% - 20px) / 2) !important;
    max-width: 440px !important;
    justify-self: center;
  }
}

@media (min-width: 1200px) and (max-width: 1494px) {
  body.se-practice-area .se-pa-team-grid-wrap > .fusion-builder-row.fusion-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: calc(100% - 60px) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: stretch !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card > .fusion-column-wrapper {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap > .fusion-builder-row.fusion-row
  > .se-pa-team-card:first-of-type:last-of-type {
    grid-column: 1 / -1;
    width: calc((100% - 48px) / 3) !important;
    justify-self: center;
  }
}

@media (min-width: 1495px) {
  body.se-practice-area .se-pa-team-grid-wrap {
    padding: 100px 30px 60px;
    overflow: visible;
    box-sizing: border-box;
  }

  body.se-practice-area .se-pa-team-grid-wrap > .fusion-builder-row.fusion-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 1378px !important;
    max-width: 1378px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    align-items: stretch !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap .fusion-layout-column.se-pa-team-card {
    position: relative !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 36px !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    flex: none !important;
    align-self: stretch !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card > .fusion-column-wrapper {
    flex: 1 1 auto;
    width: calc(100% - 36px);
    height: auto;
    min-height: 0;
    margin: 0 18px;
    padding: 0 0 35px;
    transition: background-color .25s ease, box-shadow .25s ease;
  }

  body.se-practice-area a.se-pa-team-card-arrow {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
  }

  body.se-practice-area a.se-pa-team-card-arrow::before {
    background-size: 20px 20px;
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-photo-placeholder {
    display: flex;
    width: 218.5px;
    min-width: 218.5px;
    max-width: 218.5px;
    height: 272px;
    min-height: 272px;
    max-height: 272px;
    margin: 0 auto;
    padding: 50px 0 35px;
    overflow: visible;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    place-items: normal;
    background: #ffffff;
    border: 0;
    border-bottom: 1.25px solid #cccccc;
    border-radius: 0;
    transition: background-color .25s ease, border-color .25s ease;
  }

  body.se-practice-area .se-pa-team-photo-placeholder .se-pa-team-photo-link,
  body.se-practice-area .se-pa-team-photo-placeholder img.se-pa-team-real-photo {
    flex: 0 0 185.7px;
    width: 185.7px;
    min-width: 185.7px;
    max-width: 185.7px;
    height: 185.7px;
    min-height: 185.7px;
    max-height: 185.7px;
    margin: 0;
  }

  body.se-practice-area .se-pa-team-card-name {
    width: 264.5px;
    margin: 30px auto 0;
    padding: 0;
    border: 0;

  }


  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card-name .fusion-title-heading {
    transition: color .25s ease !important;
  }

  body.se-practice-area .se-pa-team-card-role,
  body.se-practice-area .se-pa-team-card-extra {
    width: 264.5px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    text-align: center;
  }

  body.se-practice-area .se-pa-team-card-role > p,
  body.se-practice-area .se-pa-team-card-extra,
  body.se-practice-area .se-pa-team-card-extra > p {
    font-size: 16px;
    line-height: 24px;
    transition: color .25s ease;
  }

  /* Hover */
  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card > .fusion-column-wrapper:hover {
    background: #0f2f5c;
    box-shadow: 0 6px 28px rgba(30, 50, 88, .28);
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card
  > .fusion-column-wrapper:hover .se-pa-team-photo-placeholder {
    background: #0f2f5c;
    border-bottom-color: #556c8c;
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card
  > .fusion-column-wrapper:hover .se-pa-team-card-name .fusion-title-heading {
    color: #ffffff !important;
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card
  > .fusion-column-wrapper:hover .se-pa-team-card-role > p,
  body.se-practice-area .se-pa-team-card > .fusion-column-wrapper:hover .se-pa-team-card-extra,
  body.se-practice-area .se-pa-team-card > .fusion-column-wrapper:hover .se-pa-team-card-extra > p {
    color: rgba(255, 255, 255, .75);
  }

  /* Einzelne Teamkarte in die mittlere Spalte. */
  body.se-practice-area .se-pa-team-grid-wrap > .fusion-builder-row.fusion-row
  > .se-pa-team-card:first-of-type:last-of-type {
    grid-column: 2;
  }
}


/* ==========================================================================
   9 · EINLEITUNG · SPALTENRHYTHMUS UND PORTRAITLEISTE
   --------------------------------------------------------------------------
   Der Intro-Container hat vier halbe Spalten:
     Spalte 1: Ueberschrift links    Spalte 2: Titel rechts
     Spalte 3: Fliesstext links      Spalte 4: Fliesstext rechts
   Ab 1024px stehen sie paarweise nebeneinander, darunter in der Reihenfolge
   Titel links / Text links / Titel rechts / Text rechts (flex order).
   ========================================================================== */

@media (min-width: 1024px) {
  /*
   * Der rechte Titel ("Full Service fuer Sie ...") muss auf derselben Linie
   * sitzen wie die Unterzeile links, weil links der Haupttitel darueber steht.
   *
   * Ausgleich = Aussenabstand des linken Titels oben (Avada, 5px)
   *           + erste Zeile des Haupttitels (25px x 1.14 = 28.5px)
   *           + Abstand zur Unterzeile (6px)
   *           = 39.5px
   *
   * Gemessen an den Boxen: mit 34.5px stand der rechte Titel 5px zu hoch -
   * genau der obere Aussenabstand, den Avada dem linken Titel mitgibt und
   * dem rechten nicht.
   *
   * Der Wert gilt fuer eine EINZEILIGE Hauptueberschrift. Bricht sie um,
   * misst practice-area.js (Modul 2) den echten Abstand und setzt ihn hier
   * ein. Das Custom Field se_pa_intro_lead_offset ist dafuer nicht mehr
   * noetig, wirkt aber weiterhin, solange kein Script laeuft.
   *
   * ACHTUNG: Frueher stand hier :nth-of-type(2). Sobald der Einleitung eine
   * weitere Spalte vorangestellt wird - etwa die Autorenangabe - zaehlt
   * nth-of-type sie mit und der Ausgleich landet auf der FALSCHEN Spalte:
   * der linke Titel rutscht nach unten, der rechte bleibt oben stehen.
   * Deshalb wird die Spalte jetzt ueber ihre Klasse angesprochen. Die ist
   * unabhaengig von Position und Anzahl der Spalten.
   */
  body.se-practice-area .se-pa-intro .se-pa-intro-col-fullservice
  > .fusion-column-wrapper > .fusion-title:first-child {
    margin-top: var(--se-pa-intro-lead-offset, 39.5px);
  }

  /* Abstand Ueberschrift zu Fliesstext = eine Zeilenhoehe (26px). Avada setzt
     20px Unterrand auf jede Spalte; hier nur an den Titelspalten entfernt. */
  body.se-practice-area .se-pa-intro .se-pa-intro-col-lead,
  body.se-practice-area .se-pa-intro .se-pa-intro-col-fullservice {
    margin-bottom: 0;
  }

  body.se-practice-area .se-pa-intro .se-pa-intro-col-copy-left,
  body.se-practice-area .se-pa-intro .se-pa-intro-col-copy-right {
    margin-bottom: 0;
  }

  body.se-practice-area .se-pa-intro .se-pa-intro-col-copy-left .fusion-text,
  body.se-practice-area .se-pa-intro .se-pa-intro-col-copy-right .fusion-text {
    margin-bottom: 28px;
  }
}

@media (max-width: 1023px) {
  body.se-practice-area .se-pa-intro {
    --intro-edge: 28px;
    --intro-edge-bottom: 44px;
    --intro-title-body: 14px;
    --intro-section-gap: 36px;

    padding-top: var(--intro-edge);
    padding-bottom: var(--intro-edge-bottom);
  }

  /*
   * Leere Restspalten aus dem Builder ausblenden.
   *
   * ACHTUNG: Diese Regel hat die Autorenangabe auf Handy und Tablet
   * verschluckt. Sie sitzt in einer eigenen 1_1-Spalte ohne
   * se-pa-intro-col-* Klasse und fiel damit unter "Restspalte".
   * Spalten mit Autorenangabe oder Breadcrumbs sind jetzt ausgenommen.
   */
  body.se-practice-area .se-pa-intro .fusion-builder-row
  > .fusion-layout-column:not([class*="se-pa-intro-col-"]):not(:has(.se-pa-author-slot)):not(:has(.se-pa-author)):not(:has(.se-pa-breadcrumb)):not(:has(.se-pa-reviews-slot)) {
    display: none;
  }

  /* Der vertikale Rhythmus kommt ausschliesslich aus den vier Variablen oben,
     deshalb wird Avadas Spaltenabstand durchgaengig genullt. */
  body.se-practice-area .se-pa-intro .fusion-builder-row > .fusion-layout-column {
    margin-top: 0;
    margin-bottom: 0;
  }

  body.se-practice-area .se-pa-intro .fusion-builder-row > .fusion-layout-column:last-child {
    margin-bottom: 0;
  }

body.se-practice-area .se-pa-intro .se-pa-breadcrumb {
  margin-top: -18px;
  margin-bottom: 32px;
}

  body.se-practice-area .se-pa-intro .fusion-builder-row > .se-pa-intro-col-lead {
    order: 1;
    margin-bottom: var(--intro-title-body);
  }

  body.se-practice-area .se-pa-intro .fusion-builder-row > .se-pa-intro-col-copy-left {
    order: 2;
    margin-bottom: var(--intro-section-gap);
  }

  body.se-practice-area .se-pa-intro .fusion-builder-row > .se-pa-intro-col-fullservice {
    order: 3;
    margin-bottom: var(--intro-title-body);
  }

  body.se-practice-area .se-pa-intro .fusion-builder-row > .se-pa-intro-col-copy-right {
    order: 4;
  }

  body.se-practice-area .se-pa-intro .se-pa-intro-col-lead .fusion-title,
  body.se-practice-area .se-pa-intro .se-pa-intro-col-copy-left .fusion-text,
  body.se-practice-area .se-pa-intro .se-pa-intro-col-copy-right .fusion-text {
    margin-bottom: 0;
  }

  body.se-practice-area .se-pa-intro .se-pa-intro-col-fullservice .fusion-title {
    margin-top: 0;
    margin-bottom: 0;
  }

  /*
   * Die seitlichen Spaltenraender von Avada bleiben stehen.
   * Sie SIND das Grundraster (1.92%). Frueher wurden sie hier genullt -
   * dadurch stand die Einleitung auf schmalen Breiten als einziger Abschnitt
   * neben der Rasterlinie, waehrend Inhaltsverzeichnis, Karten und FAQ
   * daraufsassen.
   */
}

/* --------------------------------------------------------------------------
   Portraitleiste unterhalb 1495px
   Die Portraits stehen im normalen Dokumentfluss oberhalb der Einleitungs-
   ueberschrift. Sie koennen dort weder Text noch Hero ueberdecken.
   Dieser Breakpoint ist bewusst NICHT der Kartenstapel-Breakpoint: die
   Portraits sitzen auf der Kante Hero/Einleitung, nicht im Kartenbereich.
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
  body.se-practice-area .se-pa-intro {
    flex-wrap: wrap;
  }

  /*
   * Descendant statt Kindkombinator: practice-area.js haengt die Leiste im
   * Mobillayout in die Spaltenreihe der Einleitung, damit sie sich per order
   * zwischen Breadcrumb und Ueberschrift einsortieren laesst. Laeuft das
   * Skript nicht, bleibt sie direktes Kind der Einleitung - beide Faelle
   * brauchen dieselbe Darstellung.
   */
  body.se-practice-area .se-pa-intro .se-pa-hero-team {
    position: relative;
    top: auto;
    right: auto;
    order: -1;
    flex: 0 0 100%;
    width: 100%;
    margin: 0 0 22px;
    /* Auf dieselbe Flucht wie die Spalten daneben: Avada rueckt jede Spalte
       um 1.92% der Reihenbreite ein. */
    padding-left: 1.92%;
    padding-right: 1.92%;
    box-sizing: border-box;
    justify-content: flex-start;
    transform: none;
  }

  body.se-practice-area .se-pa-intro > .fusion-builder-row {
    flex: 1 1 100%;
  }

  /*
   * Reihenfolge im Kopf der Einleitung:
   *   Breadcrumb -> Portraits -> Ueberschrift
   * Autorenangabe und Bewertung stehen hier nicht mehr; sie sitzen ueber dem
   * Inhaltsverzeichnis (Modul 3b in practice-area.js). Deshalb greift die
   * Auswahl auch auf den Breadcrumb zu - nach dem Umzug ist er das einzige,
   * was in dieser Spalte uebrig bleibt.
   */
  body.se-practice-area .se-pa-intro .fusion-builder-row
  > .fusion-layout-column:has(.se-pa-breadcrumb),
  body.se-practice-area .se-pa-intro .fusion-builder-row
  > .fusion-layout-column:has(.se-pa-author-slot) {
    order: -2;
    margin-bottom: 0;
  }
}


/* ==========================================================================
   10 · FAQ
   --------------------------------------------------------------------------
   - ruhige helle Fragezeilen
   - aktive Frage vollflaechig Gold mit weisser Schrift
   - Antworten ohne grauen Rahmen, feine goldene Fuehrungslinie links

   !important ist hier durchgehend noetig: Avada erzeugt die Toggle-Optik des
   FAQ-Shortcodes im dynamischen Stylesheet und setzt Farben, Rahmen und
   Polsterung dort selbst mit !important.
   ========================================================================== */

body.se-practice-area #faq .fusion-panel {
  margin-bottom: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.se-practice-area #faq .panel-heading,
body.se-practice-area #faq .panel-title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Geschlossene Frage */
body.se-practice-area #faq .panel-heading a,
body.se-practice-area #faq .panel-title a {
  min-height: 50px !important;
  padding: 10px 66px 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  background: #f7f7f7 !important;
  color: var(--se-pa-navy) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--se-pa-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

body.se-practice-area #faq .panel-heading a:hover,
body.se-practice-area #faq .panel-title a:hover,
body.se-practice-area #faq .panel-heading a:focus,
body.se-practice-area #faq .panel-title a:focus {
  background: #f7f7f7 !important;
  color: var(--se-pa-navy) !important;
}

/* Geoeffnete Frage */
body.se-practice-area #faq .panel-heading a.active,
body.se-practice-area #faq .panel-title a.active {
  min-height: 58px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  background: var(--se-pa-gold) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.se-practice-area #faq .fusion-toggle-heading {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

body.se-practice-area #faq .panel-heading a.active .fusion-toggle-heading,
body.se-practice-area #faq .panel-title a.active .fusion-toggle-heading {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   FAQ-Icon
   --------------------------------------------------------------------------
   Zwei Dinge waren hier falsch:

   1. Avada zeichnete sein eigenes Font-Awesome-Zeichen (fa-arrow-circle-down).
      Verwendet wird jetzt dasselbe Pfeilsymbol wie in den Buttons und in den
      Kartenlinks - nur gedreht. Genau ein Bild fuer die ganze Seite, und beim
      Auf- und Zuklappen dreht es sich, statt gegen ein anderes Zeichen
      getauscht zu werden.

   2. Das goldene Quadrat hing mit fester Hoehe (50px) an der Oberkante,
      waehrend die Zeile beim Oeffnen von 54px auf 62px waechst. Dadurch sass
      das Symbol im geoeffneten Zustand nicht mehr mittig - es "rutschte
      hoch". Der Kasten spannt jetzt ueber die volle Zeilenhoehe und zentriert
      sein Symbol selbst. Damit kann er bei keiner Zeilenhoehe verspringen.
   -------------------------------------------------------------------------- */

body.se-practice-area #faq .fusion-toggle-icon-wrapper,
body.se-practice-area #faq .panel-heading a.active .fusion-toggle-icon-wrapper,
body.se-practice-area #faq .panel-title a.active .fusion-toggle-icon-wrapper {
  /* Oben UND unten verankert - die Hoehe folgt der Zeile. */
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 50px !important;
  min-width: 50px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--se-pa-gold) !important;
  border-left: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   FAQ-Icon · ein einziges Rounded-Arrow-SVG
   --------------------------------------------------------------------------
   Avada liefert intern zwei Status-Icons. Beide bleiben unsichtbar.
   Das sichtbare Symbol liegt genau einmal direkt auf dem Icon-Wrapper.
   -------------------------------------------------------------------------- */

/* Interne Avada-Status-Icons vollständig ausblenden. */
body.se-practice-area #faq .fusion-toggle-icon-wrapper .fa-fusion-box {
  display: none !important;
}

/* Altes, global erzeugtes Chevron deaktivieren. */
body.se-practice-area #faq .fusion-toggle-icon-wrapper::after {
  display: none !important;
}

/* Gewünschtes Rounded-Arrow-SVG genau einmal anzeigen. */
body.se-practice-area #faq .fusion-toggle-icon-wrapper::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 22px !important;
  height: 22px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    url("https://se-legal.de/wp-content/uploads/2026/05/right-rounded-arrow-light.svg")
    center / contain no-repeat !important;

  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: 50% 50% !important;
  transition: transform .25s ease !important;

  filter: none !important;
}

/* Geöffnet: dasselbe Symbol zeigt nach oben. */
body.se-practice-area #faq
a[aria-expanded="true"]
.fusion-toggle-icon-wrapper::before,
body.se-practice-area #faq
a.active
.fusion-toggle-icon-wrapper::before {
  transform: translate(-50%, -50%) rotate(-90deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.se-practice-area #faq .fusion-toggle-icon-wrapper::before {
    transition: none !important;
  }
}

/* Antwortbereich */
body.se-practice-area #faq .panel-collapse {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.se-practice-area #faq .panel-body {
  position: relative !important;
  margin: 0 !important;
  padding: 16px 18px 20px 14px !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Feine Goldlinie links */
body.se-practice-area #faq .panel-body::before {
  content: "" !important;
  position: absolute !important;
  top: 16px !important;
  bottom: 20px !important;
  left: 0 !important;
  width: 2px !important;
  background: var(--se-pa-gold) !important;
}

body.se-practice-area #faq .panel-body > * {
  margin-left: 8px !important;
}

body.se-practice-area #faq .panel-body p {
  margin: 0 0 10px !important;
  color: #414750 !important;
  font-family: var(--se-pa-sans) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

body.se-practice-area #faq .panel-body p:last-child {
  margin-bottom: 0 !important;
}

body.se-practice-area #faq .panel-body a {
  color: var(--se-pa-gold) !important;
}

/* FAQ-Section: gleicher oberer Einstieg wie die anderen grossen Container. */
body.se-practice-area .se-pa-faq-uniform-top-padding {
  padding-top: 65px;
}

@media (max-width: 1023px) {
  body.se-practice-area #faq .fusion-title.subheading-l .fusion-title-heading {
    color: var(--se-pa-copy) !important;
    font-family: var(--se-pa-sans) !important;
    font-size: 22px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 1.33 !important;
  }

  body.se-practice-area #faq > .fusion-builder-row
  > .fusion-layout-column:has(.fusion-faq-shortcode):not(.se-pa-faq-col-2) {
    margin-top: -5px;
  }
}

@media (min-width: 1024px) {
  body.se-practice-area #faq .panel-heading a,
  body.se-practice-area #faq .panel-title a {
    min-height: 54px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-size: 16px !important;
  }

  body.se-practice-area #faq .panel-heading a.active,
  body.se-practice-area #faq .panel-title a.active {
    min-height: 62px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  body.se-practice-area #faq .fusion-toggle-icon-wrapper {
    width: 54px !important;
    min-width: 54px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body.se-practice-area #faq .panel-body {
    padding: 18px 22px 22px 16px !important;
  }

  body.se-practice-area #faq .panel-body::before {
    top: 18px !important;
    bottom: 22px !important;
  }

  body.se-practice-area #faq .panel-body > * {
    margin-left: 10px !important;
  }

  body.se-practice-area #faq .panel-body p {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }
}

/*
 * Bildslider (SE Legal Image Carousel)
 * --------------------------------------------------------------------------
 * Ab 641px rechnet der Slider mit slidesPerView "auto": jede Slide ist so
 * breit wie ihr Inhalt. Swiper gibt Slides aber von Haus aus width: 100%.
 * Die Gegenregel stand frueher in der functions.php (Swiper-Einbindung,
 * inzwischen auskommentiert, Swiper kommt heute von Avada). Ohne sie war am
 * Desktop jede Slide fensterbreit - ein Bild, daneben leere Flaeche, und
 * der Slider schien stillzustehen. Am Handy fiel es nicht auf: dort rechnet
 * er mit festen 1,15 Slides und setzt die Breite selbst.
 */
body.se-practice-area .sel-carousel .sel-slide.swiper-slide {
  width: auto;
}

/* Abstand FAQ zum Bildslider ab Tablet minimal reduzieren.
   Mobil uebernimmt die gemessene Anpassung in practice-area.js. */
@media (min-width: 721px) {
  body.se-practice-area .se-pa-faq-slider-gap-minimal {
    margin-top: -25px;
  }
}

/*
 * FAQ-Bereich ohne Beitraege ausblenden.
 * Der Container zieht seine Fragen aus der Beitragskategorie des
 * Rechtsgebiets. Solange dort nichts liegt, rendert Avada eine leere Huelle
 * aus Ueberschrift und rund 240px blauem Innenabstand. Sobald der erste
 * Beitrag existiert, erscheint der Bereich automatisch wieder.
 */
body.se-practice-area #faq:not(:has(.fusion-panel)) {
  display: none;
}


/* ==========================================================================
   11 · BEWEGUNG REDUZIEREN
   --------------------------------------------------------------------------
   Das Markup ist vollstaendig serverseitig; ohne JavaScript bleibt die Seite
   lesbar, Stapelversatz und -reihenfolge stehen im CSS.

   Bei aktivierter Systemeinstellung "Bewegung reduzieren" laeuft die
   Sticky-Mechanik nicht. Die Karten muessen dann vollstaendig in den
   normalen Fluss zurueck - inklusive Hoehe und Overflow, sonst bleiben
   abgeschnittene Kaesten stehen.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .se-pa-services-scroll-spacer {
    min-height: 0;
  }

  body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    margin-bottom: var(--se-pa-card-gap);
    overflow: visible;
    clip-path: none;
    box-shadow: none;
    transform: none;
    transition: none;
  }

  body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic:nth-last-child(1 of .se-pa-services-topic) {
    margin-bottom: 0;
  }

  body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic > .fusion-column-wrapper {
    height: auto;
    max-height: none;
    overflow: visible;
    filter: none;
    opacity: 1;
  }

  .se-pa-services-navigation,
  body.se-practice-area .se-pa-services-navigation a,
  body.se-practice-area a.se-pa-team-card-arrow,
  body.se-practice-area .se-pa-team-card > .fusion-column-wrapper,
  body.se-practice-area .se-pa-team-photo-placeholder,
  body.se-practice-area .se-pa-team-card-role > p,
  body.se-practice-area .se-pa-team-card-extra,
  body.se-practice-area .se-pa-services-reference-links li > a,
  body.se-practice-area .se-pa-services-reference-links li > a::after,
  body.se-practice-area #sei-toc .toc-icon svg {
    scroll-behavior: auto;
    transition: none;
  }

  body.se-practice-area .se-pa-services-reference-links li > a:hover::after {
    transform: translateY(-50%);
  }

  body.se-practice-area .se-pa-team-grid-wrap .se-pa-team-card-name .fusion-title-heading {
    transition: none !important;
  }

  body.se-practice-area .se-pa-hero-team.is-entering .se-pa-hero-team-item:not([hidden]) {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Avadas mobiler Inhaltsabstand am Seitenende entfaellt. */
@media only screen and (max-device-width: 640px) {
  body.se-practice-area #content {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   12 · SPALTENBREITEN DER SPRUNGNAVIGATION PRO RECHTSGEBIET
   --------------------------------------------------------------------------
   Die Basis traegt die sechs Familienrecht-Proportionen. Ein Rechtsgebiet mit
   anderen Labellaengen bekommt eine eigene Klasse am <nav> im Fusion-Code und
   hier eine Zeile. Alternativ ohne Codeaenderung ueber das Custom Field
   se_pa_nav_columns der jeweiligen Seite.

   Die Anzahl der Werte muss zur Anzahl der Karten passen - sonst setzt
   practice-area.js automatisch gleich breite Spalten.
   ========================================================================== */

body.se-practice-area .se-pa-services-navigation.se-pa-nav-pferderecht {
  --se-pa-nav-columns: 0.85fr 1fr 1.35fr 0.95fr 0.9fr 1.25fr;
}

/* ==========================================================================
   13 · FLACHE LAPTOPBILDSCHIRME
   --------------------------------------------------------------------------
   Ein 14"-MacBook liefert rund 1470 x 800 Pixel. Der Massstab --se-pa-px
   faengt den groessten Teil davon ab (Abschnitt 6). Hier zusaetzlich nur
   die Bauteile des klebenden Kopfes, die der Karte Hoehe wegnehmen:
   flacherer Stapelversatz, kompakterer Titelbalken, niedrigere Buttons.
   Ab 900px Fensterhoehe gilt wieder unveraendert die Referenz.
   ========================================================================== */

@media (min-width: 1200px) and (max-height: 899.98px) {

  body.se-practice-area {
    /* 12 -> 8: der sichtbare Stapel wird flacher und gibt rund 20px frei. */
    --se-pa-stack-step: calc(8 * var(--se-pa-px));
  }

  body.se-practice-area .se-pa-services-heading > .fusion-column-wrapper {
    padding-top: calc(22 * var(--se-pa-px));
    padding-bottom: calc(10 * var(--se-pa-px));
  }

  /* Die Unterzeile bleibt, wird aber leiser gesetzt. */
  body.se-practice-area .se-pa-services-heading .se-pa-services-subtitle {
    font-size: calc(19 * var(--se-pa-px));
  }

  .se-pa-services-navigation-container {
    --se-pa-nav-button-h: calc(62 * var(--se-pa-px));
    --se-pa-nav-pad: calc(6 * var(--se-pa-px));
    --se-pa-nav-button-pad: calc(10 * var(--se-pa-px));

    padding-bottom: calc(8 * var(--se-pa-px));
  }
}

/* ==========================================================================
   14 · LEISTUNGSKACHELN: ZUSTAENDE UND VERWEISE IM FLIESSTEXT
   --------------------------------------------------------------------------
   Faehrt man im Fliesstext einen Link an, der auch rechts als Leistung
   steht, wird die passende Kachel hervorgehoben (practice-area.js, Modul 6).
   Dieselbe Hervorhebung gilt beim direkten Ueberfahren der Kachel - eine
   Kachel hat genau einen hervorgehobenen Zustand.
   ========================================================================== */

body.se-practice-area .se-pa-services-reference-links li > a.se-pa-verweis-aktiv,
body.se-practice-area .se-pa-services-reference-links li > a:hover,
body.se-practice-area .se-pa-services-reference-links li > a:focus-visible {
  background: var(--se-pa-navy);
  color: #ffffff;
  border-color: var(--se-pa-navy);
  /* global.css setzt Links beim Hover auf opacity: .7 */
  opacity: 1;
}

/* Im blauen Zustand verschwindet die goldene Pfeilflaeche, das Pfeilsymbol
   wird weiss. */
body.se-practice-area .se-pa-services-reference-links li > a.se-pa-verweis-aktiv::after,
body.se-practice-area .se-pa-services-reference-links li > a:hover::after,
body.se-practice-area .se-pa-services-reference-links li > a:focus-visible::after {
  background-color: transparent;
  background-image: url("https://se-legal.de/wp-content/uploads/2026/03/right-rounded-arrow.svg");
  filter: brightness(0) invert(1);
  transform: translateY(-50%) translateX(3px);
}

/* Passender Begriff im Fliesstext */
body.se-practice-area .se-pa-services-copy a.se-pa-verweis-aktiv {
  color: #b09069;
  background: rgba(176, 144, 105, .12);
  box-shadow: inset 0 -1px 0 rgba(176, 144, 105, .55);
}



/* ==========================================================================
   15 · HANDY: FEINSCHLIFF NACH RUECKMELDUNG
   --------------------------------------------------------------------------
   15a  Einleitungstitel: Gewicht auf dem Rechtsbereich
   15b  Google-Bewertung und Autorenangabe nebeneinander
   15c  Schnellnavigation: kein Grau beim Antippen
   15d  Sprungleiste: Buttons bleiben deckend, Pfeile klein und unten
   ========================================================================== */

/* --------------------------------------------------------------------------
   15a · Einleitungstitel
   --------------------------------------------------------------------------
   "Rechtsberatung und Vertretung bei" ist nur die Einleitung des Satzes; der
   Inhalt steht in der Unterzeile (Scheidung, Unterhalt, ...). Am Handy stand
   die Einleitung in 25px Merriweather ueber zwei Zeilen und die Unterzeile
   darunter in heller 22px-Schrift - das Gewicht lag auf dem falschen Teil.

   Jetzt, sobald die Einleitung einspaltig steht (bis 1023px):
     - Einleitung klein, immer EINE Zeile: hoechstens 18px, auf schmalen
       Handys so klein, dass "... Vertretung bei" noch passt (19.5 em
       Satzbreite, gemessen an allen drei Rechtsgebieten)
     - Unterzeile 26px in Navy, direkt darunter ohne Luecke
   Am Rechner bleibt es, wie es ist.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  body.se-practice-area .se-pa-intro .se-pa-intro-col-lead .fusion-title-heading {
    font-size: min(18px, calc((100vw - 2 * var(--se-pa-rand)) / 19.5)) !important;
    line-height: 1.3 !important;
  }

  body.se-practice-area .se-pa-intro .se-pa-intro-lead-sub {
    margin-top: 4px;
    color: var(--se-pa-navy);
    font-size: 26px;
    line-height: 1.25;
  }
}

/* --------------------------------------------------------------------------
   15b · Google-Bewertung und Autorenangabe nebeneinander
   --------------------------------------------------------------------------
   Unter 600px standen beide untereinander und nahmen gut 200px Hoehe ein.
   Jetzt eine Zeile: Autorenangabe links, Bewertung rechts - dieselbe
   Reihenfolge wie ab 600px. Beide etwas kleiner, die goldenen Kleinzeilen
   ("Fachlich verantwortlich", "Bewertungen auf Google") auf einer Linie.

   Die Bewertungsgrafik des Plugins setzt ihre Masse in festen Pixeln; sie
   wird als Ganzes auf 72 % verkleinert (zoom, kein Bildschirm-Rendering).
   -------------------------------------------------------------------------- */

@media (max-width: 599.98px) {
  body.se-practice-area .se-pa-intro-meta {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    /* Abstand zum Einleitungstext wie bisher (siehe Abschnitt 4). */
    margin-top: -44px;
  }

  body.se-practice-area .se-pa-intro-meta .se-pa-author-slot {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    transform: none;
  }

  body.se-practice-area .se-pa-intro-meta .se-pa-reviews-slot {
    order: 2;
    flex: 0 0 auto;
  }

  /* Goldene Kleinzeile ueber die ganze Spaltenbreite, darunter Foto und
     Name nebeneinander. Der Absatz tritt dafuer aus dem Layout zurueck
     (display: contents) - seine Zeilen werden Rasterzellen. */
  body.se-practice-area .se-pa-intro-meta .se-pa-author {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 3px 8px;
    align-items: start;
  }

  body.se-practice-area .se-pa-intro-meta .se-pa-author-text {
    display: contents;
    font-size: 12px;
    line-height: 1.4;
  }

  body.se-practice-area .se-pa-intro-meta .se-pa-author-label {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 4px;
  }

  body.se-practice-area .se-pa-intro-meta .se-pa-author-photo {
    grid-column: 1;
    grid-row: 2 / span 2;
    width: 30px;
    height: 30px;
  }

  body.se-practice-area .se-pa-intro-meta .se-pa-author-name,
  body.se-practice-area .se-pa-intro-meta .se-pa-author-review {
    grid-column: 2;
    font-size: 12px;
    line-height: 1.4;
  }

  body.se-practice-area .se-pa-intro-meta .se-pa-author-label,
  body.se-practice-area .se-pa-intro-meta .se-pa-reviews-label {
    font-size: 9px;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  body.se-practice-area .se-pa-intro-meta .se-pa-reviews {
    text-align: right;
  }

  body.se-practice-area .se-pa-intro-meta .se-pa-reviews .rpi {
    zoom: .72;
  }

  body.se-practice-area .se-pa-intro-meta .se-pa-reviews-link {
    align-items: flex-end;
    margin-left: auto;
  }
}

/* --------------------------------------------------------------------------
   15c · Schnellnavigation
   --------------------------------------------------------------------------
   Beim Antippen legte der Handy-Browser seine graue Tipp-Hervorhebung ueber
   den Button - das kurze graue Flackern. Abgeschaltet; sichtbares Feedback
   gibt das Aufklappen selbst, das jetzt weich laeuft (practice-area.js,
   Modul 3c). Waehrend des Zuklappens dreht der Pfeil schon zurueck.
   -------------------------------------------------------------------------- */

body.se-practice-area #sei-toc summary,
body.se-practice-area #sei-toc a {
  -webkit-tap-highlight-color: transparent;
}

body.se-practice-area #sei-toc details.is-schliessend .toc-icon svg {
  transform: none;
}

/* --------------------------------------------------------------------------
   15d · Sprungleiste
   --------------------------------------------------------------------------
   Transparenz: css/global.css setzt auf JEDEN Link beim Darueberfahren
   opacity: .7. Am Handy loest schon das Beruehren beim Wischen "hover" aus -
   die Buttons wurden kurz durchsichtig. Hier gilt immer volle Deckkraft,
   dazu keine graue Tipp-Hervorhebung.

   Pfeile: 34px mitten auf der Buttonzeile verdeckten Text. Jetzt 24px und
   auf der Unterkante der Buttons - sie sitzen auf der Ecke statt auf der
   Schrift. Nur im schmalen Layout (bis 1199px); am Desktop blaettert die
   Leiste mit eigenen Pfeilen (Abschnitt 6).
   -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-services-navigation a,
body.se-practice-area .se-pa-services-navigation a:hover,
body.se-practice-area .se-pa-services-navigation a:active,
body.se-practice-area .se-pa-services-navigation a:focus {
  opacity: 1;
  -webkit-tap-highlight-color: transparent;
}

body.se-practice-area .se-pa-services-nav-arrow {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1199.98px) {
  body.se-practice-area .se-pa-services-nav-arrow {
    top: calc(var(--se-pa-nav-pad-top) + var(--se-pa-nav-button-min-h) - 3px);
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    box-shadow: 0 2px 6px rgba(15, 48, 93, .25) !important;
  }

  body.se-practice-area .se-pa-services-nav-arrow::before {
    width: 7px;
    height: 7px;
    border-top-width: 1.5px;
    border-right-width: 1.5px;
  }

  body.se-practice-area .se-pa-services-nav-arrow--prev { left: 6px; }
  body.se-practice-area .se-pa-services-nav-arrow--next { right: 6px; }
}


/* ==========================================================================
   16 · RUECKMELDUNG 2
   --------------------------------------------------------------------------
   16a  Keine Naht zwischen Titelbalken und Sprungleiste
   16b  Sprungleiste: Woerter werden nie getrennt
   16c  Teamblock: hellere Schrift auf Navy
   16d  FAQ: Antworten naeher an Kante und Frage, nur Markengold
   ========================================================================== */

/* --------------------------------------------------------------------------
   16a · Naht zwischen Titelbalken und Sprungleiste
   --------------------------------------------------------------------------
   Die Kante zwischen beiden liegt auf einem Pixelbruchteil (z. B. 218,67px).
   Safari setzt die Sprungleiste als eigene Ebene auf ganze Geraetepixel und
   laesst dabei eine Pixelzeile frei - durch sie schien der weisse
   Seitengrund als feine Linie. Jetzt liegt auf beiden Seiten der Kante
   Navy: der Titelbalken reicht 2px tiefer, und hinter der oberen Haelfte der
   Buttons (wo die Leiste ohnehin Navy zeigt) ist auch der Container navy.
   -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-services-title-container {
  box-shadow: 0 -24px 0 0 var(--se-pa-navy), 0 2px 0 0 var(--se-pa-navy);
}

@media (max-width: 1199.98px) {
  body.se-practice-area .se-pa-services-navigation-container {
    background: linear-gradient(
      to bottom,
      var(--se-pa-navy) 0,
      var(--se-pa-navy) calc(var(--se-pa-nav-pad-top) + var(--se-pa-nav-button-min-h) / 2),
      transparent calc(var(--se-pa-nav-pad-top) + var(--se-pa-nav-button-min-h) / 2)
    );
  }
}

/* --------------------------------------------------------------------------
   16b · Sprungleiste: keine Silbentrennung
   --------------------------------------------------------------------------
   Vorher trennte der Browser lange Woerter ("Scheidung & Trenn-ung"). Jetzt
   bricht die Zeile nur zwischen ganzen Woertern um. Damit auch die
   laengsten Woerter ("Familienzusammenfuehrung", "Niederlassungserlaubnis")
   passen, ist ein Button nie schmaler als sein laengstes Wort - er wird im
   Zweifel etwas breiter. In allen Layouts.
   -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-services-navigation a {
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  min-width: min-content;
}

/* --------------------------------------------------------------------------
   16c · Teamblock: hellere Schrift
   --------------------------------------------------------------------------
   Auf Navy (#0f305d) waren die Unterzeile (#889ab5, Kontrast 4,6:1) und der
   Text darunter (Weiss mit 54 % Deckkraft, 4,9:1) zu blass. Jetzt dieselben
   Farben wie im Kontaktbaustein der Startseite, der auf demselben Navy
   steht:
     Unterzeile "Persoenlich gefuehrt ..."   #b7c0ce   7,2:1
     Text darunter                           #dee0ea  10,0:1
   Beide erfuellen damit auch die strengste Stufe (AAA, ab 7:1).
   -------------------------------------------------------------------------- */

body.se-practice-area {
  --se-pa-team-muted: #b7c0ce;
}

body.se-practice-area .se-pa-team-intro-copy > p {
  color: #dee0ea;
}

/* --------------------------------------------------------------------------
   16d · FAQ
   --------------------------------------------------------------------------
   Abstand: In jeder Antwort steckt ein eigener Avada-Container (die Antwort
   ist ein Beitrag), der am Handy noch einmal 15px oben und 25px seitlich
   polsterte - der Text stand 42px vom Rand und 31px unter der Frage. Jetzt
   traegt nur die Antwortbox selbst den Abstand.

   Farbe: css/global.css setzt jeden Link beim Darueberfahren auf 70 %
   Deckkraft; am Handy loest das schon das Antippen aus. Die goldene Frage
   wirkte dadurch aufgehellt, dazu kam die blaue Tipp-Hervorhebung des
   Browsers. Jetzt immer volles Markengold #b09069.
   -------------------------------------------------------------------------- */

body.se-practice-area #faq .panel-body .fusion-fullwidth {
  padding: 0 !important;
}

body.se-practice-area #faq .panel-body {
  padding: 10px 14px 16px 10px !important;
}

body.se-practice-area #faq .panel-body::before {
  top: 10px !important;
  bottom: 16px !important;
}

body.se-practice-area #faq .panel-body > * {
  margin-left: 6px !important;
}

@media (min-width: 1024px) {
  body.se-practice-area #faq .panel-body {
    padding: 12px 20px 20px 12px !important;
  }

  body.se-practice-area #faq .panel-body::before {
    top: 12px !important;
    bottom: 20px !important;
  }

  body.se-practice-area #faq .panel-body > * {
    margin-left: 8px !important;
  }
}

body.se-practice-area #faq .panel-heading a,
body.se-practice-area #faq .panel-title a,
body.se-practice-area #faq .panel-heading a:hover,
body.se-practice-area #faq .panel-title a:hover,
body.se-practice-area #faq .panel-heading a:active,
body.se-practice-area #faq .panel-title a:active {
  opacity: 1 !important;
  -webkit-tap-highlight-color: transparent;
}


/* ==========================================================================
   17 · FAQ-ANTWORTEN: KLEINER, BUENDIG, UEBERFLIEGBAR
   --------------------------------------------------------------------------
   Die Antworten standen in 16/17px - groesser als die Frage (15/16px) und
   eingerueckt an einer anderen Kante. Jetzt:
     - Schrift 14px am Handy, 15px am Rechner, ruhiger Zeilenabstand
     - Text auf derselben senkrechten Linie wie der Fragetext (18px),
       die goldene Linie auf der Kante der Fragebox
     - Highlights zum Ueberfliegen (practice-area.js, Modul 7):
         erster Satz  = Kernaussage, Navy mit goldenem Marker
         Paragraphen  = "§ 1353 Abs. 1 BGB" in dunklem Gold
       Links in Navy mit goldener Unterstreichung, Listen mit goldenen
       Punkten.
   Ohne JavaScript bleibt alles lesbar, nur ohne Marker.
   ========================================================================== */

body.se-practice-area #faq .panel-body {
  padding: 12px 16px 18px 18px !important;
}

body.se-practice-area #faq .panel-body::before {
  top: 12px !important;
  bottom: 18px !important;
}

/* Der Avada-Container in jeder Antwort rueckt nichts mehr ein. */
body.se-practice-area #faq .panel-body > *,
body.se-practice-area #faq .panel-body .fusion-builder-row,
body.se-practice-area #faq .panel-body .fusion-layout-column,
body.se-practice-area #faq .panel-body .fusion-column-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.se-practice-area #faq .panel-body .fusion-layout-column {
  width: 100% !important;
}

body.se-practice-area #faq .panel-body p,
body.se-practice-area #faq .panel-body li {
  color: #4b5361 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  letter-spacing: .005em;
}

body.se-practice-area #faq .panel-body p {
  margin: 0 0 10px !important;
}

@media (min-width: 1024px) {
  body.se-practice-area #faq .panel-body {
    padding: 14px 24px 22px 18px !important;
  }

  body.se-practice-area #faq .panel-body::before {
    top: 14px !important;
    bottom: 22px !important;
  }

  body.se-practice-area #faq .panel-body p,
  body.se-practice-area #faq .panel-body li {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
}

/* Kernaussage: erster Satz der Antwort */
body.se-practice-area #faq .se-pa-faq-kern {
  color: var(--se-pa-navy);
  font-weight: 600;
  background: linear-gradient(transparent 62%, rgba(176, 144, 105, .24) 62%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Paragraphen und Gesetze */
body.se-practice-area #faq .se-pa-faq-norm {
  color: var(--se-pa-gold-dark);
  font-weight: 600;
  white-space: nowrap;
}

/* Links: Navy statt hellem Gold (besser lesbar), Gold als Unterstreichung */
body.se-practice-area #faq .panel-body a {
  color: var(--se-pa-navy) !important;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--se-pa-gold);
  opacity: 1 !important;
}

body.se-practice-area #faq .panel-body a:hover {
  color: var(--se-pa-gold-dark) !important;
}

/* Listen: goldene Punkte, knapper */
body.se-practice-area #faq .panel-body ul {
  margin: 4px 0 12px !important;
  padding: 0 !important;
  list-style: none !important;
}

body.se-practice-area #faq .panel-body ul li {
  position: relative;
  margin: 0 0 6px !important;
  padding-left: 16px !important;
}

body.se-practice-area #faq .panel-body ul li::before {
  content: "";
  position: absolute;
  top: .68em;
  left: 2px;
  width: 5px;
  height: 5px;
  background: var(--se-pa-gold);
}


/* ==========================================================================
   18 · KARTEN: ZUSAMMENHALT, TITEL, SPRUNG ZU DEN BERATUNGSLEISTUNGEN
   --------------------------------------------------------------------------
   18a  Titelbalken und Sprungleiste trennen sich nicht mehr
   18b  Kartentitel ein Ticken kleiner (schmales Layout)
   18c  Link "Zu den Beratungsleistungen" unter jedem Kartentitel
   ========================================================================== */

/* --------------------------------------------------------------------------
   18a · Zusammenhalt beim Neuladen
   --------------------------------------------------------------------------
   Die Buttonleiste klebt auf "Kopf + Titelhoehe". Die Titelhoehe misst
   practice-area.js - WP Rocket startet das Skript aber erst bei der ersten
   Beruehrung. Bis dahin galt ein Schaetzwert (200px). Wer die Seite mitten
   in den Karten neu lud, sah beide Balken getrennt, mit Text in der Luecke
   (gemessen: 101px am Handy, 98px am Rechner).

   Jetzt ist der Startwert je Layout die Hoehe, die der Titelbalken vor dem
   Skript wirklich hat - gemessen mit allen drei Rechtsgebietstiteln, sie
   sind ueberall gleich hoch:

     bis 440px         96.4px   Titel zweizeilig neben dem Logo
                                (Abschnitt 19); unter 355px waechst der
                                Wert mit der Schrift: 46px + 2 Zeilen
     441 - 599px       86.4px   ebenso, Avada-Schriftstufe "mittel"
     600 - 1199px        62px   einzeilig
     ab 1200px       91 - 103px mitwachsend (gemessen 90 - 102px)

   Die Leiste sitzt damit schon vor dem Skript direkt unter dem Titel, ohne
   zusaetzliches Polster. Waechst der Balken spaeter (Auslaenderrecht: Zeile
   "Naechster freier Termin", vom Skript nachgeladen), misst das Skript neu.

   Sicherung fuer kuerzere Titel: Bis zur ersten Messung ist der Balken
   mindestens so hoch wie der Startwert - lieber ein paar Pixel Navy als eine
   Luecke. Bei den heutigen Titeln greift das nirgends.

   Am Rechner bekommt auch die Hoehe der Leiste, auf der die Karten
   andocken, einen gemessenen Startwert (69 - 78px, vorher 120px: die Karte
   dockte bis zur Messung 19 - 27px zu tief an).
   -------------------------------------------------------------------------- */

body.se-practice-area {
  /* Polster und Abstaende 46px + zwei Zeilen zu 1.2 x Schriftgroesse;
     Schriftgroesse wie in Abschnitt 19. */
  --se-pa-title-height: calc(46px + 2.4 * min(21px, (100vw - 2 * var(--se-pa-rand)) / 14.6));
}

@media (min-width: 441px) {
  body.se-practice-area {
    --se-pa-title-height: 86.4px;
  }
}

@media (min-width: 600px) {
  body.se-practice-area {
    --se-pa-title-height: 62px;
  }
}

@media (min-width: 1200px) {
  body.se-practice-area {
    --se-pa-title-height: clamp(91px, 5vw + 31px, 103px);
    --se-pa-nav-height: clamp(69px, 3.75vw + 24px, 78px);
  }
}

body.se-practice-area:not(.se-pa-gemessen) .se-pa-services-title-container {
  min-height: var(--se-pa-title-height);
}

/* --------------------------------------------------------------------------
   18b · Kartentitel
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  body.se-practice-area .se-pa-services-topic .se-pa-services-topic-title .fusion-title-heading {
    font-size: 21px !important;
  }
}

/* --------------------------------------------------------------------------
   18c · "Unsere Beratungsleistungen"
   --------------------------------------------------------------------------
   Im schmalen Layout stehen Text und Leistungsliste untereinander - wer nur
   die Leistungen sucht, muss den ganzen Text durchscrollen. Der Link unter
   dem Titel springt direkt zu "Dazu beraten wir Sie". Angelegt von
   practice-area.js (Modul 8), kein Element im Fusion-Code. Am Rechner
   stehen Text und Liste nebeneinander; dort entfaellt er.

   Schrift wie die duennen Zwischenzeilen der Seite ("Dazu beraten wir Sie"):
   Open Sans 300, 17px, im Grau des Fliesstexts (#666666). Kein Kasten, kein
   Gold - der Link ordnet sich unter dem Navy-Titel ein. Pfeil nach unten
   (der Sprung fuehrt weiter nach unten in die Karte), duenner Strich.
   -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-services-zu-leistungen {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  padding: 3px 0;
  color: #666666 !important;
  font-family: var(--se-pa-sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0;
  text-decoration: none;
  opacity: 1 !important;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease;
}

body.se-practice-area .se-pa-services-zu-leistungen svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transition: transform .2s ease;
}

body.se-practice-area .se-pa-services-zu-leistungen:hover,
body.se-practice-area .se-pa-services-zu-leistungen:focus-visible {
  color: var(--se-pa-navy) !important;
}

body.se-practice-area .se-pa-services-zu-leistungen:hover svg {
  transform: translateY(2px);
}

body.se-practice-area .se-pa-services-zu-leistungen:focus-visible {
  outline: 2px solid var(--se-pa-gold);
  outline-offset: 2px;
}

/* Das Sprungziel bekommt den Fokus (fuer Tastatur und Screenreader), soll
   dabei aber keinen Rahmen zeigen - es ist eine Ueberschrift, kein
   Bedienelement. */
body.se-practice-area .se-pa-services-reference-kicker:focus {
  outline: none;
}

@media (min-width: 1200px) {
  body.se-practice-area .se-pa-services-zu-leistungen {
    display: none;
  }
}


/* ==========================================================================
   19 · HANDY: SE-LOGO IM KLEBENDEN TITELBALKEN
   --------------------------------------------------------------------------
   Bis 599px steht links im Balken "Unsere Dienstleistungen im ..." das runde
   SE-Logo: buendig mit dem Kartentext darunter, senkrecht mittig zum Titel,
   klebt mit dem Balken. Der Titel wird einen Ticken kleiner (21 statt 22px)
   und bricht immer vor "im" um:

       (SE)  Unsere Dienstleistungen
             im Familienrecht

   Der Balken wird dadurch etwas schmaler, die Karten bekommen mehr Platz.

   Umbruch: Die Titelbreite ist auf 12.4em begrenzt. "Unsere
   Dienstleistungen" ist 11.95em breit, mit " im" 13.51em - das "im" passt
   nie mehr in die erste Zeile. Die zweite Zeile ("im Auslaenderrecht"
   9.0em, "im Versicherungsrecht" 11.0em) passt immer. Rein per CSS, kein
   Eingriff in den Fusion-Code, wirkt auch vor dem Skript.

   Schmale Handys: Logo, Abstand und erste Zeile brauchen zusammen 14.5em.
   Wo 21px dafuer nicht reichen (unter rund 355px), wird alles gemeinsam
   kleiner - bei 320px 19px. Das Logo waechst und schrumpft mit (2em).

   Logo: Form aus wp-content/uploads/2023/10/se-logo-2.png. Die Datei ist
   das Logo in Navy mit 2 % Deckkraft (ein Wasserzeichen) - auf dem
   Navy-Balken waere es unsichtbar. Hier dieselbe Form in Weiss, voll
   deckend, 128px (scharf bis 3-fache Pixeldichte), eingebettet: kein
   zusaetzlicher Abruf, kein Nachladen durch WP Rocket, sofort da.
   -------------------------------------------------------------------------- */

@media (max-width: 599.98px) {
  body.se-practice-area .se-pa-services-heading .se-pa-services-title {
    display: flex;
    align-items: center;
    gap: .55em;
    font-size: min(21px, calc((100vw - 2 * var(--se-pa-rand)) / 14.6));
  }

  body.se-practice-area .se-pa-services-heading .se-pa-services-title::before {
    content: "";
    flex: 0 0 auto;
    width: 2em;
    height: 2em;
    background: url("data:image/png;base64,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") center / contain no-repeat;
  }

  body.se-practice-area .se-pa-services-heading .se-pa-services-title .fusion-title-heading {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 12.4em;
    font-size: 1em !important;
    line-height: 1.2 !important;
  }
}


/* ==========================================================================
   20 · PFEILE OHNE KREIS
   --------------------------------------------------------------------------
   Blaetterpfeile der Buttonleiste: kein goldener Kreis mehr, nur der Winkel
   selbst in Markengold - etwas groesser und kraeftiger, damit er ohne
   Flaeche gut sichtbar bleibt. Die Tippflaeche bleibt gleich gross
   (unsichtbar). Beim Darueberfahren dunkleres Gold. Alle Layouts.
   -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-services-nav-arrow,
body.se-practice-area .se-pa-services-nav-arrow:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.se-practice-area .se-pa-services-nav-arrow::before {
  width: 11px !important;
  height: 11px !important;
  border-top: 2.5px solid var(--se-pa-gold) !important;
  border-right: 2.5px solid var(--se-pa-gold) !important;
  transition: border-color .2s ease;
}

body.se-practice-area .se-pa-services-nav-arrow:hover::before {
  border-color: var(--se-pa-gold-dark) !important;
}

body.se-practice-area .se-pa-services-nav-arrow:focus-visible {
  outline: 2px solid var(--se-pa-gold);
}

/* Schmales Layout: Die Pfeile liegen unter der Buttonzeile, nicht mehr auf
   ihrer Unterkante - ein ruhiger Hinweis, dass es seitlich weitergeht, ohne
   in die Buttons zu ragen. Am Rechner bleiben sie am Rand der Leiste. */
@media (max-width: 1199.98px) {
  body.se-practice-area .se-pa-services-nav-arrow {
    /* An der echten Unterkante der Leiste, nicht an der Normhoehe der
       Buttons: lange Bezeichnungen machen Buttons dreizeilig (66 statt
       53px), dann ragte der Pfeil in sie hinein. */
    top: calc(100% + 5px);
    transform: none !important;
  }

  body.se-practice-area .se-pa-services-nav-arrow::before {
    width: 9px !important;
    height: 9px !important;
    border-top-width: 2px !important;
    border-right-width: 2px !important;
  }
}

/* --------------------------------------------------------------------------
   20b · Rechner: Pfeile in Weiss
   --------------------------------------------------------------------------
   Am Rechner sitzen die Pfeile auf dem ausgeblendeten Rand des angeschnittenen
   Buttons - ein Verlauf von Weiss nach Navy. Gold hob sich dort kaum ab.
   Weiss mit einem Hauch Schatten steht auf jedem Punkt des Verlaufs.
   Beim Darueberfahren Gold. Im schmalen Layout (Pfeile unter der Leiste,
   heller Grund) bleiben sie golden.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  body.se-practice-area .se-pa-services-nav-arrow::before {
    border-color: #ffffff !important;
    filter: drop-shadow(0 1px 2px rgba(15, 48, 93, .55));
  }

  body.se-practice-area .se-pa-services-nav-arrow:hover::before {
    border-color: var(--se-pa-gold) !important;
  }
}


/* ==========================================================================
   21 · ENGLISCHE SEITEN: ZWISCHENUEBERSCHRIFTEN UND LEISTUNGSGRUPPEN
   --------------------------------------------------------------------------
   Die englischen Rechtsgebietsseiten bringen zwei Dinge mit, die es auf den
   deutschen nicht gibt:

   21a  Zwischenueberschriften im Kartentext (<h4>), z. B. "International
        Divorce Proceedings" unter "Divorce & Separation in Germany".
        Merriweather 600 in Navy, eine Stufe unter dem Kartentitel.
   21b  Gruppen in der Leistungsliste: eine kleine goldene Zeile ueber
        jeder Liste, z. B. "General Divorce Services" - wie die Goldzeile
        ueber dem Kartentitel.

   Beides greift nur, wenn es im Fusion-Code steht. Die deutschen Seiten
   bleiben unveraendert.

   21c  Kursive Unterzeile im Kopf aus eigener Quelle
   21d  Leistungsindex: Listen als ruhige Zeilen (Klasse se-pa-services-index)
   21e  Englischer Titelbalken am Handy zweizeilig
   ========================================================================== */

body.se-practice-area .se-pa-services-topic .se-pa-services-copy h4 {
  margin: 30px 0 10px;
  padding: 0;
  color: var(--se-pa-navy);
  font-family: var(--se-pa-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-copy > h4:first-child {
  margin-top: 0;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links .se-pa-services-reference-group {
  margin: 22px 0 10px;
  color: var(--se-pa-gold-dark);
  font-family: var(--se-pa-sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-reference-links .se-pa-services-reference-group:first-child {
  margin-top: 0;
}

@media (max-width: 640px) {
  body.se-practice-area .se-pa-services-topic .se-pa-services-copy h4 {
    margin-top: 26px;
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   21c · Kursive Unterzeile im Kopf - auf jeder Sprache dieselbe Schrift
   --------------------------------------------------------------------------
   Die Unterzeile nutzt die in Avada hochgeladene Familie "Merriweather
   Italic". Avada stellt sie nur in den Sprachen bereit, deren Optionen sie
   kennen - auf der englischen Seite fehlte sie, der Browser zeichnete eine
   Ersatzschrift (aufrecht, Times). Hier steht dieselbe Kursive als eigene
   Quelle dahinter: die lokal gespeicherten Google-Dateien von Merriweather
   400 kursiv, unter eigenem Namen und als "normal" deklariert, damit der
   Browser nichts zusaetzlich schraegt. Ist die hochgeladene Familie da (wie
   auf den deutschen Seiten), bleibt alles wie bisher.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'SE Merriweather Kursiv';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/u-4B0qyriQwlOrhSvowK_l5-eTxCVx0ZbwLvKH2Gk9hLmp0v5yA-xXPqCzLvPee1XYk_XSf-FmTCUG35AvHqYQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'SE Merriweather Kursiv';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/uploads/fusion-gfonts/u-4B0qyriQwlOrhSvowK_l5-eTxCVx0ZbwLvKH2Gk9hLmp0v5yA-xXPqCzLvPee1XYk_XSf-FmTCUG33AvE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.se-practice-area .se-pa-hero .se-pa-hero-tagline .fusion-title-heading {
  font-family: 'Merriweather Italic', 'SE Merriweather Kursiv', Georgia, serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
   21d · Leistungsindex: Listen als ruhige Zeilen statt Aufzaehlung
   --------------------------------------------------------------------------
   Fuer Karten, deren Text nur aus Listen besteht (englische
   Auslaenderrechtsseite, erste Karte: die alte Leistungsuebersicht). Als
   normale Aufzaehlung wechselten dort goldene Links und navy Text, dazu
   eingerueckte Unterpunkte - unruhig und unuebersichtlich.

   Jetzt: jeder Punkt eine Zeile mit feiner Linie darunter und kleinem
   goldenen Winkel davor (wie die Pfeile der Sprungleiste). Text einheitlich
   navy, Links nur durch eine goldene Unterstreichung erkennbar. Unterpunkte
   laufen grau in derselben Zeile weiter, mit Mittelpunkt getrennt:
       > Residence permit for: Specialists, especially doctors · Commuters · Athletes
   Am Rechner zwei Spalten, die Linien einer Reihe liegen auf gleicher Hoehe.

   Greift nur mit der Klasse se-pa-services-index am Kartentext (im
   Fusion-Code gesetzt). Alle anderen Karten: unveraendert.
   -------------------------------------------------------------------------- */

body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index > :is(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index > :is(ul, ol) > li {
  position: relative;
  margin: 0;
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid rgba(15, 48, 93, .12);
  color: var(--se-pa-navy);
  font-family: var(--se-pa-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  list-style: none;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index > :is(ul, ol) > li::marker {
  content: none;
}

/* Goldener Winkel */
body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index > :is(ul, ol) > li::before {
  content: "";
  position: absolute;
  top: calc(10px + .775em - 3.5px);
  left: 2px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--se-pa-gold);
  border-right: 1.5px solid var(--se-pa-gold);
  transform: rotate(45deg);
}

/* Unterpunkte grau in derselben Zeile */
body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index li :is(ul, ol) {
  display: inline;
  margin: 0;
  padding: 0;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index li :is(ul, ol) > li {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--se-pa-copy);
  font: inherit;
  list-style: none;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index li :is(ul, ol) > li::before {
  content: none;
}

/* Der Punkt haengt am vorigen Wort: umgebrochen wird nach ihm, nie davor. */
body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index li :is(ul, ol) > li:not(:last-child)::after {
  content: "\00a0\00b7";
  color: var(--se-pa-gold);
}

/* Links: Farbe des Textes, goldene Unterstreichung */
body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index a {
  color: inherit;
  text-decoration: underline;
  /* zart: die Zeile ist ohnehin Navigation, der Strich zeigt nur das Ziel */
  text-decoration-color: rgba(176, 144, 105, .5);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .18s ease, text-decoration-color .18s ease;
}

body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index a:hover,
body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index a:focus-visible {
  color: var(--se-pa-gold-dark);
  text-decoration-color: var(--se-pa-gold);
}

body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index > h4 {
  margin-top: 24px;
  margin-bottom: 4px;
}

@media (min-width: 1200px) {
  body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index > :is(ul, ol) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(34 * var(--se-pa-px));
    row-gap: 0;
  }

  body.se-practice-area .se-pa-services-topic .se-pa-services-copy.se-pa-services-index > :is(ul, ol) > li {
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   21e · Englischer Titelbalken am Handy: zwei Zeilen
   --------------------------------------------------------------------------
   Englisch steht der lange Teil hinten: "Our Legal Services in / German
   Immigration Law". Die zweite Zeile ist 12.71em breit, Abschnitt 19 laesst
   12.4em - der Titel brach dreizeilig um, der Balken war 25px hoeher als
   sein Startwert (18a) und die Buttonleiste lag vor dem Skript auf der
   dritten Zeile.

   Auf englischen Seiten darf der Titel deshalb 12.9em breit werden; Logo,
   Abstand und Titel brauchen zusammen 15.4em, darunter (unter rund 375px)
   wird alles gemeinsam kleiner, bei 320px 18 statt 19px. "Our Legal
   Services in German" (14.43em) passt nie in die erste Zeile, der Umbruch
   bleibt also immer vor "German". Der Startwert der Titelhoehe rechnet mit
   derselben Schrift. Deutsche Seiten: unveraendert.
   -------------------------------------------------------------------------- */

@media (max-width: 599.98px) {
  html[lang^="en"] body.se-practice-area .se-pa-services-heading .se-pa-services-title {
    font-size: min(21px, calc((100vw - 2 * var(--se-pa-rand)) / 15.4));
  }

  html[lang^="en"] body.se-practice-area .se-pa-services-heading .se-pa-services-title .fusion-title-heading {
    max-width: 12.9em;
  }
}

@media (max-width: 440.98px) {
  html[lang^="en"] body.se-practice-area {
    --se-pa-title-height: calc(46px + 2.4 * min(21px, (100vw - 2 * var(--se-pa-rand)) / 15.4));
  }
}

/* ==========================================================================
   22 · STAPEL: HOECHSTENS DREI KARTEN SICHTBAR
   --------------------------------------------------------------------------
   Bisher dockte jede Karte eine Stufe tiefer an als ihre Vorgaengerin. Die
   Stapelkante wuchs mit der Kartenzahl: sechs Karten, fuenf Kanten - bei
   der englischen Auslaenderrechtsseite (elf Karten) zehn, rund 120px
   Mehrfachkontur, die nur Hoehe kostet.

   Jetzt sind hoechstens drei Karten sichtbar: die oberste und dahinter zwei
   Kanten. Ab der dritten Karte docken alle auf derselben Hoehe an; jede
   neue deckt die vorige vollstaendig zu. Die Karte faehrt herein wie
   bisher, mit derselben Tiefenschaerfe - es gibt keine zusaetzliche
   Bewegung, nur der Andockpunkt liegt nicht mehr tiefer als der der
   dritten Karte. Die Karten werden dadurch auf jeder Seite mit mehr als
   drei Karten hoeher (sechs Karten: drei Stufen = 36px mehr Lesehoehe).

   Wirkt auf allen Rechtsgebietsseiten, deutsch und englisch. Dieselbe
   Grenze steht in practice-area.js (STAPEL_SICHTBAR); die Werte hier
   gelten fuer den ersten Paint, bevor das Skript laeuft.
   ========================================================================== */

body.se-practice-area {
  /* Zwei Stufen, unabhaengig von der Kartenzahl. */
  --se-pa-stack-depth: calc(2 * var(--se-pa-stack-step));
}

@media (min-width: 1200px) {
  .se-pa-services-topic:nth-child(n+4 of .se-pa-services-topic) {
    --se-pa-card-offset: calc(2 * var(--se-pa-stack-step));
  }

  /* Der negative Rand gleicht nur den Zuwachs an Versatz aus - ab der
     dritten Karte gibt es keinen mehr. */
  body.se-practice-area .se-pa-services-cards-container .se-pa-services-topic:nth-child(n+3 of .se-pa-services-topic) {
    margin-bottom: 0;
  }
}