/* ==========================================================================
   theme-register.css — "Aktenregister", toned to the original site
   White background, orange + grey register tabs, paper sheets. Restrained.
   ========================================================================== */

[data-theme="register"] {
  --paper: #ffffff;
  --desk: #ffffff;
  --ink: #1f1f1f;
  --muted: #6b6b6b;
  --spine: #cfcfcf;
  --tab: #dadada;       /* inactive tab grey */
  --tab-ink: #3a3a3a;
}

[data-theme="register"] body {
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  background: var(--desk);
}

/* --- Header = permanent register bar (white surface + "spine") ------------- */
/* The header is always a solid white bar with a grey spine along the bottom;
   the tabs sit on that spine so they read as part of the register. Constant
   height and a fixed logo size — nothing shifts on scroll.                    */
[data-theme="register"] .site-header {
  background: #fff;
  border-bottom: 1px solid #ececec;   /* subtle divider */
  transition: box-shadow .2s ease;
}
[data-theme="register"] .site-header__inner {
  align-items: flex-end; min-height: 88px; padding-top: .7rem;
}
[data-theme="register"] .brand { align-self: center; padding-bottom: 0; }
[data-theme="register"] .brand__logo { height: clamp(40px, 4.5vw, 54px); }
/* scrolled: only a soft shadow for depth — no layout change, no jump */
[data-theme="register"][data-scrolled="true"] .site-header {
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* --- Register tabs (flat folder tabs seated on the spine) ------------------ */
[data-theme="register"] .nav { align-items: flex-end; gap: 0; }
[data-theme="register"] .nav a {
  font-weight: 600; font-size: .8rem; color: var(--tab-ink);
  background: var(--tab);
  padding: .55rem 1rem; margin-left: -1px;
  border: 1px solid var(--spine); border-bottom: 0;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;                 /* bottom rests on the spine (recessed) */
  transition: background .18s ease, color .18s ease, margin-bottom .18s ease;
  position: relative;
}
[data-theme="register"] .nav a:first-child { margin-left: 0; }
/* hover + active share one look: orange, pulled forward, covering the spine */
[data-theme="register"] .nav a:hover,
[data-theme="register"] .nav a:focus-visible,
[data-theme="register"] .nav a.is-active {
  background: var(--brand-deep); color: #fff;   /* white on deep orange ≈5:1 (AA) */
  border-color: var(--brand-deep);
  margin-bottom: -1px;              /* overlaps the 1px divider → connects forward */
  z-index: 2;
}
/* Kontakt is a normal grey tab here — orange only on hover / when active */
[data-theme="register"] .nav-toggle { color: var(--ink); align-self: center; }

/* --- Type ------------------------------------------------------------------ */
[data-theme="register"] .eyebrow {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted);
}
[data-theme="register"] .section-no { color: var(--brand); }
[data-theme="register"] .section-title {
  font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em; margin: .4rem 0 1rem;
}
[data-theme="register"] .hero__title {
  font-size: clamp(2.6rem, 8vw, 5.5rem); font-weight: 700; line-height: .95;
  letter-spacing: -0.03em; margin: .4rem 0 1.2rem;
}
[data-theme="register"] .hero__lead { font-size: clamp(1.1rem, 2vw, 1.35rem); max-width: 48ch; }
[data-theme="register"] .hero__text { color: var(--muted); max-width: 60ch; }

