/* === tokens.css — Theme kuenstler-default === */
/* Design-Tokens des Default-Themes „kuenstler-default“.
   Die verbindlichen Werte stehen als CSS-Variablen; die Auslieferung erfolgt
   zusammen mit theme.css als cms/theme.css. */

:root {
  /* Farben */
  --wb-bg:        #ffffff;
  --wb-surface:   #f4f0e8;   /* warmes Papier */
  --wb-ink:       #0e1a18;   /* tiefes Waldgrün-Schwarz */
  --wb-ink-soft:  #5a6862;
  --wb-accent:    #d98b3a;   /* Amber */
  --wb-accent-2:  #123029;   /* Waldgrün */
  --wb-line:      rgba(14, 26, 24, 0.12);

  /* Typografie */
  --wb-font:      "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --wb-font-head: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --wb-size-base: 1rem;
  --wb-size-lead: 1.125rem;
  --wb-size-h1:   clamp(2rem, 4vw, 3.25rem);
  --wb-size-h2:   clamp(1.5rem, 3vw, 2.25rem);

  /* Abstände */
  --wb-space-1: 0.5rem;
  --wb-space-2: 1rem;
  --wb-space-3: 1.5rem;
  --wb-space-4: 2.5rem;
  --wb-section-y: clamp(3rem, 6vw, 6rem);
  --wb-container: 1180px;

  /* Form */
  --wb-radius: 6px;
  --wb-radius-l: 10px;
  --wb-shadow: 0 18px 40px -20px rgba(14, 26, 24, 0.35);

  /* Bewegung */
  --wb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* === theme.css — Theme kuenstler-default === */
/* ==========================================================================
   Theme „kuenstler-default“ – Designsprache (E3b)
   Wird beim Veröffentlichen als cms/theme.css ausgeliefert und nach
   css/style.css geladen: hier werden nur Variablen und wenige Regeln
   überschrieben, das Struktur-CSS bleibt unangetastet.
   ========================================================================== */
:root {
  /* Farbwelt: tiefes Waldgrün + Amber auf warmem Papier */
  --ink:        #0e1a18;
  --ink-soft:   #5a6862;
  --navy:       #123029;
  --sand:       #f4f0e8;

  --gold:       #d98b3a;
  --gold-dark:  #b06f26;
  --gold-light: #e8ab63;

  --line:       rgba(14, 26, 24, 0.12);
  --line-light: rgba(255, 255, 255, 0.18);

  /* Formsprache: kantiger als das Grunddesign */
  --radius:     6px;
  --radius-s:   4px;
  --radius-l:   10px;
  --radius-xl:  14px;

  /* Typografie: Serifen-Überschriften für einen eigenständigen Auftritt */
  --font:          "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display:  Georgia, "Times New Roman", "Iowan Old Style", serif;

  /* Aktionen */
  --btn-bg: #d98b3a;
  --btn-fg: #10201c;
  --ghost:  rgba(255, 255, 255, 0.10);

  --shadow: 0 18px 40px -20px rgba(14, 26, 24, 0.35);
}

/* Feinschliff */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: 0;
}

.eyebrow {
  color: var(--gold);
  letter-spacing: 0.14em;
}

.card {
  border-radius: var(--radius-l);
}

.card__tag {
  background: var(--gold);
  color: var(--btn-fg);
}

.quote {
  border-left: 3px solid var(--gold);
  padding-left: var(--radius-l);
}

.section--navy .eyebrow,
.section--navy .lead {
  color: var(--gold-light);
}

/* Dotmaker-Website: Hintergrundbilder der Unterseiten-Köpfe.
   Wird als cms/theme.css ausgeliefert; url() ist relativ zu public/cms/.

   Wichtig: `--hero-img` muss IMMER einen gültigen Wert haben. Fehlt er, wird
   die gesamte background-image-Deklaration ungültig, der dunkle Verlauf
   entfällt und die weiße Schrift wäre nicht lesbar. Der Fallback `none`
   erhält den Verlauf auch für Seiten ohne eigenes Bild. */
.page-hero--photo       { --hero-img: none; }
.page-hero--produkt      { --hero-img: url("../img/bg/produkt.svg"); }
.page-hero--preise       { --hero-img: url("../img/bg/preise.svg"); }
.page-hero--faq          { --hero-img: url("../img/bg/faq.svg"); }
.page-hero--kontakt      { --hero-img: url("../img/bg/kontakt.svg"); }
.page-hero--impressum    { --hero-img: url("../img/bg/impressum.svg"); }
.page-hero--datenschutz  { --hero-img: url("../img/bg/datenschutz.svg"); }
.page-hero--sofort-einsatzbereit { --hero-img: url("../img/bg/sofort.svg"); }
.page-hero--sicherheit   { --hero-img: url("../img/bg/sicherheit.svg"); }
.page-hero--direkt-bearbeiten    { --hero-img: url("../img/bg/direkt.svg"); }
.page-hero--in-page-editor       { --hero-img: url("../img/bg/editor.svg"); }
.page-hero--medienverwaltung     { --hero-img: url("../img/bg/medien.svg"); }
.page-hero--module       { --hero-img: url("../img/bg/module.svg"); }

/* Fußzeilen-Logo: eigene Kontrastvariante (logo-light.svg) statt der
   Weiß-Invertierung des Grunddesigns – so bleiben Marke und Punkt sichtbar. */
.footer__logo img { filter: none; }

/* Ghost-Buttons auf dunklen Flächen (CTA-Band, dunkle Abschnitte):
   helle Schrift und sichtbarer Rand statt dunkel-auf-dunkel. */
.cta-band .btn--ghost,
.section--navy .btn--ghost {
  --btn-fg: #ffffff;
  border-color: rgba(255, 255, 255, 0.38);
}
.cta-band .btn--ghost:hover,
.section--navy .btn--ghost:hover {
  --btn-fg: var(--navy);
  border-color: transparent;
}