/* Lokal gehostete Schriftart Montserrat (statt Google Fonts CDN) -
       keine Verbindung zu Google-Servern beim Laden der Seite, daher
       auch keine Einwilligung/Cookie-Banner dafür nötig. Die Dateien
       müssen im Ordner "Fonts/" neben dieser HTML-Datei liegen. */
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('Fonts/montserrat-400.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('Fonts/montserrat-600.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('Fonts/montserrat-700.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url('Fonts/montserrat-800.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 900;
      font-display: swap;
      src: url('Fonts/montserrat-900.woff2') format('woff2');
    }

    /* ==========================================================================
        CSS DESIGN SYSTEM & THEMING VARIABLES
        ========================================================================== */
    :root {
      /* Light Mode (Default) */
      --bg-base: #F8FAFC;
      --bg-surface: #FFFFFF;
      --bg-card: #FFFFFF;
      --bg-card-hover: #F1F5F9;
      --bg-subtle: #F1F5F9;
      --text-primary: #1A262F;
      --text-secondary: #5F6B76;
      --text-muted: var(--text-secondary);
      --accent: #00B7B3;
      --accent-hover: #009E9A;
      --accent-glow: rgba(0, 183, 179, 0.15);
      --accent-orange: #FF6B6B;
      --accent-orange-hover: #FF8080;
      --accent-orange-glow: rgba(255, 107, 107, 0.18);
      --border-subtle: rgba(142, 146, 151, 0.25);
      --border-accent: rgba(0, 183, 179, 0.45);
      --success: #1E9E6B;
      --success-glow: rgba(30, 158, 107, 0.15);
      --warning: #C27803;
      --warning-glow: rgba(194, 120, 3, 0.15);
      --shadow-sm: 0 2px 8px rgba(26, 38, 47, 0.05);
      --shadow-md: 0 12px 30px rgba(26, 38, 47, 0.08);
      --shadow-lg: 0 20px 45px rgba(26, 38, 47, 0.12);
      --header-bg: rgba(255, 255, 255, 0.96);
      --wave-color: rgba(0, 183, 179, 0.08);
      --font-main: 'Montserrat', sans-serif;
      --white: #FFFFFF;
      --ink: #1A262F;
      --footer-bg: #121B21;
      --accent-text: #007C79;
      --on-accent: var(--ink);
      --text-muted-on-dark: #8E9297;
      color-scheme: light;
    }

    body.dark-theme {
      /* Dark Mode */
      --bg-base: #1A262F;
      --bg-surface: #21303B;
      --bg-card: #273846;
      --bg-card-hover: #2E4252;
      --bg-subtle: #1F2D37;
      --text-primary: #FFFFFF;
      --text-secondary: #D4D8DC;
      --text-muted: var(--text-secondary);
      --accent: #00B7B3;
      --accent-hover: #00D4CF;
      --accent-glow: rgba(0, 183, 179, 0.2);
      --accent-orange: #FF6B6B;
      --accent-orange-hover: #FF8A8A;
      --accent-orange-glow: rgba(255, 107, 107, 0.25);
      --border-subtle: rgba(142, 146, 151, 0.25);
      --border-accent: rgba(0, 183, 179, 0.5);
      --success: #34C98D;
      --success-glow: rgba(52, 201, 141, 0.2);
      --warning: #F0A93A;
      --warning-glow: rgba(240, 169, 58, 0.2);
      --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
      --shadow-lg: 0 24px 50px rgba(0, 0, 0, 0.6);
      --header-bg: rgba(26, 38, 47, 0.96);
      --wave-color: rgba(0, 183, 179, 0.12);
      --accent-text: var(--accent);
      color-scheme: dark;
    }

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

    /* Sicherheitsnetz gegen Text-Overflow: sehr lange, unteilbare Wörter
       sollen auf schmalen Bildschirmen notfalls umbrechen statt aus ihrer Box
       herauszulaufen. Kein "hyphens:auto" hier (zu aggressiv - erzeugt hässliche
       Trennungen mitten in kurzen, eigentlich gut umbrechenden Überschriften
       wie "Online-Handel & E-Commerce"). Gezielte Silbentrennung nur dort, wo
       es einzelne sehr lange Komposita ohne jede Trennstelle gibt (siehe
       .service-title weiter unten). */
    h1, h2, h3, h4, h5,
    .service-title, .card-title, .werte-card h3,
    .service-pill-btn, .service-tab-btn, .mega-menu-link,
    .mobile-nav-link, .mobile-nav-sublink, .subnav-link {
      overflow-wrap: break-word;
      word-break: normal;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 110px;
    }

    body {
      background-color: var(--bg-base);
      color: var(--text-primary);
      font-family: var(--font-main);
      font-size: 1rem;
      line-height: 1.75;
      overflow-x: hidden;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s ease, border-color 0.2s ease;
    }

    button {
      font-family: var(--font-main);
      cursor: pointer;
      border: none;
      outline: none;
      background: none;
    }

    .container {
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* Background Wave Flow Pattern */
    .wave-header-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 380px;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
      opacity: 0.85;
    }

    .wave-footer-bg {
      width: 100%;
      height: 120px;
      margin-bottom: -10px;
      display: block;
      pointer-events: none;
    }

    /* ==========================================================================
        FLOATING PILL HEADER & NAVIGATION STYLING
        ========================================================================== */
    header {
      position: sticky;
      top: 16px;
      z-index: 1000;
      background: transparent;
      padding: 0 24px;
      transition: all 0.3s ease;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 76px;
      background-color: var(--header-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border-subtle);
      border-radius: 50px;
      padding: 0 20px 0 28px;
      box-shadow: var(--shadow-md);
      position: relative;
      z-index: 10;
      gap: 20px;
      max-width: 1320px;
      margin: 0 auto;
    }

    .logo-link {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 4px 0;
      text-decoration: none;
      flex-shrink: 0;
    }

    .logo-img {
      height: 42px;
      width: auto;
      max-width: 260px;
      object-fit: contain;
      display: block;
      transition: transform 0.2s ease;
      transform: none !important;
    }

    .logo-img-mobile {
      display: none;
      height: 34px;
      width: 34px;
      object-fit: contain;
      border-radius: 8px;
    }

    /* Im Dark Mode wird das Favicon per Filter auf Weiß umgekehrt (wie schon
       beim Desktop-Logo per Bildtausch), statt es zu verkleinern oder einen
       weißen Kasten dahinter zu setzen - bleibt dadurch in Originalgröße. */
    body.dark-theme .logo-img-mobile {
      filter: brightness(0) invert(1);
    }

    nav.nav-desktop {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: nowrap;
      white-space: nowrap;
    }

    .nav-item {
      position: relative;
      white-space: nowrap;
    }

    .nav-link {
      font-size: 12.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text-secondary);
      padding: 8px 12px;
      border-radius: 30px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .nav-link:hover, .nav-link.active, .nav-item:hover .nav-link, .nav-item.open .nav-link {
      color: var(--accent);
      background-color: var(--bg-subtle);
    }

    /* Dropdown Menü im Pill-Stil */
    .dropdown-menu {
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      background-color: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-top: 3px solid var(--accent);
      min-width: 290px;
      padding: 8px 0;
      box-shadow: var(--shadow-lg);
      border-radius: 12px;
      z-index: 1001;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
      pointer-events: none;
      white-space: normal;
    }

    .dropdown-menu::before {
      content: '';
      position: absolute;
      top: -15px;
      left: 0;
      width: 100%;
      height: 15px;
      background: transparent;
    }

    .nav-item:hover .dropdown-menu, .nav-item.open .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    .dropdown-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      transition: all 0.2s ease;
      position: relative;
    }

    .dropdown-item:hover {
      background-color: var(--bg-subtle);
      color: var(--accent);
    }

    /* Kaskadierendes Flyout Untermenü */
    .has-submenu {
      position: relative;
    }

    .submenu-flyout {
      position: absolute;
      top: 0;
      left: 100%;
      background-color: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-left: 3px solid var(--accent);
      min-width: 300px;
      padding: 8px 0;
      box-shadow: var(--shadow-lg);
      border-radius: 0 12px 12px 12px;
      opacity: 0;
      visibility: hidden;
      transform: translateX(6px);
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
      pointer-events: none;
      z-index: 1002;
    }

    .submenu-flyout::before {
      content: '';
      position: absolute;
      top: 0;
      left: -15px;
      width: 15px;
      height: 100%;
      background: transparent;
    }

    .has-submenu:hover .submenu-flyout, .has-submenu.open .submenu-flyout {
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
      pointer-events: auto;
    }

    .submenu-item {
      display: block;
      padding: 10px 20px;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-secondary);
      transition: all 0.2s ease;
    }

    .submenu-item:hover {
      background-color: var(--bg-subtle);
      color: var(--accent-text);
    }

    /* Mega-Menu für "Leistungen": flächige Grid-Übersicht statt
       kaskadierender Flyouts – alle 5 Hauptbereiche auf einen Blick. */
    .mega-menu {
      position: absolute;
      top: calc(100% + 10px);
      left: 50%;
      min-width: unset;
      width: min(1180px, 94vw);
      padding: 28px 32px;
      transform: translateX(-50%) translateY(8px);
    }

    .nav-item:hover .mega-menu, .nav-item.open .mega-menu {
      transform: translateX(-50%) translateY(0);
    }

    .mega-menu::before {
      left: 0;
      width: 100%;
    }

    .mega-menu-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.85fr 0.85fr 1fr 1.2fr;
      gap: 28px;
    }

    .mega-menu-col-title {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--accent);
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border-subtle);
      display: block;
    }

    .mega-menu-link {
      display: block;
      padding: 7px 0;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--text-secondary);
      transition: color 0.2s ease;
    }

    .mega-menu-link:hover {
      color: var(--accent);
    }

    @media (max-width: 1300px) {
      .mega-menu-grid { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .theme-toggle, .mobile-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--border-subtle);
      background-color: var(--bg-surface);
      color: var(--text-primary);
      transition: all 0.2s ease;
    }

    .theme-toggle:hover, .mobile-toggle:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .theme-icon-sun, .theme-icon-moon {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }

    body.dark-theme .theme-icon-moon { display: none; }
    body.dark-theme .theme-icon-sun { display: block; }
    body:not(.dark-theme) .theme-icon-sun { display: none; }
    body:not(.dark-theme) .theme-icon-moon { display: block; }

    .mobile-toggle {
      display: none;
    }

    .mobile-portal-btn {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 36px;
      padding: 0 14px;
      border-radius: 30px;
      border: 1px solid var(--border-subtle);
      background-color: var(--bg-surface);
      color: var(--text-primary);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    .mobile-portal-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .mobile-portal-btn svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .mobile-toggle svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }

    .btn-login {
      background: transparent;
      color: var(--text-primary);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      padding: 8px 14px;
      border: 1px solid var(--border-subtle);
      border-radius: 30px;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .btn-login:hover {
      border-color: var(--accent);
      color: var(--accent);
      background-color: var(--bg-card-hover);
    }

    .btn-qualify {
      background-color: var(--accent-orange);
      color: var(--white);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      padding: 9px 18px;
      border-radius: 30px;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px var(--accent-orange-glow);
      white-space: nowrap;
    }

    .btn-qualify:hover {
      background-color: var(--accent-orange-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px var(--accent-orange-glow);
    }

    /* Schwebender Sticky-CTA für mobile Endgeräte */
    .mobile-sticky-cta {
      display: none;
      position: fixed;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
      right: 18px;
      z-index: 999;
      background-color: var(--accent-orange);
      color: var(--white);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 13px 20px;
      border-radius: 50px;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      box-shadow: 0 10px 26px rgba(255, 107, 107, 0.45);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .mobile-sticky-cta svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: var(--white);
      stroke-width: 2;
    }

    .mobile-sticky-cta:active {
      transform: scale(0.96);
    }

    .btn-secondary {
      background: transparent;
      color: var(--text-primary);
      font-size: 0.875rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      padding: 12px 24px;
      border: 1px solid var(--border-subtle);
      border-radius: 4px;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .btn-secondary:hover {
      border-color: var(--accent);
      color: var(--accent-text);
      background-color: var(--bg-card-hover);
    }

    .mobile-nav {
      display: none;
      position: fixed;
      top: 96px;
      left: 20px;
      right: 20px;
      background-color: var(--bg-surface);
      overflow-y: auto;
      padding: 24px;
      z-index: 999;
      border: 1px solid var(--border-subtle);
      border-radius: 16px;
      box-shadow: var(--shadow-lg);
      max-height: calc(100vh - 120px);
    }

    .mobile-nav.open {
      display: block;
    }

    .mobile-nav-group {
      margin-bottom: 24px;
    }

    .mobile-nav-title {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--accent);
      margin-bottom: 12px;
    }

    .mobile-nav-link {
      display: block;
      padding: 10px 0;
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      border-bottom: 1px solid var(--border-subtle);
    }

    .mobile-nav-sublink {
      display: block;
      padding: 7px 0 7px 18px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text-secondary);
      border-bottom: 1px dashed var(--border-subtle);
    }

    /* Page Sections */
    .page-section {
      display: none;
      position: relative;
      padding: 50px 0 90px 0;
      min-height: 80vh;
      scroll-margin-top: 110px;
      animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .page-section.active {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .badge {
      display: inline-block;
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
      color: var(--accent-text);
      background-color: var(--accent-glow);
      padding: 6px 15px;
      border-radius: 40px;
      margin-bottom: 20px;
      border: 1px solid var(--border-accent);
    }

    h1 {
      font-size: clamp(1.75rem, 7vw, 2.875rem);
      font-weight: 700;
      line-height: 1.15;
      text-transform: none;
      letter-spacing: 0;
      margin-bottom: 24px;
      color: var(--text-primary);
      overflow-wrap: break-word;
    }

    h1 span.highlight {
      color: var(--accent-text);
    }

    /* Klassen-Selektor (statt "h2.section-title") - funktioniert jetzt
       unabhängig davon, ob die Überschrift als H1 (auf eigenständigen
       Unterseiten) oder H2 (z.B. mehrfach auf der Startseite) verwendet
       wird, damit auf jeder Unterseite eine korrekte, einzelne H1 stehen
       kann. */
    .section-title {
      font-size: clamp(1.375rem, 5.5vw, 2.125rem);
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      margin-bottom: 16px;
      color: var(--text-primary);
      overflow-wrap: break-word;
    }

    .section-subtitle {
      font-size: 1.0625rem;
      color: var(--text-secondary);
      margin-bottom: 40px;
      max-width: 880px;
      line-height: 1.75;
    }

    .subnav-tabs {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 32px;
      border-bottom: 1px solid var(--border-subtle);
      padding-bottom: 16px;
    }

    .subnav-link {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      padding: 9px 18px;
      border-radius: 4px;
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      transition: all 0.2s ease;
      display: inline-block;
    }

    .subnav-link:hover, .subnav-link.active {
      background: var(--accent-glow);
      border-color: var(--accent);
      color: var(--accent-text);
    }

    /* Gleichmäßiges Grid für die Einzelleistungen auf der Leistungsübersicht */
    .service-pill-grid {
      display: grid;
      gap: 10px;
    }

    .service-pill-grid .subnav-link {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 100%;
      min-height: 46px;
      line-height: 1.3;
    }

    .leistung-icon {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
    }

    /* ===== Leistungen-Übersicht: gestapelte Full-Width-Karten (aus andersmacher_leistungen_uebersicht.html) ===== */
    .service-overview-card {
      background-color: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: 16px;
      padding: 36px 40px;
      margin-bottom: 28px;
      box-shadow: var(--shadow-md);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    /* Türkis-zu-Orange-Verlaufsbalken oben, konsistent mit den übrigen
       Karten-Bereichen der Seite (Spezialisierungen, Über uns, Portale, Blog). */
    .service-overview-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), var(--accent-orange));
      opacity: 0.75;
    }

    .service-overview-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }

    .service-card-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
    }

    .service-card-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background-color: var(--accent-glow);
      border: 1px solid var(--border-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-text);
      flex-shrink: 0;
    }

    .service-card-title {
      font-size: 1.5rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: var(--text-primary);
    }

    .service-card-title a {
      color: inherit;
      text-decoration: none;
    }

    .service-card-desc {
      font-size: 0.9688rem;
      color: var(--text-secondary);
      margin-bottom: 24px;
      line-height: 1.7;
    }

    .service-pill-btn {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      color: var(--text-primary);
      padding: 14px 20px;
      border-radius: 8px;
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      transition: all 0.2s ease;
      cursor: pointer;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      line-height: 1.3;
    }

    .service-pill-btn:hover {
      border-color: var(--accent);
      color: var(--accent-text);
      background-color: var(--accent-glow);
      transform: translateY(-2px);
    }

    .service-back-link {
      display: inline-block;
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: var(--accent-text);
      margin-bottom: 20px;
    }

    .service-back-link:hover { color: var(--accent-hover); }

    /* Sub-Service Navigation Pills */
    .service-subtabs-wrapper {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      padding: 16px 20px;
      margin-bottom: 36px;
      box-shadow: var(--shadow-sm);
    }

    .service-subtabs-label {
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: var(--accent-text);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .service-subtabs-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .service-tab-btn {
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      padding: 10px 16px;
      border-radius: 4px;
      font-size: 0.875rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      transition: all 0.2s ease;
      cursor: pointer;
      width: 100%;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 1.3;
      white-space: normal;
    }

    .service-tab-btn:hover {
      border-color: var(--accent);
      color: var(--accent-text);
      background: var(--accent-glow);
    }

    .service-tab-btn.active {
      background: var(--accent);
      color: var(--ink);
      border-color: var(--accent);
      box-shadow: 0 3px 10px var(--accent-glow);
    }

    .service-subcontent {
      display: none;
      animation: fadeIn 0.25s ease forwards;
    }

    .service-subcontent.active {
      display: block;
    }

    /* Layout Grids */
    .hero-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 48px;
      align-items: center;
      padding: 20px 0 50px 0;
    }

    /* Hero Profilbild Container */
    .hero-profile-container {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .hero-profile-frame {
      position: relative;
      width: 100%;
      max-width: 440px;
      border-radius: 12px;
      overflow: hidden;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-lg);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .hero-profile-frame::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--accent);
      z-index: 2;
    }

    .hero-profile-frame:hover {
      border-color: var(--border-accent);
      box-shadow: 0 16px 36px var(--accent-glow);
    }

    .hero-profile-img {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      display: block;
      background: var(--bg-subtle);
    }

    .hero-profile-caption {
      padding: 16px 20px;
      background: var(--bg-surface);
      border-top: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .hero-profile-caption .name {
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--text-primary);
      text-transform: none;
      letter-spacing: 0;
    }

    .hero-profile-caption .role {
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--accent-text);
      text-transform: none;
      letter-spacing: 0;
    }

    /* Featurable Reviews Wrapper */
    .featurable-wrapper {
      margin: 40px 0 60px 0;
      width: 100%;
      display: block;
    }

    .featurable-subtext {
      font-size: 0.8125rem;
      color: var(--text-muted);
      text-align: center;
      margin-top: 8px;
      letter-spacing: 0.5px;
    }

    /* ===== Selbst gehostetes Google-Bewertungs-Karussell (kein externes Widget) ===== */
    .reviews-carousel-wrap {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 24px;
    }

    .reviews-carousel-viewport {
      flex: 1;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .reviews-carousel-viewport::-webkit-scrollbar { display: none; }

    .reviews-carousel-track {
      display: flex;
      gap: 24px;
      padding: 4px 2px 12px 2px;
    }

    .review-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      padding: 28px;
      box-shadow: var(--shadow-sm);
      display: flex;
      flex-direction: column;
      flex: 0 0 calc(33.333% - 16px);
      min-width: 260px;
      scroll-snap-align: start;
    }

    .review-card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .review-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--accent);
      color: var(--on-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1rem;
      flex-shrink: 0;
    }

    .review-name {
      font-weight: 700;
      font-size: 0.9375rem;
      color: var(--text-primary);
    }

    .review-text {
      font-size: 0.875rem;
      color: var(--text-secondary);
      line-height: 1.65;
      flex: 1;
      margin-bottom: 18px;
    }

    .review-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .review-stars {
      color: var(--warning);
      font-size: 1rem;
      letter-spacing: 1px;
    }

    .review-google-icon svg {
      width: 20px;
      height: 20px;
    }

    .reviews-carousel-arrow {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      color: var(--text-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .reviews-carousel-arrow:hover {
      border-color: var(--accent);
      color: var(--accent-text);
      background: var(--accent-glow);
    }

    .reviews-carousel-arrow svg { width: 18px; height: 18px; }

    @media (max-width: 860px) {
      .review-card { flex: 0 0 82%; }
    }

    /* Mitgliedschaften Karussell (Marquee) */
    .badges-carousel-section {
      margin: 60px 0 40px 0;
      padding: 42px 0;
      background: var(--bg-surface);
      border-top: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
      overflow: hidden;
      position: relative;
    }

    .badges-carousel-header {
      text-align: center;
      margin-bottom: 28px;
    }

    .badges-carousel-header h2,
    .badges-carousel-header h3 {
      font-size: 1rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: var(--text-primary);
      margin-bottom: 6px;
    }

    .badges-carousel-header p {
      font-size: 0.875rem;
      color: var(--text-secondary);
    }

    .marquee-container {
      display: flex;
      width: 100%;
      overflow: hidden;
      position: relative;
      mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
      -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
    }

    .marquee-track {
      display: flex;
      gap: 16px;
      align-items: center;
      animation: marqueeScroll 35s linear infinite;
      white-space: nowrap;
      will-change: transform;
    }

    .marquee-track:hover {
      animation-play-state: paused;
    }

    .badge-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 140px;
      min-width: 190px;
      padding: 0 4px;
      flex-shrink: 0;
    }

    .badge-item img {
      max-height: 120px;
      max-width: 340px;
      width: auto;
      object-fit: contain;
      filter: grayscale(100%) opacity(0.5);
      transition: all 0.3s ease;
    }

    .badge-item img:hover {
      filter: grayscale(0%) opacity(1);
      transform: scale(1.06);
    }

    @keyframes marqueeScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* Vertikaler Marquee für die Termin-Spalte */
    .vertical-marquee-container {
      height: 300px;
      overflow: hidden;
      position: relative;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
    }

    .badge-columns {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      height: 100%;
    }

    .badge-column {
      overflow: hidden;
      height: 100%;
    }

    .badge-column-track {
      display: flex;
      flex-direction: column;
      gap: 16px;
      will-change: transform;
      animation: verticalMarqueeScroll 42s linear infinite;
    }

    .badge-column-track.badge-col-b {
      animation-delay: -21s;
    }

    .badge-columns:hover .badge-column-track {
      animation-play-state: paused;
    }

    .vertical-badge-item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80px;
      padding: 6px;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      box-shadow: var(--shadow-sm);
      transition: all 0.3s ease;
    }

    .vertical-badge-item:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .vertical-badge-item img {
      max-height: 60px;
      max-width: 100%;
      object-fit: contain;
      filter: grayscale(100%) opacity(0.7);
      transition: all 0.3s ease;
    }

    .vertical-badge-item img:hover {
      filter: grayscale(0%) opacity(1);
    }

    @keyframes verticalMarqueeScroll {
      0% { transform: translateY(0); }
      100% { transform: translateY(-50%); }
    }

    /* Leuchtturm Fallstudie */
    .case-study-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 36px;
      align-items: center;
    }

    .case-study-image-box {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--shadow-md);
      position: relative;
      height: 100%;
      min-height: 320px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .case-study-image-inner {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, var(--bg-subtle), var(--bg-card-hover));
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px dashed var(--border-subtle);
      text-align: center;
      padding: 24px;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
      margin-bottom: 48px;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-bottom: 48px;
    }

    /* ===== Blog: Kategorie-Filter & Suche ===== */
    .blog-filter-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      margin: 28px 0 32px 0;
    }

    .blog-search-wrap {
      position: relative;
      flex: 0 1 320px;
      min-width: 220px;
    }

    .blog-search-wrap svg {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      color: var(--text-muted);
      pointer-events: none;
    }

    .blog-search-wrap input {
      width: 100%;
      padding: 11px 14px 11px 40px;
      border-radius: 10px;
      border: 1.5px solid var(--border-subtle);
      background: var(--bg-surface);
      color: var(--text-primary);
      font-family: var(--font-main);
      font-size: 0.875rem;
      transition: border-color 0.2s ease;
    }

    .blog-search-wrap input:focus {
      outline: none;
      border-color: var(--accent);
    }

    .blog-filter-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .blog-filter-pill {
      padding: 9px 16px;
      border-radius: 20px;
      border: 1.5px solid var(--border-subtle);
      background: var(--bg-surface);
      color: var(--text-secondary);
      font-family: var(--font-main);
      font-size: 0.8125rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .blog-filter-pill:hover {
      border-color: var(--accent);
      background: var(--accent-glow);
      color: var(--text-primary);
    }

    .blog-filter-pill.active {
      border-color: var(--accent);
      background: var(--accent);
      color: var(--on-accent);
    }

    /* RSS-Badge: dezentes, türkises Pill mit Icon statt reinem Textlink,
       rechts in der Filterleiste, faellt auf mobil in die naechste Zeile. */
    .blog-rss-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 14px;
      border-radius: 20px;
      border: 1.5px solid var(--accent);
      background: var(--accent-glow);
      color: var(--accent-text);
      font-family: var(--font-main);
      font-size: 0.8125rem;
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
      margin-left: auto;
      transition: all 0.2s ease;
    }

    .blog-rss-badge svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    .blog-rss-badge:hover {
      background: var(--accent);
      color: var(--on-accent);
    }

    @media (max-width: 640px) {
      .blog-search-wrap { flex-basis: 100%; }
      .blog-rss-badge { margin-left: 0; }
    }

    .grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-bottom: 48px;
    }

    .card {
      background-color: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      padding: 34px;
      box-shadow: var(--shadow-sm);
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
    }

    /* Prozess-Schritt-Karten (z.B. "Dein Kanzleiwechsel"): Inhalt startet
       immer oben, damit Überschrift & Text über alle Karten hinweg exakt
       auf derselben Höhe beginnen, unabhängig von der Textlänge. */
    .step-card {
      justify-content: flex-start;
    }

    .step-card-header .card-num {
      line-height: 1.4;
    }

    /* "Dein Kanzleiwechsel" als verbundener Reiseweg statt einzelner Karten:
       durchgehende Linie mit nummerierten Punkten, letzter Punkt (Ziel) in Orange. */
    .journey-wrap {
      position: relative;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 24px;
    }

    .journey-line {
      position: absolute;
      top: 22px;
      left: 11%;
      right: 11%;
      height: 2px;
      background: var(--accent);
      opacity: 0.3;
      z-index: 0;
    }

    .journey-step {
      position: relative;
      z-index: 1;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      max-width: 260px;
    }

    .journey-content {
      width: 100%;
    }

    .journey-dot {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--accent);
      color: var(--on-accent);
      font-family: var(--font-main);
      font-weight: 700;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: var(--shadow-sm);
    }

    .journey-dot-final {
      background: var(--accent-orange);
      animation: journeyDotPulse 2.4s ease-out infinite;
    }

    @keyframes journeyDotPulse {
      0%   { box-shadow: 0 0 0 0 var(--accent-orange-glow); }
      70%  { box-shadow: 0 0 0 12px rgba(255, 107, 107, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
    }

    .journey-step h3 {
      font-size: 1rem;
      font-weight: 700;
      margin: 14px 0 8px 0;
      color: var(--text-primary);
    }

    .journey-step p {
      font-size: 0.875rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0;
    }

    /* Mobil: senkrechte Linie links, Schritte untereinander statt nebeneinander */
    @media (max-width: 860px) {
      .journey-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 36px;
      }
      .journey-line {
        top: 0;
        bottom: 22px;
        left: 21px;
        right: auto;
        width: 2px;
        height: auto;
      }
      .journey-step {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        max-width: none;
        gap: 16px;
      }
      .journey-content {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
      }
      .journey-step h3 { margin: 0 0 6px 0; }
      .journey-dot { flex-shrink: 0; }
    }

    /* EU-/EWR-Länderkarte (E-Commerce, Umsatzsteuersätze) */
    .eu-status { margin: 16px 0 12px; min-height: 76px; }
    .eu-card { border-radius: 12px; padding: 14px 18px; border: 2px solid; }
    .eu-card.eu { border-color: var(--accent); background: var(--accent-glow); }
    .eu-card.ewr { border-color: var(--accent-orange); background: var(--accent-orange-glow); }
    .eu-card.dritt { border-color: var(--border-subtle); background: var(--bg-subtle); }
    .eu-card-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .eu-card-name { font-size: 1.375rem; font-weight: 700; color: var(--text-primary); }
    .eu-card-sub { font-size: 0.875rem; color: var(--text-secondary); margin-top: 4px; }
    .eu-badge { display: inline-block; font-size: 0.8125rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
    .eu-badge.eu { background: var(--accent); color: var(--on-accent); }
    .eu-badge.ewr { background: var(--accent-orange); color: var(--on-accent); }
    .eu-badge.dritt { background: var(--border-subtle); color: var(--text-primary); }
    .eu-map-wrap { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px; margin: 0 0 20px; background: var(--bg-subtle); }
    .eu-map { width: 100%; max-width: 620px; display: block; margin: 0 auto; }
    .eu-map path, .eu-map circle { stroke: var(--bg-surface); stroke-width: 1; cursor: pointer; transition: opacity 0.15s; outline: none; }
    .eu-map path:hover, .eu-map path.sel, .eu-map circle:hover, .eu-map circle.sel { opacity: 0.85; stroke: var(--text-primary); stroke-width: 1.5; }
    .eu-legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); margin-top: 12px; }
    .eu-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
    .eu-credit { text-align: center; font-size: 0.8125rem; color: var(--text-muted); margin-top: 8px; opacity: .8; }
    .eu-credit a { color: inherit; font-weight: 500; text-decoration: underline; }
    .eu-filter { width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-main); font-size: 0.875rem; margin-top: 4px; }
    .eu-filter:focus { outline: none; border-color: var(--accent); }
    .eu-count { font-size: 0.8125rem; color: var(--text-muted); margin: 10px 0 6px; }
    .eu-table tr.eu-row { cursor: pointer; }
    .eu-table tr.eu-row:hover td { background: var(--bg-subtle); }
    .eu-table tr.eu-row.on td { background: var(--accent-glow); }
    .eu-map-note { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
    .table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: 10px; }
    table.compact.eu-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
    table.compact.eu-table th, table.compact.eu-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
    table.compact.eu-table th { background: var(--bg-subtle); font-weight: 700; color: var(--text-secondary); font-size: 0.8125rem; text-transform: none; letter-spacing: 0; }
    table.compact.eu-table tr:last-child td { border-bottom: none; }

    /* Kassenabschlag-Quick-Rechner (Apotheken, Sidebar) */
    .kassen-rechner-card.hr-detail-card { margin-top:0; }
    .kassen-rechner-intro { font-size: 0.875rem; color:var(--text-secondary); line-height:1.5; margin:2px 0 16px; }
    .kassen-rechner-label { display:block; font-size: 0.8125rem; font-weight:700; color:var(--text-secondary); margin-bottom:8px; }
    .kassen-rechner-slider { width:100%; }
    .kassen-rechner-slider-row { display:flex; justify-content:space-between; font-size: 0.8125rem; color:var(--text-muted); margin-top:4px; }
    .kassen-rechner-slider-val { font-weight: 700; color:var(--text-primary); font-size: 0.875rem; }
    .kassen-rechner-result { margin:18px 0; display:flex; flex-direction:column; gap:10px; }
    .kassen-rechner-stat { background:var(--accent-glow); border-radius:10px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
    .kassen-rechner-stat-label { font-size: 0.8125rem; color:var(--text-secondary); }
    .kassen-rechner-stat-val { font-weight: 700; font-size: 1rem; color:var(--accent-text); font-variant-numeric:tabular-nums; white-space:nowrap; }
    .kassen-rechner-note { font-size: 0.8125rem; color:var(--text-muted); line-height:1.6; margin:4px 0 16px; padding-top:12px; border-top:1px solid var(--border-subtle); }

    /* DATEV-/Warenwirtschafts-Radar (Apotheken, eigener Bereich) */
    .datev-radar-card.hr-detail-card { margin:28px 0; padding:28px; }
    .datev-radar-intro { font-size: 0.875rem; color:var(--text-secondary); line-height:1.5; margin:4px 0 20px; max-width:560px; }
    .datev-radar-progress-track { height:8px; background:var(--bg-subtle); border-radius:4px; overflow:hidden; margin:0 0 6px; max-width:420px; }
    .datev-radar-progress-fill { height:100%; width:0%; background:var(--accent); border-radius:4px; transition:width 0.3s ease; }
    .datev-radar-progress-label { font-size: 0.8125rem; font-weight:700; color:var(--text-muted); margin-bottom:20px; }
    .datev-radar-question-text { font-size: 1.0625rem; font-weight: 700; color:var(--text-primary); line-height:1.4; margin:0 0 20px; max-width:560px; }
    .datev-radar-options { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; max-width:620px; margin-bottom:16px; }
    @media (max-width:640px) { .datev-radar-options { grid-template-columns:1fr; } }
    .datev-radar-option-btn { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:18px 12px; border-radius:12px; border:1.5px solid var(--border-subtle); background:var(--bg-surface); cursor:pointer; transition:all 0.2s ease; font-family:var(--font-main); }
    .datev-radar-option-btn:hover { border-color:var(--accent); background:var(--accent-glow); }
    .datev-radar-option-btn svg { width:30px; height:30px; stroke:var(--accent); flex-shrink:0; }
    .datev-radar-option-label { font-size: 0.8125rem; font-weight:700; color:var(--text-primary); line-height:1.4; }
    .datev-radar-back-btn { background:none; border:none; padding:0; font-family:var(--font-main); font-size: 0.8125rem; font-weight:700; color:var(--text-muted); cursor:pointer; }
    .datev-radar-back-btn:hover:not(:disabled) { color:var(--accent-text); }
    .datev-radar-back-btn:disabled { opacity:0; pointer-events:none; }
    .datev-radar-result { display:none; }
    .datev-radar-result.active { display:block; animation:fadeIn 0.3s ease; }
    .datev-radar-status { border-radius:14px; padding:22px 24px; margin-bottom:18px; max-width:560px; }
    .datev-radar-status-headline { display:block; font-size: 1.1875rem; font-weight: 700; margin-bottom:6px; }
    .datev-radar-status-sub { display:block; font-size: 0.875rem; line-height:1.5; }
    .datev-radar-status.red { background:var(--accent-orange-glow); color:var(--accent-orange); }
    .datev-radar-status.amber { background:var(--warning-glow); color:var(--warning); }
    .datev-radar-status.green { background:var(--success-glow); color:var(--success); }
    .datev-radar-actions { max-width:560px; margin-bottom:18px; }
    .datev-radar-actions-title { font-size: 0.8125rem; font-weight: 700; text-transform: none; letter-spacing: 0; color:var(--text-muted); margin-bottom:10px; }
    .datev-radar-actions ul { list-style:none; margin:0; padding:0; }
    .datev-radar-actions li { font-size: 0.875rem; color:var(--text-secondary); line-height:1.6; padding-left:18px; position:relative; margin-bottom:8px; }
    .datev-radar-actions li::before { content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
    .datev-radar-card .btn-qualify { max-width:360px; }
    .datev-radar-restart-btn { display:block; max-width:360px; width:100%; background:none; border:1.5px solid var(--border-subtle); border-radius:10px; padding:9px 12px; margin-top:10px; font-family:var(--font-main); font-size: 0.8125rem; font-weight:700; color:var(--text-secondary); cursor:pointer; transition:all 0.2s ease; }
    .datev-radar-restart-btn:hover { border-color:var(--accent); color:var(--accent-text); }

    /* Einzelunternehmer/GmbH/Holding-Steuervergleich (Echte Unternehmer, Sidebar) */
    .steuervergleich-card.hr-detail-card { margin-top:0; }
    .steuervergleich-intro { font-size: 0.875rem; color:var(--text-secondary); line-height:1.5; margin:2px 0 16px; }
    .steuervergleich-label { display:block; font-size: 0.8125rem; font-weight:700; color:var(--text-secondary); margin-bottom:8px; }
    .steuervergleich-slider { width:100%; }
    .steuervergleich-slider-row { display:flex; justify-content:space-between; font-size: 0.8125rem; color:var(--text-muted); margin-top:4px; gap:6px; }
    .steuervergleich-slider-val { font-weight: 700; color:var(--text-primary); font-size: 0.8125rem; white-space:nowrap; }
    .steuervergleich-result { margin:18px 0; display:flex; flex-direction:column; gap:10px; }
    .steuervergleich-row { background:var(--bg-subtle); border-radius:10px; padding:12px 14px; border:1.5px solid transparent; }
    .steuervergleich-row-highlight { background:var(--accent-glow); border-color:var(--accent); }
    .steuervergleich-row-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; }
    .steuervergleich-row-title { font-size: 0.8125rem; font-weight:700; color:var(--text-primary); }
    .steuervergleich-row-val { font-weight: 700; font-size: 0.9375rem; color:var(--accent-text); font-variant-numeric:tabular-nums; white-space:nowrap; }
    .steuervergleich-row-sub { font-size: 0.8125rem; color:var(--text-secondary); line-height:1.5; margin:0; }
    .steuervergleich-note { font-size: 0.8125rem; color:var(--text-muted); line-height:1.6; margin:4px 0 16px; padding-top:12px; border-top:1px solid var(--border-subtle); }

    /* ===== "Unsere Werte" – Grid/Timeline-Umschalter (aus andersmacher_unsere_werte.html) ===== */
    .werte-toggle-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 32px;
    }

    .werte-toggle-group {
      display: inline-flex;
      align-items: center;
      background: var(--bg-base);
      padding: 5px;
      border-radius: 40px;
      border: 1px solid var(--border-subtle);
      gap: 4px;
    }

    .werte-toggle-btn {
      padding: 9px 20px;
      border-radius: 30px;
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: var(--text-secondary);
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .werte-toggle-btn.active {
      background: var(--accent);
      color: var(--on-accent);
      box-shadow: 0 3px 10px var(--accent-glow);
    }

    .werte-view { display: none; }
    .werte-view.active { display: block; animation: fadeIn 0.35s ease forwards; }

    /* Grid-Ansicht: Wertekarten */
    .werte-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 26px;
    }

    .werte-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 14px;
      box-shadow: var(--shadow-sm);
      padding: 32px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: all 0.3s ease;
    }

    .werte-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), var(--accent-orange));
      opacity: 0.75;
    }

    /* Vier Spezialisierungen (Startseite): derselbe Türkis-zu-Orange-Farbverlauf
       oben an der Karte wie bei "Unsere Werte", damit die Startseite nicht
       eintönig wirkt. Eigene Klasse statt Änderung an .card global. */
    .spec-card {
      overflow: hidden;
    }

    .spec-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), var(--accent-orange));
      opacity: 0.75;
    }

    .werte-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
      border-color: var(--accent);
    }

    .werte-card-top {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 6px;
    }

    /* Überschrift bekommt exakt die Höhe des Icons (46px) und zentriert ihren
       Text per Flexbox darin - das umgeht Schriftart-Metrik-Unschärfen, die bei
       reiner line-height-basierter Zentrierung zu Abweichungen führen können.
       !important verhindert, dass die generische ".content-box h3"-Regel
       (gleiche Spezifität, später in der Kaskade) hier wieder einen
       margin-bottom einschleust und die Zentrierung zerstört. */
    .werte-card-top h3 {
      margin: 0 !important;
      height: 46px !important;
      display: flex !important;
      align-items: center !important;
      font-size: 1.4375rem !important;
    }

    /* ===== Kontakt-Seite: Copy-Buttons & Feature-Karten (aus andersmacher_kontakt.html) ===== */
    /* Google Maps 2-Klick-Lösung: keine automatische Verbindung zu Google
       beim Laden der Seite - erst nach Klick auf "Karte laden". */
    .maps-placeholder {
      width: 100%;
      min-height: 280px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 10px;
      padding: 32px 24px;
      background: var(--bg-subtle);
    }

    .maps-placeholder-icon {
      width: 40px;
      height: 40px;
      color: var(--accent-text);
      margin-bottom: 4px;
    }

    .maps-placeholder-text {
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 6px;
    }

    .maps-placeholder-hint {
      font-size: 0.8125rem;
      color: var(--text-muted);
      max-width: 320px;
      margin-top: 8px;
    }

    .maps-placeholder-hint a {
      color: var(--text-muted);
      text-decoration: underline;
    }

    /* Neu gestaltete Kontakt-Info-Liste: Standort, Öffnungszeiten, Telefon,
       E-Mail als klare Icon-Label-Wert-Zeilen statt vollgepackter Buttons */
    .kontakt-info-list {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .kontakt-info-row {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .kontakt-info-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: var(--accent-glow);
      color: var(--accent-text);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .kontakt-info-icon svg {
      width: 18px;
      height: 18px;
    }

    .kontakt-info-body {
      flex: 1;
      min-width: 0;
    }

    .kontakt-info-label {
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: var(--text-muted);
      margin-bottom: 3px;
    }

    .kontakt-info-value {
      display: block;
      font-size: 0.9062rem;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.5;
    }

    .kontakt-info-value + .kontakt-info-value {
      margin-top: 4px;
    }

    /* Öffnungszeiten: zwei Spalten, damit die Uhrzeiten sauber untereinander
       ausgerichtet sind, unabhängig von der Länge des Tages-Textes links. */
    .kontakt-hours-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 14px;
      row-gap: 4px;
      font-size: 0.9062rem;
    }

    .kontakt-hours-day {
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
    }

    .kontakt-hours-time {
      color: var(--text-secondary);
    }

    a.kontakt-info-link {
      text-decoration: none;
      transition: color 0.2s ease;
    }

    a.kontakt-info-link:hover {
      color: var(--accent-text);
    }

    .kontakt-info-row .kontakt-copy-icon {
      align-self: center;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: transparent;
      border: 1px solid var(--border-subtle);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .kontakt-info-row .kontakt-copy-icon:hover {
      border-color: var(--accent);
      color: var(--accent-text);
      background: var(--accent-glow);
    }

    .kontakt-info-row .kontakt-copy-icon svg {
      width: 14px;
      height: 14px;
    }

    .kontakt-copy-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
      padding-top: 20px;
      border-top: 1px solid var(--border-subtle);
    }

    .kontakt-copy-btn {
      flex: 1;
      min-width: 210px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      background: var(--bg-base);
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.3px;
      color: var(--text-primary);
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .kontakt-copy-btn span:not(.kontakt-copy-icon) {
      flex: 1;
    }

    .kontakt-copy-btn:hover {
      border-color: var(--accent);
      color: var(--accent-text);
      background: var(--accent-glow);
    }

    .kontakt-copy-btn svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }

    .kontakt-copy-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 6px;
      flex-shrink: 0;
      color: var(--text-muted);
      transition: all 0.2s ease;
    }

    .kontakt-copy-icon:hover {
      background: var(--bg-card);
      color: var(--accent-text);
    }

    .kontakt-copy-icon svg {
      width: 13px;
      height: 13px;
    }

    .kontakt-feature-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-left: 4px solid var(--accent);
      border-radius: 10px;
      padding: 24px 26px;
      box-shadow: var(--shadow-sm);
      transition: all 0.25s ease;
    }

    .kontakt-feature-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }

    .kontakt-feature-card.feature-orange {
      border-left-color: var(--accent-orange);
    }

    .kontakt-feature-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 12px;
    }

    .kontakt-feature-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-glow);
      color: var(--accent-text);
      flex-shrink: 0;
    }

    .kontakt-feature-card.feature-orange .kontakt-feature-icon {
      background: var(--accent-orange-glow);
      color: var(--accent-orange);
    }

    .kontakt-feature-icon svg { width: 20px; height: 20px; }

    .kontakt-feature-card h4 {
      font-size: 0.9062rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      line-height: 1.2;
      margin-bottom: 0;
      color: var(--text-primary);
    }

    .kontakt-feature-card p {
      font-size: 0.875rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    /* Toast für Kopier-Feedback */
    #kontaktToast {
      position: fixed;
      bottom: 26px;
      right: 26px;
      z-index: 1200;
      background: var(--bg-card);
      border: 1px solid var(--accent);
      color: var(--text-primary);
      padding: 12px 20px;
      border-radius: 10px;
      box-shadow: var(--shadow-lg);
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(14px);
      transition: all 0.3s ease;
    }

    #kontaktToast.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    #kontaktToast svg { width: 16px; height: 16px; color: var(--accent-text); flex-shrink: 0; }

    /* ===== Karriere: Interaktiver Bewerbungs-Bereich (aus gamification.html) ===== */
    .career-apply-box {
      background: linear-gradient(135deg, var(--bg-subtle), var(--bg-surface));
      border: 2px dashed var(--border-accent);
      border-radius: 12px;
      padding: 32px;
      text-align: center;
      margin-top: 8px;
      transition: all 0.3s ease;
    }

    .career-desktop-drop {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .career-draggable-paper {
      background: var(--bg-surface);
      border: 2px solid var(--accent);
      color: var(--text-primary);
      padding: 16px 28px;
      border-radius: 8px;
      font-weight: 700;
      cursor: grab;
      box-shadow: var(--shadow-md);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      user-select: none;
      transition: transform 0.2s ease;
    }

    .career-draggable-paper:active { cursor: grabbing; transform: scale(1.05); }

    .career-mailbox-dropzone {
      width: 100%;
      max-width: 440px;
      height: 110px;
      border: 3px dashed var(--accent);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-glow);
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: var(--accent-text);
      transition: all 0.25s ease;
    }

    .career-mailbox-dropzone.drag-over {
      background: var(--accent);
      color: var(--on-accent);
      transform: scale(1.02);
    }

    .career-mobile-slide {
      display: none;
      width: 100%;
      max-width: 380px;
      margin: 0 auto;
    }

    .career-slide-track {
      position: relative;
      height: 60px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: 30px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.05);
    }

    .career-slide-text {
      font-size: 0.875rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: var(--text-secondary);
      pointer-events: none;
    }

    .career-slide-handle {
      position: absolute;
      left: 4px;
      top: 4px;
      bottom: 4px;
      width: 52px;
      background: var(--accent);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--on-accent);
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 4px 12px var(--accent-glow);
      user-select: none;
    }

    .career-apply-success {
      display: none;
      text-align: center;
      padding: 12px 0;
    }

    .career-apply-success svg {
      width: 40px;
      height: 40px;
      color: var(--accent-text);
      margin-bottom: 10px;
    }

    @media (max-width: 768px) {
      .career-desktop-drop { display: none; }
      .career-mobile-slide { display: block; }
    }

    .werte-card-tag {
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
      color: var(--accent-text);
    }

    .werte-card-tag.tag-orange { color: var(--accent-orange); }

    .werte-card-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-glow);
      color: var(--accent-text);
      border: 1px solid var(--border-subtle);
      flex-shrink: 0;
    }

    /* Alle vier Werte-Icons einheitlich in Türkis statt alternierend Orange */
    .werte-card-icon.icon-orange {
      background: var(--accent-glow);
      color: var(--accent-text);
    }

    .werte-card-icon svg { width: 22px; height: 22px; }

    .werte-card h3 {
      font-size: 1.4375rem;
      font-weight: 700;
      text-transform: none;
      margin-bottom: 0;
      margin-top: 0;
      line-height: 1.15;
      color: var(--text-primary);
    }

    .werte-card-subtitle {
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--accent-orange);
      text-transform: none;
      letter-spacing: 0;
      margin-bottom: 16px;
    }

    .werte-card p {
      font-size: 0.875rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-bottom: 12px;
    }

    .werte-card-footer {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: var(--accent-text);
    }

    /* Alle vier Werte-Footer-Labels einheitlich in Türkis statt alternierend Orange */
    .werte-card-footer.footer-orange { color: var(--accent-text); }

    /* Timeline-Ansicht */
    .werte-timeline {
      position: relative;
      max-width: 860px;
      margin: 0 auto;
    }

    .werte-timeline-line {
      position: absolute;
      top: 0; bottom: 0; left: 50%;
      width: 3px;
      background: linear-gradient(180deg, var(--accent), var(--accent-orange));
      transform: translateX(-50%);
      z-index: 1;
    }

    .werte-timeline-items {
      display: flex;
      flex-direction: column;
      gap: 56px;
      position: relative;
      z-index: 2;
    }

    .werte-timeline-item {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .werte-timeline-item.reverse { flex-direction: row-reverse; }

    .werte-timeline-item .werte-timeline-text {
      width: 50%;
      text-align: right;
    }

    .werte-timeline-item.reverse .werte-timeline-text {
      text-align: left;
    }

    .werte-timeline-item .werte-timeline-card-wrap {
      width: 50%;
    }

    .werte-timeline-dot {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--accent);
      color: var(--on-accent);
      font-weight: 700;
      font-size: 0.875rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border: 4px solid var(--bg-base);
      box-shadow: var(--shadow-sm);
    }

    .werte-timeline-dot.dot-orange { background: var(--accent-orange); }

    .werte-timeline-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      padding: 22px 26px;
      box-shadow: var(--shadow-sm);
    }

    .werte-timeline-card p {
      font-size: 0.875rem;
      color: var(--text-secondary);
      line-height: 1.65;
      margin-bottom: 10px;
    }

    .werte-timeline-card p:last-child { margin-bottom: 0; }

    @media (max-width: 860px) {
      .werte-grid { grid-template-columns: 1fr; }
      .werte-timeline-line { left: 20px; }
      .werte-timeline-item, .werte-timeline-item.reverse { flex-direction: row; align-items: flex-start; gap: 16px; }
      .werte-timeline-item .werte-timeline-text,
      .werte-timeline-item.reverse .werte-timeline-text { display: none; }
      .werte-timeline-item .werte-timeline-card-wrap { width: 100%; }
      .werte-timeline-dot { width: 32px; height: 32px; font-size: 0.8125rem; }

      /* Auf schmalen Screens kann die Überschrift auf 2 Zeilen umbrechen -
         die feste Höhe (für die Desktop-Icon-Zentrierung) muss dann mitwachsen,
         statt die zweite Zeile abzuschneiden und mit dem Untertitel zu überlappen. */
      .werte-card-top h3 {
        height: auto !important;
        min-height: 46px !important;
        line-height: 1.2 !important;
        padding: 2px 0 !important;
      }
      .werte-card-top { align-items: center; }

      /* Portal-Icons (Personalfragebogen, Mandanten-Onboarding etc.) auf Mobile
         vergrößern - die SVGs haben feste 24px-Maße im HTML, die sonst im
         Verhältnis zu Box und Schrift zu klein wirken. */
      .portal-icon {
        width: 52px;
        height: 52px;
      }
      .portal-icon svg {
        width: 28px !important;
        height: 28px !important;
      }

      /* docunest-Logo ist ein breites Wordmark-Logo - statt es in eine starre
         quadratische Box zu zwingen (wirkt dann verzerrt/zu schmal-hoch),
         bekommt die Box auf Mobile mehr Breite bei fester Höhe. */
      .portal-icon-img {
        width: auto;
        min-width: 64px;
        max-width: 96px;
        height: 52px;
        padding: 6px 10px;
      }
      .portal-icon-img img {
        max-width: 80px;
        max-height: 36px;
      }
    }

    .card:hover {
      border-color: var(--accent);
      background-color: var(--bg-card-hover);
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .card-num {
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--accent-text);
      letter-spacing: 2px;
      margin-bottom: 14px;
    }

    .card-date {
      color: var(--text-muted);
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .portal-icon {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      margin-bottom: 14px;
    }

    .portal-icon-img {
      width: 56px;
      height: 56px;
      background: var(--white);
      padding: 6px;
    }

    /* Im Dark Mode wie die anderen Portal-Icons einen dunklen Hintergrund
       statt des festen weißen Kastens verwenden */
    body.dark-theme .portal-icon-img {
      background: var(--bg-surface);
    }

    .portal-icon-img img {
      max-width: 40px;
      max-height: 40px;
      object-fit: contain;
    }

    .card h3 {
      font-size: 1.3125rem;
      font-weight: 700;
      margin-bottom: 14px;
      text-transform: none;
      color: var(--text-primary);
    }

    .card p {
      font-size: 0.9375rem;
      color: var(--text-secondary);
      margin-bottom: 24px;
      line-height: 1.7;
    }

    .card-arrow {
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--accent-text);
      text-transform: none;
      letter-spacing: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .content-box {
      background-color: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      padding: 42px;
      margin-bottom: 32px;
      box-shadow: var(--shadow-sm);
    }

    .content-box.highlight-border {
      border-left: 5px solid var(--accent);
    }

    .content-box h3,
    .content-box h2.h3-style {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 18px;
      text-transform: none;
    }

    .service-title {
      font-size: clamp(1.25rem, 5.5vw, 1.875rem) !important;
      font-weight: 700;
      color: var(--accent-text) !important;
      margin-bottom: 20px !important;
      text-transform: none;
      letter-spacing: 0;
      overflow-wrap: break-word;
      word-break: break-word;
      hyphens: auto;
    }

    .content-box h4 {
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--accent-text);
      margin: 30px 0 14px 0;
      text-transform: none;
      letter-spacing: 0;
    }

    .content-box p {
      color: var(--text-secondary);
      margin-bottom: 16px;
    }

    .clean-list {
      list-style: none;
      margin: 20px 0;
    }

    .clean-list li {
      position: relative;
      padding-left: 26px;
      margin-bottom: 14px;
      color: var(--text-secondary);
      font-size: 0.9375rem;
    }

    .clean-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      width: 8px;
      height: 8px;
      background-color: var(--accent);
      border-radius: 2px;
    }

    /* AAB (Allgemeine Auftragsbedingungen) Seite */
    .aab-stand {
      color: var(--text-muted);
      font-size: 0.875rem;
      margin-bottom: 24px;
    }
    .aab-stand a { color: var(--accent-text); text-decoration: none; }
    .aab-stand a:hover { text-decoration: underline; }

    .aab-toc {
      background-color: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      padding: 20px 24px;
      margin-bottom: 32px;
    }
    .aab-toc ol {
      list-style: none;
      counter-reset: aab-toc-counter;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 24px;
    }
    .aab-toc li { font-size: 0.875rem; }
    .aab-toc a {
      color: var(--text-secondary);
      text-decoration: none;
    }
    .aab-toc a:hover { color: var(--accent-text); }

    .content-box.aab-content h2 {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--accent-text);
      margin: 34px 0 14px 0;
      text-transform: none;
      letter-spacing: 0.2px;
    }
    .content-box.aab-content h2:first-of-type { margin-top: 0; }
    .content-box.aab-content h3 {
      font-size: 1rem;
      margin-top: 26px;
    }
    .content-box.aab-content h3:first-child { margin-top: 0; }
    .aab-abs { display: flex; gap: 8px; }
    .aab-nr {
      flex: 0 0 auto;
      color: var(--text-muted);
      font-weight: 600;
    }

    .aab-dienstleister { margin-top: 8px; }
    .aab-tabelle-scroll {
      /* body hat sitewide overflow-x:hidden - ohne diesen eigenen
         Scroll-Container wird die Tabelle auf schmalen Viewports abgeschnitten
         statt scrollbar zu sein (siehe Einsatzzweck-Spalte). */
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-top: 12px;
    }
    .aab-tabelle {
      width: 100%;
      border-collapse: collapse;
      margin-top: 0;
      font-size: 0.875rem;
    }
    .aab-tabelle th, .aab-tabelle td {
      text-align: left;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border-subtle);
      color: var(--text-secondary);
    }
    .aab-tabelle th {
      color: var(--text-primary);
      font-weight: 700;
    }

    @media (max-width: 640px) {
      .aab-toc ol { grid-template-columns: 1fr; }
      .aab-abs { flex-direction: column; gap: 2px; }
      .aab-tabelle { min-width: 560px; }
      .aab-tabelle th, .aab-tabelle td { padding: 8px 10px; font-size: 0.875rem; }
    }

    /* Accordion / CV styles */
    .cv-accordion summary::-webkit-details-marker { display: none; }
    .cv-accordion summary::after {
      content: '+';
      margin-left: auto;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--accent-text);
    }
    .cv-accordion[open] summary::after { content: '–'; }

    .cv-unified-timeline {
      display: flex;
      flex-direction: column;
    }

    .cv-timeline-entry {
      position: relative;
      display: flex;
      gap: 18px;
      padding-bottom: 30px;
    }

    .cv-timeline-entry:last-child {
      padding-bottom: 0;
    }

    .cv-timeline-track {
      position: relative;
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .cv-timeline-track::after {
      content: '';
      position: absolute;
      top: 46px;
      bottom: -30px;
      left: 50%;
      width: 2px;
      background: var(--border-subtle);
      transform: translateX(-50%);
    }

    .cv-timeline-entry:last-child .cv-timeline-track::after {
      display: none;
    }

    .cv-logo {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--accent-text);
      letter-spacing: 0.3px;
      text-align: center;
      overflow: hidden;
      flex-shrink: 0;
      z-index: 1;
      line-height: 1.1;
    }

    .cv-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 7px;
    }

    .cv-timeline-content {
      flex: 1;
      padding-top: 2px;
    }

    .cv-timeline-year {
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--accent-text);
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }

    .cv-timeline-tag {
      display: inline-block;
      font-size: 0.8125rem;
      font-weight: 700;
      padding: 2px 10px;
      border-radius: 20px;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      margin-bottom: 8px;
      margin-left: 8px;
    }

    .cv-timeline-tag.tag-academic {
      border-color: var(--accent);
      color: var(--accent-text);
    }

    .cv-timeline-org {
      font-size: 0.875rem;
      color: var(--text-secondary);
      font-weight: 600;
      margin-top: 2px;
      margin-bottom: 6px;
    }

    .cv-timeline-content h4 {
      font-size: 0.9688rem;
      margin-bottom: 2px;
    }

    .cv-timeline-content p {
      font-size: 0.875rem;
      color: var(--text-secondary);
      margin-top: 6px;
    }

    /* ===== Lebenslauf-Layout für "Sidney Nik" (Über uns) ===== */
    .resume-role-pill {
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: var(--accent-text);
      background: var(--accent-glow);
      padding: 4px 12px;
      border-radius: 20px;
      display: inline-block;
      white-space: nowrap;
    }

    .resume-wrap {
      display: flex;
      gap: 28px;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .resume-profile {
      background: var(--bg-card);
      width: 300px;
      border-radius: 8px;
      border: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-sm);
      text-align: center;
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }

    .resume-profile-header {
      height: 110px;
      background: linear-gradient(135deg, var(--accent), var(--text-primary));
    }

    .resume-profile-img {
      width: 128px;
      height: 128px;
      margin: -64px auto 12px auto;
      border-radius: 50%;
      border: 5px solid var(--bg-card);
      overflow: hidden;
      background: var(--bg-subtle);
    }

    .resume-profile-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .resume-profile-name {
      font-size: 1.1875rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      margin-bottom: 4px;
      color: var(--text-primary);
    }

    .resume-profile-role {
      font-size: 0.8125rem;
      color: var(--accent-text);
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      margin-bottom: 14px;
    }

    .resume-profile-quote {
      font-size: 0.8125rem;
      font-style: italic;
      color: var(--text-secondary);
      padding: 0 22px;
      margin-bottom: 18px;
      line-height: 1.5;
    }

    .resume-profile-roles-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      padding: 0 20px;
      margin-bottom: 20px;
    }

    .resume-profile-socials {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 20px;
    }

    .resume-social-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-primary);
      transition: all 0.2s;
      text-decoration: none;
    }

    .resume-social-icon svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
    }

    .resume-social-icon:hover {
      background: var(--accent);
      color: var(--on-accent);
      border-color: var(--accent);
    }

    .resume-profile-actions {
      display: flex;
      border-top: 1px solid var(--border-subtle);
      margin-top: auto;
    }

    .resume-profile-btn {
      flex: 1;
      padding: 15px;
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: var(--text-primary);
      background: none;
      border: none;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      text-decoration: none;
    }

    .resume-profile-btn:first-child {
      border-right: 1px solid var(--border-subtle);
    }

    .resume-profile-btn:hover {
      background: var(--accent-glow);
      color: var(--accent-text);
    }

    .resume-panel {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      box-shadow: var(--shadow-sm);
      padding: 32px 36px;
      flex: 1;
      min-width: 280px;
    }

    .resume-nav-rail {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 56px;
      flex-shrink: 0;
    }

    /* Zweite Icon-Leiste, die nur auf Mobile oberhalb des Inhaltskastens
       erscheint, damit man nicht erst nach unten scrollen muss. */
    .resume-nav-rail-top {
      display: none;
    }

    .resume-nav-item {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      padding: 0;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: var(--shadow-sm);
      position: relative;
    }

    .resume-nav-item svg {
      width: 19px;
      height: 19px;
      flex-shrink: 0;
    }

    /* Text-Label ist nur ein Tooltip, der beim Hover links neben dem Icon erscheint */
    .resume-nav-item span {
      position: absolute;
      right: calc(100% + 12px);
      top: 50%;
      transform: translateY(-50%);
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      color: var(--text-primary);
      padding: 7px 14px;
      border-radius: 6px;
      font-size: 0.8125rem;
      font-weight: 700;
      white-space: nowrap;
      box-shadow: var(--shadow-md);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: all 0.2s ease;
      z-index: 5;
    }

    .resume-nav-item:hover span {
      opacity: 1;
      visibility: visible;
      right: calc(100% + 16px);
    }

    .resume-nav-item:hover {
      border-color: var(--accent);
      color: var(--accent-text);
    }

    .resume-nav-item.active {
      background: var(--accent);
      color: var(--on-accent);
      border-color: var(--accent);
      box-shadow: 0 4px 14px var(--accent-glow);
    }

    .resume-pane {
      display: none;
      animation: fadeIn 0.3s ease forwards;
    }

    .resume-pane.active {
      display: block;
    }

    .resume-story-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 28px;
      align-items: start;
    }

    .resume-story-text p {
      font-size: 0.875rem;
      line-height: 1.75;
      color: var(--text-secondary);
      margin-bottom: 12px;
    }

    .resume-levers-box {
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      padding: 20px;
    }

    .resume-levers-box h4 {
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: none;
      color: var(--accent-text);
      margin-bottom: 12px;
      letter-spacing: 0;
    }

    .resume-levers-list {
      list-style: none;
    }

    .resume-levers-list li {
      font-size: 0.8125rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px dashed var(--border-subtle);
    }

    .resume-levers-list li:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .resume-levers-list strong {
      color: var(--text-primary);
      display: block;
      margin-bottom: 2px;
    }

    .resume-card {
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      padding: 16px 20px;
      margin-bottom: 12px;
      display: flex;
      gap: 16px;
      align-items: flex-start;
      transition: border-color 0.2s;
    }

    .resume-card:hover {
      border-color: var(--accent);
    }

    .resume-logo {
      width: 42px;
      height: 42px;
      object-fit: contain;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      padding: 5px;
      flex-shrink: 0;
    }

    .resume-content {
      flex: 1;
    }

    .resume-date {
      display: inline-block;
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--accent-text);
      background: var(--accent-glow);
      padding: 2px 9px;
      border-radius: 20px;
      margin-bottom: 6px;
    }

    .resume-duration {
      display: inline-block;
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-muted);
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      padding: 2px 9px;
      border-radius: 20px;
      margin-bottom: 6px;
      margin-left: 6px;
    }

    .resume-duration-live {
      color: var(--accent-orange);
      border-color: var(--accent-orange-glow);
      background: var(--accent-orange-glow);
      font-weight: 700;
    }

    .resume-duration-live::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent-orange);
      margin-right: 6px;
      box-shadow: 0 0 0 0 var(--accent-orange-glow);
      animation: liveDotPulse 1.6s ease-out infinite;
    }

    @keyframes liveDotPulse {
      0%   { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.55); }
      70%  { box-shadow: 0 0 0 7px rgba(255, 107, 107, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
    }

    .resume-title {
      font-size: 0.875rem;
      font-weight: 700;
      margin-bottom: 3px;
      color: var(--text-primary);
    }

    .resume-org {
      font-size: 0.8125rem;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }

    .resume-details {
      font-size: 0.8125rem;
      color: var(--text-secondary);
      line-height: 1.55;
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid var(--border-subtle);
    }

    /* Mehrere Rollen-Phasen innerhalb EINER Arbeitgeber-Karte (z.B. Beförderung
       oder Wechsel vom dualen Studium zur Festanstellung beim selben Unternehmen) */
    .resume-phase {
      padding-bottom: 12px;
      margin-bottom: 12px;
      border-bottom: 1px dashed var(--border-subtle);
    }

    .resume-phase-last {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: none;
    }

    @media (max-width: 900px) {
      .resume-wrap { flex-direction: column; align-items: stretch; }
      .resume-profile { width: 100%; }
      .resume-story-grid { grid-template-columns: 1fr; }
      .resume-nav-rail { flex-direction: row; width: 100%; gap: 10px; justify-content: center; }
      .resume-nav-rail-top { display: flex; margin-bottom: 24px; }
      .resume-nav-item span { top: calc(100% + 10px); right:auto; left:50%; transform:translateX(-50%); }
      .resume-nav-item:hover span { top: calc(100% + 14px); }
    }

    .portrait-box {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      padding: 24px;
      box-shadow: var(--shadow-md);
      position: relative;
    }

    /* Redaktionelles Text/Bild-Layout innerhalb eines Leistungstexts (z.B. Apotheken-
       Spezialisierung): Text links, Foto-Karussell rechts, mit korrekter Einzel-
       Attribution pro Bild (unterschiedliche Fotografen möglich). */
    .spec-text-image-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 36px;
      align-items: start;
      margin-bottom: 12px;
    }

    .spec-carousel {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow-md);
      aspect-ratio: 4 / 5;
      background: var(--bg-subtle);
    }

    /* "Echte Unternehmer"-Karussell (Mittelstand): auf dem Desktop hochkant wie die
       anderen Spezialisierungen, Ausschnitt je Bild auf die Person ausgerichtet.
       Auf dem Handy querformatig (4:3), dort ist fast das ganze Bild sichtbar. */
    /* E-Commerce-Karussell: Ausschnitt je Bild auf das Motiv (Mitarbeiter mit Hubwagen,
       Einkaufswagen mit Karten, Monitor mit Scanner). Handy (16:9): Hubwagen-Bild etwas
       nach unten, damit Kopf und Füße sichtbar bleiben. */
    #ecommerceCarousel .spec-carousel-slide:nth-child(1) img { object-position: 7% center; }
    #ecommerceCarousel .spec-carousel-slide:nth-child(2) img { object-position: 6% center; }
    #ecommerceCarousel .spec-carousel-slide:nth-child(3) img { object-position: 40% center; }
    @media (max-width: 860px) {
      #ecommerceCarousel .spec-carousel-slide:nth-child(1) img { object-position: center 90%; }
      #ecommerceCarousel .spec-carousel-slide:nth-child(2) img,
      #ecommerceCarousel .spec-carousel-slide:nth-child(3) img { object-position: center; }
    }
    /* Personen-Karussells: Gesicht steht auf Desktop (4:5) und Handy mittig im Bild.
       Auf dem Handy quadratisch statt 16:9 bzw. 4:3 - nur dann lässt sich der Ausschnitt
       weit genug verschieben, wenn die Person im Foto nicht in der Mitte steht. */
    #unternehmerCarousel { aspect-ratio: 4 / 5; }
    #unternehmerCarousel .spec-carousel-slide:nth-child(1) img { object-position: 45% center; }
    #unternehmerCarousel .spec-carousel-slide:nth-child(2) img { object-position: 22% center; }
    #unternehmerCarousel .spec-carousel-slide:nth-child(3) img { object-position: 30% center; }
    #apothekenCarousel .spec-carousel-slide:nth-child(1) img { object-position: 93% center; }
    #problemfaelleCarousel .spec-carousel-slide:nth-child(3) img { object-position: 65% center; }
    @media (max-width: 860px) {
      #unternehmerCarousel,
      #apothekenCarousel,
      #beraterCarousel,
      #problemfaelleCarousel { aspect-ratio: 1 / 1; }
      #unternehmerCarousel .spec-carousel-slide:nth-child(1) img { object-position: 43% center; }
      #unternehmerCarousel .spec-carousel-slide:nth-child(2) img { object-position: 10% center; }
      #unternehmerCarousel .spec-carousel-slide:nth-child(3) img { object-position: 22% center; }
      #apothekenCarousel .spec-carousel-slide:nth-child(1) img { object-position: 100% center; }
      #problemfaelleCarousel .spec-carousel-slide:nth-child(3) img { object-position: 71% center; }
      /* Hochformat-Fotos: oben ausrichten, damit der Kopf nicht abgeschnitten wird. */
      #beraterCarousel .spec-carousel-slide img { object-position: center top; }
      #karriereCarousel .spec-carousel-slide:nth-child(1) img { object-position: center 10%; }
    }

    .spec-carousel-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.6s ease;
    }

    .spec-carousel-slide.active {
      opacity: 1;
    }

    .spec-carousel-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .spec-carousel-dots {
      position: absolute;
      bottom: 12px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 8px;
      z-index: 2;
    }

    .spec-carousel-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.55);
      border: none;
      cursor: pointer;
      padding: 0;
      transition: all 0.2s ease;
    }

    .spec-carousel-dot.active {
      background: var(--white);
      width: 20px;
      border-radius: 4px;
    }

    /* Unsichtbare Klickflächen links/rechts zum Bildwechsel - keine sichtbaren
       Pfeil-Buttons, einfach auf die linke oder rechte Bildhälfte klicken. */
    .spec-carousel-clickzone {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 50%;
      background: transparent;
      border: none;
      cursor: pointer;
      z-index: 2;
      padding: 0;
    }

    .spec-carousel-clickzone.prev { left: 0; }
    .spec-carousel-clickzone.next { right: 0; }

    .spec-feature-caption {
      font-size: 0.8125rem;
      color: var(--text-muted);
      text-align: right;
      margin-bottom: 24px;
    }

    .spec-feature-caption a {
      color: var(--text-muted);
      text-decoration: underline;
    }

    .spec-feature-caption a:hover {
      color: var(--accent-text);
    }

    @media (max-width: 860px) {
      .spec-text-image-grid { grid-template-columns: 1fr; }
      .spec-carousel { aspect-ratio: 16 / 9; }
    }

    .portrait-inner {
      width: 100%;
      height: 380px;
      background: linear-gradient(145deg, var(--bg-subtle), var(--bg-card));
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px dashed var(--border-subtle);
      color: var(--text-muted);
      text-align: center;
      padding: 24px;
    }

    /* FAQ Akkordeon */
    .faq-container {
      margin-top: 36px;
      border-top: 1px solid var(--border-subtle);
      padding-top: 28px;
    }

    /* FAQ steht in einer eigenen Box (Seiten mit Sidebar-Widget): kein zusätzlicher Abstand und keine Trennlinie oben */
    .content-box > .faq-container:first-child {
      margin-top: 0;
      border-top: none;
      padding-top: 0;
    }

    .faq-header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .faq-accordion-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    details.faq-item {
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      overflow: hidden;
      transition: all 0.25s ease;
    }

    details.faq-item[open] {
      border-color: var(--accent);
      background: var(--bg-surface);
      box-shadow: 0 4px 16px var(--accent-glow);
    }

    summary.faq-question {
      padding: 18px 24px;
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      user-select: none;
      transition: color 0.2s ease;
    }

    summary.faq-question::-webkit-details-marker {
      display: none;
    }

    summary.faq-question:hover {
      color: var(--accent-text);
    }

    .faq-icon-chevron {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--accent-text);
      transition: transform 0.25s ease;
    }

    details.faq-item[open] .faq-icon-chevron {
      transform: rotate(180deg);
    }

    .faq-answer {
      padding: 0 24px 22px 24px;
      font-size: 0.9375rem;
      color: var(--text-secondary);
      line-height: 1.75;
      border-top: 1px solid var(--border-subtle);
      margin-top: 4px;
      padding-top: 18px;
    }

    /* Termin-Bereich Layout */
    .termin-grid {
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: 36px;
      align-items: start;
      margin-top: 36px;
    }

    .termin-left-col {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .termin-profile-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      padding: 24px;
      box-shadow: var(--shadow-sm);
      text-align: center;
    }

    .termin-profile-img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      margin: 0 auto 16px auto;
      border: 3px solid var(--accent);
    }

    .termin-profile-name {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-primary);
      text-transform: none;
      letter-spacing: 0;
    }

    .termin-profile-role {
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--accent-text);
      text-transform: none;
      letter-spacing: 0;
      margin-top: 4px;
    }

    .termin-reviews-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      padding: 20px;
      box-shadow: var(--shadow-sm);
      display: block;
      transition: all 0.25s ease;
      text-decoration: none;
    }

    .termin-reviews-card:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      background-color: var(--bg-card-hover);
    }

    .reviews-card-top {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .reviews-google-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      border-radius: 50%;
      background: var(--bg-base);
      border: 1px solid var(--border-subtle);
    }

    .reviews-google-icon svg {
      width: 20px;
      height: 20px;
    }

    .reviews-score-block {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .reviews-score {
      font-size: 1.375rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1;
    }

    .reviews-stars {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .reviews-stars svg {
      width: 13px;
      height: 13px;
      fill: var(--warning);
    }

    .reviews-card-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--border-subtle);
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: var(--text-secondary);
    }

    .reviews-arrow {
      color: var(--accent-text);
      font-size: 0.875rem;
      transition: transform 0.25s ease;
    }

    .termin-reviews-card:hover .reviews-arrow {
      transform: translateX(4px);
    }

    .termin-reviews-title {
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      color: var(--text-primary);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .booking-wrapper {
      background: var(--bg-surface);
      border: 1px solid var(--border-accent);
      border-radius: 8px;
      padding: 12px;
      box-shadow: var(--shadow-md);
      /* Solange nur der Click-to-Load-Platzhalter drin ist, reicht eine
         normale Kartenhöhe - die volle Kalenderhöhe kommt erst nach dem Laden
         (siehe .booking-wrapper.wrapper-loaded), sonst entsteht eine riesige
         leere Box vor dem Klick. */
      min-height: 420px;
    }
    /* Microsoft Bookings (bookings.cloud.microsoft) ist leer ca. 2.230px hoch; nach Wahl von Dienst und Datum
       kommen die Uhrzeiten dazu. Ohne Scrollen im iFrame muss die Höhe dafür reichen. */
    .booking-wrapper.wrapper-loaded { height: 2750px; }
    @media (max-width: 600px) { .booking-wrapper.wrapper-loaded { height: 3000px; } }

    .booking-wrapper iframe {
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: 6px;
      background-color: var(--bg-base);
    }

    /* Footer */
    footer {
      background-color: var(--footer-bg);
      border-top: 1px solid rgba(142, 146, 151, 0.25);
      padding: 80px 0 40px 0;
      font-size: 14px;
      color: var(--text-muted);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 60px;
    }

    .footer-brand h4 {
      font-size: 19px;
      font-weight: 900;
      letter-spacing: 2px;
      color: var(--white);
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .footer-brand .footer-logo-img {
      height: 48px;
      width: auto;
      max-width: 300px;
      object-fit: contain;
      display: block;
      margin-bottom: 18px;
    }

    .footer-brand p {
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.7;
      max-width: 320px;
    }

    .footer-address {
      font-style: normal;
      color: var(--text-muted);
      font-size: 13.5px;
      line-height: 1.6;
      font-weight: 400;
      margin-top: 14px;
    }

    .footer-address p {
      margin-bottom: 2px;
    }

    .footer-contact {
      margin-top: 14px;
    }

    .footer-contact a {
      display: block;
      color: var(--text-muted);
      font-weight: 400;
      font-size: 14px;
      margin-bottom: 6px;
      transition: color 0.2s ease;
    }

    .footer-contact a:hover {
      color: var(--accent);
    }

    .footer-social-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 24px;
    }

    .footer-social-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(142, 146, 151, 0.3);
      color: var(--text-muted);
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    .footer-social-icon svg {
      width: 17px;
      height: 17px;
      fill: currentColor;
    }

    .footer-social-icon:hover {
      border-color: var(--accent);
      color: var(--accent);
      background-color: rgba(0, 183, 179, 0.1);
    }

    .footer-col .footer-title {
      font-size: 12.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.8px;
      color: var(--white);
      margin-bottom: 22px;
      position: relative;
      padding-bottom: 8px;
    }

    .footer-col .footer-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 28px;
      height: 2px;
      background: var(--accent);
      border-radius: 2px;
    }

    .footer-col ul {
      list-style: none;
    }

    .footer-col ul li {
      margin-bottom: 12px;
    }

    .footer-col ul li a {
      color: var(--text-muted);
      font-size: 13.5px;
      font-weight: 400;
      transition: color 0.2s ease;
      display: inline-block;
    }

    .footer-col ul li a:hover {
      color: var(--accent);
    }

    .footer-bottom {
      padding-top: 32px;
      border-top: 1px solid rgba(142, 146, 151, 0.15);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12.5px;
      color: var(--text-muted);
      flex-wrap: wrap;
      gap: 16px;
    }

    @media (max-width: 1120px) {
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      nav.nav-desktop { display: none; }
      .mobile-toggle { display: flex; }
      .hero-grid { grid-template-columns: 1fr; }
      .case-study-grid { grid-template-columns: 1fr; }
      .termin-grid { grid-template-columns: 1fr; }
      /* Auf Mobile/Tablet (einspaltig) soll der Buchungskalender als
         Erstes sichtbar sein, nicht erst nach Profilkarte, Bewertungen und
         Badges-Marquee. */
      .booking-wrapper { order: -1; }
      .hero-profile-frame { max-width: 380px; }

      /* Kompaktes Favicon-Logo statt breitem Wortmarken-Logo */
      .logo-img-desktop { display: none; }
      .logo-img-mobile { display: block; }

      /* Header entlasten: Portale-Textlink & großer CTA-Button weichen dem
         schwebenden Sticky-CTA unten rechts; Portale bleibt zusätzlich über
         den kompakten Icon-Button direkt neben dem Dark/Light-Schalter erreichbar. */
      .btn-login { display: none; }
      header .btn-qualify { display: none; }
      .mobile-portal-btn { display: flex; }

      .mobile-sticky-cta { display: inline-flex; }

      /* Extra Platz am Seitenende, damit der schwebende Sticky-CTA-Button
         nicht die letzten Textzeilen des Contents verdeckt. */
      .page-section { padding-bottom: 140px; }
    }

    @media (max-width: 860px) {
      .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
      .career-jobs-layout { grid-template-columns: 1fr !important; }
      /* Auf Mobilgeräten stehen beide Spalten untereinander - dort braucht
         das Bild wieder eine eigene, feste Höhe statt der Höhen-Angleichung
         an die Job-Karten-Spalte. */
      .career-jobs-layout > div:last-child { height: auto !important; }
      .career-jobs-layout #karriereCarousel { flex: none !important; aspect-ratio: 4 / 3 !important; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
      .service-subtabs-list { grid-template-columns: 1fr; }
      .service-pill-grid { grid-template-columns: 1fr !important; }

      /* Mehr Luft an den Seiten auf schmalen Screens, statt der vollen
         42px-Innenabstände (wirkte an den Rändern zu eng/„bündig"). */
      .content-box { padding: 26px 20px; }

      /* Karussell soll die volle Spaltenbreite ausfüllen und mittig sitzen,
         nicht durch die aspect-ratio-Berechnung nach rechts verschoben wirken. */
      .spec-carousel { width: 100%; margin: 0 auto; }

      /* Gezielte Silbentrennung nur für die Leistungstext-Überschriften -
         hier sind es normale Sätze (keine einzelnen Komposita), daher greift
         die Trennung nur dort, wo ein einzelnes Wort wirklich zu lang ist. */
      .content-box h3, .content-box h2.h3-style, .content-box h4 {
        overflow-wrap: break-word;
        hyphens: auto;
      }
    }

    /* =====================================================
       HONORARRECHNER - nur auf der Seite "Honorarrechner"
       relevante Styles (unter dem existierenden .page-section-
       System nicht global wirksam, da alle Selektoren spezifisch
       auf die dortigen IDs/Klassen zielen)
       ===================================================== */

    body[data-section="about-honorarrechner"] { background: var(--bg-base); }

    /* Privatperson: frei hinzufügbare Anlagen-Zeilen (Typ + Betrag + Entfernen) */
    .hr-anlage-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
    .hr-anlage-type { flex:1.1; min-width:0; font-family:var(--font-main); font-size: 0.875rem; font-weight:600; color:var(--text-primary); background:var(--bg-subtle); border:1.5px solid var(--border-subtle); border-radius:10px; padding:9px 10px; }
    .hr-anlage-type:focus { outline:none; border-color:var(--accent); }
    .hr-anlage-row .hr-ggw-input-wrap { flex:1; }
    .hr-anlage-row .hr-ggw-input-wrap input[type="text"] { font-size: 0.875rem; padding:9px 12px; }
    .hr-anlage-remove { width:34px; height:34px; border-radius:8px; border:1.5px solid var(--border-subtle); background:transparent; color:var(--text-muted); font-size: 1rem; font-weight:700; cursor:pointer; flex-shrink:0; transition:all 0.2s ease; }
    .hr-anlage-remove:hover { border-color:var(--accent-orange); color:var(--accent-orange); background:var(--accent-orange-glow); }

    .hr-add-btn { width:100%; margin-top:6px; padding:11px; border-radius:10px; border:1.5px dashed var(--accent); background:var(--accent-glow); color:var(--accent-text); font-family:var(--font-main); font-weight:700; font-size: 0.875rem; cursor:pointer; transition:all 0.2s ease; }
    .hr-add-btn:hover { background:var(--accent); color:var(--on-accent); }

    #section-privatperson { margin-top:22px; padding-top:22px; border-top:1px solid var(--border-subtle); }
    #input-mantelbogen-ggw[readonly] { background:var(--bg-subtle); color:var(--text-secondary); cursor:default; }
    .hr-auto-hint { font-size: 0.8125rem; color:var(--text-muted); margin-top:6px; }

    .hr-grid { display:grid; grid-template-columns: 1.35fr 1fr; gap:30px; align-items:start; }
    .hr-grid > div { min-width: 0; }
    @media (max-width: 960px) { .hr-grid { grid-template-columns: 1fr; } }

    .hr-hero h1 { font-family:var(--font-main); font-weight: 700; font-size: clamp(1.625rem,4vw,2.25rem); color:var(--text-primary); line-height:1.2; margin-bottom:10px; text-transform:none; }
    .hr-hero p { color:var(--text-secondary); font-size: 0.9375rem; line-height:1.6; max-width:520px; }

    .hr-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:16px; padding:26px; box-shadow:var(--shadow-sm); margin-top:22px; }
    .hr-card-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
    .hr-step-num { width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-size: 0.8125rem; font-weight: 700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .hr-card-head h2 { font-family:var(--font-main); font-weight: 700; font-size: 1rem; color:var(--text-primary); }

    /* Rechtsform-Karten (Klassenname "rf-card" bleibt fuer JS bestehen) */
    #rechtsform-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
    @media (max-width: 560px) { #rechtsform-grid { grid-template-columns:1fr; } }
    .rf-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 10px; border-radius:12px; border:2px solid var(--border-subtle); background:var(--bg-surface); cursor:pointer; text-align:center; transition:all 0.2s ease; font-family:var(--font-main); }
    .rf-card svg { width:26px; height:26px; color:var(--accent-text); }
    .rf-card .rf-label { font-size: 0.8125rem; font-weight:700; color:var(--text-primary); }
    .rf-card:hover { border-color:var(--accent); background:var(--accent-glow); }
    .rf-card.active { border-color:var(--accent); background:var(--accent); }
    .rf-card.active svg { color:var(--on-accent); }
    .rf-card.active .rf-label { color:var(--on-accent); }

    .section-hidden { display:none; }

    #sub-choice { margin-top:16px; }
    #sub-choice p { font-size: 0.875rem; color:var(--text-secondary); margin-bottom:8px; }
    .sub-btn-row { display:flex; gap:10px; }
    .sub-btn { flex:1; padding:12px 14px; border-radius:10px; border:2px solid var(--border-subtle); background:var(--bg-surface); font-family:var(--font-main); font-size: 0.8125rem; font-weight:700; color:var(--text-primary); cursor:pointer; transition:all 0.2s ease; }
    .sub-btn:hover { border-color:var(--accent); background:var(--accent-glow); }
    .sub-btn.active { border-color:var(--accent); background:var(--accent); color:var(--on-accent); }
    .sub-btn-short { display:none; }
    @media (max-width: 560px) {
      .sub-btn-full { display:none; }
      .sub-btn-short { display:inline; }
    }

    /* Eingabe-Regler */
    .hr-field { margin-bottom:22px; }
    .hr-field:last-child { margin-bottom:0; }
    .hr-field-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
    .hr-field-top label { font-size: 0.875rem; font-weight:700; color:var(--text-secondary); }
    .amount-display { font-family:var(--font-main); font-weight: 700; font-size: 0.875rem; color:var(--accent-text); }
    .hr-range-labels { display:flex; justify-content:space-between; font-size: 0.8125rem; color:var(--text-muted); margin-top:4px; }

    input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; background:var(--border-subtle); outline:none; }
    input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--accent); cursor:pointer; border:3px solid var(--white); box-shadow:0 2px 6px rgba(0,183,179,0.4); }
    input[type="range"]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--accent); cursor:pointer; border:3px solid var(--white); box-shadow:0 2px 6px rgba(0,183,179,0.4); }
    input[type="range"]::-moz-range-track { height:6px; border-radius:3px; background:var(--border-subtle); }

    .hr-ggw-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
    .hr-ggw-row label { font-size: 0.875rem; font-weight:700; color:var(--text-secondary); }
    .hr-slider { width:100%; margin:8px 0 6px; accent-color:var(--accent); }
    .hr-slider-cap-hint { font-size: 0.8125rem; color:var(--text-muted); margin:6px 0 0; }
    .hr-stepper-wrap { }
    .hr-stepper-btn { flex-shrink:0; width:34px; height:34px; border-radius:8px; border:1.5px solid var(--border-subtle); background:var(--bg-surface); color:var(--accent-text); font-family:var(--font-main); font-size: 1.125rem; font-weight:700; cursor:pointer; transition:all 0.2s ease; line-height:1; }
    .hr-stepper-btn:hover { border-color:var(--accent); background:var(--accent-glow); }
    .hr-stepper-wrap input[type="text"] { text-align:center; }
    .hr-ggw-input-wrap { display:flex; align-items:center; gap:8px; }
    .hr-ggw-input-wrap input[type="text"] { text-align:right; font-family:var(--font-main); font-weight: 700; font-size: 1.0625rem; color:var(--accent-text); background:var(--bg-subtle); border:1.5px solid var(--border-subtle); border-radius:10px; padding:10px 14px; width:100%; min-width:0; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
    .hr-ggw-input-wrap input[type="text"]:focus { outline:none; border-color:var(--accent); }
    .hr-ggw-input-wrap span { font-size: 0.9375rem; font-weight:700; color:var(--text-secondary); flex-shrink:0; }

    .hr-hint { display:flex; gap:10px; margin-top:14px; padding:12px 14px; background:var(--accent-glow); border-left:3px solid var(--accent); border-radius:0 10px 10px 0; }
    .hr-hint svg { width:16px; height:16px; color:var(--accent-text); flex-shrink:0; margin-top:2px; }
    .hr-hint p { font-size: 0.8125rem; color:var(--text-secondary); line-height:1.55; }

    .hr-stundensatz-hinweis { margin-bottom:16px; padding:14px 16px; background:var(--bg-subtle); border:1px solid var(--border-subtle); border-radius:12px; }
    .hr-stundensatz-hinweis p { font-size: 0.8125rem; color:var(--text-secondary); line-height:1.55; margin:0 0 8px 0; }
    .hr-stundensatz-hinweis p strong { color:var(--text-primary); }
    .hr-stundensatz-liste { margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
    .hr-stundensatz-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size: 0.8125rem; color:var(--text-secondary); }
    .hr-stundensatz-rolle { flex:1; min-width:0; }
    .hr-stundensatz-preis { flex:0 0 auto; font-weight:700; color:var(--text-primary); white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
    /* Der Unverbindlichkeits-Hinweis unter der Detailaufschlüsselung darf
       etwas größer sein als normale Rechenbeispiel-Hints, er ist ein
       rechtlich relevanter Disclaimer und soll gut lesbar sein. */
    .hr-detail-card .hr-hint p { font-size: 0.875rem; }

    /* Optionale Leistungen */
    #optionen-liste label { display:flex; align-items:center; justify-content:space-between; padding:11px 12px; border-radius:10px; background:var(--bg-subtle); cursor:pointer; margin-bottom:8px; transition:background 0.2s ease; }
    #optionen-liste label:hover { background:var(--accent-glow); }
    #optionen-liste label:last-child { margin-bottom:0; }
    #optionen-liste .opt-left { display:flex; align-items:center; gap:10px; min-width:0; }
    #optionen-liste .opt-checkbox { width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; }
    #optionen-liste .opt-name { font-size: 0.8125rem; font-weight:600; color:var(--text-primary); }
    #optionen-liste .opt-right { display:flex; align-items:center; gap:8px; margin-left:12px; flex-shrink:0; }
    #optionen-liste .opt-price { font-size: 0.8125rem; color:var(--text-muted); font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

    /* Faktor-Anzeige (ohne konkreten Betrag) ist mobil wenig aussagekräftig
       und führt zu Container-Ueberläufen - dort ausgeblendet, der absolute
       Betrag zählt ohnehin, sobald Kennzahlen eingegeben sind. */
    @media (max-width: 768px) {
      .hr-opt-faktor { display:none; }
    }

    /* Ergebnis-Hero */
    .hr-sticky { position:sticky; top:110px; }
    .hr-result-hero { position:relative; overflow:hidden; border-radius:16px; padding:28px 26px; background:linear-gradient(135deg, var(--accent), var(--accent-hover)); box-shadow:var(--shadow-lg); color:var(--on-accent); }
    .hr-result-eur-bg { position:absolute; right:14px; top:-4px; font-family:var(--font-main); font-weight: 700; font-size: 6rem; line-height:1; color:rgba(255,255,255,0.08); pointer-events:none; user-select:none; }
    .hr-result-hero .inner { position:relative; z-index:1; }
    .hr-result-label { font-size: 0.8125rem; font-weight: 700; text-transform: none; letter-spacing: 0; color:rgba(255,255,255,0.7); margin-bottom:14px; }

    .hr-result-costs { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:10px; margin-bottom:18px; }
    .hr-cost-box { background:rgba(255,255,255,0.12); border-radius:10px; padding:12px 10px; display:flex; flex-direction:column; gap:5px; }
    /* Höhere Spezifität (2 Klassen) nötig, damit "section-hidden" hier
       zuverlässig gewinnt - .hr-cost-box setzt sonst mit gleicher
       Spezifität "display:flex" und steht zudem später im Stylesheet. */
    .hr-cost-box.section-hidden { display:none; }
    .hr-cost-label { font-size: 0.8125rem; font-weight:700; text-transform: none; letter-spacing: 0; color:rgba(255,255,255,0.75); }
    .hr-cost-val { font-family:var(--font-main); font-weight: 700; font-size: clamp(0.9375rem,2.6vw,1.1875rem); line-height:1.15; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
    @media (max-width: 500px) { .hr-result-costs { grid-template-columns:1fr; } }

    .hr-verified-row { display:flex; align-items:center; gap:6px; margin-bottom:20px; }
    .hr-verified-row svg { width:15px; height:15px; }
    .hr-verified-row span { font-size: 0.8125rem; color:rgba(255,255,255,0.8); }
    .hr-result-bottom { display:flex; align-items:center; justify-content:flex-end; }
    #pdf-btn { display:flex; align-items:center; gap:7px; background:var(--accent-orange); color:var(--on-accent); font-family:var(--font-main); font-weight: 700; font-size: 0.8125rem; border:none; padding:11px 18px; border-radius:10px; cursor:pointer; transition:all 0.2s ease; }
    #pdf-btn:hover { background:var(--accent-orange-hover); transform:translateY(-1px); }
    #pdf-btn svg { width:16px; height:16px; }

    .hr-detail-card { margin-top:18px; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:16px; padding:22px; box-shadow:var(--shadow-sm); }
    .hr-detail-card h3 { font-family:var(--font-main); font-weight: 700; font-size: 0.9062rem; color:var(--text-primary); margin-bottom:14px; }

    .hr-block { border-radius:12px; background:var(--bg-subtle); overflow:hidden; margin-bottom:10px; }
    .hr-block:last-child { margin-bottom:0; }
    .block-header { display:flex; align-items:center; justify-content:space-between; padding:13px 14px; cursor:pointer; user-select:none; }
    .block-header .left { display:flex; align-items:center; gap:8px; }
    .block-header .left svg { width:17px; height:17px; color:var(--accent-text); }
    .block-header .left span { font-size: 0.8125rem; font-weight: 700; color:var(--text-primary); }
    .block-header .right { display:flex; align-items:center; gap:8px; }
    .block-header .right .sum { font-family:var(--font-main); font-weight: 700; font-size: 0.8125rem; color:var(--accent-text); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
    .toggle-icon { width:15px; height:15px; color:var(--text-muted); transition:transform 0.2s ease; }
    .block-body { max-height:1000px; overflow:hidden; transition:max-height 0.3s ease, opacity 0.2s ease; opacity:1; border-top:1px solid var(--border-subtle); }
    .block-body.collapsed { max-height:0; opacity:0; border-top:none; }
    .hr-pos-row { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:4px 8px; padding:9px 14px; border-bottom:1px solid var(--border-subtle); }
    .hr-pos-row:last-child { border-bottom:none; }
    .hr-pos-row.inactive { opacity:0.4; }

    /* Gründer-Checkliste: Widget in der Existenzgründungsberatung */
    .gruendung-layout { display:grid; grid-template-columns: 1fr 360px; gap:30px; align-items:start; }
    .gruendung-layout > div { min-width: 0; }
    @media (max-width: 960px) { .gruendung-layout { grid-template-columns: 1fr; } }
    .gruendung-sidebar { position:sticky; top:110px; }
    @media (max-width: 960px) { .gruendung-sidebar { position:static; } }
    .gruendung-checklist-card.hr-detail-card { margin-top:0; }
    .gruendung-progress-track { height:8px; background:var(--bg-subtle); border-radius:4px; overflow:hidden; margin:14px 0 6px; }
    .gruendung-progress-fill { height:100%; width:0%; background:var(--accent); border-radius:4px; transition:width 0.3s ease; }
    .gruendung-progress-label { font-size: 0.8125rem; font-weight:700; color:var(--text-muted); margin-bottom:16px; }
    .gruendung-checklist-body .hr-block { background:var(--bg-subtle); }
    .gruendung-checklist-body .block-header { align-items:flex-start; gap:8px; }
    .gruendung-checklist-body .block-header .left { flex:1 1 auto; min-width:0; }
    .gruendung-checklist-body .block-header .left span { font-size: 0.875rem; line-height:1.4; white-space:normal; }
    .gruendung-checklist-body .block-header .right { flex:0 0 auto; white-space:nowrap; margin-top:1px; }
    .gruendung-item { display:flex; align-items:flex-start; gap:9px; padding:10px 14px; border-bottom:1px solid var(--border-subtle); }
    .gruendung-item:last-child { border-bottom:none; }
    .gruendung-item input[type="checkbox"] { margin-top:2px; width:15px; height:15px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
    .gruendung-item label { font-size: 0.875rem; line-height:1.5; color:var(--text-secondary); cursor:pointer; }
    .gruendung-item.checked label { color:var(--text-muted); text-decoration:line-through; }
    .gruendung-checklist-cta { display:block; text-align:center; margin-top:16px; padding:11px 14px; border-radius:10px; background:var(--accent-glow); color:var(--accent-text); font-weight:700; font-size: 0.8125rem; text-decoration:none; }
    .gruendung-checklist-cta:hover { opacity:0.85; }
    .hr-pos-name { font-size: 0.8125rem; font-weight:600; color:var(--text-primary); flex:1 1 140px; min-width:120px; white-space:normal; line-height:1.35; word-break:break-word; }
    .hr-pos-right { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto; }
    .hr-freq-badge { font-size: 0.8125rem; font-weight:700; padding:2px 7px; border-radius:20px; white-space:nowrap; }
    .hr-freq-einmalig { color:var(--accent-text); background:var(--accent-glow); }
    .hr-freq-monatlich { color:var(--success); background:var(--success-glow); }
    .hr-freq-jaehrlich { color:var(--warning); background:var(--warning-glow); }
    .hr-pos-amount { font-size: 0.8125rem; font-weight: 700; color:var(--text-primary); min-width:80px; text-align:right; white-space:nowrap; flex-shrink:0; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

    /* Rechtsform-Kompass: Quiz-Widget in der Gestaltungsberatung */
    .rechtsform-layout { display:grid; grid-template-columns: 1fr 360px; gap:30px; align-items:start; }
    .rechtsform-layout > div { min-width: 0; }
    @media (max-width: 960px) { .rechtsform-layout { grid-template-columns: 1fr; } }
    .rechtsform-sidebar { position:sticky; top:110px; }
    /* Sidebar endet bündig mit dem Textkasten: Abstand nach unten sitzt am Layout, nicht am Textkasten */
    .rechtsform-layout, .gruendung-layout { margin-bottom: 32px; }
    .rechtsform-layout > .content-box, .gruendung-layout > .content-box { margin-bottom: 0; }
    @media (max-width: 960px) { .rechtsform-sidebar { position:static; } }
    .rechtsform-quiz-card.hr-detail-card { margin-top:0; }
    .rechtsform-quiz-intro { font-size: 0.875rem; color:var(--text-secondary); line-height:1.5; margin-bottom:2px; }
    .rechtsform-progress-track { height:8px; background:var(--bg-subtle); border-radius:4px; overflow:hidden; margin:14px 0 6px; }
    .rechtsform-progress-fill { height:100%; width:10%; background:var(--accent); border-radius:4px; transition:width 0.3s ease; }

    /* Prozess-Timeline-Widget (Sidebar bei Tax Technology > Prozessoptimierung) */
    .process-stepper-card.hr-detail-card { margin-top:0; }
    .process-stepper { display:flex; flex-direction:column; margin:6px 0 18px; }
    .process-step { display:flex; flex-direction:row; align-items:center; gap:10px; background:none; border:none; cursor:pointer; font-family:var(--font-main); padding:4px 0; width:100%; text-align:left; }
    .process-step-dot { width:26px; height:26px; border-radius:50%; background:var(--bg-subtle); border:1.5px solid var(--border-subtle); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size: 0.8125rem; font-weight: 700; flex-shrink:0; transition:all 0.2s ease; }
    .process-step-label { font-size: 0.8125rem; font-weight:700; color:var(--text-muted); text-align:left; line-height:1.2; transition:color 0.2s ease; }
    .process-step.completed .process-step-dot { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
    .process-step.active .process-step-dot { background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:0 0 0 3px var(--accent-glow); }
    .process-step.active .process-step-label, .process-step.completed .process-step-label { color:var(--text-primary); }
    .process-step-line { width:2px; height:16px; background:var(--border-subtle); margin:0 0 0 12px; transition:background 0.2s ease; }
    .process-step-line.completed { background:var(--accent); }

    .process-step-panel { display:none; }
    .process-step-panel.active { display:block; animation:fadeIn 0.3s ease; }
    .process-step-title { font-weight: 700; font-size: 0.875rem; color:var(--text-primary); margin-bottom:6px; }
    .process-step-panel p:last-child { font-size: 0.875rem; color:var(--text-secondary); line-height:1.55; margin:0; }

    .process-step-nav { display:flex; justify-content:space-between; align-items:center; margin-top:16px; gap:10px; }
    .process-nav-btn { padding:9px 14px; border-radius:10px; border:1.5px solid var(--border-subtle); background:var(--bg-surface); color:var(--text-secondary); font-family:var(--font-main); font-size: 0.8125rem; font-weight:700; cursor:pointer; transition:all 0.2s ease; }
    .process-nav-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent-text); }
    .process-nav-btn:disabled { opacity:0.35; cursor:default; }
    .process-nav-btn-primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
    .process-nav-btn-primary:hover:not(:disabled) { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--white); }

    .process-step-done { display:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--border-subtle); text-align:center; }
    .process-step-done.active { display:block; animation:fadeIn 0.3s ease; }
    .process-step-done p { font-size: 0.875rem; color:var(--text-secondary); margin:0 0 12px; }
    /* In der schmalen Sidebar darf der CTA-Text umbrechen statt ueberzulaufen. */
    .process-step-done .btn-qualify { white-space:normal; line-height:1.35; padding:11px 14px; }

    /* Sperrgruende-Check (Sidebar bei Rechtsschutz > Selbstanzeige) */
    .sperrgruende-card.hr-detail-card { margin-top:0; }
    .sperrgruende-intro { font-size: 0.875rem; color:var(--text-secondary); line-height:1.5; margin:2px 0 14px; }
    .sperrgrund-item { display:flex; align-items:flex-start; gap:9px; font-size: 0.875rem; color:var(--text-primary); padding:9px 0; border-bottom:1px solid var(--border-subtle); cursor:pointer; }
    .sperrgrund-item:last-of-type { border-bottom:none; }
    .sperrgrund-item input { margin-top:2px; width:15px; height:15px; accent-color:var(--accent-orange); flex-shrink:0; cursor:pointer; }
    .sperrgruende-status { display:flex; align-items:center; gap:8px; margin:16px 0 10px; padding:9px 12px; border-radius:10px; font-weight: 700; font-size: 0.8125rem; transition:all 0.2s ease; }
    .sperrgruende-status-open { background:var(--success-glow); color:var(--success); }
    .sperrgruende-status-blocked { background:var(--accent-orange-glow); color:var(--accent-orange); }
    .sperrgruende-dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex-shrink:0; }
    .sperrgruende-result p { font-size: 0.8125rem; color:var(--text-secondary); line-height:1.5; margin:0 0 14px; }
    .sperrgruende-result .btn-qualify { width:100%; box-sizing:border-box; white-space:normal; line-height:1.35; padding:11px 14px; }

    /* Fristen-Ampel (Sidebar bei Rechtsschutz > Einspruch) */
    .fristen-ampel-card.hr-detail-card { margin-top:0; }
    .fristen-ampel-intro { font-size: 0.875rem; color:var(--text-secondary); line-height:1.5; margin:2px 0 16px; }
    .fristen-ampel-label { display:block; font-size: 0.8125rem; font-weight:700; color:var(--text-secondary); margin-bottom:8px; }
    .fristen-ampel-input { width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px; border:1.5px solid var(--border-subtle); background:var(--bg-surface); color:var(--text-primary); font-family:var(--font-main); font-size: 0.875rem; }
    .fristen-ampel-input:focus { outline:none; border-color:var(--accent); }
    .fristen-ampel-result { margin-top:18px; padding-top:16px; border-top:1px solid var(--border-subtle); }
    .fristen-ampel-status { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:9px 12px; border-radius:10px; font-weight: 700; font-size: 0.8125rem; transition:all 0.2s ease; }
    .fristen-ampel-status-green { background:var(--success-glow); color:var(--success); }
    .fristen-ampel-status-amber { background:var(--warning-glow); color:var(--warning); }
    .fristen-ampel-status-red { background:var(--accent-orange-glow); color:var(--accent-orange); }
    .fristen-ampel-dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex-shrink:0; }
    .fristen-ampel-result p { font-size: 0.8125rem; color:var(--text-secondary); line-height:1.5; margin:0 0 14px; }
    .fristen-ampel-result .btn-qualify { width:100%; box-sizing:border-box; white-space:normal; line-height:1.35; padding:11px 14px; }

    /* Nettolohn-Check (Sidebar bei Deklaration > Lohn und Gehalt) */
    .nettolohn-check-card.hr-detail-card { margin-top:0; }
    .nettolohn-check-intro { font-size: 0.875rem; color:var(--text-secondary); line-height:1.5; margin:2px 0 14px; }
    .nettolohn-check-progress-track { height:8px; background:var(--bg-subtle); border-radius:4px; overflow:hidden; margin:0 0 6px; }
    .nettolohn-check-progress-fill { height:100%; width:0%; background:var(--accent); border-radius:4px; transition:width 0.3s ease; }
    .nettolohn-check-progress-label { font-size: 0.8125rem; font-weight:700; color:var(--text-muted); margin-bottom:14px; }
    .nettolohn-check-list { display:flex; flex-direction:column; }
    .nettolohn-check-item { display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid var(--border-subtle); cursor:pointer; }
    .nettolohn-check-item:last-of-type { border-bottom:none; }
    .nettolohn-check-item input { width:15px; height:15px; accent-color:var(--accent); flex-shrink:0; cursor:pointer; }
    .nettolohn-check-text { font-size: 0.8125rem; font-weight:600; color:var(--text-primary); flex:1; }
    .nettolohn-check-tag { font-size: 0.8125rem; font-weight:700; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
    .nettolohn-check-result { margin-top:16px; padding-top:16px; border-top:1px solid var(--border-subtle); }
    .nettolohn-check-result p { font-size: 0.8125rem; color:var(--text-secondary); line-height:1.5; margin:0 0 14px; }
    .nettolohn-check-result .btn-qualify { width:100%; box-sizing:border-box; white-space:normal; line-height:1.35; padding:11px 14px; }

    /* ESt-Unterlagen-Check (Sidebar bei Deklaration > Einkommensteuererklärung) */
    .est-check-card.hr-detail-card { margin-top:0; }
    .est-check-intro { font-size: 0.875rem; color:var(--text-secondary); line-height:1.5; margin:2px 0 14px; }
    .est-check-progress-track { height:8px; background:var(--bg-subtle); border-radius:4px; overflow:hidden; margin:0 0 6px; }
    .est-check-progress-fill { height:100%; width:0%; background:var(--accent); border-radius:4px; transition:width 0.3s ease; }
    .est-check-progress-label { font-size: 0.8125rem; font-weight:700; color:var(--text-muted); margin-bottom:16px; }
    .est-check-question-text { font-size: 0.875rem; font-weight:700; color:var(--text-primary); line-height:1.4; margin:0 0 14px; min-height:38px; }
    .est-check-answers { display:flex; gap:10px; margin-bottom:12px; }
    .est-check-answer-btn { flex:1; padding:10px 12px; border-radius:10px; border:1.5px solid var(--border-subtle); background:var(--bg-surface); color:var(--text-primary); font-family:var(--font-main); font-size: 0.875rem; font-weight:700; cursor:pointer; transition:all 0.2s ease; }
    .est-check-answer-btn:hover { border-color:var(--accent); background:var(--accent-glow); }
    .est-check-back-btn { background:none; border:none; padding:0; font-family:var(--font-main); font-size: 0.8125rem; font-weight:700; color:var(--text-muted); cursor:pointer; }
    .est-check-back-btn:hover:not(:disabled) { color:var(--accent-text); }
    .est-check-back-btn:disabled { opacity:0; pointer-events:none; }

    .est-check-result { display:none; }
    .est-check-result.active { display:block; animation:fadeIn 0.3s ease; }
    .est-check-result-intro { font-size: 0.875rem; color:var(--text-secondary); line-height:1.5; margin:0 0 14px; }
    .est-check-doc-group { border:1px solid var(--border-subtle); border-radius:10px; margin-bottom:8px; overflow:hidden; }
    .est-check-doc-group summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; cursor:pointer; font-size: 0.8125rem; font-weight:700; color:var(--text-primary); background:var(--bg-subtle); }
    .est-check-doc-group summary::-webkit-details-marker { display:none; }
    .est-check-doc-group summary .est-check-doc-count { font-size: 0.8125rem; font-weight:700; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
    .est-check-doc-list { list-style:none; margin:0; padding:10px 12px 12px; }
    .est-check-doc-list li { font-size: 0.8125rem; color:var(--text-secondary); line-height:1.5; padding-left:14px; position:relative; margin-bottom:6px; }
    .est-check-doc-list li:last-child { margin-bottom:0; }
    .est-check-doc-list li::before { content:''; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--accent); }
    .est-check-always-note { font-size: 0.8125rem; color:var(--text-muted); line-height:1.5; margin:14px 0; padding-top:12px; border-top:1px solid var(--border-subtle); }
    .est-check-result .btn-qualify { width:100%; box-sizing:border-box; white-space:normal; line-height:1.35; padding:11px 14px; margin-bottom:10px; }
    .est-check-restart-btn { display:block; width:100%; background:none; border:1.5px solid var(--border-subtle); border-radius:10px; padding:9px 12px; font-family:var(--font-main); font-size: 0.8125rem; font-weight:700; color:var(--text-secondary); cursor:pointer; transition:all 0.2s ease; }
    .est-check-restart-btn:hover { border-color:var(--accent); color:var(--accent-text); }
    .est-check-pdf-btn { display:block; width:100%; box-sizing:border-box; background:var(--bg-surface); border:1.5px solid var(--accent); border-radius:10px; padding:10px 14px; margin-bottom:10px; font-family:var(--font-main); font-size: 0.8125rem; font-weight:700; color:var(--accent-text); cursor:pointer; transition:all 0.2s ease; text-align:center; }
    .est-check-pdf-btn:hover { background:var(--accent-glow); }
    .est-check-pdf-btn:disabled { opacity:0.5; cursor:default; }

    /* Groessere Variante der Karte fuer die eigenstaendige Checklisten-Seite */
    .est-check-card.est-check-page { max-width:640px; margin:0 auto; }
    .est-check-card.est-check-page .est-check-question-text { font-size: 1.0625rem; }
    .est-check-card.est-check-page .est-check-answers { max-width:320px; margin-left:auto; margin-right:auto; }

    /* Freibetrag & 10-Jahres-Zyklus (Sidebar bei Gestaltung > Schenkung/Erbschaft) */
    .freibetrag-card.hr-detail-card { margin-top:0; }
    .freibetrag-intro { font-size: 0.875rem; color:var(--text-secondary); line-height:1.5; margin:2px 0 16px; }
    .freibetrag-label { display:block; font-size: 0.8125rem; font-weight:700; color:var(--text-secondary); margin-bottom:8px; }
    .freibetrag-select { width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px; border:1.5px solid var(--border-subtle); background:var(--bg-surface); color:var(--text-primary); font-family:var(--font-main); font-size: 0.875rem; }
    .freibetrag-select:focus { outline:none; border-color:var(--accent); }
    .freibetrag-result { display:none; margin-top:14px; padding:14px; border-radius:10px; background:var(--accent-glow); text-align:center; }
    .freibetrag-result.active { display:block; animation:fadeIn 0.3s ease; }
    .freibetrag-amount { font-family:var(--font-main); font-weight: 700; font-size: 1.375rem; color:var(--accent-text); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
    .freibetrag-amount-note { font-size: 0.8125rem; color:var(--text-secondary); margin:6px 0 0; }
    .freibetrag-divider { height:1px; background:var(--border-subtle); margin:20px 0; }
    .freibetrag-cycle-result { display:none; margin-top:14px; }
    .freibetrag-cycle-result.active { display:block; animation:fadeIn 0.3s ease; }
    .freibetrag-status { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:9px 12px; border-radius:10px; font-weight: 700; font-size: 0.8125rem; }
    .freibetrag-status-amber { background:var(--warning-glow); color:var(--warning); }
    .freibetrag-status-green { background:var(--success-glow); color:var(--success); }
    .freibetrag-dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex-shrink:0; }
    .freibetrag-cycle-result p { font-size: 0.8125rem; color:var(--text-secondary); line-height:1.5; margin:0; }
    .freibetrag-card .btn-qualify { width:100%; box-sizing:border-box; white-space:normal; line-height:1.35; padding:11px 14px; margin-top:18px; }
    .rechtsform-progress-label { font-size: 0.875rem; font-weight:700; color:var(--text-muted); margin-bottom:14px; }
    .rechtsform-question { font-size: 0.9375rem; font-weight:700; color:var(--text-primary); margin-bottom:14px; line-height:1.45; }
    .rechtsform-option { display:flex; align-items:flex-start; gap:9px; padding:11px 13px; border:1px solid var(--border-subtle); border-radius:10px; margin-bottom:8px; cursor:pointer; transition:border-color 0.15s ease, background 0.15s ease; }
    .rechtsform-option:hover { border-color:var(--accent); }
    .rechtsform-option.selected { border-color:var(--accent); background:var(--accent-glow); }
    .rechtsform-option input[type="radio"] { margin-top:2px; width:15px; height:15px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
    .rechtsform-option label { font-size: 0.9062rem; line-height:1.5; color:var(--text-secondary); cursor:pointer; }
    .rechtsform-nav { display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
    .rechtsform-btn { font-family:var(--font-main); font-weight:700; font-size: 0.875rem; border-radius:9px; padding:9px 16px; cursor:pointer; border:none; }
    .rechtsform-btn-back { background:var(--bg-subtle); color:var(--text-secondary); }
    .rechtsform-btn-back:disabled { opacity:0.4; cursor:not-allowed; }
    .rechtsform-btn-next { background:var(--accent); color:var(--on-accent); }
    .rechtsform-btn-next:disabled { opacity:0.4; cursor:not-allowed; }
    .rechtsform-result-title { font-size: 1rem; font-weight: 700; color:var(--text-primary); margin-bottom:8px; }
    .rechtsform-result-text { font-size: 0.875rem; color:var(--text-secondary); line-height:1.55; margin-bottom:16px; }
    .rechtsform-bar-row { margin-bottom:10px; }
    .rechtsform-bar-label { display:flex; justify-content:space-between; font-size: 0.8125rem; font-weight:700; color:var(--text-muted); margin-bottom:3px; }
    .rechtsform-bar-track { height:7px; background:var(--bg-subtle); border-radius:4px; overflow:hidden; }
    .rechtsform-bar-fill { height:100%; background:var(--accent); border-radius:4px; }
    .rechtsform-quiz-cta { display:block; text-align:center; margin-top:16px; padding:11px 14px; border-radius:10px; background:var(--accent-glow); color:var(--accent-text); font-weight:700; font-size: 0.875rem; text-decoration:none; }
    .rechtsform-quiz-cta:hover { opacity:0.85; }
    .rechtsform-restart { display:block; width:100%; text-align:center; margin-top:12px; padding:0; font-size: 0.875rem; color:var(--text-muted); cursor:pointer; background:none; border:none; text-decoration:underline; font-family:var(--font-main); }

    #ergebnis-placeholder { margin-top:22px; background:var(--bg-card); border:1px dashed var(--border-subtle); border-radius:16px; padding:44px 24px; text-align:center; }
    #ergebnis-placeholder svg { width:52px; height:52px; color:var(--border-subtle); margin-bottom:12px; }
    #ergebnis-placeholder p { color:var(--text-secondary); font-size: 0.875rem; font-weight:600; }

    /* "Passende Beiträge aus dem Blog"-Link auf Leistungsseiten: leichter
       türkiser Hover-Effekt, damit der Link sich interaktiv anfühlt. */
    .blog-related-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      text-decoration: none;
      padding: 12px 14px;
      margin: 0 -14px;
      border-radius: 10px;
      transition: background 0.2s ease;
    }

    .blog-related-link:hover {
      background: var(--accent-glow) !important;
    }

    /* Autoren-/Datumszeile im Blogartikel: fester Zeilenumbruch zwischen
       Veroeffentlichungsdatum und Autor statt einer gemeinsamen Zeile. Der
       Umbruch steht als <br> direkt im Markup (siehe Blogartikel), damit er
       auch ohne styles.css (z.B. lokale Vorschau per Doppelklick) sicher
       greift - die Spans bleiben daher bewusst inline. */
    .blog-meta {
      font-size: 0.875rem;
      color: var(--text-muted);
      font-weight: 600;
      margin-bottom: 18px;
    }

    /* "Mehr laden"-Button unter den passenden Blogbeitraegen (Leistungen &
       Spezialisierungen) - dezent, kein primaerer CTA. */
    .related-posts-more {
      display: block;
      width: 100%;
      margin-top: 10px;
      padding: 10px 14px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      color: var(--text-secondary);
      font-size: 0.875rem;
      font-weight: 700;
      font-family: var(--font-main);
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .related-posts-more:hover {
      background: var(--accent-glow);
      border-color: var(--accent);
      color: var(--accent-text);
    }

    /* Blog-Artikel: Fließtext etwas grosszuegiger als der Standard, damit
       laengere Fachartikel angenehmer zu lesen sind. */
    .blog-article .content-box p { font-size: 1.0625rem; line-height: 1.8; }
    .blog-article .content-box .clean-list li { font-size: 1.0625rem; line-height: 1.7; }
    .blog-article .content-box h2 { font-size: 1.4375rem; margin-top: 6px; margin-bottom: 14px; }

    /* Blog-Übersicht: Autorzeile unter dem Datum */
    .card-author { font-size: 0.8125rem; font-weight:600; color:var(--text-muted); margin:-4px 0 10px; }

    /* Steuertermine: Karten "Nächste Fristen" (Startseite, Leistungsseiten, /steuertermine) */
    .st-next-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
    .st-next-head h2 { margin:0; }
    .st-next-link { font-size: 0.8125rem; font-weight: 700; color:var(--accent-text); text-decoration:none; text-transform: none; letter-spacing: 0; }
    .st-next-link:hover { text-decoration:underline; }
    .st-next-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; }
    .st-next-card { background:var(--bg-subtle); border:1.5px solid var(--border-subtle); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:4px; }
    .st-next-card.soon { border-color:var(--accent-orange); background:var(--accent-orange-glow); }
    .st-next-card-title { font-size: 0.875rem; font-weight: 700; color:var(--text-primary); line-height:1.35; }
    .st-next-card-date { font-size: 0.875rem; font-weight:700; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
    .st-next-card-cd { font-size: 0.8125rem; font-weight: 700; color:var(--accent-text); }
    .st-next-card.soon .st-next-card-cd { color:var(--accent-orange); }
    .st-next-card-meta { font-size: 0.8125rem; color:var(--text-muted); line-height:1.45; margin-top:2px; }
    .st-next-section { margin-top:40px; }

    /* Steuertermine: Jahresüberblick mit Reitern (/steuertermine) */
    .st-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px; }
    .st-tab { padding:8px 16px; border-radius:999px; border:1.5px solid var(--border-subtle); background:var(--bg-surface); color:var(--text-secondary); font-family:var(--font-main); font-size: 0.875rem; font-weight:700; cursor:pointer; transition:all 0.2s ease; }
    .st-tab:hover { border-color:var(--accent); color:var(--accent-text); }
    .st-tab.active { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
    /* Werkzeugleiste: Jahr, Bundesland und Umsatzsteuer-Umschalter in einer Zeile, alle Bedienelemente 44 px hoch */
    .st-bar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 20px; margin:0 0 16px; }
    .st-year { display:inline-flex; align-items:center; height:44px; border:1.5px solid var(--border-subtle); border-radius:10px; background:var(--bg-surface); }
    .st-year-btn { width:38px; height:100%; border:none; background:transparent; color:var(--text-secondary); font-family:var(--font-main); font-size: 1.125rem; font-weight:700; line-height:1; cursor:pointer; border-radius:10px; transition:color 0.2s ease; }
    .st-year-btn:hover { color:var(--accent-text); }
    .st-year-val { min-width:44px; text-align:center; font-size: 0.875rem; font-weight:700; color:var(--text-primary); }
    .st-year-today { margin:0 6px 0 2px; padding:4px 10px; border:none; border-radius:999px; background:var(--accent-glow); color:var(--accent-text); font-family:var(--font-main); font-size: 0.75rem; font-weight:700; cursor:pointer; }
    .st-table { width:100%; border-collapse:collapse; font-size: 0.875rem; }
    .st-table th, .st-table td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--border-subtle); white-space:nowrap; vertical-align:top; }
    .st-table thead th { background:var(--bg-subtle); font-size: 0.8125rem; font-weight: 700; text-transform: none; letter-spacing: 0; color:var(--text-secondary); }
    .st-table tbody th { font-weight:700; color:var(--text-primary); }
    .st-table tbody tr:last-child th, .st-table tbody tr:last-child td { border-bottom:none; }
    .st-table tr.cur th, .st-table tr.cur td { background:var(--accent-glow); }
    .st-table .dt { display:block; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
    .st-table .cd { display:block; font-size: 0.8125rem; font-weight:700; color:var(--accent-text); margin-top:1px; }
    .st-table td.soon .cd { color:var(--accent-orange); }
    .st-table td.past .dt { color:var(--text-muted); font-weight:500; }
    .st-table td.muted { color:var(--text-muted); }
    .st-table .q { display:inline-block; font-size: 0.8125rem; font-weight: 700; padding:1px 6px; border-radius:8px; background:var(--accent-glow); color:var(--accent-text); margin-left:4px; }
    /* Steuertermine mobil: Tabellenzeilen als Karten */
    @media (max-width: 760px) {
      .st-table-wrap-reset, .table-wrap:has(.st-table) { border:none; overflow:visible; border-radius:0; }
      .st-table, .st-table tbody, .st-table tr, .st-table th, .st-table td { display:block; width:100%; }
      .st-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
      .st-table tbody tr { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:12px; margin-bottom:12px; padding:6px 14px 8px; box-shadow:var(--shadow-sm); }
      .st-table tr.cur { border-color:var(--border-accent); }
      .st-table th, .st-table td { white-space:normal; border-bottom:none; background:transparent; }
      .st-table tbody th { padding:8px 0 6px; font-size: 0.875rem; border-bottom:1px solid var(--border-subtle); margin-bottom:4px; }
      .st-table tbody tr:last-child th, .st-table tbody tr:last-child td { border-bottom:none; }
      .st-table tbody tr:last-child th { border-bottom:1px solid var(--border-subtle); }
      .st-table td { display:grid; grid-template-columns:1fr auto; column-gap:12px; align-items:baseline; padding:7px 0; text-align:right; }
      .st-table td::before { content:attr(data-label); grid-row:1 / span 2; grid-column:1; align-self:center; text-align:left; font-size: 0.8125rem; font-weight: 700; text-transform: none; letter-spacing: 0; color:var(--text-secondary); }
      .st-table td > * { grid-column:2; }
      .st-table td.muted { color:var(--text-muted); }
      .st-table tr.cur th, .st-table tr.cur td { background:transparent; }
      .st-table tbody tr.cur { background:var(--accent-glow); }
    }
    .st-hint { font-size: 0.8125rem; color:var(--text-muted); line-height:1.6; margin:12px 0 0; }

    /* Steuertermine: Bundesland, Filter und Kalender-Export */
    .st-select { height:44px; padding:0 12px; border-radius:8px; border:1.5px solid var(--border-subtle); background:var(--bg-surface); color:var(--text-primary); font-family:var(--font-main); font-size: 0.875rem; font-weight:700; cursor:pointer; }
    .st-select:focus { outline:none; border-color:var(--accent); }
    .st-seg-group { display:flex; flex-direction:column; gap:5px; }
    .st-seg-label { font-size: 0.8125rem; font-weight: 700; text-transform: none; letter-spacing: 0; color:var(--text-muted); }
    .st-seg { display:inline-flex; border:1.5px solid var(--border-subtle); border-radius:10px; overflow:hidden; background:var(--bg-surface); }
    .st-seg button { padding:7px 14px; border:none; border-right:1.5px solid var(--border-subtle); background:transparent; color:var(--text-secondary); font-family:var(--font-main); font-size: 0.8125rem; font-weight:700; cursor:pointer; transition:all 0.2s ease; }
    .st-seg button:last-child { border-right:none; }
    .st-seg button:hover { color:var(--accent-text); }
    .st-seg button.active { background:var(--accent); color:var(--on-accent); }
    .st-export { margin-top:28px; padding:20px 22px; border:1.5px solid var(--border-subtle); border-radius:12px; background:var(--accent-glow); }
    .st-export h3 { margin:0 0 6px; font-size: 1rem; }
    .st-export p { font-size: 0.875rem; color:var(--text-secondary); line-height:1.6; margin:0 0 14px; max-width:720px; }
    .st-export-checks { display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:14px; }
    .st-check { display:inline-flex; align-items:center; gap:7px; font-size: 0.875rem; font-weight:700; color:var(--text-primary); cursor:pointer; }
    .st-check input { accent-color:var(--accent); width:16px; height:16px; }
    .st-export-btn { padding:11px 20px; border-radius:999px; border:none; background:var(--accent-orange); color:var(--on-accent); font-family:var(--font-main); font-size: 0.8125rem; font-weight: 700; text-transform: none; letter-spacing: 0; cursor:pointer; transition:all 0.2s ease; }
    .st-export-btn:hover { filter:brightness(0.95); transform:translateY(-1px); }
    .st-export-status { margin-left:12px; font-size: 0.8125rem; font-weight:700; color:var(--success); }
    @media (max-width:600px) { .st-export-status { display:block; margin:10px 0 0; } }

    /* Blog-Übersicht: Autorzeile unter dem Datum */
    .card-author { font-size: 0.8125rem; font-weight:600; color:var(--text-muted); margin:-4px 0 10px; }

/* ==========================================================================
   MUSTER-WIDERRUFSFORMULAR (Auftragsbedingungen)
   ========================================================================== */
.wf-card { margin-top: 14px; padding: 20px 22px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 12px; }
.wf-intro { font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: 14px; }
.wf-req { color: var(--accent-orange); font-weight: 700; }
.wf-adressat { font-size: 0.875rem; line-height: 1.55; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.wf-adressat-label { display: block; font-size: 0.8125rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text-muted); margin-bottom: 2px; }
.wf-adressat a { color: var(--accent-text); text-decoration: underline; }
.wf-who { border: none; padding: 0; margin: 0 0 10px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wf-who legend { float: left; padding: 0; margin-right: 12px; font-size: 0.8125rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text-secondary); line-height: 32px; }
.wf-seg { display: inline-flex; background: var(--bg-surface); border: 1.5px solid var(--border-subtle); border-radius: 999px; padding: 2px; }
.wf-seg label { position: relative; cursor: pointer; }
.wf-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wf-seg span { display: block; padding: 5px 18px; border-radius: 999px; font-size: 0.875rem; font-weight: 700; color: var(--text-secondary); }
.wf-seg input:checked + span { background: var(--accent); color: var(--on-accent); }
.wf-seg input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-glow); }
.wf-lead { font-size: 0.875rem; line-height: 1.55; font-weight: 600; color: var(--text-primary); margin: 0 0 10px 0; }
.wf-field { margin-bottom: 10px; min-width: 0; }
.wf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.wf-field label { display: block; font-size: 0.8125rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text-secondary); margin-bottom: 4px; }
.wf-field input, .wf-field textarea { width: 100%; font-family: var(--font-main); font-size: 0.875rem; color: var(--text-primary); background: var(--bg-surface); border: 1.5px solid var(--border-subtle); border-radius: 8px; padding: 8px 11px; line-height: 1.4; }
.wf-field textarea { resize: vertical; min-height: 56px; }
.wf-field input::placeholder, .wf-field textarea::placeholder { color: var(--text-muted); }
.wf-field input:focus, .wf-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.wf-field .wf-invalid { border-color: var(--accent-orange); box-shadow: 0 0 0 3px var(--accent-orange-glow); }
.wf-error { font-size: 0.8125rem; font-weight: 700; color: var(--accent-orange); margin: 4px 0 0 0; }
.wf-preview { margin: 4px 0 14px 0; }
.wf-preview summary { cursor: pointer; font-size: 0.8125rem; font-weight: 700; color: var(--accent-text); }
.wf-preview pre { margin: 8px 0 0 0; padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 8px; font-family: var(--font-main); font-size: 0.8125rem; line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.wf-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-btn { font-family: var(--font-main); font-size: 0.8125rem; font-weight: 700; padding: 10px 18px; border-radius: 999px; cursor: pointer; background: var(--bg-surface); color: var(--text-primary); border: 1.5px solid var(--border-subtle); }
.wf-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.wf-btn-main { background: var(--accent-orange); border-color: var(--accent-orange); color: var(--on-accent); }
.wf-btn-main:hover { background: var(--accent-orange-hover); border-color: var(--accent-orange-hover); color: var(--white); }
.wf-btn:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 2px; }
.wf-status { font-size: 0.8125rem; font-weight: 700; min-height: 0; margin: 10px 0 0 0; color: var(--text-secondary); }
.wf-status:empty { display: none; }
.wf-status-ok { color: var(--success); }
.wf-status-err { color: var(--accent-orange); }
.wf-note { font-size: 0.8125rem; line-height: 1.55; color: var(--text-muted); margin: 10px 0 0 0; }
@media (max-width: 560px) {
  .wf-card { padding: 16px 14px; }
  .wf-row { grid-template-columns: 1fr; }
  .wf-btn { flex: 1 1 100%; text-align: center; }
}
/* Druck: nur der Widerruf */
.wf-print-area { display: none; }
@media print {
  body.wf-printing { background: var(--white) !important; }
  body.wf-printing > *:not(.wf-print-area) { display: none !important; }
  body.wf-printing .wf-print-area { display: block; color: var(--ink); background: var(--white); font-family: var(--font-main); font-size: 12pt; line-height: 1.6; padding: 10mm 6mm; }
  .wf-print-area h1 { font-size: 20pt; text-transform: none; letter-spacing: 0; margin: 0 0 14mm 0; color: var(--ink); }
  .wf-print-area p { margin: 0 0 4mm 0; color: var(--ink); }
  .wf-print-area .wf-p-label { margin: 0; font-weight: 700; }
  .wf-print-area .wf-p-line { margin: 0; }
  .wf-print-area .wf-p-text { margin-top: 8mm; }
  .wf-print-area .wf-p-sign { display: flex; gap: 14mm; margin-top: 26mm; }
  .wf-print-area .wf-p-sign-line { flex: 2; font-size: 9.5pt; }
  .wf-print-area .wf-p-sign-short { flex: 1; }
  .wf-print-area .wf-p-rule { display: block; border-top: 1px solid var(--ink); margin-bottom: 1.5mm; }
}

