/* ========================================
   DIKOV.DE — Design System: Kupfer + Creme
   Shared Styles für alle Seiten

   Dieses Stylesheet ist das zentrale Design-System
   der gesamten Website. Alle Seiten teilen sich
   diese eine CSS-Datei. Änderungen hier wirken
   sich auf ALLE Unterseiten aus.

   Aufbau:
   1. Design-Tokens (Farben, Schrift, Abstände)
   2. CSS-Reset (einheitliche Browser-Basis)
   3. Layout-Grundgerüst
   4. Navigation (Desktop + Mobile)
   5. Hero-Cover (Startseiten-Vollbild-Header)
   6. Buttons
   7. Trust-Bar (Kennzahlen-Leiste)
   8. Service-Cards (Drei-Säulen auf Startseite)
   9. CTA-Sektionen (Call-to-Action-Bereiche)
   10. Footer
   11. Page-Hero (Unterseiten-Header)
   12. Content-Blocks (Fließtext-Bereiche)
   13. Step-Cards (Prozess-Schritte)
   14. Info-Box (hervorgehobene Hinweise)
   15. Article-Cards (Wissen-Übersicht)
   16. About-Page (Über-mich-Layout)
   17. Animationen
   18. Responsive Breakpoints
   ======================================== */


/* ===========================================
   0. LOKALE SCHRIFTEN (Self-Hosted)
   IBM Plex Sans wird lokal gehostet statt von
   Google Fonts geladen. Grund: Datenschutz.
   Externes Laden überträgt Besucher-IPs an Google,
   was seit LG München I (2022) als DSGVO-Verstoß
   gilt. Fonts liegen unter /fonts/ als woff2.
   =========================================== */

/* Latin Extended (Umlaute, diakritische Zeichen) */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-500-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Latin (Basis-Zeichensatz) */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===========================================
   0b. DISPLAY-SCHRIFT (Self-Hosted)
   Fraunces — variable Serife mit Optical Sizing, nur für
   Headlines (h1/h2). Self-hosted aus Datenschutzgründen wie
   IBM Plex Sans (kein Google-Fonts-CDN). Body bleibt Plex Sans.
   =========================================== */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fraunces-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fraunces-var-latext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ===========================================
   1. DESIGN-TOKENS
   Zentrale Variablen für das gesamte Farbsystem,
   Typografie und wiederkehrende Werte.
   Änderungen hier wirken sich global aus.
   =========================================== */
