/*!
 * Theme Name:   Anwaltskanzlei Jurna (statischer Prototyp)
 * Description:  HTML/CSS-Vorlage für ein klassisches WordPress-Theme
 *               (Anpassung über den Customizer, kein Page-Builder).
 * Version:      0.9.0
 *
 * ─────────────────────────────────────────────────────────────────────
 *  WICHTIG FÜR DIE WP-PORTIERUNG
 *  Alle Design-Entscheidungen hängen an den Custom Properties im
 *  :root-Block ("Design-Tokens"). Im Theme werden genau diese Variablen
 *  per wp_add_inline_style() aus den Customizer-Werten überschrieben —
 *  der Rest des Stylesheets bleibt unangetastet.
 *  Mapping-Tabelle: siehe README.md → "Customizer-Mapping".
 * ─────────────────────────────────────────────────────────────────────
 */

/* ======================================================================
   1. LOKALE SCHRIFTEN (DSGVO: keine externen Font-CDNs)
   Dateien liegen unter assets/fonts/ · Lizenz: SIL Open Font License
   ====================================================================== */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jost-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-3-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-sans-3-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-700.woff2') format('woff2');
}

/* Metrik-angepasste Fallbacks: minimieren den Reflow beim Font-Swap (CLS) */
@font-face {
  font-family: 'Jost Fallback';
  src: local('Segoe UI'), local('Arial');
  size-adjust: 94%;
  ascent-override: 105%;
  descent-override: 28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Source Sans 3 Fallback';
  src: local('Segoe UI'), local('Arial');
  size-adjust: 97%;
  ascent-override: 101%;
  descent-override: 27%;
  line-gap-override: 0%;
}

/* ======================================================================
   2. DESIGN-TOKENS  →  Customizer-Settings (siehe README.md)
   ====================================================================== */

:root {
  /* Farben · Customizer-Sektion "Farben" */
  --jurna-color-primary:       #0F7E81; /* jurna_color_primary       */
  --jurna-color-primary-dark:  #0B6366; /* jurna_color_primary_dark  */
  --jurna-color-primary-soft:  #E1F1F0; /* jurna_color_primary_soft  */
  --jurna-color-navy:          #0D1E33; /* jurna_color_navy          */
  --jurna-color-ink:           #1C2E45; /* jurna_color_ink           */
  --jurna-color-text:          #4A5A6E; /* jurna_color_text          */
  --jurna-color-text-muted:    #5B6B7E; /* jurna_color_text_muted    */
  --jurna-color-danger:        #BE3A30; /* jurna_color_danger        */
  --jurna-color-bg:            #FFFFFF; /* jurna_color_bg            */
  --jurna-color-surface:       #F2F5F7; /* jurna_color_surface       */
  --jurna-color-card:          #FFFFFF;
  --jurna-color-border:        #DDE4EA; /* jurna_color_border        */
  --jurna-color-footer:        #EDF1F4; /* jurna_color_footer        */

  /* Abgeleitete Töne: im Theme per color-mix()/functions.php aus den
     Basis-Tokens berechnen, damit Customizer-Änderungen durchschlagen */
  --jurna-color-navy-hover:    color-mix(in srgb, var(--jurna-color-navy) 88%, #fff);
  --jurna-color-primary-tint:  color-mix(in srgb, var(--jurna-color-primary) 42%, #fff);
  --jurna-color-focus-light:   color-mix(in srgb, var(--jurna-color-primary) 55%, #fff);
  --jurna-color-row-alt:       color-mix(in srgb, var(--jurna-color-surface) 45%, #fff);

  /* Typografie · Customizer-Sektion "Typografie" */
  --jurna-font-heading: 'Jost', 'Jost Fallback', 'Segoe UI', system-ui, sans-serif;                /* jurna_font_heading */
  --jurna-font-body: 'Source Sans 3', 'Source Sans 3 Fallback', 'Segoe UI', system-ui, sans-serif; /* jurna_font_body    */
  --jurna-fs-base: 1.0625rem;   /* jurna_fs_base (17px) */

  /* Layout & Form */
  --jurna-container: 74rem;
  --jurna-radius:     .5rem;
  --jurna-radius-lg:  .875rem;
  --jurna-radius-pill: 999px;
  --jurna-shadow-sm: 0 1px 3px rgba(13, 30, 51, .08);
  --jurna-shadow-md: 0 10px 30px -12px rgba(13, 30, 51, .25);
  --jurna-shadow-lg: 0 24px 60px -24px rgba(13, 30, 51, .35);
}

/* ======================================================================
   3. BASIS / RESET
   ====================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--jurna-font-body);
  font-size: var(--jurna-fs-base);
  line-height: 1.65;
  color: var(--jurna-color-text);
  background: var(--jurna-color-bg);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--jurna-font-heading);
  color: var(--jurna-color-ink);
  line-height: 1.25;
  margin: 0 0 .6em;
  letter-spacing: .01em;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); font-weight: 700; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);  font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }

p { margin: 0 0 1em; }

a {
  color: var(--jurna-color-primary-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--jurna-color-primary); }

img, svg, video { max-width: 100%; height: auto; display: block; }

button, input, select {
  font: inherit;
  color: inherit;
}

/* Sichtbarer Tastatur-Fokus (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--jurna-color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.topbar :focus-visible,
.hero-media :focus-visible {
  outline-color: var(--jurna-color-focus-light);
}

/* Nur für Screenreader (WCAG 1.3.1) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip-Link (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: .75rem; top: -4rem;
  z-index: 1000;
  padding: .6rem 1.1rem;
  background: var(--jurna-color-navy);
  color: #fff;
  border-radius: var(--jurna-radius);
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus-visible { top: .75rem; color: #fff; }

.container {
  width: min(100% - 2.5rem, var(--jurna-container));
  margin-inline: auto;
}

/* ======================================================================
   4. BUTTONS & KLEINTEILE
   ====================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1.4rem;
  border: 0;
  border-radius: var(--jurna-radius);
  background: var(--jurna-color-primary);
  color: #fff;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--jurna-shadow-sm);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover {
  background: var(--jurna-color-primary-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--jurna-shadow-md);
}
.btn:active { transform: translateY(0); }

.btn--navy { background: var(--jurna-color-navy); }
.btn--navy:hover { background: var(--jurna-color-navy-hover); }

.btn--pill { border-radius: var(--jurna-radius-pill); }

.btn .icon { flex: none; }

.icon {
  width: 1.15em;
  height: 1.15em;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Abschnitts-Überschrift mit Unterstreichung wie im Design */
.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: .45rem;
  margin-bottom: 1.1rem;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 3.5rem; height: 3px;
  border-radius: 2px;
  background: var(--jurna-color-primary);
}

.kicker {
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--jurna-color-primary-dark);
  margin-bottom: .5rem;
}

/* ======================================================================
   5. HEADER  →  header.php
   ====================================================================== */

/* 5.1 Topbar */
.topbar {
  background: var(--jurna-color-navy);
  color: #fff;
  font-size: .85rem;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.6rem;
  padding-block: .3rem;
}
.topbar-note {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--jurna-font-heading);
  letter-spacing: .02em;
}
.topbar-note:hover { color: var(--jurna-color-primary-tint); }
.topbar-mark {
  display: inline-grid;
  place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--jurna-color-primary);
  flex: none;
}
.topbar-mark .icon { width: .95rem; height: .95rem; stroke: #fff; }

.topbar-end {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.topbar-contact {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #cfd8e3;
  text-decoration: none;
  font-size: .85rem;
}
.topbar-contact:hover { color: #fff; }
.topbar-contact .icon { width: 1rem; height: 1rem; stroke: currentColor; flex: none; }
/* E-Mail-Icon im runden Badge (wie links) → weiß, gleiche Größe wie .topbar-mark */
.topbar-contact .topbar-mark .icon { width: .95rem; height: .95rem; stroke: #fff; }

.social-nav ul {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0; padding: 0;
  list-style: none;
}
.social-nav a {
  display: inline-grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  color: #cfd8e3;
  transition: color .15s ease, background-color .15s ease;
}
.social-nav a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.social-nav .icon { width: 1rem; height: 1rem; }
.social-nav .icon--fill { fill: currentColor; stroke: none; }

/* 5.2 Masthead: Logo · Suche · Kontakt · Shop */
.masthead { padding-block: 1rem; }
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-branding { flex: none; }

/* Suche + Shop-Button links gruppiert; nimmt den freien Raum ein, damit die
   Aktions-Icons rechts außen sitzen. */
.masthead-mid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* Shop-/Login-Button einheitlich als heller Outline-Button (wie Login) */
.masthead-shop,
.masthead-login {
  flex: none;
  background: transparent;
  border: 1px solid var(--jurna-color-border);
  color: var(--jurna-color-ink);
}
.masthead-shop:hover,
.masthead-shop:focus-visible,
.masthead-login:hover,
.masthead-login:focus-visible {
  background: var(--jurna-color-surface);
  border-color: var(--jurna-color-primary);
  color: var(--jurna-color-primary-dark);
}
.site-title {
  margin: 0;
  font-family: var(--jurna-font-heading);
  font-size: clamp(0.78rem, 3.4vw, 1.35rem);
  font-weight: 700;
  letter-spacing: .015em;
  white-space: nowrap;
}
.site-title a {
  color: var(--jurna-color-ink);
  text-decoration: none;
}
.site-title a:hover { color: var(--jurna-color-primary-dark); }

.masthead-search {
  flex: 1 1 auto;
  min-width: 0; /* darf unter die Min-Content-Breite des Suchfelds schrumpfen */
  display: flex;
  max-width: 30rem;
  background: var(--jurna-color-card);
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-pill);
  padding: .25rem;
}
.masthead-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--jurna-color-ink);
  font-size: .92rem;
  padding: .35rem .75rem .35rem 1.15rem;
}
.masthead-search input::placeholder { color: var(--jurna-color-text-muted); opacity: 1; }
.masthead-search button {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--jurna-color-text-muted);
  cursor: pointer;
}
.masthead-search button:hover { color: var(--jurna-color-primary-dark); background: var(--jurna-color-surface); }

/* 5.3 Hauptnavigation */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--jurna-color-bg);
  border-block: 1px solid var(--jurna-color-border);
}
.navbar.is-stuck { box-shadow: var(--jurna-shadow-sm); }
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.4rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius);
  background: transparent;
  padding: .45rem .8rem;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .9rem;
  color: var(--jurna-color-ink);
  cursor: pointer;
}