/* ==========================================================================
   AUTORENBOX (Blog), TRUST-LABEL, KI-TRANSPARENZ
   ========================================================================== */
.author-box { display: flex; align-items: center; gap: 20px; padding: 24px 28px; }
.content-box.author-box .author-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: top; flex-shrink: 0; border: 3px solid var(--accent-glow); }
.author-body { flex: 1; min-width: 0; }
.author-label { font-size: 0.8125rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--accent-text); margin-bottom: 2px; }
.author-name { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.author-role { font-size: 0.875rem; font-weight: 700; color: var(--text-secondary); margin-top: 2px; }
.content-box.author-box .author-text { font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); margin: 8px 0 10px 0; }
.author-link { font-size: 0.875rem; font-weight: 700; color: var(--accent-text); text-decoration: none; }
.author-link:hover { text-decoration: underline; }
.trust-label { display: block; height: 72px; width: auto; margin: 0 auto 16px auto; }
@media (max-width: 640px) {
  .author-box { flex-wrap: wrap; padding: 20px 18px; }
}
.ki-list { list-style: none; padding: 0; margin: 14px 0 0 0; display: grid; gap: 12px; }
.ki-list li { padding: 14px 16px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent); border-radius: 10px; font-size: 0.9062rem; line-height: 1.6; color: var(--text-secondary); }
.ki-list li strong { display: block; color: var(--text-primary); font-size: 0.9375rem; margin-bottom: 2px; }