:root {
  /* Kupfer-Palette: Primärfarbe der Marke.
     Abgestuft von dunkel (700) bis hell (200).
     600 = Standard-Kupfer für Buttons, Links, Akzente.
     700 = Hover-Zustand, dunklere Variante.
     400 = Heller Akzent, z.B. aktive Nav-Links.
     200 = Sehr hell, für Hintergründe und Tags. */
  --kupfer-600: #B87333;
  --kupfer-700: #A06428;
  --kupfer-400: #D4A574;
  --kupfer-200: #E8CDAE;

  /* Kupfer für Text/Links auf hellem Grund: dunkler als 600,
     damit der Kontrast WCAG AA (4.5:1) auf Creme UND Weiß erfüllt
     (kupfer-600 erreicht dort nur ~3.4:1). Flächen, Buttons und
     große Display-Schrift nutzen weiterhin --kupfer-600. */
  --kupfer-text: #9A5F26;

  /* Creme-Palette: Hintergrundfarben.
     50 = Haupt-Seitenhintergrund (fast weiß, warm).
     100 = Leicht dunkler, für abwechselnde Sektionen. */
  --creme-50: #F5F0E8;
  --creme-100: #EDE6DA;

  /* Neutrale Farben */
  --white: #FFFFFF;           /* Reines Weiß, für Karten und Boxen */
  --dark: #2C2C2A;            /* Fast-Schwarz, für Headlines und Nav-Hintergrund */
  --gray: #5A5549;            /* Fließtext-Farbe, gut lesbar auf Creme */
  --gray-light: #8A8478;      /* Sekundärtext, Labels, Platzhalter */

  /* Status-Farben (aktuell nicht aktiv genutzt,
     vorbereitet für zukünftige UI-Elemente wie
     Formular-Validierung oder Benachrichtigungen) */
  --success: #5E7F5E;         /* Grün: Erfolg, Bestätigung */
  --warning: #D4943A;         /* Orange: Warnung */
  --error: #C25544;           /* Rot: Fehler */

  /* Typografie: IBM Plex Sans als Hauptschrift.
     Fallback-Kette: system-ui für schnelles Laden,
     -apple-system für macOS/iOS Kompatibilität. */
  --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  /* Display-Schrift für Headlines (h1/h2). Serif-Fallback (Georgia),
     damit der Wechsel beim Laden nicht zu Sans springt. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Layout: Maximale Inhaltsbreite.
     Verhindert, dass Inhalte auf großen Bildschirmen
     zu breit werden. 1200px ist optimal für Lesbarkeit. */
  --max-width: 1200px;

  /* Ecken-Radien: Abgerundete Ecken in drei Stufen.
     sm = Buttons, kleine Elemente.
     md = Karten, Boxen.
     lg = Große Container (aktuell selten genutzt). */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Schatten: Subtiler Schlagschatten für Karten im Hover-Zustand.
     Sehr dezent (0.06 Opacity), passend zum warmen Design. */
  --shadow-soft: 0 2px 20px rgba(44, 44, 42, 0.06);

  /* Übergangs-Animation: Standard-Transition für alle
     interaktiven Elemente. cubic-bezier sorgt für
     einen natürlichen, leicht beschleunigten Effekt. */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ===========================================
   2. CSS-RESET
   Setzt alle Browser-Standardstile zurück,
   damit die Seite in Chrome, Safari, Firefox
   und Edge identisch aussieht.
   =========================================== */

/* Alle Elemente nutzen border-box: Padding und Border
   werden IN die Breite eingerechnet, nicht draufaddiert.
   margin/padding auf 0 entfernt Browser-Defaults. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Sanftes Scrollen bei Anker-Links (#kontakt etc.).
   Basis-Schriftgröße 16px = 1rem. */
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

/* Body-Grundeinstellungen: Schriftart, Textfarbe,
   Hintergrund, Zeilenhöhe (1.7 = sehr gut lesbar).
   antialiased = Glattere Schriftdarstellung auf macOS. */
body {
  font-family: var(--font);
  color: var(--dark);
  background: var(--creme-50);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Headlines in der Display-Schrift Fraunces; Fließtext bleibt Plex Sans.
   font-optical-sizing: auto nutzt die opsz-Achse je nach Schriftgröße
   (mehr Kontrast bei großen Headlines, ruhiger bei kleinen). */
h1, h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}

/* Bilder: Nie breiter als ihr Container (responsive).
   display:block entfernt den unsichtbaren Abstand
   unter Bildern, den inline-Elemente erzeugen. */
img { max-width: 100%; height: auto; display: block; }

/* Links: Kupfer-Farbe, keine Unterstreichung.
   Sanfter Farbwechsel beim Hover. */
a { color: var(--kupfer-text); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--kupfer-700); }

/* BARRIEREFREIHEIT — sichtbarer Fokus-Ring für Tastatur-Navigation (WCAG 2.4.7).
   Kupfer-600 erreicht ≥3:1 sowohl auf hellem Grund als auch auf der
   dunklen Nav. :focus-visible zeigt den Ring nur bei Tastatur-Fokus,
   nicht bei reinem Mausklick. */
:focus-visible {
  outline: 3px solid var(--kupfer-600);
  outline-offset: 2px;
}


/* ===========================================
   3. LAYOUT-GRUNDGERÜST
   Wiederverwendbare Layout-Klassen, die auf
   allen Seiten eingesetzt werden.
   =========================================== */

/* Container: Zentriert Inhalte und begrenzt die Breite.
   24px Seitenabstand verhindert, dass Text am
   Bildschirmrand klebt. */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Section: Standard-Abschnitt mit vertikalem Abstand.
   80px oben/unten gibt den Inhalten Luft zum Atmen. */
.section {
  padding: 80px 24px;
}

/* Section-Header: Zentrierte Überschrift + Untertitel,
   wird z.B. auf der Startseite über den Service-Cards
   und auf Unterseiten über Step-Cards verwendet. */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}

/* clamp() = responsive Schriftgröße:
   Minimum 24px, bevorzugt 3.5vw (3.5% der Viewport-Breite),
   Maximum 36px. Skaliert automatisch zwischen Handy und Desktop. */
.section-header h2 {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 12px;
}

.section-header p {
  font-size: 17px;
  color: var(--gray);
  max-width: 560px;      /* Begrenzt Zeilenlänge für Lesbarkeit */
  margin: 0 auto;        /* Zentriert den Textblock */
}


/* ===========================================
   4. NAVIGATION
   Hauptnavigation oben auf jeder Seite.
   Dunkler Hintergrund (--dark), klebt beim
   Scrollen oben fest (sticky). Auf Mobile
   wird ein Hamburger-Menü angezeigt.
   =========================================== */
