/* --- merged tokens/theme (originally in css/tokens.css and css/theme.css) --- */
:root {
  /* ===== COLORS ===== */
  --appbar: rgba(87, 72, 65, 0.502);
  --mid: #f6f3ee;
  --red: #770d0d;
  --grey: #5e5a59;
  --rule: #D8D8D8;

  /* ===== TYPOGRAPHY ===== */
  --font-sans: 'SkneArial', Arial, sans-serif;
  --fw-regular: 300;
  --fw-medium: 500; /* Flutter: w500 for logo */
  --fw-semibold: 600;
  --fw-page-title: 400;  /* font-weight for all mobile page headings (Kanzlei, Rechtsanwälte, Fachgebiete …) */
  --fw-menu: 300;        /* font-weight for desktop navigation menu links */

  /* Font sizes */
  --fs-base: 15px;
  --fs-logo: 16px;
  --fs-menu: 20px;
  --fs-drawer: 17px;
  --fs-heading: 20px; /* For styled headings (replaces h1) */
  --fs-title: 18px;   /* For page titles */

  /* Flutter SkneFont defaults */
  --ls-body: 0.3px;   /* Flutter: letterSpacing 0.3 */
  --lh-body: 2;        /* Flutter: lineHeight 2.0 */
  --text-color: #000;  /* Flutter: Colors.black */

  /* ===== FLUTTER SknePaddings ===== */
  --pad-sm: 10px;   /* Flutter: paddingSmall */
  --pad-md: 20px;   /* Flutter: paddingMedium */
  --pad-lg: 20px;   /* Flutter: paddingLarge */

  /* ===== FLUTTER SkneRadius ===== */
  --radius-sm: 4px;   /* Flutter: borderRadiusSmall */
  --radius-md: 8px;   /* Flutter: borderRadiusMedium */
  --radius-lg: 12px;  /* Flutter: borderRadiusLarge */

  /* ===== UI COMPONENTS ===== */
  --arrow-bg: #E0E0E0;         /* Flutter: navigation arrow background */
  --arrow-bg-hover: #d4d0cb;   /* Arrow hover state */

  /* ===== LAYOUT ===== */
  --col-w: clamp(500px, 50vw, 800px); /* Flutter menuWidth — shared by .menu-inner & .content-wrapper */

  /* ===== TYPOGRAPHY SYSTEM (OPT-IN) ===== */
  /* Apply by adding `data-typography` to a container (e.g. <main data-typography>). */
  --type-font-body: var(--font-sans);
  --type-font-heading: var(--font-sans);
  --type-size-base: var(--fs-base);
  --type-line-body: var(--lh-body);
  --type-line-heading: 1.2;
  --type-weight-heading: var(--fw-regular);

  --type-color-text: var(--text-color);
  --type-color-muted: var(--grey);
  --type-color-link: var(--text-color);
  --type-color-rule: var(--rule);

  --type-space-1: 0.25rem;
  --type-space-2: 0.5rem;
  --type-space-3: 0.75rem;
  --type-space-4: 1rem;
  --type-space-5: 1.5rem;
  --type-space-6: 2rem;

  --type-h1: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --type-h2: clamp(1.4rem, 1.15rem + 1.0vw, 1.9rem);
  --type-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --type-h4: 1.125rem;
  --type-h5: 1rem;
  --type-h6: 0.95rem;

  /* ===== LAYOUT MEASUREMENTS ===== */
  --appbar-h: 56px;
  --logo-h: 100px;
  --menu-h: 40px;
  --spacer-h: 15px;
  --header-h: calc(var(--appbar-h) + var(--logo-h) + var(--menu-h) + var(--spacer-h));
  --content-h: min(65vh, calc(100vh - var(--header-h)));

  /* ===== CUSTOM SCROLLBAR TRACK ===== */
  --scrollbar-top: var(--appbar-h);
  --scrollbar-h:   calc(100vh - var(--appbar-h));

  /* Responsive breakpoint */
  --mobile-breakpoint: 800px;

  /* Unified vertical spacing */
  --space-block: calc(1rem * 1.6);

  /* ===== FACHGEBIETE TOKENS ===== */
  --fg-count: 11;
  --fg-mid-w: 90vw;
  --fg-mid-h: max(500px, calc(var(--content-h) - 2px));
  --fg-list-w: max(210px, calc(90vw * 0.11));
  --fg-text-w: max(0px, calc(90vw - var(--fg-list-w) - 20vw));
  --fg-row-w: calc(0.85 * 100vw);
  --fg-left-pad: 5.0vw;
  --fg-text-left-pad: 10.0vw;
  --fg-text-top-pad: 40px;
  --fg-headline-h: 40px;
  --fg-row-h: 32px;
  --fg-list-h: calc(32px * 11);
  --fg-pad-top: max(0px, calc((var(--fg-mid-h) - (calc(32px * 11) + 40px)) / 2));

  /* ===== KANZLEI TOKENS ===== */
  --k-mid-h: calc(var(--content-h) - 2px);
  --k-container-w: clamp(500px, calc(0.5 * 100vw), 800px);
  --k-pad-m: 15px;
  --k-pad-l: 20px;
  --k-founder-img-w: 180px;
  --k-founder-img-h: 175px;

  /* ===== MOBILE TILE TOKENS ===== */
  /* Responsive tile sizing for mobile list views (Fachgebiete, Anwälte) */
  /* Height scales with both viewport width and height */
  --tile-min-h: 44px;
  --tile-max-h: 64px;
  --tile-h: clamp(var(--tile-min-h), calc(6vw + 4vh), var(--tile-max-h));
  --tile-gap: clamp(8px, 1.5vw, 14px);
  --tile-gap-dynamic: clamp(4px, calc((100vh - 300px) / 30), 12px); /* Dynamic gap based on viewport height */
  --tile-padding-x: clamp(12px, 2.5vw, 20px);
  --tile-padding-y: clamp(10px, 2vw, 16px);
  --tile-bg: #f8f5f1;
  --tile-border: 1px solid var(--rule);
  --tile-shadow: 0 2px 6px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06); /* Improved drop shadow */
  --tile-shadow-hover: 0 4px 12px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
  --tile-font-size: clamp(13px, 1.5vw + 6px, 16px);

  /* ===== MOBILE LIST PAGE TOKENS ===== */
  /* Shared styles for mobile list page containers, titles, and scrolling */
  --mobile-title-padding: 15px 20px 12px;
  --mobile-title-font-size: 16px;
  --mobile-list-padding: 0 16px 16px;
  --mobile-footer-h: clamp(22px, 4.5vh, 36px);

  /* ===== DEBUG HELPERS ===== */
  /* Removed for production */
}