/* ==========================================================================
   STADTPROFIL (Zahlen, Quellen) auf den Städteseiten
   ========================================================================== */
.city-profile .cp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 18px 0 14px 0; }
.city-profile .cp-tile { background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 16px; }
.city-profile .cp-num { font-size: 1.75rem; font-weight: 700; color: var(--accent-text); line-height: 1.1; }
.city-profile .cp-label { font-size: 0.8125rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text-secondary); margin-top: 5px; }
.city-profile .cp-note { font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); margin-top: 6px; }
.city-profile .cp-list { display: grid; grid-template-columns: minmax(180px, 28%) 1fr; gap: 0; margin: 14px 0 6px 0; border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; }
.city-profile .cp-list dt, .city-profile .cp-list dd { margin: 0; padding: 11px 14px; border-bottom: 1px solid var(--border-subtle); font-size: 0.875rem; line-height: 1.5; }
.city-profile .cp-list dt { font-weight: 700; color: var(--text-primary); background: var(--bg-subtle); }
.city-profile .cp-list dd { color: var(--text-secondary); }
.city-profile .cp-list dt:last-of-type, .city-profile .cp-list dd:last-of-type { border-bottom: none; }
.city-profile .cp-list-strong dd strong { color: var(--accent-text); font-size: 0.9688rem; }
.city-profile .cp-note-inline { display: block; font-size: 0.8125rem; color: var(--text-muted); margin-top: 3px; }
.city-profile .cp-src { font-size: 0.8125rem; line-height: 1.6; color: var(--text-muted); margin: 16px 0 0 0; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.city-profile .cp-src a { color: var(--text-muted); text-decoration: underline; }
@media (max-width: 640px) {
  .city-profile .cp-list { grid-template-columns: 1fr; }
  .city-profile .cp-list dt { border-bottom: none; padding-bottom: 2px; }
}

/* Brotkrumen auf den Städteseiten */
.breadcrumb { font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 14px 0; }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); text-decoration: underline; }
.breadcrumb span[aria-hidden] { margin: 0 4px; }

