/* ============================================================
   BIS 100 – Zu Recht. Gut beraten.
   Premium Design System: One accent, calm spacing, consistent components
   ============================================================ */

/* --- Design Tokens --- */
:root {
  --max-w: 1120px;

  --accent: #7A1E3A;
  --accent-light: #f5edf0;
  --accent-hover: #5e1730;

  --bg: #f7f7f8;
  --surface: #ffffff;
  --text: #1a1a1e;
  --muted-color: #6b6b76;
  --border: #e4e4e7;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 4px rgba(0,0,0,.04), 0 2px 12px rgba(0,0,0,.04);
  --shadow-hover: 0 4px 20px rgba(0,0,0,.08);
  --transition: .2s ease;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* --- Accessibility: reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .bis100-header.is--loading { display: none !important; }
}

body {
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
  overflow-x: clip;
  min-height: 100%;
}

a { color: inherit; text-decoration: none; cursor: pointer; }
.font--notariat { font-family: 'EB Garamond', 'Georgia', serif; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.25em; }
h1, h2, h3, h4 { line-height: 1.25; }

.container { width: min(var(--max-w), calc(100% - 40px)); margin: 0 auto; }

/* --- Utility classes --- */
.label {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 12px;
}

.muted { color: var(--muted-color); }
.sm { font-size: 14px; }
.center { text-align: center; }

.link {
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: color var(--transition);
}
.link:hover { color: var(--accent-hover); text-decoration: underline; }

/* ============================================================
   ANIMATION (bis100) STYLES — preserved
   ============================================================ */
.bis100-header {
  color: #f4f4f4;
  position: relative;
  overflow: clip;
}

.bis100-header.is--loading.is--hidden { display: none; }

.bis100-loader {
  color: var(--text);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.bis100__h1 {
  white-space: nowrap;
  justify-content: center;
  font-size: 12.5em;
  font-weight: 500;
  line-height: .75;
  display: flex;
  position: relative;
}

.bis100__h1-start {
  justify-content: flex-end;
  width: 1.8em;
  display: flex;
  overflow: hidden;
}

.bis100__h1-end {
  justify-content: flex-start;
  width: 1.8em;
  display: flex;
  overflow: hidden;
}

.bis100__letter { display: block; position: relative; }
.bis100__letter-white { display: block; position: relative; }
.bis100__letter-white.is--space { margin-left: .25em; }

.bis100-loader__box {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 0;
  display: flex;
  position: relative;
}

.bis100-loader__box-inner {
  justify-content: center;
  align-items: center;
  min-width: 1em;
  height: 100%;
  display: flex;
  position: relative;
}

.bis100__growing-image {
  justify-content: center;
  align-items: center;
  width: 0%;
  height: 100%;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.bis100__growing-image-wrap {
  width: 100%;
  min-width: 1em;
  height: 100%;
  position: absolute;
}

.bis100__cover-image,
.bis100__cover-image-extra {
  pointer-events: none;
  user-select: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* Base: domus-ag.net iframe with screenshot fallback */
.bis100__cover-image {
  background-image:
    linear-gradient(to bottom, rgba(14,16,22,.08), rgba(14,16,22,.04)),
    url('./assets/images/domus-website.jpg');
  overflow: hidden;
}

.bis100__cover-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none;
}

/* Extras fade out one-by-one: is--1 first, is--7 last */
.bis100__cover-image-extra.is--1 {
  background-image:
    linear-gradient(to bottom, rgba(14,16,22,.1), rgba(14,16,22,.06)),
    url('./assets/images/portrait-wirtschaftspruefung.jpg');
  z-index: 7;
}

.bis100__cover-image-extra.is--2 {
  background-image:
    linear-gradient(to bottom, rgba(14,16,22,.1), rgba(14,16,22,.06)),
    url('./assets/images/person-ranker.jpg');
  z-index: 6;
}

.bis100__cover-image-extra.is--3 {
  background-image:
    linear-gradient(to bottom, rgba(14,16,22,.1), rgba(14,16,22,.06)),
    url('./assets/images/portrait-winkler.jpg');
  z-index: 5;
}

.bis100__cover-image-extra.is--4 {
  background-image:
    linear-gradient(to bottom, rgba(14,16,22,.1), rgba(14,16,22,.06)),
    url('./assets/images/person-kalbow.jpg');
  z-index: 4;
}

.bis100__cover-image-extra.is--5 {
  background-image:
    linear-gradient(to bottom, rgba(14,16,22,.1), rgba(14,16,22,.06)),
    url('./assets/images/person-brandt.jpg');
  z-index: 3;
}

.bis100__cover-image-extra.is--6 {
  background-image:
    linear-gradient(to bottom, rgba(14,16,22,.1), rgba(14,16,22,.06)),
    url('./assets/images/portrait-fechner.jpg');
  z-index: 2;
}

.bis100__cover-image-extra.is--7 {
  background-image:
    linear-gradient(to bottom, rgba(14,16,22,.1), rgba(14,16,22,.06)),
    url('./assets/images/person-hillebrand.jpg');
  z-index: 1;
}

.bis100-header__content {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 100dvh;
  padding: 3em;
  display: flex;
  position: relative;
}

.bis100-header__top { width: 100%; position: relative; }

.bis100-header__bottom {
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.bis100-nav { display: flex; position: relative; overflow: hidden; }
.bis100-nav__start { justify-content: flex-start; align-items: flex-start; width: 50%; display: flex; }
.bis100-nav__end { justify-content: space-between; align-items: flex-start; width: 50%; display: flex; }
.bis100-nav__cta { display: flex; }
.bis100-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius);
  color: rgba(255,255,255,.85);
  font-size: .85em;
  font-weight: 400;
  letter-spacing: .03em;
  text-decoration: none;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.bis100-nav__btn:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.5);
  color: #fff;
  text-decoration: none;
}
.bis100-nav__btn img {
  flex-shrink: 0;
}
.bis100-nav__links { grid-column-gap: .5em; grid-row-gap: .5em; display: flex; }
.bis100-nav__link {
  color: inherit;
  font-size: 1.3125em;
  line-height: 1.3;
  text-decoration: none;
  position: relative;
}

.site-credits {
  pointer-events: none;
  margin: 0;
  font-size: 3em;
  font-weight: 700;
  line-height: 1.05;
  color: #1a1a1e;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: .35em;
}
.site-credits__wappen {
  height: 1.5em;
  width: auto;
  opacity: .7;
  flex-shrink: 0;
}

