/* ============================================================
   MIQAT – Stylesheet
   1. Schriften        2. Farben/Variablen   3. Sprachschaltung
   4. Grundgeruest     5. Kopf/Menue         6. Bausteine
   7. Fuss/Cookie      8. Mobil
   ============================================================ */

/* --- 1. Schriften (selbst gehostet, keine Google-Server) ----- */
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant-garamond-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant-garamond-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- 2. Variablen ------------------------------------------- */
:root {
  --gruen:      #12332B;
  --gruen-tief: #0B211C;
  --gold:       #B08A44;   /* nur Deko: Linien, Sterne, Symbole */
  --gold-text:  #7D6130;   /* Text und Knöpfe – 4,5:1 auf allen hellen Flächen */
  --gold-marke: #C69C6B;   /* Markenton des Kunden, nur fuer das Logo */
  --gold-hell:  #D8BC86;
  --sand:       #F7F2E9;
  --sand-tief:  #EDE4D5;
  --tinte:      #1C1B18;
  --grau:       #6A665E;
  --weiss:      #FFFFFF;

  --serif: 'Cormorant', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --breite: 1180px;
  --luft:   clamp(3rem, 7vw, 6.5rem);
}

/* --- 3. Sprach- und Stufenschaltung --------------------------
   Sichtbar ist, was zur aktiven Sprache passt. Elemente OHNE
   data-lang (Bilder, Zahlen, Originalzitate) bleiben immer da.
   Neue Sprache? Nichts aendern, die Regel gilt automatisch.   */
html[data-lang="de"] [data-lang]:not([data-lang="de"]),
html[data-lang="fr"] [data-lang]:not([data-lang="fr"]),
html[data-lang="en"] [data-lang]:not([data-lang="en"]) { display: none !important; }

/* Sprachstufe: "einfach" wird erst sichtbar, wenn sie aktiv ist */
html[data-stufe="normal"]  [data-stufe="einfach"] { display: none !important; }
html[data-stufe="einfach"] [data-stufe="normal"]  { display: none !important; }

/* --- 4. Grundgeruest ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  /* Kurze Seiten: der Fußbereich soll am unteren Fensterrand
     kleben, sonst scheint darunter die Seitenfarbe durch. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sand);
  color: var(--tinte);
  font: 400 clamp(1rem, .96rem + .2vw, 1.075rem)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem); letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.7rem); }
p  { margin: 0 0 1.1em; max-width: 68ch; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gruen); color: var(--sand); padding: .8rem 1.2rem;
}
.sprungmarke:focus { left: 0; }

main { flex: 1 0 auto; }
.fuss { flex: none; }

.bahn { max-width: var(--breite); margin-inline: auto; padding-inline: clamp(1.2rem, 5vw, 3rem); }
.abschnitt { padding-block: var(--luft); }
.abschnitt--gruen { background: var(--gruen); color: var(--sand); }
/* Für Abschnitte, die sich absetzen sollen */
.abschnitt--sand { background: var(--sand-tief); }
.abschnitt--sand h2 { color: var(--gruen); }
.abschnitt--gruen h2 { color: var(--gold-hell); }

