/* orient.css — Bosporus Grill
   Gestaltungselemente mit orientalischem Bezug und die
   Linien-Icons. Gegenstueck zu italia.css im Pizzeria-Shop.
   Wird auf allen Seiten nach components.css geladen. */

/* ── LOGO ── */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav__logo-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: var(--color-accent);
  stroke-width: 0.9;
}

.nav__logo-text small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 3px;
}

@media (max-width: 900px) {
  .nav__logo { font-size: 1.05rem; gap: 0.4rem; }
  .nav__logo-mark { width: 30px; height: 30px; }
  .nav__logo-text small { display: none; }

  .nav .nav__aktionen { gap: 0.25rem; }
  .nav .nav__aktionen .btn { padding-inline: 0.45rem; }
  .nav .nav__konto { padding: 0.4rem; }
  .nav .nav__burger { width: 38px; }
  .nav .cart-btn { min-width: 38px; }
  .nav .ic { width: 1.15em; height: 1.15em; }
}

@media (max-width: 420px) {
  .nav__logo { font-size: 0.92rem; }
  .nav__logo-mark { width: 26px; height: 26px; }
}

/* ── LINIEN-ICONS ── */
.ic {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
  vertical-align: -0.2em;
  stroke: currentColor;
  fill: none;
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ic--lg { width: 2.6em; height: 2.6em; }
.ic--xl { width: 3.6em; height: 3.6em; }

.btn__icon { width: 16px; height: 16px; flex-shrink: 0; display: block; }

.ic-badge {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-bg-soft);
  color: var(--color-accent);
  transition: border-color var(--transition), color var(--transition);
}

.ic-badge .ic { width: 38px; height: 38px; }

a:hover .ic-badge,
button:hover .ic-badge,
.ic-badge:hover { border-color: var(--color-accent); }

.ic-badge--kupfer { color: var(--color-copper); }

.btn--primary .ic { color: currentColor; }

/* iOS Safari faerbt Buttons ohne gesetzte Textfarbe in Systemblau. */
button { color: inherit; }
.cart-btn { color: var(--color-accent); }
.cart-btn:hover { color: var(--color-accent-dk); }
.mode-card { color: var(--color-ink); }
.mode-card--active { color: var(--color-on-accent, #fff); }
.cat-link { color: var(--color-ink); }

/* ── BUTTONS ──
   In diesem Shop sehen alle Knoepfe gleich aus: rot gefuellt,
   weisse Schrift, weisses Icon. Die Varianten aus components.css
   — outline, outline-light, dark — werden hier bewusst
   gleichgezogen. Die Klassen bleiben im Markup stehen, damit das
   Grundgeruest unveraendert bleibt, sie faerben nur nichts mehr
   Eigenes.

   Diese Datei wird nach components.css geladen und gewinnt
   deshalb. konto.css kommt danach, faerbt aber keine Knoepfe. */
.btn {
  border-radius: 999px;
  gap: 10px;
}

.btn,
.btn--primary,
.btn--outline,
.btn--outline-light,
.btn--dark {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.btn:hover,
.btn--primary:hover,
.btn--outline:hover,
.btn--outline-light:hover,
.btn--dark:hover {
  background: var(--color-accent-dk);
  border-color: var(--color-accent-dk);
  color: #fff;
  opacity: 1;
}

.btn .ic,
.btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #fff;
  stroke: #fff;
  vertical-align: middle;
}

.btn--sm .ic,
.btn--sm svg { width: 18px; height: 18px; }

.btn--primary:hover {
  background: var(--color-accent-dk);
  border-color: var(--color-accent-dk);
  opacity: 1;
}

/* ── ORNAMENTBAND ──
   Geometrisches Muster statt eines Farbstreifens, angelehnt an
   Kachelornamente. Ersetzt die Tricolore aus dem Pizzeria-Shop. */
.ornament {
  height: 10px;
  width: 100%;
  background-color: var(--color-accent);
  background-image:
    repeating-linear-gradient(45deg,
      var(--color-copper) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(-45deg,
      var(--color-copper) 0 2px, transparent 2px 10px);
  background-size: 14px 14px;
}

.ornament--kurz {
  width: 84px;
  height: 6px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  border-radius: 999px;
}

/* ── AKZENTE ── */
.script {
  font-family: var(--font-script);
  font-size: 1.6em;
  line-height: 1;
  color: var(--color-copper);
}

.script--petrol { color: var(--color-accent); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-copper);
  margin-bottom: var(--space-3);
  display: block;
}

.hero__content .script {
  display: block;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: var(--space-3);
  color: var(--color-on-dark);
  opacity: 0.9;
}

/* Unterstrich, der wie getippt erscheint und wieder verschwindet */
.unterstrich { position: relative; display: inline-block; }

.unterstrich::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.12em;
  height: 3px;
  width: 0;
  background: var(--color-copper);
  animation: strich-tippen 5s linear infinite;
}

@keyframes strich-tippen {
  0%   { width: 0; }
  25%  { width: 100%; }
  65%  { width: 100%; }
  90%  { width: 0; }
  100% { width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .unterstrich::after { animation: none; width: 100%; }
}

/* ── HINTERGRUND ── */
.sand {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 18% 28%, rgba(31,110,115,0.04) 0, transparent 45%),
    radial-gradient(circle at 82% 72%, rgba(184,115,51,0.05) 0, transparent 45%);
}

/* Schmales Kachelband als Trenner zwischen Sektionen */
.kachelband {
  height: 26px;
  background-color: var(--color-bg-soft);
  background-image:
    repeating-conic-gradient(
      from 45deg at 50% 50%,
      rgba(31,110,115,0.14) 0deg 90deg,
      transparent 90deg 180deg);
  background-size: 26px 26px;
  border-block: 1px solid var(--color-line);
}

/* ── ABSCHNITTSTITEL ── */
.titel-mitte { text-align: center; margin-bottom: var(--space-6); }
.titel-mitte h2 { font-family: var(--font-head); font-weight: 800; }
.titel-mitte__sub {
  color: var(--color-muted);
  font-size: var(--text-base);
  max-width: 56ch;
  margin-inline: auto;
  margin-top: var(--space-2);
}

/* ── KONTAKT- UND INFO-ICONS ── */
.contact-card__icon {
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
}
.contact-card__icon .ic { width: 22px; height: 22px; }

.res-info-card h3 .ic,
.res-info-item .ic,
.res-success__icon .ic { color: var(--color-accent); }
.res-info-item .ic { width: 20px; height: 20px; }

/* ── ANGEBOTSKACHELN ── */
.offer-card__title {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: var(--space-3);
}

.offer-card__text {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  max-width: 28ch;
}

/* ── CHECKOUT-SCHRITTE ── */
.checkout-steps .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  line-height: 1.3;
}

