/* =========================================================================
   Café Rih – Marken-CSS
   Dunkle, matte, hochwertige Markenwelt. Viel Negativraum, ruhige Bewegung.
   Tokens werden zusätzlich als Elementor Global Colors/Fonts gepflegt,
   diese Datei sorgt für die nicht-Elementor-Bereiche und die Formensprache.
   ========================================================================= */

:root {
	/* --- Marken-Farben (verbindlich aus dem Markenboard) --- */
	--color-base-dark:   #15191A; /* Mattschwarz, trägt die Marke (~40%) */
	--color-base-light:  #F7F7F5; /* Weiß, trägt die Marke (~40%) */
	--color-accent-gold: #A1987F; /* gebürstetes Altgold (~10%) */
	--color-accent-teal: #809997; /* Slate-Türkis (~10%) */

	/* Semantische Aliasse */
	--cr-bg:        var(--color-base-dark);
	--cr-surface:   #1C2122; /* leicht abgesetzte Fläche auf Mattschwarz */
	--cr-text:      var(--color-base-light);
	--cr-text-muted: #C9C8C2; /* gedämpfter Lauftext auf Dunkel */
	--cr-gold:      var(--color-accent-gold);
	--cr-teal:      var(--color-accent-teal);
	--cr-hairline:  rgba(247, 247, 245, .14); /* feine Linien/Trenner */

	/* --- Typografie --- */
	--cr-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--cr-font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

	/* --- Rhythmus & Form --- */
	--cr-maxw:        1200px;
	--cr-radius:      0;
	--cr-eyebrow-ls:  .18em; /* Letter-Spacing für Labels/Eyebrows */
	--cr-ease:        cubic-bezier(.22, .61, .36, 1);
	--cr-dur:         .5s;

	/* --- EINHEITLICHER Seiten-Hero (identisch auf ALLEN Unterseiten + Live-Event) ---
	   Diese Tokens sind die einzige Quelle für Hero-Größen/Abstände, damit kein
	   Seitentyp abweicht. Nicht pro Seite überschreiben. */
	--cr-hero-pad-top:    clamp(4.5rem, 11vw, 8.5rem);
	--cr-hero-pad-bottom: clamp(2.75rem, 6vw, 4.5rem);
	--cr-hero-size:       clamp(2.8rem, 7vw, 5.2rem);
	--cr-lead-size:       clamp(1.05rem, 1.6vw, 1.22rem);
	/* EINHEITLICHER Fließtext (alle Lauftext-Absätze außerhalb des Hero-Leads).
	   Eine einzige, auflösungsabhängige Größe, damit kein Absatz abweicht und der
	   Text auf großen Bildschirmen nicht winzig wirkt. */
	--cr-body-size:       clamp(1.05rem, 1.4vw, 1.2rem);
	--cr-body-line:       1.75;
	--cr-section-pad:     clamp(3.25rem, 8vw, 6.5rem);
	/* Vertikaler Rhythmus IM Hero (Eyebrow -> Titel -> Lead). Beide Markups
	   (Live-Event-<section> und Elementor-Container) nutzen exakt diese Werte,
	   damit die Abstände identisch sind. Elementor injiziert sonst eigene
	   20px-Widget-Margins, die hier bewusst neutralisiert werden. */
	--cr-hero-eyebrow-gap: 1.25rem; /* Abstand Eyebrow -> Titel */
	--cr-hero-lead-gap:    1.4rem;  /* Abstand Titel -> Lead */
	--cr-hero-title-mt:    .12em;   /* feiner optischer Vorlauf über dem Titel */
}

/* =========================================================================
   Basis-Typografie (greift in Elementor-Inhalten, sofern Global Fonts gesetzt)
   ========================================================================= */

