/* =================================================================
   LegalConsul — gemeinsame Verfeinerung für alle Seiten
   Wird in jeder Seite als letztes Stylesheet eingebunden und
   überschreibt damit die eingebetteten Regeln.
   ================================================================= */

:root{
  /* Bestand */
  --navy:#13243d; --navy-2:#1c3357; --gold:#b08d57; --gold-d:#977542;

  /* Erweiterung: zwei ruhige Begleitfarben und zwei warme Flächen.
     Gedeckt gewählt — sie sollen Tiefe geben, nicht auffallen. */
  --petrol:#2e6b6a;      /* Salbei-Petrol: Ausgleich, Beständigkeit */
  --indigo:#37407e;      /* kühle Tiefe unter dem Navy */
  --sand:#efe7d8;        /* warme Fläche für hervorgehobene Blöcke */
  --sand-2:#e3d6bf;      /* Kante dazu */
  --bordeaux:#6e3b3f;    /* sehr sparsamer Warnton, Fristen */
}

/* ---- Typografie -------------------------------------------------- */
body{
  /* Verbindlich, weil mehrere Unterseiten gar keine Schrift deklarieren
     und sonst in der Browser-Standardschrift landen. */
  font-family:'Archivo Narrow','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  line-height:1.42;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Grosse Titel: leicht statt fett. Eine grosse Antiqua im Magerschnitt
   ist der klassische Weg zu Eleganz — Gewicht runter, Grad hoch,
   Laufweite leicht enger, Zeilen enger zusammen. */
h1{
  font-weight:300;
  font-size:clamp(2.1rem,4.6vw,3.5rem);
  line-height:1.06;
  letter-spacing:-.012em;
}
h2{
  font-weight:300;
  font-size:clamp(1.6rem,3vw,2.35rem);
  line-height:1.12;
  letter-spacing:-.008em;
}
h1,h2,h3,h4,.brand{ font-family:'Cormorant Garamond',Georgia,serif }
h3{ font-weight:400; letter-spacing:-.002em }
.section-head h2{ font-weight:300 }
.lead{ font-weight:400; opacity:.92 }

.brand{ letter-spacing:.05em }
.menu a{ letter-spacing:.02em }
.btn{ letter-spacing:.03em; font-weight:500 }
.eyebrow{ letter-spacing:.16em; text-transform:uppercase; font-size:.71rem; opacity:.85 }

table, .frist, .preis, time, .betrag{ font-variant-numeric:tabular-nums }

/* ---- Seitenhintergrund ------------------------------------------- */
/* Zwei Lagen: sehr weite, kaum wahrnehmbare Farbfelder für Tiefe,
   darüber das Ellipsenmuster als feine Struktur. */
body{
  background-color:#f7f6f3;
  background-image:
    radial-gradient(1100px 620px at 88% -8%,  rgba(46,107,106,.10), transparent 62%),
    radial-gradient(900px  520px at -6% 22%,  rgba(55,64,126,.075), transparent 60%),
    radial-gradient(760px  460px at 60% 108%, rgba(176,141,87,.09), transparent 60%),
    url('/grafik/muster-ellipsen.svg');
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size:auto,auto,auto,900px 900px;
  background-position:center top;
  background-attachment:scroll;
}

/* ---- Kopfbühne ---------------------------------------------------- */
.hero{ position:relative; isolation:isolate }
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:url('/grafik/hero-ellipsen.svg') center / cover no-repeat;
  pointer-events:none;
  z-index:0;
}
.hero > *{ position:relative; z-index:1 }

/* ---- Transparente Flächen ---------------------------------------- */
header{
  background:rgba(247,246,243,.70);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
  border-bottom:1px solid rgba(19,36,61,.07);
}
.card{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(12px) saturate(115%);
  backdrop-filter:blur(12px) saturate(115%);
  border:1px solid rgba(19,36,61,.07);
  box-shadow:0 1px 2px rgba(19,36,61,.03);
}
.card:hover{
  background:rgba(255,255,255,.82);
  border-color:rgba(176,141,87,.34);
  box-shadow:0 16px 44px rgba(19,36,61,.09);
}
.panel{
  background:
    radial-gradient(620px 300px at 82% 10%, rgba(46,107,106,.42), transparent 62%),
    linear-gradient(135deg,rgba(19,36,61,.93),rgba(28,51,87,.84));
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
  border:1px solid rgba(255,255,255,.10);
}
.menu{
  background:rgba(255,255,255,.90);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}

/* ---- Farbakzente, sparsam ---------------------------------------- */
/* Fristen sind das, was in Rechtssachen wehtut — der einzige warme
   Warnton auf der Seite, sonst nirgends. */
/* Der Attributzusatz [class] hebt die Spezifitaet auf 0-2-0. Ohne ihn
   gewinnt die gleichrangige, aber spaeter stehende Regel der Seite,
   und der Warnton kaeme nie an. */
.frist[class], .badge-frist[class]{
  background:rgba(110,59,63,.075);
  color:var(--bordeaux);
  border:1px solid rgba(110,59,63,.18);
}
.card .ic{ border-color:rgba(176,141,87,.55) }

/* ---- Rückfall ohne backdrop-filter -------------------------------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header{ background:rgba(247,246,243,.97) }
  .card{ background:#fff }
  .menu{ background:#fff }
  .panel{ background:#13243d }
}

@media (prefers-reduced-motion: reduce){ .card{ transition:none } }
@media print{
  body{ background-image:none; background-color:#fff }
  .hero::before{ display:none }
  header,.card,.menu,.panel{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none }
  h1,h2{ font-weight:400 }
}