/* ==========================================================================
   Variante „Klassisch“ – sachlich, ruhig, sehr seriös
   ---------------------------------------------------------------------------
   Das dunkle Navy des Logos führt, Gold setzt feine Linien. Kantige Formen
   statt Rundungen, klare Linien statt Schatten, straffere Typografie.

   Einbinden NACH style.css:
     <link rel="stylesheet" href="assets/css/style.css">
     <link rel="stylesheet" href="assets/css/theme-klassisch.css">
   ========================================================================== */

:root {
  --color-accent:      #1c2a41;
  --color-accent-dark: #121c2b;
  --color-accent-soft: #e8ecf3;
  --color-accent-line: rgba(28, 42, 65, .32);
  --color-accent-tint: rgba(28, 42, 65, .05);

  --color-gold:        #b8945c;
  --color-gold-dark:   #7d5a26;
  --color-gold-soft:   #f4ecdf;
  --color-gold-line:   rgba(184, 148, 92, .65);

  --color-text:        #242c36;
  --color-text-muted:  #55606c;
  --color-heading:     #131c28;
  --color-bg:          #ffffff;
  --color-bg-soft:     #f4f5f7;
  --color-border:      #dfe2e7;

  --fs-hero: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);

  --radius:    3px;
  --radius-lg: 4px;
  --shadow-sm: none;
  --shadow-md: 0 4px 20px rgba(19, 28, 40, .10);
}

/* -------------------------------------------------------- Typografie -- */

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.018em; }

.eyebrow { letter-spacing: .2em; font-size: .75rem; }

/* Kopfzeile bewusst NICHT themenspezifisch: Logo und Praxisname sollen auf
   jeder Seite und in jeder Variante gleich aussehen (siehe README). */

/* --------------------------------------------------- Kanten statt Rundung -- */

.btn { border-radius: var(--radius); }
.card,
.info-box { border-radius: var(--radius-lg); }
.card__icon { border-radius: var(--radius-lg); width: 2.6rem; height: 2.6rem; }
.steps li::before { border-radius: var(--radius-lg); }
.service-list li::before { border-radius: 0; width: .55rem; height: .55rem; border-width: 3px; top: .68em; }

/* -------------------------------------------------------------- Hero -- */

/* Gerade Kante statt Schwung – passt zur nüchternen Anmutung.
   Die Bildmarke sitzt dann mittig auf der Kante. */
.hero__curve { display: none; }
.hero__media { border-bottom: 3px solid var(--color-gold); }
.hero__name { font-family: var(--font-display); font-weight: 400; }

.page-head { border-bottom: 1px solid var(--color-border); }

/* ------------------------------------------------------------- Cards -- */

.card { border: 1px solid var(--color-border); box-shadow: none; }
a.card:hover,
.card--hover:hover {
  transform: none;
  border-color: var(--color-gold);
  box-shadow: var(--shadow-md);
}

.info-box { border: 1px solid var(--color-border); box-shadow: none; }
.info-box--accent { border-left: 4px solid var(--color-gold); }

/* ------------------------------------------------------------ Footer -- */

.site-footer { background: var(--color-bg-soft); }
.footer-grid h2 {
  color: var(--color-heading);
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--color-gold);
  display: inline-block;
}