.nav {
  background: var(--dark);
  position: sticky;       /* Bleibt beim Scrollen am oberen Rand */
  top: 0;
  z-index: 100;           /* Liegt über allen anderen Elementen */
}

/* Innerer Container: Begrenzt die Breite und
   verteilt Logo (links) und Links (rechts)
   mit Flexbox. Höhe 80px für das große Logo. */
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

/* Logo: Flexbox für vertikale Zentrierung des SVG-Bildes.
   Das Logo ist eine SVG-Datei (dikov-logo-reverse.svg)
   mit dem Schriftzug "VERMÖGEN MIT SUBSTANZ". */
.nav-logo {
  display: flex;
  align-items: center;
  line-height: 1;
}

/* Logo-Bild: 64px Höhe, Breite passt sich proportional an.
   Das SVG enthält den kompletten Markennamen + Untertitel. */
.nav-logo img {
  height: 64px;
  width: auto;
}

/* Dezenter Hover-Effekt auf dem Logo */
.nav-logo:hover { opacity: 0.85; }

/* Navigationslinks: Horizontal mit 32px Abstand.
   Keine Aufzählungszeichen (list-style: none). */
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

/* Link-Styling: Halbtransparentes Creme (70% Opacity)
   als Grundzustand, 14px klein und dezent. */
.nav-links a {
  color: rgba(245, 240, 232, 0.7);
  font-size: 14px;
  font-weight: 400;
  transition: color var(--transition);
}

/* Hover und aktive Seite: Volle Creme-Farbe (100% Opacity).
   .active wird per HTML auf den Link der aktuellen Seite gesetzt. */
.nav-links a:hover,
.nav-links a.active {
  color: var(--creme-50);
}

/* Kontakt-Link: Kupfer-Akzent, hebt sich von den
   anderen Links ab, um als primärer CTA zu wirken. */
.nav-links a.accent {
  color: var(--kupfer-400);
}

.nav-links a.accent:hover {
  color: var(--kupfer-200);
}

/* Hamburger-Menü-Button: Auf Desktop versteckt (display:none).
   Wird erst ab 768px Breakpoint sichtbar (siehe Responsive). */
.nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

/* Drei horizontale Striche des Hamburger-Icons.
   Jeder Strich = ein span-Element, 24px breit, 2px hoch. */
.nav-mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--creme-50);
  margin: 5px 0;
  transition: var(--transition);
}


/* ===========================================
   5. HERO-COVER
   Vollbild-Header mit Hintergrundbild,
   verwendet auf Startseite, Immobilien,
   Edelmetall und GIS-Seite.

   Aufbau:
   - .hero-cover = Container mit Hintergrundbild
   - .hero-cover-overlay = Dunkler Gradient darüber
   - .hero-cover-content = Text + CTA-Button

   Der Gradient läuft von links (dunkel) nach rechts
   (transparent), sodass der Text links lesbar ist
   und das Bild rechts durchscheint.
   =========================================== */
.hero-cover {
  position: relative;            /* Ankerpunkt für den absolut positionierten Overlay */
  min-height: 600px;             /* Mindesthöhe, damit das Bild genug Fläche hat */
  background-size: cover;        /* Bild füllt den gesamten Bereich aus */
  background-position: center center;  /* Standardmäßig zentriert (wird per inline-Style pro Seite überschrieben) */
  background-repeat: no-repeat;
  display: flex;
  align-items: center;           /* Vertikale Zentrierung des Textinhalts */
}

/* Overlay: Dunkler Gradient über dem Hintergrundbild.
   Liegt absolut über dem gesamten Hero-Bereich (inset:0).
   Gradient: Links 88% Dunkelheit (Text lesbar),
   Mitte 70%, rechts fast transparent (Bild sichtbar). */
.hero-cover-overlay {
  position: absolute;
  inset: 0;                      /* Kurzschrift für top:0, right:0, bottom:0, left:0 */
  background: linear-gradient(
    to right,
    rgba(44, 44, 42, 0.88) 0%,   /* Links: Fast undurchsichtig, Text gut lesbar */
    rgba(44, 44, 42, 0.7) 45%,   /* Mitte: Leichter Übergang */
    rgba(44, 44, 42, 0.15) 75%,  /* Rechts: Fast transparent */
    transparent 100%              /* Ganz rechts: Bild voll sichtbar */
  );
}

/* Text-Container im Hero: Liegt über dem Overlay (z-index:1).
   Begrenzt auf max-width, damit der Text nicht zu breit wird. */
.hero-cover-content {
  position: relative;
  z-index: 1;                    /* Liegt über dem Overlay (z-index: auto) */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px 24px;
  width: 100%;
}