.step__nr { font-weight: 700; font-size: var(--text-base); }
.step__label { font-size: var(--text-sm); hyphens: auto; }

@media (max-width: 480px) {
  .step__label { font-size: var(--text-xs); }
}

/* ── BURGER-MENUE ── */
.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-ink);
  cursor: pointer;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .nav .nav__inner { flex-wrap: wrap; row-gap: 0; gap: var(--space-2); }
  .nav .nav__logo { order: 0; }
  .nav .nav__burger { order: 1; display: flex; }
  .nav .nav__aktionen { order: 2; margin-left: auto; }
  .nav .cart-btn { order: 3; }
  .nav .nav__links { order: 4; }

  .nav .nav__aktionen {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
  }

  .nav:not(.nav--offen) .nav__links { display: none; }

  .nav.nav--offen .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex-basis: 100%;
    width: 100%;
    margin: 0;
    border-top: 1px solid var(--color-line);
    padding-block: var(--space-2);
  }

  .nav.nav--offen .nav__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: var(--space-2);
  }
}

@media (max-width: 640px) {
  .nav .btn__text,
  .nav .nav__konto-name { display: none; }
  .nav .nav__aktionen .btn { padding-inline: 0.6rem; gap: 0; }
  .nav .nav__konto { padding: 0.5rem; }
}

/* ── SPLIT-SEKTIONEN ── */
.split {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.split__media {
  min-height: 260px;
  background-size: cover;
  background-position: center;
}

@media (max-width: 899px) {
  .split__text  { order: 1; }
  .split__media { order: 2; }
}

.split__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-7) var(--space-5);
  background: var(--color-bg-soft);
}

.split__text--sand { background: var(--color-bg); }

.split__inner {
  max-width: 46ch;
  margin-inline: auto;
  width: 100%;
}

.split__text h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

.split__text p {
  color: var(--color-muted);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}

.split__text p:last-of-type { margin-bottom: var(--space-5); }

.split__text p.script {
  color: var(--color-copper);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.2;
}

.split__aktionen {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; min-height: 600px; }
  .split__media { min-height: 100%; }
  .split__text { padding: var(--space-7); }

  .split--links .split__media { order: 1; }
  .split--links .split__text  { order: 2; }
  .split--rechts .split__media { order: 2; }
  .split--rechts .split__text  { order: 1; }
}