/*
 * WordPress-Anpassung (Zusatzdatei – das Original-style.css bleibt unverändert):
 * Block-Themes (z. B. Twenty Twenty-Four) zwängen Seiteninhalte in eine schmale
 * Mittelspalte, fügen Abstände zwischen den Blöcken ein und setzen Auto-Margins
 * per !important. Diese Regeln lassen die Rose-Sektionen auf volle Breite laufen
 * und entfernen die weißen Theme-Streifen – OHNE das Sticky-Verhalten des Headers
 * zu brechen (kein overflow-x, kein position-Override).
 */

/* 1) Content-Bereich des Themes voll breit, ohne Innenabstand */
.wp-site-blocks { padding-top: 0 !important; padding-bottom: 0 !important; }

.wp-site-blocks .entry-content,
.wp-block-post-content,
.entry-content.is-layout-constrained,
.is-layout-constrained.wp-block-post-content {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 2) Unsere Sektionen: volle Breite via negativer Rand-Technik
 *    (bricht NICHT das Sticky, weil kein position/left überschrieben wird).
 *    Hohe Spezifität, um die Theme-Regel
 *    ".is-layout-constrained > *" (mit !important) zu schlagen. */
.wp-block-post-content.is-layout-constrained > :is(.site-header, .hero, .panel, .panel-tint, .site-footer),
.entry-content.is-layout-constrained > :is(.site-header, .hero, .panel, .panel-tint, .site-footer),
body :is(.site-header, .hero, .panel, .panel-tint, .site-footer) {
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 2b) Leere Absatz-Blöcke (Überbleibsel aus dem Editor) erzeugen weiße
 *     Streifen zwischen den Sektionen – ausblenden */
.entry-content > p:empty,
.wp-block-post-content > p:empty {
  display: none !important;
}

/* 2c) Grund-Typografie & Layout-Grundwerte gegen Theme-Reste absichern.
 *     Werte 1:1 aus assets/style.css übernommen. Bewusst NUR Eigenschaften,
 *     die NIRGENDS auf der Seite kontextabhängig anders gesetzt werden
 *     (z. B. Überschriftenfarbe wird im CTA-Band/Footer/Speisekarte bewusst
 *     überschrieben – die bleibt deshalb hier unangetastet, sonst würde
 *     „absichern“ selbst zum Bug). */
html {
  scroll-behavior: smooth !important;
  overflow-x: clip !important;
}

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

/* Wichtig: overflow-x NUR auf html setzen, nicht auf body – "overflow-x"
 * (auch nur auf einer Achse) auf einem Vorfahren von .site-header
 * deaktiviert dort "position: sticky" (Sticky braucht als scrollenden
 * Vorfahren das Viewport/html, nicht body). html allein reicht bereits,
 * um das horizontale Mitscrollen durch den Vollbreite-Trick zu verhindern. */
body {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--color-ink) !important;
  background: var(--color-cream) !important;
}

body :is(.site-header, .hero, .panel, .panel-tint, .site-footer) img {
  max-width: 100% !important;
}

body :is(.site-header, .hero, .panel, .panel-tint, .site-footer) :is(h1, h2, h3, h4) {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
}

body :is(.site-header, .hero, .panel, .panel-tint, .site-footer) .container {
  width: 100% !important;
  max-width: var(--max-width) !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
}

/* 3) Header bleibt oben kleben – wie im Original.
 *    transform/will-change erzwingen eine eigene GPU-Ebene – behebt ein
 *    bekanntes iOS-Safari-Ruckeln, bei dem beim Ein-/Ausblenden der
 *    Adressleiste kurz ein Streifen des vorherigen Inhalts über der
 *    sticky Kopfzeile sichtbar wird. */
body .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* 4) WP-Adminbar (nur eingeloggt) nach unten versetzt einrechnen, damit der
 *    Sticky-Header nicht dahinter verschwindet */
body.admin-bar .site-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px !important; }
}

/* 4c) Hero auf kleinen Bildschirmen kompakter, damit Kopfzeile + Überschrift
 *     + Buttons above the fold passen (nur Mobile, Desktop unverändert). */
@media screen and (max-width: 600px) {
  .hero {
    padding-block: clamp(32px, 8vw, 56px) !important;
  }
  .hero .container {
    gap: 1.5rem !important;
  }
  .hero-meta {
    margin-top: 1.5rem !important;
    padding-top: 1.25rem !important;
  }
}

/* 4d) "Was uns besonders macht"-Liste auf dem Handy als Karten statt
 *     kleiner 56x56px-Vorschaubilder neben dem Text (wirkt dort zu
 *     gedrängt). Großes Bild oben, Titel + Text darunter. Nur Mobile –
 *     am Desktop bleibt die Liste mit dem großen wechselnden Bild daneben
 *     unverändert. */
@media screen and (max-width: 860px) {
  .reveal-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 22px 4px !important;
  }
  .reveal-item-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: var(--radius-m) !important;
  }
}