/* Hero-Headline: Große, responsive Schrift.
   clamp() = min 30px, bevorzugt 4.5vw, max 48px.
   max-width: 560px verhindert, dass die Headline
   zu breit wird und ins Bild ragt. */
.hero-cover-content h1 {
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--creme-50);
  margin-bottom: 20px;
  max-width: 560px;
}

/* Index-Hero: jeder Satz genau eine Zeile, kein Umbruch.
   Kleinere, an die Breite gekoppelte Schrift, damit auch der
   laengste Satz auf schmalen Handys in eine Zeile passt. */
.hero-cover-content h1.hero-h1-tight {
  white-space: nowrap;
  font-size: clamp(17px, 5vw, 33px);
  max-width: none;
}

/* Hero-Subtext: Etwas kleiner, halbtransparent (80% Opacity)
   für visuelle Hierarchie unter der Headline. */
.hero-cover-content p {
  font-size: clamp(16px, 2vw, 19px);
  color: rgba(245, 240, 232, 0.8);
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 480px;
}

/* HERO-COVER MOBILE (max 768px):
   Auf dem Handy ändert sich die Strategie komplett:
   - Bild wird zentriert (statt rechts positioniert)
   - Gradient läuft von oben nach unten (statt links→rechts)
   - !important überschreibt inline-Styles der einzelnen Seiten */
@media (max-width: 768px) {
  .hero-cover {
    min-height: 520px;
    background-position: center 20% !important;  /* Zentriert, Kopf bei 20% sichtbar */
    background-size: cover;
  }
  /* Mobile: Gradient von oben (dunkel, Text) nach unten (hell, Bild).
     Auf Desktop läuft der Gradient links→rechts,
     auf Mobile oben→unten, weil der Text über dem Bild liegt. */
  .hero-cover-overlay {
    background: linear-gradient(
      to bottom,
      rgba(44, 44, 42, 0.85) 0%,   /* Oben: Dunkel, Headline lesbar */
      rgba(44, 44, 42, 0.6) 60%,   /* Mitte: Übergang */
      rgba(44, 44, 42, 0.3) 100%   /* Unten: Bild sichtbar */
    );
  }
  .hero-cover-content {
    padding: 56px 24px;
  }
}

/* HERO-COVER VARIANTE: Leichter Overlay
   Für Seiten mit bereits dunklen Hintergrundbildern
   (z.B. die GIS-Seite mit dunkler Abstraktion).
   Der Overlay ist hier weniger stark, weil das Bild
   selbst schon genug Kontrast für den Text liefert. */
.hero-cover--light-overlay .hero-cover-overlay {
  background: linear-gradient(
    to right,
    rgba(44, 44, 42, 0.6) 0%,     /* Weniger dunkel als Standard (0.6 statt 0.88) */
    rgba(44, 44, 42, 0.3) 50%,
    transparent 100%
  );
}

/* Light-Overlay Mobile: Ebenfalls leichterer Gradient */
@media (max-width: 768px) {
  .hero-cover--light-overlay .hero-cover-overlay {
    background: linear-gradient(
      to bottom,
      rgba(44, 44, 42, 0.6) 0%,
      rgba(44, 44, 42, 0.2) 100%
    );
  }
}


/* ===========================================
   6. BUTTONS
   Zwei Button-Varianten:
   - btn-primary: Ausgefüllt, Kupfer-Hintergrund (Hauptaktion)
   - btn-secondary: Umrandet, transparent (Nebenaktionen)
   =========================================== */

/* Primär-Button: Kupfer-Hintergrund, weißer Text.
   Leichter Schlagschatten in Kupfer-Ton für 3D-Effekt.
   Wird für alle Haupt-CTAs verwendet (Termin buchen etc.). */
.btn-primary {
  display: inline-block;
  background: var(--kupfer-600);
  color: var(--white);
  padding: 16px 36px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font);       /* Explizit gesetzt, weil <button> sonst System-Font nutzt */
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 4px 16px rgba(184, 115, 51, 0.25);  /* Kupferfarbener Schatten */
}

/* Hover: Dunkler, leicht nach oben verschoben,
   stärkerer Schatten = "schwebt" visuell. */
.btn-primary:hover {
  background: var(--kupfer-700);
  color: var(--white);
  transform: translateY(-1px);     /* 1px nach oben = subtiler Lift-Effekt */
  box-shadow: 0 6px 24px rgba(184, 115, 51, 0.3);
}

/* Sekundär-Button: Transparenter Hintergrund mit
   Kupfer-Rahmen. Für weniger prominente Aktionen
   wie "Meine ganze Geschichte" auf der Startseite. */