/* Vergleichstabellen im Blog */
.cmp-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 560px; }
.cmp-table caption { text-align: left; font-size: 0.8125rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text-secondary); padding: 10px 14px; }
.cmp-table th, .cmp-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.cmp-table thead th { background: var(--bg-subtle); color: var(--text-primary); font-weight: 700; font-size: 0.8125rem; }
.cmp-table tbody th { color: var(--text-primary); font-weight: 700; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table td a { color: var(--accent-text); }

/* ==========================================================================
   LEISTUNGS-MINDMAP und SPEZIALISIERUNGS-DIAGRAMM (Startseite, Übersichten)
   Ohne JavaScript bleibt alles sichtbar, die Animationen sind nur Zusatz.
   ========================================================================== */
.sp-node:focus-visible .sp-circ, .lm-toggle:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 3px; }
.lm { position: relative; display: grid; grid-template-columns: 1fr minmax(240px, 300px) 1fr; gap: 56px; align-items: center; margin: 10px 0 8px 0; }
.lm-col { display: flex; flex-direction: column; gap: 22px; }
.lm-col.l { align-items: flex-end; } .lm-col.r { align-items: flex-start; }
.lm-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.lm-lines path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: .55; transition: opacity .3s; animation: lmDash 14s linear infinite; }
.lm-lines circle { fill: var(--accent); transition: opacity .3s; }
.lm-lines .off { opacity: .08; }
@keyframes lmDash { to { stroke-dashoffset: -220; } }
.lm-card { position: relative; z-index: 1; width: 100%; max-width: 380px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow-sm); transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.4,.64,1), box-shadow .3s, border-color .3s, filter .3s; }
.lm.anim .lm-card { opacity: 0; transform: translateY(24px) scale(.96); }
.lm.anim .lm-card.in { opacity: 1; transform: none; }
.lm-card { cursor: pointer; }
.lm-card.dim { opacity: .32 !important; filter: grayscale(.7); }
.lm-card.sel, .lm-card.sel:hover { border-color: var(--accent); box-shadow: 0 18px 40px var(--accent-glow); }
.lm-card:hover { border-color: var(--accent); box-shadow: 0 18px 40px var(--accent-glow); }
.lm-card .lm-head { display: flex; gap: 14px; align-items: center; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--border-subtle); }
.lm-toggle { border: none; cursor: pointer; padding: 0; font: inherit; }
.lm-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-glow); color: var(--accent-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .3s; }
.lm-ico svg { width: 24px; height: 24px; }
.lm-card:hover .lm-ico { background: var(--accent); color: var(--on-accent); }
.lm-card h3, .lm-card h2 { margin: 0; font-size: 0.9375rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.lm-card h3 a, .lm-card h2 a { text-decoration: none; color: var(--text-primary); } .lm-card h3 a:hover, .lm-card h2 a:hover { color: var(--accent-text); }
.lm-cnt { font-size: 0.7812rem; font-weight: 600; color: var(--accent-text); }
.lm-desc { font-size: 0.8125rem; line-height: 1.55; color: var(--text-secondary); margin: 0 0 12px 0; }
.lm.compact .lm-desc { display: none; }
.lm-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lm-card li a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--bg-subtle); font-size: 0.8438rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: all .2s; }
.lm-card li a:hover { background: var(--accent-glow); color: var(--text-primary); transform: translateX(3px); }
.lm-chk { width: 17px; height: 17px; color: var(--accent-text); flex-shrink: 0; display: flex; }
.lm-chk svg { width: 100%; height: 100%; }
.lm-hub { cursor: pointer; position: relative; z-index: 2; justify-self: center; width: min(300px, 100%); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg, var(--accent), var(--accent-hover)); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--on-accent); box-shadow: 0 20px 50px var(--accent-glow); transition: opacity .6s ease, transform .8s cubic-bezier(.34,1.56,.64,1); }
.lm.anim .lm-hub { opacity: 0; transform: scale(.6); }
.lm.anim .lm-hub.in { opacity: 1; transform: none; }
.lm-hub::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--accent); opacity: .45; animation: lmPulse 3.2s ease-in-out infinite; }
@keyframes lmPulse { 0%, 100% { transform: scale(.97); opacity: .55; } 50% { transform: scale(1.07); opacity: .12; } }
.lm-hub-in { padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lm-hub img { width: 62px; height: 62px; border-radius: 14px; background: var(--white); padding: 7px; }
.lm-hub small { font-size: 0.75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.lm-hub b { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
@media (max-width: 1020px) { .lm { grid-template-columns: 1fr; gap: 26px; } .lm-lines { display: none; } .lm-col.l, .lm-col.r { align-items: center; } .lm-hub { order: -1; width: 220px; } .lm-card { max-width: 560px; } }
/* Detailkarten unter dem Diagramm (Text für Suchmaschinen und zum Lesen) */
.ov-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 36px 0 28px 0; }
.ov-detail { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; }
.ov-detail .werte-card-icon { margin: 0; }
.ov-detail h2 { margin: 0; font-size: 1.1875rem; line-height: 1.25; }
.ov-detail h2 a { color: var(--text-primary); text-decoration: none; } .ov-detail h2 a:hover { color: var(--accent-text); }
.ov-detail p { margin: 0; color: var(--text-secondary); font-size: 0.9062rem; line-height: 1.65; flex: 1; }
.ov-detail .card-arrow { margin-top: 4px; }
@media (max-width: 760px) { .ov-details { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .lm *, .spx * { animation: none !important; transition: none !important; } }

/* ==========================================================================
   APPLE-PASS: Fokus, Berührungsflächen, Bewegung, Typografie, Lesbarkeit
   Grundsätze: Klarheit, Zurückhaltung, Tiefe. Gestaltung dient dem Inhalt.
   ========================================================================== */
/* --- Bereiche, die immer dunkel sind, behalten helle Textfarben --- */
footer, .hr-result-hero { --accent-text: var(--accent); --text-muted: var(--text-muted-on-dark); }
/* --- Tastaturfokus: immer sichtbar, in beiden Modi mit ausreichend Kontrast --- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .sp-node:focus-visible .sp-circ {
  outline: 3px solid var(--accent-text) !important; outline-offset: 3px !important; border-radius: inherit;
}
footer a:focus-visible, footer button:focus-visible { outline-color: var(--accent) !important; }
/* --- Sprunglink --- */
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 10000; background: var(--text-primary); color: var(--bg-surface); padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 0.9375rem; text-decoration: none; transition: top .2s ease; }
.skip-link:focus { top: 16px; }
main:focus { outline: none; }
/* --- Typografie: Satzschreibung, ruhige Gewichte, enge Laufweite bei großen Titeln --- */
h1, .section-title, .content-box h2, .service-card-title, .hero-profile-caption .name { letter-spacing: -0.02em; }
h1 { font-weight: 700; }
.section-title { font-weight: 700; }
.badge { letter-spacing: 0; }
/* --- Lesbarkeit: Zeilenlänge begrenzen --- */
.content-box :is(p, li), .section-subtitle, .faq-answer { max-width: 62ch; }
.content-box[style*="text-align:center"] :is(p, li), .section-subtitle[style*="text-align:center"], .city-profile :is(p, li, dd, dt) { max-width: none; }
.content-box[style*="text-align:center"] p { margin-left: auto; margin-right: auto; }
.cp-list dd, .cp-list dt, .cp-bullets li, .cmp-table td, .cmp-table th { max-width: none; }
/* --- Berührungsflächen: mindestens 44 mal 44 Punkte --- */
.lm-toggle, .kontakt-copy-icon, .reviews-carousel-arrow { min-width: 44px; min-height: 44px; }
.breadcrumb a, .breadcrumb span:last-child { display: inline-block; padding: 12px 2px; }
.breadcrumb { margin-bottom: 4px; }
.service-back-link { display: inline-flex; align-items: center; min-height: 44px; }
.spec-carousel-dot, .reviews-carousel-dot, .carousel-dot { position: relative; }
.spec-carousel-dot::after, .reviews-carousel-dot::after, .carousel-dot::after { content: ""; position: absolute; inset: -18px -8px; }
.hr-slider { height: 44px; margin: 0; }
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; }
.est-check-answer-btn, .hr-add-btn, .st-tab, .st-seg button, .chip, .wf-btn, .blog-filter-pill, .sub-btn, .process-nav-btn-primary, .rechtsform-btn-next { min-height: 44px; }
.lm-card li a { min-height: 44px; }
.author-link, .card-arrow, .kontakt-info-value, .st-next-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (pointer: coarse), (max-width: 760px) {
}
/* --- Bewegung: Wer weniger Bewegung wünscht, bekommt Ruhe --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee-track, .badge-column-track { animation: none !important; transform: none !important; }
  .marquee-container { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .marquee-dup { display: none !important; }
  .vertical-marquee-container, .vertical-marquee-conta { height: auto; overflow: visible; mask-image: none; -webkit-mask-image: none; }
}
/* Endlosbewegung stoppt bei Hover oder Fokus */
.marquee-container:hover .marquee-track, .marquee-container:focus-within .marquee-track { animation-play-state: paused; }
/* --- Nachschliff: Eingabeelemente, Badges, Warnfarben als Text --- */
.cp-src { max-width: 90ch; }
.city-profile .cp-src { max-width: 90ch; }
input[type="range"] { box-sizing: content-box; padding: 19px 0; background-clip: content-box; }
.hr-stepper-btn { width: 44px; height: 44px; }
#optionen-liste .opt-checkbox { width: 22px; height: 22px; }
#optionen-liste label { min-height: 44px; align-items: center; }
.hr-freq-badge.hr-freq-einmalig, .hr-freq-badge.hr-freq-monatlich, .hr-freq-badge.hr-freq-jaehrlich { color: var(--text-primary); }
.st-next-card.soon .st-next-card-cd, .st-table td.soon .cd, .datev-radar-status.red, .sperrgruende-status-blocked, .fristen-ampel-status-red, .wf-error, .wf-status-err, .werte-card-subtitle, .resume-duration-live, .werte-card-tag.tag-orange { color: var(--text-primary); }
.mobile-nav-group > a { box-sizing: border-box; }
.reviews-more-link, .featurable-wrapper a { display: inline-flex; align-items: center; min-height: 44px; }


/* ==========================================================================
   DESIGN-PASS 2: Typografie, Abstände, Radien, Kontrast, Startseite
   Alles hier ist auf <main> begrenzt. Header, Footer und der schwebende
   Termin-Button (außerhalb von <main>) bleiben unverändert.
   Farben unverändert: Navy, Teal, Koralle.
   ========================================================================== */
:root { --on-accent: #FFFFFF; --success-text: #136F49; --warning-text: #8A5200; --radius-card: 16px; --radius-pill: 999px; --space-section: 96px; --space-section-sm: 64px; }
body.dark-theme { --success-text: var(--success); --warning-text: var(--warning); }

/* --- Typografie-Skala: Fließtext 17, Einleitung bis 20, H2 bis 40, Hero bis 56 --- */
main { font-size: 1.0625rem; line-height: 1.6; }
main h1, main h2, main h3, main h4 { line-height: 1.2; }
main h1 { line-height: 1.15; }
main .hero-grid h1 { font-size: clamp(1.875rem, 4.6vw + 0.75rem, 3.5rem); line-height: 1.1; margin-bottom: 20px; }
main .section-title { font-size: clamp(1.75rem, 3.2vw + 0.5rem, 2.5rem); line-height: 1.15; margin-bottom: 16px; }
main .section-subtitle { font-size: clamp(1.0625rem, 0.6vw + 1rem, 1.25rem); line-height: 1.55; }
main .content-box h3 { font-size: 1.375rem; }

/* --- Zeilenlänge: Texte in Boxen und FAQ nutzen die volle Breite (Trennlinie und Text enden nicht mehr mittendrin) --- */
main .section-subtitle { max-width: 75ch; }
main .content-box :is(p, li), main .faq-answer { max-width: none; }

/* --- Buttons im Inhalt: größer und einheitlich rund (Header-Buttons bleiben) --- */
main .btn-qualify, main .btn-secondary { font-size: 1rem; min-height: 48px; padding: 12px 28px; border-radius: var(--radius-pill); align-items: center; justify-content: center; }

/* --- Rundungen: Karten 16 px, Buttons Pillen --- */
main .content-box, main .werte-card, main .card, main .review-card, main .hr-detail-card, main .datev-radar-card, main .kassen-rechner-card, main .process-stepper-card { border-radius: var(--radius-card); }

/* --- Abstände im 8er-Raster --- */
@media (min-width: 861px) { main .content-box { padding: 40px; margin-bottom: 32px; } }

/* --- Versalien auch dort entfernen, wo sie inline im HTML stehen --- */
main [style*="text-transform: uppercase"], main [style*="text-transform:uppercase"] { text-transform: none !important; letter-spacing: 0 !important; }

/* --- Kontrast: Statusfarben als Text brauchen auf Hell mindestens 4,5:1; Koralle nie als Fließtext --- */
main .datev-radar-status.amber, main .fristen-ampel-status-amber, main .freibetrag-status-amber { color: var(--warning-text); }
main .datev-radar-status.green, main .sperrgruende-status-open, main .fristen-ampel-status-green, main .freibetrag-status-green, main .st-export-status, main .wf-status-ok { color: var(--success-text); }
main .wf-req, main .hr-anlage-remove:hover, main .kontakt-feature-card.feature-orange .kontakt-feature-icon { color: var(--text-primary); }

/* ==========================================================================
   STARTSEITE
   ========================================================================== */
.home-section { margin-top: var(--space-section-sm); }
@media (min-width: 861px) { .home-section { margin-top: var(--space-section); } }
.home-section > .section-title { text-align: left; }
.home-section > .section-subtitle { margin: 0 0 40px; max-width: 75ch; }

/* Hero: ein Satz als Einleitung, darunter drei kurze Aussagen */
.hero-lead { font-size: clamp(1.25rem, 1.2vw + 1rem, 1.5rem); line-height: 1.4; font-weight: 600; color: var(--text-primary); margin: 0 0 20px; max-width: 32ch; }
.hero-points { margin: 0 0 32px; max-width: 54ch; }
.hero-points li { max-width: none; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* Fallstudie: Text links, drei Kennzahlen rechts statt leerem Platzhalter */
main .case-study-grid.case-study-grid--stats { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: start; }
.case-stats { display: grid; gap: 16px; margin: 0; }
.case-stat { background: var(--bg-subtle); border-radius: var(--radius-card); padding: 24px; }
.case-stat dt { font-size: clamp(1.75rem, 2.4vw + 0.75rem, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-primary); }
.case-stat dd { margin: 8px 0 0; color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 860px) { main .case-study-grid.case-study-grid--stats { grid-template-columns: 1fr; gap: 32px; } }

/* Bewertungen: linksbündig wie alle anderen Abschnitte */
.featurable-wrapper { margin: var(--space-section-sm) 0 0; }
@media (min-width: 861px) { .featurable-wrapper { margin-top: var(--space-section); } }
.featurable-head { margin-bottom: 24px; }
.featurable-head .section-title { margin-bottom: 8px; }
main .featurable-subtext { text-align: left; letter-spacing: 0; font-size: 0.875rem; margin-top: 0; }
.reviews-more { margin-top: 16px; }
.reviews-more a { font-size: 0.9375rem; font-weight: 700; color: var(--text-secondary); text-decoration: underline; }

/* Kanzleiwechsel: in einer Box, Punkte mittig über den Überschriften, Punkt 4 koralle und pulsierend wie zuvor */
main .journey-content h3 { font-size: 1.25rem; margin-bottom: 8px; }
main .journey-content p { font-size: 1rem; }
main .content-box .journey-wrap { margin-bottom: 0; }

/* Abschluss-Aufruf: leicht getönte Fläche aus dem vorhandenen Teal */
.home-cta { margin-top: var(--space-section-sm); text-align: center; background: var(--bg-surface); background: color-mix(in srgb, var(--accent) 7%, var(--bg-surface)); }
@media (min-width: 861px) { .home-cta { margin-top: var(--space-section); } }
.home-cta h2 { font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem); margin: 0 0 12px; }
.home-cta p { margin: 0 auto 28px; }
.home-cta .hero-actions { justify-content: center; }
@media (max-width: 860px) { main .btn-cta-inline { display: inline-flex; } }

/* Mitgliedschaften: Laufband wie zuvor, nur der Rahmen ist jetzt eine Box */
main .badges-carousel-section { margin: var(--space-section-sm) 0 0; padding: 40px 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); }
main .badges-carousel-header { padding: 0 24px; }
main .badges-carousel-header :is(h2, h3) { font-size: 1.125rem; }
main .badges-carousel-header p { font-size: 0.9375rem; }

/* --- Dein helles Türkis auch für Akzenttext im Inhalt (Header und Footer sind davon nicht betroffen) --- */
main { --accent-text: var(--accent); }

/* --- Buttons im Inhalt: weiße Schrift, etwas schlanker --- */
main .btn-qualify, main .btn-secondary { font-size: 0.9375rem; font-weight: 700; }


/* Buttons im Inhalt: normale Schreibung (der Header-Button bleibt wie im Original) */
main .btn-qualify, main .btn-secondary { text-transform: none; letter-spacing: 0; }

/* --- Kein Überlauf auf schmalen Bildschirmen: lange Wörter umbrechen, Spalten dürfen schrumpfen --- */
main { overflow-wrap: break-word; }
main h1, main h2 { overflow-wrap: anywhere; min-width: 0; }
main h3 { overflow-wrap: break-word; min-width: 0; }
@media (max-width: 640px) { main h2, main h3 { hyphens: auto; } }
main .rechtsform-layout > *, main .gruendung-layout > *, main .spec-text-image-grid > *, main .hero-grid > * { min-width: 0; }

/* Kartentitel neben Icon: so groß, dass lange Wörter wie „Zusammenarbeit“ auch auf dem Handy in die Zeile passen */
main .kontakt-feature-card h2, main .kontakt-feature-card h3 { font-size: clamp(1.0625rem, 4.6vw, 1.375rem); line-height: 1.25; }

/* ==========================================================================
   STARTSEITE: Vollbild-Start, Header gleitet beim Scrollen ein
   Gilt nur dort, wo <body data-hero="intro"> gesetzt ist.
   ========================================================================== */
body[data-hero="intro"] header {
  position: fixed; top: 16px; left: 0; right: 0;
  transform: translateY(-160%); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.45s;
}
body[data-hero="intro"] header.is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }

