/* ===== lokale Webfonts — src/styles/fonts.css ===== */
/* Lokale Webfonts — erzeugt von scripts/fonts_fetch.py, nicht von Hand
   bearbeiten. Selbst ausgeliefert statt von fonts.googleapis.com, damit
   beim Seitenaufruf keine IP-Adresse an Google geht. Die Icon-Font ist
   auf die benutzten Symbole zugeschnitten. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-1.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-2.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/kaushan-script-1.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/kaushan-script-2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('/fonts/material-symbols-rounded-1.woff2') format('woff2');
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/* ===== Farben — design-system/tokens/colors.css ===== */
:root{
/* ── Brand base ─────────────────────────────────────────────
   Sampled directly from the supplied artwork.
   #981820 = the Sultan's robe/turban.  #960004 = the wordmark red.
   #F0B000 = the mascot's gold.         #D89830 = the wordmark outline gold. */
--red-50:#FDF2F2;--red-100:#F7DDDE;--red-200:#EBB4B7;--red-300:#D9868B;--red-400:#C05159;
--red-500:#A82931;--red-600:#981820;--red-700:#7C1319;--red-800:#5E0E13;--red-900:#3F090C;
--gold-50:#FFF8E6;--gold-100:#FDEBB8;--gold-200:#FADB80;--gold-300:#F7C947;--gold-400:#F0B000;
--gold-500:#D89830;--gold-600:#B87D14;--gold-700:#8C5D0C;
--bone-50:#FBFAF8;--bone-100:#F5F2EC;--bone-200:#E8E3D9;--bone-300:#D5CEC1;
--gray-400:#A8A29A;--gray-500:#7A756E;--gray-600:#55514C;--gray-700:#363330;--gray-800:#1E1C1A;
--ink:#0B0B0B;--white:#FFFFFF;

/* Named brand constants (never re-mix these) */
--sultan-red:#981820;--sultan-red-wordmark:#960004;--sultan-gold:#F0B000;--sultan-gold-antique:#D89830;

/* ── Surfaces ── */
--surface-page:var(--bone-100);
--surface-card:var(--white);
--surface-sunken:var(--bone-200);
--surface-ink:var(--ink);
--surface-brand:var(--red-600);
--surface-brand-deep:var(--red-800);
--surface-gold:var(--gold-400);
--surface-gold-soft:var(--gold-50);
--surface-overlay:rgba(11,11,11,.62);

/* ── Text ── */
--text-heading:var(--ink);
--text-body:var(--gray-700);
--text-muted:var(--gray-500);
--text-inverse:var(--bone-50);
--text-inverse-muted:rgba(251,250,248,.66);
--text-brand:var(--red-600);
--text-on-brand:#FFF6F6;
--text-on-gold:var(--ink);
--text-link:var(--red-600);
--text-link-hover:var(--red-800);

/* ── Borders ── */
--border-hairline:rgba(11,11,11,.10);
--border-hairline-inverse:rgba(255,255,255,.16);
--border-strong:var(--ink);
--border-brand:var(--red-600);
--border-gold:var(--gold-400);

/* ── Semantic state ── */
--state-success:#2E7D4F;--state-success-soft:#E7F3EC;
--state-warning:var(--gold-400);--state-warning-soft:var(--gold-50);
--state-danger:var(--red-600);--state-danger-soft:var(--red-50);
--state-open:#2E7D4F;--state-closed:var(--gray-500);

/* ── Focus ── */
--focus-ring:var(--gold-400);--focus-ring-inverse:var(--gold-300);
}