.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--kupfer-text);
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font);
  border: 1.5px solid var(--kupfer-600);
  cursor: pointer;
  transition: all var(--transition);
}

/* Hover: Helles Kupfer als Hintergrund, dunklerer Text */
.btn-secondary:hover {
  background: var(--kupfer-200);
  color: var(--kupfer-700);
}


/* ===========================================
   7. TRUST-BAR (Kennzahlen-Leiste)
   Horizontale Leiste direkt unter dem Hero mit
   Kennzahlen wie "10+ Jahre Erfahrung", "1.000+
   Beratungsgespräche" etc. Stärkt Vertrauen und
   Glaubwürdigkeit auf den ersten Blick.
   =========================================== */
.trust-bar {
  background: var(--creme-100);   /* Leicht dunklerer Creme-Ton zur Abgrenzung */
  padding: 28px 24px;
}

/* Flexbox: Zentriert die Items horizontal mit 48px Abstand.
   flex-wrap: wrap = Umbricht auf kleinen Bildschirmen. */
.trust-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.trust-item { text-align: center; }

/* Die große Kennzahl: Kupfer-Farbe, fett, auffällig.
   display:block sorgt dafür, dass das Label darunter steht. */
.trust-number {
  font-size: 28px;
  font-weight: 600;
  color: var(--kupfer-600);
  display: block;
  line-height: 1.2;
}

/* Das Label unter der Zahl: Klein, dezent, grau. */
.trust-label {
  font-size: 13px;
  color: var(--gray);
}


/* ===========================================
   8. SERVICE-CARDS (Drei-Säulen-Übersicht)
   Drei klickbare Karten auf der Startseite,
   die zu den Hauptangeboten führen:
   Globale Index Strategie, Immobilien, Edelmetalle.
   =========================================== */

/* Grid: 3 gleich breite Spalten mit 24px Abstand.
   Wird auf Mobile zu einer Spalte (siehe Responsive). */
.services-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Einzelne Karte: Weißer Hintergrund, abgerundete Ecken.
   Unsichtbarer Rahmen (transparent) wird beim Hover sichtbar.
   display:block + color:dark = Karte als ganzes ist ein Link. */
.service-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  transition: all var(--transition);
  border: 1px solid transparent;
  display: block;
  color: var(--dark);
}

/* Hover: Karte "schwebt" 4px nach oben, bekommt
   Schatten und kupferfarbenen Rahmen. */
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: var(--kupfer-200);
  color: var(--dark);              /* Verhindert, dass Link-Farbe den Text überschreibt */
}

/* Icon-Container: Quadratisch, abgerundet, heller
   Kupfer-Hintergrund. Enthält ein SVG-Icon. */
.service-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--kupfer-200);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* SVG-Icons in den Service-Cards: Kupfer-Strich,
   keine Füllung, abgerundete Linienenden. */
.service-card-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--kupfer-600);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Karten-Titel: Kupfer-Farbe für visuelle Zuordnung */
.service-card h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--kupfer-text);
  margin-bottom: 10px;
}

/* Karten-Beschreibung: Kurzer Text unter dem Titel */
.service-card p {
  font-size: 15px;
  color: var(--gray);
  margin-bottom: 20px;
  line-height: 1.6;
}

/* Aufklappbare lange Kundenstimme.
   Ohne JavaScript ist der volle Text sichtbar (Button bleibt versteckt).
   Mit JS wird eingeklappt; der Button sitzt im Lesefluss hinter dem Text:
   eingeklappt "Weiterlesen", ausgeklappt "Wieder zusammenklappen". */
.testi-full.is-collapsed { display: none; }
.testi-toggle {
  display: inline-block;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--kupfer-text);
  cursor: pointer;
}

/* "Mehr erfahren →" Link am Ende jeder Karte.
   Der Pfeil bewegt sich beim Hover nach rechts (gap: 6→10px). */
.card-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--kupfer-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition);
}

.card-link:hover { gap: 10px; }


/* ===========================================
   9. CTA-SEKTIONEN (Call-to-Action)
   Dunkle Bereiche am Ende jeder Seite, die
   den Besucher zum Handeln auffordern
   (Termin buchen, Anrufen). Dunkler Hintergrund
   schafft visuellen Kontrast zum restlichen Design.
   =========================================== */
.cta-section {
  background: var(--dark);
  color: var(--creme-50);
  text-align: center;
}

.cta-section h2 {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 600;
  color: var(--creme-50);
  margin-bottom: 12px;
}

/* CTA-Text: Halbtransparent (70%) für Hierarchie,
   begrenzte Breite für Lesbarkeit. */
.cta-section p {
  font-size: 17px;
  color: rgba(245, 240, 232, 0.7);
  max-width: 520px;
  margin: 0 auto 32px;
}

