/* ==========================================================================
   doritipps.de — Design System
   Tokens: Farben, Typografie, Abstände, Motion. Einmal definiert,
   von jeder Seite geteilt (die HU-Vorlage dupliziert das pro Seite).
   ========================================================================== */

:root {
  /* Farben */
  --navy: #0c1a2e;
  --navy-mid: #1a2d4d;
  --navy-deep: #071120;
  --court-green: #2d6a4f;
  --court-green-light: #40916c;
  --clay: #c4763c;
  --clay-light: #d4956a;
  --clay-deep: #a85e2a;
  --ball-yellow: #c8d616;
  --cream: #faf6f0;
  --surface: #faf8f5;
  --on-surface: #1a1c2e;
  --on-surface-variant: #4a4d5f;
  --warm-gray: #8a8578;

  /* Radien */
  --r-sm: 0.75rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2.5rem;

  /* Schatten – weicher, mehrschichtig statt einfacher box-shadow */
  --shadow-sm: 0 1px 2px rgba(12, 26, 46, .04), 0 2px 8px rgba(12, 26, 46, .04);
  --shadow-md: 0 2px 4px rgba(12, 26, 46, .04), 0 8px 24px rgba(12, 26, 46, .07);
  --shadow-lg: 0 4px 8px rgba(12, 26, 46, .05), 0 18px 48px rgba(12, 26, 46, .12);
  --shadow-glow: 0 0 0 1px rgba(200, 214, 22, .35), 0 8px 32px rgba(200, 214, 22, .18);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;          /* fixe Navigation kompensieren */
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --- Fluide Typografie: skaliert stufenlos statt in zwei Sprüngen --- */
.t-h1 { font-size: clamp(2rem, 1.2rem + 4vw, 4rem); line-height: 1.05; letter-spacing: -.04em; }
.t-h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); line-height: 1.12; letter-spacing: -.035em; }
.t-h3 { font-size: clamp(1.05rem, .98rem + .5vw, 1.35rem); line-height: 1.3; letter-spacing: -.02em; }
.t-lead { font-size: clamp(.95rem, .9rem + .45vw, 1.2rem); line-height: 1.65; }
.t-body { font-size: clamp(.9rem, .87rem + .2vw, 1.05rem); line-height: 1.75; }

/* Überschriften nie trennen – „Buchma-cher" liest sich schlecht.
   Lange Komposita rutschen stattdessen als Ganzes in die nächste Zeile. */
