/* =====================================================================
   MAFFOX.DE – STYLESHEET
   Aufbau:  1. Farben & Einstellungen   2. Grundlagen   3. Hintergrund
            4. Header & Footer          5. Startseite   6. Info-Seiten
            7. Admin                    8. Animationen  9. Mobil
   ===================================================================== */


/* ---------- 1. FARBEN & EINSTELLUNGEN (hier zentral ändern) ---------- */
:root {
  /* Deine Markenfarben */
  --kupfer:  #B87333;
  --sienna:  #A0522D;
  --salbei:  #7A8F6A;
  --patina:  #3FA49A;
  --tuerkis: #1FB5B0;
  --blau:    #2A8FBF;

  /* Neutrale Farben für Text und Fläche */
  --text:    #22312e;
  --muted:   #55655f;
  --seite:   #f1f4f3;

  /* Glas-Effekt: Deckkraft, Unschärfe, Rand */
  --glas:        rgba(255, 255, 255, 0.46);
  --glas-rand:   rgba(255, 255, 255, 0.70);
  --glas-blur:   18px;

  --radius: 22px;          /* Rundung der Glasflächen */
  --breite: 1040px;        /* maximale Inhaltsbreite */
}


/* ---------- 2. GRUNDLAGEN ---------- */
[hidden] { display: none !important; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--seite);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
  animation: seiteEin .7s ease both;       /* weiches Einblenden beim Laden */
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: 1.35rem; margin-bottom: .6rem; }
p  { color: var(--muted); max-width: 62ch; }
a  { color: inherit; text-decoration: none; }

.wrap { width: min(var(--breite), 92%); margin-inline: auto; }
main  { padding: 3rem 0 4rem; }

/* Sichtbarer Tastatur-Fokus */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 3px;
}


/* ---------- 3. HINTERGRUND (weiche, wandernde Farbflächen) ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.bg span {
  position: absolute;
  width: 46vmax; height: 46vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .45;
  animation: treiben 28s ease-in-out infinite alternate;
}
.bg span:nth-child(1) { background: var(--kupfer);  top: -18vmax; left: -12vmax; }
.bg span:nth-child(2) { background: var(--tuerkis); bottom: -20vmax; right: -10vmax; animation-delay: -9s; }
.bg span:nth-child(3) { background: var(--blau);    top: 30%; left: 45%; width: 30vmax; height: 30vmax; opacity: .28; animation-delay: -16s; }


/* ---------- 4. HEADER & FOOTER ---------- */
.header {
  position: sticky; top: 0; z-index: 10;
  background: var(--glas);
  backdrop-filter: blur(var(--glas-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(150%);
  border-bottom: 1px solid var(--glas-rand);
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; }
/* Logo in der Kopfzeile – Höhe hier ändern */
.brand { display: block; line-height: 0; }
.brand img { height: 34px; width: auto; }

.nav { display: flex; align-items: center; gap: .4rem; }
.nav a {
  padding: .45rem .9rem; border-radius: 999px;
  color: var(--muted); font-weight: 500;
  transition: background .25s, color .25s;
}
.nav a:hover { background: rgba(255,255,255,.7); color: var(--text); }
.nav a.aktiv { background: rgba(255,255,255,.8); color: var(--sienna); }

/* Sprachumschalter */
.lang { display: flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid var(--glas-rand); }
.lang button {
  border: 0; background: transparent; cursor: pointer;
  padding: .3rem .75rem; border-radius: 999px;
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted);
  transition: background .25s, color .25s;
}
.lang button.aktiv { background: linear-gradient(135deg, var(--patina), var(--blau)); color: #fff; }

.footer { padding: 2rem 0 2.5rem; font-size: .9rem; color: var(--muted); }
.footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer a:hover { color: var(--sienna); }
.footer .links { display: flex; gap: 1.2rem; }
.imp h2 { margin-top: 1.4rem; }
.imp h2:first-child { margin-top: 0; }
.imp a { color: var(--sienna); }
.imp p + p { margin-top: .6rem; }
.imp p { max-width: none; }

/* Rechtstexte: je nach Sprache nur eine Fassung zeigen */
html[lang="de"] .en, html[lang="en"] .de { display: none; }


/* ---------- 5. STARTSEITE ---------- */
.hero { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 2rem; padding: 2rem 0 3rem; }
.hero h1 { animation: hoch .8s both; }
.hero p  { margin: 1rem 0 0; font-size: 1.15rem; animation: hoch .8s .15s both; }

/* Maskottchen: schwebt sanft */
.maskottchen {
  width: min(300px, 100%); justify-self: center;
  filter: drop-shadow(0 22px 22px rgba(160, 82, 45, .28));
  animation: hoch .9s .4s both, schweben 7s 1.4s ease-in-out infinite;
}

/* Discord-Button (auch auf der ARK-Seite genutzt) */
.discord {
  display: inline-block; margin-top: 1.8rem;
  padding: .85rem 2rem; border-radius: 999px;
  font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--patina), var(--blau));
  box-shadow: 0 8px 28px rgba(42, 143, 191, .35);
  transition: transform .3s ease, box-shadow .3s ease;
  animation: hoch .8s .3s both;
}
.discord:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(42, 143, 191, .5); }