body.cafe-rih,
.cafe-rih {
	background-color: var(--cr-bg);
	color: var(--cr-text);
	font-family: var(--cr-font-body);
	font-weight: 400;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.cafe-rih h1, .cafe-rih h2, .cafe-rih h3, .cafe-rih h4 {
	font-family: var(--cr-font-display);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: .005em;
}

/* Eyebrow / Label – feines, weit gesperrtes Versal-Label */
.cr-eyebrow {
	display: inline-block;
	font-family: var(--cr-font-body);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: var(--cr-eyebrow-ls);
	text-transform: uppercase;
	color: var(--cr-gold);
	margin-bottom: 1rem;
}

.cr-eyebrow--teal { color: var(--cr-teal); }

/* Liegt die Klasse auf dem Elementor-Heading-Wrapper, muss der innere Titel
   Farbe und Schrift erben, sonst gewinnt die dunkle Kit-Standard-Headingfarbe
   und das Label wird auf dunklem Grund unsichtbar. */
.cafe-rih .cr-eyebrow .elementor-heading-title {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}
.cr-eyebrow--teal .elementor-heading-title { color: var(--cr-teal); }

/* Lauftext großzügig */
.cafe-rih p { max-width: 62ch; }

/* Links: dezent, entsättigt, nie grell */
.cafe-rih a { color: var(--cr-text); text-decoration: none; }
.cafe-rih a:hover { color: var(--cr-teal); }

/* Sichtbarer, ruhiger Fokuszustand (Barrierefreiheit) */
.cafe-rih a:focus-visible,
.cafe-rih button:focus-visible,
.cafe-rih input:focus-visible,
.cafe-rih textarea:focus-visible,
.cafe-rih select:focus-visible,
.cafe-rih [tabindex]:focus-visible {
	outline: 2px solid var(--cr-teal);
	outline-offset: 3px;
	border-radius: 0;
}

/* =========================================================================
   Helle Sektion (für Abschnitte auf Weiß, invertierte Marke)
   ========================================================================= */

.cr-section--light {
	background-color: var(--color-base-light);
	color: var(--color-base-dark);
}
.cr-section--light .cr-eyebrow { color: #7E7560; } /* etwas dunkleres Gold auf Hell */
.cr-section--light a { color: var(--color-base-dark); }
.cr-section--light a:hover { color: var(--cr-teal); }

/* =========================================================================
   Formensprache: Nierenform, Wind, Sterne
   Ton-in-ton, leicht abgesetzt, nie grell. Als dekorative Hintergründe.
   ========================================================================= */

/* Generischer dekorativer Layer, nie für Screenreader relevant */
.cr-decor {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	opacity: .9;
}

/* Nierenform als strukturierender Hintergrund.
   Per Image- oder HTML-Widget die niere.svg einsetzen und mit dieser Klasse versehen. */
.cr-niere {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: clamp(280px, 42vw, 640px);
	opacity: .12;       /* ton-in-ton, nur erahnbar */
	filter: saturate(.6);
}
.cr-niere--gold { color: var(--cr-gold); }   /* SVG nutzt currentColor */
.cr-niere--teal { color: var(--cr-teal); }
.cr-niere--right { right: -6%; top: 8%; }
.cr-niere--left  { left: -8%; bottom: 4%; }

/* Inhalt über der Form halten */
.cr-on-decor { position: relative; z-index: 1; }

/* Sterne: feine Vier-Strahl-Funken, sparsam gesetzt. */
.cr-stern {
	display: inline-block;
	width: 1em;
	height: 1em;
	color: var(--cr-gold);
	opacity: .85;
	vertical-align: middle;
}
.cr-stern--teal { color: var(--cr-teal); }

/* =========================================================================
   Karten / Event-Teaser (Shortcode-Fallback und Loop-Items)
   ========================================================================= */

.cafe-rih .cafe-rih-event-teaser,
.cafe-rih .cafe-rih-event-card {
	background: var(--cr-surface);
	border: 1px solid var(--cr-hairline);
	border-radius: var(--cr-radius);
	padding: 1.75rem 2rem;
}
.cafe-rih-event-teaser__date {
	font-family: var(--cr-font-body);
	letter-spacing: var(--cr-eyebrow-ls);
	text-transform: uppercase;
	font-size: .8rem;
	color: var(--cr-teal);
	margin: 0 0 .5rem;
}
.cafe-rih-event-teaser__title {
	margin: 0;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
}
.cafe-rih-event-fallback {
	color: var(--cr-text-muted);
	font-style: italic;
}

/* =========================================================================
   Buttons – ruhig, entsättigt
   ========================================================================= */

/* a.cr-btn-Selektor bewusst spezifischer als „.cafe-rih a:hover",
   sonst gewinnt die globale Link-Hover-Farbe und Schrift wird unsichtbar. */
.cafe-rih a.cr-btn,
.cr-btn {
	display: inline-block;
	font-family: var(--cr-font-body);
	letter-spacing: .04em;
	padding: .9em 1.8em;
	border: 1px solid var(--cr-gold);
	border-radius: 0;
	color: var(--cr-text);
	background: transparent;
	transition: background-color var(--cr-dur) var(--cr-ease),
	            color var(--cr-dur) var(--cr-ease);
}
.cafe-rih a.cr-btn:hover,
.cafe-rih a.cr-btn:focus-visible,
.cr-btn:hover {
	background: var(--cr-teal);
	border-color: var(--cr-teal);
	color: var(--color-base-dark);
}

/* Helle Sektion: Button-Kontrast wahren, Hover ebenfalls Türkis */
.cafe-rih .cr-section--light a.cr-btn { color: var(--color-base-dark); border-color: #7E7560; }
.cafe-rih .cr-section--light a.cr-btn:hover { background: var(--cr-teal); border-color: var(--cr-teal); color: var(--color-base-dark); }

/* =========================================================================
   Ruhige Animationen (sanfte Fades)
   ========================================================================= */

@keyframes cr-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
.cr-fade-up { animation: cr-fade-up var(--cr-dur) var(--cr-ease) both; }

/* =========================================================================
   Übergangslayout für server-gerenderte Seiten
   Dünne Layout-Schicht, damit die per WordPress angelegten Seiten ruhig und
   markengerecht aussehen, bis sie in Elementor Pro final aufgebaut werden.
   ========================================================================= */

.cafe-rih .cr-wrap { max-width: var(--cr-maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.cafe-rih .entry-content > * { margin-block: 0; }

.cafe-rih .cr-section { padding-block: clamp(3rem, 8vw, 6rem); }
.cafe-rih .cr-section + .cr-section { border-top: 1px solid var(--cr-hairline); }

/* Hero */
.cafe-rih .cr-hero { position: relative; padding-block: clamp(3.5rem, 12vw, 8rem); overflow: hidden; }
.cafe-rih .cr-hero__media { position: absolute; inset: 0; z-index: 0; }
.cafe-rih .cr-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.cafe-rih .cr-hero::after { content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(21,25,26,.55), rgba(21,25,26,.82)); }
.cafe-rih .cr-hero__inner { position: relative; z-index: 1; }
.cafe-rih .cr-hero h1 { font-size: clamp(2.8rem, 9vw, 6rem); margin: .2em 0 .35em; }
.cafe-rih .cr-hero p.cr-lead { font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: var(--cr-text); }

/* Lead/Intro */
.cafe-rih .cr-lead { max-width: 60ch; }
.cafe-rih h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin: 0 0 .6em; }
.cafe-rih h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }

/* Zwei-Spalten (Text + Bild) */
.cafe-rih .cr-split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 820px) { .cafe-rih .cr-split { grid-template-columns: 1fr 1fr; }
	.cafe-rih .cr-split--media-first .cr-split__media { order: -1; } }
.cafe-rih .cr-split__media img { width: 100%; height: auto; border-radius: var(--cr-radius); display: block; }

/* Bild-Grid / Galerie */
.cafe-rih .cr-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .cafe-rih .cr-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.cafe-rih .cr-grid img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--cr-radius); display: block; }