h1, h2, h3, h4 {
  hyphens: manual;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Im Fließtext ist die Silbentrennung dagegen erwünscht: deutsche Komposita
   reißen sonst hässliche Lücken in den Flattersatz. */
.prose-de p, .prose-de li, .t-lead, .t-body { hyphens: auto; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  /* verhindert das Aufblitzen des Ligatur-Texts vor dem Laden der Font */
  font-family: 'Material Symbols Outlined', sans-serif;
}

/* --- Oberflächen --- */
.glass-light {
  background: rgba(255, 255, 255, .75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: .5px solid rgba(0, 0, 0, .06);
  box-shadow: var(--shadow-md);
}

.glass-dark {
  background: rgba(20, 36, 64, .6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: .5px solid rgba(255, 255, 255, .1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .2);
}

/* Einheitlicher Sektions-Container */
.section-wrapper {
  margin-left: .75rem;
  margin-right: .75rem;
  border-radius: var(--r-lg);
}

@media (min-width: 768px) {
  .section-wrapper { margin-left: 1rem; margin-right: 1rem; border-radius: var(--r-xl); }
}

/* Dezentes Lichtgeflecht für dunkle Sektionen – ersetzt die flache Fläche */
.mesh-navy {
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(45, 106, 79, .45) 0%, transparent 55%),
    radial-gradient(70% 100% at 100% 100%, rgba(196, 118, 60, .32) 0%, transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
}

.mesh-clay {
  background:
    radial-gradient(75% 110% at 90% 5%, rgba(200, 214, 22, .28) 0%, transparent 55%),
    linear-gradient(135deg, var(--clay) 0%, var(--clay-deep) 100%);
}

/* --- Navigation --- */
.nav-link {
  position: relative;
  color: rgba(255, 255, 255, .6);
  transition: color .25s var(--ease-out);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -.35rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ball-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}

.nav-link:hover { color: #fff; }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--ball-yellow); }

/* Mobiles Menü – in der HU-Vorlage fehlt es komplett, dort sind die
   Navigationslinks unter 768px schlicht nicht erreichbar. */
#mobileMenu {
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
#mobileMenu[hidden] { display: none; }
#mobileMenu.is-closed { opacity: 0; transform: translateY(-.75rem); pointer-events: none; }

/* --- Scroll-Reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  will-change: opacity, transform;
}

.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* --- Karten --- */
.card-lift {
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Buchmacher-Kachel: Logo bekommt beim Hover etwas Leben */
.brand-tile img { transition: transform .35s var(--ease-out); }
.brand-tile:hover img { transform: scale(1.05); }

/* --- Barrierefreiheit --- */
:focus-visible {
  outline: 3px solid var(--ball-yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -150%);
  z-index: 100;
  background: var(--ball-yellow);
  color: var(--navy);
  padding: .65rem 1.25rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 700;
  transition: transform .2s var(--ease-out);
}

.skip-link:focus { transform: translate(-50%, 0); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Kursiv ------------------------------------------------------------
   Weder Space Grotesk noch Manrope haben einen echten Kursivschnitt. Der
   Browser erzeugt sonst eine schraeg gestellte Fassung, die mechanisch und
   verzogen wirkt. Betonung laeuft deshalb ueber Farbe und Gewicht. */
em, i, cite, blockquote {
  font-style: normal;
}

em {
  font-weight: 600;
}

/* --- Artikel-Typografie --- */
.prose-de p { margin-bottom: 1.15em; }
.prose-de h2 { margin: 2.25em 0 .75em; }
.prose-de h3 { margin: 1.75em 0 .6em; }
.prose-de ul { margin: 0 0 1.15em; padding-left: 1.35em; list-style: disc; }
.prose-de li { margin-bottom: .5em; }
.prose-de strong { color: var(--on-surface); font-weight: 700; }
.prose-de a { color: var(--clay); text-decoration: underline; text-underline-offset: 2px; }

/* --- Tap-Ziele auf Touch-Geraeten ---------------------------------------
   Reine Textlinks sind oft nur 15-19px hoch. Auf dem Smartphone sind das zu
   kleine Ziele (Apple empfiehlt 44pt, Google 48dp), besonders in den
   Fusszeilen-Spalten, wo die Links dicht untereinander stehen. Die Regel
   vergroessert nur die Trefferflaeche, nicht die Schrift, und greift nur
   unterhalb des md-Breakpoints - das Desktop-Layout bleibt unveraendert. */
@media (max-width: 767px), (hover: none) {

  /* Linkspalten in der Fusszeile */
  footer .flex-col > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Wortmarke in Navigation und Fusszeile.
     Die Fusszeilen-Variante ist ein block-Element, braucht also ebenfalls
     eine Zentrierung, sonst sitzt der Schriftzug oben in der Trefferflaeche. */
  nav > a[href] {
    min-height: 44px;
  }

  footer > div > div > div > a[href]:first-child {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Runde Icon-Buttons (Menue, Social) */
  #menuToggle,
  footer a[aria-label] {
    min-width: 44px;
    min-height: 44px;
  }

  /* Kontaktangaben, Telefonnummern und Mail-Adressen */
  a[href^="mailto:"],
  a[href^="tel:"],
  a[href^="https://t.me"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Buttons und Pillen-Links, die knapp unter der Schwelle liegen.
     Wichtig: zusammen mit min-height muss auch vertikal zentriert werden,
     sonst klebt die Beschriftung oben am Rand statt in der Mitte. */
  .rounded-full[href],
  button.rounded-full,
  a.rounded-xl,
  button.rounded-xl,
  button[type="submit"] {
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Volle Breite behalten (z. B. „Zum Anbieter"), nur zentrieren */
  a.block.rounded-xl,
  button.rounded-xl,
  button[type="submit"],
  .w-full.rounded-full[href] {
    display: flex;
  }

  /* Schmale Pillen behalten ihre Inhaltsbreite */
  .rounded-full[href]:not(.w-full),
  button.rounded-full {
    display: inline-flex;
  }

  /* Navigationslinks im Kopf (auf Touch-Tablets ab 768px sichtbar) */
  .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Freistehende Pfeil-Links wie „Zurueck zur Startseite" */
  a.inline-flex {
    min-height: 44px;
    align-items: center;
  }

  /* Fliesstext-Links bleiben unangetastet: eine erzwungene Hoehe wuerde den
     Zeilenfall zerreissen. Dort ist der umgebende Absatz gross genug. */
  .prose-de a,
  p a,
  li a,
  label a {
    display: inline;
    min-height: 0;
  }
}

/* --- Formulare --- */
@media (max-width: 767px) {
  input, textarea, select { font-size: 16px !important; } /* kein Auto-Zoom auf iOS */
}

/* --- Nutzer, die weniger Bewegung wollen --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- Druck --- */
@media print {
  nav, #cookieBanner, .no-print { display: none !important; }
  .section-wrapper { margin: 0; border-radius: 0; }
  body { background: #fff; color: #000; }
}