.revolution-hero { min-height: 85vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 0 32px; position: relative; }
.revolution-hero .badge { margin-bottom: 12px; }
.revolution-title { font-size: clamp(1.75rem, 8.2vw, 6.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin: 12px 0; color: var(--text-primary); }
.revolution-subtitle { font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 600; line-height: 1.3; color: var(--text-secondary); margin: 0 0 20px; }
/* Unterzeile als Teil der H1 (Suchbegriff in der Hauptüberschrift), sieht aus wie .revolution-subtitle */
.revolution-title:has(.revolution-h1-sub) { margin-bottom: 20px; }
.revolution-h1-sub { display: block; margin-top: 12px; font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--text-secondary); }
.revolution-desc { max-width: 720px; font-size: 1.0625rem; line-height: 1.6; color: var(--text-secondary); margin: 0 auto 32px; }
.revolution-cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
.revolution-card-preview { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 24px 32px; max-width: 860px; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; box-shadow: var(--shadow-md); }
.rev-owner { display: flex; align-items: center; gap: 20px; min-width: 0; }
.rev-photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; flex-shrink: 0; border: 2px solid var(--border-accent); background: var(--bg-subtle); }
.rev-role { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--accent-text); }
.rev-name { display: block; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 2px 0 8px; }
.rev-quote { font-size: 0.9375rem; line-height: 1.5; font-style: italic; color: var(--text-secondary); margin: 0; }
.rev-preview-stats { display: flex; gap: 16px; flex-shrink: 0; }
.rev-stat-box { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 18px; text-align: center; }
.rev-stat-num { display: block; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.rev-stat-stars { font-size: 0.875rem; color: var(--warning); white-space: nowrap; }
.rev-stat-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
@media (max-width: 768px) {
  .revolution-card-preview { flex-direction: column; text-align: center; padding: 20px; }
  .rev-owner { flex-direction: column; gap: 14px; }
  .rev-preview-stats { width: 100%; justify-content: center; }
}


/* Mindmap: kleine Symbole vor den einzelnen Leistungen entfallen, das Bereichs-Symbol im Kopf bleibt */
.lm-card li a .lm-chk { display: none; }
.lm-card li a { padding-left: 14px; padding-right: 14px; }

/* ==========================================================================
   SPEZIALISIERUNGSSEITEN: größere Schrift und mehr Luft
   Gilt für Apotheken, E-Commerce, Mittelstand, Berater für Berater und Problemfälle
   ========================================================================== */
/* Kopfbereich: Überschrift und Intro-Text */
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .container > div:first-child { margin-bottom: 24px !important; }
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .section-title { font-size: clamp(2rem, 3.6vw + 0.6rem, 3rem); }
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .section-subtitle { font-size: clamp(1.125rem, 0.8vw + 1rem, 1.375rem); line-height: 1.65; margin-bottom: 56px; }

/* Abschnitte: mehr Abstand zwischen den Boxen */
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .content-box { margin-bottom: 48px; }
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .rechtsform-layout { margin-bottom: 48px; }
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .rechtsform-layout > .content-box { margin-bottom: 0; }

/* Zwischenüberschriften */
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .spec-text-image-grid h2 { font-size: clamp(1.5rem, 1.4vw + 1rem, 1.9375rem); line-height: 1.3; margin-bottom: 28px; }
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .content-box > h3,
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .content-box h2.h3-style { font-size: clamp(1.5rem, 1vw + 1.1rem, 1.75rem); margin-bottom: 24px; }

/* Fließtexte und Listen */
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .content-box > p,
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .spec-text-image-grid p:not(.spec-feature-caption) { font-size: 1.125rem; line-height: 1.8; margin-bottom: 22px; }
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .clean-list li { font-size: 1.0625rem; line-height: 1.75; margin-bottom: 20px; }
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .faq-answer { font-size: 1.0625rem; line-height: 1.75; }

/* Text und Bild der Apothekerin: mehr Abstand nebeneinander und untereinander */
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .spec-text-image-grid { gap: 56px; margin-bottom: 0; }
:is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .spec-feature-caption { font-size: 0.9375rem; margin-top: 12px; margin-bottom: 0; }

@media (max-width: 860px) {
  :is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .spec-text-image-grid { gap: 32px; }
  :is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .section-subtitle { margin-bottom: 40px; }
  :is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .content-box, :is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .rechtsform-layout { margin-bottom: 32px; }
  :is(#spec-apotheken, #spec-ecommerce, #spec-unternehmer, #spec-berater, #spec-problemfaelle) .rechtsform-layout > .content-box { margin-bottom: 0; }
}

/* ==========================================================================
   Links im Fließtext (Glossar- und Quellenverweise): dezent statt türkis
   Gleiche Größe wie der umgebende Text, leicht kräftiger, feine Unterstreichung.
   Beim Überfahren wird nur die Linie türkis, die Schrift bleibt gleich.
   ========================================================================== */
main :is(p, li) .author-link {
  display: inline;
  min-height: 0;
  font-size: inherit;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 183, 179, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
main :is(p, li) .author-link:hover,
main :is(p, li) .author-link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* ==========================================================================
   Abstand unter Zwischenüberschriften (H2 ohne eigene Klasse) im Textkasten
   Vorher klebte der erste Absatz direkt an der Überschrift.
   :where() hält die Spezifität bei null, damit eigene Regeln (Blog, Glossar,
   Apotheken, AAB, H3-Stil) weiterhin Vorrang haben.
   ========================================================================== */
:where(main .content-box) :where(h2:not([class]):has(+ p, + ul, + ol)) { margin-bottom: 24px; }

/* Kopfzeile mit Symbol und H1 (Inline-Abstand 8px): etwas mehr Luft zum Untertitel, auf allen Seiten einheitlich */
main .container > div[style*="margin-bottom:8px"]:has(> h1) { margin-bottom: 20px !important; }

/* Einfache Aufzählungen im Textkasten (ohne eigene Klasse, z. B. Glossar und Blog):
   Der globale Reset entfernt den Listeneinzug, die Punkte hingen dadurch links über den Textrand hinaus.
   Mit Einzug stehen die Punkte bündig mit dem Absatz darüber, der Text ist eingerückt. */
:where(main .content-box) :where(ul:not([class])) { padding-left: 1.25em; }
:where(main .content-box) :where(ol:not([class])) { padding-left: 1.6em; }
:where(main .content-box) :where(ul:not([class]), ol:not([class])) > li { margin-bottom: 8px; }

/* ==========================================================================
   STEUERTERMINE: ruhigere Karten, klarere Tabelle
   ========================================================================== */
/* Karten "Nächste Fristen": weiße Karte mit farbiger Kante statt vollflächig eingefärbt */
.st-next-card { position: relative; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px 16px 14px 20px; gap: 6px; box-shadow: var(--shadow-sm); overflow: hidden; }
.st-next-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.st-next-card.soon { border-color: var(--border-subtle); background: var(--bg-surface); }
.st-next-card.soon::before { background: var(--accent-orange); }
.st-next-card-title { order: 1; font-size: 0.8125rem; color: var(--text-secondary); }
.st-next-card-date { order: 2; font-size: 1.125rem; color: var(--text-primary); letter-spacing: -0.01em; }
.st-next-card-cd { order: 3; align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--accent-glow); font-size: 0.75rem; }
.st-next-card.soon .st-next-card-cd { background: var(--accent-orange-glow); }
.st-next-card-meta { order: 4; }

/* Tabelle: Countdown als kleines Etikett, Vergangenes zurückgenommen, aktuelle Zeile mit Kante */
.st-table tbody tr { transition: background-color .15s ease; }
.st-table tbody tr:hover th, .st-table tbody tr:hover td { background: var(--bg-subtle); }
.st-table tr.cur th, .st-table tr.cur td, .st-table tr.cur:hover th, .st-table tr.cur:hover td { background: var(--accent-glow); }
.st-table tr.cur th { box-shadow: inset 4px 0 0 var(--accent); }
.st-table .cd { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--accent-glow); font-size: 0.75rem; }
.st-table td.soon .cd { background: var(--accent-orange-glow); }
.st-table td.soon .dt { color: var(--text-primary); }
.st-table tbody tr:not(.cur):not(:has(td:not(.past):not(.muted))) { opacity: .55; }
.st-table td.past .dt { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
@media (max-width: 600px) {
  .st-table tr.cur th { box-shadow: none; }
  .st-table .cd { margin-top: 2px; }
}
.st-table td.soon .cd { background: color-mix(in srgb, var(--accent-orange) 16%, var(--bg-surface)); }
@media (max-width: 600px) {
  /* Auf dem Handy erledigte Monate ausblenden, solange es noch offene gibt */
  .st-table:has(td:not(.past):not(.muted)) tbody tr:not(.cur):not(:has(td:not(.past):not(.muted))) { display: none; }
}
@media (max-width: 600px) {
  .st-table tr.cur th, .st-table tr.cur td, .st-table tr.cur:hover th, .st-table tr.cur:hover td,
  .st-table tbody tr:hover th, .st-table tbody tr:hover td { background: transparent; }
}

/* ==========================================================================
   Verweis-Kästen (Mehr dazu im Blog / Passende Leistung / Passende Spezialisierung)
   Die Kästen sind im HTML inline gestylt (gerade linke Kante). Hier rundum
   abgerundet, mit feinem Rahmen, Pfeil im Kreis und leichtem Anheben beim Überfahren.
   ========================================================================== */
main a[style*="border-left:3px solid var(--accent)"][style*="border-radius:0 10px 10px 0"] {
  border-left: 1px solid color-mix(in srgb, var(--accent) 28%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 14px !important;
  padding: 16px 16px 16px 20px !important;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-surface)) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
main a[style*="border-left:3px solid var(--accent)"][style*="border-radius:0 10px 10px 0"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent) !important;
}
main a[style*="border-left:3px solid var(--accent)"][style*="border-radius:0 10px 10px 0"] > svg {
  box-sizing: content-box; width: 16px !important; height: 16px !important; padding: 8px;
  border-radius: 50%; background: var(--bg-surface); box-shadow: var(--shadow-sm);
  transition: transform .2s ease;
}
main a[style*="border-left:3px solid var(--accent)"][style*="border-radius:0 10px 10px 0"]:hover > svg { transform: translateX(3px); }

/* ==========================================================================
   HONORARRECHNER: Ergebniskarte
   Höhe wird per Skript an Schritt 1 angeglichen (alignResultColumn), der Inhalt
   verteilt sich dann gleichmäßig, der PDF-Button sitzt unten bündig.
   ========================================================================== */
.hr-sticky { container-type: inline-size; }
.hr-result-hero { display: flex; flex-direction: column; }
.hr-result-hero .inner { flex: 1; display: flex; flex-direction: column; }
.hr-result-bottom { margin-top: auto; }
.hr-cost-box { padding: 12px 12px; gap: 6px; }
.hr-cost-val { white-space: nowrap; font-size: 1.0625rem; letter-spacing: -0.01em; }
/* Schmale Spalte: Beträge als Zeilen statt drei zu enger Kästen */
@container (max-width: 470px) {
  .hr-result-costs { grid-template-columns: 1fr; gap: 8px; }
  .hr-cost-box { flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 14px; }
  .hr-cost-val { font-size: 1.125rem; }
}
.hr-verified-row { margin-top: auto; margin-bottom: 14px; }
.hr-result-bottom { margin-top: 0; }

/* ==========================================================================
   BLOG-ÜBERSICHT: Kacheln reihenweise ausgerichtet (Subgrid)
   Kategorie, Autor, Überschrift, Teaser und Link liegen in allen Kacheln einer
   Reihe auf denselben Linien, egal wie lang die Überschrift ist.
   ========================================================================== */
#blogGrid > .spec-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; justify-content: normal; padding: 30px 28px 26px; }
#blogGrid > .spec-card > div:first-child { display: contents; }
#blogGrid > .spec-card .card-num { margin-bottom: 8px; align-self: start; }
#blogGrid > .spec-card .card-author { margin: 0 0 14px; align-self: start; }
#blogGrid > .spec-card h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 12px; align-self: start; }
#blogGrid > .spec-card p { margin: 0; align-self: start; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
#blogGrid > .spec-card .card-arrow { align-self: end; margin-top: 18px; }
/* Honorarrechner: Stundensätze eingerückt als kleine Preisliste mit Trennlinien */
.hr-stundensatz-liste { margin: 10px 0 0 14px; padding: 4px 0 0 14px; gap: 0; border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.hr-stundensatz-row { padding: 6px 0; border-bottom: 1px dashed var(--border-subtle); }
.hr-stundensatz-row:last-child { border-bottom: none; }

/* ==========================================================================
   PROFILSEITE SIDNEY NIK: beschriftete Reiter statt Symbolleiste
   Die obere Leiste (bisher nur mobil) ist jetzt überall sichtbar und zeigt
   Symbol und Text; die seitliche Symbolleiste entfällt.
   ========================================================================== */
.resume-nav-rail:not(.resume-nav-rail-top) { display: none !important; }
.resume-nav-rail-top { display: flex !important; flex-direction: row; flex-wrap: wrap; gap: 8px; width: auto; margin: 0 0 16px; justify-content: flex-start; }
.resume-nav-rail-top .resume-nav-item { width: auto; height: auto; min-height: 44px; padding: 0 18px 0 14px; gap: 8px; border-radius: 999px; box-shadow: none; }
.resume-nav-rail-top .resume-nav-item span { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0; color: inherit; font-size: 0.875rem; pointer-events: auto; }
.resume-nav-rail-top .resume-nav-item:hover span { right: auto; top: auto; }
.resume-nav-rail-top .resume-nav-item.active { box-shadow: 0 4px 14px var(--accent-glow); }
.resume-profile-quote { margin-top: 6px; }
@media (min-width: 901px) {
  .resume-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .resume-wrap > .resume-profile { grid-column: 1; grid-row: 1 / span 2; }
  .resume-wrap > .resume-nav-rail-top { grid-column: 2; grid-row: 1; }
  .resume-wrap > .resume-panel { grid-column: 2; grid-row: 2; }
}
@media (max-width: 520px) {
  .resume-nav-rail-top { justify-content: center; }
  .resume-nav-rail-top .resume-nav-item { padding: 0 14px 0 12px; }
}

/* Steuervergleich (Mittelstand u. a.): unter dem Regler nur den aktuellen Wert zeigen */
.steuervergleich-slider-row > span:not(.steuervergleich-slider-val) { display: none; }
.steuervergleich-slider-row { justify-content: center; }
.steuervergleich-slider-val { font-size: 1rem; }

/* Header: Fläche in Seitenfarbe hinter der schwebenden Leiste, damit beim Scrollen
   kein Inhalt durch den Spalt oberhalb und neben der Leiste scheint. Unten weich auslaufend. */
header::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -16px;
  height: calc(100% + 16px + 14px);
  background: linear-gradient(to bottom, var(--bg-base) 0, var(--bg-base) calc(100% - 14px), transparent 100%);
  z-index: 0;
  pointer-events: none;
}

/* Überschriften und Untertitel: Zeilen gleichmäßig verteilen statt einer langen und einer kurzen Zeile */
main :is(h1, h2, h3, .section-subtitle) { text-wrap: balance; }
/* Unterzeilen sind meist zwei, drei Sätze: normal umbrechen statt ausgleichen, nur kein einzelnes Wort am Ende */
main .section-subtitle { text-wrap: pretty; }
main .content-box p, main .content-box li { text-wrap: pretty; }
@media (min-width: 901px) { .resume-wrap > .resume-nav-rail-top { margin-bottom: 0; } .resume-wrap { row-gap: 16px; } }

/* "Passt das zu Dir?" (Mittelstand): ruhige, gleichartige Karten statt farbiger Vollflächen */
.fit-grid { margin-top: 4px; gap: 16px; }
.fit-card { background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 20px 22px; }
.fit-card-title { font-weight: 700; color: var(--text-primary); margin: 0 0 12px; }
.fit-list { list-style: none; margin: 0; padding: 0; }
.fit-list li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.6; }
.fit-list li:last-child { margin-bottom: 0; }
.fit-list li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 12px; }
.fit-card-yes .fit-list li::before { background-color: var(--accent-glow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B7B3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.fit-card-no .fit-list li::before { background-color: color-mix(in srgb, var(--text-muted) 16%, transparent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a949c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E"); }
.content-box .fit-card .fit-card-title { color: var(--text-primary); }

/* Info-Kästen (hr-hint): Abstand zu allem, was danach folgt (Überschrift, Absatz, Liste) */
main .hr-hint + :is(h2, h3, h4, p, ul, ol, .h3-style) { margin-top: 28px; }
.clean-list ul[style*="list-style:circle"] { list-style: none; }

/* Startseite: Nutzenversprechen und Kurzporträt */
.home-why { margin-top: 22px; }
.home-about { display: flex; gap: 32px; align-items: center; }
.home-about-img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 4px solid var(--accent-glow); }
.home-about h2 { margin: 0 0 12px; }
@media (max-width: 640px) {
  .home-about { flex-direction: column; text-align: center; gap: 18px; }
  .home-about-img { width: 120px; height: 120px; }
}

/* Handy: Spalten dürfen schmaler werden als ihr längstes Wort, lange Wörter brechen um */
.grid-2 > *, .grid-3 > * { min-width: 0; }
.kontakt-feature-card h3, .kontakt-feature-card p { overflow-wrap: break-word; hyphens: auto; }
main .blog-filter-pill { white-space: normal; max-width: 100%; }
.hr-hint > div, .hr-hint > p { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
/* Karten mit Symbol: Überschrift exakt mittig zum Symbol (ohne Außenabstand) */
main .kontakt-feature-row > :is(h2, h3, h4) { margin: 0; }

/* Glossar-Suche */
.gl-search { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 24px 0 0; }
.gl-search .blog-search-wrap { flex: 1 1 360px; max-width: 520px; }
.gl-search-status { font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); }
.gl-no-results { margin: 28px 0 0; color: var(--text-secondary); }
#glossarAz .blog-filter-pill.is-empty { opacity: .35; pointer-events: none; }

/* Seitenleisten-Widgets der Leistungsseiten (widgets.js) */
.wg-card h3 { margin: 0 0 6px; }
.wg-input { width: 100%; padding: 10px 12px; margin: 0 0 14px; border: 1.5px solid var(--border-subtle); border-radius: 10px; background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-main); font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.wg-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
select.wg-input { cursor: pointer; font-weight: 600; }
.wg-seg { display: flex; border: 1.5px solid var(--border-subtle); border-radius: 10px; overflow: hidden; margin: 0 0 4px; }
.wg-seg-btn { flex: 1; padding: 9px 8px; border: none; background: var(--bg-surface); color: var(--text-secondary); font-family: var(--font-main); font-size: 0.8125rem; font-weight: 700; cursor: pointer; min-height: 44px; }
.wg-seg-btn + .wg-seg-btn { border-left: 1.5px solid var(--border-subtle); }
.wg-seg-btn.active { background: var(--accent); color: var(--on-accent); }
.wg-card .kassen-rechner-stat-val { white-space: normal; text-align: right; }
.kassen-rechner-stat.wg-ok { background: color-mix(in srgb, var(--success, #22a06b) 14%, var(--bg-surface)); }
.kassen-rechner-stat.wg-ok .kassen-rechner-stat-val { color: var(--success-text, #157a50); }
.kassen-rechner-stat.wg-warn { background: color-mix(in srgb, #f5a524 18%, var(--bg-surface)); }
.kassen-rechner-stat.wg-warn .kassen-rechner-stat-val { color: #a8650a; }
.kassen-rechner-stat.wg-bad { background: var(--accent-orange-glow); }
.kassen-rechner-stat.wg-bad .kassen-rechner-stat-val { color: var(--accent-orange); }

/* Terminseite: Preishinweis direkt unter dem Untertitel */
main .termin-preise { margin: -24px 0 32px; font-size: 0.9375rem; color: var(--text-muted, #5b6770); }

/* ==========================================================================
   Spezialisierungen auf der Startseite: vier Kacheln in Türkis,
   Zusatzkompetenz Problemfälle als eigene Kachel in Koralle
   ========================================================================== */
.spx { --spx-gap: 16px; display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr); gap: 20px; align-items: stretch; max-width: 1080px; margin: 28px auto 0 auto; }
.spx-group { --spx-c: var(--accent); --spx-ct: var(--accent-text); --spx-glow: rgba(0, 183, 179, 0.14); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.spx-group--extra { --spx-c: var(--accent-orange); --spx-ct: #C24545; --spx-glow: rgba(255, 107, 107, 0.16); }
body.dark-theme .spx-group--extra { --spx-ct: var(--accent-orange); }
.spx-label { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--spx-ct); }
.spx-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; background: color-mix(in srgb, var(--spx-c) 16%, transparent); color: var(--spx-ct); font-size: 0.8125rem; letter-spacing: 0; }
.spx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spx-gap); flex: 1; }
.spx-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px 24px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); color: var(--text-primary); text-decoration: none; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, opacity .6s; }
.spx-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), var(--spx-glow), transparent 65%); opacity: 0; transition: opacity .35s; }
.spx-tile::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--spx-c), transparent); opacity: .8; }
.spx-tile:hover, .spx-tile:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--spx-c) 45%, transparent); }
.spx-tile:hover::before, .spx-tile:focus-visible::before { opacity: 1; }
.spx-num { position: absolute; top: 20px; right: 22px; font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; color: var(--text-muted); }
.spx-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--spx-c) 14%, transparent); color: var(--spx-ct); }
.spx-ico svg { width: 22px; height: 22px; }
.spx-tile h3 { margin: 4px 0 0 0; font-size: 1.0625rem; line-height: 1.3; color: var(--text-primary); }
.spx-tile p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); flex: 1; }
.spx-more { font-size: 0.8125rem; font-weight: 700; color: var(--spx-ct); }
.spx-more span { display: inline-block; transition: transform .3s; }
.spx-tile:hover .spx-more span, .spx-tile:focus-visible .spx-more span { transform: translateX(4px); }
.spx-tile--extra { flex: 1; padding: 28px; background: linear-gradient(165deg, color-mix(in srgb, var(--accent-orange) 12%, var(--bg-card)) 0%, var(--bg-card) 62%); border-color: color-mix(in srgb, var(--accent-orange) 35%, transparent); }
.spx-tile--extra h3 { font-size: 1.375rem; }
.spx-kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--spx-ct); }
.spx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px 0; padding: 0; list-style: none; }
.spx-tags li { margin: 0; padding: 5px 11px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); background: color-mix(in srgb, var(--accent-orange) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-orange) 25%, transparent); }
.spx-plus { display: flex; align-items: center; justify-content: center; padding-top: 36px; }
.spx-plus span { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px dashed var(--border-subtle); background: var(--bg-card); color: var(--text-secondary); font-size: 1.5rem; font-weight: 400; line-height: 1; }
/* Einblenden beim Scrollen (nur mit JavaScript, siehe uebersicht.js) */
.spx.anim .spx-tile, .spx.anim .spx-plus { opacity: 0; transform: translateY(18px); }
.spx.anim .spx-tile.in, .spx.anim .spx-plus.in { opacity: 1; transform: none; transition-delay: var(--d, 0s); }
.spx.anim .spx-tile.in:hover, .spx.anim .spx-tile.in:focus-visible { transform: translateY(-4px); transition-delay: 0s; }
@media (max-width: 960px) {
  .spx { grid-template-columns: 1fr; gap: 14px; }
  .spx-plus { padding-top: 0; }
}
@media (max-width: 560px) {
  .spx-grid { grid-template-columns: 1fr; }
  .spx-tile { padding: 20px; }
}