.primary-nav ul {
  display: flex;
  gap: .25rem;
  margin: 0; padding: 0;
  list-style: none;
}
.primary-nav a {
  position: relative;
  display: block;
  padding: .95rem .9rem;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--jurna-color-ink);
  text-decoration: none;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: .9rem; right: .9rem; bottom: 0;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--jurna-color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.primary-nav a:hover { color: var(--jurna-color-primary-dark); }
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: var(--jurna-color-primary-dark); }

.nav-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0;
}
.nav-actions a {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.15rem; height: 2.15rem;
  border-radius: 50%;
  color: var(--jurna-color-ink);
  transition: background-color .15s ease, color .15s ease;
}
.nav-actions a:hover {
  background: var(--jurna-color-primary-soft);
  color: var(--jurna-color-primary-dark);
}
.nav-actions .badge {
  position: absolute;
  top: 0; right: -2px;
  min-width: 1.05rem; height: 1.05rem;
  padding-inline: .2rem;
  display: grid;
  place-items: center;
  border-radius: var(--jurna-radius-pill);
  background: var(--jurna-color-primary);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1;
}
/* Leeres Badge (Zähler 0) nicht anzeigen */
.nav-actions .badge:empty { display: none; }

/* ======================================================================
   6. INHALT / PANEL  →  front-page.php
   ====================================================================== */

.page-panel {
  background: var(--jurna-color-surface);
  border-radius: var(--jurna-radius-lg);
  padding: clamp(1.25rem, 4vw, 3rem);
  margin-block: 1.5rem 3rem;
}
.page-panel > * + * { margin-top: clamp(2rem, 5vw, 3.25rem); }

/* 6.1 Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.hero-copy .btn { margin-top: .5rem; }
.hero-title {
  display: inline-block;
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--jurna-color-primary);
  margin-bottom: 1rem;
}
.hero-more[hidden] { display: none; }

.hero-media {
  position: relative;
}
.hero-media img {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
  object-position: 62% 18%;
  border-radius: var(--jurna-radius-lg);
  box-shadow: var(--jurna-shadow-md);
  background: #dfe5ea;
}
.hero-media::before {
  content: "";
  position: absolute;
  inset: auto -14px -14px auto;
  width: 55%; height: 55%;
  border-radius: var(--jurna-radius-lg);
  background:
    radial-gradient(circle, var(--jurna-color-primary) 1.5px, transparent 1.6px) 0 0 / 14px 14px;
  opacity: .35;
  z-index: -1;
}

/* Sanfter Seiteneinstieg (respektiert reduzierte Bewegung, s. unten) */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *,
  .hero-media {
    animation: jurna-rise .6s ease both;
  }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4) { animation-delay: .22s; }
  .hero-copy > :nth-child(5) { animation-delay: .28s; }
  /* inhaltstolerant: weitere Kinder (redaktioneller Text!) ohne Sprünge */
  .hero-copy > :nth-child(n + 6) { animation-delay: .34s; }
  .hero-media { animation-delay: .15s; }
}
@keyframes jurna-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* 6.2 Karten-Grundform */
.card {
  background: var(--jurna-color-card);
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-lg);
  padding: clamp(1.1rem, 3vw, 1.75rem);
  box-shadow: var(--jurna-shadow-sm);
}

/* 6.3 Prozesskostenrechner */
.pk-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .9rem;
}
.pk-form .form-field { flex: 1 1 16rem; }

.form-field label {
  display: block;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .92rem;
  color: var(--jurna-color-ink);
  margin-bottom: .35rem;
}
.form-field input[type="text"] {
  width: 100%;
  padding: .62rem .9rem;
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius);
  background: #fff;
  color: var(--jurna-color-ink);
}
/* Placeholder: --jurna-color-text-muted hält 4,5:1 auf Weiß (WCAG 1.4.3) */
.form-field input::placeholder { color: var(--jurna-color-text-muted); opacity: 1; }
.form-field input:focus-visible { outline-offset: 0; }

/* Live-Region: bleibt immer gerendert (kein display:none), sonst werden
   Änderungen von Screenreadern nicht angekündigt (WCAG 4.1.3) */
.form-error {
  margin: .8rem 0 0;
  font-weight: 600;
  color: var(--jurna-color-danger);
}
.form-error:empty { margin: 0; }

/* Ergebnisbereich */
.pk-result { margin-top: 1.4rem; }
.pk-result[hidden] { display: none; }
.pk-result h3 { margin-bottom: .3rem; }

.pk-meta { margin-bottom: .8rem; }

.pk-options {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.6rem;
  margin-bottom: 1rem;
}
.pk-options label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  color: var(--jurna-color-ink);
}
.pk-options input[type="checkbox"] {
  width: 1.25rem; height: 1.25rem;
  margin: 0;
  accent-color: var(--jurna-color-primary);
}

.pk-notice {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .8rem 1rem;
  border-left: 4px solid var(--jurna-color-primary);
  border-radius: var(--jurna-radius);
  background: var(--jurna-color-primary-soft);
  color: var(--jurna-color-primary-dark);
  font-weight: 600;
  margin-bottom: 1rem;
}
.pk-notice[hidden] { display: none; }

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--jurna-radius);
}
.pk-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  background: #fff;
}
.pk-table caption { text-align: left; }
.pk-table th,
.pk-table td {
  padding: .55rem .8rem;
  border: 1px solid var(--jurna-color-border);
  text-align: right;
}
.pk-table thead th {
  background: var(--jurna-color-primary);
  color: #fff;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .02em;
}
.pk-table th[scope="row"],
.pk-table thead th:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--jurna-color-ink);
  background: none;
}
.pk-table thead th:first-child { background: var(--jurna-color-primary); }
.pk-table tbody tr:nth-child(even) td,
.pk-table tbody tr:nth-child(even) th[scope="row"] { background: var(--jurna-color-row-alt); }
.pk-table tfoot th,
.pk-table tfoot td,
.pk-table .pk-total th,
.pk-table .pk-total td {
  font-weight: 700;
  color: var(--jurna-color-ink);
  background: var(--jurna-color-primary-soft);
}
.pk-neg { color: var(--jurna-color-danger); }
.pk-disclaimer {
  margin: .8rem 0 0;
  font-size: .85rem;
  color: var(--jurna-color-text-muted);
}

/* 6.4 Video (Klick-Fassade, DSGVO-freundlich: Video liegt lokal) */
.video-stage {
  position: relative;
  border-radius: var(--jurna-radius-lg);
  overflow: hidden;
  box-shadow: var(--jurna-shadow-md);
  background: var(--jurna-color-navy);
}
.video-stage video { width: 100%; aspect-ratio: 16 / 9; }

.video-facade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: clamp(1.25rem, 4vw, 3rem);
  border: 0;
  cursor: pointer;
  text-align: left;
  background:
    linear-gradient(115deg,
      #ffffff 0%,
      color-mix(in srgb, var(--jurna-color-navy) 6%, #fff) 48%,
      color-mix(in srgb, var(--jurna-color-navy) 21%, #fff) 100%);
}
.video-facade-copy { max-width: 26rem; }
.video-facade-title {
  font-family: var(--jurna-font-heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 1rem + 3vw, 2.9rem);
  line-height: 1.1;
  color: var(--jurna-color-ink);
  margin: 0 0 .8rem;
}
.video-facade-tag {
  display: inline-block;
  padding: .3rem .9rem;
  background: var(--jurna-color-primary);
  color: #fff;
  font-family: var(--jurna-font-heading);
  font-weight: 700;
  font-size: clamp(.9rem, .7rem + 1vw, 1.3rem);
  letter-spacing: .09em;
  margin-bottom: .8rem;
}
.video-facade-sub {
  font-size: clamp(.95rem, .85rem + .5vw, 1.15rem);
  color: var(--jurna-color-ink);
  margin: 0;
}
.video-facade-play {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: clamp(3.5rem, 9vw, 5.5rem);
  height: clamp(3.5rem, 9vw, 5.5rem);
  border-radius: 50%;
  background: var(--jurna-color-primary);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .75), var(--jurna-shadow-md);
  transition: transform .18s ease, background-color .18s ease;
}
.video-facade:hover .video-facade-play {
  background: var(--jurna-color-primary-dark);
  transform: scale(1.06);
}
.video-facade-play svg {
  width: 38%; height: 38%;
  fill: #fff;
  margin-left: 6%;
}
.video-facade-duration {
  position: absolute;
  left: 1rem; bottom: .85rem;
  padding: .2rem .6rem;
  border-radius: var(--jurna-radius);
  background: rgba(13, 30, 51, .85);
  color: #fff;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

/* Mini-Mockup rechts in der Fassade (rein dekorativ) */
.video-facade-mock {
  justify-self: end;
  width: min(100%, 22rem);
  background: #fff;
  border-radius: .6rem;
  box-shadow: var(--jurna-shadow-lg);
  rotate: 4deg;
  padding: 1rem 1.1rem;
  font-size: .72rem;
  color: var(--jurna-color-ink);
}
.video-facade-mock strong {
  display: block;
  font-family: var(--jurna-font-heading);
  font-size: .85rem;
  border-bottom: 2px solid var(--jurna-color-primary);
  padding-bottom: .3rem;
  margin-bottom: .5rem;
}
/* Mockup-"Tabelle" als Grid aus <span> (valides Phrasing-Content im <button>) */
.video-facade-mock .mock-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.video-facade-mock .mock-grid > span {
  border: 1px solid var(--jurna-color-border);
  padding: .18rem .35rem;
  text-align: right;
  margin: 0 -1px -1px 0;   /* Rasterlinien nicht doppeln */
}
.video-facade-mock .mock-grid > span:nth-child(4n + 1) { text-align: left; }
.video-facade-mock .mock-h {
  background: var(--jurna-color-navy);
  color: #fff;
  font-weight: 600;
}
.video-facade-mock .pk-neg { color: var(--jurna-color-danger); }

/* 6.5 KI-Sektion */
/* Sprechblase unter der Ueberschrift (display:table erzwingt eigene Zeile
   in Inhaltsbreite; ::after bildet den Blasen-Zipfel) */
.ki-chip {
  display: table;
  position: relative;
  padding: .55rem 1.2rem;
  border-radius: var(--jurna-radius-lg);
  background: var(--jurna-color-primary);
  color: #fff;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  margin: .25rem 0 1.5rem;
  box-shadow: var(--jurna-shadow-sm);
}
.ki-chip::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  bottom: -.48rem;
  border-style: solid;
  border-width: .5rem .6rem 0 0;
  border-color: var(--jurna-color-primary) transparent transparent transparent;
}
.ki-chip:hover { background: var(--jurna-color-primary-dark); color: #fff; }
.ki-chip:hover::after { border-top-color: var(--jurna-color-primary-dark); }

.ki-form {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
}
.ki-input-wrap {
  flex: 1 1 20rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius);
  padding: .3rem .3rem .3rem .8rem;
}
.ki-input-wrap:focus-within {
  outline: 3px solid var(--jurna-color-primary);
  outline-offset: 2px;
}
.ki-input-wrap .icon { color: var(--jurna-color-primary-dark); flex: none; }
.ki-input-wrap input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: .45rem 0;
  color: var(--jurna-color-ink);
}
.ki-input-wrap input:focus { outline: none; }
.ki-input-wrap input::placeholder { color: var(--jurna-color-text-muted); opacity: 1; }