.knopf {
  display: inline-block; font: 600 .95rem/1 var(--sans);
  padding: 1rem 1.9rem; border-radius: 2px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s;
}
.knopf--voll   { background: var(--gold-text); color: #FFF; }
.knopf--voll:hover { background: #634C26; }
.knopf--rand   { background: transparent; border-color: currentColor; }
.knopf--rand:hover { background: rgba(176,138,68,.14); }
.knopf--schlicht { background: transparent; color: inherit; text-decoration: underline; }
.alsLink { background: none; border: 0; padding: 0; font: inherit; color: inherit;
           text-decoration: underline; cursor: pointer; }

/* --- 5. Kopf und Menue -------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,242,233,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sand-tief);
}
.kopf__innen {
  max-width: var(--breite); margin-inline: auto;
  padding: .9rem clamp(1.2rem, 5vw, 3rem);
  display: flex; align-items: center; gap: 2rem;
}
.marke {
  margin-right: auto; display: inline-flex; align-items: center; gap: .65rem;
  text-decoration: none; color: var(--gruen);
}
.marke__zeichen { width: 1.55rem; height: 1.85rem; color: var(--gold-marke); flex: none; }
.marke__wort {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.55rem; letter-spacing: .2em; line-height: 1;
}
.marke--hell { margin: 0 0 1.2rem; color: var(--sand); }
.marke--hell .marke__zeichen { color: var(--gold-hell); }

.menue { display: flex; align-items: center; gap: 2.2rem; }
.menue__liste, .sprachwahl, .fuss__liste, .fuss__sozial {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem;
}
.menue__liste a { text-decoration: none; font-size: .95rem; padding-block: .4rem; }
.menue__liste a:hover { color: var(--gold); }

.sprachwahl { gap: .1rem; align-items: center; }
.sprachwahl a {
  text-decoration: none; font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  padding: .35rem .55rem; color: var(--grau);
}
.sprachwahl a[aria-current] { color: var(--gruen); border-bottom: 2px solid var(--gold); }

.menue-schalter { display: none; }

/* --- 6. Bausteine ------------------------------------------- */
.buehne { position: relative; min-height: 78vh; display: grid; align-items: end;
          color: var(--sand); background: var(--gruen-tief); overflow: hidden; }
.buehne__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.buehne__innen { position: relative; max-width: var(--breite); margin-inline: auto; width: 100%;
                 padding: clamp(4rem, 12vw, 9rem) clamp(1.2rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem); }
.buehne h1 { max-width: 14ch; }
.buehne p { max-width: 52ch; font-size: 1.1rem; }
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.karten { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 3rem; }
.karte { background: var(--weiss); padding: 2rem; display: flex; flex-direction: column; }
.karte img { margin-bottom: 1.4rem; }
.karte h3 { color: var(--gruen); }
.karte p { flex: 1; color: var(--grau); font-size: .97rem; }
.karte a { margin-top: 1.2rem; color: var(--gold-text); font-weight: 600; text-decoration: none; }
.karte a:hover { text-decoration: underline; }

/* Mosaikraster: vier Spalten, vier Reihen, unterschiedlich grosse
   Kacheln. Die Zuordnung laeuft ueber die Reihenfolge im HTML,
   die Bilder fuellen ihre Zelle formatfuellend aus. */
.galerie {
  display: grid; gap: .8rem; margin-top: 3rem;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  aspect-ratio: 16 / 10;
}
.galerie img { width: 100%; height: 100%; object-fit: cover; }

.galerie img:nth-child(1) { grid-column: 1;     grid-row: 1; }        /* Kaaba-Tür      */
.galerie img:nth-child(2) { grid-column: 2 / 4; grid-row: 1 / 3; }    /* Masjid al-Haram */
.galerie img:nth-child(3) { grid-column: 4;     grid-row: 1 / 3; }    /* Sonnenschirme   */
.galerie img:nth-child(4) { grid-column: 1;     grid-row: 2 / 5; }    /* Minarett        */
.galerie img:nth-child(5) { grid-column: 2 / 4; grid-row: 3 / 5; }    /* Hotelzimmer     */
.galerie img:nth-child(6) { grid-column: 4;     grid-row: 3 / 5; }    /* Mekka am Abend  */

/* Schmale Fenster: zweispaltiges Mauerwerk.
   Das feste Raster von oben würde hier Löcher lassen, weil die
   Kacheln unterschiedlich viele Zeilen belegen. Mit Spalten
   stapeln sich die Bilder in ihrer natürlichen Höhe und füllen
   sich lückenlos auf. */
@media (max-width: 720px) {
  .galerie {
    display: block;
    columns: 2;
    column-gap: .8rem;
    grid-template-columns: none;
    grid-template-rows: none;
    aspect-ratio: auto;
  }
  .galerie img {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
    height: auto;
    aspect-ratio: auto;          /* natürliches Seitenverhältnis */
    object-fit: fill;
    margin-bottom: .8rem;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: block;
  }
}

/* Sehr schmale Geräte: eine Spalte, sonst werden die Bilder
   zu Briefmarken. */
@media (max-width: 400px) {
  .galerie { columns: 1; }
}

.stimmen { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 3rem; }
.stimme { background: var(--weiss); border: 1px solid var(--sand-tief); padding: 1.8rem; }
.stimme p { font-size: .95rem; color: var(--grau); }
.stimme cite { font-style: normal; font-weight: 600; font-size: .9rem; color: var(--gruen); }
.stimme .sterne { color: var(--gold-text); }
.abschnitt--gruen .stimme { background: rgba(255,255,255,.06); border-color: rgba(216,188,134,.25); }
.abschnitt--gruen .stimme p { color: inherit; }
.abschnitt--gruen .stimme cite, .abschnitt--gruen .sterne { color: var(--gold-hell); }
.stimme[lang="ar"] { direction: rtl; text-align: right; }
.sterne { color: var(--gold-hell); letter-spacing: .15em; margin-bottom: .8rem; }

.zweispalt { display: grid; gap: clamp(2rem, 6vw, 4.5rem); grid-template-columns: 1fr 1fr; align-items: center; }
.zweispalt img { aspect-ratio: 4/5; object-fit: cover; }

/* Formular */
.formular { display: grid; gap: 1.1rem; max-width: 620px; margin-top: 2.5rem; }
.feld { display: grid; gap: .4rem; }
.feld label { font-size: .85rem; font-weight: 600; }
.feld input, .feld textarea {
  font: inherit; padding: .85rem 1rem; border: 1px solid var(--sand-tief);
  background: var(--weiss); border-radius: 2px; width: 100%;
}
.feld textarea { min-height: 160px; resize: vertical; }
.feld--zwei { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.zustimmung { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; }
.honig { position: absolute; left: -9999px; }
.meldung { padding: 1rem 1.2rem; border-left: 3px solid var(--gold); background: var(--sand-tief); }
.meldung--fehler { border-color: #A33; }

/* Karte erst nach Einwilligung */
.karteHalter { position: relative; aspect-ratio: 16/9; background: var(--sand-tief);
               display: grid; place-items: center; text-align: center; padding: 2rem; }
.karteHalter iframe { width: 100%; height: 100%; border: 0; }

/* --- 7. Fuss und Cookie-Banner ------------------------------ */
.fuss { background: var(--gruen-tief); color: var(--sand); padding-block: var(--luft) 2rem; }
.fuss__innen { max-width: var(--breite); margin-inline: auto; padding-inline: clamp(1.2rem, 5vw, 3rem);
               display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fuss__titel { font-size: 1.1rem; color: var(--gold-hell); }
.fuss__satz, .fuss__adresse { font-size: .92rem; color: #CFC7B7; font-style: normal; line-height: 1.9; }
.fuss__liste, .fuss__sozial { flex-direction: column; gap: .5rem; font-size: .92rem; }
.fuss__sozial { margin-top: 1.5rem; }
.fuss a { color: #CFC7B7; }
/* Bündig mit den Spalten darüber: gleiche Breite, gleiche Innenabstände */
.fuss__zeile {
  max-width: var(--breite);
  margin: 3rem auto 0;
  padding-inline: clamp(1.2rem, 5vw, 3rem);
  text-align: left;
  font-size: .82rem;
  color: #8E887C;
}

.cookie { position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
          background: var(--weiss); border-top: 3px solid var(--gold);
          box-shadow: 0 -8px 40px rgba(0,0,0,.18); }
.cookie[hidden] { display: none; }
.cookie__innen { max-width: 900px; margin-inline: auto; padding: 1.6rem clamp(1.2rem, 5vw, 2rem) 1.8rem; }
.cookie__titel { font-size: 1.3rem; margin-bottom: .4rem; }
.cookie__text { font-size: .92rem; }
.cookie__wahl { display: flex; gap: .6rem; align-items: center; font-size: .92rem; margin-bottom: 1.2rem; }
.cookie__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* --- 8. Mobil ----------------------------------------------- */
@media (max-width: 860px) {
  .menue-schalter {
    display: flex; align-items: center; gap: .5rem; background: none; border: 0;
    font: 600 .9rem var(--sans); cursor: pointer; padding: .5rem;
    /* iOS färbt Schaltflächen sonst in seinem Systemblau. Farbe und
       Darstellung deshalb ausdrücklich selbst setzen. */
    color: var(--gruen);
    -webkit-appearance: none; appearance: none;
  }
  .menue-schalter__balken { width: 22px; height: 2px; background: currentColor; position: relative; }
  .menue-schalter__balken::before, .menue-schalter__balken::after {
    content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
  }
  .menue-schalter__balken::before { top: -7px; }
  .menue-schalter__balken::after  { top:  7px; }

  .menue {
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 1.2rem;
    background: var(--sand); border-bottom: 1px solid var(--sand-tief);
    padding: 1.5rem clamp(1.2rem, 5vw, 3rem) 2rem;
  }
  .menue[hidden] { display: none; }
  .menue__liste { flex-direction: column; gap: 1rem; font-size: 1.1rem; }
  .zweispalt, .feld--zwei { grid-template-columns: 1fr; }
  .buehne { min-height: 70vh; }
}

@media (min-width: 861px) {
  .menue[hidden] { display: flex; }   /* Desktop: Menue immer sichtbar */
}

/* ============================================================
   9. Hajj-Unterseite: Vorteile, Bilderstreifen, Reiter, FAQ
   ============================================================ */

[hidden] { display: none !important; }

.hajj-kopf { display: grid; gap: clamp(2rem, 6vw, 4.5rem); grid-template-columns: 1fr 1fr; align-items: start; }
.hajj-kopf h1 { font-size: clamp(3rem, 2rem + 5vw, 5.5rem); letter-spacing: .01em; }
.hajj-kopf p { color: var(--grau); }

.vorteile { background: var(--weiss); padding: clamp(1.6rem, 4vw, 2.4rem); }
.vorteile h2 { font-size: 1.5rem; color: var(--gruen); }
.vorteile__liste { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 1rem; }
.vorteile__liste li { position: relative; padding-left: 1.9rem; font-size: .95rem; line-height: 1.55; }
.vorteile__liste li::before {
  content: '+'; position: absolute; left: 0; top: -.05em;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--gold); color: #fff;
  font: 600 .85rem/1.25rem var(--sans); text-align: center;
}

/* Bilderstreifen – ohne Fremdbibliothek, mit Wischen und Tastatur */
.streifen-halter { padding-top: 0; }
.streifen {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 1rem;
  scrollbar-width: thin; scrollbar-color: var(--gold) transparent;
}
.streifen img {
  scroll-snap-align: center; flex: 0 0 auto;
  max-height: min(70vh, 620px); width: auto; border-radius: 2px;
}
/* Rollbalken ausblenden, gesteuert wird ueber die Knoepfe */
.streifen { scrollbar-width: none; }
.streifen::-webkit-scrollbar { display: none; }

.streifen__knoepfe {
  display: flex; gap: 1rem; justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.streifen__knopf {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  background: var(--weiss); color: var(--gold-text); cursor: pointer;
  border: 1px solid var(--sand-tief); border-radius: 50%;
  transition: background .18s, color .18s, border-color .18s;
}
.streifen__knopf svg { width: 1.35rem; height: 1.35rem; }
.streifen__knopf:hover { background: var(--gold-text); color: #fff; border-color: var(--gold); }
.streifen__knopf[disabled] { opacity: .35; cursor: default; }
.streifen__knopf[disabled]:hover { background: var(--weiss); color: var(--gold); border-color: var(--sand-tief); }

/* Nur fuer Vorleseprogramme sichtbar */
.nurLeser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Reiter über der FAQ */
.reiter { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 2.5rem 0 1.5rem; }
.reiter__knopf {
  font: 600 .9rem/1.35 var(--sans); text-align: center; cursor: pointer;
  padding: .9rem 1rem; border: 1px solid var(--gold); border-radius: 2px;
  background: transparent; color: var(--grau); transition: background .2s, color .2s;
}
.reiter__knopf[aria-selected="true"] { background: var(--gold-text); color: #fff; border-color: var(--gold-text); }
.reiter__knopf:hover { color: var(--gruen); }
.reiter__knopf[aria-selected="true"]:hover { color: #fff; }

/* Ausklappbare Fragen – ohne JavaScript bedienbar */
.faq-gruppe { display: grid; gap: .8rem; }
.faq { background: var(--weiss); border: 1px solid var(--sand-tief); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.3rem;
  font-weight: 600; font-size: 1rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 1.3rem; top: 1.5rem;
  width: .55rem; height: .55rem; border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold); transform: rotate(45deg);
  transition: transform .2s;
}
.faq[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.faq__text { padding: 0 1.3rem 1.3rem; }
.faq__text p:last-child, .faq__text ul:last-child, .faq__text ol:last-child { margin-bottom: 0; }
.faq__text ul, .faq__text ol { margin: 0 0 1em; padding-left: 1.3rem; }
.faq__text li { margin-bottom: .4rem; }
.faq__text a { color: var(--gold-text); }

@media (max-width: 860px) {
  .hajj-kopf { grid-template-columns: 1fr; }
  .streifen img { max-height: 60vh; }
}

/* ============================================================
   10. Rechtstexte (Impressum, Datenschutz, AGB)
   ============================================================ */
.recht h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); margin-top: 2.8rem; color: var(--gruen); }
.recht h2 + p, .recht h2 + ul { margin-top: 0; }
.recht ul { max-width: 68ch; padding-left: 1.2rem; }
.recht li { margin-bottom: .45rem; }
.recht a { color: var(--gold-text); overflow-wrap: anywhere; }
.recht .meldung { max-width: 68ch; }
.stand { margin-top: 3rem; font-size: .85rem; color: var(--grau); }

.tabelle { width: 100%; max-width: 760px; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: .92rem; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: .7rem .9rem; border-bottom: 1px solid var(--sand-tief); }
.tabelle th { font-weight: 600; background: var(--weiss); }
.tabelle td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; white-space: nowrap; }

@media (max-width: 600px) {
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle thead { display: none; }
  .tabelle tr { border-bottom: 1px solid var(--sand-tief); padding: .6rem 0; }
  .tabelle td { border: 0; padding: .2rem 0; }
}

/* Lange Rechtstexte: Zwischenüberschriften und Absätze */
.recht__text h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 2rem 0 .6rem; }
.recht__text p, .recht__text li { font-size: .95rem; }
.recht__text > p:first-of-type { max-width: 68ch; }
.recht .meldung--fehler { border-left-color: var(--gold); background: var(--sand-tief); }

/* ============================================================
   11. Vollflächiger Abschnitt mit Text im Bild
   ============================================================ */
.vollbild {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: clamp(460px, 78vh, 820px);
  overflow: hidden;
  background: var(--sand);
}
.vollbild__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* wueste.webp ist oben freigestellt. Die Hintergrundfarbe gehört
     auf das Bild selbst und muss dem Abschnitt darüber entsprechen –
     dann geht die Düne ohne sichtbare Kante daraus hervor.
     object-position verankert das Motiv oben, sonst wandert die
     freigestellte Kante je nach Fensterhöhe aus dem Bild. */
  background: var(--sand);
  object-position: 50% 0%;
}
/* Abdunklung nach unten, damit der Text lesbar bleibt. Ohne sie
   steht Weiß auf hellem Sand – das ist im Original kaum zu lesen. */
.vollbild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,25,21,.78) 0%, rgba(12,25,21,.45) 32%, rgba(12,25,21,0) 62%);
}
.vollbild__innen {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--breite);
  margin-inline: auto;
  padding: 0 clamp(1.2rem, 5vw, 3rem) clamp(2.5rem, 6vw, 4.5rem);
  color: #fff;
}
.vollbild__innen h2 { color: #fff; }
.vollbild__innen p { max-width: 56ch; color: rgba(255,255,255,.92); margin-bottom: 0; }

/* Auf dem Handy Bild und Text untereinander – Text im Bild wäre
   dort entweder winzig oder würde das halbe Motiv verdecken. */
@media (max-width: 720px) {
  .vollbild { min-height: 0; display: block; background: var(--sand); }
  .vollbild__bild { position: static; height: clamp(240px, 52vw, 380px); }
  .vollbild::after { display: none; }
  .vollbild__innen { color: var(--tinte); padding-block: 2rem; }
  .vollbild__innen h2 { color: var(--gruen); }
  .vollbild__innen p { color: var(--grau); }
}

/* ============================================================
   12. Umrah-Reisen (Gold / V.I.P.)
   ============================================================ */
.reise__einleitung { max-width: 62ch; margin-inline: auto; color: var(--grau); }

.reise__raster { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr 1fr; align-items: start; }
.reise__spalte h3 { color: var(--gruen); margin-bottom: .8rem; }

.reise__zeitraum { display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: var(--grau); }
.reise__zeitraum svg { width: 1.15rem; height: 1.15rem; fill: var(--gold); flex: none; }

.reise__leistungen, .vorteile__liste { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .75rem; }
.reise__leistungen li, .vorteile__liste li { position: relative; padding-left: 1.7rem; font-size: .95rem; line-height: 1.55; }
.reise__leistungen li::before, .vorteile__liste li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold);
}

