/* =========================================================================
   SAGA OF DILMUN — DAS NEUE GESICHT (Entwurf vom 28. Oktober, gebaut 29.)
   Liegt ÜBER stil.css: stil.css trägt weiter den Aufbau jeder Unterseite
   (Formulare, Hilfe, Roadmap, Patchnotes …), diese Datei gibt allem die
   Farben, Schriften und Formen des Entwurfs — Mint und Gold auf fast Schwarz,
   Syne für Überschriften, Manrope für Text. Schriften liegen auf dem eigenen
   Server (schrift/), nichts wird von fremden Servern geladen.
   ========================================================================= */
@font-face{font-family:'Manrope';src:url('../schrift/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Manrope';src:url('../schrift/manrope-ext.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:'Syne';src:url('../schrift/syne.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Syne';src:url('../schrift/syne-ext.woff2') format('woff2');font-weight:400 800;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}

:root{
  /* die Namen von stil.css, die Werte des Entwurfs */
  --tinte:#050807; --stein:#0A1210; --stein2:#0F1915; --linie:#22332B;
  --bronze:#C9964F; --gold:#D6A35C; --sand:#B9C1B7; --text:#B9C1B7; --hell:#ECE6D6;
  --rot:#c0563f; --gruen:#58D68D;
  --mint:#6FE3B4; --gold2:#F0C47E; --dim:#7E8A82; --kopf:64px;
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 12px)}
body{background:var(--tinte);color:var(--hell);font-family:'Manrope',system-ui,sans-serif;font-size:17px;line-height:1.62}
p{color:var(--sand)}
h1,h2,h3,h4{font-family:'Syne','Manrope',sans-serif;color:var(--hell);letter-spacing:.01em}
h1{text-transform:none;letter-spacing:.02em;font-weight:800}
h2{font-weight:700;font-size:clamp(1.8rem,4.4vw,3rem);line-height:1.1}
h3{color:var(--hell);font-weight:700}
a{color:var(--mint)}
a:hover{color:var(--hell)}
::selection{background:rgba(111,227,180,.28);color:#fff}
section{border-bottom:0;border-top:1px solid rgba(111,227,180,.08);padding:84px 0}
section.dunkel{background:var(--stein)}
.mitte{max-width:1120px}
.kopfzeile .aug,.aug{font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;letter-spacing:4px;color:var(--mint)}
.kopfzeile p{color:var(--sand)}

/* ---- Knöpfe -------------------------------------------------------------- */
.knopf{font-family:'Syne',sans-serif;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  border-radius:12px;border:1px solid rgba(236,230,214,.28);background:transparent;color:var(--hell);
  font-size:13px;padding:12px 20px;transition:transform .2s,box-shadow .25s,background .25s,border-color .25s,color .25s}
.knopf:hover{background:rgba(236,230,214,.06);border-color:rgba(236,230,214,.55);color:#fff;text-decoration:none;transform:translateY(-1px)}
.knopf.voll{background:linear-gradient(180deg,var(--gold2),var(--gold));border-color:transparent;color:#140F06;
  box-shadow:0 6px 24px rgba(214,163,92,.25)}
.knopf.voll:hover{background:linear-gradient(180deg,#f6d494,var(--gold2));color:#140F06;box-shadow:0 8px 30px rgba(214,163,92,.38)}
.knopf.schmal{font-size:12px;padding:10px 16px}
.knopf.grossknopf,.knopf.gross{font-size:15px;padding:17px 30px}
.knopf.blau{border-radius:12px}

/* ---- Flächen -------------------------------------------------------------- */
.karte,.tafel,.form,.mitkarte,.karten .kachel{background:var(--stein2);border:1px solid var(--linie);border-radius:18px}
.karte{overflow:hidden}
.karten .kachel:hover,.karte:hover{border-color:rgba(111,227,180,.35)}
.form input,.form select,.form textarea{background:#08100d;border-radius:10px;border-color:var(--linie);color:var(--hell)}
.form input:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(111,227,180,.14)}
.form label{color:var(--sand)}
.meldung{border-radius:10px;background:rgba(111,227,180,.06)}
.band{border-radius:20px;border:1px solid var(--linie)}
.band .schleier{background:linear-gradient(90deg,rgba(5,8,7,.92),rgba(5,8,7,.35))}
.hinweisschild{border-radius:18px;border-color:rgba(214,163,92,.5);background:var(--stein2)}
.hinweisschild h3{color:var(--gold2)}
.zug{border-color:var(--linie);border-radius:18px;overflow:hidden;background:var(--stein2)}
.zug .schild{background:var(--stein2)}
.zug .schild b{font-family:'Syne',sans-serif;color:var(--gold2)}
.spruch{border-left-color:var(--mint)}
table th{color:var(--mint)}
hr{border-color:var(--linie)}

/* ---- Kopf (ersetzt den alten auf jeder Seite) ----------------------------- */
.nkopf{position:sticky;top:0;z-index:50;background:rgba(5,8,7,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(111,227,180,.12)}
.nkopf .reihe{width:min(1200px,100% - 40px);margin:0 auto;display:flex;align-items:center;gap:24px;height:var(--kopf)}
.nkopf .marke{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;letter-spacing:4px;color:var(--hell);white-space:nowrap;text-transform:uppercase}
.nkopf .marke span{color:var(--gold)}
.nkopf .marke:hover{text-decoration:none;color:#fff}
.nkopf nav.wege{display:flex;gap:22px;margin-left:auto;font-size:14px}
.nkopf nav.wege a{color:var(--sand);position:relative;padding:6px 0}
.nkopf nav.wege a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nkopf nav.wege a:hover,.nkopf nav.wege a.hier{color:var(--hell);text-decoration:none}
.nkopf nav.wege a:hover::after,.nkopf nav.wege a.hier::after{transform:scaleX(1)}
.nkopf .sprache{font-size:13px;letter-spacing:1px;color:var(--dim);white-space:nowrap}
.nkopf .sprache b{color:var(--hell);font-weight:600}
.nkopf .sprache a{color:var(--dim)} .nkopf .sprache a:hover{color:var(--hell)}
.nkopf .knoepfe{display:flex;gap:10px}
.nkopf .menue{display:none;width:40px;height:40px;border:1px solid var(--linie);border-radius:10px;background:none;
  align-items:center;justify-content:center;cursor:pointer;padding:0}
.nkopf .menue i{display:block;width:16px;height:2px;background:var(--hell);box-shadow:0 5px 0 var(--hell),0 -5px 0 var(--hell);transition:transform .3s,box-shadow .3s}
.nkopf.auf .menue i{transform:rotate(45deg);box-shadow:0 0 0 var(--hell)}
@media (max-width:1060px){.nkopf nav.wege{gap:14px;font-size:13px}.nkopf .reihe{gap:16px}}
@media (max-width:900px){
  :root{--kopf:58px}
  .nkopf nav.wege,.nkopf .sprache,.nkopf .knoepfe .rand{display:none}
  .nkopf .menue{display:flex}
  .nkopf .knoepfe{margin-left:auto}
  .nkopf .reihe{gap:12px}
  .nkopf.auf nav.wege{display:flex;position:absolute;left:0;right:0;top:var(--kopf);flex-direction:column;gap:0;margin:0;
    background:rgba(5,8,7,.97);border-bottom:1px solid var(--linie);padding:8px 20px 16px;font-size:16px}
  .nkopf.auf nav.wege a{padding:12px 0;border-bottom:1px solid rgba(111,227,180,.08)}
  .nkopf.auf nav.wege a::after{display:none}
  .nkopf.auf .sprache{display:block;position:absolute;right:20px;top:calc(var(--kopf) + 20px)}
}
@media (max-width:420px){.nkopf .marke{font-size:13px;letter-spacing:3px}}
/* Der alte Kopf stand auf der Startseite fest über dem Bild; der neue ist
   überall gleich, also fällt der Startseiten-Sonderfall weg. */
body.start .kopf{display:none}

/* ---- Fuß ------------------------------------------------------------------ */
footer.nfuss{background:var(--tinte);border-top:1px solid var(--linie);padding:38px 0 30px;font-size:14px;color:var(--dim)}
.nfuss .reihe{width:min(1120px,100% - 40px);margin:0 auto}
.nfuss .wege{display:flex;gap:10px 22px;flex-wrap:wrap}
.nfuss a{color:var(--sand);display:inline}
.nfuss a:hover{color:var(--hell)}
.nfuss .unten{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;margin-top:22px;padding-top:18px;border-top:1px solid rgba(111,227,180,.08);font-size:13px}

/* ---- Bewegung beim Scrollen ---------------------------------------------- */
/* Nur wenn bewegung.js läuft (html.bewegt): ohne Skript, im Druck und bei
   „Bewegung reduzieren" ist alles sofort sichtbar. */
html.bewegt .z{opacity:0;transform:translate3d(0,34px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--zv,0s);will-change:opacity,transform}
html.bewegt .z[data-z="links"]{transform:translate3d(-44px,0,0)}
html.bewegt .z[data-z="rechts"]{transform:translate3d(44px,0,0)}
html.bewegt .z[data-z="zoom"]{transform:scale(.94)}
html.bewegt .z[data-z="blende"]{transform:none}
html.bewegt .z.da{opacity:1;transform:none}
html.bewegt .strichz{position:relative}
html.bewegt .strichz::before{content:"";position:absolute;left:0;top:-14px;height:2px;width:56px;background:linear-gradient(90deg,var(--mint),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .2s}
html.bewegt .strichz.da::before{transform:scaleX(1)}
[data-tiefe]{will-change:transform}
@media (prefers-reduced-motion:reduce){
  html.bewegt .z{opacity:1;transform:none;transition:none}
  [data-tiefe]{transform:none!important}
}
@media print{html.bewegt .z{opacity:1;transform:none}}
.nkopf .menue i{position:relative}
.nkopf.auf .menue i{transform:rotate(45deg);box-shadow:none}
.nkopf.auf .menue i::after{content:"";position:absolute;inset:0;background:var(--hell);transform:rotate(90deg)}
.nkopf nav.wege a.nurhandy{display:none}
@media (max-width:900px){.nkopf.auf nav.wege a.nurhandy{display:block}}