/* Live-Region: immer gerendert lassen (WCAG 4.1.3) */
.ki-status { margin: .8rem 0 0; font-weight: 600; color: var(--jurna-color-primary-dark); }
.ki-status:empty { margin: 0; }

/* 6.6 Erstberatung */
.cta-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}
.cta-split > div { flex: 1 1 24rem; }
.cta-split .btn { flex: none; }
.cta-split p:last-child { margin-bottom: 0; }
/* Ab Tablet: cituro-Button nicht mitwachsen lassen → Text füllt links, Button
   sitzt rechtsbündig am Rand (statt mittig in einer 50%-Spalte). Auf schmalen
   Screens bleibt die volle Breite (kein Überlaufen des breiten Buttons). */
@media (min-width: 48.0625rem) {
  .cta-split > .cta-cituro {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
  }
}

/* ── FAQ-Accordion (Häufige Fragen zur Erstberatung) ── */
.faq-list { display: grid; gap: .7rem; }
.faq-item {
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius);
  background: var(--jurna-color-card);
}
.faq-item[open] {
  border-color: color-mix(in srgb, var(--jurna-color-primary) 48%, var(--jurna-color-border));
  box-shadow: var(--jurna-shadow-sm);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--jurna-color-ink);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-q:hover { color: var(--jurna-color-primary-dark); }
.faq-q:focus-visible {
  outline: 2px solid var(--jurna-color-primary);
  outline-offset: -2px;
  border-radius: var(--jurna-radius);
}
.faq-chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: var(--jurna-color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-a {
  padding: 0 1.25rem 1.15rem;
  color: var(--jurna-color-text);
  line-height: 1.6;
}
.faq-a p { margin: 0; }
.faq-a p + p { margin-top: .7rem; }

/* Sicherheitsnetz: ein geschlossenes cituro-Overlay (ohne .visible) darf die
   Seite nie blockieren – siehe auch main.js. */
#cituro-booking-overlay:not(.visible) { display: none !important; }

/* ======================================================================
   7. FOOTER  →  footer.php
   ====================================================================== */

/* 7.1 Leistungsversprechen */
.benefits {
  background: var(--jurna-color-footer);
  border-top: 1px solid var(--jurna-color-border);
  padding-block: 1.75rem;
}
.benefits ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0; padding: 0;
  list-style: none;
}
.benefit {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.benefit-icon {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  flex: none;
  border: 0;
  border-radius: 1rem;
  color: #fff;
  background: linear-gradient(140deg,
    var(--jurna-color-primary) 0%,
    var(--jurna-color-primary-dark) 100%);
  box-shadow:
    0 8px 18px -8px color-mix(in srgb, var(--jurna-color-primary) 65%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .25s ease, box-shadow .25s ease;
}
.benefit:hover .benefit-icon {
  transform: translateY(-2px) rotate(-2deg);
  box-shadow:
    0 12px 22px -8px color-mix(in srgb, var(--jurna-color-primary) 70%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
@media (prefers-reduced-motion: reduce) {
  .benefit-icon { transition: none; }
  .benefit:hover .benefit-icon { transform: none; }
}
.benefit-icon .icon { width: 1.75rem; height: 1.75rem; stroke-width: 1.8; }
.benefit b {
  display: block;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  color: var(--jurna-color-ink);
  line-height: 1.35;
}
.benefit p span { display: block; font-size: .88rem; line-height: 1.4; color: var(--jurna-color-text-muted); }

/* 7.2 Footer-Spalten */
.site-footer {
  position: relative;
  background: var(--jurna-color-footer);
  padding-block: 2.5rem 0;
  overflow: hidden;
}
/* dezente Polygon-Textur unten links wie im Design */
.site-footer::before {
  content: "";
  position: absolute;
  left: -4rem; bottom: -6rem;
  width: 24rem; height: 24rem;
  background: conic-gradient(from 220deg, rgba(13,30,51,.05), rgba(13,30,51,0) 60%),
              conic-gradient(from 40deg at 30% 70%, rgba(15,126,129,.06), rgba(15,126,129,0) 55%);
  clip-path: polygon(0 25%, 45% 0, 80% 40%, 55% 100%, 0 85%);
  pointer-events: none;
}

.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2.2fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: 2.5rem;
}
.footer-col h2 {
  font-size: 1.05rem;
  font-weight: 600;
  position: relative;
  display: inline-block;
  padding-bottom: .4rem;
  margin-bottom: 1rem;
}
.footer-col h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 2.6rem; height: 3px;
  border-radius: 2px;
  background: var(--jurna-color-primary);
}
.footer-col p { font-size: .95rem; }

/* Footer-Akkordeon (Rechtliche Informationen): Desktop wie Überschrift, mobil aufklappbar */
.footer-acc-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: default;
  pointer-events: none;
}
.footer-acc-chevron { display: none; }
@media (max-width: 48rem) {
  /* Footer mobil kompakt: einspaltig, minimaler Abstand (Trennung kommt aus
     den Akkordeon-Linien, nicht aus großem Grid-Gap). */
  .footer-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 1.25rem; }
  .footer-col .footer-acc-head { display: block; margin-bottom: 0; padding-bottom: 0; }
  .footer-col .footer-acc-head::after { display: none; }
  .footer-acc-toggle {
    width: 100%;
    justify-content: space-between;
    padding: .7rem 0;
    cursor: pointer;
    pointer-events: auto;
    border-bottom: 1px solid var(--jurna-color-border);
  }
  .footer-acc-chevron {
    display: block;
    width: 1.1rem; height: 1.1rem;
    flex: none;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .2s ease;
  }
  .footer-acc-toggle[aria-expanded="true"] .footer-acc-chevron { transform: rotate(180deg); }
  .footer-acc-panel { display: none; }
  .footer-acc-panel.is-open { display: block; padding: .6rem 0 .5rem; }
}

.footer-menu {
  columns: 3;
  column-gap: 1rem;
  margin: 0; padding: 0;
  list-style: none;
}
.footer-menu li { margin-bottom: .55rem; break-inside: avoid; }
.footer-menu a {
  color: var(--jurna-color-text);
  font-size: .95rem;
  text-decoration: none;
}
.footer-menu a:hover {
  color: var(--jurna-color-primary-dark);
  text-decoration: underline;
}

.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--jurna-color-ink);
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 1.1rem;
}
.footer-phone:hover { color: var(--jurna-color-primary-dark); }
.footer-phone .icon { color: var(--jurna-color-primary-dark); }

.payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0; padding: 0;
  list-style: none;
}
.payment-icons li {
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--jurna-color-border);
  border-radius: .4rem;
  padding: .35rem .6rem;
  min-width: 4.4rem;
  min-height: 2.2rem;
}
.payment-icons svg { height: 1.1rem; width: auto; }

/* 7.3 Copyright-Zeile */
.footer-bottom {
  position: relative;
  border-top: 1px solid var(--jurna-color-border);
  padding-block: 1.1rem;
  text-align: center;
  font-size: .88rem;
  color: var(--jurna-color-text-muted);
}
.footer-bottom p { margin: 0; }

/* ======================================================================
   8. SCHWEBENDE HILFE
   ====================================================================== */

.help-widget {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}
.help-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 0;
  border-radius: var(--jurna-radius-pill);
  background: var(--jurna-color-primary);
  color: #fff;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .92rem;
  padding: .7rem 1.2rem;
  cursor: pointer;
  box-shadow: var(--jurna-shadow-md);
  transition: background-color .15s ease, transform .15s ease;
}
.help-toggle:hover { background: var(--jurna-color-primary-dark); transform: translateY(-1px); }

.help-panel {
  order: -1;   /* visuell über dem Button; im DOM steht der Button zuerst */
  width: min(19rem, calc(100vw - 2.5rem));
  background: #fff;
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-lg);
  box-shadow: var(--jurna-shadow-lg);
  padding: 1.1rem 1.2rem;
}
.help-panel[hidden] { display: none; }
.help-panel h2 { font-size: 1rem; margin-bottom: .5rem; }
.help-panel ul { margin: 0; padding: 0; list-style: none; }
.help-panel li { margin-top: .5rem; }
.help-panel a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--jurna-color-ink);
  font-weight: 600;
  text-decoration: none;
}
.help-panel a:hover { color: var(--jurna-color-primary-dark); }
.help-panel .icon { color: var(--jurna-color-primary-dark); }

/* ======================================================================
   9. RESPONSIVE
   ====================================================================== */