/* Button-Container: Flexbox für nebeneinander liegende
   Buttons (Primär + Sekundär). wrap = Umbricht auf Mobile. */
.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Button-Anpassungen für dunklen CTA-Hintergrund:
   Farben werden leicht angepasst, damit sie auf
   dem dunklen Hintergrund gut sichtbar sind. */
.cta-section .btn-primary { background: var(--kupfer-600); }
.cta-section .btn-primary:hover { background: var(--kupfer-400); }
.cta-section .btn-secondary { color: var(--kupfer-400); border-color: var(--kupfer-400); }
.cta-section .btn-secondary:hover { background: rgba(184, 115, 51, 0.15); color: var(--kupfer-200); }

/* Telefonnummer unter den Buttons: Sehr dezent,
   als Alternative zum Online-Termin. */
.cta-phone {
  margin-top: 24px;
  font-size: 14px;
  color: rgba(245, 240, 232, 0.6);
}

.cta-phone a { color: var(--kupfer-400); font-weight: 500; }


/* ===========================================
   10. FOOTER
   Seitenfuß auf jeder Seite.
   Links: Copyright. Rechts: Impressum, Datenschutz etc.
   Gleicher dunkler Hintergrund wie Navigation und CTA.
   =========================================== */
.footer {
  background: var(--dark);
  border-top: 1px solid rgba(245, 240, 232, 0.08);  /* Hauchdünne Trennlinie zur CTA-Sektion */
  padding: 48px 24px 28px;
}
.footer-inner { max-width: var(--max-width); margin: 0 auto; }

/* Oberer Bereich: drei Spalten (Marke, Seiten/Sitemap, Rechtliches) */
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(245, 240, 232, 0.08);
}

/* Markenspalte */
.footer-brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--creme-50);
  margin: 0 0 10px;
}
.footer-claim {
  font-size: 14px;
  color: rgba(245, 240, 232, 0.5);
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 320px;
}

/* Social-Icons: runde, dezente Buttons, Kupfer beim Hover */
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 240, 232, 0.06);
  color: rgba(245, 240, 232, 0.7);
  transition: background var(--transition), color var(--transition);
}
.footer-social a:hover { background: var(--kupfer-600); color: #fff; }
.footer-social svg { width: 18px; height: 18px; }

/* Spaltenüberschriften */
.footer-heading {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(245, 240, 232, 0.4);
  margin: 0 0 14px;
}

/* Sitemap- und Rechtliches-Links untereinander */
.footer-nav { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-nav a {
  font-size: 14px;
  color: rgba(245, 240, 232, 0.6);
  transition: color var(--transition);
}
.footer-nav a:hover { color: var(--kupfer-400); }

/* Unterer Balken: Copyright */
.footer-bottom {
  padding-top: 22px;
  font-size: 13px;
  color: rgba(245, 240, 232, 0.4);
}


/* ===========================================
   11. PAGE-HERO (Unterseiten-Header)
   Zentrierter Header-Bereich auf Unterseiten
   wie Wissen, Edelmetall (sofern kein Cover-Bild).
   Einfacher Creme-Hintergrund mit Titel + Untertitel.
   Wird NICHT auf Startseite verwendet (die hat hero-cover).
   =========================================== */
.page-hero {
  padding: 60px 24px 48px;
  text-align: center;
  background: var(--creme-100);
}

.page-hero h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 12px;
}

.page-hero p {
  font-size: 18px;
  color: var(--gray);
  max-width: 600px;
  margin: 0 auto;
}


/* ===========================================
   12. CONTENT-BLOCKS (Fließtext-Bereiche)
   Textbasierte Abschnitte auf Unterseiten wie
   Immobilien, Edelmetall. Begrenzte Breite (800px)
   für optimale Lesbarkeit (ca. 65-75 Zeichen pro Zeile).
   =========================================== */
.content-block {
  max-width: 800px;
  margin: 0 auto;
}

.content-block h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 16px;
}

/* Zwischenüberschriften: Kupfer-Farbe für
   visuelle Hierarchie innerhalb des Fließtexts. */
.content-block h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--kupfer-text);
  margin-bottom: 12px;
}

.content-block p {
  font-size: 16px;
  color: var(--gray);
  margin-bottom: 16px;
  line-height: 1.7;
}

/* Listen: Keine Standard-Aufzählungszeichen,
   stattdessen kupferfarbene Punkte per ::before. */
.content-block ul {
  list-style: none;
  margin-bottom: 24px;
}

/* Jedes Listen-Element hat links Platz (28px)
   für den kupferfarbenen Punkt. */