@media screen and (max-width: 991px) {
  .bis100__h1 { font-size: 9em; }
  .bis100-nav__links { grid-column-gap: 0; grid-row-gap: 0; flex-flow: column; }
  .site-credits { font-size: 2.1em; }
}

@media screen and (max-width: 767px) {
  .bis100__h1 { font-size: 5.5em; }
  .bis100-nav__start { width: 65%; }
  .bis100-nav__end { grid-column-gap: 1.5em; grid-row-gap: 1.5em; flex-flow: column; width: 45%; }
  .site-credits { font-size: 1.3em; }
  .klingel-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 480px) {
  .site-credits { display: none; }
}

/* ============================================================
   PAGE HEADER (sticky)
   ============================================================ */
.page-header {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .3s, transform .3s;
}
.page-header.is--visible {
  opacity: 1;
  transform: translateY(0);
}

.page-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}

.brand { display: grid; gap: 1px; text-decoration: none; max-width: 280px; }
.brand__title { font-weight: 700; font-size: 13px; line-height: 1.25; letter-spacing: .2px; }

.page-nav { display: flex; gap: 20px; align-items: center; }
.page-nav a { font-size: 15px; font-weight: 500; opacity: .75; text-decoration: none; display: inline-flex; align-items: center; }
.page-nav a:hover { opacity: 1; text-decoration: underline; }
.page-nav__notarin { gap: 5px; }
.page-nav__notarin img { height: 16px; width: auto; }
.page-nav__domus { text-decoration: none !important; }
.page-nav__domus img { height: 18px; width: auto; }

.page-header__cta { display: flex; align-items: center; gap: 12px; }
.header-phone a {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-color);
  text-decoration: none;
}
.header-phone a:hover { color: var(--text); }

.btn--header-cta {
  padding: 12px 24px;
  font-size: 16px;
  letter-spacing: .02em;
}

/* ============================================================
   GLASS BUTTON (intro nav CTA)
   ============================================================ */
@property --glass-angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}
@property --glass-angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}

.glass-wrap {
  --glass-size: 16px;
  --glass-hover-time: 400ms;
  --glass-hover-ease: cubic-bezier(.25, 1, .5, 1);
  position: relative;
  z-index: 2;
  border-radius: 999vw;
  pointer-events: none;
  transition: all var(--glass-hover-time) var(--glass-hover-ease);
  font-size: var(--glass-size);
}

.glass-shadow {
  --shadow-fix: 2em;
  position: absolute;
  width: calc(100% + var(--shadow-fix));
  height: calc(100% + var(--shadow-fix));
  top: calc(0% - var(--shadow-fix) / 2);
  left: calc(0% - var(--shadow-fix) / 2);
  filter: blur(clamp(2px, .125em, 12px));
  overflow: visible;
  pointer-events: none;
}
.glass-shadow::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 999vw;
  background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.1));
  width: calc(100% - var(--shadow-fix) - .25em);
  height: calc(100% - var(--shadow-fix) - .25em);
  top: calc(var(--shadow-fix) - .5em);
  left: calc(var(--shadow-fix) - .875em);
  padding: .125em;
  box-sizing: border-box;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--glass-hover-time) var(--glass-hover-ease);
  opacity: 1;
}

.glass-btn {
  --border-w: clamp(1px, .0625em, 4px);
  all: unset;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: linear-gradient(-75deg, rgba(255,255,255,.08), rgba(255,255,255,.25), rgba(255,255,255,.08));
  border-radius: 999vw;
  box-shadow:
    inset 0 .125em .125em rgba(255,255,255,.1),
    inset 0 -.125em .125em rgba(255,255,255,.4),
    0 .25em .5em rgba(0,0,0,.3),
    0 0 .1em .25em inset rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--glass-hover-time) var(--glass-hover-ease);
}
.glass-btn:hover {
  transform: scale(.975);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-decoration: none;
  background: linear-gradient(-75deg, rgba(255,255,255,.12), rgba(255,255,255,.35), rgba(255,255,255,.12));
  box-shadow:
    inset 0 .125em .125em rgba(255,255,255,.15),
    inset 0 -.125em .125em rgba(255,255,255,.5),
    0 .15em .4em rgba(0,0,0,.35),
    0 0 .05em .1em inset rgba(255,255,255,.25);
}

.glass-btn span {
  position: relative;
  display: flex;
  align-items: center;
  gap: .4em;
  user-select: none;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 .125em .25em rgba(0,0,0,.4);
  transition: all var(--glass-hover-time) var(--glass-hover-ease);
  padding-inline: 1.4em;
  padding-block: .75em;
}
.glass-btn:hover span {
  text-shadow: .025em .025em .025em rgba(0,0,0,.12);
}
.glass-btn span img {
  height: 1.3em;
  width: auto;
}

/* Glass shimmer overlay */
.glass-btn span::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  width: calc(100% - var(--border-w));
  height: calc(100% - var(--border-w));
  top: calc(var(--border-w) / 2);
  left: calc(var(--border-w) / 2);
  box-sizing: border-box;
  border-radius: 999vw;
  overflow: clip;
  background: linear-gradient(var(--glass-angle-2), rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 40% 50%, rgba(255,255,255,0) 55%);
  mix-blend-mode: screen;
  pointer-events: none;
  background-size: 200% 200%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  transition: background-position calc(var(--glass-hover-time) * 1.25) var(--glass-hover-ease),
    --glass-angle-2 calc(var(--glass-hover-time) * 1.25) var(--glass-hover-ease);
}
.glass-btn:hover span::after {
  background-position: 25% 50%;
}
.glass-btn:active span::after {
  background-position: 50% 15%;
  --glass-angle-2: -15deg;
}

/* Glass outline */
.glass-btn::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 999vw;
  width: calc(100% + var(--border-w));
  height: calc(100% + var(--border-w));
  top: calc(0% - var(--border-w) / 2);
  left: calc(0% - var(--border-w) / 2);
  padding: var(--border-w);
  box-sizing: border-box;
  background:
    conic-gradient(from var(--glass-angle-1) at 50% 50%, rgba(255,255,255,.6), rgba(255,255,255,.1) 5% 40%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.1) 60% 95%, rgba(255,255,255,.6)),
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.2));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--glass-hover-time) var(--glass-hover-ease), --glass-angle-1 500ms ease;
  box-shadow: inset 0 0 0 calc(var(--border-w) / 2) rgba(255,255,255,.4);
}
.glass-btn:hover::after {
  --glass-angle-1: -125deg;
}
.glass-btn:active::after {
  --glass-angle-1: -75deg;
}