/* ===== Typografie — design-system/tokens/typography.css ===== */
:root{
--font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
--font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
--font-script:"Kaushan Script","Brush Script MT",cursive;
--font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;--weight-black:900;

/* Fluid display sizes — headlines are meant to be BIG */
--text-hero:clamp(52px,8.4vw,124px);
--text-display:clamp(40px,5.4vw,80px);
--text-title-1:clamp(30px,3.4vw,52px);
--text-title-2:clamp(24px,2.2vw,34px);
--text-title-3:22px;
--text-lead:clamp(17px,1.4vw,21px);
--text-body-lg:18px;--text-body-md:16px;--text-body-sm:14px;--text-caption:13px;--text-micro:11px;

--leading-tight:0.92;--leading-snug:1.08;--leading-heading:1.16;--leading-body:1.55;--leading-loose:1.7;

--tracking-hero:-0.035em;--tracking-display:-0.025em;--tracking-title:-0.015em;
--tracking-body:0em;--tracking-label:0.10em;--tracking-eyebrow:0.18em;

/* Composed roles */
--type-hero:var(--weight-black) var(--text-hero)/var(--leading-tight) var(--font-display);
--type-display:var(--weight-extrabold) var(--text-display)/var(--leading-snug) var(--font-display);
--type-title-1:var(--weight-extrabold) var(--text-title-1)/var(--leading-heading) var(--font-display);
--type-title-2:var(--weight-bold) var(--text-title-2)/var(--leading-heading) var(--font-display);
--type-title-3:var(--weight-bold) var(--text-title-3)/1.25 var(--font-display);
--type-lead:var(--weight-regular) var(--text-lead)/var(--leading-body) var(--font-body);
--type-body:var(--weight-regular) var(--text-body-md)/var(--leading-body) var(--font-body);
--type-label:var(--weight-bold) var(--text-caption)/1.2 var(--font-body);
--type-eyebrow:var(--weight-bold) var(--text-micro)/1.2 var(--font-body);
}


/* ===== Abstaende — design-system/tokens/spacing.css ===== */
:root{
--space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
--space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;

--gutter:var(--space-6);
--container-max:1240px;
--container-narrow:720px;
--section-y:clamp(64px,7vw,128px); /* @kind spacing */
--page-x:clamp(20px,5vw,72px); /* @kind spacing */
--stack-tight:var(--space-2);--stack-default:var(--space-4);--stack-loose:var(--space-8);

--control-height-sm:36px;--control-height-md:46px;--control-height-lg:58px;
--header-height:76px;
}


/* ===== Radien — design-system/tokens/radius.css ===== */
:root{
--radius-xs:4px;--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--radius-xl:32px;--radius-pill:999px;
--radius-card:var(--radius-md);
--radius-control:var(--radius-pill);
--radius-media:var(--radius-lg);
--border-width-hairline:1px;--border-width-strong:2px;--border-width-stamp:2px;
}


/* ===== Schatten — design-system/tokens/elevation.css ===== */
:root{
/* Shadows are warm-black and low-spread. Nothing floats without reason. */
--shadow-none:none;
--shadow-hairline:0 0 0 1px var(--border-hairline);
--shadow-sm:0 1px 2px rgba(11,11,11,.06),0 2px 8px rgba(11,11,11,.05);
--shadow-md:0 4px 10px rgba(11,11,11,.07),0 12px 28px rgba(11,11,11,.07);
--shadow-lg:0 12px 24px rgba(11,11,11,.09),0 32px 64px rgba(11,11,11,.10);
--shadow-brand:0 10px 26px rgba(152,24,32,.28);
--shadow-gold:0 10px 26px rgba(240,176,0,.32);
--shadow-inset-sunken:inset 0 1px 2px rgba(11,11,11,.08);
--blur-glass:14px;
}


/* ===== Bewegung — design-system/tokens/motion.css ===== */
:root{
--ease-standard:cubic-bezier(.2,.8,.2,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in:cubic-bezier(.55,0,1,.45); /* @kind other */
--ease-stamp:cubic-bezier(.34,1.56,.64,1); /* @kind other */
--duration-instant:80ms; /* @kind other */
--duration-fast:140ms; /* @kind other */
--duration-base:220ms; /* @kind other */
--duration-slow:420ms; /* @kind other */
--duration-stamp:520ms; /* @kind other */
--press-scale:0.97; /* @kind other */
--hover-lift:-2px; /* @kind spacing */
--transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard); /* @kind other */
}


/* ===== Grundlagen — design-system/tokens/base.css ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);font-family:var(--font-display);letter-spacing:var(--tracking-title);line-height:var(--leading-heading);text-wrap:balance}
p{margin:0;text-wrap:pretty}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--text-link);text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);text-decoration:underline}
a:active{color:var(--red-900)}
::selection{background:var(--gold-300);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs)}
hr{border:0;border-top:1px solid var(--border-hairline);margin:var(--space-8) 0}
/* Material Symbols Rounded — the brand icon set */
.ms-icon{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;user-select:none}