.content-block ul li {
  padding: 8px 0 8px 28px;
  position: relative;        /* Ankerpunkt für den ::before Punkt */
  font-size: 16px;
  color: var(--gray);
}

/* Kupferfarbener Aufzählungspunkt: 8x8px Kreis,
   absolut positioniert links neben dem Text. */
.content-block ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;           /* Macht den Punkt rund */
  background: var(--kupfer-400);
}


/* ===========================================
   13. STEP-CARDS (Prozess-Schritte)
   Nummerierte Karten, die einen Ablauf erklären.
   Verwendet auf der Immobilien-Seite ("So funktioniert es")
   und Edelmetall-Seite ("Deine Vorteile").
   =========================================== */

/* Grid: Auto-fit mit mindestens 220px pro Karte.
   Passt sich automatisch an die Bildschirmbreite an. */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 32px 0;
}

/* Einzelne Karte: Weiß, zentrierter Text. */
.step-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: center;
}

/* Schritt-Nummer: Runder Kreis (40x40px) mit
   heller Kupfer-Füllung und dunkler Kupfer-Zahl.
   Wird auch für Icons missbraucht (Edelmetall-Seite). */
.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--kupfer-200);
  color: var(--kupfer-700);
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;          /* Zentriert den Kreis horizontal */
}

.step-card h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 8px;
}

.step-card p {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
}


/* ===========================================
   14. INFO-BOX
   Hervorgehobener Hinweis-Kasten innerhalb von
   Content-Blocks. Heller Kupfer-Hintergrund,
   verwendet für besondere Informationen wie
   Steuervorteile oder Rechenbeispiele.
   =========================================== */
.info-box {
  background: var(--kupfer-200);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin: 32px 0;
}

/* Titel in der Info-Box: Dunkles Kupfer für Kontrast */
.info-box h3 {
  color: var(--kupfer-700);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}

.info-box p {
  color: var(--dark);
  font-size: 15px;
  margin-bottom: 0;
}


/* ===========================================
   15. ARTICLE-CARDS (Wissen-Übersicht)
   Karten mit Vorschaubild + Titel für die
   Wissensbibliothek. Jede Karte verlinkt auf
   einen Fachartikel.
   =========================================== */

/* Grid: Auto-fit, mindestens 300px breit.
   Ergibt 2 Spalten auf Desktop, 1 auf Mobile. */
.articles-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

/* Artikel-Karte: Gleicher Hover-Effekt wie Service-Cards
   (schwebt hoch, bekommt Schatten + Kupfer-Rahmen). */
.article-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;              /* Schneidet das Bild an den runden Ecken ab */
  transition: all var(--transition);
  display: block;
  color: var(--dark);
  border: 1px solid transparent;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: var(--kupfer-200);
  color: var(--dark);
}

/* Bildbereich: Feste Höhe, Creme-Hintergrund als Fallback
   falls kein Bild geladen wird. */
.article-card-image {
  height: 180px;
  background: var(--creme-100);
}

/* Textbereich unter dem Bild */
.article-card-body {
  padding: 24px;
}

/* Kategorie-Tag: Kleiner Chip (z.B. "Immobilien", "ETFs")
   mit Kupfer-Hintergrund und runden Ecken. */
.article-card-tag {
  font-size: 12px;
  font-weight: 500;
  color: var(--kupfer-600);
  background: var(--kupfer-200);
  padding: 4px 12px;
  border-radius: 20px;          /* Pill-Form */
  display: inline-block;
  margin-bottom: 12px;
}

.article-card-body h3 {
  font-size: 18px;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 8px;
}

.article-card-body p {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
}


/* ===========================================
   16. ABOUT-PAGE (Über-mich-Seite)
   Zwei-Spalten-Layout: Links das Porträtfoto,
   rechts der Text mit Werten und Qualifikationen.
   =========================================== */

/* Grid: Zwei gleich breite Spalten mit 64px Abstand.
   Wird auf Mobile zu einer Spalte (siehe Responsive). */
.about-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;            /* Beide Spalten starten oben */
}

/* Bild-Container: Seitenverhältnis 3:4 (Hochformat).
   position:sticky = Das Bild scrollt mit, bis es den
   unteren Rand des Textbereichs erreicht. So bleibt
   das Porträt sichtbar, während man den langen Text liest.
   top:88px = 80px Nav-Höhe + 8px Abstand. */
.about-image-large {
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, var(--kupfer-200), var(--creme-100));  /* Fallback-Gradient */
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: var(--kupfer-600);
}

/* Werte-Karten: Icon links, Text rechts.
   Verwendet auf der Über-mich-Seite für
   "Ehrlichkeit vor Abschluss", "Transparenz" etc. */