/* Glass shadow hover */
.glass-wrap:has(.glass-btn:hover) .glass-shadow {
  filter: blur(clamp(2px, .0625em, 6px));
}
.glass-wrap:has(.glass-btn:hover) .glass-shadow::after {
  top: calc(var(--shadow-fix) - .875em);
}
.glass-wrap:has(.glass-btn:active) {
  transform: rotate3d(1, 0, 0, 25deg);
}
.glass-wrap:has(.glass-btn:active) .glass-btn {
  box-shadow:
    inset 0 .125em .125em rgba(0,0,0,.05),
    inset 0 -.125em .125em rgba(255,255,255,.5),
    0 .125em .125em -.125em rgba(0,0,0,.2),
    0 0 .1em .25em inset rgba(255,255,255,.2),
    0 .225em .05em 0 rgba(0,0,0,.05),
    0 .25em 0 0 rgba(255,255,255,.75),
    inset 0 .25em .05em 0 rgba(0,0,0,.15);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  min-height: 42px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
  background: var(--surface);
  color: var(--text);
}
.btn:hover { text-decoration: none; box-shadow: var(--shadow-hover); }

.btn--lg { padding: 14px 28px; font-size: 16px; }
.btn--full { width: 100%; }

.btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn--secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.btn--secondary:hover { background: #f8f8f8; }

/* ============================================================
   CARD (one card style)
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 64px 0 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.4fr .7fr;
  gap: 32px;
  align-items: start;
}

h1 {
  font-size: clamp(26px, 3vw, 40px);
  margin: 0 0 16px;
  line-height: 1.2;
  font-weight: 700;
}

.hero__lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted-color);
  margin: 0 0 24px;
  max-width: 56ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero__actions--equal .btn {
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
}

.hero__contact { padding: 32px; }
.hero__contact h2 { font-size: 17px; margin: 0 0 20px; }
.hero__contact p { font-size: 15px; margin: 0 0 14px; }
.hero__contact a { text-decoration: underline; }
.hero__contact .contact-chip { text-decoration: none; }
.hero__contact .contact-chip:hover { text-decoration: none; }
.hero__contact .btn { text-decoration: none; margin-top: 8px; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 72px 0; }
.section--alt { background: var(--surface); }
.section--notary {
  background: var(--accent-light);
}

.section h2 {
  font-size: clamp(22px, 2.5vw, 32px);
  margin: 0 0 12px;
  font-weight: 700;
}

.section > .container > .muted {
  max-width: 68ch;
  line-height: 1.65;
}
.section > .container > p {
  max-width: 68ch;
}

/* ============================================================
   TILES (leistungen grid)
   ============================================================ */
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.tiles--leistungen {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.tile { display: flex; flex-direction: column; }
.tile h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.tile > .muted { margin: 0 0 20px; font-size: 15px; }

/* --- Shared tile layout (Notarin + DOMUS mirror) --- */
.tile--notarin,
.tile--domus {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px;
}

/* SUB-CARDS inside tiles */
.sub {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.sub h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.sub .muted { margin: 0 0 12px; }
.sub .link { margin-top: auto; }
.sub .btn { margin-top: auto; }

/* Recht sub-card: same pattern as others */
.sub--notarin { border-left: 5px solid var(--accent); }
.sub--notarin .link { color: var(--accent); }

.sub--recht  { border-left: 5px solid #b6004b; }
.sub--recht  .link { color: #b6004b; }

.sub__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.wappen { display: block; }

/* --- Shared brand-logo header for Notarin + DOMUS tiles --- */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  margin-bottom: 10px;
}
.brand-logo img {
  max-height: 58px;
  width: auto;
  object-fit: contain;
}
.brand-logo h3 {
  margin: 0;
}
.brand-logo--notarin h3 {
  font-family: 'EB Garamond', 'Georgia', serif;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.2;
}
.brand-logo--notarin .wappen {
  max-height: 48px;
}

.brand-logo--domus img {
  max-height: 44px;
  max-width: 200px;
}

/* Wappen watermark — large, white/monochrome ghost */
.wappen-watermark {
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 260px;
  height: auto;
  opacity: .06;
  pointer-events: none;
  user-select: none;
  filter: grayscale(1) contrast(.3) brightness(1.6);
}

/* DOMUS logo watermark — top-right, never covered */
.domus-watermark {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 140px;
  height: auto;
  opacity: .07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Visible DOMUS logo heading in tile — governed by .brand-logo--domus */
.tile--domus__logo {
  display: block;
}

/* DOMUS logo in router button */
.router__domus-logo {
  height: 30px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter .2s ease;
}
.router__domus-text {
  display: none;
}

/* Service-color accents (borders + links) */
.sub--wp     { border-left: 5px solid #d89919; }
.sub--steuer { border-left: 5px solid #0090d6; }
.sub--ub     { border-left: 5px solid #108c15; }

.sub--wp     .link { color: #d89919; }
.sub--steuer .link { color: #0090d6; }
.sub--ub     .link { color: #108c15; }

/* --- Service section accent colors (label + button outline) --- */
.svc--color-steuer .label  { color: #0090d6; }
.svc--color-steuer .btn    { border-color: #0090d6; color: #0090d6; }
.svc--color-steuer .btn:hover { background: #0090d6; color: #fff; border-color: #0090d6; }

.svc--color-wp .label  { color: #d89919; }
.svc--color-wp .btn    { border-color: #d89919; color: #d89919; }
.svc--color-wp .btn:hover { background: #d89919; color: #fff; border-color: #d89919; }

.svc--color-ub .label  { color: #108c15; }
.svc--color-ub .btn    { border-color: #108c15; color: #108c15; }
.svc--color-ub .btn:hover { background: #108c15; color: #fff; border-color: #108c15; }

.svc--color-recht .label  { color: #b6004b; }
.svc--color-recht .btn    { border-color: #b6004b; color: #b6004b; }
.svc--color-recht .btn:hover { background: #b6004b; color: #fff; border-color: #b6004b; }

/* Clickable card — whole card acts as link, lifts on hover */
.sub--clickable {
  position: relative;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sub--clickable:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 8px 28px rgba(0,0,0,.1);
}
.sub--clickable .link {
  position: static;
}
.sub--clickable .link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ============================================================
   BULLETS
   ============================================================ */
.bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.bullets li {
  padding: 4px 0 4px 18px;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
}

.bullets--spaced li {
  padding: 10px 0 10px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.bullets--spaced li:last-child { border-bottom: none; }

.bullets--sub {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.bullets--sub li {
  padding: 3px 0 3px 16px;
  font-size: 13px;
  color: var(--muted-color);
  border-bottom: none;
}
.bullets--sub li::before {
  width: 4px;
  height: 4px;
  top: 11px;
  background: var(--muted-color);
}

/* ============================================================
   KLINGELSCHILD
   ============================================================ */

/* ============================================================
   NOTARTERMIN
   ============================================================ */
.notary-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 24px;
}

.two-col h3 {
  font-size: 18px;
  margin: 0 0 12px;
}

/* Steps */
.steps {
  counter-reset: step;
  padding-left: 0;
  list-style: none;
  margin: 0;
}
.steps li {
  counter-increment: step;
  padding: 14px 0 14px 48px;
  position: relative;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   SERVICE SECTIONS (.svc)
   ============================================================ */
.svc {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 40px;
  align-items: center;
}
.svc--reverse {
  grid-template-columns: .75fr 1fr;
}
.svc--reverse .svc__img { order: -1; }

.svc__text h2 { margin-top: 4px; }
.svc__text .muted { line-height: 1.65; margin: 0 0 16px; }
.svc__text .bullets { margin-bottom: 20px; }

.svc__img img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 36px;
  margin-top: 24px;
  align-items: start;
}

.contact-info p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
}
.contact-info a { text-decoration: underline; }

.kontakt-domus-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.contact-big {
  font-size: 22px;
  font-weight: 700;
  display: block;
  margin-top: 4px;
}

/* Form */
.form {
  display: grid;
  gap: 16px;
}
.form--embed { padding: 24px 0 0; overflow: hidden; }
.form--full { width: 100%; }
.form--embed h3 { padding: 0 24px; margin: 0 0 8px; font-size: 18px; }
.form--embed .muted { padding: 0 24px 16px; margin: 0; }
.form__iframe {
  width: 100%;
  min-height: 600px;
  border: none;
  display: block;
}
.form h3 { margin: 0 0 4px; font-size: 18px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-full { display: block; }
.form label {
  display: grid;
  gap: 5px;
  font-weight: 600;
  font-size: 14px;
}
.form input,
.form select,
.form textarea {
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font: inherit;
  font-size: 15px;
  background: var(--surface);
  transition: border-color var(--transition);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(122,30,58,.1);
}

/* ============================================================
   KARRIERE
   ============================================================ */
.karriere {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.karriere h2 { margin-top: 4px; }

.karriere__badge img {
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   ANFAHRT / MAP
   ============================================================ */
.map-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  margin-top: 20px;
}

/* Leaflet overrides for brand integration */
.map-wrap .leaflet-container {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.map-wrap .leaflet-popup-content-wrapper {
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 0;
  overflow: hidden;
}
.map-wrap .leaflet-popup-content {
  margin: 12px 16px;
  line-height: 1.45;
  font-size: 14px;
  min-width: 180px;
}
.map-wrap .leaflet-popup-tip {
  box-shadow: none;
}
.map-wrap .leaflet-control-zoom a {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}
.map-wrap .leaflet-control-zoom a:hover {
  background: var(--bg);
}
.map-wrap .leaflet-control-attribution {
  background: rgba(255,255,255,.75);
  font-size: 11px;
  padding: 2px 8px;
}
.map-wrap .leaflet-control-attribution a {
  color: var(--muted-color);
}

/* Pin + U-Bahn label styling */
.map-pin, .map-ubahn, .map-bis {
  background: none !important;
  border: none !important;
}
.map-pin svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
  transition: transform .15s ease;
}
.map-pin:hover svg {
  transform: scale(1.15);
}

/* Bus stop marker */
.map-bus {
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
}
.map-bus__label {
  background: #95276e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  white-space: nowrap;
  cursor: pointer;
}

/* BIS 100 nameplate marker */
.map-bis {
  width: auto !important;
  height: auto !important;
}
.map-bis__label {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--accent);
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(122,30,58,.35);
  white-space: nowrap;
  transition: transform .15s ease;
  cursor: pointer;
}
.map-bis__icon {
  flex-shrink: 0;
  opacity: .7;
}
.map-bis:hover .map-bis__label {
  transform: scale(1.06);
}
.map-bis__name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .12em;
}
.map-bis__nr {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
}
.map-bis__tail {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--accent);
  margin: 0 auto;
  filter: drop-shadow(0 2px 3px rgba(122,30,58,.25));
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 28px 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.footer__nav { display: flex; gap: 18px; }
.footer__nav a { font-size: 13px; opacity: .7; }
.footer__nav a:hover { opacity: 1; }

/* ============================================================
   ROUTER (hero decision buttons)
   ============================================================ */
.router {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}
.router__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  background: var(--surface);
  color: var(--text);
  transition: all var(--transition);
}
.router__item:hover {
  text-decoration: none;
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
/* (router__item--primary replaced by --notariat and --domus specific styles) */

/* --- All router buttons: same size --- */
.router__item {
  flex: 1 1 200px;
  min-height: 56px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.router__item--wohnen {
  border-color: var(--accent);
  color: var(--accent);
}
.router__item--wohnen:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.router__item--notariat {
  font-family: 'EB Garamond', 'Georgia', serif;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.router__item--notariat:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* --- DOMUS router button (blue default with white logo, white on hover with original logo) --- */
.router__item--domus {
  background: #0090d6;
  color: #fff;
  border-color: #0090d6;
}
.router__item--domus:hover {
  background: var(--surface);
  border-color: var(--border);
}
.router__item--domus:hover .router__domus-logo {
  filter: none;
}

/* Wappen (full color, original Berlin coat of arms) inside Notariat router button */
.router__wappen {
  height: 36px;
  width: auto;
  margin-right: 10px;
  flex-shrink: 0;
}

/* ============================================================
   HERO CONTACT BLOCK (split Notariat / DOMUS)
   ============================================================ */
.hero__contact-block {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.hero__contact-block:last-of-type { border-bottom: none; }

.notarin-nameplate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}
.notarin-nameplate__wappen {
  height: 48px;
  width: auto;
  flex-shrink: 0;
}
.notarin-nameplate__divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  flex-shrink: 0;
}
.notarin-nameplate__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.notarin-nameplate__name {
  font-family: 'EB Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--text);
  letter-spacing: .03em;
}
.notarin-nameplate__title {
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  margin: 2px 0 0;
  color: var(--text);
}
.notarin-nameplate__logo {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

/* ============================================================
   KLINGEL – KACHEL GRID
   ============================================================ */
.klingel-group {
  margin-top: 28px;
}
.klingel-group + .klingel-group {
  margin-top: 32px;
}
.klingel-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.klingel-group__head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.klingel-domus-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}

/* Kachel grid */
.kachel-grid {
  display: grid;
  gap: 12px;
}
.kachel-grid--5 { grid-template-columns: repeat(5, 1fr); }
.kachel-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Individual kachel */
.kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}
.kachel:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 28px rgba(0,0,0,.1);
  border-color: transparent;
}
.kachel:active {
  transform: translateY(-1px) scale(1.005);
}

/* Icon */
.kachel__icon {
  flex-shrink: 0;
  transition: color .2s ease;
}

/* Label */
.kachel__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
}

/* Notarin kacheln – accent color icons */
.kachel--notarin .kachel__icon { color: var(--accent); }
.kachel--notarin:hover { border-color: var(--accent); }

/* DOMUS kacheln – department colors */
.kachel--steuer .kachel__icon { color: #0090d6; }
.kachel--steuer:hover { border-color: #0090d6; }

.kachel--wp .kachel__icon { color: #d89919; }
.kachel--wp:hover { border-color: #d89919; }

.kachel--ub .kachel__icon { color: #108c15; }
.kachel--ub:hover { border-color: #108c15; }

.kachel--recht .kachel__icon { color: #b6004b; }
.kachel--recht:hover { border-color: #b6004b; }

/* Responsive kachel grid */
@media (max-width: 768px) {
  .kachel-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .kachel-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .kachel-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .kachel { padding: 18px 10px; }
}

/* ============================================================
   CONTACT GRID (2-column contact cards)
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.contact-grid .card { padding: 28px; }
.contact-grid h3 { margin: 0 0 6px; font-size: 18px; }

/* ============================================================
   TRANSIT / ÖPNV CHIPS
   ============================================================ */
.transit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 20px 0 4px;
}
.transit__station {
  display: flex;
  align-items: center;
  gap: 8px;
}
.transit__line {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.transit__u {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #0060aa;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-right: 4px;
}
.transit__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.transit__chip--u2  { background: #d6000d; }
.transit__chip--u7  { background: #0060aa; }
.transit__chip--bus { background: #95276e; }
.transit__badge-nearest {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: 2px 8px;
  border-radius: 20px;
}

/* ============================================================
   MOBILE STICKY BAR
   ============================================================ */
.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  z-index: 100;
}
.sticky-bar__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 15px;
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
}
.sticky-bar__btn--accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .tiles--leistungen { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr; }
  .svc--reverse { grid-template-columns: 1fr; }
  .svc--reverse .svc__img { order: 0; }
  .contact-split { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .karriere { grid-template-columns: 1fr; text-align: center; }
  .karriere__badge { order: -1; }
  .karriere__badge img { margin: 0 auto; max-width: 180px; }
  .karriere .bullets { text-align: left; }
  .page-nav { display: none; }
  .header-phone { display: none; }
  .sticky-bar { display: flex; }
  body { padding-bottom: 68px; }
  .footer__inner { flex-direction: column; text-align: center; }
  .footer__nav { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 480px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  h1 { font-size: 24px; }
  .section { padding: 48px 0; }
  .router { flex-direction: column; }
  .router__item { flex-basis: auto; width: 100%; }
}

/* ============================================================
   ANFAHRT BUTTONS (Google Maps + Apple Maps, under Sofortkontakt)
   ============================================================ */
.anfahrt-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.anfahrt-buttons--stacked {
  grid-template-columns: 1fr;
}

.btn--anfahrt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-lg);
}

.anfahrt-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.btn--anfahrt-google {
  background: #fff;
  border: 1.5px solid #dadce0;
  color: #3c4043;
}
.btn--anfahrt-google:hover {
  background: #f8f9fa;
  box-shadow: var(--shadow-hover);
  border-color: #1a73e8;
}

.btn--anfahrt-apple {
  background: #fff;
  border: 1.5px solid #dadce0;
  color: #3c4043;
}
.btn--anfahrt-apple:hover {
  background: #f8f9fa;
  box-shadow: var(--shadow-hover);
  border-color: #3c4043;
}

@media (max-width: 480px) {
  .anfahrt-buttons { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT CHIPS (small button-style phone/email links)
   ============================================================ */
.contact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.contact-chip:hover {
  text-decoration: none;
  background: var(--surface);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
  color: var(--accent);
}
.contact-chip svg {
  flex-shrink: 0;
  opacity: .6;
}
.contact-chip:hover svg {
  opacity: 1;
  stroke: var(--accent);
}
.contact-chip--domus:hover {
  color: #0090d6;
  border-color: #0090d6;
}
.contact-chip--domus:hover svg {
  stroke: #0090d6;
}

.contact-chip--sm {
  padding: 4px 10px;
  font-size: 12px;
  gap: 5px;
}

/* Full-width chips: each takes equal space */
.contact-chips--full {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.contact-chips--full .contact-chip {
  justify-content: center;
}

@media (max-width: 480px) {
  .contact-chips {
    flex-direction: column;
  }
  .contact-chips .contact-chip {
    justify-content: center;
  }
  .contact-chips--full {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  max-width: 72ch;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.faq-item[open] {
  box-shadow: var(--shadow-card);
}

.faq-question {
  padding: 16px 20px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: var(--muted-color);
  flex-shrink: 0;
  transition: transform var(--transition);
}
.faq-item[open] .faq-question::after {
  content: "\2212";
}

.faq-answer {
  padding: 0 20px 16px;
  color: var(--muted-color);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.faq-answer a {
  color: var(--accent);
  font-weight: 600;
}

/* ============================================================
   MODAL (dialog)
   ============================================================ */
.modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 440px;
  width: calc(100% - 40px);
  box-shadow: 0 12px 48px rgba(0,0,0,.2);
}
.modal::backdrop {
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal__inner {
  padding: 32px;
  text-align: center;
}
.modal__inner h3 {
  margin: 0 0 12px;
  font-size: 20px;
}
.modal__inner p {
  margin: 0 0 12px;
}
.modal__inner .btn {
  margin-top: 8px;
}

/* ============================================================
   DATA ROOM — password gate + document cards
   ============================================================ */

/* --- Password Gate --- */
.gate {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 20px;
  transition: opacity .4s ease, visibility .4s ease;
}
.gate--hidden {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}
.gate__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 48px 40px;
  text-align: center;
  width: 100%;
  max-width: 380px;
}
.gate__card--shake {
  animation: gateShake .4s ease;
}
@keyframes gateShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(4px); }
}
.gate__wappen {
  display: block;
  margin: 0 auto 16px;
  opacity: .8;
}
.gate__label {
  font-family: 'EB Garamond', 'Georgia', serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted-color);
  margin: 0 0 4px;
}
.gate__title {
  font-family: 'EB Garamond', 'Georgia', serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: .04em;
  margin: 0 0 4px;
}
.gate__sub {
  margin: 0 0 24px;
}
.gate__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gate__input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  text-align: center;
  outline: none;
  transition: border-color var(--transition);
}
.gate__input:focus {
  border-color: var(--accent);
}
.gate__btn {
  width: 100%;
}
.gate__error {
  font-size: 13px;
  color: #c0392b;
  margin: 8px 0 0;
  opacity: 0;
  transition: opacity var(--transition);
}
.gate__error--visible {
  opacity: 1;
}

/* --- Data Room Wrapper --- */
.dataroom {
  display: none;
  padding: 56px 0 80px;
}
.dataroom--visible {
  display: block;
  animation: drFadeIn .5s ease;
}
@keyframes drFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Header */
.dataroom__brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dataroom__wappen {
  opacity: .75;
  flex-shrink: 0;
}
.dataroom__h1 {
  font-family: 'EB Garamond', 'Georgia', serif;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 600;
  margin: 0;
  letter-spacing: .02em;
}

/* --- Two-pane layout (Notarin + Urkundenverzeichnis) --- */
.dataroom__panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.dataroom__pane-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-color);
  margin: 0 0 8px;
}
@media (max-width: 700px) {
  .dataroom__panes { grid-template-columns: 1fr; }
}

/* --- Notarin module --- */
.dataroom__notarin-card {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.dataroom__notarin-card:hover {
  text-decoration: none;
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.dataroom__notarin-wappen {
  opacity: .8;
  flex-shrink: 0;
}
.dataroom__notarin-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  flex-shrink: 0;
}
.dataroom__notarin-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dataroom__notarin-name {
  font-family: 'EB Garamond', 'Georgia', serif;
  font-size: clamp(17px, 1.9vw, 23px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
}
.dataroom__notarin-title {
  font-size: 13px;
  color: var(--muted-color);
  line-height: 1.3;
}
.dataroom__notarin-arrow {
  color: var(--muted-color);
  opacity: .3;
  flex-shrink: 0;
  margin-left: 4px;
  transition: opacity var(--transition), transform var(--transition);
}
.dataroom__notarin-card:hover .dataroom__notarin-arrow {
  opacity: .8;
  transform: translateX(2px);
}

/* --- Urkundenverzeichnis --- */
.dataroom__pane--right {
  text-align: right;
}
.dataroom__urkunde-nr {
  font-family: 'EB Garamond', 'Georgia', serif;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: .06em;
  line-height: 1.2;
  word-spacing: .15em;
}
.dataroom__urkunde-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 1px solid var(--border);
  padding-left: 14px;
}
.dataroom__urkunde-detail {
  font-size: 12px;
  color: var(--muted-color);
  letter-spacing: .02em;
  line-height: 1.4;
}

/* --- Back link --- */
.dataroom__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-color);
  text-decoration: none;
  margin-bottom: 20px;
  transition: color var(--transition);
}
.dataroom__back:hover {
  color: var(--accent);
  text-decoration: none;
}

/* --- Doc Hero (recommended document) --- */
.doc-hero {
  margin: 32px 0 0;
}
.doc-hero__card {
  position: relative;
  overflow: hidden;
  padding: 32px;
}
.doc-hero__watermark {
  position: absolute;
  right: -20px;
  bottom: -30px;
  width: 220px;
  height: auto;
  opacity: .045;
  pointer-events: none;
  user-select: none;
}
.doc-hero__top {
  margin-bottom: 12px;
}
.doc-hero__badge-rec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}
.doc-hero__title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  margin: 0 0 4px;
}
.doc-hero__subtitle {
  margin: 0 0 16px;
}

/* Metadata row */
.doc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.doc-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--muted-color);
}
.doc-hero__meta-item svg {
  flex-shrink: 0;
  opacity: .6;
}

/* Features */
.doc-hero__features {
  margin-bottom: 20px;
}
.doc-hero__features-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-color);
  margin: 0 0 6px;
}
.doc-hero__list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.doc-hero__list li {
  position: relative;
  padding: 3px 0 3px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.doc-hero__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Feature chips */
.doc-hero__chips,
.doc-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.doc-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--bg);
  color: var(--muted-color);
  border: 1px solid var(--border);
}
.doc-chip--green {
  background: #e8f5e9;
  color: #108c15;
  border-color: #c8e6c9;
}

/* Hero actions */
.doc-hero__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.doc-hero__dl {
  gap: 8px;
}
.doc-hero__actions .btn--secondary {
  gap: 6px;
}

/* --- Alternate format cards (inside accordion) --- */
.dataroom__alt-formats {
  margin: 20px 0 0;
}
.doc-alt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 20px 20px;
}

/* Individual doc card */
.doc-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  transition: box-shadow .2s ease;
}
.doc-card:hover {
  box-shadow: var(--shadow-hover);
}
.doc-card--scan   { border-left: 3px solid var(--muted-color); }
.doc-card--signed { border-left: 3px solid #108c15; }

.doc-card__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.doc-card__meta-row {
  margin: 0;
}

/* Green verification badge */
.doc-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e8f5e9;
  color: #108c15;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  width: fit-content;
}

/* Suitable-for list */
.doc-card__suitable-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-color);
  margin: 6px 0 4px;
}
.doc-card__suitable {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.doc-card__suitable li {
  position: relative;
  padding: 2px 0 2px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.doc-card__suitable li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border);
}

/* Signature details (nested accordion) */
.doc-card__sig-details {
  margin: 4px 0;
}
.doc-card__sig-toggle {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.doc-card__sig-toggle::-webkit-details-marker { display: none; }
.doc-card__sig-toggle::before {
  content: "+ ";
  font-weight: 400;
}
.doc-card__sig-details[open] .doc-card__sig-toggle::before {
  content: "\2212 ";
}
.doc-card__sig-body {
  padding: 8px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}
.doc-card__sig-body p {
  margin: 0 0 4px;
  line-height: 1.5;
}

/* Card action row */
.doc-card__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.doc-card__actions .btn {
  flex: 1;
  font-size: 13px;
  padding: 8px 12px;
  gap: 6px;
}
.doc-card__actions .btn svg {
  flex-shrink: 0;
}

/* --- Status Pill (live status-page style) --- */
@keyframes dot-live {
  0%        { box-shadow: 0 0 0 0 rgba(234,179,8,.6); }
  70%       { box-shadow: 0 0 0 8px rgba(234,179,8,0); }
  100%      { box-shadow: 0 0 0 0 rgba(234,179,8,0); }
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.status-pill--pending {
  color: #92400e;
}

.status-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #eab308;
  flex-shrink: 0;
  animation: dot-live 2s cubic-bezier(.4,0,.6,1) infinite;
}

.status-pill__label {
  font-weight: 600;
}

.status-pill__hash {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  color: #b45309;
  background: rgba(234,179,8,.14);
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: .04em;
}

.status-pill__meta {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted-color);
  letter-spacing: .01em;
  line-height: 1.4;
}

/* --- Status Card (premium) --- */
.status-card {
  margin: 32px 0 0;
  background: linear-gradient(135deg, #1a1a1e 0%, #2d1f26 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 20px rgba(26,26,30,.2);
  overflow: hidden;
  color: #fff;
}

/* A) Top bar */
.status-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.status-card__bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-card__bar-icon {
  opacity: .45;
  flex-shrink: 0;
}
.status-card__bar-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.status-card__bar-title {
  font-family: 'EB Garamond', 'Georgia', serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .03em;
  margin-left: 4px;
}
@keyframes dot-live-green {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.status-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.2);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #86efac;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-card__pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: dot-live-green 2s cubic-bezier(.4,0,.6,1) infinite;
}

/* B) Body – two columns */
.status-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.status-card__col {
  padding: 24px 28px;
}
.status-card__col + .status-card__col {
  border-left: 1px solid rgba(255,255,255,.06);
}
.status-card__col-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin: 0 0 10px;
}
.status-card__col-label svg {
  opacity: .5;
  flex-shrink: 0;
}
.status-card__col-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
  margin: 0 0 14px;
  max-width: 42ch;
}
.status-card__col-text strong {
  color: #fff;
  font-weight: 600;
}

/* Chips */
.status-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.status-card__chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.55);
  letter-spacing: .02em;
}
.status-card__chip--info {
  border-style: dashed;
  cursor: help;
  color: rgba(255,255,255,.4);
}

/* Stepper */
.status-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.status-stepper__step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  position: relative;
}
/* Connector line */
.status-stepper__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 28px;
  width: 1px;
  height: calc(100% - 16px);
  background: rgba(255,255,255,.1);
}
.status-stepper__step.is--done:not(:last-child)::after {
  background: rgba(34,197,94,.35);
}

/* Marker dot */
.status-stepper__marker {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: #1a1a1e;
}
.status-stepper__step.is--done .status-stepper__marker {
  background: #22c55e;
  border-color: #22c55e;
}
.status-stepper__step.is--done .status-stepper__marker::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 5px;
  height: 3px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}
.status-stepper__step.is--active .status-stepper__marker {
  border-color: #22c55e;
  background: transparent;
  animation: dot-live-green 2s cubic-bezier(.4,0,.6,1) infinite;
}
.status-stepper__step.is--active .status-stepper__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  transform: translate(-50%, -50%);
}
.status-stepper__step.is--optional .status-stepper__marker {
  border-style: dashed;
  border-color: rgba(255,255,255,.12);
}
.status-stepper__step.is--optional:not(:last-child)::after {
  border-left: 1px dashed rgba(255,255,255,.1);
  background: none;
  width: 0;
  left: 7px;
}

/* Text */
.status-stepper__text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  line-height: 1.3;
}
.status-stepper__step.is--done .status-stepper__text {
  color: rgba(255,255,255,.55);
}
.status-stepper__step.is--active .status-stepper__text {
  color: #fff;
  font-weight: 600;
}
.status-stepper__optional {
  font-weight: 400;
  font-size: 11px;
  color: rgba(255,255,255,.25);
  font-style: italic;
}

/* Hint below stepper */
.status-card__hint {
  margin: 10px 0 0;
  font-size: 9px;
  color: rgba(255,255,255,.15);
  letter-spacing: .02em;
  font-style: italic;
}

/* C) Footer */
.status-card__footer {
  padding: 12px 28px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.status-card__updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,.3);
  letter-spacing: .02em;
}
.status-card__updated svg {
  opacity: .4;
  flex-shrink: 0;
}
.status-card__note {
  font-size: 9px;
  color: rgba(255,255,255,.12);
  letter-spacing: .02em;
  text-align: right;
}

/* Responsive */
@media (max-width: 640px) {
  .status-card__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 20px;
  }
  .status-card__body {
    grid-template-columns: 1fr;
  }
  .status-card__col + .status-card__col {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .status-card__col {
    padding: 20px;
  }
  .status-card__footer {
    padding: 12px 20px;
  }
}

/* --- Status Index (document overview) --- */
.status-index {
  margin: 24px 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.status-index__header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-index__header-icon {
  color: var(--muted-color);
  flex-shrink: 0;
  opacity: .6;
}
.status-index__header-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-color);
}
.status-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.status-index__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition);
  cursor: pointer;
}
.status-index__item:last-child {
  border-bottom: none;
}
.status-index__item:hover {
  background: var(--accent-light);
  text-decoration: none;
}
.status-index__item-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg);
  color: var(--muted-color);
  transition: background var(--transition), color var(--transition);
}
.status-index__item:hover .status-index__item-icon {
  background: var(--accent);
  color: #fff;
}
.status-index__item-text {
  flex: 1;
  min-width: 0;
}
.status-index__item-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition);
}
.status-index__item:hover .status-index__item-name {
  text-decoration-color: var(--accent);
}
.status-index__item-detail {
  font-size: 12px;
  color: var(--muted-color);
  line-height: 1.3;
  margin-top: 1px;
}
.status-index__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.status-index__badge--ready {
  background: #e8f5e9;
  color: #108c15;
  border: 1px solid #c8e6c9;
}
.status-index__badge--pending {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}
.status-index__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-index__badge--ready .status-index__badge-dot {
  background: #22c55e;
  animation: dot-live-green 2s cubic-bezier(.4,0,.6,1) infinite;
}
.status-index__badge--pending .status-index__badge-dot {
  background: #eab308;
  animation: dot-live 2s cubic-bezier(.4,0,.6,1) infinite;
}
.status-index__item-arrow {
  color: var(--muted-color);
  opacity: .3;
  flex-shrink: 0;
  transition: opacity var(--transition), transform var(--transition);
}
.status-index__item:hover .status-index__item-arrow {
  opacity: .8;
  transform: translateX(2px);
}
@media (max-width: 640px) {
  .status-index__item {
    padding: 12px 16px;
    gap: 10px;
  }
  .status-index__badge {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* --- PDF Viewer --- */
.pdf-viewer {
  display: none;
  margin: 24px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.pdf-viewer--open {
  display: block;
  animation: drFadeIn .3s ease;
}
.pdf-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.pdf-viewer__title {
  font-size: 14px;
  font-weight: 600;
}
.pdf-viewer__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted-color);
  padding: 0 4px;
  transition: color var(--transition);
}
.pdf-viewer__close:hover {
  color: var(--text);
}
.pdf-viewer__frame {
  width: 100%;
  height: 70vh;
  border: none;
  display: block;
  background: #f0f0f0;
}

/* --- Anlagen Section --- */
.dataroom__anlagen {
  margin: 36px 0 0;
}

.anlagen-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.anlagen-hero__title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--text);
}