[data-theme="register"] .btn { border-radius: 6px; font-weight: 600; }
[data-theme="register"] .btn--primary { background: var(--brand); color: #fff; }
[data-theme="register"] .btn--primary:hover { background: var(--brand-deep); }
[data-theme="register"] .btn--ghost { border: 1px solid var(--ink); }
[data-theme="register"] .btn--ghost:hover { background: var(--ink); color: #fff; }

/* --- Paper sheets (white on grey desk) ------------------------------------- */
[data-theme="register"] .section { padding-block: clamp(2.2rem, 5vw, 4rem); }
[data-theme="register"] .section > .container {
  background: var(--paper);
  border-radius: 10px;
  padding: clamp(1.8rem, 4vw, 3.4rem);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border: 1px solid #ececec;
  position: relative;
}
/* single orange register tab protruding from each sheet — matches the menu tabs */
[data-theme="register"] .section > .container::before {
  content: ""; position: absolute; top: -12px; left: 28px;
  width: 80px; height: 14px; border-radius: 8px 8px 0 0; background: var(--brand);
}

/* --- About ----------------------------------------------------------------- */
[data-theme="register"] .about__inner {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
[data-theme="register"] .about__figure { margin: 0; }
[data-theme="register"] .about__figure img { width: 100%; border-radius: 6px; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
[data-theme="register"] .about__figure figcaption { color: var(--muted); font-size: .85rem; margin-top: .7rem; }
[data-theme="register"] .about__since {
  margin-top: 1.6rem; display: inline-block; background: var(--brand); color: #fff;
  padding: .5rem 1rem; border-radius: 6px; font-weight: 700;
}
[data-theme="register"] .about__since span { text-transform: uppercase; font-size: .7rem; opacity: .85; margin-right: .4rem; }

/* --- Services cards (white, orange edge) ----------------------------------- */
[data-theme="register"] .section-intro { color: var(--muted); max-width: 56ch; }
[data-theme="register"] .cards-label { font-weight: 700; margin-top: 1.6rem; }
[data-theme="register"] .cards {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
[data-theme="register"] .card {
  background: #fff; border-radius: 8px; padding: 1.4rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.07); border: 1px solid #ececec;
  border-left: 4px solid var(--brand);
}
[data-theme="register"] .card__no { font-weight: 800; color: var(--brand); }
[data-theme="register"] .card__title { font-size: 1.1rem; margin: .5rem 0 .4rem; }
[data-theme="register"] .card p { color: var(--muted); font-size: .9rem; margin: 0; }

/* --- Estate ---------------------------------------------------------------- */
[data-theme="register"] .estate__inner {
  display: grid; grid-template-columns: 6fr 6fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
[data-theme="register"] .estate__list { list-style: none; margin: 0; padding: 0; }
[data-theme="register"] .estate__list li {
  background: #fff; border: 1px solid #ececec; border-left: 4px solid var(--brand);
  padding: .9rem 1.1rem; margin-bottom: .7rem;
  border-radius: 0 6px 6px 0; box-shadow: 0 3px 10px rgba(0,0,0,.06); font-weight: 500;
}

/* --- Contact --------------------------------------------------------------- */
[data-theme="register"] .contact__inner {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
[data-theme="register"] .contact__address { font-style: normal; font-size: 1.1rem; line-height: 1.9; }
[data-theme="register"] .contact__address a { color: var(--brand); text-decoration: none; }
[data-theme="register"] .field input, [data-theme="register"] .field textarea {
  border: 1px solid var(--spine); border-radius: 6px; background: #fff;
}

/* Spectrum toned to orange / grey */
[data-theme="register"] .spectrum li:nth-child(odd) { background: var(--brand); }
[data-theme="register"] .spectrum li:nth-child(even) { background: #cfcfcf; }

/* --- Footer ---------------------------------------------------------------- */
[data-theme="register"] .site-footer { background: var(--desk); border-top: 3px solid var(--spine); }
[data-theme="register"] .footer__top { color: var(--brand); font-weight: 700; }

/* --- Mobile: tabs become stacked grey/orange bars -------------------------- */
@media (max-width: 820px) {
  /* Standard stacked dropdown — not the desktop folder tabs */
  [data-theme="register"] .nav { align-items: stretch; gap: 0; background: #fff; }
  [data-theme="register"] .nav a,
  [data-theme="register"] .nav a:hover,
  [data-theme="register"] .nav a:focus-visible,
  [data-theme="register"] .nav a.is-active {
    display: block; width: 100%; text-align: left;
    margin: 0; transform: none;
    background: transparent; color: var(--ink);
    border: 0; border-bottom: 1px solid #eee; border-radius: 0;
    padding: 1rem 1.1rem;                /* inset from the edge; touch target >= 44px */
    font-weight: 600; box-shadow: none;
  }
  [data-theme="register"] .nav a:hover,
  [data-theme="register"] .nav a:focus-visible,
  [data-theme="register"] .nav a.is-active {
    color: var(--brand); box-shadow: inset 3px 0 0 var(--brand);   /* left accent */
  }
  [data-theme="register"] .about__inner,
  [data-theme="register"] .estate__inner,
  [data-theme="register"] .contact__inner { grid-template-columns: 1fr; }
  [data-theme="register"] .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  [data-theme="register"] .cards { grid-template-columns: 1fr; }
}