@media (max-width: 64rem) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-menu { columns: 2; }
  .benefits ul { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 48rem) {
  .topbar-inner { justify-content: center; flex-wrap: wrap; gap: .25rem 1rem; min-height: 0; padding-block: .45rem; }
  /* Topbar-Text immer einzeilig (skaliert mit der Breite statt umzubrechen) */
  .topbar-note { white-space: nowrap; font-size: clamp(.56rem, 2.7vw, .85rem); }
  .topbar-note .topbar-mark { flex: none; }

  /* Mobil: Suche, „Beratung & Abos" und „Login" ausblenden – nur Logo + Icons */
  .masthead-inner { flex-wrap: wrap; gap: .9rem .6rem; }
  .masthead-mid { display: none; }
  .nav-actions { margin-left: auto; }

  .hero { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 26rem; }
  .hero-media img { aspect-ratio: 4 / 3; }

  .video-facade { grid-template-columns: 1fr; }
  .video-facade-mock { display: none; }
  .video-facade-play {
    left: auto; top: auto;
    right: 1.25rem; bottom: 1.25rem;
    translate: none;
  }

  .cta-split .btn { flex: 1 1 auto; justify-content: center; }

  /* Leistungsversprechen: 2 pro Zeile, Icon über dem Text (kompakter) */
  .benefit { flex-direction: column; align-items: flex-start; gap: .55rem; }
  .benefit-icon { width: 3rem; height: 3rem; }
  .benefit-icon .icon { width: 1.5rem; height: 1.5rem; }
}

/* Tablet: einreihiges Masthead wird zu eng, das Suchfeld schrumpft auf den
   Button zusammen. Logo + Aktions-Icons bleiben oben, die Suchleiste (mit
   „Beratung & Abos" + „Login") rutscht in eine eigene, volle Zeile darunter. */
@media (min-width: 48.0625rem) and (max-width: 64rem) {
  .masthead-inner { flex-wrap: wrap; row-gap: .85rem; }
  .nav-actions { order: 1; margin-left: auto; }
  .masthead-mid { order: 2; flex: 1 1 100%; }
  .masthead-search { max-width: none; }
}

@media (max-width: 35rem) {
  .footer-grid { grid-template-columns: 1fr; }
  .pk-form .btn { flex: 1 1 auto; justify-content: center; }
  /* Suchfeld über die volle Breite, Shop + Login teilen die Zeile darunter */
  .masthead-mid { flex-wrap: wrap; gap: .6rem; }
  .masthead-search { flex: 1 1 100%; }
  .masthead-shop,
  .masthead-login {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;   /* Text nie umbrechen */
    gap: .35rem;
    padding-inline: .6rem;
    font-size: .85rem;
  }
  .masthead-shop .icon,
  .masthead-login .icon { flex: none; }

  /* nur Icon auf sehr kleinen Screens – Text bleibt für Screenreader
     erhalten (sr-only-Technik statt display:none, WCAG 4.1.2) */
  .help-toggle span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .help-toggle { padding: .8rem; border-radius: 50%; }
}

/* Sehr schmale Screens: Button-Icons ausblenden, damit der Text garantiert
   in einer Zeile bleibt */
@media (max-width: 22rem) {
  .masthead-shop .icon,
  .masthead-login .icon { display: none; }
}

/* ======================================================================
   10. REDUZIERTE BEWEGUNG (WCAG 2.3.3)
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ======================================================================
   THEME-ERGÄNZUNG · Video-Fassade mit eigenem Vorschaubild
   (Customizer: jurna_video_poster – ersetzt die CSS-gestaltete Fassade;
   das Bild bringt Titel/Play-Grafik selbst mit, daher keine Dopplung)
   ====================================================================== */
.video-facade--poster { display: block; padding: 0; }
.video-facade-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.video-facade--poster:hover .video-facade-poster,
.video-facade--poster:focus-visible .video-facade-poster { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .video-facade-poster { transition: none; }
  .video-facade--poster:hover .video-facade-poster,
  .video-facade--poster:focus-visible .video-facade-poster { transform: none; }
}

/* ======================================================================
   THEME-ERGÄNZUNG · Hero „Kanzlei-Bühne“ + Über-Sektion
   Dunkle Bühne im Duktus des Erklärvideo-Thumbnails. Alle Töne werden per
   color-mix() aus den Customizer-Tokens abgeleitet und folgen Farbänderungen.
   ====================================================================== */

.hero2 {
  position: relative;
  overflow: hidden;
  /* Blau (Navy) fliesst diagonal in Tuerkisgruen (Primary) ueber – dezenter
     Verlauf plus ein weicher Teal-Schimmer unten rechts. */
  background:
    radial-gradient(48rem 32rem at 4% -14%,
      color-mix(in srgb, var(--jurna-color-primary) 36%, transparent) 0%, transparent 60%),
    radial-gradient(44rem 32rem at 110% 122%,
      color-mix(in srgb, var(--jurna-color-primary) 58%, transparent) 0%, transparent 60%),
    linear-gradient(125deg,
      var(--jurna-color-navy) 0%,
      color-mix(in srgb, var(--jurna-color-navy) 78%, var(--jurna-color-primary)) 55%,
      color-mix(in srgb, var(--jurna-color-navy) 58%, var(--jurna-color-primary)) 100%);
}

/* Waage als Wasserzeichen */
.hero2-mark {
  position: absolute;
  top: -4rem;
  right: -5rem;
  width: 32rem;
  height: 32rem;
  fill: none;
  stroke: #fff;
  stroke-width: .55;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .055;
  transform: rotate(9deg);
  pointer-events: none;
}

.hero2-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* ── Copy ── */
.hero2-kicker {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1rem;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.hero2-kicker::before {
  content: "";
  width: 2.25rem;
  height: 2px;
  border-radius: 1px;
  background: var(--jurna-color-primary);
  flex: none;
}

.hero2-title {
  margin: 0 0 1.1rem;
  font-family: var(--jurna-font-heading);
  font-weight: 700;
  font-size: clamp(2.05rem, 1.1rem + 3.1vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: #fff;
}

.hero2-lead {
  margin: 0 0 1.75rem;
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--jurna-color-primary-soft) 78%, #fff);
}

.hero2-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.75rem;
}

/* Ghost-Button (nur auf dunkler Bühne) */
.btn--ghost {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, .1);
  border-color: var(--jurna-color-primary-tint);
  color: #fff;
}

/* Masonry-/Tag-Flow: Chips packen sich nebeneinander und brechen nach Bedarf um */
.hero2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero2-chips li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .8rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--jurna-radius-pill);
  background: rgba(255, 255, 255, .05);
  font-size: .84rem;
  color: color-mix(in srgb, var(--jurna-color-primary-soft) 62%, #fff);
}
.hero2-chips .icon {
  width: .9rem;
  height: .9rem;
  stroke: var(--jurna-color-primary-tint);
  flex: none;
}

/* ── Porträt ── */
.hero2-media { position: relative; }
.hero2-frame {
  position: relative;
  margin: 0 0 0 auto;
  max-width: 30rem;
}
.hero2-frame::before {                 /* versetzter Zierrahmen */
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(.9rem, .9rem);
  border: 1px solid color-mix(in srgb, var(--jurna-color-primary) 55%, transparent);
  border-radius: var(--jurna-radius-lg);
  pointer-events: none;
}
.hero2-frame img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--jurna-radius-lg);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--jurna-shadow-lg);
}
.hero2-nameplate {
  position: absolute;
  left: -1rem;
  bottom: 1.1rem;
  display: grid;
  gap: .1rem;
  padding: .6rem .95rem;
  background: var(--jurna-color-card);
  border-left: 3px solid var(--jurna-color-primary);
  border-radius: var(--jurna-radius);
  box-shadow: var(--jurna-shadow-md);
}
.hero2-nameplate strong {
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .95rem;
  color: var(--jurna-color-ink);
}
.hero2-nameplate span {
  font-size: .76rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--jurna-color-text-muted);
}