/* Prozess-Stepper in breiter Inhaltsspalte: Schritte nebeneinander (z. B. Steuerberater wechseln) */
@media (min-width: 640px) {
  .process-stepper-card--wide { padding: 28px; }
  .process-stepper-card--wide .process-stepper { flex-direction: row; align-items: flex-start; margin: 14px 0 22px; }
  .process-stepper-card--wide .process-step { flex-direction: column; align-items: center; gap: 8px; width: auto; flex: 0 0 auto; padding: 0; text-align: center; }
  .process-stepper-card--wide .process-step-dot { width: 34px; height: 34px; font-size: 0.875rem; }
  .process-stepper-card--wide .process-step-label { text-align: center; }
  .process-stepper-card--wide .process-step-line { flex: 1; width: auto; height: 2px; margin: 16px 6px 0 6px; }
}


/* ==========================================================================
   Nachfolge-Kompass (/unternehmensnachfolge): Auswahl als Segment-Buttons,
   Ergebnis als Kacheln und Zeitstrahl, Stil wie die Spezialisierungs-Kacheln (.spx)
   ========================================================================== */
.nk-head { margin-bottom: 22px; }
.nk-kicker { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; }
.nk-head h2 { margin: 0 0 8px 0; }
.nk-head p { margin: 0; color: var(--text-secondary); max-width: 720px; }
.nk-controls { display: none; gap: 18px; padding: 20px; border-radius: 18px; background: var(--bg-subtle, var(--bg-surface)); border: 1px solid var(--border-subtle); margin-bottom: 22px; }
.nk--js .nk-controls { display: grid; }
.nk-label { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.nk-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.nk-opt { font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-card); color: var(--text-secondary); transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
.nk-opt:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text-primary); }
.nk-opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #1A262F); box-shadow: 0 8px 20px -10px rgba(0, 183, 179, 0.6); }
.nk-check { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.nk-check input { width: 18px; height: 18px; accent-color: var(--accent-orange); }
.nk-horizon { padding: 14px 18px; border-radius: 14px; border-left: 3px solid var(--accent); background: var(--accent-glow); font-size: 0.9062rem; line-height: 1.6; color: var(--text-primary); margin-bottom: 18px; }
.nk-path + .nk-path { margin-top: 32px; }
.nk--js .nk-path + .nk-path { margin-top: 0; }
.nk-path-title { font-size: 1.125rem; margin: 0 0 14px 0; }
.nk-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nk-card, .nk-pension { position: relative; overflow: hidden; padding: 20px 20px 18px 20px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.nk-card::after, .nk-pension::after { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .8; }
.nk-card h4, .nk-pension h4 { margin: 8px 0 6px 0; font-size: 1rem; line-height: 1.35; color: var(--text-primary); }
.nk-card p, .nk-pension p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); }
.nk-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.7188rem; font-weight: 700; letter-spacing: .02em; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.nk-plan-title { margin: 26px 0 12px 0; font-size: 1rem; }
.nk-steps { list-style: none; margin: 0; padding: 0 0 0 4px; counter-reset: nk; }
.nk-steps li { position: relative; counter-increment: nk; padding: 0 0 18px 44px; font-size: 0.9062rem; line-height: 1.6; color: var(--text-secondary); }
.nk-steps li::before { content: counter(nk); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; color: var(--accent-text); background: var(--bg-card); border: 2px solid var(--accent); }
.nk-steps li::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 15%, transparent)); }
.nk-steps li:last-child { padding-bottom: 0; } .nk-steps li:last-child::after { display: none; }
.nk-steps strong { display: block; color: var(--text-primary); }
.nk-when { display: inline-block; margin-bottom: 2px; font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.nk-when:empty { display: none; }
.nk-pension { margin-top: 24px; background: linear-gradient(165deg, color-mix(in srgb, var(--accent-orange) 12%, var(--bg-card)) 0%, var(--bg-card) 62%); border-color: color-mix(in srgb, var(--accent-orange) 35%, transparent); }
.nk-pension::after { background: linear-gradient(90deg, var(--accent-orange), transparent); }
.nk-tag--warn { color: #C24545; background: color-mix(in srgb, var(--accent-orange) 14%, transparent); }
body.dark-theme .nk-tag--warn { color: var(--accent-orange); }
.nk-fade { animation: nkFade .45s ease; }
@keyframes nkFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .nk-cards { grid-template-columns: 1fr; }
  .nk-controls { padding: 16px; }
  .nk-opt { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .nk-fade { animation: none; } .nk-opt { transition: none; } }
.nk:not(.nk--js) .nk-horizon { display: none; }
/* ==========================================================================
   Berater für Berater: 3-Stufen-Ansatz als verbundene Karten
   ========================================================================== */
.bfb-head { margin-bottom: 22px; }
.bfb-head p { margin: 6px 0 0 0; color: var(--text-secondary); }
.bfb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.bfb-card { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 22px 22px 20px 22px; border-radius: 20px; background: linear-gradient(170deg, color-mix(in srgb, var(--accent) calc(4% + var(--i) * 4%), var(--bg-card)) 0%, var(--bg-card) 65%); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, opacity .6s; }
.bfb-card::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--accent), var(--accent-orange)); opacity: .75; }
.bfb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* Verbindungspfeil zur nächsten Stufe */
.bfb-card:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -24px; width: 20px; height: 20px; background: no-repeat center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B7B3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.bfb-top { display: flex; align-items: center; justify-content: space-between; }
.bfb-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.bfb-icon svg { width: 32px; height: 32px; fill: currentColor; }
.bfb-icon .bfb-ln { fill: none; stroke: currentColor; stroke-width: 2; opacity: .45; }
.bfb-no { font-size: 2.25rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: color-mix(in srgb, var(--accent) 22%, transparent); }
.bfb-kicker { margin-top: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.bfb-card h3 { margin: 0; font-size: 1.0625rem; line-height: 1.3; color: var(--text-primary); }
.bfb-card p { margin: 0; font-size: 0.875rem; line-height: 1.65; color: var(--text-secondary); flex: 1; }
.bfb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0 0; padding: 0; list-style: none; }
.bfb-chips li { margin: 0; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.bfb-chips li::before { content: none; display: none; }
.bfb-result { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 20px; border-radius: 16px; background: var(--accent-glow); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); font-size: 0.9375rem; line-height: 1.5; color: var(--text-primary); }
.bfb-check { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); }
.bfb-check svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* Einblenden beim Scrollen (data-reveal, siehe app.js) */
.bfb-steps.reveal-wait .bfb-card { opacity: 0; transform: translateY(16px); }
.bfb-steps .bfb-card { transition-delay: calc(var(--i) * .15s); }
.bfb-steps .bfb-card:hover { transition-delay: 0s; }
@media (max-width: 900px) {
  .bfb-steps { grid-template-columns: 1fr; gap: 26px; }
  .bfb-card:not(:last-child)::after { top: auto; bottom: -24px; right: auto; left: 50%; margin-left: -10px; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .bfb-card { transition: none !important; } }

/* Profilseite Sidney Nik: echte H2-Überschriften für die Reiter und die Hebel-Box */
.resume-pane-title { margin: 0 0 16px 0; font-size: 1.25rem; line-height: 1.3; color: var(--text-primary); }
.resume-levers-title { margin: 0 0 12px 0; font-size: 1rem; line-height: 1.35; color: var(--text-primary); }
.resume-levers-list a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.resume-levers-list a:hover { text-decoration: underline; }

/* ==========================================================================
   Apotheken: 60-Sekunden-Check als eigener Block (links Erklärung, rechts Quiz)
   ========================================================================== */
.apo-check-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; }
.apo-kicker { display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; background: var(--accent-glow); color: var(--accent-text); font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; }
.apo-check-text h2 { margin: 0 0 12px 0; font-size: 1.5rem; line-height: 1.25; }
.apo-check-text > p { color: var(--text-secondary); }
.apo-areas { display: grid; gap: 12px; margin: 20px 0; padding: 0; list-style: none; }
.apo-areas li { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-secondary); }
.apo-areas li::before { content: none; display: none; }
.apo-areas strong { display: block; color: var(--text-primary); font-size: 0.9375rem; }
.apo-area-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); }
.apo-area-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.apo-check-text .apo-note { font-size: 0.8125rem; color: var(--text-muted); }
/* Quiz-Karte */
.apo-quiz { position: relative; overflow: hidden; padding: 26px; border-radius: 22px; background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 10%, var(--bg-card)) 0%, var(--bg-card) 60%); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); box-shadow: var(--shadow-md); }
.apo-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.apo-steps span { height: 6px; border-radius: 6px; background: var(--border-subtle); transition: background .35s; }
.apo-steps span.done { background: var(--accent); }
.apo-steps span.current { background: linear-gradient(90deg, var(--accent) 0 45%, var(--border-subtle) 45%); }
.apo-step-label { margin: 10px 0 22px 0; font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); }
.apo-area-tag { margin: 0 0 6px 0; font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.apo-question { margin: 0 0 20px 0; font-size: 1.25rem; font-weight: 700; line-height: 1.35; color: var(--text-primary); }
.apo-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.apo-option { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 128px; padding: 16px; border-radius: 16px; border: 1.5px solid var(--border-subtle); background: var(--bg-card); text-align: left; cursor: pointer; font-family: inherit; transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s, background .25s; }
.apo-option:hover, .apo-option:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 24px -14px rgba(0, 183, 179, .6); }
.apo-option.selected { border-color: var(--accent); background: var(--accent-glow); }
.apo-option-ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 13%, transparent); }
.apo-option-ico svg { width: 22px; height: 22px; stroke: var(--accent-text); }
.apo-option-label { font-size: 0.875rem; font-weight: 700; line-height: 1.35; color: var(--text-primary); }
.apo-back { background: none; border: 0; padding: 0; font-family: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); cursor: pointer; }
.apo-back:hover:not(:disabled) { color: var(--accent-text); }
.apo-back:disabled { visibility: hidden; }
/* Ergebnis */
.apo-result { display: none; --tone: var(--accent); --tone-text: var(--accent-text); --tone-glow: var(--accent-glow); }
.apo-result.active { display: block; animation: fadeIn .35s ease; }
.apo-result.red { --tone: var(--accent-orange); --tone-text: #C24545; --tone-glow: var(--accent-orange-glow); }
.apo-result.amber { --tone: var(--warning); --tone-text: var(--warning-text); --tone-glow: var(--warning-glow); }
.apo-result.green { --tone: var(--success); --tone-text: var(--success-text); --tone-glow: var(--success-glow); }
body.dark-theme .apo-result.red { --tone-text: var(--accent-orange); }
.apo-result-head { display: flex; align-items: center; gap: 20px; padding: 18px; border-radius: 18px; background: var(--tone-glow); }
.apo-ring { position: relative; flex-shrink: 0; width: 96px; height: 96px; }
.apo-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.apo-ring circle { fill: none; stroke-width: 10; }
.apo-ring-bg { stroke: color-mix(in srgb, var(--tone) 20%, transparent); }
.apo-ring-fg { stroke: var(--tone); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); }
.apo-ring-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.apo-ring-val b { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); }
.apo-ring-val small { margin-top: 3px; font-size: 0.6875rem; font-weight: 700; color: var(--text-muted); }
.apo-result-headline { display: block; margin-bottom: 4px; font-size: 1.1875rem; font-weight: 800; color: var(--tone-text); }
.apo-result-sub { display: block; font-size: 0.875rem; line-height: 1.55; color: var(--text-secondary); }
.apo-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 18px 0; }
.apo-bar { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); }
.apo-bar-track { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.apo-bar-track i { height: 8px; border-radius: 8px; background: var(--border-subtle); }
.apo-bar-track i.on { background: var(--tone); }
.apo-actions-title { margin-bottom: 8px; font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); }
.apo-actions ul { margin: 0; padding: 0; list-style: none; }
.apo-actions li { position: relative; margin: 0 0 8px 0; padding-left: 26px; font-size: 0.875rem; line-height: 1.55; color: var(--text-secondary); }
.apo-actions li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-glow) no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B7B3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.apo-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; transition: background .25s, transform .25s; }
.apo-cta:hover { background: var(--accent-hover, #009E9A); transform: translateY(-2px); }
.apo-cta small { display: block; font-size: 0.75rem; font-weight: 600; opacity: .85; }
.apo-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; flex-shrink: 0; }
.apo-restart { display: block; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--border-subtle); background: none; font-family: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.apo-restart:hover { border-color: var(--accent); color: var(--accent-text); }
@media (max-width: 960px) { .apo-check-grid { grid-template-columns: 1fr; gap: 24px; } .apo-quiz { min-height: 0; } }
@media (max-width: 560px) { .apo-options { grid-template-columns: 1fr; } .apo-option { flex-direction: row; align-items: center; min-height: 0; } .apo-result-head { flex-direction: column; text-align: center; } .apo-bars { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .apo-quiz * { transition: none; animation: none; } }

/* Startseite: Bewertungs-Box verlinkt auf Google, mit Stand-Datum */
.rev-stat-link { display: block; color: inherit; text-decoration: none; transition: border-color .25s, transform .25s; }
.rev-stat-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.rev-stat-source { display: block; margin-top: 3px; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }

/* ==========================================================================
   Nachfolge-Kompass, Feinschliff: Verlauf Türkis zu Koralle wie auf den
   Spezialisierungsseiten, ruhigere Auswahlfläche, deutlicher Hinweis
   ========================================================================== */
.nk { position: relative; overflow: hidden; }
.nk::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-orange)); opacity: .75; }
.nk-kicker { padding: 5px 12px; border-radius: 999px; background: var(--accent-glow); letter-spacing: .08em; }
.nk-controls { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--bg-card)) 0%, var(--bg-card) 70%); border-color: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: var(--shadow-sm); }
.nk-card { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.nk-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.nk-card::after { left: 0; right: 0; height: 4px; border-radius: 0; background: linear-gradient(90deg, var(--accent), var(--accent-orange)); opacity: .75; }
.nk-pension::after { left: 0; right: 0; height: 4px; border-radius: 0; background: linear-gradient(90deg, var(--accent-orange), color-mix(in srgb, var(--accent-orange) 30%, transparent)); }
.nk-disclaimer { margin-top: 14px !important; padding: 12px 16px; border-radius: 12px; border-left: 3px solid var(--accent-orange); background: var(--accent-orange-glow); font-size: 0.875rem; line-height: 1.55; color: var(--text-primary) !important; max-width: 760px; }
.nk-foot { margin: 22px 0 0 0; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-size: 0.8125rem; color: var(--text-muted); text-align: center; }

/* Fiktive Beispiele und Hinweise: besser lesbare Schriftgröße */
.hr-hint p { font-size: 0.9375rem; line-height: 1.65; }
.hr-hint svg { width: 18px; height: 18px; margin-top: 3px; }

/* ==========================================================================
   Kanzlei-Health-Check (.kh-*): Kopie der Apotheken-Check-Gestaltung
   ========================================================================== */
.kh-check-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; }
.kh-kicker { display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; background: var(--accent-glow); color: var(--accent-text); font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; }
.kh-check-text h2 { margin: 0 0 12px 0; font-size: 1.5rem; line-height: 1.25; }
.kh-check-text > p { color: var(--text-secondary); }
.kh-areas { display: grid; gap: 12px; margin: 20px 0; padding: 0; list-style: none; }
.kh-areas li { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 0; font-size: 0.875rem; line-height: 1.5; color: var(--text-secondary); }
.kh-areas li::before { content: none; display: none; }
.kh-areas strong { display: block; color: var(--text-primary); font-size: 0.9375rem; }
.kh-area-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); }
.kh-area-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kh-check-text .kh-note { font-size: 0.8125rem; color: var(--text-muted); }
/* Quiz-Karte */
.kh-quiz { position: relative; overflow: hidden; padding: 26px; border-radius: 22px; background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 10%, var(--bg-card)) 0%, var(--bg-card) 60%); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); box-shadow: var(--shadow-md); }
.kh-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kh-steps span { height: 6px; border-radius: 6px; background: var(--border-subtle); transition: background .35s; }
.kh-steps span.done { background: var(--accent); }
.kh-steps span.current { background: linear-gradient(90deg, var(--accent) 0 45%, var(--border-subtle) 45%); }
.kh-step-label { margin: 10px 0 22px 0; font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); }
.kh-area-tag { margin: 0 0 6px 0; font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.kh-question { margin: 0 0 20px 0; font-size: 1.25rem; font-weight: 700; line-height: 1.35; color: var(--text-primary); }
.kh-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kh-option { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 128px; padding: 16px; border-radius: 16px; border: 1.5px solid var(--border-subtle); background: var(--bg-card); text-align: left; cursor: pointer; font-family: inherit; transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s, background .25s; }
.kh-option:hover, .kh-option:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 24px -14px rgba(0, 183, 179, .6); }
.kh-option.selected { border-color: var(--accent); background: var(--accent-glow); }
.kh-option-ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 13%, transparent); }
.kh-option-ico svg { width: 22px; height: 22px; stroke: var(--accent-text); }
.kh-option-label { font-size: 0.875rem; font-weight: 700; line-height: 1.35; color: var(--text-primary); }
.kh-back { background: none; border: 0; padding: 0; font-family: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); cursor: pointer; }
.kh-back:hover:not(:disabled) { color: var(--accent-text); }
.kh-back:disabled { visibility: hidden; }
/* Ergebnis */
.kh-result { display: none; --tone: var(--accent); --tone-text: var(--accent-text); --tone-glow: var(--accent-glow); }
.kh-result.active { display: block; animation: fadeIn .35s ease; }
.kh-result.red { --tone: var(--accent-orange); --tone-text: #C24545; --tone-glow: var(--accent-orange-glow); }
.kh-result.amber { --tone: var(--warning); --tone-text: var(--warning-text); --tone-glow: var(--warning-glow); }
.kh-result.green { --tone: var(--success); --tone-text: var(--success-text); --tone-glow: var(--success-glow); }
body.dark-theme .kh-result.red { --tone-text: var(--accent-orange); }
.kh-result-head { display: flex; align-items: center; gap: 20px; padding: 18px; border-radius: 18px; background: var(--tone-glow); }
.kh-ring { position: relative; flex-shrink: 0; width: 96px; height: 96px; }
.kh-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kh-ring circle { fill: none; stroke-width: 10; }
.kh-ring-bg { stroke: color-mix(in srgb, var(--tone) 20%, transparent); }
.kh-ring-fg { stroke: var(--tone); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); }
.kh-ring-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.kh-ring-val b { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); }
.kh-ring-val small { margin-top: 3px; font-size: 0.6875rem; font-weight: 700; color: var(--text-muted); }
.kh-result-headline { display: block; margin-bottom: 4px; font-size: 1.1875rem; font-weight: 800; color: var(--tone-text); }
.kh-result-sub { display: block; font-size: 0.875rem; line-height: 1.55; color: var(--text-secondary); }
.kh-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 18px 0; }
.kh-bar { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); }
.kh-bar-track { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.kh-bar-track i { height: 8px; border-radius: 8px; background: var(--border-subtle); }
.kh-bar-track i.on { background: var(--tone); }
.kh-actions-title { margin-bottom: 8px; font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); }
.kh-actions ul { margin: 0; padding: 0; list-style: none; }
.kh-actions li { position: relative; margin: 0 0 8px 0; padding-left: 26px; font-size: 0.875rem; line-height: 1.55; color: var(--text-secondary); }
.kh-actions li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-glow) no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B7B3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.kh-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; transition: background .25s, transform .25s; }
.kh-cta:hover { background: var(--accent-hover, #009E9A); transform: translateY(-2px); }
.kh-cta small { display: block; font-size: 0.75rem; font-weight: 600; opacity: .85; }
.kh-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; flex-shrink: 0; }
.kh-restart { display: block; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--border-subtle); background: none; font-family: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.kh-restart:hover { border-color: var(--accent); color: var(--accent-text); }
@media (max-width: 960px) { .kh-check-grid { grid-template-columns: 1fr; gap: 24px; } .kh-quiz { min-height: 0; } }
@media (max-width: 560px) { .kh-options { grid-template-columns: 1fr; } .kh-option { flex-direction: row; align-items: center; min-height: 0; } .kh-result-head { flex-direction: column; text-align: center; } .kh-bars { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .kh-quiz * { transition: none; animation: none; } }

/* ==========================================================================
   Berater für Berater: Quick-Win-Kacheln (.qw-*) und Kanzlei-Health-Check (.kh-*)
   Der Health-Check nutzt dieselbe Gestaltung wie der Apotheken-Check (.apo-*)
   ========================================================================== */
.qw-head { margin-bottom: 22px; }
.qw-head p { margin: 6px 0 0 0; color: var(--text-secondary); max-width: 760px; }
.qw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.qw-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.qw-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-orange)); opacity: .75; }
.qw-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.qw-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); }
.qw-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.qw-tile h3 { margin: 4px 0 0 0; font-size: 1.0625rem; line-height: 1.3; color: var(--text-primary); }
.qw-tile p { margin: 0; flex: 1; font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); }
.qw-tile p strong { color: var(--text-primary); }
.qw-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.qw-tags span { padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.qw-tags .qw-hi { color: var(--accent-text); background: var(--accent-glow); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
@media (max-width: 960px) { .qw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .qw-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .qw-tile { transition: none; } }
/* Health-Check: Ergänzungen zum übernommenen Apotheken-Layout */
.kh-steps { grid-template-columns: repeat(6, 1fr); }
.kh-actions-link { display: inline-block; margin-top: 2px; font-size: 0.8125rem; font-weight: 700; color: var(--accent-text); text-decoration: none; }
.kh-actions-link:hover { text-decoration: underline; }
.kh-bars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .kh-bars { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Lesbarkeit und Abstände in allen Textblöcken (Leistungs-, Über-uns- und
   Glossarseiten), angeglichen an die Spezialisierungsseiten
   ========================================================================== */
main .content-box > p,
main .content-box .faq-answer { font-size: 1.0625rem; line-height: 1.75; }
main .content-box .clean-list li { font-size: 1.0625rem; line-height: 1.7; margin-bottom: 14px; }

/* Einfache Aufzählungen sehen aus wie die türkisen Listen */
main .content-box > ul:not([class]) { list-style: none; margin: 18px 0 22px 0; padding: 0; }
main .content-box > ul:not([class]) > li { position: relative; padding-left: 26px; margin-bottom: 14px; font-size: 1.0625rem; line-height: 1.7; color: var(--text-secondary); }
main .content-box > ul:not([class]) > li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: 2px; background-color: var(--accent); }

/* Gleichmäßiger Rhythmus zwischen Abschnitten im selben Textblock */
main .content-box > h2:not(:first-child),
main .content-box > .h3-style:not(:first-child) { margin-top: 40px; }
main .content-box > h3:not(:first-child) { margin-top: 28px; }
main .content-box > h2 + h3,
main .content-box > .h3-style + h3 { margin-top: 14px; }
main .content-box > h3 + p { margin-top: 0; }
main .content-box > :is(ul, ol, .clean-list):last-child,
main .content-box > p:last-child { margin-bottom: 0; }

/* Schritt-Widgets: Text gut lesbar */
.process-step-title { font-size: 1rem; margin-bottom: 8px; }
.process-step-panel p:last-child { font-size: 1rem; line-height: 1.7; }
.process-nav-btn { font-size: 0.875rem; padding: 10px 16px; }

/* Fiktive Beispiele und Hinweise in Fließtextgröße */
main .hr-hint p { font-size: 1rem; line-height: 1.7; }

/* Quick-Win-Kacheln: Text gut lesbar */
.qw-grid p, .qw-card p { font-size: 0.9375rem; line-height: 1.65; }

/* ==========================================================================
   Termin-Karte unten rechts (nur Desktop, einmal je Besucher in 30 Tagen)
   ========================================================================== */
.termin-slidein { position: fixed; right: 24px; bottom: 24px; z-index: 900; width: 340px; padding: 22px 22px 16px 22px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); overflow: hidden; opacity: 0; transform: translateX(calc(100% + 40px)); transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.termin-slidein::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-orange)); opacity: .75; }
.termin-slidein.is-in { opacity: 1; transform: none; }
.termin-slidein-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--bg-subtle); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.termin-slidein-close:hover { background: var(--accent-glow); color: var(--accent-text); }
.termin-slidein-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.termin-slidein-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-right: 36px; }
.termin-slidein-top img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-glow); }
.termin-slidein-top b { display: block; font-size: 0.9375rem; color: var(--text-primary); }
.termin-slidein-top small { display: block; font-size: 0.8125rem; color: var(--text-muted); }
.termin-slidein-title { margin: 0 0 6px 0; font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--text-primary); }
.termin-slidein-text { margin: 0 0 16px 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-secondary); }
.termin-slidein-cta { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 0.9375rem; font-weight: 700; text-decoration: none; transition: background .2s, transform .2s; }
.termin-slidein-cta:hover { background: var(--accent-hover, #009E9A); transform: translateY(-1px); }
.termin-slidein-later { display: block; width: 100%; margin-top: 6px; padding: 8px; border: 0; background: none; font-family: inherit; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.termin-slidein-later:hover { color: var(--text-primary); }
@media (max-width: 1120px) { .termin-slidein { display: none; } }
@media (prefers-reduced-motion: reduce) { .termin-slidein { transition: opacity .2s; transform: none; } }

/* ==========================================================================
   Startseite (test.html): Leistungen als Bento-Kacheln
   ========================================================================== */
.lb { max-width: 1080px; margin: 24px auto 0 auto; }
.lb-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px; }
.lb-stats span { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }
.lb-stats b { font-size: 1.0625rem; font-weight: 800; color: var(--accent-text); }
.lb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lb-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 20px 24px; border-radius: 22px; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.lb-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-orange)); opacity: .75; }
.lb-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 183, 179, 0.12), transparent 65%); opacity: 0; transition: opacity .35s; }
.lb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.lb-card:hover::after { opacity: 1; }
.lb-card--wide { grid-column: span 2; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--bg-card)) 0%, var(--bg-card) 60%); }
.lb-top { display: flex; align-items: center; justify-content: space-between; }
.lb-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); }
.lb-ico svg { width: 24px; height: 24px; }
.lb-count { padding: 5px 12px; border-radius: 999px; background: var(--bg-subtle); font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); }
.lb-card h3 { margin: 6px 0 0 0; font-size: 1.3125rem; line-height: 1.25; }
.lb-card h3 a { color: var(--text-primary); text-decoration: none; }
.lb-card h3 a:hover { color: var(--accent-text); }
.lb-card > p { margin: 0 0 6px 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-secondary); }
.lb-links { display: grid; gap: 2px; margin: auto 0 0 0; padding: 10px 0 0 0; list-style: none; border-top: 1px solid var(--border-subtle); }
.lb-links--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.lb-links li { margin: 0; padding: 0; }
.lb-links li::before { content: none; display: none; }
.lb-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; margin: 0 -10px; border-radius: 10px; font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); text-decoration: none; transition: background .2s, color .2s; }
.lb-links a::after { content: "→"; color: var(--accent-text); opacity: .45; transition: transform .2s, opacity .2s; }
.lb-links a:hover { background: var(--accent-glow); color: var(--accent-text); }
.lb-links a:hover::after { opacity: 1; transform: translateX(3px); }
.lb-all { display: table; margin: 26px auto 0 auto; padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--border-subtle); background: var(--bg-card); font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); text-decoration: none; transition: border-color .2s, color .2s; }
.lb-all:hover { border-color: var(--accent); color: var(--accent-text); }
@media (max-width: 960px) { .lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lb-grid { grid-template-columns: 1fr; } .lb-card--wide { grid-column: auto; } .lb-links--2col { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .lb-card, .lb-links a::after { transition: none; } }
.lb { max-width: none; }
.lb-stats { justify-content: flex-start; }

/* ==========================================================================
   Selbsttests (Apotheke, Kanzlei): verständliche Auswertung mit Skala und
   Klartext-Status je Bereich
   ========================================================================== */
.apo-bars, .kh-bars { display: block; margin: 20px 0; }
.rs-title { margin: 0 0 10px 0; font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
.rs-scale { position: relative; margin-bottom: 22px; }
.rs-track { position: relative; display: flex; gap: 4px; padding-top: 30px; }
.rs-zone { display: flex; flex-direction: column; gap: 4px; min-width: 0; opacity: .5; transition: opacity .3s; }
.rs-zone.is-current { opacity: 1; }
.rs-bar { display: block; height: 10px; border-radius: 10px; }
.rs-zone.red .rs-bar { background: var(--accent-orange); }
.rs-zone.amber .rs-bar { background: var(--warning); }
.rs-zone.green .rs-bar { background: var(--success); }
.rs-range { margin-top: 4px; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.rs-name { font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.rs-zone.is-current .rs-name::after { content: " · Dein Bereich"; font-weight: 600; color: var(--text-secondary); }
.rs-marker { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.rs-marker b { padding: 3px 9px; border-radius: 999px; background: var(--text-primary); color: var(--bg-card); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.rs-marker::after { content: ""; width: 2px; height: 16px; margin-top: 2px; background: var(--text-primary); border-radius: 2px; }
.rs-areas { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rs-areas li { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-subtle); }
.rs-areas li::before { content: none; display: none; }
.rs-area-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.rs-pill { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 4px 11px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; }
.rs-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rs-pill.s0 { color: #C24545; background: var(--accent-orange-glow); }
.rs-pill.s1 { color: var(--warning-text); background: var(--warning-glow); }
.rs-pill.s2 { color: var(--success-text); background: var(--success-glow); }
body.dark-theme .rs-pill.s0 { color: var(--accent-orange); }
@media (max-width: 560px) { .rs-name { font-size: 0.8125rem; } .rs-zone.is-current .rs-name::after { content: none; } }

/* ==========================================================================
   Problemfälle: Ausgangslagen als Koralle-Kacheln, Klar-Schiff-Fahrplan mit
   Verlauf von Koralle (Problem) zu Türkis (geordnet), Vorher/Nachher
   ========================================================================== */
.pf-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.pf-case { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 20px 20px; border-radius: 18px; background: linear-gradient(165deg, color-mix(in srgb, var(--accent-orange) 9%, var(--bg-card)) 0%, var(--bg-card) 65%); border: 1px solid color-mix(in srgb, var(--accent-orange) 25%, transparent); box-shadow: var(--shadow-sm); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.pf-case:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pf-case-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--accent-orange) 14%, transparent); color: #C24545; }
body.dark-theme .pf-case-ico { color: var(--accent-orange); }
.pf-case-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pf-case h3 { margin: 6px 0 0 0 !important; font-size: 1.0625rem; line-height: 1.35; color: var(--text-primary); }
.pf-case p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-secondary); }

/* Fahrplan */
.pf-roadmap { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 30px 0 0 0; padding: 0; list-style: none; }
.pf-roadmap::before { content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent-orange), var(--accent)); opacity: .85; transform-origin: left; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.pf-phase { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * .2s); }
.pf-phase::before { content: none; display: none; }
.pf-no { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; font-size: 1.125rem; font-weight: 800; color: #fff; box-shadow: 0 0 0 6px var(--bg-card), var(--shadow-sm); }
.pf-phase:nth-child(1) .pf-no { background: var(--accent-orange); }
.pf-phase:nth-child(2) .pf-no { background: color-mix(in srgb, var(--accent-orange) 66%, var(--accent)); }
.pf-phase:nth-child(3) .pf-no { background: color-mix(in srgb, var(--accent-orange) 33%, var(--accent)); }
.pf-phase:nth-child(4) .pf-no { background: var(--accent); }
.pf-phase h3 { margin: 10px 0 0 0 !important; font-size: 1.125rem; color: var(--text-primary); }
.pf-phase p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-secondary); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0 0; padding: 0; list-style: none; }
.pf-chips li { margin: 0; padding: 4px 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.pf-chips li::before { content: none; display: none; }
.pf-roadmap.reveal-wait::before { transform: scaleX(0); }
.pf-roadmap.reveal-wait .pf-phase { opacity: 0; transform: translateY(14px); }

/* Vorher / Nachher */
.pf-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: stretch; margin-top: 34px; }
.pf-compare-col { padding: 20px 22px; border-radius: 18px; }
.pf-before { background: var(--accent-orange-glow); border: 1px solid color-mix(in srgb, var(--accent-orange) 30%, transparent); }
.pf-after { background: var(--accent-glow); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.pf-compare-label { display: block; margin-bottom: 10px; font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pf-before .pf-compare-label { color: #C24545; }
.pf-after .pf-compare-label { color: var(--accent-text); }
body.dark-theme .pf-before .pf-compare-label { color: var(--accent-orange); }
.pf-compare ul { margin: 0; padding: 0; list-style: none; }
.pf-compare li { position: relative; margin: 0 0 8px 0; padding-left: 24px; font-size: 0.9375rem; line-height: 1.55; color: var(--text-primary); }
.pf-compare li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.pf-before li::before { content: "×"; color: #C24545; }
.pf-after li::before { content: "✓"; color: var(--accent-text); }
.pf-compare-arrow { display: flex; align-items: center; justify-content: center; }
.pf-compare-arrow svg { width: 28px; height: 28px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pf-note { margin: 18px 0 0 0 !important; font-size: 0.875rem !important; color: var(--text-muted) !important; }

@media (max-width: 960px) {
  .pf-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .pf-roadmap::before { display: none; }
}
@media (max-width: 640px) {
  .pf-cases, .pf-roadmap { grid-template-columns: 1fr; }
  .pf-compare { grid-template-columns: 1fr; }
  .pf-compare-arrow { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .pf-roadmap::before, .pf-phase, .pf-case { transition: none; } }
.pf-phase:nth-child(2) .pf-no { background: color-mix(in srgb, var(--accent-orange) 70%, #FFC2A8); }
.pf-phase:nth-child(3) .pf-no { background: color-mix(in srgb, var(--accent) 70%, #9BE7E2); }

/* ==========================================================================
   Startseite (test.html): Leistungen als ruhiger Bereichs-Navigator
   Links Auswahl der Bereiche, rechts der gewählte Bereich mit seinen Leistungen
   ========================================================================== */
.lx { margin-top: 24px; }
.lx-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.lx-stats span { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-subtle); font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }
.lx-stats b { font-size: 1.0625rem; font-weight: 800; color: var(--accent-text); }
.lx-wrap { position: relative; overflow: hidden; display: grid; grid-template-columns: 300px minmax(0, 1fr); border-radius: 24px; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.lx-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-orange)); opacity: .75; }
/* Ohne JavaScript: alle Bereiche untereinander, keine Auswahl */
.lx-nav { display: none; }
.lx-panel + .lx-panel { border-top: 1px solid var(--border-subtle); }
.lx-wrap { grid-template-columns: 1fr; }
.lx--js .lx-wrap { grid-template-columns: 300px minmax(0, 1fr); }
.lx--js .lx-nav { display: flex; flex-direction: column; gap: 6px; padding: 24px 16px; background: var(--bg-subtle); border-right: 1px solid var(--border-subtle); }
.lx--js .lx-panel { display: none; border-top: 0; }
.lx--js .lx-panel.is-active { display: block; animation: lxFade .3s ease; }
@keyframes lxFade { from { opacity: 0; } to { opacity: 1; } }
.lx-tab { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 1px solid transparent; border-radius: 14px; background: none; font-family: inherit; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.lx-tab:hover { background: var(--bg-card); }
.lx-tab[aria-selected="true"] { background: var(--bg-card); border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow-sm); }
.lx-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); transition: background .2s, color .2s; }
.lx-ico svg { width: 21px; height: 21px; }
.lx-tab[aria-selected="true"] .lx-ico { background: var(--accent); color: #fff; }
.lx-tab-text b { display: block; font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.lx-tab-text small { display: block; margin-top: 1px; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }
.lx-panel { padding: 34px 36px 30px 36px; }
.lx-kicker { display: inline-block; margin-bottom: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.lx-panel h3 { margin: 0 0 8px 0; font-size: 1.625rem; line-height: 1.2; }
.lx-panel h3 a { color: var(--text-primary); text-decoration: none; }
.lx-panel h3 a:hover { color: var(--accent-text); }
.lx-panel > p { max-width: 640px; margin: 0 0 22px 0; font-size: 1.0625rem; line-height: 1.65; color: var(--text-secondary); }
.lx-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.lx-list li { margin: 0; padding: 0; }
.lx-list li::before { content: none; display: none; }
.lx-list a { position: relative; display: block; height: 100%; padding: 14px 40px 14px 16px; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--bg-card); text-decoration: none; transition: border-color .2s, background .2s; }
.lx-list a::after { content: "→"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--accent-text); opacity: .6; }
.lx-list a:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-glow); }
.lx-list b { display: block; font-size: 0.9375rem; font-weight: 700; line-height: 1.35; color: var(--text-primary); }
.lx-list small { display: block; margin-top: 3px; font-size: 0.875rem; line-height: 1.45; color: var(--text-secondary); }
.lx-all { display: inline-block; margin-top: 20px; font-size: 0.9375rem; font-weight: 700; color: var(--accent-text); text-decoration: none; }
.lx-all:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .lx--js .lx-wrap { grid-template-columns: 1fr; }
  .lx--js .lx-nav { flex-direction: row; overflow-x: auto; padding: 14px; border-right: 0; border-bottom: 1px solid var(--border-subtle); scrollbar-width: none; }
  .lx--js .lx-nav::-webkit-scrollbar { display: none; }
  .lx-tab { flex: 0 0 auto; width: auto; padding: 10px 12px; }
  .lx-ico { width: 36px; height: 36px; }
  .lx-panel { padding: 26px 22px; }
  .lx-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .lx--js .lx-panel.is-active { animation: none; } }

/* ==========================================================================
   Einkommensteuer-Checkliste: zweigeteilt (links Erklärung, rechts Fragen)
   ========================================================================== */
.est2-subtitle { max-width: 860px; }
.est2 { position: relative; overflow: hidden; }
.est2::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-orange)); opacity: .75; }
.est2-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.est2-kicker { display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; background: var(--accent-glow); color: var(--accent-text); font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; }
.est2-text h2 { margin: 0 0 18px 0; font-size: 1.5rem; line-height: 1.25; }
.est2-steps { display: grid; gap: 16px; margin: 0 0 22px 0; padding: 0; list-style: none; }
.est2-steps li { display: flex; gap: 14px; margin: 0; padding: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--text-secondary); }
.est2-steps li::before { content: none; display: none; }
.est2-steps strong { display: block; font-size: 1rem; color: var(--text-primary); }
.est2-num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); font-weight: 800; }
.est2-note { padding: 14px 16px; border-radius: 14px; border-left: 3px solid var(--accent); background: var(--accent-glow); font-size: 0.9375rem; line-height: 1.65; color: var(--text-secondary); }
.est2-note strong { color: var(--text-primary); }
.est2-foot { margin: 14px 0 0 0 !important; font-size: 0.8125rem !important; color: var(--text-muted) !important; }
/* Fragekarte */
.est2-quiz.est-check-card { margin: 0; padding: 28px; border-radius: 22px; background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 10%, var(--bg-card)) 0%, var(--bg-card) 60%); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); box-shadow: var(--shadow-md); max-width: none; }
.est2-quiz .est-check-progress-track { height: 6px; max-width: none; margin: 0 0 10px 0; border-radius: 6px; background: var(--border-subtle); }
.est2-quiz .est-check-progress-fill { border-radius: 6px; }
.est2-quiz .est-check-progress-label { margin-bottom: 22px; font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); }
.est2-quiz .est-check-question-text { margin: 0 0 22px 0; max-width: none; font-size: 1.25rem; font-weight: 700; line-height: 1.4; color: var(--text-primary); min-height: 3.5em; }
.est2-quiz .est-check-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: none; margin-bottom: 16px; }
.est2-quiz .est-check-answer-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--border-subtle); background: var(--bg-card); font-family: inherit; font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); cursor: pointer; transition: border-color .2s, background .2s; }
.est2-quiz .est-check-answer-btn:hover, .est2-quiz .est-check-answer-btn:focus-visible { border-color: var(--accent); background: var(--accent-glow); }
.est2-ans-ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.est2-ans-ico svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.est2-quiz .est-check-back-btn { font-size: 0.875rem; }
/* Ergebnis */
.est2-quiz .est-check-result-intro { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); }
.est2-quiz .est-check-doc-group { margin-bottom: 8px; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--bg-card); }
.est2-quiz .est-check-doc-group summary { padding: 12px 16px; font-size: 0.9375rem; font-weight: 700; }
.est2-quiz .est-check-doc-list li { font-size: 0.9375rem; line-height: 1.6; }
.est2-quiz .est-check-always-note { font-size: 0.875rem; color: var(--text-secondary); }
.est2-quiz .est-check-pdf-btn, .est2-quiz .est-check-restart-btn { width: 100%; max-width: none; }
.est2-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 14px 18px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; transition: background .2s; }
.est2-cta:hover { background: var(--accent-hover, #009E9A); }
.est2-cta small { display: block; font-size: 0.75rem; font-weight: 600; opacity: .85; }
.est2-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; flex-shrink: 0; }
/* Gesprächs-Box */
.est2-talk { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.est2-talk h2 { margin: 0 0 8px 0; font-size: 1.375rem; }
.est2-talk p { margin: 0 !important; max-width: 640px; }
.est2-cta--inline { flex-shrink: 0; margin-top: 0; padding: 14px 20px; }
@media (max-width: 960px) { .est2-grid { grid-template-columns: 1fr; gap: 26px; } .est2-talk { flex-direction: column; align-items: flex-start; } }

main .section-subtitle.est2-subtitle { max-width: 860px; }

/* ==========================================================================
   Berater für Berater: Quick-Wins als Memory-Karten (vorne Problem, hinten Lösung)
   Ohne JavaScript stehen beide Seiten untereinander.
   ========================================================================== */
.qw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.qw-counter { padding: 6px 14px; border-radius: 999px; background: var(--accent-glow); color: var(--accent-text); font-size: 0.875rem; font-weight: 700; }
.qw-all { padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--border-subtle); background: var(--bg-card); font-family: inherit; font-size: 0.875rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.qw-all:hover { border-color: var(--accent); color: var(--accent-text); }
.qw:not(.qw--js) .qw-bar, .qw:not(.qw--js) .qw-toggle, .qw:not(.qw--js) .qw-hint { display: none; }

.qw-flip.qw-tile { padding: 0; overflow: visible; background: none; border: 0; box-shadow: none; perspective: 1200px; }
.qw-flip.qw-tile::before { content: none; }
.qw-flip.qw-tile:hover { transform: none; box-shadow: none; }
.qw-inner { position: relative; display: grid; height: 100%; }
.qw-face { grid-area: 1 / 1; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.qw-face::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; opacity: .8; }
.qw-front { background: linear-gradient(165deg, color-mix(in srgb, var(--accent-orange) 7%, var(--bg-card)) 0%, var(--bg-card) 60%); }
.qw-front::before { background: linear-gradient(90deg, var(--accent-orange), color-mix(in srgb, var(--accent-orange) 30%, transparent)); }
.qw-back { background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 10%, var(--bg-card)) 0%, var(--bg-card) 60%); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.qw-back::before { background: linear-gradient(90deg, var(--accent-orange), var(--accent)); }
.qw-face-top { display: flex; align-items: center; justify-content: space-between; }
.qw-no { font-size: 1.75rem; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--accent-orange) 30%, transparent); }
.qw-kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.qw-kicker--problem { color: #C24545; }
body.dark-theme .qw-kicker--problem { color: var(--accent-orange); }
.qw-face p.qw-back-title { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); flex: 0 0 auto; }
.qw-hint { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 700; color: var(--accent-text); }
.qw-hint::before { content: "↻"; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-glow); font-size: 0.875rem; }
.qw-toggle { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; border-radius: 20px; background: transparent; cursor: pointer; }
.qw-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.qw:not(.qw--js) .qw-inner { display: flex; flex-direction: column; gap: 8px; }
.qw--js .qw-inner { transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.qw--js .qw-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.qw--js .qw-back { transform: rotateY(180deg); }
.qw--js .qw-flip.is-flipped .qw-inner { transform: rotateY(180deg); }
.qw--js .qw-flip:not(.is-flipped):hover .qw-front { border-color: color-mix(in srgb, var(--accent-orange) 45%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .qw--js .qw-inner { transition: none; transform: none !important; }
  .qw--js .qw-back { transform: none; visibility: hidden; }
  .qw--js .qw-flip.is-flipped .qw-front { visibility: hidden; }
  .qw--js .qw-flip.is-flipped .qw-back { visibility: visible; }
}
@media (max-width: 960px) { .qw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .qw-grid { grid-template-columns: 1fr; } }

/* Memory-Karten: vorne nur das Schlagwort, hinten Problem, Quick-Win, Zeitersparnis */
.qw-front { align-items: center; justify-content: center; text-align: center; min-height: 230px; gap: 14px; }
.qw-front .qw-no { position: absolute; top: 16px; right: 18px; }
.qw-front .qw-ico { width: 60px; height: 60px; border-radius: 18px; background: color-mix(in srgb, var(--accent-orange) 12%, transparent); color: #C24545; }
body.dark-theme .qw-front .qw-ico { color: var(--accent-orange); }
.qw-front .qw-ico svg { width: 30px; height: 30px; }
.qw-front h3.qw-buzz { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: var(--text-primary); }
.qw-front .qw-hint { margin-top: 2px; }
.qw-back { gap: 8px; }
.qw-back p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--text-secondary); }
.qw-back p strong { color: var(--text-primary); }
.qw-back .qw-tags { margin-top: auto; padding-top: 6px; }
.qw-tags .qw-save { color: var(--text-primary); }
.qw-tags .qw-save.qw-hi { color: var(--accent-text); }

/* Memory-Karten, ruhiger: Vorderseite neutral hellgrau mit feinem Punktraster
   (wirkt wie eine verdeckte Karte), Rückseite hell mit türkisem Akzent */
.qw-front {
  background-color: var(--bg-subtle);
  background-image: radial-gradient(color-mix(in srgb, var(--text-muted) 22%, transparent) 1px, transparent 1.2px);
  background-size: 14px 14px;
  border-color: var(--border-subtle);
  box-shadow: none;
}
.qw-front::before { background: color-mix(in srgb, var(--text-muted) 35%, transparent); height: 3px; }
.qw-front .qw-no { color: color-mix(in srgb, var(--text-muted) 45%, transparent); }
.qw-front .qw-ico { background: var(--bg-card); color: var(--text-secondary); box-shadow: var(--shadow-sm); }
body.dark-theme .qw-front .qw-ico { color: var(--text-secondary); }
.qw-front h3.qw-buzz { padding: 6px 14px; border-radius: 12px; background: var(--bg-card); }
.qw-front .qw-hint { color: var(--text-secondary); }
.qw-front .qw-hint::before { background: var(--bg-card); color: var(--accent-text); }
.qw--js .qw-flip:not(.is-flipped):hover .qw-front { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.qw--js .qw-flip:not(.is-flipped):hover .qw-front .qw-hint { color: var(--accent-text); }

.qw-back { background: var(--bg-card); border-color: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: var(--shadow-sm); }
.qw-back::before { background: var(--accent); height: 3px; opacity: .9; }
.qw-back .qw-back-title { color: var(--accent-text); }

/* ==========================================================================
   BELEGFLUSS (Finanzbuchhaltung): So kommen Deine Belege zu uns
   Desktop: Stationen nebeneinander, Belege gleiten mit Leuchtspur über die Verbindungen.
   Unter 1024 px: Stationen untereinander, Verbindungen senkrecht.
   Ohne JavaScript bleibt alles sichtbar; mit JavaScript federn die Stationen beim
   Scrollen nacheinander herein (wie die Leistungs-Mindmap). Reduzierte Bewegung: alles statisch.
   ========================================================================== */
main .content-box p.bf-eyebrow { font-size: 0.8125rem; font-weight: 700; color: var(--accent-text); margin: 0 0 6px; }
main .content-box.bf > h2.h3-style { margin-top: 0; }
.bf-intro { max-width: 62ch; }
.bf-canvas {
  position: relative; margin-top: 24px; padding: 36px 24px 28px; border-radius: 16px; border: 1px solid var(--border-subtle);
  background-color: var(--bg-subtle);
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* Lichtschein folgt dem Mauszeiger */
.bf-canvas::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%);
}
.bf-canvas:hover::before { opacity: 1; }
.bf-track {
  position: relative; z-index: 1; display: grid; align-items: center; row-gap: 14px;
  grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr) 116px minmax(0, 1.2fr) 116px minmax(0, 1fr);
}

