/* ==========================================================
   Taverna Metaxa – Landing Page (Website im Aufbau)
   Stil: griechisch, weiß-blau, Mäander-Rahmen
   ========================================================== */

:root {
  --aegean:      #0d47a1;   /* tiefes griechisches Blau */
  --aegean-2:    #1565c0;   /* helleres Blau */
  --sky:         #4a90d9;
  --white:       #ffffff;
  --off-white:   #f4f8fd;
  --ink:         #0d3f7a;
  --gold:        #c9a24b;    /* dezenter Akzent */
  --frame:       #0d47a1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, #ffffff 0%, #eaf2fc 45%, #dbe9fa 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* Dezentes bayrisches Rauten-Wasserzeichen im Hintergrund */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  background-image:
    linear-gradient(45deg, var(--aegean) 25%, transparent 25%, transparent 75%, var(--aegean) 75%),
    linear-gradient(45deg, var(--aegean) 25%, transparent 25%, transparent 75%, var(--aegean) 75%);
  background-size: 80px 80px;
  background-position: 0 0, 40px 40px;
  pointer-events: none;
}

/* ---------- Griechischer Mäander-Rahmen ---------- */
.greek-frame {
  position: fixed;
  inset: 18px;
  z-index: 2;
  pointer-events: none;
  border: 3px solid var(--frame);
  border-radius: 4px;
  /* Mäander (Greek key) als SVG-Border-Image */
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath fill='none' stroke='%230d47a1' stroke-width='4' d='M0 30 L0 6 L24 6 L24 24 L12 24 L12 18 L18 18 M60 30 L60 6 L36 6 L36 24 L48 24 L48 18 L42 18 M0 30 L0 54 L24 54 L24 36 L12 36 L12 42 L18 42 M60 30 L60 54 L36 54 L36 36 L48 36 L48 42 L42 42'/%3E%3C/svg%3E") 30 round;
  border-width: 16px;
}

@media (max-width: 640px) {
  .greek-frame { inset: 10px; border-width: 11px; }
}

/* ---------- Bühne / Karte ---------- */
.stage {
  flex: 1;
  z-index: 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 28px 40px;
}

.card {
  width: 100%;
  max-width: 620px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(13, 71, 161, 0.14);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(13, 63, 122, 0.16);
  padding: 46px 40px 40px;
  text-align: center;
  animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Logo ---------- */
.logo-wrap { margin-bottom: 18px; }
.logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(13, 63, 122, 0.22));
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------- Typografie ---------- */
.kicker {
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--aegean-2);
  font-weight: 600;
  margin-bottom: 6px;
}

.title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  color: var(--aegean);
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.status {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 4vw, 1.6rem);
  color: var(--ink);
  margin-bottom: 10px;
}

.subtitle {
  font-size: 1rem;
  line-height: 1.6;
  color: #37527a;
  margin-bottom: 18px;
}

.coming-soon {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--white);
  background: linear-gradient(135deg, var(--aegean), var(--aegean-2));
  padding: 9px 22px;
  border-radius: 999px;
  margin-bottom: 30px;
  box-shadow: 0 8px 18px rgba(13, 71, 161, 0.28);
}

/* ---------- Mäander-Trenner ---------- */
.meander-divider {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 20px;
}
.meander-divider span {
  width: 22px;
  height: 22px;
  border: 3px solid var(--gold);
  border-right: none;
  border-bottom: none;
  transform: rotate(0deg);
  opacity: 0.75;
}
.meander-divider span:nth-child(even) { transform: rotate(180deg); }

/* ---------- Buttons ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  min-width: 190px;
  justify-content: center;
}
.btn svg { flex-shrink: 0; }

.btn-primary {
  background: linear-gradient(135deg, var(--aegean), var(--aegean-2));
  color: var(--white);
  box-shadow: 0 10px 24px rgba(13, 71, 161, 0.32);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(13, 71, 161, 0.4);
}

.btn-secondary {
  background: var(--white);
  color: var(--aegean);
  border: 2px solid var(--aegean);
}
.btn-secondary:hover {
  transform: translateY(-3px);
  background: var(--off-white);
  box-shadow: 0 12px 26px rgba(13, 71, 161, 0.2);
}

/* ---------- Kontakt ---------- */
.contact {
  border-top: 1px solid rgba(13, 71, 161, 0.14);
  padding-top: 22px;
}
.contact-line {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #33507a;
  margin-bottom: 8px;
}
.contact-line strong { color: var(--aegean); }
.contact-line a {
  color: var(--aegean-2);
  font-weight: 600;
  text-decoration: none;
}
.contact-line a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  z-index: 3;
  text-align: left;
  padding: 6px 34px 26px;
}
.credit {
  font-size: 0.78rem;
  color: #7a8ba6;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.credit:hover { color: var(--aegean-2); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .stage { padding: 44px 18px 24px; }
  .card { padding: 34px 22px 30px; border-radius: 14px; }
  .logo { width: 150px; height: 150px; }
  .btn { min-width: 100%; }
  .site-footer { padding: 4px 22px 20px; text-align: center; }
}