/*
 * Zusätze der Site „elimente“: sanfte Farbverläufe aus Salbei und Eukalyptus.
 *
 * Warum hier und nicht in tokens.css: Tokens sind einzelne Farben; ein
 * Verlauf braucht zwei davon und eine Richtung. custom.css ist laut Template
 * nur für solche kleinen Ergänzungen da (CLAUDE.md 7.2: additiv, unter
 * ~100 Zeilen). Alle Farben kommen aus tokens.css, damit eine Farbänderung
 * dort auch die Verläufe mitnimmt.
 *
 * Lesbarkeit: Weiße Schrift steht auf beiden Enden der Knopf-Verläufe
 * (Salbei 5 : 1, Eukalyptus 7 : 1). Die Flächenverläufe bleiben so hell,
 * dass jeder Text darauf wie auf Creme liest.
 */

/* Knöpfe: von Salbei nach Eukalyptus. Die Grundfarbe bleibt gesetzt – ohne
   Verlauf (alter Browser) sieht man das Eukalyptus. Der helle „Per E-Mail“-
   Knopf im Formular ist bewusst ausgenommen. */
.hero .btn-solid,
.hero .btn-quiet,
.btn-accent {
  background-color: var(--accent-2);
  background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: transparent;
  color: #ffffff;
}

.hero .btn-solid:hover,
.hero .btn-quiet:hover,
.btn-accent:hover {
  background-image: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-2-hover) 100%);
}

/* „Elimente.“ in der großen Überschrift: Salbei fließt in Eukalyptus. */
.hero h1 em {
  background-image: linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero: ein Hauch Eukalyptus von rechts oben, wie Licht durchs Fenster. */
.section.hero {
  background-image: radial-gradient(ellipse 60% 70% at 85% 20%, color-mix(in srgb, var(--rahmen-farbe) 22%, transparent), transparent 70%);
}

/* Foto-Platzhalter und Rahmen der Signaturform: Salbei hell nach Eukalyptus
   silber statt Creme – sichtbar, solange noch kein Foto da ist. */
.signature-frame .media-placeholder,
.about .media-placeholder {
  background: linear-gradient(160deg, var(--detail), color-mix(in srgb, var(--rahmen-farbe) 60%, var(--surface-1)));
  color: var(--text);
}

/* Verleih und Kalender: zarter Verlauf von Creme zu Salbei hell, damit die
   beiden Abschnitte als ein Angebot zusammengehören. */
#catalog-verleih,
#calendar {
  background-image: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--detail) 28%, transparent) 100%);
}