/* ==========================================================================
   RÄUMLE — Hochzeiten (v1.3, 23.09.2026)
   Lädt zusätzlich zu index.css. Enthält nur, was diese Seite zusätzlich braucht:
   Galerie, Ablauf-Schritte, FAQ (auf index.css nicht vorhanden) und die
   Hochzeiten-spezifischen Bausteine.
   ========================================================================== */

/* ---------- Galerie (Muster aus mitte.css) ---------- */
.raumle-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.raumle-gallery__item { position: relative; margin: 0; border-radius: var(--raumle-radius); overflow: hidden; box-shadow: var(--raumle-shadow); background: #fff; }
.raumle-gallery__item img { width: 100%; height: 280px; object-fit: cover; display: block; }
.raumle-gallery__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px 12px; background: linear-gradient(to top, rgba(27,73,101,.85) 0%, rgba(27,73,101,.35) 60%, transparent 100%); color: #fff; font-size: .9rem; font-weight: 600; }

/* ---------- Ablauf-Schritte (Muster aus 5stripes.css) ---------- */
.raumle-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.raumle-steps__item { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: var(--raumle-radius); padding: 26px 26px 24px; }
.raumle-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 50%; background: var(--raumle-orange); color: var(--raumle-dark); font-family: var(--raumle-font-head); font-weight: 800; font-size: 1.05rem; }
.raumle-steps__item h3 { margin: 0 0 8px; color: #fff; font-family: var(--raumle-font-head); font-size: 1.12rem; }
.raumle-steps__item p { margin: 0; color: rgba(255,255,255,.82); font-size: .96rem; line-height: 1.6; }
.raumle-steps__cta { margin: 40px 0 0; text-align: center; }

/* ---------- FAQ ---------- */
.raumle-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 18px; }
.raumle-faq__item { background: #fff; border-radius: var(--raumle-radius); padding: 22px 26px; box-shadow: var(--raumle-shadow); }
.raumle-faq__item h3 { margin: 0 0 8px; font-family: var(--raumle-font-head); font-size: 1.05rem; color: var(--raumle-dark); }
.raumle-faq__item p { margin: 0; color: var(--raumle-gray); line-height: 1.6; }
.raumle-faq__item a { color: var(--raumle-dark); font-weight: 600; }

/* ---------- USP-Block (Bild + Text) ---------- */
.raumle-usp { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.raumle-usp__img { min-height: 380px; border-radius: var(--raumle-radius); background-size: cover; background-position: center; box-shadow: var(--raumle-shadow); }
.raumle-usp__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; font-weight: 500; }
.raumle-usp__list li { color: rgba(255,255,255,.85); }
.raumle-section--dark .raumle-usp__list li::before { content: "■ "; color: var(--raumle-orange); }
.raumle-section__lead { color: var(--raumle-gray); margin-top: 8px; }
.raumle-section__head--light .raumle-section__lead { color: rgba(255,255,255,.75); }

/* ---------- Räume: hier zwei Kacheln ---------- */
.raumle-rooms { grid-template-columns: repeat(2, 1fr); }

/* ==========================================================================
   Hochzeiten-spezifisch
   ========================================================================== */
.hz-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hz-karte { background: #fff; border: 1px solid var(--raumle-petal); border-radius: var(--raumle-radius); padding: 26px 26px 24px; box-shadow: 0 12px 30px rgba(27,73,101,.07); }
.hz-karte h3 { margin: 0 0 10px; color: var(--raumle-dark); font-family: var(--raumle-font-head); font-size: 1.1rem; }
.hz-karte h3::before { content: ""; display: block; width: 34px; height: 3px; margin-bottom: 12px; background: var(--raumle-orange); border-radius: 2px; }
.hz-karte p { margin: 0; color: var(--raumle-gray); font-size: .95rem; line-height: 1.65; }

.hz-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.hz-zwei h2 { margin: .2rem 0 .8rem; color: var(--raumle-dark); }
.hz-zwei p { color: var(--raumle-gray); }
.hz-liste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.hz-liste li { padding-left: 24px; position: relative; color: var(--raumle-ink); }
.hz-liste li::before { content: "■"; position: absolute; left: 0; top: 0; color: var(--raumle-orange); }
.hz-hinweis { font-size: .88rem; color: var(--raumle-gray); border-left: 3px solid var(--raumle-petal); padding-left: 12px; }
.hz-cta { margin-top: 20px; }

.hz-broschuere { display: grid; grid-template-columns: 1.4fr .9fr; gap: 42px; align-items: center;
	background: #fff; border: 1px solid var(--raumle-petal); border-radius: 20px; padding: 2rem 2.2rem;
	box-shadow: 0 18px 40px rgba(27,73,101,.08); }
.hz-broschuere__text h2 { margin: .2rem 0 .7rem; color: var(--raumle-dark); }
.hz-broschuere__text p { color: var(--raumle-gray); }
.hz-broschuere__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.hz-broschuere__cover { aspect-ratio: 3/4; border-radius: 12px; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: .3rem; text-align: center; color: #fff;
	background: linear-gradient(160deg, #1B4965 0%, #12384E 55%, #0d2a3c 100%);
	box-shadow: 0 16px 34px rgba(13,42,60,.35); }
.hz-broschuere__cover span { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--raumle-peach); }
.hz-broschuere__cover strong { font-family: var(--raumle-font-head); font-size: 1.9rem; letter-spacing: .06em; }
.hz-broschuere__cover em { font-style: normal; font-size: .9rem; color: rgba(255,255,255,.7); }

.raumle-buddy-line { margin: 22px 2px 26px; }

@media (max-width: 960px) {
	.hz-drei { grid-template-columns: 1fr; }
	.hz-zwei { grid-template-columns: 1fr; gap: 30px; }
	.hz-broschuere { grid-template-columns: 1fr; padding: 1.4rem 1.2rem; gap: 24px; }
	.hz-broschuere__cover { max-width: 240px; margin: 0 auto; }
	.raumle-usp { grid-template-columns: 1fr; gap: 28px; }
	.raumle-usp__img { min-height: 260px; }
	.raumle-steps { grid-template-columns: 1fr; }
	.raumle-gallery { grid-template-columns: repeat(2, 1fr); }
	.raumle-rooms { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.raumle-gallery { grid-template-columns: 1fr; }
	.hz-broschuere__cta .raumle-btn { width: 100%; text-align: center; }
}


/* --- Runde 2: der Räume-Verweis im Hochzeits-Hero -------------------------
   Die Klasse war nur in 5stripes.css definiert; hier lief die Zeile deshalb
   völlig ungestylt mit. Jetzt eine sichtbare Empfehlung: Pillen-Form,
   Pfeil, unterstrichener Link — auf dunklem Hero-Bild. */
.raumle-hero__cross {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 26px 0 0;
  padding: .6rem 1.1rem .6rem .95rem;
  font-size: .96rem; color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.raumle-hero__cross::before {
  content: "→"; color: var(--raumle-orange, #ff9f1c); font-weight: 800; font-size: 1.05rem;
}
.raumle-hero__cross a {
  color: #fff; font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--raumle-orange, #ff9f1c); padding-bottom: 1px;
}
.raumle-hero__cross a:hover { border-bottom-color: #fff; }
@media (max-width: 600px) { .raumle-hero__cross { font-size: .9rem; padding: .5rem .9rem; } }