/* 4a-2) Großes Logo-Wasserzeichen rechts im Hero (neuer Block-Schalter).
 *       Liegt über der Farbfläche (eigene, unabhängige Deckkraft), aber
 *       hinter dem Text/Container. Position, Größe und Deckkraft kommen
 *       direkt aus den Blockfeldern (Inline-Style, siehe render.php) –
 *       hier nur die strukturellen Eigenschaften + sichere Obergrenze,
 *       damit ein zu hoher Größenwert das Layout nicht sprengt. */
.hero-logo-watermark {
  position: absolute;
  transform: translateY(-50%);
  max-width: 70%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 760px) {
  .hero-logo-watermark { display: none !important; }
}

/* 4b) Bewertungs-Sterne: Hintergrund- und Füll-Ebene müssen pixelgenau
 *     gleich breit sein, sonst verschiebt sich die clip-path-Prozent-
 *     Berechnung der Teil-Füllung. Bisher verließ sich das auf identische
 *     Flex-Auto-Breiten beider Ebenen – im WordPress-Kontext offenbar nicht
 *     zuverlässig. Breite jetzt explizit fest: 5 Sterne × 22px + 4 Lücken × 3px.
 *     (Bei der Speisekarte/Testimonials sind alle 5 Sterne immer voll –
 *     dort betrifft das Problem nichts.) */
.star-row-bg,
.star-row-fill {
  width: 122px !important;
  flex: none !important;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: 0 22px;
  box-shadow: var(--shadow-card);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 34px 18px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--color-primary-dark);
  position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 15px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-accent);
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-answer {
  padding: 0 0 20px;
  color: var(--color-ink-soft);
  line-height: 1.6;
}

.faq-answer p { margin: 0 0 0.8em; }
.faq-answer p:last-child { margin-bottom: 0; }

/* 6) Kleinere Hintergrund-Icons bei kurzen Kategorien (Angebotskarte) –
 *    das Original-Icon (340px) ist für die vielen Einträge der Speisekarte
 *    ausgelegt und wirkt bei 1-3 Einträgen pro Kategorie zu dominant. */
.menu-category--compact-icon .menu-category-icon {
  width: 170px !important;
  height: 170px !important;
  opacity: 0.14;
}
@media (max-width: 900px) {
  .menu-category--compact-icon .menu-category-icon { width: 120px !important; height: 120px !important; }
}
@media (max-width: 640px) {
  .menu-category--compact-icon .menu-category-icon { width: 90px !important; height: 90px !important; opacity: 0.1; }
}

/* 7) Kleiner FAQ-Hinweis im Reservierungs-CTA-Band */
.cta-band-faq {
  margin-top: 18px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.75);
}
.cta-band-faq a {
  color: var(--color-white);
  text-decoration: underline;
  font-weight: 600;
}

/* 8) Neuigkeiten-Übersicht (Blog): Beitragsbild-Platzhalter ohne Bild,
 *    Datums-Badge und einfache Vor/Zurück-Pagination. Karten selbst nutzen
 *    die vorhandene .teaser-card-Klasse aus dem Original-CSS. */
.blog-card-date {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
  display: block;
}
.blog-pagination {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
}
.blog-pagination .btn { flex: none; }
.blog-pagination-spacer { flex: 1; }

/* 9) Bilder in Fließtext-Bereichen (Blog-Beiträge, Rechtstexte) sauber begrenzen */
.legal-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  display: block;
  margin: 1.4em 0;
}

/* 10) Scroll-Einblend-Animation ("data-reveal") auf dem Handy abschalten:
 *     Sie startet erst, wenn ein Element schon fast im Bild ist – bei
 *     schnellem Wischen auf dem Handy wirkt das, als sei der Inhalt "noch
 *     nicht da". Auf kleinen Bildschirmen zeigen wir Inhalte deshalb sofort
 *     vollständig an, ohne Verzögerung. Desktop unverändert (dort wirkt die
 *     Animation gut, da meist langsamer/mit Maus gescrollt wird). */
@media screen and (max-width: 782px) {
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* 10b) Team-Karten (Über-uns-Seite): Foto oben, Name/Rolle/Text darunter.
 *      Nutzt die vorhandene .card-Basis aus dem Original-CSS. */
.team-card-img {
  margin: -32px -32px 22px;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.team-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-card-role {
  margin-top: 2px;
  margin-bottom: 10px;
}
.team-card-text {
  color: var(--color-ink-soft);
}
.team-card-text p { margin: 0 0 0.8em; }
.team-card-text p:last-child { margin-bottom: 0; }

/* 11) Bestätigungsmeldung nach Formular-Absenden deutlicher als farbige Box
 *     statt nur fettem Text, damit sie nicht übersehen wird. */
.form-status {
  padding: 14px 16px !important;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
}
.form-status.success {
  background: rgba(46, 125, 100, 0.1);
  border-color: rgba(46, 125, 100, 0.3);
}
.form-status.error {
  background: rgba(181, 68, 46, 0.1);
  border-color: rgba(181, 68, 46, 0.3);
}