/* Zwei große Glasflächen: Minecraft & ARK */
.themen { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; animation: hoch .8s .7s both; }
.thema {
  position: relative; overflow: hidden;
  padding: 2.2rem 10.5rem 2rem 2rem;   /* rechts Platz für das Wappen */
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: var(--radius);
  background: var(--glas); border: 1px solid var(--glas-rand);
  backdrop-filter: blur(var(--glas-blur)); -webkit-backdrop-filter: blur(var(--glas-blur));
  box-shadow: 0 10px 40px rgba(34, 49, 46, .08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.thema::before {                          /* Farbverlauf-Fläche oben rechts */
  content: ""; position: absolute; top: -40%; right: -25%;
  width: 70%; height: 130%; border-radius: 50%;
  filter: blur(40px); opacity: .55; transition: opacity .35s, transform .6s;
}
.thema.mc::before  { background: linear-gradient(135deg, var(--salbei), var(--tuerkis)); }
.thema.ark::before { background: linear-gradient(135deg, var(--kupfer), var(--sienna)); }
.thema:hover { transform: translateY(-5px); box-shadow: 0 18px 50px rgba(34, 49, 46, .14); }
.thema:hover::before { opacity: .8; transform: scale(1.12); }
.thema > * { position: relative; }
/* Wappen oben rechts in der Themenfläche */
.thema .wappen {
  position: absolute; top: 1rem; right: 1.2rem; width: 140px;
  filter: drop-shadow(0 10px 14px rgba(34, 49, 46, .25));
  transition: transform .5s ease;
}
.thema:hover .wappen { transform: rotate(-3deg) scale(1.07); }
.thema h2 { font-size: 1.8rem; margin-bottom: .4rem; }
.mehr { margin-top: 1rem; font-weight: 600; color: var(--sienna); }


/* ---------- 6. INFO-SEITEN (Minecraft / ARK) ---------- */
.kopf { margin-bottom: 2.2rem; animation: hoch .8s both; }
.kopf p { margin-top: 1rem; font-size: 1.1rem; }
.kopf.mit-bild { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.wappen-gross { width: 190px; flex: none; filter: drop-shadow(0 14px 18px rgba(34, 49, 46, .25)); }

.glas {
  background: var(--glas); border: 1px solid var(--glas-rand);
  backdrop-filter: blur(var(--glas-blur)); -webkit-backdrop-filter: blur(var(--glas-blur));
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(34, 49, 46, .08);
  padding: 1.8rem 2rem;
}
.spalten { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; align-items: start; animation: hoch .8s .2s both; }

/* Tabelle mit Server-Daten */
.fakten { display: grid; grid-template-columns: auto 1fr; gap: .7rem 1.5rem; }
.fakten dt { font-weight: 600; }
.fakten dd { color: var(--muted); word-break: break-word; }
.fakten code {
  padding: .15rem .55rem; border-radius: 8px;
  background: rgba(255,255,255,.7); color: var(--sienna);
  font-family: ui-monospace, Consolas, monospace; font-size: .92em;
}

.liste { list-style: none; display: grid; gap: .8rem; }
.liste li { padding-left: 1.4rem; position: relative; color: var(--muted); }
.liste li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--kupfer), var(--tuerkis));
}