.reise__fluege { margin-bottom: 1.4rem; }
.reise__fluege summary { font-size: .95rem; }
.tabelle--flug td:first-child { white-space: nowrap; }
.tabelle--flug td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

.reise__versicherung a { color: var(--gold-text); font-style: italic; font-size: .92rem; }
.trennstrich { border: 0; border-top: 1px solid var(--sand-tief); margin: 2rem 0; }
.reise__untertitel { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; color: var(--gruen); margin: 0 0 1rem; }
.reise__hinweis { font-size: .82rem; font-style: italic; color: var(--grau); }

.reise__bild img { width: 100%; height: auto; border-radius: 2px; }

.preise { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 2rem; }
.preis__label { font-size: .85rem; color: var(--grau); margin-bottom: .2rem; }
.preis__betrag { font-family: var(--serif); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1.1; margin-bottom: .4rem; color: var(--gruen); }
.preis__text { font-size: .88rem; color: var(--grau); margin: 0 auto; max-width: 24ch; }

/* Goldenes Band zwischen den Reisen */
.reise__band { height: 3.5rem; background: var(--gold); }
.reise:last-of-type .reise__band { display: none; }

@media (max-width: 860px) {
  .reise__raster { grid-template-columns: 1fr; }
  .reise__bild { order: -1; }
}

