/*
Theme Name:   Aare Schlüssel – Twenty Twenty-Five Child
Theme URI:    https://www.aare-schluessel.ch
Description:  Child-Theme für Aare Schlüssel GmbH. Erweitert Twenty Twenty-Five um Marken-Farben, Kacheln, Bild-Platzhalter und Hover-Animationen. Der Full-Site-Editor (Baukasten) bleibt vollständig nutzbar.
Author:       Aare Schlüssel
Template:     twentytwentyfive
Version:      1.0.0
Text Domain:  aare-schluessel
*/

/* =========================================================
   1. MARKENFARBEN  –  hier zentral anpassen
   ========================================================= */
:root {
	--as-blau:          #0F2A47;  /* Hauptfarbe dunkelblau      */
	--as-blau-tief:     #0A1D31;  /* Verlauf / Hover dunkler    */
	--as-anthrazit:     #1C2126;  /* Text & dunkle Flächen      */
	--as-signal:        #E2231A;  /* Signalrot: Notruf & CTA    */
	--as-signal-tief:   #B21811;  /* Signalrot Hover            */
	--as-messing:       #C8912F;  /* Akzent (Schlüssel-Messing) */
	--as-hell:          #F4F6F8;  /* Helle Flächen              */
	--as-linie:         #DCE2E8;  /* Rahmen / Trennlinien       */
	--as-weiss:         #FFFFFF;

	--as-radius:        12px;
	--as-tempo:         240ms;
	--as-kurve:         cubic-bezier(.2, .7, .3, 1);
	--as-schatten:      0 2px 6px rgba(15, 42, 71, .07);
	--as-schatten-hoch: 0 14px 32px rgba(15, 42, 71, .18);
}

/* =========================================================
   2. GRUNDLAGEN
   ========================================================= */
body {
	color: var(--as-anthrazit);
}

/* Alles, was animiert wird, bekommt eine ruhige Grundkurve */
.wp-block-button__link,
:is(.as-kachel, .is-style-as-kachel),
:is(.as-bildbox, .is-style-as-bildbox),
.as-linkliste a,
.wp-block-navigation__container .wp-block-navigation-item__content {
	transition:
		transform     var(--as-tempo) var(--as-kurve),
		box-shadow    var(--as-tempo) var(--as-kurve),
		background-color var(--as-tempo) var(--as-kurve),
		border-color  var(--as-tempo) var(--as-kurve),
		color         var(--as-tempo) var(--as-kurve);
}

/* =========================================================
   3. SEKTIONEN (Hintergrundflächen)
   ========================================================= */
.as-dunkel {
	background: linear-gradient(160deg, var(--as-blau) 0%, var(--as-blau-tief) 100%);
	color: var(--as-weiss);
}
.as-dunkel h1,
.as-dunkel h2,
.as-dunkel h3,
.as-dunkel p,
.as-dunkel li,
.as-dunkel strong { color: var(--as-weiss); }

.as-hell     { background: var(--as-hell); }
.as-weiss    { background: var(--as-weiss); }

/* Eyebrow – kleines Label über Überschriften, mit Schlüsselbart-Kerbe */
.as-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--as-signal);
	margin: 0 0 .6rem;
}
.as-eyebrow::before {
	content: "";
	width: 34px;
	height: 8px;
	background:
		linear-gradient(var(--as-signal) 0 0) 0    50% / 34px 2px no-repeat,
		linear-gradient(var(--as-signal) 0 0) 8px  0   / 3px 8px  no-repeat,
		linear-gradient(var(--as-signal) 0 0) 18px 0   / 3px 5px  no-repeat;
}
.as-dunkel .as-eyebrow { color: var(--as-messing); }
.as-dunkel .as-eyebrow::before {
	background:
		linear-gradient(var(--as-messing) 0 0) 0    50% / 34px 2px no-repeat,
		linear-gradient(var(--as-messing) 0 0) 8px  0   / 3px 8px  no-repeat,
		linear-gradient(var(--as-messing) 0 0) 18px 0   / 3px 5px  no-repeat;
}

/* =========================================================
   4. BUTTONS  –  Hover-Animation
   ========================================================= */
.wp-block-button__link {
	border-radius: 8px;
	font-weight: 600;
	letter-spacing: .01em;
	will-change: transform;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--as-schatten-hoch);
}
.wp-block-button__link:active { transform: translateY(-1px); }

/* Primär – dunkelblau */
:is(.as-btn-primaer, .is-style-as-btn-primaer) .wp-block-button__link {
	background-color: var(--as-blau);
	color: var(--as-weiss);
	border: 2px solid var(--as-blau);
}
:is(.as-btn-primaer, .is-style-as-btn-primaer) .wp-block-button__link:hover { background-color: var(--as-blau-tief); }