/* Coming-soon-Fläche (ARK) */
.soon { animation: hoch .8s .2s both; }
.badge {
  display: inline-block; margin-bottom: .8rem; padding: .3rem 1rem; border-radius: 999px;
  font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--kupfer), var(--sienna));
}


/* Coming-soon-Fläche mit Maskottchen (Shop, Spenden) */
.mit-fuchs { display: flex; align-items: center; gap: 2rem; }
.mit-fuchs img { width: 150px; flex: none; filter: drop-shadow(0 14px 16px rgba(160, 82, 45, .25)); }

/* Login-Formular */
.login { display: grid; gap: 1rem; max-width: 420px; }
.login label span { display: block; font-weight: 600; margin-bottom: .3rem; }
.login input {
  width: 100%; padding: .7rem 1rem; font: inherit; color: var(--text);
  border-radius: 12px; border: 1px solid var(--glas-rand); background: rgba(255,255,255,.7);
}
.login .discord { margin-top: .4rem; justify-self: start; }
.fehler { color: var(--sienna); font-weight: 600; }
button.discord { border: 0; font: inherit; font-weight: 600; cursor: pointer; }


/* ---------- 7. ADMIN ---------- */
.tore { display: grid; gap: 1.2rem; margin-top: 2rem; animation: hoch .8s .2s both; }
.tor {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tor:hover { transform: translateX(6px); box-shadow: 0 16px 46px rgba(34,49,46,.14); }
.tor .pfeil {
  flex: none; width: 2.8rem; height: 2.8rem; display: grid; place-items: center;
  border-radius: 50%; color: #fff; font-size: 1.2rem;
  background: linear-gradient(135deg, var(--patina), var(--blau));
  transition: transform .3s ease;
}
.tor:hover .pfeil { transform: translateX(4px); }
.hinweis { margin-top: 1.5rem; font-size: .9rem; }

/* Knopfreihe (Passwort ändern, Abmelden, …) */
.aktionen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.aktionen .discord { margin-top: 0; white-space: nowrap; }
.pwbox .discord, #bereich .discord { animation: none; }   /* sofort sichtbar beim Aufklappen */
/* Zweitrangiger Knopf: Glas statt Farbverlauf */
.discord.zweit {
  color: var(--text); background: rgba(255,255,255,.75);
  border: 1px solid var(--glas-rand); box-shadow: 0 6px 20px rgba(34,49,46,.08);
}
.discord.zweit:hover { box-shadow: 0 10px 28px rgba(34,49,46,.14); }
button.discord:disabled { opacity: .6; cursor: progress; transform: none; }

.warnung { margin-top: 1.5rem; max-width: none; color: var(--sienna); font-weight: 500; border-left: 4px solid var(--kupfer); }

/* Passwort-ändern-Fläche */
.pwbox { margin-top: 1.5rem; animation: hoch .5s both; scroll-margin-top: 6rem; }
.pwbox .login { margin-top: 1.2rem; }
.pwbox .login .aktionen { margin-top: .2rem; }
.ok { color: var(--text); font-weight: 600; margin-top: 1rem; }
.schritte { margin: .8rem 0 1rem 1.3rem; color: var(--muted); display: grid; gap: .3rem; }
.zeile {
  display: block; padding: .9rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,.75); color: var(--sienna);
  font-family: ui-monospace, Consolas, monospace; font-size: .85rem;
  word-break: break-all; user-select: all;
}