/* Masonry-/Collage-Galerie (Elementor Basic-Gallery mit Klasse .cr-gallery-masonry).
   Alle Quellbilder sind 3:2-Querformat, daher wird der gestaffelte Masonry-Look über
   ein CSS-Grid erzeugt: ein grosses Feature-Bild + eine hohe Kachel, Rest quadratisch.
   object-fit:cover schneidet die gleichformatigen Bilder passend zu. */
.cafe-rih .cr-gallery-masonry .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: clamp(92px, 13vw, 178px);
	gap: 12px;
	margin: 0;
}
.cafe-rih .cr-gallery-masonry .gallery-item {
	width: auto !important;
	margin: 0 !important;
	float: none;
	overflow: hidden;
	border-radius: var(--cr-radius);
}
.cafe-rih .cr-gallery-masonry .gallery-icon,
.cafe-rih .cr-gallery-masonry .gallery-icon a { display: block; height: 100%; margin: 0; }
.cafe-rih .cr-gallery-masonry .gallery-icon img {
	width: 100%; height: 100%; display: block; object-fit: cover;
	border: 0; padding: 0; transition: transform .5s ease;
}
.cafe-rih .cr-gallery-masonry .gallery-icon a:hover img { transform: scale(1.04); }
.cafe-rih .cr-gallery-masonry .gallery-caption { display: none; }
/* Collage aus 4 Bildern, explizit platziert (3x3-Raster, lueckenlos):
   [1 1 2]
   [1 1 3]
   [4 4 3]  -> Feature 2x2, hohe Kachel rechts, breite Grundkachel unten. */
.cafe-rih .cr-gallery-masonry .gallery-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.cafe-rih .cr-gallery-masonry .gallery-item:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
.cafe-rih .cr-gallery-masonry .gallery-item:nth-child(3) { grid-column: 3 / 4; grid-row: 2 / 4; }
.cafe-rih .cr-gallery-masonry .gallery-item:nth-child(4) { grid-column: 1 / 3; grid-row: 3 / 4; }

@media (max-width: 767px) {
	.cafe-rih .cr-gallery-masonry .gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: clamp(120px, 40vw, 200px);
	}
	.cafe-rih .cr-gallery-masonry .gallery-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
	.cafe-rih .cr-gallery-masonry .gallery-item:nth-child(2) { grid-column: 1 / 2; grid-row: 3 / 4; }
	.cafe-rih .cr-gallery-masonry .gallery-item:nth-child(3) { grid-column: 2 / 3; grid-row: 3 / 4; }
	.cafe-rih .cr-gallery-masonry .gallery-item:nth-child(4) { grid-column: 1 / 3; grid-row: 4 / 5; }
}

