/* =========================================================================
   Café Rih – Footer-Banner „Öffnungszeiten"
   Banner am unteren Bildschirmrand, blendet sich nach 2 Sekunden selbst ein
   (Öffnungszeiten, Adresse, Social, Route). Kein Trigger-Button.
   Nur Tokens aus brand.css, Hover-Akzent durchgängig Türkis.

   LESBARKEIT UND TOUCH GEHEN VOR KOMPAKTHEIT: rund 90 Prozent der Besuche
   kommen vom Handy. Die Schriftgrößen orientieren sich am Fließtext der Seite
   (1.05rem bis 1.2rem) und werden auf Mobil NICHT verkleinert, das Schließen-
   Kreuz ist eine große Fläche mit sichtbarem Kasten.

   Gestaltungsregel: „Route planen" ist das EINZIGE Button-Element im Banner.
   Social bleiben schlichte Icon-Links, Zeiten und Adresse Text.

   Z-Index-Ordnung (bewusst gewählt):
     Header (sticky)              1000 / 1200 bei offenem Mobilmenü
     -> Footer-Banner             1400
     Complianz „Manage consent"   9998
     Complianz Cookie-Banner      99999
   Der Banner liegt damit über dem Header, aber nie über dem Consent-Banner.
   Solange dieser unten sichtbar ist, schiebt footer-popup.js unseren Banner
   über --cr-fp-shift nach oben, damit sich beide nicht überlagern.
   ========================================================================= */

.cr-fp {
	--cr-fp-shift: 0px;   /* von JS gesetzt (Consent-Banner) */
	--cr-fp-dur:   200ms; /* sanfte Ein-/Ausblendung */

	/* Schriftgrößen zentral, damit Desktop und Mobil dieselbe Lesbarkeit haben. */
	--cr-fp-size-text:    clamp(1.05rem, 1.4vw, 1.15rem); /* Zeiten, Adresse */
	--cr-fp-size-note:    clamp(.95rem, 1.2vw, 1rem);     /* Ruhetag-Hinweis */
	--cr-fp-size-heading: clamp(1.3rem, 2.4vw, 1.5rem);   /* Spalten-Überschriften */
	--cr-fp-size-btn:     clamp(.95rem, 1.2vw, 1.02rem);  /* Route planen */

	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--cr-fp-shift);
	z-index: 1400;

	font-family: var(--cr-font-body);
	/* Der Streifen selbst fängt keine Klicks ab, nur seine Kinder. */
	pointer-events: none;
	transition: bottom var(--cr-fp-dur) var(--cr-ease);
}

/* =========================================================================
   Banner
   ========================================================================= */

.cr-fp__panel {
	position: relative;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: calc(100vh - var(--cr-fp-shift) - 4rem);

	background: var(--cr-surface);
	border-top: 1px solid var(--cr-hairline);
	color: var(--cr-text-muted);
	box-shadow: 0 -12px 34px rgba(0, 0, 0, .32); /* ein Schatten, ruhig gehalten */

	pointer-events: auto;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--cr-fp-dur) var(--cr-ease),
	            transform var(--cr-fp-dur) var(--cr-ease);

	/* Falls doch gescrollt wird: dünne, entsättigte Leiste statt heller Balken. */
	scrollbar-width: thin;
	scrollbar-color: rgba(247, 247, 245, .26) transparent;
}

.cr-fp__panel.is-open {
	opacity: 1;
	transform: translateY(0);
}

/* Formensprache ton-in-ton, rein dekorativ (nicht anklickbar). */
.cr-fp .cr-fp__decor {
	position: absolute;
	right: 4%;
	top: -70%;
	width: clamp(240px, 32vw, 460px);
	height: auto;
	z-index: 0;
	pointer-events: none;
}

/* --- Inhaltszeile: die Spalten über die Breite verteilen --- */
.cr-fp__bar {
	position: relative;
	z-index: 1;
	/* Etwas breiter als das Inhaltsraster (--cr-maxw 1200px), damit auf großen
	   Schirmen alles inklusive Route-Button in eine Zeile passt. */
	max-width: 1320px;
	margin-inline: auto;
	padding: 1.3rem clamp(1.15rem, 4vw, 2.4rem);
	padding-right: calc(clamp(1.15rem, 4vw, 2.4rem) + 4rem); /* Platz für „Schließen" */

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between; /* nicht alles links klumpen */
	gap: 1.1rem clamp(1.4rem, 3vw, 2.6rem);
}

/* Spalten behalten ihre natürliche Breite und brechen als Ganzes um, statt
   zusammengequetscht zu werden: die Zeilen bleiben dadurch lesbar. */
.cr-fp__col {
	flex: 0 0 auto;
	max-width: 100%;
}

/* --- Spalten-Überschriften --- */
.cafe-rih .cr-fp__heading {
	margin: 0 0 .5rem;
	font-family: var(--cr-font-display);
	font-weight: 400;
	font-size: var(--cr-fp-size-heading);
	line-height: 1.15;
	color: var(--cr-text);
}