/* Zwei versetzte Bilder auf der V.I.P.-Seite */
.bildpaar { position: relative; padding-bottom: 3.5rem; }
.bildpaar__gross { width: 100%; height: auto; }
.bildpaar__klein {
  position: absolute; left: 0; bottom: 0;
  width: clamp(140px, 30%, 220px); height: auto;
  border: 6px solid var(--sand);
}
@media (max-width: 860px) { .bildpaar { padding-bottom: 2.5rem; } }

/* ============================================================
   13. Anmeldeformular und Verwaltung
   ============================================================ */
.anmeldung { margin-top: 2.5rem; max-width: 860px; }
.schritt { border: 0; padding: 0; margin: 0 0 2rem; }
.schritt legend { padding: 0; margin-bottom: 1.4rem; font-family: var(--serif); font-size: 1.5rem; color: var(--gruen); }
.schritt__zahl {
  display: inline-block; margin-right: .7rem; padding: .15rem .6rem;
  background: var(--gold-text); color: #fff; border-radius: 2px;
  font: 600 .75rem/1.6 var(--sans); vertical-align: .18em;
}
.feldgruppe { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.feld--breit { grid-column: 1 / -1; }
.feld__hinweis { font-size: .8rem; color: var(--grau); margin: .1rem 0 0; }
.feld select { font: inherit; padding: .85rem 1rem; border: 1px solid var(--sand-tief); background: var(--weiss); border-radius: 2px; width: 100%; }
.feld [aria-invalid="true"] { border-color: #A33; }
.anmeldung__steuerung { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1rem; }

/* Verwaltung */
.anmeldeblock { max-width: 460px; margin-top: 2.5rem; }
.eintrag { background: var(--weiss); border: 1px solid var(--sand-tief); margin-bottom: .8rem; }
.eintrag summary { cursor: pointer; padding: 1rem 1.3rem; font-weight: 600; }
.eintrag__inhalt { padding: 0 1.3rem 1.3rem; }
.eintrag__zeile { display: grid; grid-template-columns: 15rem 1fr; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--sand-tief); font-size: .92rem; }
.eintrag__zeile dt { color: var(--grau); }
.eintrag__zeile dd { margin: 0; }
.kopfleiste { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }

@media (max-width: 720px) {
  .feldgruppe { grid-template-columns: 1fr; }
  .eintrag__zeile { grid-template-columns: 1fr; gap: .1rem; }
}

/* ============================================================
   14. Blog
   ============================================================ */
.blog-kopf { display: grid; gap: clamp(1.5rem, 5vw, 4rem); grid-template-columns: 1fr 1.2fr; align-items: start; }
.blog-kopf h1 { margin: 0; }
.blog-kopf p { color: var(--grau); margin: 0; }

.beitraege { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 2.5rem; }
.beitrag { display: flex; flex-direction: column; }
.beitrag__link { text-decoration: none; color: inherit; }
.beitrag__bild { width: 100%; aspect-ratio: 3/2; object-fit: cover; margin-bottom: 1rem; }
.beitrag__bild--leer { display: block; background: var(--sand-tief); }
.beitrag__titel { font-size: 1.2rem; line-height: 1.3; color: var(--gruen); margin-bottom: .5rem; }
.beitrag__link:hover .beitrag__titel { color: var(--gold-text); }
.beitrag__auszug { font-size: .92rem; color: var(--grau); flex: 1; margin-bottom: .6rem; }
.beitrag__datum { font-size: .82rem; color: var(--grau); margin: 0; }

.blaettern { display: flex; gap: .4rem; justify-content: center; margin-top: 3rem; }
.blaettern a, .blaettern__aktiv {
  min-width: 2.4rem; text-align: center; padding: .5rem .3rem;
  border: 1px solid var(--sand-tief); text-decoration: none; font-size: .9rem;
}
.blaettern__aktiv { background: var(--gold-text); color: #fff; border-color: var(--gold-text); }

/* Artikel */
.artikel .bahn { max-width: 780px; }
.artikel h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
.artikel__kopfzeile { display: flex; gap: .6rem; align-items: center; font-size: .9rem; color: var(--grau); }
.artikel__autor { font-weight: 600; color: var(--gruen); }
.artikel__aufmacher { margin: 2rem 0; }
.artikel__aufmacher img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.artikel__aufmacher figcaption { font-size: .82rem; color: var(--grau); margin-top: .5rem; }

.inhaltsverzeichnis { background: var(--sand-tief); padding: 1.4rem 1.6rem; margin: 2rem 0; }
.inhaltsverzeichnis__titel { font-weight: 600; margin-bottom: .6rem; }
.inhaltsverzeichnis ul { list-style: none; margin: 0; padding: 0; }
.inhaltsverzeichnis li { margin-bottom: .35rem; font-size: .92rem; }
.inhaltsverzeichnis li.ebene3 { padding-left: 1.2rem; }
.inhaltsverzeichnis a { color: var(--gruen); }

.artikel__text h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: 2.5rem; color: var(--gruen); }
.artikel__text h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; margin: 1.8rem 0 .5rem; }
.artikel__text p, .artikel__text li { max-width: 68ch; }
.artikel__text ul, .artikel__text ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.artikel__text li { margin-bottom: .4rem; }
.artikel__text blockquote {
  margin: 1.5rem 0; padding: .3rem 0 .3rem 1.3rem;
  border-left: 3px solid var(--gold); font-family: var(--serif); font-size: 1.2rem;
}
.artikel__bild { margin: 2rem 0; }
.artikel__bild img { width: 100%; height: auto; }
.artikel__bild figcaption { font-size: .82rem; color: var(--grau); margin-top: .5rem; }
.artikel__abschluss { margin-top: 3rem; padding: 2rem; background: var(--gruen); color: var(--sand); }
.artikel__abschluss p { color: inherit; }