/* ===== UNIFIED MOBILE TILE SYSTEM ===== */
/* Shared classes for mobile list pages (Fachgebiete, Anwälte, etc.)
 * Use these classes for consistent styling across all mobile list views.
 * All text uses regular weight (400) - no bold/semibold fonts.
 *
 * IMPORTANT: scoped to mobile breakpoints so these helper classes can be
 * added to existing desktop markup without affecting desktop layouts.
 */
@media (max-width: 799px) {
  /* Mobile list page container - fills viewport, prevents scroll on container */
  .mobile-list-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  /* Sticky title at top of mobile list pages */
  .mobile-list-title {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--mid);
    color: var(--red);
    text-align: center;
    padding: var(--mobile-title-padding);
    margin: 0;
    font-size: var(--mobile-title-font-size);
    font-weight: var(--fw-page-title);
    letter-spacing: 0.3px;  /* Flutter: letterSpacing 0.3 */
    line-height: 2;  /* Flutter: lineHeight 2.0 */
  }

  /* Scrollable container for tile list */
  .mobile-list-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--mobile-list-padding);
    display: flex;
    flex-direction: column;
    /* Hide scrollbar across browsers */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .mobile-list-scroll::-webkit-scrollbar {
    display: none;
  }

  /* Tile list container with dynamic gap */
  .mobile-tile-list {
    display: flex;
    flex-direction: column;
    gap: var(--tile-gap-dynamic);
    justify-content: center;
    flex: 1;
    min-height: min-content;
  }

  /* Individual tile card - unified styling for all mobile list pages */
  .mobile-tile-card {
    display: flex;
    align-items: center;      /* Vertical center */
    justify-content: flex-start; /* Left align content */
    text-align: left;
    width: 100%;
    min-height: var(--tile-h);
    padding: var(--tile-padding-y) var(--tile-padding-x);
    background: var(--tile-bg);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule);
    border-radius: 0;
    box-shadow: var(--tile-shadow);
    text-decoration: none;
    color: #000;  /* Flutter: #000000 black */
    font-size: var(--tile-font-size);
    font-weight: 400;  /* Regular weight */
    letter-spacing: 0.3px;  /* Flutter: letterSpacing 0.3 */
    line-height: 2;  /* Flutter: lineHeight 2.0 */
    flex-shrink: 0;
    cursor: pointer;
    transition: border-left-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  }

  .mobile-tile-card:hover,
  .mobile-tile-card:focus {
    border-left-color: var(--red);
    box-shadow: var(--tile-shadow-hover);
    transform: translateX(2px);
  }

  /* Text inside tile cards - ensures left alignment and regular weight */
  .mobile-tile-text {
    margin: 0;
    white-space: normal;
    line-height: 2;  /* Flutter: lineHeight 2.0 */
    color: #000;  /* Flutter: #000000 black */
    font-weight: 400;  /* Regular weight */
    letter-spacing: 0.3px;  /* Flutter: letterSpacing 0.3 */
    text-align: left;
    width: 100%;
  }
}