/* Notruf – Signalrot, mit dezentem Puls beim Hover */
:is(.as-btn-notruf, .is-style-as-btn-notruf) .wp-block-button__link {
	background-color: var(--as-signal);
	color: var(--as-weiss);
	border: 2px solid var(--as-signal);
	box-shadow: 0 0 0 0 rgba(226, 35, 26, .45);
}
:is(.as-btn-notruf, .is-style-as-btn-notruf) .wp-block-button__link:hover,
:is(.as-btn-notruf, .is-style-as-btn-notruf) .wp-block-button__link:focus-visible {
	background-color: var(--as-signal-tief);
	border-color: var(--as-signal-tief);
	animation: as-puls 1.4s var(--as-kurve) infinite;
}
@keyframes as-puls {
	0%   { box-shadow: 0 0 0 0    rgba(226, 35, 26, .45); }
	70%  { box-shadow: 0 0 0 14px rgba(226, 35, 26, 0);   }
	100% { box-shadow: 0 0 0 0    rgba(226, 35, 26, 0);   }
}

/* Sekundär – Outline, füllt sich beim Hover */
:is(.as-btn-outline, .is-style-as-btn-outline) .wp-block-button__link {
	background-color: transparent;
	color: var(--as-blau);
	border: 2px solid var(--as-blau);
}
:is(.as-btn-outline, .is-style-as-btn-outline) .wp-block-button__link:hover {
	background-color: var(--as-blau);
	color: var(--as-weiss);
}
.as-dunkel :is(.as-btn-outline, .is-style-as-btn-outline) .wp-block-button__link {
	color: var(--as-weiss);
	border-color: rgba(255, 255, 255, .6);
}
.as-dunkel :is(.as-btn-outline, .is-style-as-btn-outline) .wp-block-button__link:hover {
	background-color: var(--as-weiss);
	color: var(--as-blau);
	border-color: var(--as-weiss);
}

/* =========================================================
   5. KACHELN  –  Hover-Animation
   ========================================================= */
:is(.as-kachel, .is-style-as-kachel) {
	position: relative;
	overflow: hidden;
	background: var(--as-weiss);
	border: 1px solid var(--as-linie);
	border-radius: var(--as-radius);
	box-shadow: var(--as-schatten);
	will-change: transform;
}
/* Signatur: Akzentleiste fährt beim Hover von links über die Kachel */
:is(.as-kachel, .is-style-as-kachel)::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--as-signal);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--as-tempo) var(--as-kurve);
}
:is(.as-kachel, .is-style-as-kachel):hover,
:is(.as-kachel, .is-style-as-kachel):focus-within {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: var(--as-schatten-hoch);
}
:is(.as-kachel, .is-style-as-kachel):hover::before,
:is(.as-kachel, .is-style-as-kachel):focus-within::before { transform: scaleY(1); }

:is(.as-kachel, .is-style-as-kachel) h3 {
	margin-top: .8rem;
	line-height: 1.25;
}
:is(.as-kachel, .is-style-as-kachel) p:last-child { margin-bottom: 0; }

/* Kompakte Vorteils-Kachel auf dunklem Grund */
.as-kachel--dunkel {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .16);
	box-shadow: none;
}
.as-kachel--dunkel:hover {
	background: rgba(255, 255, 255, .1);
	border-color: transparent;
}
.as-kachel--dunkel::before { background: var(--as-messing); }

/* =========================================================
   6. BILD-PLATZHALTER  (leere Bildkästen)
   Bild später einfach ersetzen: Block markieren → "Bild" einfügen
   ========================================================= */
:is(.as-bildbox, .is-style-as-bildbox) {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border: 2px dashed var(--as-linie);
	border-radius: var(--as-radius);
	background:
		repeating-linear-gradient(
			135deg,
			var(--as-hell) 0 10px,
			#EAEEF2 10px 20px
		);
	color: #8B98A6;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	overflow: hidden;
}
:is(.as-bildbox, .is-style-as-bildbox) p {
	margin: 0;
	pointer-events: none;
}
:is(.as-bildbox, .is-style-as-bildbox)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--as-blau);
	opacity: 0;
	transition: opacity var(--as-tempo) var(--as-kurve);
}
:is(.as-bildbox, .is-style-as-bildbox):hover {
	border-color: var(--as-signal);
	transform: scale(1.015);
}
:is(.as-bildbox, .is-style-as-bildbox):hover::after { opacity: .06; }

/* Seitenverhältnisse */
.as-bildbox--breit   { aspect-ratio: 16 / 9; }
.as-bildbox--quadrat { aspect-ratio: 1 / 1; }
.as-bildbox--hoch    { aspect-ratio: 3 / 4; }
.as-bildbox--icon    { aspect-ratio: 1 / 1; max-width: 68px; border-radius: 8px; }
.as-bildbox--icon p  { display: none; }