.schreibfeld { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; line-height: 1.6; min-height: 24rem; }
.spickzettel { background: var(--sand-tief); padding: 1rem 1.2rem; overflow-x: auto; font-size: .82rem; line-height: 1.6; }

@media (max-width: 720px) { .blog-kopf { grid-template-columns: 1fr; } }

/* Bilderliste im Blog-Editor */
/* Bei vielen Bildern rollt die Liste in sich selbst, statt die
   Seite endlos lang zu machen. */
.bilderliste {
  list-style: none; margin: 0 0 1.5rem; padding: .4rem .4rem .4rem 0;
  display: grid; gap: .6rem; align-content: start;
  max-height: 24rem; overflow-y: auto;
  border: 1px solid var(--sand-tief);
  scrollbar-width: thin; scrollbar-color: var(--gold) transparent;
}
.bilderliste li[hidden] { display: none; }
.bilderliste__leer { padding: 1rem; color: var(--grau); font-size: .9rem; }
.bilderliste li { display: flex; align-items: center; gap: .8rem; }
.bilderliste img { width: 72px; height: 48px; object-fit: cover; flex: none; background: var(--sand-tief); }
.bilderliste code {
  font-size: .82rem; background: var(--sand-tief); padding: .35rem .6rem;
  cursor: pointer; overflow-wrap: anywhere;
}
.bilderliste code:hover { background: var(--gold-hell); }

