/* ═══════════════════════════════════════════════════════════════════════
   Ciao & Jassu — v5 "Ägäis Editorial" (eine Stimme, ein System)
   Creme-Papier · Ägäis-Kobalt · Cormorant groß & ruhig · Outfit klein & präzise
   Dieses Stylesheet enthält bewusst eine Override-Schicht, die ältere
   Utility-Kombinationen (uppercase/extrabold-Headlines) auf die eine
   Editorial-Stimme mappt — ohne jeden Seiten-Umbau.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Typografie: eine Display-Stimme ───
   Serif-Kandidat läuft über --serif (Vorschau-Umschalter in main.js, nur lokal).
   Labels/Nav/Body sprechen Outfit. */
:root { --serif: 'Playfair Display', 'Cardo', Georgia, serif; --sans: 'Instrument Sans', system-ui, sans-serif; }
.font-impact {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  text-transform: none !important; /* Serif NIE in Versalien — Caps gehören der Sans */
  letter-spacing: .005em !important;
}
.font-display {
  font-family: var(--serif) !important;
  font-weight: 500;
  letter-spacing: .005em;
}
/* Lapidare Caps-Headline (Papaioannou/Monteverdi-Prinzip):
   Serif in Versalien mit weitem Tracking — das griechische Inschrift-Register. */
.hl-caps {
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 550;
}
/* Akzentwort in Headlines — echte Kursive (Cardo), Satzschreibung im Caps-Umfeld */
h1 em, h2 em, h3 em, .font-impact em, .font-display em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: .01em;
}
.font-script {
  font-family: var(--serif) !important;
  font-style: italic;
  font-weight: 500 !important;
  letter-spacing: .01em;
  text-transform: none !important;
}

/* ─── Header ───  Griechisches Tiefsee-Marineblau (kein Schwarz, kein Weiß, kein Stein)
   Ganz oben über einem Hero-Bild: transparent, heller Text.
   Gescrollt / Seiten ohne Hero: sattes Ägäis-Marineblau, heller Text. */
#site-header {
  background: rgba(10,42,66,.96);   /* tiefes Griechenland-Marineblau */
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -24px rgba(0,0,0,.4);
  transition: background .45s cubic-bezier(.16,1,.3,1), box-shadow .45s;
}
html[data-hero] #site-header {
  background: linear-gradient(to bottom, rgba(8,32,52,.66) 0%, rgba(8,32,52,.26) 55%, rgba(8,32,52,0) 100%);
  backdrop-filter: none;
  box-shadow: none;
}
html[data-hero] #site-header.scrolled,
#site-header:has(#mobile-menu:not(.hidden)) {
  background: rgba(9,38,60,.98);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -24px rgba(0,0,0,.45);
}

/* ─── Ghost-Worte: riesige griechische Begriffe hinter den Sektionen ───
   COYA-Prinzip: Typo als Textur. Sektion braucht position:relative + overflow-hidden,
   Inhalt darüber via z-10. */
.ghost-word {
  position: absolute;
  z-index: 0;
  font-family: var(--serif);
  font-size: clamp(6rem, 15vw, 13rem);
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  color: rgba(46, 110, 158, .09);
  pointer-events: none;
  user-select: none;
}
.ghost-light { color: rgba(253, 252, 248, .06); }

/* Zweig-Ornament & Vertikal-Haarlinie als Sektions-Trenner (Monteverdi-Rhythmus) */
.divider-orn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  padding: 2.4rem 0;
}
.divider-orn::before { content: ""; width: 1px; height: 3.2rem; background: rgba(28,24,21,.22); }

/* Drehendes Ring-Siegel (Monteverdi-Prinzip): Kreistext um leere Mitte */
.seal-ring { pointer-events: none; }
.seal-ring text {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .35em;
  text-transform: uppercase;
}

/* ─── Kapitel-Signatur: griechischer Buchstabe + Label + Haarlinie ───
   <p class="kap"><span class="kap-letter">Α</span><span>Das Haus</span></p> */