/* Stationen */
.bf-station {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  font: inherit; text-align: left; color: var(--text-primary); cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 18px;
  padding: 20px 18px; box-shadow: var(--shadow-md);
  transition: opacity .6s ease, transform .6s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s, border-color .3s;
  transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s;
}
.bf-station:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 18px 40px var(--accent-glow); transition-delay: 0s; }
.bf-station:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bf-station[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 18px 40px var(--accent-glow); }
.bf-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-glow); color: var(--accent-text); margin-bottom: 8px; transition: background .3s, color .3s, transform .3s; }
.bf-station:hover .bf-icon, .bf-station[aria-pressed="true"] .bf-icon { background: var(--accent); color: var(--on-accent); }
.bf-station:hover .bf-icon { transform: rotate(-6deg) scale(1.06); }
.bf-icon svg, .bf-badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bf-num { position: absolute; top: 14px; right: 16px; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); }
.bf-title { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.bf-sub { font-size: 0.875rem; line-height: 1.45; color: var(--text-secondary); }
.bf-badge {
  position: absolute; top: 46px; left: 50px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--success); color: #FFFFFF; border: 2px solid var(--bg-card);
  animation: bf-badge-pulse 2.4s ease-out infinite;
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--d, 0s) + .5s);
}
.bf-badge svg { width: 14px; height: 14px; stroke-width: 3; }
@keyframes bf-badge-pulse {
  0% { box-shadow: 0 0 0 0 rgba(30, 158, 107, .5); }
  70% { box-shadow: 0 0 0 10px rgba(30, 158, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 158, 107, 0); }
}