/* ── Standort + Fachgebiete (unter dem Porträt) ── */
.hero2-cred {
  margin: 1.75rem 0 0 auto;   /* rechtsbündig wie das Porträt */
  max-width: 30rem;
  display: grid;
  gap: .75rem;
}
.hero2-reach {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--jurna-color-primary-soft) 70%, #fff);
}
.hero2-reach .icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--jurna-color-primary-tint);
  stroke-width: 1.7;
  flex: none;
}
/* Fachgebiete als Overlay-Stapel im freien (linken) Bildbereich */
.hero2-areas {
  position: absolute;
  top: clamp(.6rem, 2vw, 1rem);
  left: clamp(.6rem, 2vw, 1rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(.32rem, 1.2vw, .45rem);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: calc(100% - 2rem);
}
.hero2-areas li {
  padding: clamp(.26rem, 1vw, .42rem) clamp(.6rem, 2vw, .8rem);
  border-radius: var(--jurna-radius-pill);
  background: color-mix(in srgb, var(--jurna-color-navy) 66%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 2px 10px rgba(13, 30, 51, .28);
  font-size: clamp(.72rem, 2.3vw, .8rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  white-space: nowrap;
}

/* ── Auftritt (nur ohne Motion-Einschränkung) ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes jurna-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes jurna-drift {
    from { opacity: 0; transform: translateX(22px); }
    to   { opacity: 1; transform: none; }
  }
  .hero2-copy > * { animation: jurna-rise .6s cubic-bezier(.22, .8, .3, 1) both; }
  .hero2-copy > *:nth-child(1) { animation-delay: .05s; }
  .hero2-copy > *:nth-child(2) { animation-delay: .13s; }
  .hero2-copy > *:nth-child(3) { animation-delay: .21s; }
  .hero2-copy > *:nth-child(4) { animation-delay: .29s; }
  .hero2-copy > *:nth-child(5) { animation-delay: .37s; }
  .hero2-media { animation: jurna-drift .7s cubic-bezier(.22, .8, .3, 1) .25s both; }
}

/* ── Responsive ── */
@media (max-width: 56rem) {
  .hero2-inner { grid-template-columns: 1fr; }
  .hero2-mark { top: auto; bottom: -6rem; right: -7rem; opacity: .04; }
  .hero2-frame { margin: 0 auto; max-width: 26rem; }
  .hero2-cred { margin-inline: auto; max-width: 26rem; }
  /* Namensschild bleibt im Bild (unten links), nur weiter nach innen gerückt,
     damit es nicht über den Rand ragt. */
  .hero2-nameplate { left: .75rem; right: auto; bottom: .75rem; }
}

/* Schmale Screens: Person im Porträt nach rechts rücken, damit die
   Fachgebiets-Tags (links) nicht ins Gesicht laufen. Das etwas höhere
   Seitenverhältnis schafft den horizontalen Beschnitt-Spielraum; die
   linksbündige object-position zeigt die freie Fläche links. */
@media (max-width: 35rem) {
  .hero2-frame img { aspect-ratio: 4 / 3; object-position: 0% center; }
}
@media (max-width: 48rem) {
  .hero2-lead { font-size: 1.05rem; }
  .hero2-cta .btn { flex: 1 1 auto; justify-content: center; }
  /* Kicker immer einzeilig: kleinere Schrift + engeres Sperren + kürzerer Strich */
  .hero2-kicker {
    font-size: clamp(.56rem, 2.9vw, .82rem);
    letter-spacing: .06em;
    gap: .5rem;
    white-space: nowrap;
  }
  .hero2-kicker::before { width: 1.4rem; }
}

/* ── Über die Kanzlei ── */
.about-copy {
  max-width: none;
}
@media (min-width: 62rem) {
  .about-copy {
    columns: 2;
    column-gap: 3.5rem;
    column-rule: 1px solid var(--jurna-color-border);
  }
  .about-copy p { break-inside: avoid-column; }
}
.about-copy p:first-child { margin-top: 0; }

/* „Über die Kanzlei" auf Mobilgeräten einklappbar (Desktop: immer voll) */
.about-toggle { display: none; }
@media (max-width: 48rem) {
  .about-copy {
    max-height: 14rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 58%, transparent);
    mask-image: linear-gradient(#000 58%, transparent);
  }
  .about-copy.is-open {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .about-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    padding: .5rem 1rem;
    background: transparent;
    border: 1px solid var(--jurna-color-border);
    border-radius: var(--jurna-radius-pill);
    color: var(--jurna-color-primary-dark);
    font-family: var(--jurna-font-heading);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
  }
  .about-toggle-icon {
    width: 1rem; height: 1rem;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .2s ease;
  }
  .about-toggle[aria-expanded="true"] .about-toggle-icon { transform: rotate(180deg); }
}

/* ======================================================================
   THEME-ERGÄNZUNG · Prozesskostenrechner mobil: gestapelte Karten
   statt horizontalem Scrollen (kein Scrollbalken auf kleinen Screens).
   Die Spaltenbeschriftung kommt aus data-label der Zellen; der thead
   bleibt für Screenreader erhalten (sr-only-Muster).
   ====================================================================== */
@media (max-width: 44rem) {
  .pk-table { min-width: 0; border: 0; }
  .pk-table thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
  }
  .pk-table tbody,
  .pk-table tbody tr,
  .pk-table th[scope="row"],
  .pk-table td { display: block; width: 100%; }
  .pk-table tbody tr {
    border: 1px solid var(--jurna-color-border);
    border-radius: var(--jurna-radius);
    overflow: hidden;
    background: var(--jurna-color-card);
  }
  .pk-table tbody tr + tr { margin-top: .8rem; }
  .pk-table th[scope="row"] {
    border: 0;
    border-bottom: 1px solid var(--jurna-color-border);
    background: var(--jurna-color-surface);
    font-size: .92rem;
  }
  .pk-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border: 0;
    border-bottom: 1px solid var(--jurna-color-border);
  }
  .pk-table td:last-child { border-bottom: 0; }
  .pk-table td::before {
    content: attr(data-label);
    font-size: .82rem;
    font-weight: 600;
    color: var(--jurna-color-text-muted);
    text-align: left;
  }
  /* Zebra-Streifen zurücksetzen – die Zeilen sind jetzt eigene Karten */
  .pk-table tbody tr:nth-child(even) td,
  .pk-table tbody tr:nth-child(even) th[scope="row"] { background: var(--jurna-color-card); }
  .pk-table tbody tr:nth-child(even) th[scope="row"] { background: var(--jurna-color-surface); }
  .pk-table .pk-total th[scope="row"],
  .pk-table .pk-total td,
  .pk-table tbody tr.pk-total:nth-child(even) td { background: var(--jurna-color-primary-soft); }
}

/* ======================================================================
   THEME-ERGÄNZUNG · KI-Chatbot (AI Engine) im Theme-Look
   Scoped auf .ki-embed. Das „messages"-Theme des Plugins baut Sprechblasen-
   Zipfel aus ::before (Blasenfarbe, hart auf Schwarz/Grau kodiert) + ::after
   (Maske = Hintergrundfarbe) und liefert eine leere schwarze Fussleiste.
   Hier vollstaendig auf die Jurna-Tokens umgefaerbt.
   ====================================================================== */
.ki-embed .mwai-chat { font-size: 1rem; }

/* Chat-Karte (weisse Flaeche, gerahmt, im Panel „schwebend") */
.ki-embed .mwai-body {
  background: var(--jurna-color-card) !important;
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-lg);
  overflow: hidden;
  box-shadow: var(--jurna-shadow-sm);
}
.ki-embed .mwai-conversation { padding: 1.1rem 1.1rem .35rem; }

/* Sprechblasen */
.ki-embed .mwai-reply {
  border-radius: var(--jurna-radius);
  padding: .6rem 1rem;
  font-size: .98rem;
  line-height: 1.55;
  max-width: 88%;
}
.ki-embed .mwai-reply.mwai-ai {
  background: var(--jurna-color-surface) !important;
  color: var(--jurna-color-ink) !important;
}
.ki-embed .mwai-reply.mwai-user {
  background: var(--jurna-color-primary-soft) !important;
  color: var(--jurna-color-ink) !important;
}
/* Blasen-Zipfel einfaerben: ::before = Blasenfarbe, ::after = Kartenfarbe (Maske) */
.ki-embed .mwai-reply.mwai-ai::before   { background: var(--jurna-color-surface) !important; }
.ki-embed .mwai-reply.mwai-user::before { background: var(--jurna-color-primary-soft) !important; }
.ki-embed .mwai-reply.mwai-ai::after,
.ki-embed .mwai-reply.mwai-user::after  { background: var(--jurna-color-card) !important; }

/* Namens-Label (Holger:/Sie:) als dezente Kaptitälchen */
.ki-embed .mwai-name {
  display: block;
  font-family: var(--jurna-font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--jurna-color-text-muted) !important;
  margin-bottom: .15rem;
}

/* Eingabezeile: Feld + Button mit klarem Abstand, sauber zentriert */
.ki-embed .mwai-input {
  padding: .9rem 1.1rem 1.1rem !important;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.ki-embed .mwai-input-text {
  background: var(--jurna-color-card) !important;
  border: 1px solid var(--jurna-color-border) !important;
  border-radius: var(--jurna-radius) !important;
  padding: .35rem .35rem .35rem .6rem !important;
  margin-bottom: 0 !important;
}
.ki-embed .mwai-input-text:focus-within {
  border-color: var(--jurna-color-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jurna-color-primary) 18%, transparent);
}
.ki-embed .mwai-input-text textarea {
  background: transparent !important;
  color: var(--jurna-color-ink) !important;
  border: 0 !important;
  font-family: var(--jurna-font-body) !important;
  font-size: 1rem !important;
}
.ki-embed .mwai-file-upload { color: var(--jurna-color-text-muted) !important; }
.ki-embed .mwai-file-upload:hover { color: var(--jurna-color-primary) !important; }

/* Senden/Löschen-Button: eigenständig, mit Luft, taktiler */
.ki-embed .mwai-input-submit {
  flex: none;
  /* Plugin erzwingt sonst width/min-width: 70px → Padding wird abgeschnitten */
  width: auto !important;
  min-width: 0 !important;
  /* Button ist absolut positioniert und liegt über dem Eingabefeld; weiter
     nach innen rücken, damit er sauber im Feld-Rahmen sitzt (nicht übersteht). */
  right: 1.75rem !important;
  min-height: 2.95rem !important;
  padding: .7rem 1.9rem !important;
  background: var(--jurna-color-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--jurna-radius) !important;
  font-family: var(--jurna-font-body) !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  letter-spacing: .005em;
  box-shadow: var(--jurna-shadow-sm) !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.ki-embed .mwai-input-submit span { font-weight: 500 !important; }
.ki-embed .mwai-input-submit:hover,
.ki-embed .mwai-input-submit:focus-visible {
  background: var(--jurna-color-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--jurna-shadow-md) !important;
}

/* Leere schwarze Fussleiste des Plugins entfernen */
.ki-embed .mwai-footer { display: none !important; }

/* ======================================================================
   THEME-ERGÄNZUNG · Shop: Abo-Preisseite
   Kompaktes dunkles Kopfband (nutzt .hero2-mark/-kicker), drei Preiskarten
   (hervorgehobenes Paket als Navy-Karte), Panel gemeinsamer Leistungen,
   Konditionszeile, Einzelleistungs-Karten.
   ====================================================================== */

/* ── Kopfband ── */
.shop-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(40rem 24rem at 10% -30%,
      color-mix(in srgb, var(--jurna-color-primary) 30%, transparent) 0%, transparent 60%),
    linear-gradient(128deg,
      var(--jurna-color-navy) 0%,
      color-mix(in srgb, var(--jurna-color-navy) 86%, var(--jurna-color-primary)) 100%);
}
.shop-hero .hero2-mark { width: 24rem; height: 24rem; top: -6rem; right: -6rem; }
.shop-hero-inner {
  position: relative;
  padding-block: clamp(2rem, 5vw, 3.25rem);
}
.shop-hero-title {
  margin: 0 0 .6rem;
  font-family: var(--jurna-font-heading);
  font-weight: 700;
  font-size: clamp(1.7rem, 1rem + 2.4vw, 2.6rem);
  line-height: 1.12;
  color: #fff;
  text-wrap: balance;
}
.shop-hero-text {
  margin: 0;
  max-width: 44rem;
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--jurna-color-primary-soft) 78%, #fff);
}

/* ── Preiskarten ── */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
  margin-block: clamp(2rem, 5vw, 3.25rem) 0;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--jurna-color-card);
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-lg);
  box-shadow: var(--jurna-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--jurna-shadow-md); }