/* --- Öffnungszeiten (Text, kein Button) --- */
.cr-fp__hours {
	margin: 0;
}
.cr-fp__hours-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .15rem .7rem;
}
.cr-fp__hours-row + .cr-fp__hours-row {
	margin-top: .2rem;
}
.cr-fp__hours-row dt {
	font-size: var(--cr-fp-size-text);
	line-height: 1.45;
	color: var(--cr-text);
}
.cr-fp__hours-row dt::after {
	content: ":";
}
.cr-fp__hours-row dd {
	margin: 0;
	font-size: var(--cr-fp-size-text);
	line-height: 1.45;
	color: var(--cr-text-muted);
}

/* --- Adresse und Social: die Icons stehen rechts neben der Straße --- */
.cr-fp__col--kontakt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem clamp(1.1rem, 2.5vw, 1.8rem);
}

.cr-fp__address {
	margin: 0;
	font-style: normal;
	font-size: var(--cr-fp-size-text);
	line-height: 1.5;
	color: var(--cr-text);
}

.cafe-rih .cr-fp__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.3rem;
	margin: 0;
	max-width: none;
}

/* Social bewusst OHNE Kreis-Rahmen, damit „Route planen" der einzige
   Button-Eindruck im Banner bleibt. Die beiden Glyphen bleiben als Gruppe
   zusammen und brechen nicht getrennt um. */
.cr-fp__social {
	display: inline-flex;
	align-items: center;
	gap: 1.6rem;
}
.cafe-rih a.cr-fp__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px; /* volles Touch-Ziel, ohne Button-Optik */
	color: var(--cr-text);
	transition: color var(--cr-dur) var(--cr-ease);
}
.cafe-rih a.cr-fp__link:hover,
.cafe-rih a.cr-fp__link:focus-visible {
	color: var(--cr-teal);
}
/* Glyphen deutlich größer als im Footer, damit sie neben der Adresse Gewicht
   haben. Seitenverhältnis je viewBox, damit nichts verzerrt. */
.cr-fp__social .cr-social__icon--facebook {
	width: 20px; /* 320/512 der Höhe, unverzerrt */
	height: 32px;
}
.cr-fp__social .cr-social__icon--instagram {
	width: 27.1px; /* 448/512 der Höhe, unverzerrt */
	height: 31px;
}

/* --- Route: das einzige Button-Element --- */
.cafe-rih a.cr-fp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 56px;
	padding: .95em 1.9em;
	border: 1px solid var(--cr-gold);
	border-radius: var(--cr-radius);
	background: transparent;
	color: var(--cr-text);
	font-size: var(--cr-fp-size-btn);
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color var(--cr-dur) var(--cr-ease),
	            border-color var(--cr-dur) var(--cr-ease),
	            color var(--cr-dur) var(--cr-ease);
}
.cafe-rih a.cr-fp__btn:hover,
.cafe-rih a.cr-fp__btn:focus-visible {
	background: var(--cr-teal);
	border-color: var(--cr-teal);
	color: var(--color-base-dark);
}
.cr-fp__btn-icon {
	display: block;
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

/* --- Schließen: große Fläche mit sichtbarem Kasten (Handy zuerst) --- */
.cafe-rih .cr-fp__close {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: .75rem;
	right: .75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--cr-hairline);
	border-radius: var(--cr-radius);
	background: transparent; /* verhindert den pinken Elementor-Button-Hover */
	color: var(--cr-text);
	cursor: pointer;
	transition: color var(--cr-dur) var(--cr-ease),
	            border-color var(--cr-dur) var(--cr-ease);
}
.cafe-rih .cr-fp__close:hover,
.cafe-rih .cr-fp__close:focus-visible {
	background: transparent;
	border-color: var(--cr-teal);
	color: var(--cr-teal);
}
.cr-fp__close svg {
	display: block;
	width: 26px;
	height: 26px;
}

/* =========================================================================
   Schmalere Schirme: stapeln statt schrumpfen. Die Schriftgrößen bleiben.
   ========================================================================= */

@media (max-width: 1099px) {
	.cr-fp__col--cta {
		width: 100%;
	}
	.cafe-rih a.cr-fp__btn {
		width: 100%;
	}
}

@media (max-width: 780px) {
	.cr-fp__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.1rem;
		padding: 1.15rem 1.15rem 1.35rem;
	}
	/* Dem Schließen-Kreuz weicht nur die oberste Spalte aus, damit Adresse und
	   Social darunter die volle Breite haben. */
	.cr-fp__col--hours {
		padding-right: 4.5rem;
	}
	.cr-fp .cr-fp__decor {
		width: 260px;
		top: -40%;
	}
	.cafe-rih .cr-fp__close {
		top: .6rem;
		right: .6rem;
	}
}

/* =========================================================================
   prefers-reduced-motion: ohne Bewegung, nur Sichtbarkeit
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.cr-fp,
	.cr-fp__panel,
	.cafe-rih .cr-fp__close,
	.cafe-rih a.cr-fp__btn,
	.cafe-rih a.cr-fp__link {
		transition: none !important;
	}
	.cr-fp__panel {
		transform: none;
	}
}