/* ===== Layout + mobile Anpassungen — src/styles/layout.css ===== */
/* ===========================================================================
   Layout und Anpassung an kleine Bildschirme.
   ---------------------------------------------------------------------------
   Das Design System liefert Farben, Typografie und Bausteine, aber ein reines
   Rechner-Layout: feste Spaltenraster („1fr .85fr", „1fr 1fr 1.2fr") standen
   als Inline-Werte in den Komponenten, wo keine Bildschirmabfrage sie
   erreichen kann. Diese Raster wurden in Klassen hier herausgezogen — die
   Komponenten setzen nur noch className, die Breitenlogik steht an dieser
   einen Stelle.

   Stufen:  bis 640px = Handy · bis 900px = kleines Tablet · darueber Vollbild.
   =========================================================================== */

/* ---------- Grundgeruest ------------------------------------------------- */

.si-breite {
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Kein waagerechtes Wackeln durch einzelne breite Kinder. */
html, body { overflow-x: clip; }

/* ---------- Kopf --------------------------------------------------------- */

.si-kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-height);
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  padding: 0 var(--page-x);
  gap: var(--space-8);
}

.si-marke { display: flex; }

.si-nav {
  display: flex;
  gap: var(--space-8);
  margin-left: var(--space-8);
}

.si-nav a {
  font: var(--weight-bold) 14px/1 var(--font-display);
  color: var(--text-heading);
  letter-spacing: .01em;
}

.si-kopf-aktionen {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* ---------- Aufmacher ---------------------------------------------------- */

.si-hero { padding: clamp(32px, 4vw, 64px) var(--page-x) 0; }

.si-hero-raster {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .82fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

.si-hero-zeile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: clamp(18px, 2.2vw, 30px);
  flex-wrap: wrap;
}

.si-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.si-eyebrow-rot { color: var(--text-brand); }
.si-eyebrow-leise { color: var(--text-muted); }

.si-punkt {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--gray-400);
  flex-shrink: 0;
}

.si-hero-mehmets {
  display: block;
  font: var(--weight-black) clamp(17px, 1.9vw, 28px)/1 var(--font-display);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sultan-red);
  margin-bottom: clamp(10px, 1.1vw, 18px);
}

.si-hero-extra {
  font: var(--weight-black) clamp(24px, 3.9vw, 58px)/.9 var(--font-display);
  letter-spacing: .01em;
  color: transparent;
  -webkit-text-stroke: 2px var(--sultan-red);
  padding-right: 2px;
}

.si-hero-lead {
  font: var(--type-lead);
  color: var(--text-body);
  max-width: 38ch;
  margin-top: clamp(20px, 2.2vw, 32px);
  padding-top: clamp(20px, 2.2vw, 32px);
  border-top: 1px solid var(--border-hairline);
}

.si-hero-knoepfe {
  display: flex;
  gap: var(--space-3);
  margin-top: clamp(22px, 2.4vw, 34px);
  flex-wrap: wrap;
}

.si-hero-bild {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: clamp(320px, 42vw, 560px);
}

.si-hero-kreis,
.si-hero-ring {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 999px;
}
.si-hero-kreis { bottom: 4%; width: min(440px, 96%); background: var(--surface-brand); }
.si-hero-ring  { bottom: calc(4% - 14px); width: min(468px, 102%); border: 1px solid rgba(240, 176, 0, .55); }

.si-hero-bild img {
  position: relative;
  width: min(418px, 90%);
  height: auto;
  filter: drop-shadow(0 26px 44px rgba(11, 11, 11, .24));
}

/* ---------- Adresskarte (im Aufmacher) ----------------------------------- */

.si-adresskarte {
  display: flex;
  align-items: stretch;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  max-width: 600px;
}

.si-adresskarte-bild {
  width: 200px;
  flex-shrink: 0;
  position: relative;
  display: block;
  background: var(--surface-sunken);
}

.si-adresskarte-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Namensnennung der Kartendaten — Pflicht aus der ODbL, deshalb klein, aber
   lesbar und nicht wegklickbar. */
.si-karte-quelle {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1px 5px;
  font: var(--weight-medium) 9px/1.4 var(--font-body);
  color: #4a4a4a;
  background: rgba(255, 255, 255, .78);
  border-top-left-radius: 4px;
}