.plan-name {
  margin: 0 0 .35rem;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .01em;
  color: var(--jurna-color-ink);
}
.plan-price { margin: 0 0 1.1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.tax-suffix {
  flex-basis: 100%;
  font-size: .78rem;
  color: var(--jurna-color-text-muted);
}
.plan--featured .tax-suffix { color: color-mix(in srgb, var(--jurna-color-primary-soft) 60%, #fff); }
.extra-price .tax-suffix { display: inline; flex-basis: auto; font-weight: 400; }
.plan-amount {
  font-family: var(--jurna-font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.7rem);
  line-height: 1;
  color: var(--jurna-color-primary-dark);
  font-variant-numeric: tabular-nums;
}
.plan-period { font-size: .95rem; color: var(--jurna-color-text-muted); }
.plan-note {
  margin: -.5rem 0 .9rem;
  font-size: .85rem;
  color: var(--jurna-color-text-muted);
}
.plan--featured .plan-note { color: color-mix(in srgb, var(--jurna-color-primary-soft) 65%, #fff); }
.plan-list {
  margin: 0 0 1.4rem;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--jurna-color-border);
  display: grid;
  gap: .55rem;
}
.plan-list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; min-width: 0; overflow-wrap: anywhere; }
.plan-list .icon { width: 1rem; height: 1rem; flex: none; margin-top: .2rem; stroke: var(--jurna-color-primary); }
.plan-cta { margin: auto 0 0; }
.plan-cta .btn { width: 100%; justify-content: center; }
.plan-more { margin: .65rem 0 0; text-align: center; font-size: .88rem; }
.plan-more a { color: var(--jurna-color-text-muted); }
.plan-more a:hover { color: var(--jurna-color-primary-dark); }

/* Outline-Button (helle Karten) */
.btn--outline {
  background: transparent;
  border: 1.5px solid var(--jurna-color-primary);
  color: var(--jurna-color-primary-dark);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--jurna-color-primary);
  color: #fff;
}

/* Hervorgehobenes Paket */
.plan--featured {
  background:
    radial-gradient(24rem 16rem at 85% -20%,
      color-mix(in srgb, var(--jurna-color-primary) 34%, transparent) 0%, transparent 62%),
    linear-gradient(150deg,
      var(--jurna-color-navy) 0%,
      color-mix(in srgb, var(--jurna-color-navy) 84%, var(--jurna-color-primary)) 100%);
  border-color: color-mix(in srgb, var(--jurna-color-primary) 45%, transparent);
  box-shadow: var(--jurna-shadow-lg);
}
.plan--featured .plan-name { color: #fff; }
.plan--featured .plan-amount { color: var(--jurna-color-primary-tint); }
.plan--featured .plan-period { color: color-mix(in srgb, var(--jurna-color-primary-soft) 65%, #fff); }
.plan--featured .plan-list { border-top-color: rgba(255, 255, 255, .18); }
.plan--featured .plan-list li { color: color-mix(in srgb, var(--jurna-color-primary-soft) 80%, #fff); }
.plan--featured .plan-list .icon { stroke: var(--jurna-color-primary-tint); }
.plan--featured .plan-more a { color: color-mix(in srgb, var(--jurna-color-primary-soft) 60%, #fff); }
.plan--featured .plan-more a:hover { color: #fff; }
.plan-badge {
  position: absolute;
  top: -.85rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: .3rem .9rem;
  border-radius: var(--jurna-radius-pill);
  background: var(--jurna-color-primary);
  color: #fff;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--jurna-shadow-sm);
}

/* ── Gemeinsame Leistungen ── */
.plans-included {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--jurna-color-primary-soft);
  border-radius: var(--jurna-radius-lg);
}
.plans-included-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem 2.5rem;
}
.plans-included-list li { display: flex; gap: .6rem; align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }
.plans-included-list .icon { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .2rem; stroke: var(--jurna-color-primary-dark); }

/* ── Konditionen + Einzelleistungen ── */
.plans-terms {
  margin: 1.25rem 0 0;
  font-size: .85rem;
  color: var(--jurna-color-text-muted);
  text-align: center;
  text-wrap: balance;
}
.extras { margin-block: clamp(2.5rem, 6vw, 4rem); }
.extras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}
.extra-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--jurna-color-card);
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-lg);
  box-shadow: var(--jurna-shadow-sm);
}
.extra-card h3 {
  margin: 0 0 .3rem;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--jurna-color-ink);
}
.extra-price {
  margin: 0 0 .6rem;
  font-family: var(--jurna-font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--jurna-color-primary-dark);
}
.extra-text { margin: 0 0 1rem; font-size: .92rem; color: var(--jurna-color-text-muted); }
.extra-card p:last-child { margin: auto 0 0; }
.extra-card .btn { width: 100%; justify-content: center; }

/* ── Auftritt ── */
@media (prefers-reduced-motion: no-preference) {
  .plans .plan { animation: jurna-rise .55s cubic-bezier(.22, .8, .3, 1) both; }
  .plans .plan:nth-child(1) { animation-delay: .06s; }
  .plans .plan:nth-child(2) { animation-delay: .14s; }
  .plans .plan:nth-child(3) { animation-delay: .22s; }
}

/* ── Responsive ── */
@media (max-width: 62rem) {
  .plans { grid-template-columns: 1fr; max-width: 28rem; margin-inline: auto; }
  .plans-included-list { grid-template-columns: 1fr; }
}

/* ======================================================================
   THEME-ERGÄNZUNG · Produkt-Einzelseiten („Mandats-Dossier“)
   Schlankes Kopfband, Kaufbox links (inkl. gestyltem WooCommerce-Formular
   mit Variationsauswahl), Inhalt rechts, „Weitere Angebote“ darunter.
   ====================================================================== */

/* ── Kopfband ── */
.pdp-hero {
  background:
    radial-gradient(36rem 20rem at 12% -40%,
      color-mix(in srgb, var(--jurna-color-primary) 28%, transparent) 0%, transparent 60%),
    linear-gradient(128deg,
      var(--jurna-color-navy) 0%,
      color-mix(in srgb, var(--jurna-color-navy) 86%, var(--jurna-color-primary)) 100%);
}
.pdp-hero-inner { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.pdp-back { margin: 0 0 1rem; }
.pdp-back a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  color: color-mix(in srgb, var(--jurna-color-primary-soft) 65%, #fff);
  text-decoration: none;
}
.pdp-back a:hover { color: #fff; }
.pdp-back .icon { width: .95rem; height: .95rem; }
.pdp-title {
  margin: 0 0 .4rem;
  font-family: var(--jurna-font-heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.4rem);
  line-height: 1.12;
  color: #fff;
  text-wrap: balance;
}
.pdp-tagline {
  margin: 0;
  max-width: 46rem;
  font-size: 1rem;
  color: color-mix(in srgb, var(--jurna-color-primary-soft) 75%, #fff);
}

/* ── Dossier-Grid ── */
.pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  margin-block: clamp(1.75rem, 4vw, 2.75rem) 0;
}
.pdp-buy {
  position: sticky;
  top: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--jurna-color-card);
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-lg);
  box-shadow: var(--jurna-shadow-md);
}
.pdp-buy .plan-price { margin-bottom: 1rem; }
.pdp-buy .plan-list { margin-bottom: 1.25rem; }
.pdp-terms {
  margin: 1rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--jurna-color-text-muted);
}
.pdp-content { display: grid; gap: 1.75rem; min-width: 0; }
.pdp-panel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--jurna-color-card);
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-lg);
}
.pdp-panel .plans-included-list { grid-template-columns: 1fr; }
.pdp-desc p:first-child { margin-top: 0; }
.pdp-desc p:last-child { margin-bottom: 0; }

/* ── Preisübersicht (variable Produkte) ── */
.pdp-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.pdp-table th,
.pdp-table td {
  padding: .5rem .8rem;
  border-bottom: 1px solid var(--jurna-color-border);
  text-align: left;
}
.pdp-table td { text-align: right; font-weight: 600; color: var(--jurna-color-ink); }
.pdp-table thead th {
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--jurna-color-text-muted);
}
.pdp-table thead th:last-child { text-align: right; }
.pdp-table tbody tr:last-child th,
.pdp-table tbody tr:last-child td { border-bottom: 0; }
.pdp-table tbody tr:hover { background: var(--jurna-color-row-alt); }

/* ── WooCommerce-Formular in der Kaufbox ── */
.pdp-form form.cart { display: grid; gap: .9rem; }
.pdp-form .variations { width: 100%; border-collapse: collapse; }
.pdp-form .variations th,
.pdp-form .variations td { display: block; width: 100%; padding: 0; border: 0; text-align: left; }
.pdp-form .variations .label label {
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .9rem;
  color: var(--jurna-color-ink);
}
.pdp-form .variations select {
  width: 100%;
  margin-top: .35rem;
  padding: .6rem .75rem;
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius);
  background: var(--jurna-color-card);
  color: var(--jurna-color-ink);
  font-family: var(--jurna-font-body);
  font-size: .98rem;
}
.pdp-form .variations select:focus-visible {
  outline: 2px solid var(--jurna-color-primary);
  outline-offset: 1px;
}
.pdp-form .reset_variations {
  display: inline-block;
  margin-top: .4rem;
  font-size: .82rem;
  color: var(--jurna-color-text-muted);
}
.pdp-form .woocommerce-variation-price {
  font-family: var(--jurna-font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--jurna-color-primary-dark);
}
.pdp-form .woocommerce-variation-price del { opacity: .5; font-weight: 400; }
.pdp-form .woocommerce-variation-availability { font-size: .85rem; color: var(--jurna-color-text-muted); }
.pdp-form .quantity input {
  width: 4.5rem;
  padding: .55rem .6rem;
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius);
  text-align: center;
  font-family: var(--jurna-font-body);
  font-size: 1rem;
}
/* Hohe Spezifitaet noetig: WooCommerce .woocommerce button.button.alt (lila)
   ueberstimmt sonst die Theme-Farbe. */
.woocommerce .pdp-form button.single_add_to_cart_button,
.pdp-form .single_add_to_cart_button {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.4rem;
  border: 0;
  border-radius: var(--jurna-radius);
  background: var(--jurna-color-primary);
  color: #fff;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s ease;
}
.woocommerce .pdp-form button.single_add_to_cart_button:hover,
.woocommerce .pdp-form button.single_add_to_cart_button:focus-visible,
.pdp-form .single_add_to_cart_button:hover,
.pdp-form .single_add_to_cart_button:focus-visible {
  background: var(--jurna-color-primary-dark);
  color: #fff;
}
.woocommerce .pdp-form button.single_add_to_cart_button.disabled,
.woocommerce .pdp-form button.single_add_to_cart_button:disabled,
.pdp-form .single_add_to_cart_button.disabled,
.pdp-form .single_add_to_cart_button:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--jurna-color-primary);
  color: #fff;
}
.pdp-form .woocommerce-variation-add-to-cart { display: grid; gap: .9rem; }
.pdp-form .single_variation_wrap { display: grid; gap: .5rem; }
.extra-period { font-size: .85rem; font-weight: 400; color: var(--jurna-color-text-muted); }