/* Öffnungszeiten */
.cafe-rih .cr-hours { display: grid; gap: .35rem; margin: 1rem 0 0; max-width: 32rem; }
.cafe-rih .cr-hours div { display: flex; justify-content: space-between; gap: 1rem;
	padding: .5rem 0; border-bottom: 1px solid var(--cr-hairline); }
.cafe-rih .cr-hours dt { font-weight: 500; }
.cafe-rih .cr-hours .is-closed { color: var(--cr-text-muted); }

/* Kontakt-/CTA-Karte */
.cafe-rih .cr-card { background: var(--cr-surface); border: 1px solid var(--cr-hairline);
	border-radius: var(--cr-radius); padding: clamp(1.5rem, 4vw, 2.5rem); }
.cafe-rih .cr-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.cafe-rih address.cr-address { font-style: normal; line-height: 2; }

/* Hinweis-Box (z. B. Formular folgt in Elementor Pro / Platzhalter) */
.cafe-rih .cr-note { border: 1px dashed var(--cr-hairline); border-radius: var(--cr-radius);
	padding: 1.1rem 1.4rem; color: var(--cr-text-muted); font-size: .95rem; }

/* Helle Sektion erbt Layout, nur Farben kippen (siehe cr-section--light oben) */
.cafe-rih .cr-section--light .cr-hours div,
.cafe-rih .cr-section--light .cr-card { border-color: rgba(21,25,26,.14); }
.cafe-rih .cr-section--light .cr-card { background: #fff; }

/* =========================================================================
   EINHEITLICHER Seiten-Hero (eine Definition für ALLE Seiten)
   ---------------------------------------------------------------------------
   Gilt identisch für die Elementor-Inhaltsseiten (.cr-page-hero auf dem
   Container) UND die hand-codierte Live-Event-Seite (.cr-page-hero auf der
   <section>). Beide Markups werden hier mit denselben Tokens angesprochen, damit
   Größe, Abstände und Ausrichtung garantiert gleich sind. Nicht woanders
   überschreiben (pages.css/events.css setzen KEINE eigenen Hero-Größen mehr).
   ========================================================================= */

.cafe-rih .cr-page-hero {
	padding-top: var(--cr-hero-pad-top);
	padding-bottom: var(--cr-hero-pad-bottom);
	text-align: center;
}

/* Hero-Titel: plain <h1> (Live-Event) UND Elementor-Heading (Inhaltsseiten).
   Der Eyebrow ist ausgenommen, er bleibt das kleine Versal-Label. */
.cafe-rih .cr-page-hero > h1,
.cafe-rih .cr-page-hero .cr-wrap > h1,
.cafe-rih .cr-page-hero .elementor-widget-heading:not(.cr-eyebrow) .elementor-heading-title {
	font-family: var(--cr-font-display);
	font-weight: 400;
	font-size: var(--cr-hero-size);
	line-height: 1.04;
	letter-spacing: -.01em;
	margin: var(--cr-hero-title-mt) 0 0;
}

/* Hero-Eyebrow einheitlich über dem Titel. */
.cafe-rih .cr-page-hero .cr-eyebrow {
	margin-bottom: var(--cr-hero-eyebrow-gap);
}

/* Hero-Lead: plain <p class="cr-lead"> UND Elementor-Text-Editor. */
.cafe-rih .cr-page-hero .cr-lead,
.cafe-rih .cr-page-hero .elementor-widget-text-editor {
	margin-top: var(--cr-hero-lead-gap);
}
.cafe-rih .cr-page-hero .cr-lead,
.cafe-rih .cr-page-hero .elementor-widget-text-editor p {
	max-width: 56ch;
	margin-inline: auto;
	font-size: var(--cr-lead-size);
	color: var(--cr-text-muted);
}

/* =========================================================================
   Inhaltsseiten (Elementor-Content): zentrierter App-Look
   Die übrige Designschicht für die editierbaren Inhaltsseiten liegt in
   pages.css (Body-Klasse .cr-page). brand.css hält die geteilten Tokens und
   Bausteine (Hero oben, Eyebrow, Buttons, Karten, Formensprache).
   ========================================================================= */

/* =========================================================================
   prefers-reduced-motion respektieren
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.cr-fade-up { animation: none; opacity: 1; transform: none; }
}

/* =========================================================================
   Kleine responsive Feinheiten (mobil zuerst, getestet bis ~360px)
   ========================================================================= */

@media (max-width: 480px) {
	.cafe-rih .cafe-rih-event-teaser,
	.cafe-rih .cafe-rih-event-card { padding: 1.25rem 1.25rem; }
	.cr-niere { opacity: .08; }
}