/* Echte Bilder später: gleiche Hover-Geste wie die Platzhalter */
:is(.as-bildrahmen, .is-style-as-bildrahmen) img {
	border-radius: var(--as-radius);
	transition: transform var(--as-tempo) var(--as-kurve);
}
:is(.as-bildrahmen, .is-style-as-bildrahmen) { overflow: hidden; border-radius: var(--as-radius); }
:is(.as-bildrahmen, .is-style-as-bildrahmen):hover img { transform: scale(1.04); }

/* =========================================================
   7. NOTFALL-BANNER
   ========================================================= */
.as-notfall {
	background: var(--as-signal);
	color: var(--as-weiss);
	border-radius: var(--as-radius);
	position: relative;
	overflow: hidden;
}
.as-notfall h2,
.as-notfall p,
.as-notfall strong { color: var(--as-weiss); }
.as-notfall .wp-block-button__link {
	background: var(--as-weiss);
	color: var(--as-signal);
	border: 2px solid var(--as-weiss);
}
.as-notfall .wp-block-button__link:hover {
	background: var(--as-anthrazit);
	border-color: var(--as-anthrazit);
	color: var(--as-weiss);
}

/* =========================================================
   8. NAVIGATION & LINKS
   ========================================================= */
.wp-block-navigation__container .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 3px;
}
.wp-block-navigation__container .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--as-signal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--as-tempo) var(--as-kurve);
}
.wp-block-navigation__container .wp-block-navigation-item__content:hover::after,
.wp-block-navigation__container .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.as-linkliste a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.as-linkliste a:hover {
	color: var(--as-signal);
	border-bottom-color: var(--as-signal);
}

/* Telefonnummer als Textlink */
.as-tel {
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 2px solid var(--as-signal);
	transition: color var(--as-tempo) var(--as-kurve);
}
.as-tel:hover { color: var(--as-signal); }

/* =========================================================
   9. KONTAKTFORMULAR & KARTE
   ========================================================= */
.as-formular {
	display: grid;
	gap: 1rem;
}
.as-formular .as-feld-paar {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 1fr;
}
.as-formular label {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	margin-bottom: .35rem;
}
.as-formular input,
.as-formular select,
.as-formular textarea {
	width: 100%;
	padding: .8rem .9rem;
	font: inherit;
	color: var(--as-anthrazit);
	background: var(--as-weiss);
	border: 1px solid var(--as-linie);
	border-radius: 8px;
	transition: border-color var(--as-tempo) var(--as-kurve),
	            box-shadow  var(--as-tempo) var(--as-kurve);
}
.as-formular input:focus,
.as-formular select:focus,
.as-formular textarea:focus {
	outline: none;
	border-color: var(--as-blau);
	box-shadow: 0 0 0 3px rgba(15, 42, 71, .15);
}
.as-formular button {
	justify-self: start;
	padding: .9rem 1.8rem;
	font: inherit;
	font-weight: 600;
	color: var(--as-weiss);
	background: var(--as-signal);
	border: 2px solid var(--as-signal);
	border-radius: 8px;
	cursor: pointer;
	transition: transform var(--as-tempo) var(--as-kurve),
	            box-shadow var(--as-tempo) var(--as-kurve),
	            background-color var(--as-tempo) var(--as-kurve);
}
.as-formular button:hover {
	background: var(--as-signal-tief);
	border-color: var(--as-signal-tief);
	transform: translateY(-3px);
	box-shadow: var(--as-schatten-hoch);
}

.as-karte {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--as-radius);
	overflow: hidden;
	border: 1px solid var(--as-linie);
}
.as-karte iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(100%) contrast(1.05);
	transition: filter var(--as-tempo) var(--as-kurve);
}
.as-karte:hover iframe { filter: grayscale(0%); }

/* =========================================================
   10. FAKTEN-ZEILE (Öffnungszeiten, Standort, Partner)
   ========================================================= */