/* ── Responsive ── */
@media (max-width: 62rem) {
  .pdp-grid { grid-template-columns: 1fr; }
  .pdp-buy { position: static; order: -1; }
}

/* ======================================================================
   THEME-ERGÄNZUNG · Klassische WooCommerce-Seiten (Warenkorb/Kasse/Konto)
   Buttons und Tabellen in Theme-Optik (WooCommerce-Lila überstimmen).
   ====================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .checkout-button {
  background: var(--jurna-color-primary);
  color: #fff;
  border: 0;
  border-radius: var(--jurna-radius);
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  transition: background .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .checkout-button:hover {
  background: var(--jurna-color-primary-dark);
  color: #fff;
}
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  background: var(--jurna-color-primary);
  color: #fff;
  opacity: .5;
}
.woocommerce table.shop_table {
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius);
  font-variant-numeric: tabular-nums;
}
.woocommerce table.shop_table th {
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  color: var(--jurna-color-ink);
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { border-color: var(--jurna-color-border); }
.woocommerce .cart_totals h2,
.woocommerce-cart .cart-collaterals h2 {
  font-family: var(--jurna-font-heading);
  color: var(--jurna-color-ink);
}
.woocommerce #coupon_code {
  width: 14rem;
  max-width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius);
  font-size: .95rem;
}
.woocommerce-cart table.cart td.actions .coupon {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  flex-wrap: wrap;
}
@media (max-width: 48rem) {
  .woocommerce #coupon_code { width: 100%; }
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  padding: .55rem .7rem;
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius);
  font-family: var(--jurna-font-body);
}

/* ── select2-Dropdowns (Land/Region, Bundesland) an die Textfelder angleichen ──
   WooCommerce ersetzt diese Selects durch select2; das native <select> ist
   verborgen, daher greifen die obigen select-Regeln nicht. */
.woocommerce .select2-container--default .select2-selection--single {
  height: 44px;
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius);
  background: #fff;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px;
  padding-left: .7rem;
  padding-right: 2.2rem;
  color: var(--jurna-color-ink);
  font-family: var(--jurna-font-body);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
  right: .55rem;
}
.woocommerce .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--jurna-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jurna-color-primary) 18%, transparent);
}
/* Dropdown-Panel (hängt an <body>, daher ohne .woocommerce-Präfix) */
.select2-container--default .select2-dropdown {
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius);
  overflow: hidden;
  box-shadow: var(--jurna-shadow-sm);
}
.select2-container--default .select2-results__option {
  padding: .55rem .75rem;
  color: var(--jurna-color-ink);
}
/* Gehoverte / per Tastatur markierte Zeile: Theme-Türkis statt select2-Blau */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--jurna-color-primary) !important;
  color: #fff !important;
}
/* Aktuell gewählte Zeile (nicht gehovert): dezenter Türkis-Ton */
.select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted),
.select2-container--default .select2-results__option[data-selected="true"]:not(.select2-results__option--highlighted) {
  background: var(--jurna-color-primary-soft) !important;
  color: var(--jurna-color-ink) !important;
  font-weight: 600;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius);
  padding: .45rem .6rem;
}

/* ── Hinweismeldungen (Warenkorb/Kasse/Shop) im Theme-Look ──
   WooCommerce-Standard: 3px-Oberkante + absolut positioniertes Icon.
   Hier: weiche Karte mit farbiger Akzentkante links + getöntem Icon. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  border: 1px solid var(--jurna-color-border);
  border-left: 4px solid var(--jurna-color-primary);
  border-radius: var(--jurna-radius);
  background: var(--jurna-color-card);
  color: var(--jurna-color-ink);
  box-shadow: var(--jurna-shadow-sm);
  padding: 1.05rem 1.5rem 1.05rem 3.35rem;
  line-height: 1.5;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  left: 1.25rem;
  top: 1.15rem;
  margin: 0;
  font-size: 1.1rem;
  color: var(--jurna-color-primary);
}
.woocommerce-info {
  border-left-color: var(--jurna-color-navy);
  background: var(--jurna-color-surface);
}
.woocommerce-info::before { color: var(--jurna-color-navy); }
.woocommerce-error {
  border-left-color: var(--jurna-color-danger);
  background: color-mix(in srgb, var(--jurna-color-danger) 7%, var(--jurna-color-card));
}
.woocommerce-error::before { color: var(--jurna-color-danger); }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: 1rem; }

/* Produktseite: Luft zwischen dunklem Kopfband und der Hinweismeldung
   (z. B. „… wurde deinem Warenkorb hinzugefügt"). Nur wenn wirklich eine
   Meldung vorhanden ist – der leere Wrapper bekommt keinen Abstand. */
.pdp-hero + .container > .woocommerce-notices-wrapper > :first-child {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

/* ── Warenkorb-Summe / Bestellzusammenfassung als weiße Karte ── */
.woocommerce .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--jurna-color-card);
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--jurna-shadow-sm);
}
.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout #order_review table.shop_table { border: 0; margin: 0; }
.woocommerce .cart_totals table.shop_table tr,
.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th,
.woocommerce-checkout #order_review table.shop_table tr,
.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th { background: transparent; }
.woocommerce-checkout #order_review #payment { background: transparent; }
.woocommerce-checkout #order_review #payment::before { display: none; }

/* ── Kasse: Rechnungsdaten links · Bestellzusammenfassung rechts ── */
.woocommerce-checkout .jurna-checkout-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.woocommerce-checkout .jurna-checkout-aside { position: sticky; top: 1.5rem; }
.woocommerce-checkout #order_review_heading { margin-top: 0; }
/* Rechnungsdaten + Zusätzliche Informationen untereinander in der linken Spalte */
.woocommerce-checkout #customer_details.col2-set { display: block; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }
.woocommerce-checkout #customer_details .col-2:not(:empty) { margin-top: 1.75rem; }
@media (max-width: 60rem) {
  .woocommerce-checkout .jurna-checkout-cols { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-checkout .jurna-checkout-aside { position: static; }
}

/* ======================================================================
   THEME-ERGÄNZUNG · Mein Konto (WooCommerce) – moderne Oberfläche
   Karten-Sidebar links, Inhalt rechts; Dashboard mit Begrüßung + Kacheln.
   ====================================================================== */
.woocommerce-account .jurna-account {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
/* WooCommerce-Float-Layout innerhalb des Grids zurücksetzen */
.woocommerce-account .jurna-account .woocommerce-MyAccount-navigation,
.woocommerce-account .jurna-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin: 0;
}
@media (max-width: 60rem) {
  .woocommerce-account .jurna-account { grid-template-columns: 1fr; }
}

/* ── Sidebar ── */
.jurna-account-nav {
  background: var(--jurna-color-card);
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-lg);
  padding: .55rem;
  box-shadow: var(--jurna-shadow-sm);
  position: sticky;
  top: 1.5rem;
}
.jurna-account-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.jurna-account-nav li { margin: 0; border: 0; }
.jurna-account-nav li a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .85rem;
  border-radius: var(--jurna-radius);
  color: var(--jurna-color-ink);
  text-decoration: none;
  font-family: var(--jurna-font-heading);
  font-weight: 500;
  font-size: .96rem;
  transition: background .15s ease, color .15s ease;
}
.jurna-account-nav li a:hover { background: var(--jurna-color-surface); }
.jurna-account-nav li.is-active a {
  background: var(--jurna-color-primary);
  color: #fff;
  box-shadow: var(--jurna-shadow-sm);
}
.jurna-account-nav .jurna-account-ico {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}
.jurna-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--jurna-color-text-muted); }
.jurna-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  color: var(--jurna-color-danger);
  background: color-mix(in srgb, var(--jurna-color-danger) 8%, #fff);
}

/* ── Dashboard: Begrüßung ── */
.jurna-acc-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--jurna-radius-lg);
  margin-bottom: 1.5rem;
  background:
    radial-gradient(30rem 16rem at 100% 120%,
      color-mix(in srgb, var(--jurna-color-primary) 45%, transparent), transparent 60%),
    linear-gradient(125deg, var(--jurna-color-navy),
      color-mix(in srgb, var(--jurna-color-navy) 68%, var(--jurna-color-primary)));
  color: #fff;
}
.jurna-acc-hi { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.jurna-acc-avatar {
  width: 3.25rem; height: 3.25rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--jurna-color-primary);
  color: #fff;
  font-family: var(--jurna-font-heading);
  font-weight: 700; font-size: 1.4rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.woocommerce-account .woocommerce-MyAccount-content .jurna-acc-hero h2 { margin: 0; color: #fff; font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); }
.jurna-acc-hero p {
  margin: .25rem 0 0;
  font-size: .95rem;
  color: color-mix(in srgb, var(--jurna-color-primary-soft) 72%, #fff);
  max-width: 42rem;
}
.jurna-acc-logout {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--jurna-radius-pill);
  color: #fff; text-decoration: none;
  font-family: var(--jurna-font-heading); font-weight: 600; font-size: .9rem;
  transition: background .15s ease, border-color .15s ease;
}
.jurna-acc-logout:hover { background: rgba(255, 255, 255, .12); border-color: var(--jurna-color-primary-tint); color: #fff; }
.jurna-acc-logout svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Dashboard: Kacheln ── */
.jurna-acc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 1rem;
}
.jurna-acc-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.25rem 1.3rem 1.15rem;
  border-radius: var(--jurna-radius-lg);
  border: 1px solid var(--jurna-color-border);
  background: var(--jurna-color-card);
  color: var(--jurna-color-ink);
  text-decoration: none;
  box-shadow: var(--jurna-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.jurna-acc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--jurna-shadow-md);
  border-color: color-mix(in srgb, var(--jurna-color-primary) 45%, var(--jurna-color-border));
}
.jurna-acc-card-top { display: flex; align-items: center; justify-content: space-between; }
.jurna-acc-card-ico {
  width: 2.6rem; height: 2.6rem; flex: none;
  display: grid; place-items: center;
  border-radius: .75rem;
  background: var(--jurna-color-primary-soft);
  color: var(--jurna-color-primary-dark);
}
.jurna-acc-card-ico svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jurna-acc-card-count {
  font-family: var(--jurna-font-heading);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--jurna-color-ink);
}
.jurna-acc-card h3 { margin: .35rem 0 0; font-size: 1.06rem; color: var(--jurna-color-ink); }
.jurna-acc-card p { margin: 0; font-size: .87rem; line-height: 1.45; color: var(--jurna-color-text-muted); }
.jurna-acc-card-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .35rem;
  padding-top: .5rem;
  font-family: var(--jurna-font-heading); font-weight: 600; font-size: .88rem;
  color: var(--jurna-color-primary-dark);
}
.jurna-acc-card-link svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.jurna-acc-card:hover .jurna-acc-card-link svg { transform: translateX(3px); }