/* Kanzlei hervorgehoben, mit ruhig pulsierendem Ring */
.bf-station--kanzlei { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.bf-station--kanzlei::after {
  content: ""; position: absolute; inset: -9px; border-radius: 24px; border: 2px solid var(--accent);
  pointer-events: none; opacity: .4; animation: bf-ring 3.2s ease-in-out infinite;
}
@keyframes bf-ring { 0%, 100% { transform: scale(.985); opacity: .5; } 50% { transform: scale(1.025); opacity: .1; } }
.bf-station--kanzlei .bf-sub { color: rgba(255, 255, 255, 0.78); }
.bf-station--kanzlei .bf-num { color: rgba(255, 255, 255, 0.6); }
.bf-station--kanzlei .bf-icon { background: rgba(0, 183, 179, 0.22); color: var(--accent); }
.bf-station--kanzlei:hover .bf-icon, .bf-station--kanzlei[aria-pressed="true"] .bf-icon { background: var(--accent); color: var(--ink); }
body.dark-theme .bf-station--kanzlei { background: #0F1A21; border-color: var(--border-accent); }
.bf-checks { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bf-checks span { position: relative; padding-left: 22px; font-size: 0.8125rem; line-height: 1.4; transition: opacity .4s ease, transform .4s ease; }
.bf-checks span::before { content: ""; position: absolute; left: 3px; top: 0.3em; width: 10px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.bf-checks span:nth-child(1) { transition-delay: calc(var(--d, 0s) + .5s); }
.bf-checks span:nth-child(2) { transition-delay: calc(var(--d, 0s) + .7s); }
.bf-checks span:nth-child(3) { transition-delay: calc(var(--d, 0s) + .9s); }

/* Verbindungen: laufende Strichlinie, Belege mit Leuchtspur */
.bf-link { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 0 10px; }
.bf-lane { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bf-lane-label { font-size: 0.75rem; font-weight: 600; line-height: 1.35; color: var(--text-secondary); text-align: center; text-wrap: balance; transition: opacity .5s ease; transition-delay: calc(var(--d, 0s) + .3s); }
.bf-line {
  position: relative; display: block; width: 100%; height: 2px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent) 0 6px, transparent 6px 11px);
  background-size: 11px 2px; animation: bf-dash-x .9s linear infinite;
  transform-origin: left center; transition: transform .7s cubic-bezier(.65, 0, .35, 1); transition-delay: var(--d, 0s);
}
.bf-rev .bf-line { animation-direction: reverse; transform-origin: right center; }
@keyframes bf-dash-x { to { background-position: 11px 0; } }
@keyframes bf-dash-y { to { background-position: 0 11px; } }
.bf-line::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-right: 0; border-left: 8px solid var(--accent); }
.bf-rev .bf-line::after { right: auto; left: -2px; border: 6px solid transparent; border-left: 0; border-right: 8px solid var(--accent); }
.bf-doc {
  position: absolute; top: -9px; left: 0; width: 14px; height: 18px; border-radius: 3px;
  background-color: var(--bg-card); border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow), 0 4px 10px rgba(0, 183, 179, .35);
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-size: 7px 1.5px, 5px 1.5px; background-position: 2px 5px, 2px 9px; background-repeat: no-repeat;
  animation: bf-move-x 3.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
/* Leuchtspur hinter dem Beleg */
.bf-doc::before {
  content: ""; position: absolute; top: 50%; right: calc(100% + 3px); width: 34px; height: 2px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.bf-rev .bf-doc::before { right: auto; left: calc(100% + 3px); background: linear-gradient(270deg, transparent, var(--accent)); }
.bf-bank .bf-doc { top: -6px; width: 20px; height: 13px; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 2px; background-position: 0 3px; }
.bf-rev .bf-doc { animation-direction: reverse; }
.bf-link .bf-lane:nth-child(2) .bf-doc { animation-delay: -1.7s; }
.bf-track > .bf-link:nth-of-type(2) .bf-doc { animation-delay: -0.8s; }
.bf-track > .bf-link:nth-of-type(3) .bf-doc { animation-delay: -2.4s; }
@keyframes bf-move-x {
  0% { left: 0; opacity: 0; transform: scale(.5); }
  14% { opacity: 1; transform: scale(1); }
  86% { opacity: 1; transform: scale(1); }
  100% { left: calc(100% - 14px); opacity: 0; transform: scale(.5); }
}
@keyframes bf-move-y {
  0% { top: 0; opacity: 0; transform: scale(.5); }
  14% { opacity: 1; transform: scale(1); }
  86% { opacity: 1; transform: scale(1); }
  100% { top: calc(100% - 18px); opacity: 0; transform: scale(.5); }
}

/* Rückweg an Dich (unter Unternehmen und Kanzlei), ein Punkt läuft zurück */
.bf-return { grid-column: 3 / 6; grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity .6s ease; transition-delay: var(--d, 0s); }
.bf-return-line { position: relative; display: block; align-self: stretch; height: 22px; margin: 0 21% 0 18%; border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-top: 0; border-radius: 0 0 14px 14px; }
.bf-return-line::before { content: ""; position: absolute; left: -7px; top: -8px; border: 6px solid transparent; border-top: 0; border-bottom: 8px solid color-mix(in srgb, var(--accent) 80%, transparent); }
.bf-return-line::after {
  content: ""; position: absolute; bottom: -6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow), 0 0 12px var(--accent);
  animation: bf-back 4.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes bf-back { 0% { left: 100%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 0; opacity: 0; } }
/* Breiter Rückweg: von der Kanzlei zurück bis zur ersten Station (Lohn) */
.bf-return--wide { grid-column: 1 / 6; }
.bf-return--wide .bf-return-line { margin: 0 13.5% 0 11%; }
.bf-return--wide .bf-return-line::after { animation-duration: 5.6s; }
.bf-return-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); text-align: center; }

/* Einfedern beim Scrollen (Klasse "anim" setzt widgets.js nur, wenn Bewegung erlaubt ist) */
.bf.anim .bf-station:not(.in) { opacity: 0; transform: translateY(24px) scale(.96); }
.bf.anim .bf-station:not(.in) .bf-badge { transform: scale(0); }
.bf.anim .bf-station:not(.in) .bf-checks span { opacity: 0; transform: translateX(-8px); }
.bf.anim .bf-link:not(.in) .bf-line { transform: scaleX(0); }
.bf.anim .bf-link:not(.in) .bf-lane-label, .bf.anim .bf-return:not(.in) { opacity: 0; }
.bf.anim .bf-link:not(.in) .bf-doc { animation-play-state: paused; visibility: hidden; }

/* Details zur gewählten Station */
.bf-detail { margin-top: 24px; }
.bf-panel.bf-show { animation: bf-panel-in .35s ease; }
@keyframes bf-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main .content-box .bf-panel h3 { font-size: 1.125rem; margin: 0 0 12px; }
.bf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bf-cols > div { background: var(--bg-subtle); border-radius: 12px; padding: 18px 20px; border-left: 3px solid var(--accent); }
main .content-box .bf-cols p { margin: 0; font-size: 1rem; line-height: 1.65; }
main .content-box .bf-cols p.bf-who { font-size: 0.8125rem; font-weight: 700; color: var(--accent-text); margin-bottom: 6px; }

/* Untereinander auf Tablet und Handy */
@media (max-width: 1023px) {
  .bf-canvas { padding: 24px 16px; }
  .bf-track { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .bf-link { flex-direction: row; justify-content: center; gap: 28px; padding: 10px 0; }
  .bf-lane { flex-direction: row-reverse; gap: 10px; }
  .bf-lane.bf-bank { gap: 16px; }
  .bf-lane-label { text-align: left; max-width: 150px; }
  .bf-line { width: 2px; height: 64px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, transparent) 0 6px, transparent 6px 11px); background-size: 2px 11px; animation-name: bf-dash-y; transform-origin: center top; }
  .bf-rev .bf-line { transform-origin: center bottom; }
  .bf.anim .bf-link:not(.in) .bf-line { transform: scaleY(0); }
  .bf-line::after { right: auto; top: auto; left: -5px; bottom: -2px; border: 6px solid transparent; border-bottom: 0; border-top: 8px solid var(--accent); }
  .bf-rev .bf-line::after { left: -5px; top: -2px; bottom: auto; border: 6px solid transparent; border-top: 0; border-bottom: 8px solid var(--accent); }
  .bf-doc { top: 0; left: -6px; animation-name: bf-move-y; }
  .bf-doc::before { top: auto; right: auto; bottom: calc(100% + 3px); left: 50%; width: 2px; height: 28px; margin: 0 0 0 -1px; background: linear-gradient(180deg, transparent, var(--accent)); }
  .bf-rev .bf-doc::before { left: 50%; bottom: auto; top: calc(100% + 3px); background: linear-gradient(0deg, transparent, var(--accent)); }
  .bf-bank .bf-doc { top: 0; left: -9px; }
  .bf-return, .bf-return--wide { grid-column: auto; grid-row: auto; margin-top: 16px; flex-direction: row; justify-content: center; }
  .bf-return-line { display: none; }
  .bf-return-label::before { content: "↺ "; color: var(--accent-text); font-weight: 700; }
}
@media (max-width: 700px) { .bf-cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .bf-doc, .bf-line, .bf-badge, .bf-station--kanzlei::after, .bf-return-line::after, .bf-panel.bf-show { animation: none; }
  .bf-doc { left: calc(50% - 7px); }
  .bf-return-line::after { display: none; }
  .bf-station, .bf-icon { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1023px) { .bf-doc { left: -6px; top: calc(50% - 9px); } }

/* =====================================================
   COOKIE-BANNER (Einwilligung externe Dienste, siehe app.js)
   Kompakte Karte unten links (unten rechts sitzt die Termin-Karte).
   "Alle akzeptieren" und "Nur notwendige" bewusst gleich gestaltet.
   ===================================================== */
.consent-banner {
  position: fixed; left: 24px; bottom: 24px;
  width: min(400px, calc(100% - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  z-index: 9000;
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border-subtle); border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 22px 22px 14px;
  font-size: 0.875rem; line-height: 1.55;
  opacity: 0; transform: translateY(16px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.consent-banner.sichtbar { opacity: 1; transform: none; }
.consent-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.consent-icon {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-glow); color: var(--accent-text);
}
.consent-icon svg { width: 21px; height: 21px; }
.consent-titel { font-weight: 700; font-size: 1rem; margin: 0; letter-spacing: -0.01em; }
.consent-text { color: var(--text-secondary); margin: 0 0 16px; font-size: 0.8125rem; }
.consent-banner a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.consent-details { display: grid; gap: 8px; margin: 0 0 14px; }
.consent-details[hidden] { display: none; }
.consent-dienst {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  background: var(--bg-subtle); border-radius: 14px;
  padding: 12px 14px; cursor: pointer; color: var(--text-secondary); font-size: 0.75rem; line-height: 1.5;
}
.consent-dienst strong { display: block; color: var(--text-primary); font-size: 0.8125rem; margin-bottom: 2px; }
/* Schalter im iOS-Stil, basiert auf einer echten Checkbox (Tastatur und Screenreader) */
.consent-switch {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: 44px; height: 26px; border-radius: 999px; position: relative; cursor: pointer;
  background: var(--border-subtle); transition: background-color .2s ease;
}
.consent-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease;
}
.consent-switch:checked { background: var(--accent); }
.consent-switch:checked::after { transform: translateX(18px); }
.consent-switch:disabled { opacity: .55; cursor: default; }
.consent-aktionen { display: flex; gap: 8px; }
.consent-btn {
  flex: 1 1 0; min-height: 44px; padding: 10px 12px;
  border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--ink);
  font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.consent-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.consent-btn:active { transform: scale(.98); }
.consent-btn-speichern {
  width: 100%; margin-top: 4px; background: transparent; border-color: var(--border-subtle); color: var(--text-primary);
}
.consent-btn-speichern:hover { background: var(--bg-card-hover); border-color: var(--accent); }
.consent-fuss {
  margin: 10px 0 0; display: flex; justify-content: center; align-items: center; gap: 8px;
  font-size: 0.75rem; color: var(--text-secondary);
}
.consent-banner .consent-fuss a { color: var(--text-secondary); }
.consent-mehr {
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--text-primary);
}
.consent-mehr:hover { color: var(--accent-text); }
@media (max-width: 560px) {
  .consent-banner { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 16px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .consent-banner, .consent-switch, .consent-switch::after { transition: none; }
}
.footer-col ul li .consent-footer-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 400; color: var(--text-muted);
  transition: color 0.2s ease;
}
.footer-col ul li .consent-footer-link:hover { color: var(--accent); }
/* Finanzbuchhaltung, Station "Unsere Kanzlei": ANDERSMACHER-"A" statt Dokument-Icon */
.bf-icon svg.bf-logo { width: 26px; height: 22px; stroke: none; }
.bf-logo .bf-logo-a { fill: #FFFFFF; transition: fill .3s; }
.bf-logo .bf-logo-bar { fill: var(--accent); transition: fill .3s; }
.bf-station--kanzlei:hover .bf-logo-a, .bf-station--kanzlei[aria-pressed="true"] .bf-logo-a { fill: var(--ink); }
.bf-station--kanzlei:hover .bf-logo-bar, .bf-station--kanzlei[aria-pressed="true"] .bf-logo-bar { fill: #FFFFFF; }
/* Ablauf-Widgets auf Tablet und Handy: Details stehen direkt unter der gewählten Station (siehe widgets.js) */
@media (max-width: 1023px) {
  .bf-track > .bf-detail {
    margin: 14px 0 6px; padding: 18px 16px;
    background: var(--bg-surface); border: 1px solid var(--border-accent); border-radius: 16px;
    box-shadow: var(--shadow-sm);
  }
  main .content-box .bf-track .bf-panel h3 { display: none; }
}
/* Steuertermine: Reiter links, Jahr und Bundesland rechts in derselben Zeile; auf dem Handy darunter nebeneinander */
.st-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; margin:6px 0 16px; }
.st-head .st-tabs { margin:0; }
.st-head .st-bar { display:flex; align-items:center; gap:10px; margin:0; }
@media (max-width: 560px) {
  .st-head .st-bar { display:grid; grid-template-columns:auto minmax(0, 1fr); width:100%; }
  .st-head .st-select { width:100%; }
}
/* Steuertermine: Q-Marke am letzten Quartalsmonat (Fristen der Vierteljahreszahler) */
.st-q { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--accent-orange-glow); color:#C2410C; font-size:0.6875rem; font-weight:800; letter-spacing:0.02em; vertical-align:1px; }
body.dark-theme .st-q { color:#FF9A8A; }
/* Häufige Fragen direkt im Artikel (Glossar, Blog): aufklappbar wie die FAQ-Boxen, mit Abstand zur nächsten Überschrift */
.faq-accordion-group.faq-inline { margin: 14px 0 32px; }

/* =====================================================
   HONORARRECHNER im ANDERSMACHER-Stil
   Dunkelblau, Türkis und Koralle wie im Rest der Seite
   ===================================================== */
/* Schritt-Karten: Verlaufsstreifen wie die übrigen Karten, Schrittnummer in Dunkelblau */
.hr-card { position: relative; }
.hr-card::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--accent), var(--accent-orange)); opacity: .75; }
.hr-step-num { width: 30px; height: 30px; background: var(--ink); color: #FFFFFF; box-shadow: 0 0 0 4px var(--accent-glow); }
body.dark-theme .hr-step-num { background: var(--accent); color: var(--ink); }
.hr-card-head { gap: 12px; }
.hr-card-head h2 { font-size: 1.0625rem; }

/* Rechtsform: ausgewählt hell mit türkisem Rahmen und Haken (statt weißer Schrift auf Türkis) */
.rf-card { position: relative; }
.rf-card.active { background: var(--accent-glow); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.rf-card.active svg { color: var(--accent-text); }
.rf-card.active .rf-label { color: var(--text-primary); }
.rf-card.active::after { content: ""; position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent) no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A262F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.sub-btn.active { background: var(--accent-glow); border-color: var(--accent); color: var(--text-primary); }

/* Schieberegler: türkis gefüllt bis zum Wert (--p setzt honorarrechner.js), weißer Knopf mit türkisem Rand */
.hr-slider { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.hr-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) 0 var(--p, 0%), var(--border-subtle) var(--p, 0%) 100%); }
.hr-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(26, 38, 47, 0.18); transition: transform .15s ease; }
.hr-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.hr-slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border-subtle); }
.hr-slider::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
.hr-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(26, 38, 47, 0.18); }

/* Ergebnis: dunkelblau wie der Footer, Verlaufsstreifen oben, monatliche Kosten hervorgehoben */
.hr-result-hero { background: radial-gradient(120% 90% at 100% 0%, rgba(0, 183, 179, 0.22), transparent 60%), var(--ink); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.06); }
.hr-result-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-orange)); }
body.dark-theme .hr-result-hero { background: radial-gradient(120% 90% at 100% 0%, rgba(0, 183, 179, 0.22), transparent 60%), var(--bg-card); border-color: var(--border-accent); }
.hr-result-eur-bg { display: none; }
.hr-cost-box { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.hr-cost-val { color: #FFFFFF; }
#box-monatlich { background: rgba(0, 183, 179, 0.16); border-color: rgba(0, 183, 179, 0.5); }
#box-monatlich .hr-cost-val { color: var(--accent); }
/* Honorarrechner kompakt: Beschriftung und Betrag in einer Zeile, Regler darunter, kleinere Abstände */
.hr-card { padding: 20px 22px; margin-top: 16px; border-radius: 14px; }
.hr-card::before { left: 22px; right: 22px; }
.hr-card-head { margin-bottom: 14px; }
.hr-field { display: grid; grid-template-columns: minmax(0, 1fr) 180px; grid-template-areas: "label input" "slider slider" "hint hint"; align-items: center; column-gap: 12px; margin-bottom: 14px; }
.hr-field > .hr-field-top { grid-area: label; margin: 0; }
.hr-field > .hr-ggw-input-wrap { grid-area: input; }
.hr-field > .hr-slider { grid-area: slider; height: 32px; }
.hr-field > .hr-slider-cap-hint, .hr-field > .hr-auto-hint { grid-area: hint; margin: 0; font-size: 0.75rem; }
.hr-ggw-input-wrap { gap: 6px; }
.hr-ggw-input-wrap input[type="text"] { font-size: 0.9375rem; padding: 7px 10px; border-radius: 8px; }
.hr-ggw-input-wrap span { font-size: 0.8125rem; }
.hr-stepper-wrap { max-width: 240px; }
.hr-stepper-btn { width: 32px; height: 32px; }
#rechtsform-grid { gap: 10px; }
.rf-card { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 12px 14px; text-align: left; }
.rf-card svg { width: 20px; height: 20px; flex: none; }
.rf-card.active::after { top: 50%; margin-top: -10px; right: 12px; }
#sub-choice { margin-top: 12px; }
.sub-btn { padding: 9px 12px; }
.hr-hint { margin-top: 10px; padding: 10px 12px; }
main .hr-hint p, .hr-hint p { font-size: 0.8125rem; line-height: 1.55; }
@media (max-width: 560px) {
  .hr-card { padding: 18px 16px; }
  .hr-field { grid-template-columns: minmax(0, 1fr) 150px; }
}
/* Regler ohne Hintergrundfläche aus den allgemeinen Formularstilen */
.hr-card .hr-slider { background: transparent; border: 0; padding: 0; box-shadow: none; border-radius: 0; }
/* Honorarrechner: optionale Schritte (Lohn, Zusatzleistungen) klappbar, zugeklappt nur die Kopfzeile mit Zusammenfassung */
.hr-klapp-kopf { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.hr-klappbar.hr-zu > :not(.hr-klapp-kopf) { display: none; }
.hr-klappbar.hr-zu .hr-klapp-kopf { margin-bottom: 0; }
.hr-optional { margin-left: 6px; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.hr-klapp-info { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--accent-glow); color: var(--accent-text); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.hr-klapp-pfeil { flex: none; width: 9px; height: 9px; margin: 0 4px 4px; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
.hr-klappbar:not(.hr-zu) .hr-klapp-pfeil { transform: rotate(-135deg); margin-top: 6px; margin-bottom: 0; }
.hr-klapp-kopf:hover h2 { color: var(--accent-text); }
.hr-opt-prozent { font: inherit; color: inherit; }
/* Honorarrechner, Zusatzleistungen: Häufigkeit und Preis in festen Spalten, damit alles untereinander steht */
#optionen-liste .opt-right { display: grid; grid-template-columns: 96px 104px; align-items: center; gap: 8px; }
#optionen-liste .opt-right .hr-freq-badge { justify-self: start; }
#optionen-liste .opt-price { text-align: right; }
.hr-klappbar:not(.hr-zu) .hr-klapp-pfeil { transform: rotate(225deg); margin-top: 5px; margin-bottom: 0; }
@media (max-width: 560px) {
  #optionen-liste .opt-right { grid-template-columns: 1fr; justify-items: end; gap: 4px; }
}
/* Ausgeblendete Felder bleiben ausgeblendet, auch mit dem Grid-Layout oben (z. B. Umsatz und Bilanzsumme bei Privatpersonen) */
.hr-field.section-hidden, .hr-card.section-hidden { display: none; }
/* Bei Privatpersonen: USt-Hinweis klein unter dem Betrag statt daneben (passt sonst nicht in die Preisspalte) */
#optionen-liste .opt-ust { display: block; font-size: 0.6875rem; font-weight: 500; line-height: 1.3; }
/* Schritt 1 eingeklappt: Kacheln und EÜR/Bilanz-Auswahl ausblenden (die ID-Regel #rechtsform-grid wäre sonst stärker) */
#section-rechtsform.hr-zu > :not(.hr-klapp-kopf) { display: none; }
/* Ergebnis-Kasten: heller (Petrol zu Dunkelblau) und Beträge auf einer Höhe */
.hr-result-hero { background: radial-gradient(110% 80% at 100% 0%, rgba(0, 183, 179, 0.28), transparent 60%), linear-gradient(145deg, #2B5A63 0%, #23434D 55%, #1F3943 100%); }
body.dark-theme .hr-result-hero { background: radial-gradient(110% 80% at 100% 0%, rgba(0, 183, 179, 0.22), transparent 60%), var(--bg-card); }
.hr-result-costs { align-items: stretch; }
.hr-cost-box { justify-content: space-between; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.14); }
.hr-cost-label { font-size: 0.75rem; white-space: nowrap; color: rgba(255, 255, 255, 0.82); }
#box-monatlich { background: rgba(0, 183, 179, 0.22); border-color: rgba(0, 183, 179, 0.6); }
#box-monatlich .hr-cost-val { color: #7FE3DF; }
/* Schrittnummern im Petrol des Ergebnis-Kastens statt Schwarz */
.hr-step-num { background: #2B5A63; color: #FFFFFF; }
body.dark-theme .hr-step-num { background: var(--accent); color: var(--ink); }