.si-adresskarte-text {
  flex: 1;
  min-width: 0;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.si-adresse-strasse {
  font: var(--weight-bold) 15px/1.35 var(--font-display);
  color: var(--text-heading);
}

.si-adresskarte-aktionen {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
  flex-wrap: wrap;
}

.si-telefon-stark {
  font: var(--weight-bold) 14px/1 var(--font-body);
  color: var(--text-heading);
  white-space: nowrap;
}

/* ---------- Karte (Speisen) ---------------------------------------------- */

.si-karte-abschnitt {
  background: var(--surface-card);
  padding: var(--section-y) var(--page-x);
}

.si-tabs-schacht {
  margin-top: var(--space-8);
  /* Sechs Kategorien passen auf einem Handy nicht nebeneinander — statt sie
     umbrechen zu lassen, laesst sich die Leiste seitlich schieben. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.si-tabs-schacht::-webkit-scrollbar { display: none; }
.si-tabs-schacht > * { min-width: max-content; }

.si-karte-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--space-16);
  margin-top: var(--space-6);
}

/* ---------- Sultan Pass -------------------------------------------------- */

.si-pass-abschnitt {
  background: var(--surface-ink);
  padding: var(--section-y) var(--page-x);
}

.si-pass-raster {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: var(--space-16);
  align-items: center;
}

.si-schritte {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.si-schritt-kreis {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--border-hairline-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sultan-gold);
}

/* ---------- Standort ----------------------------------------------------- */

.si-standort { padding: var(--section-y) var(--page-x); }

.si-standort-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.si-standort-karte {
  position: relative;
  display: block;
  min-height: 280px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-hairline);
  overflow: hidden;
  background: var(--surface-sunken);
}

.si-standort-karte img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

/* ---------- Fuss --------------------------------------------------------- */

.si-fuss {
  background: var(--surface-ink);
  color: var(--text-inverse-muted);
  padding: var(--space-20) var(--page-x) var(--space-10);
}

.si-fuss-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
}

.si-fuss-titel {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sultan-gold);
  margin-bottom: var(--space-4);
}

.si-fuss-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.si-fuss-liste a {
  font: var(--weight-medium) 14px/1 var(--font-body);
  color: var(--text-inverse-muted);
}
.si-fuss-liste a:hover { color: var(--sultan-gold); }

.si-fuss-unten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline-inverse);
}

/* ---------- Meldung (Toast) ---------------------------------------------- */

.si-toast-schacht {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(28px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  padding-inline: var(--space-4);
  z-index: 60;
  pointer-events: none;
}

/* ---------- Ohne JavaScript ---------------------------------------------- */

.noscript-karte {
  max-width: 34rem;
  margin: 12vh auto;
  padding: var(--space-8);
  text-align: center;
  font: var(--type-body);
}
.noscript-karte h1 { margin-bottom: var(--space-5); }
.noscript-karte p { margin-bottom: var(--space-3); }

/* ---------- Rechtsseiten (Impressum, Datenschutz) ------------------------ */

.rechts-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-height);
  padding: 0 var(--page-x);
  border-bottom: 1px solid var(--border-hairline);
}
.rechts-marke img { height: 30px; width: auto; }
.rechts-zurueck { font: var(--weight-bold) 14px/1 var(--font-display); color: var(--text-heading); }

.rechts-seite {
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--section-y) var(--page-x);
}
.rechts-seite h1 { margin-bottom: var(--space-8); }
.rechts-seite h2 { font: var(--type-title-3); margin: var(--space-8) 0 var(--space-2); }
.rechts-seite p { margin-bottom: var(--space-3); font: var(--type-body); color: var(--text-body); }
.rechts-seite a { color: var(--text-link); }

.rechts-hinweis {
  margin-top: var(--space-10);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-sunken);
  border-left: 3px solid var(--sultan-gold);
  border-radius: var(--radius-xs);
  font: var(--weight-medium) 14px/1.6 var(--font-body);
  color: var(--text-muted);
}

.rechts-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--space-6) var(--page-x) var(--space-16);
  border-top: 1px solid var(--border-hairline);
  font: var(--weight-medium) 13px/1.5 var(--font-body);
  color: var(--text-muted);
}
.rechts-fuss p { margin: 0; }
.rechts-fuss a { color: var(--text-muted); }