.kap {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(28,24,21,.55);
}
.kap-letter {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: .9;
  font-weight: 300;
  letter-spacing: 0;
  color: #C09540;
  transform: translateY(.28rem);
}
.kap::after {
  content: "";
  flex: 1 1 2rem;
  align-self: center;
  height: 1px;
  background: rgba(28,24,21,.15);
}
.kap-light { color: rgba(253,252,248,.6); }
.kap-light .kap-letter { color: #DFC98F; }
.kap-light::after { background: rgba(253,252,248,.2); }

/* Handgemalte Kringel/Unterstreichungen aus — Betonung wird kursiv gesetzt */
.sketch-underline > svg, .sketch-circle > svg { display: none; }
.sketch-underline, .sketch-circle { position: relative; display: inline-block; font-style: italic; }

/* Pinsel-/Wellenkanten der Farbblöcke aus → ruhige, harte Kanten */
svg[viewBox="0 0 1440 44"] { display: none; }

/* Polaroid-Schiefstellung aus → gerade, präzise Rahmen */
.retro-tilt-l, .retro-tilt-r { transform: none; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.retro-tilt-l:hover, .retro-tilt-r:hover { transform: translateY(-4px); }

/* ─── Flächen ─── */
.paper {
  background-color: #F5F1E6;
  background-image: none;
}

/* Bildkarte: weißer Passepartout-Rahmen, Haarlinie, wenig Schatten */
.polaroid {
  background: #FFFFFF;
  padding: .9rem .9rem 1.1rem;
  border: 1px solid rgba(28,24,21,.08);
  box-shadow: 0 24px 48px -36px rgba(28,24,21,.4);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.polaroid:hover { transform: translateY(-4px) !important; z-index: 2; }

/* Kykladen-Bogen — die eine geometrische Signatur */
.arch { border-radius: 100rem 100rem 0 0; overflow: hidden; }
.arch img { display: block; }

/* ─── Menü-Zeilen ─── */
.dotted-leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted rgba(28,24,21,.25);
  margin: 0 .8rem;
  transform: translateY(-.3em);
  min-width: 1.5rem;
}
.menu-section h3 { font-size: 1.25rem; font-weight: 400; }

/* ─── Ticker: schmal, präzise, zwischen Haarlinien ─── */
.marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(28,24,21,.2); border-bottom: 1px solid rgba(28,24,21,.2); }
.marquee-track {
  display: inline-flex;
  align-items: baseline;
  animation: marquee 44s linear infinite;
  will-change: transform;
  font-family: var(--sans) !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  letter-spacing: .42em !important;
  text-transform: uppercase;
}
.marquee-track .font-script { font-size: 1.15rem !important; letter-spacing: .05em; text-transform: none; }
/* Großer Serif-Ticker (COYA-Prinzip): Orte & Grüße als laufende Inschrift */
.marquee-grand { border: none !important; }
.marquee-grand .marquee-track {
  font-family: var(--serif) !important;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem) !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: rgba(8, 51, 60, .8);
  animation-duration: 70s;
}
.marquee-grand .marquee-track .tick-dot { color: #C09540; }

/* COYA-Goldrahmen: versetzte Haarlinie um weiche Bildecken */
.frame-gold { position: relative; }
.frame-gold::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid rgba(192, 149, 64, .55);
  border-radius: 1.3rem;
  transform: rotate(-1.2deg);
  pointer-events: none;
}
.frame-gold img { border-radius: .9rem; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── Meander: ABGESCHALTET — Griechenland spricht über Skulptur, Typo, Inhalt ─── */
.meander, .meander-band, .meander-light { display: none; }

/* (alt, unbenutzt) ───
   Ein einziger, haarfeiner Mäanderzug (1px, gedämpftes Gold) mit viel Luft.
   Kein plakatives Bordüren-Muster mehr. */
.meander {
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M1 11 V1 h30 v8 h-22 v-5 h14' fill='none' stroke='%23C09540' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 32px 12px;
  border: none;
  opacity: 1;
}
.meander-band {
  height: 24px;
  padding: 6px 0;
  background-color: #083A6D;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M1 11 V1 h30 v8 h-22 v-5 h14' fill='none' stroke='%23DFC98F' stroke-opacity='.6' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 32px 12px;
  background-origin: content-box;
  background-clip: content-box;
  border: none;
  opacity: 1;
}
.meander-light {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M1 11 V1 h30 v8 h-22 v-5 h14' fill='none' stroke='%23F7F3E8' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E");
}

/* ─── Pill-CTAs — runde Buttons als Signatur ─── */
a[class*="tracking-brand"][class*="py-3"],
a[class*="tracking-brand"][class*="py-4"],
a[class*="tracking-brand"][class*="py-5"],
button[class*="tracking-brand"] {
  border-radius: 9999px;
}

/* ─── Instagram-Reel-Karte ─── */
.reel-card {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 15rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 1.4rem;
  border: 1px solid rgba(28,24,21,.15);
  background: #1C1815;
  box-shadow: 0 20px 44px -30px rgba(28,24,21,.5);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.reel-card:hover { transform: translateY(-6px); }
.reel-card img, .reel-card video { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.reel-card .reel-overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: .9rem;
  background: linear-gradient(to bottom, rgba(28,24,21,.45), transparent 30%, transparent 60%, rgba(28,24,21,.72));
  color: #FDFCF8;
}

/* ─── Bild-Platzhalterton ─── */
.img-frame { background: linear-gradient(160deg, #F5F1E6, #D6CBAE); }

/* ─── Bild-Grading: EINE warme, gedämpfte Stimmung für alle Inhaltsfotos ───
   Die Rohfotos (Neon, Mischlicht) werden auf Taverna-Abend getrimmt.
   Utility-Klassen wie .grayscale gewinnen weiterhin (höhere Spezifität). */
main img {
  filter: saturate(.78) contrast(1.06) brightness(.94) sepia(.18);
}

/* ─── Reveals: längerer Weg, weicher Auslauf ─── */
html.js .reveal { opacity: 0; transform: translateY(44px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .14s; }
.reveal-delay-2 { transition-delay: .28s; }

/* ─── Hero-Entrance: Ken-Burns-Zoom + gestaffeltes Aufsteigen ───
   fill-mode "backwards": ohne Animation (reduced motion) bleibt alles sichtbar. */
.hero-zoom { animation: heroZoom 2.6s cubic-bezier(.16,1,.3,1) backwards; }
@keyframes heroZoom { from { transform: scale(1.1); } }
.hero-rise { animation: heroRise 1s cubic-bezier(.16,1,.3,1) backwards; }
.hero-d1 { animation-delay: .15s; }
.hero-d2 { animation-delay: .32s; }
.hero-d3 { animation-delay: .5s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(46px); } }

/* Parallax-Bilder: Überstand fürs Verschieben, JS setzt translateY */
.px-img { transform: scale(1.14); will-change: transform; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

:focus-visible { outline: 2px solid #2E6E9E; outline-offset: 3px; }

html { scroll-padding-top: 8rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
}

/* ─── Die Tafel: Menüzeilen mit Bild-Reveal beim Hover ─── */
.tafel-row { position: relative; }
.tafel-row .tafel-img {
  position: absolute; right: 6%; top: 50%; z-index: 5;
  object-fit: cover;
  transform: translateY(-50%) rotate(2.5deg) scale(.95);
  opacity: 0; pointer-events: none;
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  border-radius: 9999px; aspect-ratio: 1/1; width: 11rem;
  box-shadow: 0 24px 48px -20px rgba(28,24,21,.45), 0 0 0 8px #fff, 0 0 0 9px rgba(28,24,21,.1);
}
.tafel-row:hover .tafel-img, .tafel-row:focus-visible .tafel-img { opacity: 1; transform: translateY(-50%) rotate(0deg) scale(1); }

/* Inline-Bild in der Hero-Headline */
.word-img {
  display: inline-block; vertical-align: baseline;
  height: .72em; width: 1.35em; object-fit: cover;
  border-radius: 999px; transform: translateY(.08em);
}

/* ═══ "Der gedeckte Tisch" — Teller & drehendes Siegel ═══ */
.plate {
  border-radius: 9999px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: 0 30px 60px -30px rgba(28,24,21,.5), 0 0 0 10px #FFFFFF, 0 0 0 11px rgba(28,24,21,.12);
}
.spin-badge { animation: spin 22s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin-badge { animation: none; } }

/* Poster-Kontur-Typo */
.text-outline { -webkit-text-stroke: 2px #1D5580; color: transparent; }
.text-outline-cream { -webkit-text-stroke: 2px rgba(253,252,248,.92); color: transparent; }
@media (max-width: 640px) {
  .text-outline { -webkit-text-stroke: 1px #1C1815; }
  .text-outline-cream { -webkit-text-stroke: 1px rgba(253,252,248,.92); }
}

/* ─── Skulpturen (assets/3d): transparente Marmor-PNGs, weiche Bodenschatten ─── */
.statue { mix-blend-mode: normal; pointer-events: none; user-select: none; }
/* Maus-Motion über CSS-Variablen (JS setzt --mx/--my); dürfen über den Rand bleeden */
.statue-mid { transform: translate(var(--mx,0), calc(-50% + var(--my,0))); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.statue-btm { transform: translate(var(--mx,0), var(--my,0)); transition: transform .6s cubic-bezier(.16,1,.3,1); }
/* Vom globalen Sepia-Grading ausnehmen; sehr dezenter Schatten (folgt der Alpha-Form) */
main img.statue { filter: none; }
/* Partner-Logos etc. vom Sepia-Grading ausnehmen (echte Markenfarben) */
main img.logo-plain { filter: none; }
/* Schwarzweiß-Impressionen: neutral halten (kein Sepia-Grading) */
main img.photo-bw { filter: grayscale(1) contrast(1.05); }
/* Karte: dezente Angleichung an die warme Palette */
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.9) contrast(1.03); }

/* ─── Formulare mit Charakter: goldene Labels, warme Felder, goldener Fokus-Ring ─── */
/* Feld-Labels (die mit uppercase) sprechen Gold statt Grau */
form label[class*="uppercase"] { color: #A87F2F; letter-spacing: .2em; }

form input:not([type="checkbox"]):not([type="radio"]),
form textarea,
form select {
  border-radius: .65rem;
  border-color: rgba(28,24,21,.16);
  background-color: #FDFCF8;
  padding-top: .85rem;
  padding-bottom: .85rem;
  font-size: 1rem;
  color: #1C1815;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
form input:not([type="checkbox"]):not([type="radio"]):hover,
form textarea:hover, form select:hover { border-color: rgba(28,24,21,.3); }
form input:not([type="checkbox"]):not([type="radio"]):focus,
form textarea:focus,
form select:focus {
  outline: none;
  border-color: #1D5580;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(192, 149, 64, .24);   /* goldener Ring = Markenakzent */
}
form input::placeholder, form textarea::placeholder { color: rgba(28,24,21,.32); font-style: italic; }

/* Datenschutz-Checkbox: größer, in Markenfarbe */
form input[type="checkbox"] {
  accent-color: #1D5580;
  width: 1.05rem;
  height: 1.05rem;
  cursor: pointer;
}
/* Submit-Buttons: sanftes Anheben */
form button[type="submit"] { transition: transform .3s cubic-bezier(.16,1,.3,1), background-color .3s ease, box-shadow .3s ease; }
form button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -20px rgba(9,38,60,.6); }
.statue-soft { filter: none !important; }
.statue-faint { filter: none !important; }
.statue-ghost { filter: none !important; }


/* Bordüren endgültig aus — kein Fries, kein Mäander */
.frieze { display: none; }

/* Hero-Scroll-Indikator: sanft pulsierender Chevron */
.hero-scroll svg { animation: scrollBounce 1.8s ease-in-out infinite; }
@keyframes scrollBounce { 0%,100% { transform: translateY(0); opacity:.7; } 50% { transform: translateY(7px); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll svg { animation: none; } }