/* --- end merged tokens/theme --- */

/**
 * FACHGEBIETE PAGE LAYOUT - SEE css/fachgebiete.css
 * 
 * The comprehensive layout documentation, implementation details, and
 * responsive behavior for the Fachgebiete two-column design is maintained
 * in css/fachgebiete.css where the actual CSS rules are defined.
 * 
 * Key tokens defined in :root above:
 * - --fg-mid-h, --fg-list-w, --fg-text-w (dimensions)
 * - --fg-row-h, --fg-headline-h, --fg-list-h (heights)
 * - --fg-pad-top (vertical centering)
 * - --fg-left-pad, --fg-text-left-pad (spacing)
 * 
 * Critical alignment requirement:
 * First navigation link must align horizontally with content headline.
 * Achieved via: padding-top = --fg-pad-top + --fg-headline-h on content area.
 */

 
        @font-face {
          font-family: 'SkneArial';
          /* path is relative to this CSS file (css/), so use ../assets/... */
          src: url('../assets/fonts/arial/arial.woff2') format('woff2'),
             url('../assets/fonts/arial/arial.ttf') format('truetype');
          font-weight: 400;
          font-style: normal;
          font-display: block;  /* block > swap: avoids bold-flash from system Arial */
        }

        @font-face {
          font-family: 'SkneArial';
          src: url('../assets/fonts/arial/arialbd.woff2') format('woff2'),
               url('../assets/fonts/arial/arialbd.ttf') format('truetype');
          font-weight: 600;
          font-style: normal;
          font-display: block;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
          font-family: var(--font-sans);
          font-weight: var(--fw-regular);
          color: var(--grey);
          font-size: var(--fs-title);  /* 18px from tokens */
          height: 100%;
          overflow: hidden;
        }
        
        /* Mobile: reduce base font size */
        @media (max-width: 799px) {
          html {
            font-size: var(--mobile-title-font-size);  /* 16px from tokens */
          }
        }

        body {
          font-family: var(--font-sans);
          font-weight: var(--fw-regular);
          color: var(--grey);
          background-color: white;
          height: 100%;
          overflow: hidden;
          margin: 0;
          cursor: default;  /* Prevent I-beam text cursor on content */
        }

        h1, h2, h3, h4, h5, h6 {
          font-size: 1.25em;
          font-weight: var(--fw-regular);
          font-family: var(--font-sans);
        }

        button, input, select, textarea {
          font-family: var(--font-sans);
          font-weight: var(--fw-regular);
        }

        a {
          cursor: pointer;  /* Override body cursor:default for all links */
        }

        strong, b {
          font-weight: var(--fw-semibold);
          font-family: var(--font-sans);
        }

        /* Typography system (semantic; opt-in with `data-typography`). */
        :where([data-typography]) {
          font-family: var(--type-font-body);
          font-size: var(--type-size-base);
          line-height: var(--type-line-body);
          color: var(--type-color-text);
        }

        :where([data-typography]) h1,
        :where([data-typography]) h2,
        :where([data-typography]) h3,
        :where([data-typography]) h4,
        :where([data-typography]) h5,
        :where([data-typography]) h6 {
          font-family: var(--type-font-heading);
          font-weight: 400;
          line-height: var(--type-line-heading);
          color: var(--type-color-text);
        }

        :where([data-typography]) h1 { font-size: var(--type-h1); margin-block: 0 var(--type-space-5); }
        :where([data-typography]) h2 { font-size: var(--type-h2); margin-block: var(--type-space-6) var(--type-space-4); }
        :where([data-typography]) h3 { font-size: var(--type-h3); margin-block: var(--type-space-5) var(--type-space-3); }
        :where([data-typography]) h4 { font-size: var(--type-h4); margin-block: var(--type-space-4) var(--type-space-2); }
        :where([data-typography]) h5 { font-size: var(--type-h5); margin-block: var(--type-space-4) var(--type-space-2); }
        :where([data-typography]) h6 { font-size: var(--type-h6); margin-block: var(--type-space-4) var(--type-space-2); color: var(--type-color-muted); }

        :where([data-typography]) p { margin-block: 0 var(--type-space-4); }
        :where([data-typography]) small { color: var(--type-color-muted); }

        :where([data-typography]) ul,
        :where([data-typography]) ol { padding: 0 0 0 1.25em; }

        :where([data-typography]) ul,
        :where([data-typography]) ol,
        :where([data-typography]) dl,
        :where([data-typography]) blockquote { margin-block: 0 var(--type-space-4); }

        :where([data-typography]) li { margin-block: 0 var(--type-space-1); }

        :where([data-typography]) hr { border: 0; border-top: 1px solid var(--type-color-rule); margin-block: var(--type-space-6); }

        :where([data-typography]) a { color: var(--grey); text-decoration: none; }
        :where([data-typography]) a:hover { text-decoration: underline; }
        :where([data-typography]) a:focus-visible { outline: 2px solid var(--grey); outline-offset: 2px; }

        /* Optional visual variants (still semantic elements) */
        :where([data-typography]) p[data-lede] { font-size: 1.1em; color: var(--type-color-text); }
        :where([data-typography]) h2[data-variant="kicker"] { font-size: var(--type-h4); letter-spacing: 0.08em; text-transform: uppercase; }

        .page {
            height: 100vh; /* Exactly viewport height */
            height: 100dvh; /* Dynamic viewport height (mobile address bar) — overrides vh in supporting browsers */
            display: flex;
            flex-direction: column;
            overflow: hidden; /* Page never scrolls */
        }

        .app-bar {
            height: var(--appbar-h); /* 50px - thicker app bar */
            flex-shrink: 0;          /* Prevent flex from shrinking height */
            background-color: var(--appbar);
            display: flex;
            align-items: center;
            padding: 0 30px;
        }

        .hamburger {
          --ham-bar: 3px;
          --ham-gap: 3px;
          --ham-line-w: 22px;
            width: 24px;
          height: calc(var(--ham-bar) * 3 + var(--ham-gap) * 2);
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* equal spacing between lines */
            align-items: center;          /* center bars horizontally */
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            z-index: 1001; /* Above drawer */
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            opacity: 1;
            visibility: visible;
            /* Delay reappearing until drawer close animation completes */
            transition: opacity 0.1s ease 0.3s, visibility 0s ease 0.3s;
        }

        /* Ensure lawyer card image dim on hover/active/focus for both desktop and mobile tile variants */
        .lawyer-card:hover .lawyer-image img,
        .lawyer-card:active .lawyer-image img,
        .lawyer-card:focus-within .lawyer-image img,
        .mobile-tile-card:hover .lawyer-image img,
        .mobile-tile-card:active .lawyer-image img,
        .mobile-tile-card:focus-within .lawyer-image img {
          opacity: 0.9;
          transition: opacity 0.18s ease;
        }

        /* Hide hamburger when drawer is open - immediate hide, delayed show */
        .drawer-checkbox:checked ~ .app-bar .hamburger {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            /* Immediate hide when opening drawer */
            transition: opacity 0.1s ease 0s, visibility 0s ease 0s;
        }

        /* Visually hide the checkbox (CSS-only drawer toggle)
           Avoid `display:none` to keep label toggling reliable on mobile browsers. */
        .drawer-checkbox {
          position: fixed;
          top: 0;
          left: 0;
          width: 1px;
          height: 1px;
          opacity: 0;
          pointer-events: none;
        }

        .hamburger span {
            display: block;
          width: var(--ham-line-w);
          height: var(--ham-bar);
            background-color: var(--grey);
          border-radius: calc(var(--ham-bar) / 2);
            transition: all 0.3s ease;
            transform-origin: center;
            flex-shrink: 0;              /* prevent flex from changing height */
        }

        /* Hamburger animation when active */
        .hamburger.active span:nth-child(1) {
          transform: translateY(calc(var(--ham-bar) + var(--ham-gap))) rotate(45deg);
        }

        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active span:nth-child(3) {
          transform: translateY(calc((var(--ham-bar) + var(--ham-gap)) * -1)) rotate(-45deg);
        }

        .logo-section {
          height: var(--logo-h); /* 100px from Flutter */
          flex-shrink: 0;        /* Prevent flex from shrinking height */
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0; /* keep logo vertically centered */
          background-color: #fff; /* white band behind logo */
        }

        .logo {
            text-align: center;
            text-decoration: none;
          display: flex;
          align-items: center;
          justify-content: center;
            cursor: pointer;
        }

        .logo-img {
          display: block;
          max-width: 100%;
          height: 50px;
          width: auto;
        }

        @media (max-width: 480px) {
          .logo-img {
            height: 44px;
          }
        }

        /* Width wrapper to align logo center exactly over menu width */
        .logo-wrap{
            margin: 0 auto;
            width: auto; /* JS will set explicit width to match menu */
        }

        /* Shrink-wrap the logo text and line to the same width */
        .logo-block{
            display: inline-block;
        }

        .logo-top {
            font-size: var(--fs-logo); /* 16px from Flutter */
          font-weight: 500; /* Flutter: w500 */
            letter-spacing: 1px; /* letterSpacing: 1 */
            text-transform: uppercase;
            color: #000;
            font-family: 'SkneArial', Arial, sans-serif;
            white-space: nowrap;
            display: flex;
            align-items: baseline;
            justify-content: center;
            flex-wrap: nowrap;
        }

        .logo-top .word {
          margin: 0 4px;
        }

        .logo-top .first-letter {
            font-size: 1.15em; /* fontSize * 1.15 from Flutter */
          font-weight: 500; /* Flutter: w500 */
        }

        .logo-top .van {
          font-weight: 500; /* Flutter: w500 */
            font-size: 1em; /* same as base font */
        }

        .logo-divider {
            width: 100%; /* Dynamic width matching logo-top text */
            height: 0.5px; /* Flutter: 0.5px divider */
            background-color: #000; /* Black to match logo text color */
          margin: 5px 0 8px; /* Flutter: SizedBox 5px above, 8px below */
        }

        .logo-bottom {
            font-size: calc(var(--fs-logo) * 0.6); /* fontSize * 0.6 = 9.6px */
          font-weight: 100; /* Flutter: w100 (thin/hairline) */
          letter-spacing: 3px; /* Flutter: letterSpacing 3.0 */
            text-transform: uppercase;
            color: #000; /* Colors.black */
            font-family: 'SkneArial', Arial, sans-serif;
          line-height: 1.4; /* Flutter: height 1.4 */
        }

        .menu {
          height: var(--menu-h); /* 40px from Flutter */
          flex-shrink: 0;        /* Prevent flex from shrinking height */
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: 'SkneArial', Arial, sans-serif;
          background-color: #fff; /* keep menu on white band */
          border-bottom: none; /* border belongs to middle/content container */
        }

        /* Menu inner container matching Flutter's 50% width clamped 500-800px */
        .menu-inner {
          width: var(--col-w);
          display: flex;
          align-items: center;
          justify-content: space-between; /* Spacer() in Flutter */
        }

        .menu a {
            color: var(--grey); /* SkneColors.greySkne */
            text-decoration: none;
            transition: opacity 0.2s;
            font-size: var(--fs-menu); /* 20px from Flutter */
            font-family: 'SkneArial', Arial, sans-serif;
            font-weight: var(--fw-menu);
            letter-spacing: 0.3px; /* Flutter: letterSpacing 0.3 */
            line-height: 1.4; /* Flutter: height 1.4 */
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        /* Active page highlight - red like Flutter */
        .menu a.active {
            color: var(--red);
        }

        .menu a:hover {
            opacity: 0.7;
        }

        .drawer {
            position: fixed;
            top: 0;
            left: -350px;
            width: 350px;
            height: 100vh;
            background-color: #fff;
            box-shadow: none; /* shadow only when open — prevents bleed at left edge */
            transition: left 0.3s ease, box-shadow 0.3s ease;
            z-index: 1000;
          padding: 0; /* drawer header handles top spacing */
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }

        /* Drawer header that matches the page app bar (so it feels continuous) */
        .drawer-app-bar {
          height: var(--appbar-h);
          background-color: var(--appbar);
          display: flex;
          align-items: center;
          padding: 0 30px;
          flex: none;
        }



        /* CSS-only drawer toggle: when checkbox is checked, show drawer */
        .drawer-checkbox:checked ~ .drawer {
            left: 0;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1); /* shadow only when visible */
        }

        .drawer-checkbox:checked ~ .drawer-overlay {
            opacity: 1;
            visibility: visible;
        }

        /* Hamburger animation when drawer is open: intentionally none */

        .drawer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            z-index: 999;
            cursor: pointer; /* Click to close */
        }

        .drawer-menu {
            display: flex;
            flex-direction: column;
            gap: 0;
          margin: 0;
          padding: 0 0 20px 0; /* keep a little bottom breathing room */
          overflow-y: auto;
          flex: 1;
        }

        .drawer-menu a {
            color: var(--grey); /* Flutter: SkneColors.greySkne */
            text-decoration: none;
            font-size: calc(var(--fs-base) * 1.2); /* Flutter: scaleFactor 1.2 = 18px */
            padding: 24px 24px;
            border-bottom: 1px solid #e0e0e0; /* Flutter: Divider(thickness: 1) */
            font-family: 'SkneArial', Arial, sans-serif;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        /* Active page highlight in drawer - red like Flutter */
        .drawer-menu a.active {
            color: var(--red);
        }

        .drawer-menu a:hover {
            background-color: #f5f5f5;
        }

        .spacer {
          height: var(--spacer-h); /* 15px from Flutter */
          flex-shrink: 0;          /* Prevent flex from shrinking height */
          background-color: #fff; /* white like the rest of header area */
        }

        .content-container {
          /* Middle container matching Flutter's 65% height */
          height: var(--content-h); /* 65vh from Flutter */
          background-color: var(--mid);
          border-top: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
          display: flex;
          align-items: flex-start;
          justify-content: center;
          padding: 0; /* No padding - Flutter content-container is full-width */
          flex: none; /* Fixed height, don't flex */
          min-height: 0; /* Allow flex shrinking */
          overflow: hidden; /* Default: no scroll. Scrollable pages override this. */
        }

        /* Webkit scrollbar styling */
        .content-container::-webkit-scrollbar {
          width: 8px;
        }
        .content-container::-webkit-scrollbar-track {
          background: transparent;
        }
        .content-container::-webkit-scrollbar-thumb {
          background-color: var(--grey);
          border-radius: 4px;
        }

        .content-wrapper {
          width: var(--col-w); /* match Flutter menuWidth */
          min-height: 100%; /* Fill container height */
          font-family: 'SkneArial', Arial, sans-serif; /* fontFamily: 'arial' */
          font-size: var(--fs-base); /* 15px from Flutter */
          line-height: 2; /* lineHeight: 2 from SkneFont */
          letter-spacing: 0.3px; /* Flutter: letterSpacing 0.3 */
          color: #000; /* Flutter: body text is #000000 black */
          margin: 0; /* centered by parent justify-content: center, same as menu-inner */
          padding: 0; /* no padding - Flutter uses Column alignment */
          text-align: left; /* ensure content text is left aligned */
          display: flex;
          flex-direction: column;
          justify-content: center; /* Center vertically - CENTERED */
          align-items: flex-start; /* Alignment.centerLeft */
          /* Scroll handled by container */
          overflow: visible;
        }

        /* Webkit scrollbar styling */
        .content-wrapper::-webkit-scrollbar {
          width: 8px;
        }
        .content-wrapper::-webkit-scrollbar-track {
          background: transparent;
        }
        .content-wrapper::-webkit-scrollbar-thumb {
          background-color: var(--grey);
          border-radius: 4px;
        }

        /* ============================================
           FACHGEBIETE NOTE
           ============================================
           The Fachgebiete page uses the token-driven `.fg-grid` implementation
           (see the later "FACHGEBIETE TWO-COLUMN GRID" section). Legacy CSS for
           `.fg-container`/`.fg-sidebar-wrapper`/`.legal-field-link` was removed
           to avoid layout conflicts.
        */

        /* Single breakpoint approach: use 800px site-wide. */
        /* Ensure consistent spacing between top-level blocks inside the content */
        .content-wrapper > * { margin-bottom: 20px; } /* blockPadding: 20 */
        .content-wrapper > *:last-child { margin-bottom: 0; }

        .intro-text {
          font-size: var(--fs-base); /* 15px */
          line-height: 2; /* lineHeight: 2 */
          font-family: 'SkneArial', Arial, sans-serif;
          color: #000; /* Flutter: black body text */
          letter-spacing: 0.3px; /* Flutter: letterSpacing 0.3 */
        }

        .intro-text p {
          margin: 0;
        }

        .contact-section {
            padding: 20px 0; /* paddingLarge: 20 */
        }

        .contact-section p {
            margin: 0;
            line-height: 2;
        }

        .contact-row {
            display: flex;
            font-size: var(--fs-base);
            line-height: 2;
        }

        .contact-label {
            width: 50px; /* Container width: 50.0 from Flutter */
            flex-shrink: 0;
        }

        .contact-link {
            color: #000; /* Flutter: black text */
            text-decoration: none;
            cursor: pointer;
            font-weight: 400;
        }

        .contact-link:hover {
            color: #000;
            text-decoration: underline;
        }

        .address-section p {
            font-size: var(--fs-base);
            line-height: 2;
            margin: 0;
        }

        .bottom-container {
            background-color: #fff;
            /* Fill remaining space: 100vh - appbar(50) - logo(100) - menu(40) - spacer(15) - content(65vh) */
            flex: 1; /* Fills remaining space */
            min-height: 0; /* Allow shrinking if needed */
        }

        /* === Layout debug helpers removed for production === */

        /* Mobile styles moved to css/style.mobile.css */

        /* DESKTOP: Show menu normally, keep hamburger visible (matches Flutter) */
        @media (min-width: 800px) {
            .menu {
              display: flex !important; 
              position: static; 
              height: var(--menu-h); /* 40px from Flutter */
              background-color: #fff; /* ensure white band behind desktop menu */
              border-bottom: none; /* keep only the content container's top border */
              box-shadow: none; 
            }

            .menu-inner {
              width: var(--col-w);
              display: flex;
              justify-content: space-between;
            }

            .menu a {
                padding: 0;
                border-bottom: none;
                width: auto;
                font-size: var(--fs-menu); /* 20px from Flutter */
                font-family: 'SkneArial', Arial, sans-serif; /* Ensure consistent font */
            }

            .menu a:hover {
                background-color: transparent;
            }
        }


/* ===== LEGAL FIELDS STYLES ===== */
/* Styles are now defined in the FACHGEBIETE PAGE LAYOUT section above */

/* ===== MOBILE MENU ===== */
.menu.active {
  display: flex !important;
}

@media (max-width: 768px) {
  .menu {
    display: none;
    position: fixed;
    top: 55px;
    left: 0;
    right: 0;
    height: auto;
    flex-direction: column;
    gap: 0;
    background-color: #f8f5f1;
    border-bottom: 1px solid var(--rule);
    z-index: 100;
  }

  .menu a {
    padding: 16px 20px;
    border-bottom: 1px solid var(--rule);
    width: 100%;
    text-align: left;
  }

  .menu a:last-child {
    border-bottom: none;
  }

  .menu a:hover {
    background-color: #f0ede8;
  }
}