/* ==========================================================================
   Grundlagen: Farben, Schriftgroessen, Abstaende, Grundtypografie
   ========================================================================== */

:root {
	/* --- Farben ---------------------------------------------------------
	   Vorgabe des Kunden: Beige #AB998C, Schwarz #010101. Beide stehen
	   unveraendert als --ag-sand und --ag-tinte.

	   Ein Punkt dazu, der beim Uebernehmen auffiel: #AB998C erreicht auf
	   dem cremefarbenen Grund nur 2,60:1. Fuer Flaechen, Linien, Symbole
	   und Ornamente ist das voellig in Ordnung - als Schriftfarbe auf
	   hellem Grund nicht, dort verlangt schon grosse Schrift 3:1 und
	   Fliesstext 4,5:1. Auf dem schwarzen Grund dagegen kommt derselbe
	   Ton auf 7,62:1 und traegt dort muehelos Text.
	   Fuer Schrift auf hellem Grund stehen deshalb zwei Abdunklungen
	   desselben Farbklangs bereit. Sie sehen aus wie der Markenton, sind
	   aber lesbar. */
	--ag-weiss:        #FFFFFF;
	--ag-creme:        #FBF9F5;
	--ag-creme-tief:   #F4F0E8;

	/* Der Markenton, unveraendert. Flaechen, Linien, Symbole, Ornamente
	   und Schrift auf Schwarz. */
	--ag-sand:         #AB998C;
	/* Sehr helle Tinte desselben Tons fuer grosse Flaechen und Kaesten. */
	--ag-sand-hell:    #EFEAE6;
	/* Fuer Linien und Symbole auf hellem Grund - 4,02:1. */
	--ag-sand-tief:    #8D7767;

	/* Schreibschrift und grosse Ueberschriften auf hellem Grund: 4,02:1,
	   also ueber den 3:1 fuer grosse Schrift. */
	--ag-taupe:        #8D7767;
	/* Kleine Texte und Vorzeilen auf hellem Grund: 5,04:1. */
	--ag-taupe-tief:   #7E6757;

	/* Vorgabe des Kunden. 19,85:1 auf Creme. */
	--ag-tinte:        #010101;
	--ag-tinte-weich:  #1C1917;

	/* Zwei Graustufen fuer Fliesstext und Nebeninformation - beide
	   lesbar (6,9:1 und 4,9:1), aber deutlich voneinander unterschieden. */
	--ag-grau:         #57534E;
	--ag-grau-hell:    #6C6862;
	--ag-linie:        rgba(1, 1, 1, .12);
	--ag-linie-zart:   rgba(1, 1, 1, .07);

	/* --- Schriften ------------------------------------------------------
	   Vorgabe des Kunden: WindSong Medium fuer die Schreibschrift,
	   Montserrat Bold fuer den uebrigen Text. Beide liegen als Dateien
	   im Theme, es geht kein Request an Google. */
	--ag-schrift:        'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ag-schrift-titel:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ag-schrift-script: 'WindSong', 'Montserrat', cursive;

	/* --- Groessen -------------------------------------------------------
	   Durchgehend mit clamp(), damit zwischen Smartphone und grossem
	   Bildschirm nichts springt und keine Zwischenstufen fehlen. */
	/* Fuenf Stufen, mehr braucht die Seite nicht. Die unterste liegt
	   bei 13 Pixeln - darunter wird Fliesstext auf einem Bildschirm
	   muehsam, und sie ist ausschliesslich fuer Kleingedrucktes und
	   Kennzeichnungen gedacht, nie fuer Saetze.
	     winzig  13  Chips, Hinweise unter Feldern
	     klein   15  Beschriftungen, Bildunterschriften, Fusszeile
	     mittel  16  Sekundaertext, Beschreibungen, Schaltflaechen
	     text  17-19 Fliesstext
	     gross 19-22 Vorspann und hervorgehobene Absaetze */
	--ag-t-winzig:  .8125rem;
	--ag-t-klein:   .9375rem;
	--ag-t-mittel:  1rem;
	--ag-t-text:    clamp(1.0625rem, 1rem + .28vw, 1.1875rem);
	--ag-t-gross:   clamp(1.1875rem, 1.1rem + .42vw, 1.375rem);
	--ag-t-h3:      clamp(1.25rem, 1.1rem + .7vw, 1.75rem);
	--ag-t-h2:      clamp(1.9rem, 1.4rem + 2.2vw, 3.4rem);
	--ag-t-h1:      clamp(2.4rem, 1.6rem + 3.6vw, 5rem);
	--ag-t-script:  clamp(2rem, 1.2rem + 3.4vw, 4.4rem);

	/* --- Abstaende ------------------------------------------------------ */
	--ag-huelle:     min(1440px, 100% - 2.5rem);
	--ag-huelle-eng: min(820px, 100% - 2.5rem);
	--ag-luft:       clamp(4rem, 2.5rem + 6vw, 9rem);
	--ag-luft-klein: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

	/* --- Bewegung -------------------------------------------------------
	   Eine gemeinsame Kurve fuer alles, damit die Seite einen Rhythmus hat. */
	--ag-kurve:      cubic-bezier(.22, .61, .36, 1);
	--ag-kurve-satt: cubic-bezier(.65, .02, .18, 1);
	--ag-dauer:      .55s;

	--ag-radius:     2px;
	--ag-kopf-hoehe: 84px;
	--ag-schatten:   0 24px 60px -28px rgba(1, 1, 1, .28);
	--ag-schatten-weich: 0 12px 34px -20px rgba(1, 1, 1, .22);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anker landen nicht unter dem festen Kopf. */
	scroll-padding-top: calc(var(--ag-kopf-hoehe) + 1rem);
}