/* Abzeichen und Newsletter im Fußbereich */
.fuss__abzeichen { display: flex; gap: 1rem; margin-top: 1.6rem; }
.fuss__abzeichen img { width: 88px; height: 88px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; }

.nlform { display: grid; gap: .8rem; margin-top: 1rem; }
.nlform input[type="email"] {
  font: inherit; padding: .8rem .9rem; width: 100%;
  border: 1px solid rgba(216,188,134,.4); border-radius: 2px;
  background: rgba(255,255,255,.06); color: var(--sand);
}
.nlform input[type="email"]::placeholder { color: #8E887C; }
.nlform__wahl { font-size: .82rem; color: #CFC7B7; align-items: flex-start; }
.nlform__wahl a { color: var(--gold-hell); }
.nlform .knopf { justify-self: start; }

@media (max-width: 860px) { .fuss__abzeichen img { width: 72px; height: 72px; } }

/* ============================================================
   15. Bühne über die volle Fensterhöhe, Scroll-Hinweis,
       Knopf nach oben
   ============================================================ */

/* --kopfhoehe wird von js/seite.js gesetzt; der Wert hier ist
   nur die Rückfallebene, falls JavaScript aus ist. */
.buehne--voll { min-height: calc(100vh - var(--kopfhoehe, 4.4rem)); }
@supports (height: 100dvh) {
  .buehne--voll { min-height: calc(100dvh - var(--kopfhoehe, 4.4rem)); }
}

.weiterhinweis {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  color: rgba(255,255,255,.9); text-decoration: none;
  font: 600 .72rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  transition: opacity .4s;
}
.weiterhinweis svg { width: 1.6rem; height: 1.6rem; animation: wippen 1.8s ease-in-out infinite; }
.weiterhinweis:hover { color: #fff; }
.weiterhinweis[data-weg] { opacity: 0; pointer-events: none; }

@keyframes wippen {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

.nachoben {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60; width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center; cursor: pointer;
  background: var(--gold-text); color: #fff; border: 0; border-radius: 2px;
  box-shadow: 0 6px 20px rgba(12,25,21,.25);
  opacity: 0; transform: translateY(.5rem);
  transition: opacity .3s, transform .3s, background .2s;
}
.nachoben[hidden] { display: none; }
.nachoben[data-da] { opacity: 1; transform: translateY(0); }
.nachoben:hover { background: #634C26; }
.nachoben svg { width: 1.2rem; height: 1.2rem; }

/* Wer Animationen abbestellt hat, bekommt keine */
@media (prefers-reduced-motion: reduce) {
  .weiterhinweis svg { animation: none; }
  .nachoben { transition: none; }
}

/* Auf dem Handy und auf niedrigen Fenstern kommt der Hinweis den
   Knöpfen ins Gehege – dort lassen wir ihn weg. Zum Scrollen
   wischt man ohnehin, der Hinweis ist eine Maus-Geste. */
@media (max-width: 720px), (max-height: 620px) {
  .weiterhinweis { display: none; }
}


/* ============================================================
   16. Bedienflächen groß genug für Finger
   ------------------------------------------------------------
   Ankreuzfelder sind im Browser nur 13 Pixel groß. Verlangt sind
   mindestens 24 – und mit dem Finger trifft man 13 Pixel ohnehin
   nicht zuverlässig.
   ============================================================ */
input[type="checkbox"], input[type="radio"] {
  width: 1.5rem; height: 1.5rem; flex: none; margin: 0;
  accent-color: var(--gold-text); cursor: pointer;
}
.zustimmung, .cookie__wahl { gap: .8rem; align-items: flex-start; line-height: 1.5; }
.zustimmung span, .cookie__wahl span { padding-top: .2rem; }

/* Sprachumschalter und Inhaltsverzeichnis: genug Fläche und Abstand */
.sprachwahl a { padding: .55rem .6rem; min-width: 2.6rem; text-align: center; }
.inhaltsverzeichnis li { margin-bottom: 0; }
.inhaltsverzeichnis a { display: inline-block; padding: .35rem 0; }

/* Fußlinks nicht zu dicht aneinander */
.fuss__liste li, .fuss__sozial li { line-height: 1.4; }
.fuss__liste a, .fuss__sozial a, .fuss__adresse a { display: inline-block; padding: .3rem 0; }
.alsLink { padding: .3rem 0; }