/* ── Inhaltsbereich (Bestellungen, Adressen, Formulare) ── */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type { margin-top: 0; }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { font-family: var(--jurna-font-heading); color: var(--jurna-color-ink); }
.woocommerce-account .woocommerce-Address {
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-lg);
  padding: 1.25rem 1.4rem;
  background: var(--jurna-color-card);
  box-shadow: var(--jurna-shadow-sm);
}
.woocommerce-account .woocommerce-Address address { font-style: normal; line-height: 1.6; color: var(--jurna-color-text); }

/* ======================================================================
   THEME-ERGÄNZUNG · Mini-Warenkorb (Hover-Vorschau im Header)
   ====================================================================== */
.nav-cart { position: relative; }
.nav-cart .mini-cart {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  width: min(22rem, calc(100vw - 2rem));
  margin-top: .5rem;
  padding: 1rem 1.1rem;
  background: var(--jurna-color-card);
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-lg);
  box-shadow: var(--jurna-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Hover-Brücke, damit der Weg vom Icon zum Panel nicht abreißt */
.nav-cart .mini-cart::before {
  content: "";
  position: absolute;
  top: -.6rem; left: 0; right: 0; height: .6rem;
}
/* Fokus (Tastatur) immer; Hover nur auf Hover-fähigen Geräten (kein Sticky-
   Hover auf Touch – dort öffnet der Tap den Warenkorb-Link als Fallback). */
.nav-cart:focus-within .mini-cart {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (hover: hover) {
  .nav-cart:hover .mini-cart {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
/* Der Mini-Warenkorb liegt im Header, NICHT in .woocommerce – deshalb muss
   hier alles selbst gestylt werden (WC-Standardstyles greifen nicht). */
.mini-cart .woocommerce-mini-cart__empty-message {
  margin: .25rem 0;
  color: var(--jurna-color-text-muted);
  font-size: .92rem;
}
.mini-cart ul.woocommerce-mini-cart {
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
  max-height: 17rem;
  overflow-y: auto;
}
/* Zeile: Produktlink (Bild + Name) als Block, Menge/Preis darunter, × rechts. */
.mini-cart ul.woocommerce-mini-cart li {
  position: relative;
  display: block;
  padding: .7rem 1.6rem .7rem 0;
  border-bottom: 1px solid var(--jurna-color-border);
  font-size: .88rem;
}
.mini-cart ul.woocommerce-mini-cart li:last-child { border-bottom: 0; }
.mini-cart ul.woocommerce-mini-cart li a:not(.remove) {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--jurna-color-ink);
  text-decoration: none;
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  line-height: 1.25;
}
.mini-cart ul.woocommerce-mini-cart li img {
  float: none !important;
  flex: none;
  width: 2.75rem !important;
  height: 2.75rem !important;
  object-fit: cover;
  margin: 0 !important;
  border-radius: .45rem;
}
.mini-cart ul.woocommerce-mini-cart li .quantity {
  display: block;
  margin-top: .3rem;
  padding-left: 3.35rem; /* Bildbreite 2.75rem + gap .6rem → unter dem Namen */
  color: var(--jurna-color-text-muted);
  font-size: .84rem;
}
.mini-cart ul.woocommerce-mini-cart li a.remove {
  position: absolute;
  top: .7rem;
  right: 0;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--jurna-color-surface);
  color: var(--jurna-color-text-muted) !important;
  font-size: 1.05rem; line-height: 1;
  text-decoration: none;
}
.mini-cart ul.woocommerce-mini-cart li a.remove:hover {
  background: color-mix(in srgb, var(--jurna-color-danger) 12%, #fff);
  color: var(--jurna-color-danger) !important;
}
.mini-cart .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 .9rem;
  font-family: var(--jurna-font-heading);
  font-size: 1rem;
  color: var(--jurna-color-ink);
}
.mini-cart .woocommerce-mini-cart__total .amount { color: var(--jurna-color-primary-dark); }
/* Buttons: „Warenkorb anzeigen" sekundär, „Kasse" türkis primär. */
.mini-cart .woocommerce-mini-cart__buttons {
  display: flex;
  gap: .5rem;
  margin: 0;
}
.mini-cart .woocommerce-mini-cart__buttons .button {
  flex: 1;
  text-align: center;
  padding: .6rem .5rem;
  border-radius: var(--jurna-radius);
  border: 1px solid var(--jurna-color-border);
  background: var(--jurna-color-surface);
  color: var(--jurna-color-primary-dark);
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mini-cart .woocommerce-mini-cart__buttons .button:hover {
  background: var(--jurna-color-primary-soft);
}
.mini-cart .woocommerce-mini-cart__buttons .button.checkout {
  background: var(--jurna-color-primary);
  border-color: var(--jurna-color-primary);
  color: #fff;
}
.mini-cart .woocommerce-mini-cart__buttons .button.checkout:hover {
  background: var(--jurna-color-primary-dark);
  border-color: var(--jurna-color-primary-dark);
}

/* ======================================================================
   THEME-ERGÄNZUNG · Merkliste (Wunschliste)
   ====================================================================== */
.jurna-wish-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .95rem;
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-pill);
  background: var(--jurna-color-card);
  color: var(--jurna-color-text-muted);
  font-family: var(--jurna-font-heading);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.jurna-wish-btn .icon {
  width: 1.15rem; height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  transition: fill .15s ease;
}
.jurna-wish-btn:hover {
  color: var(--jurna-color-primary-dark);
  border-color: color-mix(in srgb, var(--jurna-color-primary) 45%, var(--jurna-color-border));
}
.jurna-wish-btn.is-active {
  color: var(--jurna-color-primary-dark);
  border-color: var(--jurna-color-primary);
  background: var(--jurna-color-primary-soft);
}
.jurna-wish-btn.is-active .icon {
  fill: var(--jurna-color-primary);
  stroke: var(--jurna-color-primary);
}
.pdp-wish { margin-top: .85rem; }
/* „Merken" an Standard-Produktkacheln (Related/Fallback-Loop) */
.woocommerce ul.products li.product .jurna-wish-btn { margin-top: .5rem; }

/* Merkliste-Seite */
.jurna-wishlist-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.25rem;
}
.jurna-wish-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.1rem;
  border: 1px solid var(--jurna-color-border);
  border-radius: var(--jurna-radius-lg);
  background: var(--jurna-color-card);
  box-shadow: var(--jurna-shadow-sm);
}
.jurna-wish-remove {
  position: absolute;
  top: .6rem; right: .6rem;
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--jurna-color-surface);
  color: var(--jurna-color-text-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.jurna-wish-remove svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.jurna-wish-remove:hover { background: color-mix(in srgb, var(--jurna-color-danger) 12%, #fff); color: var(--jurna-color-danger); }
.jurna-wish-thumb { display: block; }
.jurna-wish-thumb img { width: 100%; height: auto; border-radius: var(--jurna-radius); }
.jurna-wish-title { margin: 0; font-size: 1.05rem; }
.jurna-wish-title a { color: var(--jurna-color-ink); text-decoration: none; }
.jurna-wish-title a:hover { color: var(--jurna-color-primary-dark); }
.jurna-wish-price { font-family: var(--jurna-font-heading); font-weight: 600; color: var(--jurna-color-primary-dark); }
.jurna-wish-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.jurna-wish-actions .btn { flex: 1; justify-content: center; font-size: .85rem; padding: .55rem .6rem; }
.jurna-wishlist-empty { text-align: center; padding: 2.5rem 1rem; color: var(--jurna-color-text-muted); }
.jurna-wishlist-empty .btn { margin-top: 1.1rem; }
.btn--ghost-dark {
  background: transparent;
  border: 1px solid var(--jurna-color-border);
  color: var(--jurna-color-ink);
}
.btn--ghost-dark:hover {
  border-color: var(--jurna-color-primary);
  color: var(--jurna-color-primary-dark);
  background: var(--jurna-color-surface);
}

/* ── cituro-Terminbuchungs-Button in Theme-Optik ──
   Der Button wird von cituro in .cituroContainer injiziert; Overrides mit
   !important, da cituro eigene Styles mitbringt. */
.cta-cituro { display: flex; align-items: center; }
.cituroContainer .cituroBookingButton,
button.cituroBookingButton {
  background: var(--jurna-color-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--jurna-radius) !important;
  padding: .85rem 1.6rem !important;
  font-family: var(--jurna-font-heading) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  box-shadow: var(--jurna-shadow-sm) !important;
  transition: background .2s ease !important;
}
.cituroContainer .cituroBookingButton:hover,
button.cituroBookingButton:hover {
  background: var(--jurna-color-primary-dark) !important;
  color: #fff !important;
}

/* ======================================================================
   THEME-ERGÄNZUNG · Startseite: Sektionen als eigene Boxen
   Ersetzt das eine große Panel durch je eine Box pro Sektion
   (Über die Kanzlei · Rechner + Video · KI · Erstberatung).
   ====================================================================== */
.front-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* Items duerfen unter Min-Content schrumpfen */
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-block: clamp(1.25rem, 3vw, 2rem) 3rem;
}
.section-panel { min-width: 0; }
.section-panel {
  background: var(--jurna-color-surface);
  border-radius: var(--jurna-radius-lg);
  padding: clamp(1.25rem, 4vw, 3rem);
}
/* Abstand zwischen Rechner und Video innerhalb der gemeinsamen Box */
.section-panel > * + * { margin-top: clamp(2rem, 5vw, 3.25rem); }