.value-card {
  display: flex;
  align-items: flex-start;       /* Icon und Text starten oben */
  gap: 16px;
  margin-bottom: 24px;
}

/* Rundes Icon-Feld: Helles Kupfer, 40x40px.
   flex-shrink:0 = Wird nicht kleiner, wenn der Text lang ist. */
.value-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--kupfer-200);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* SVG-Icon im Werte-Kreis */
.value-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--kupfer-600);
  fill: none;
  stroke-width: 2;
}

.value-card h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 4px;
}

.value-card p {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
}


/* ===========================================
   17. ANIMATIONEN
   Fade-In-Effekt: Elemente mit der Klasse .fade-in
   starten unsichtbar und 24px nach unten verschoben.
   Sobald sie in den sichtbaren Bereich scrollen,
   wird per JavaScript die Klasse .visible hinzugefügt,
   die sie sanft einblendet und nach oben gleiten lässt.
   (IntersectionObserver im <script> jeder HTML-Datei)
   =========================================== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* BARRIEREFREIHEIT — Bewegungsreduktion.
   Nutzer mit System-Einstellung "Bewegung reduzieren" bekommen
   Inhalte sofort sichtbar, ohne Einblend-Animation und ohne
   weiches Scrollen. Verhindert Schwindel/Unwohlsein. */
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ROBUSTHEIT — Fallback ohne JavaScript.
   Das Einblenden der .fade-in-Inhalte wird per JS ausgelöst.
   Sind Skripte deaktiviert, würden die Sektionen sonst dauerhaft
   unsichtbar bleiben (opacity:0). Diese Regel zeigt sie dann sofort.
   (Marketing-Seiten haben zusätzlich einen <noscript>-Fallback für
   ältere Browser ohne Unterstützung der scripting-Media-Query.) */
@media (scripting: none) {
  .fade-in { opacity: 1; transform: none; }
}


/* ===========================================
   18. RESPONSIVE BREAKPOINTS
   Anpassungen für verschiedene Bildschirmbreiten.
   Mobile-First wäre ideal, aber die Seite wurde
   Desktop-First gebaut. Breakpoints:
   - 900px: Tablets, schmale Laptops
   - 768px: Smartphones
   =========================================== */

/* TABLET (max 900px):
   Service-Cards und Artikel-Cards werden einspaltig.
   About-Grid (Über-mich) ebenfalls einspaltig,
   das Porträtfoto verliert den Sticky-Effekt. */
@media (max-width: 900px) {
  .services-grid,
  .articles-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-image-large { max-height: 300px; position: static; }  /* Kein Sticky mehr */
}

/* SMARTPHONE (max 768px):
   Navigation wird zum Hamburger-Menü.
   Trust-Bar wird zum 2x2-Grid.
   Abstände werden reduziert. */
@media (max-width: 768px) {
  /* Mobile Navigation: Links werden als Dropdown
     unter der Nav-Leiste angezeigt. Standardmäßig
     versteckt (display:none), per JavaScript wird
     die Klasse .open hinzugefügt (display:flex).
     top:80px = Exakt unter der Nav-Leiste. */
  .nav-links {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--dark);
    flex-direction: column;        /* Links untereinander statt nebeneinander */
    padding: 16px 24px 24px;
    gap: 16px;
    border-top: 1px solid rgba(245, 240, 232, 0.08);
  }
  /* JavaScript toggled diese Klasse per Klick auf den Hamburger */
  .nav-links.open { display: flex; }
  /* Größere Touch-Flächen im Mobil-Menü (Mindest-Tippziel 44px) */
  .nav-links a { display: block; padding: 8px 0; }
  /* Hamburger-Button wird sichtbar */
  .nav-mobile-toggle { display: block; min-width: 44px; min-height: 44px; }
  /* Reduzierte Abstände für Sektionen */
  .section { padding: 56px 24px; }
  .page-hero { padding: 40px 24px 32px; }
  /* Trust-Bar: 2x2-Grid statt einer Reihe.
     Vier Kennzahlen verteilen sich auf zwei Zeilen
     mit je zwei Einträgen. */
  .trust-bar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }
  /* Lange Text-Kennzahlen (z. B. „Konzernunabhängig") umbrechen lassen,
     statt im 2-Spalten-Grid über den Rand zu laufen. */
  .trust-number { font-size: 24px; hyphens: auto; overflow-wrap: break-word; }
  /* Footer: Zentriert, Elemente untereinander */
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  /* Step-Cards: Einspaltig */
  .steps-grid { grid-template-columns: 1fr; }
}