body.agave {
	margin: 0;
	background: var(--ag-creme);
	color: var(--ag-tinte);
	font-family: var(--ag-schrift);
	font-size: var(--ag-t-text);
	/* Vorgabe des Kunden: Montserrat Bold. Montserrat laeuft schmaler und
	   deckt staerker als die fruehere Jost - die Zeilenhoehe geht deshalb
	   etwas hoch und der Sperrsatz zurueck, sonst stehen die Zeilen zu
	   dicht und der Fettschnitt wirkt als Block. */
	font-weight: 700;
	line-height: 1.72;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Waagrechte Reveal-Bewegungen duerfen die Seite nicht breiter machen.
	   overflow-x am body wuerde position:sticky im Kopf ausser Kraft
	   setzen - deshalb clip auf den Sektionen, siehe layout.css. */
	overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

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

/* Grundform aller Ueberschriften.
   :where() steuert keine Spezifitaet bei. Ohne das waere ".agave h2"
   staerker als eine Bauteil-Klasse wie ".ag-fuss__titel" - und jede
   Ueberschrift, die anders aussehen soll, muesste dagegen ankaempfen.
   So genuegt eine einfache Klasse weiter hinten im Ladeweg. */
.agave :where(h1, h2, h3, h4) {
	font-family: var(--ag-schrift-titel);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

.agave :where(h1) { font-size: var(--ag-t-h1); }
.agave :where(h2) { font-size: var(--ag-t-h2); }
.agave :where(h3) { font-size: var(--ag-t-h3); }

.agave p { margin: 0 0 1.1em; text-wrap: pretty; }
.agave p:last-child { margin-bottom: 0; }

/* Links erben die Textfarbe.
   :where() steuert keine Spezifitaet bei - sonst waere ".agave a"
   staerker als ".ag-knopf--voll" und jede Schaltflaeche, die ein Link
   ist, wuerde ihre eigene Schriftfarbe verlieren. Das Ergebnis waere
   dunkle Schrift auf dunklem Grund. */
.agave :where(a) {
	color: inherit;
	text-decoration-color: var(--ag-sand-tief);
	text-underline-offset: .22em;
}

.agave :where(a):hover { text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   Textauszeichnungen
   --------------------------------------------------------------------------
   Diese Klassen koennen an zwei Stellen sitzen: direkt am Textelement
   (im Markup des Themes) oder am Widget-Rahmen, wenn sie in Elementor
   vergeben werden - Elementor setzt eigene Klassen naemlich aussen an
   den Rahmen und nicht an die Ueberschrift darin. Die Regeln sprechen
   deshalb beide Faelle an.
   -------------------------------------------------------------------------- */

/* Schreibschrift: WindSong Medium. Sie laeuft deutlich breiter und
   flacher als die fruehere Italianno und hat lange Ober- und Unterlaengen.
   Deshalb kleinere Grade (siehe --ag-t-script), mehr Zeilenhoehe statt
   der frueheren .86 und etwas Luft nach unten, damit die Unterlaengen
   nicht in den naechsten Absatz ragen. */
.ag-script,
.agave .ag-script > .elementor-heading-title,
.agave .ag-script > .elementor-widget-container > .elementor-heading-title {
	font-family: var(--ag-schrift-script);
	font-weight: 500;
	font-size: var(--ag-t-script);
	line-height: 1.24;
	letter-spacing: 0;
	color: var(--ag-taupe);
	/* Italianno hat keine Kapitaelchen - Grossschreibung wuerde die
	   Verbindungen zwischen den Buchstaben zerreissen. */
	text-transform: none;
	margin: 0 0 .12em;
}

.ag-script--gross,
.agave .ag-script--gross > .elementor-heading-title,
.agave .ag-script--gross > .elementor-widget-container > .elementor-heading-title { font-size: clamp(3.4rem, 2rem + 6.5vw, 8.5rem); }
.ag-script--klein,
.agave .ag-script--klein > .elementor-heading-title,
.agave .ag-script--klein > .elementor-widget-container > .elementor-heading-title { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.8rem); }

/* Kleine Vorzeile ueber Ueberschriften. */
.ag-vorzeile,
.agave .ag-vorzeile > .elementor-heading-title,
.agave .ag-vorzeile > .elementor-widget-container > .elementor-heading-title {
	display: block;
	font-family: var(--ag-schrift);
	font-size: var(--ag-t-klein);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--ag-taupe-tief);
	margin: 0 0 1.2rem;
}

/* Der feine Strich vor der Vorzeile. Jeder Selektor braucht sein
   eigenes ::before - haengt es nur am letzten, bekommen die anderen
   die Eigenschaften direkt und der Text verschwindet. */
.ag-vorzeile::before,
.agave .ag-vorzeile > .elementor-heading-title::before,
.agave .ag-vorzeile > .elementor-widget-container > .elementor-heading-title::before {
	content: '';
	display: inline-block;
	width: 2.2rem;
	height: 1px;
	background: var(--ag-sand-tief);
	vertical-align: .32em;
	margin-inline-end: .9rem;
}

/* Abschnittsueberschrift. */
.ag-titel,
.agave .ag-titel > .elementor-heading-title,
.agave .ag-titel > .elementor-widget-container > .elementor-heading-title {
	font-family: var(--ag-schrift-titel);
	font-weight: 700;
	font-size: var(--ag-t-h2);
	line-height: 1.2;
	letter-spacing: -.02em;
	margin: 0 0 .6em;
}

.ag-titel--klein,
.agave .ag-titel--klein > .elementor-heading-title,
.agave .ag-titel--klein > .elementor-widget-container > .elementor-heading-title { font-size: var(--ag-t-h3); }

/* Fliesstext. Hier genuegt der Rahmen: Absaetze erben Groesse und
   Farbe von selbst. */
.ag-fliess {
	font-size: var(--ag-t-gross);
	color: var(--ag-grau);
	line-height: 1.75;
	max-width: 62ch;
}

.ag-fliess--mitte { margin-inline: auto; text-align: center; }

/* Der Rahmen eines Elementor-Widgets bringt eigene Abstaende mit -
   die Ueberschrift darin soll keine zweiten aufschlagen. */
.agave [class*='ag-'] > .elementor-heading-title { margin: 0; }

/* --------------------------------------------------------------------------
   Hilfsklassen
   -------------------------------------------------------------------------- */

.ag-nur-lesbar {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ag-sprunglink {
	position: absolute;
	inset-inline-start: 1rem;
	inset-block-start: -100%;
	z-index: 1000;
	padding: .8rem 1.4rem;
	background: var(--ag-tinte);
	color: var(--ag-weiss);
	text-decoration: none;
	transition: inset-block-start .2s var(--ag-kurve);
}

.ag-sprunglink:focus-visible { inset-block-start: 1rem; }

/* Sichtbarkeit nach Geraet. Der Umschaltpunkt liegt bei 900px und gilt
   ueberall gleich - die Anruf-Schaltflaechen sind bewusst nur am
   Smartphone sichtbar. */
@media (min-width: 900px) { .ag-nur-mobil { display: none !important; } }
@media (max-width: 899px) { .ag-nur-desktop { display: none !important; } }

/* --------------------------------------------------------------------------
   Fokus
   -------------------------------------------------------------------------- */

.agave :focus-visible {
	outline: 2px solid var(--ag-taupe-tief);
	outline-offset: 3px;
	border-radius: 1px;
}

/* Hello Elementor faerbt in reset.css alle Schaltflaechen pink.
   :where() steuert keine Spezifitaet bei und ueberschreibt damit nichts,
   was wir selbst setzen. :hover bleibt ausgeschrieben, sonst gewinnt
   Hellos eigene Hover-Regel. */
.agave :where(button, input[type='submit'], input[type='button']) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
}

.agave button:hover,
.agave button:focus {
	background-color: initial;
	color: inherit;
}

/* --------------------------------------------------------------------------
   Auswahl und Bildlaufleiste
   -------------------------------------------------------------------------- */

.agave ::selection { background: var(--ag-sand); color: var(--ag-tinte); }

@supports (scrollbar-color: auto) {
	.agave { scrollbar-color: var(--ag-sand-tief) var(--ag-creme-tief); }
}