.as-fakten {
	display: grid;
	gap: 1.2rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
.as-fakten li {
	padding-left: 1rem;
	border-left: 3px solid var(--as-signal);
}
.as-fakten strong { display: block; }

/* =========================================================
   11. MOBILE NOTRUF-LEISTE (fix am unteren Rand)
   ========================================================= */
.as-mobilbar { display: none; }

@media (max-width: 781px) {
	.as-mobilbar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		box-shadow: 0 -4px 20px rgba(15, 42, 71, .22);
	}
	.as-mobilbar a {
		padding: .95rem .5rem;
		font-weight: 700;
		font-size: .95rem;
		text-align: center;
		text-decoration: none;
		color: var(--as-weiss);
		background: var(--as-blau);
		transition: background-color var(--as-tempo) var(--as-kurve);
	}
	.as-mobilbar a.as-mobilbar__notruf { background: var(--as-signal); }
	.as-mobilbar a:active { background: var(--as-anthrazit); }

	/* Platz schaffen, damit die Leiste den Footer nicht verdeckt.
	   Der Abstand sitzt IM Footer, nicht am body – sonst entsteht
	   unterhalb des Footers ein weisser Streifen. */
	.wp-site-blocks > footer { padding-bottom: 60px; }

	.as-formular .as-feld-paar { grid-template-columns: 1fr; }
}

/* =========================================================
   12. BARRIEREFREIHEIT
   ========================================================= */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--as-signal);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	:is(.as-kachel, .is-style-as-kachel):hover,
	:is(.as-bildbox, .is-style-as-bildbox):hover,
	.wp-block-button__link:hover { transform: none; }
}

/* =========================================================
   13. WEISSER BALKEN ÜBER DER ERSTEN SEKTION
   Twenty Twenty-Five setzt im Seiten-Template einen Aussen-
   abstand auf <main> und blendet Titel + Beitragsbild ein.
   Da unsere Seiten mit einer eigenen farbigen Hero-Sektion
   beginnen, entsteht darüber ein weisser Streifen.
   ========================================================= */
.page .wp-site-blocks > main,
.page .wp-site-blocks > main > .wp-block-post-content {
	margin-block-start: 0;
	padding-block-start: 0;
}

/* Leerer Titel- bzw. Bildbereich der Vorlage ausblenden.
   Nur nötig, wenn diese Blöcke im Template stehen bleiben. */
.page .wp-site-blocks > main > .wp-block-post-title,
.page .wp-site-blocks > main > .wp-block-post-featured-image:empty {
	display: none;
}

/* Falls der Header eine untere Trennlinie zeigt, die über der
   dunklen Hero-Sektion stört: Zeile aktivieren.
.wp-site-blocks > header { border-bottom: 0; }
*/

/* =========================================================
   14. WEISSER BALKEN ZWISCHEN INHALT UND FOOTER
   WordPress trennt Header, Inhalt und Footer über den globalen
   Blockabstand. Zwischen unserer letzten dunklen Sektion und dem
   dunklen Footer wird dieser Abstand als weisser Streifen sichtbar.
   Unsere Sektionen bringen ihre Abstände selbst mit, der globale
   Abstand auf dieser Ebene wird deshalb komplett entfernt.
   ========================================================= */
.wp-site-blocks > *,
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Auch Innenabstände (padding) entfernen – die Seiten-Vorlage von
   Twenty Twenty-Five setzt sie unabhängig vom Aussenabstand. */
.wp-site-blocks > main,
.wp-site-blocks > main > .wp-block-post-content {
	padding-block-start: 0 !important;
	padding-block-end: 0 !important;
}

/* Letzter Block im Inhalt darf unten keinen Abstand mehr aufbauen. */
.wp-block-post-content > *:last-child,
.wp-site-blocks > main > *:last-child {
	margin-block-end: 0 !important;
	padding-block-end: 0 !important;
}

/* Sicherheitsnetz: Der Footer-Bereich bekommt selbst die dunkle
   Farbe. Sollte doch noch ein Rest-Abstand innerhalb des Footers
   entstehen, ist er dunkel statt weiss. */
footer.wp-block-template-part,
.wp-site-blocks > footer {
	background-color: var(--as-blau-tief);
}

/* Falls der Header eine untere Trennlinie zeigt, die über der
   dunklen Hero-Sektion stört: Zeile aktivieren.
.wp-site-blocks > header { border-bottom: 0; }
*/

/* =========================================================
   15. INHALTSBREITE AUF SCHMALEN BILDSCHIRMEN
   Die Breite selbst steht in theme.json (1140 px). Hier nur
   der seitliche Mindestabstand, damit der Text auf Tablets
   und Handys nicht am Rand klebt.
   ========================================================= */
@media (max-width: 1200px) {
	.wp-site-blocks .alignfull > .wp-block-group,
	.wp-site-blocks > main > .wp-block-post-content > .wp-block-group {
		padding-left: max(1.25rem, env(safe-area-inset-left));
		padding-right: max(1.25rem, env(safe-area-inset-right));
	}
}

/* Kachel-Spalten dürfen auf mittleren Breiten umbrechen,
   statt sich auf vier schmale Streifen zu quetschen. */
@media (max-width: 900px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - 0.75rem) !important;
		flex-grow: 1;
	}
}

@media (max-width: 600px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}