.anlagen-hero__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .anlagen-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .anlagen-hero__actions {
    width: 100%;
  }
  .anlagen-hero__actions .btn {
    flex: 1;
  }
}

/* Anlagen list */
.doc-list {
  padding: 0 20px 16px;
}
.doc-list__toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 4px 8px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.btn--sm {
  font-size: 13px;
  padding: 6px 14px;
  gap: 6px;
}
.doc-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition);
  border-radius: 4px;
}
.doc-list__item:last-child {
  border-bottom: none;
}
.doc-list__item:hover {
  background: var(--accent-light);
  text-decoration: none;
}
.doc-list__nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 50%;
  flex-shrink: 0;
}
.doc-list__name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
}
.doc-list__info {
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-list__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.doc-list__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  padding: 0;
  color: var(--muted-color);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.doc-list__action svg {
  display: block;
}
.doc-list__action:hover {
  background: var(--accent-light);
  border-color: var(--border);
  color: var(--accent);
}
.doc-list__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.doc-list__item:hover .doc-list__action {
  color: var(--accent);
}

/* --- Data Room Footer --- */
.dataroom__footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dataroom__footer p { margin: 0; }
.dataroom__footer a {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Data Room Responsive --- */
@media (max-width: 920px) {
  .doc-alt-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .gate__card {
    padding: 36px 24px;
  }
  .dataroom__brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .doc-hero__card {
    padding: 24px;
  }
  .doc-hero__actions {
    flex-direction: column;
  }
  .doc-card__actions {
    flex-direction: column;
  }
  .dataroom__footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .pdf-viewer__frame {
    height: 50vh;
  }
  .doc-list__info {
    display: none;
  }
}

/* ============================================================
   DATENRAUM V2 — .dr2-* prefixed classes
   ============================================================ */

/* --- Sticky TOC Navigation --- */
.dr2-toc {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247,247,248,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.dr2-toc__inner {
  width: min(var(--max-w), calc(100% - 40px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dr2-toc__inner::-webkit-scrollbar {
  display: none;
}
.dr2-toc__link {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-color);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
  min-height: 34px;
}
.dr2-toc__link:hover {
  background: var(--accent-light);
  color: var(--text);
  text-decoration: none;
}
.dr2-toc__link.is--active {
  background: var(--accent);
  color: #fff;
}

/* --- Section Headers (normalized) --- */
.dr2-section {
  position: relative;
}
.dr2-section__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 4px;
}
.dr2-section__title {
  font-family: 'EB Garamond', 'Georgia', serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  margin: 0 0 16px;
  letter-spacing: .02em;
}

/* --- Guidance Box --- */
.dr2-guidance {
  margin: 24px 0 0;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.dr2-guidance__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
}
.dr2-guidance__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dr2-guidance__list li {
  position: relative;
  padding: 4px 0 4px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.dr2-guidance__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* --- Abbreviation note --- */
.dr2-abbr-note {
  margin: 2px 0 6px;
  font-style: italic;
}

/* --- Footer v2 --- */
.dr2-footer {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.dr2-footer__main p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-color);
}
.dr2-footer__links {
  display: flex;
  gap: 16px;
}
.dr2-footer__links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-color);
  text-decoration: none;
  transition: color var(--transition);
}
.dr2-footer__links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* --- V2: Focus states (all interactive) --- */
.dr2-toc__link:focus-visible,
.dr2-guidance a:focus-visible,
.dr2-footer__links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Global focus ring for dataroom v2 interactive elements */
.dataroom .btn:focus-visible,
.dataroom .doc-card__preview-btn:focus-visible,
.dataroom .status-index__item:focus-visible,
.dataroom .faq-question:focus-visible,
.dataroom summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- V2: Contrast fixes --- */
/* Status card secondary text: .4 → .55 */
.dr2 .status-card__bar-label,
.dr2 .status-card__col-label {
  color: rgba(255,255,255,.55);
}
/* Status card footer note: keep subdued */
.dr2 .status-card__note {
  color: rgba(255,255,255,.15);
}
/* Status card footer updated: .3 → .4 */
.dr2 .status-card__updated {
  color: rgba(255,255,255,.4);
}
/* Stepper inactive text: .4 → .5 */
.dr2 .status-stepper__text {
  color: rgba(255,255,255,.5);
}
/* Stepper optional: .25 → .35 */
.dr2 .status-stepper__optional {
  color: rgba(255,255,255,.35);
}
/* Status card hint: keep subdued */
.dr2 .status-card__hint {
  color: rgba(255,255,255,.15);
}

/* --- V2: Mobile doc-list stacked layout --- */
@media (max-width: 640px) {
  .dr2 .doc-list__item {
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 8px;
  }
  .dr2 .doc-list__name {
    flex: 1 0 calc(100% - 50px);
    font-size: 14px;
  }
  .dr2 .doc-list__info {
    display: block;
    flex: 1 0 100%;
    font-size: 12px;
    padding-left: 42px;
  }
  .dr2 .doc-list__actions {
    flex: 1 0 100%;
    padding-left: 42px;
  }
  .dr2 .doc-list__actions .btn {
    flex: 1;
  }

  /* Tap targets: min 44px */
  .dr2 .btn--sm {
    min-height: 40px;
    padding: 8px 16px;
  }
  .dr2 .doc-list__action {
    width: 44px;
    height: 44px;
  }

  /* Anlagen hero actions stack */
  .dr2 .anlagen-hero__actions {
    flex-direction: column;
    width: 100%;
  }
  .dr2 .anlagen-hero__actions .btn {
    width: 100%;
  }

  /* TOC stays scrollable */
  .dr2-toc__inner {
    padding: 8px 0;
  }
}