/* ---------- 8. ANIMATIONEN ---------- */
@keyframes seiteEin { from { opacity: 0; } to { opacity: 1; } }
@keyframes hoch     { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes schweben { 50% { transform: translateY(-12px) rotate(1.2deg); } }
@keyframes treiben  { to { transform: translate(8vmax, 6vmax) scale(1.15); } }

/* Wer Animationen im System abgeschaltet hat, bekommt keine */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---------- 9. MOBIL ---------- */
/* Tablets und Handys */
@media (max-width: 760px) {
  main { padding: 1.5rem 0 3rem; }

  /* Kopfzeile kompakt: oben Logo + Sprache, darunter eine wischbare Navi-Zeile */
  .header .wrap {
    display: grid; grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand . lang" "nav nav nav";
    row-gap: .35rem; padding: .5rem 0 .45rem;
  }
  .brand { grid-area: brand; }
  .brand img { height: 28px; }
  .lang { grid-area: lang; }
  .lang button { padding: .25rem .65rem; }
  .nav {
    grid-area: nav; gap: .15rem;
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    margin-inline: -4vw; padding: 0 4vw .1rem;      /* bis an den Rand wischbar */
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; padding: .35rem .75rem; font-size: .95rem; }
  .nav a:first-child { margin-left: auto; }        /* mittig, solange alles passt */
  .nav a:last-child  { margin-right: auto; }

  /* Startseite */
  .hero { grid-template-columns: 1fr; text-align: center; gap: 1rem; padding: .5rem 0 2rem; }
  .hero p { font-size: 1.05rem; margin-inline: auto; }
  .discord { padding: .8rem 1.5rem; margin-top: 1.4rem; }
  .maskottchen { width: 150px; }

  .themen, .spalten { grid-template-columns: 1fr; gap: 1rem; }
  .thema { min-height: 0; padding: 1.4rem 6.2rem 1.4rem 1.3rem; }
  .thema .wappen { width: 78px; top: .9rem; right: .9rem; }
  .thema h2 { font-size: 1.5rem; }

  /* Info-Seiten */
  .kopf { margin-bottom: 1.5rem; }
  .kopf p { font-size: 1.02rem; }
  .kopf.mit-bild { flex-direction: column-reverse; text-align: center; gap: 1rem; }
  .kopf.mit-bild p { margin-inline: auto; }
  .wappen-gross { width: 110px; }
  .mit-fuchs { flex-direction: column; text-align: center; gap: 1rem; }
  .mit-fuchs img { width: 110px; }
  .mit-fuchs p { margin-inline: auto; }
  .glas { padding: 1.3rem 1.2rem; border-radius: 18px; }
  .fakten { grid-template-columns: 1fr; gap: .2rem; }
  .fakten dd { margin-bottom: .6rem; }

  /* Admin & Formulare: Knöpfe volle Breite, gut zu treffen */
  .login { max-width: none; }
  .login .discord { justify-self: stretch; }
  .aktionen .discord { flex: 1 1 8rem; text-align: center; padding: .8rem 1rem; }
  .tor { gap: 1rem; }
  .tor .pfeil { width: 2.4rem; height: 2.4rem; }

  .footer { padding: 1.5rem 0 2rem; }
  .footer .wrap { flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
  .footer .links { gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
}

/* Sehr schmale Handys */
@media (max-width: 380px) {
  h1 { font-size: 1.95rem; }
  .thema { padding-right: 5.2rem; }
  .thema .wappen { width: 64px; }
  .nav a { padding: .35rem .6rem; }
}

/* Touch-Geräte: Hover-Effekte nicht "hängen" lassen */
@media (hover: none) {
  .thema:hover, .tor:hover, .discord:hover { transform: none; }
  .tor:hover .pfeil { transform: none; }
}