/* ===========================================================================
   Kleines Tablet — ab hier reichen drei Spalten nicht mehr
   =========================================================================== */

/* Der volle Kopf braucht rund 950px: Wortmarke, drei Links, Zeiten-Plakette
   und zwei Knoepfe. Darunter laeuft er ueber den Rand hinaus (gemessen bei
   768px: 141px Ueberstand). Zuerst gehen Plakette und Sultan-Pass-Knopf, die
   Navigation bleibt so lange wie moeglich. */
@media (max-width: 1000px) {
  .si-nur-breit { display: none; }
}

@media (max-width: 900px) {
  .si-hero-raster { grid-template-columns: minmax(0, 1fr); }

  /* Bild nach oben: der Sultan ist das Erkennungszeichen und soll nicht
     hinter drei Bildschirmhoehen Text liegen. */
  .si-hero-bild { order: -1; min-height: clamp(240px, 46vw, 380px); }
  .si-hero-bild img { width: min(320px, 68%); }
  .si-hero-kreis { width: min(330px, 72%); }
  .si-hero-ring { width: min(352px, 77%); }

  .si-pass-raster { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .si-standort-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .si-standort-karte { grid-column: 1 / -1; }
  .si-fuss-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); }
  .si-karte-raster { gap: 0 var(--space-8); }
}

/* ===========================================================================
   Handy
   =========================================================================== */

@media (max-width: 640px) {
  :root {
    /* Der klebende Kopf wird einzeilig — die Zahl liest auch das
       Sanftscrollen in site.jsx aus, sie muss also zum Layout passen. */
    --header-height: 62px;
    --section-y: clamp(48px, 11vw, 72px);
  }

  /* Jetzt geht auch die Navigation: auf 360px Breite stuenden Wortmarke, drei
     Links und der Knopf uebereinander und der klebende Kopf fraesse ein
     Drittel des Bildschirms. Die Sprungziele bleiben ueber die Knoepfe im
     Aufmacher und den Fuss erreichbar; die Nummer bleibt oben. */
  .si-nav { display: none; }

  .si-kopf { gap: var(--space-4); }
  .si-marke img { height: 26px !important; }

  .si-karte-raster { grid-template-columns: minmax(0, 1fr); }
  .si-standort-raster { grid-template-columns: minmax(0, 1fr); }
  .si-fuss-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
  .si-fuss-raster > :first-child { grid-column: 1 / -1; }

  /* Adresskarte hochkant: 200 px Karte plus Text passen nicht nebeneinander. */
  .si-adresskarte { flex-direction: column; max-width: none; }
  .si-adresskarte-bild { width: 100%; height: 150px; }
  .si-adresskarte-aktionen { margin-top: var(--space-2); }

  .si-hero-knoepfe > * { flex: 1 1 auto; }
  .si-hero-knoepfe > * > * { width: 100%; }

  .si-fuss { padding-top: var(--space-16); }
  .si-fuss-unten { margin-top: var(--space-10); }
}

/* ---------- Sehr schmale Geraete (iPhone SE und aehnlich) ---------------- */

@media (max-width: 400px) {
  /* Gesperrte Versalien sind der Engpass: „MEHMETS" mit .26em Laufweite und
     „RIELASINGEN-WORBLINGEN" sind bei 320px breiter als der Bildschirm
     (gemessen: 9px Ueberstand). Kleiner setzen und die Sperrung
     zuruecknehmen — der Charakter bleibt, der Ueberstand verschwindet. */
  .si-hero-mehmets { font-size: 15px; letter-spacing: .16em; }
  .si-eyebrow { font-size: 10px; letter-spacing: .1em; }
  .si-hero-extra { font-size: 22px; }
  .si-hero-zeile { gap: var(--space-2); }

  /* Der Punkt zwischen Ort und Zeiten faellt weg, wenn beides umbricht. */
  .si-punkt { display: none; }

  /* Die beiden Aufmacher-Knoepfe untereinander statt nebeneinander. */
  .si-hero-knoepfe { flex-direction: column; align-items: stretch; }
}

/* ---------- Ruhigere Bewegung ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Drucken ------------------------------------------------------ */

@media print {
  .si-kopf, .si-fuss, .si-toast-schacht, .si-hero-knoepfe { display: none; }
  .si-pass-abschnitt, .si-fuss { background: #fff; color: #000; }
}