/* ═══════════════════════════════════════════════════════════════════════════
   "Glas & Licht" — Design-Auflage über style.css
   ───────────────────────────────────────────────────────────────────────────
   Diese Datei ÜBERSCHREIBT nur das Aussehen und wird NACH style.css geladen.
   style.css selbst bleibt unverändert — wichtig, weil der interne Bereich
   (intern/*.php) dasselbe Stylesheet benutzt und nicht mitverändert werden soll.

   Einbinden:  <link rel="stylesheet" href="style.css">
               <link rel="stylesheet" href="glas.css">
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Akzentfarbe an EINER Stelle ─────────────────────────────────────────
     Alle türkisen Töne im ganzen Glas-Design leiten sich hiervon ab.
     Umstellen auf Mint:  #7ed8a0 / #b3ecc9 / 126, 216, 160
     Umstellen auf Gold:  #d8bb63 / #f0dda0 / 216, 187, 99          */
  --akzent:      #7ec4d8;
  --akzent-hell: #a9dceb;
  --akzent-rgb:  126, 196, 216;

  /* ── Hintergrund des internen Bereichs ──────────────────────────────────
     Die öffentlichen Seiten behalten das Strandfoto (siehe body-Regel unten),
     der interne Bereich bekommt eine ruhige Einfarbfläche. */
  --intern-bg:   #0f2018;

  --glas-fill:        rgba(255, 255, 255, .08);
  --glas-fill-hover:  rgba(255, 255, 255, .13);
  --glas-border:      rgba(255, 255, 255, .22);
  --glas-text:        #ffffff;
  --glas-text-muted:  rgba(255, 255, 255, .62);
  --glow:             rgba(var(--akzent-rgb), .55);
  --glow-fest:        var(--akzent);

  /* ── Die gemeinsamen Farbvariablen aus style.css neu belegen ──────────────
     Der ganze interne Bereich (Kalender, Einstellungen, Datei-Manager …)
     baut seine eigenen Stile auf genau diesen Variablen auf. Werden sie hier
     umdefiniert, wandern rund drei Viertel aller Bauteile automatisch in den
     Glas-Look mit — ohne dass jede einzelne Regel angefasst werden muss. */
  --bg:          #08141f;
  --bg-card:     rgba(255, 255, 255, .08);
  --bg-input:    rgba(255, 255, 255, .08);
  --green-dark:  rgba(var(--akzent-rgb), .18);
  --green-mid:   rgba(var(--akzent-rgb), .55);
  --green-light: var(--akzent-hell);
  --gold:        #d8bb63;
  --text:        #ffffff;
  --text-muted:  rgba(255, 255, 255, .62);
  --border:      rgba(255, 255, 255, .22);
  --radius:      14px;
}

/* ── Hintergrund: Strandfoto, dezent abgedunkelt ── */
body {
  background-image:
    linear-gradient(rgba(8, 20, 32, .55), rgba(8, 20, 32, .72)),
    url('Hintergrund%20Strand.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--glas-text);
}

/* ── Kopfbereich ── */
h1 {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.site-title {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: .5px;
  color: #fff;
  text-align: center;
  line-height: 1.25;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
@media (max-width: 480px) { .site-title { font-size: 1.4rem; } }

.tagline { color: var(--glas-text-muted); }

/* Monogramm (Impressum/Datenschutz/Login): runde Glasscheibe */
.monogram {
  border-radius: 50%;
  border: 1px solid var(--glas-border);
  background: var(--glas-fill);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: var(--gold);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .25);
}

.homepage-hint {
  font-size: .82rem;
  color: var(--glas-text-muted);
  text-align: center;
  margin-top: -24px;
  font-style: italic;
}

/* ── Trennlinie ── */
.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--glow), transparent);
}

/* ── Abschnitts-Überschriften ── */
.links-section h2,
.login-section h2,
.content-section h2 { color: var(--glow-fest); }

/* ── Karten: Frostglas mit gleitendem Lichtreflex ── */
.card {
  position: relative;
  overflow: hidden;
  background: var(--glas-fill);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glas-border);
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .28);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1),
              box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

/* Der Lichtreflex, der beim Überfahren diagonal über die Karte wandert */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .16) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.card:hover::before { transform: translateX(120%); }

.card:hover {
  background: var(--glas-fill-hover);
  border-color: var(--glow);
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .38), inset 0 0 0 1px var(--glow);
}

.card-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--gold);
  font-size: .6rem;
  flex-shrink: 0;
}

.card-title { color: #fff; }
.card-label { color: var(--glas-text-muted); }
.card-url   { color: var(--akzent-hell); }
.card-arrow { color: rgba(255, 255, 255, .75); }

/* ── Knöpfe: Pillenform, gläsern, mit sanftem Leuchten ── */
.login-btn {
  display: inline-block;
  padding: 13px 34px;
  text-decoration: none;
  background: var(--glas-fill);
  border: 1px solid var(--glas-border);
  color: #fff;
  border-radius: 999px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: .78rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .25s ease, box-shadow .25s ease,
              transform .2s ease, border-color .25s ease;
}
.login-btn:hover {
  background: var(--glas-fill-hover);
  border-color: var(--glow);
  box-shadow: 0 0 24px var(--glow);
  transform: translateY(-2px);
}

/* ── Login-Formular: Glasfelder ── */
.login-form { gap: 18px; }

.input-group label { color: var(--glas-text-muted); }

.input-group input {
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--glas-border);
  border-radius: 14px;
  color: #fff;
  padding: 14px 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.input-group input::placeholder { color: rgba(255, 255, 255, .4); }
.input-group input:focus {
  border-color: var(--glow);
  background: rgba(255, 255, 255, .11);
  box-shadow: 0 0 0 4px rgba(var(--akzent-rgb), .16);
}

.login-error {
  background: rgba(180, 60, 60, .18);
  border: 1px solid rgba(230, 120, 120, .45);
  border-radius: 14px;
  color: #ffc9c9;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.login-hint { color: var(--glas-text-muted); }

/* ── Textseiten (Impressum, Datenschutz): Inhalt auf Glasfläche ── */
.content-section .impressum-block {
  background: var(--glas-fill);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glas-border);
  border-radius: 20px;
  padding: 22px 26px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .22);
  transition: border-color .28s ease, background .28s ease;
}
.content-section .impressum-block:hover {
  background: var(--glas-fill-hover);
  border-color: rgba(var(--akzent-rgb), .38);
}
.impressum-block h3 { color: var(--glow-fest); }
.impressum-block p,
.impressum-block li { color: rgba(255, 255, 255, .88); }
.impressum-block a  { color: var(--akzent-hell); }

/* ── Fußzeile ── */
footer { color: var(--glas-text-muted); }
.footer-link { color: var(--glas-text-muted); }
.footer-link:hover { color: var(--akzent-hell); }

/* ═══════════════════════════════════════════════════════════════════════════
   Mauszeiger: alles Anklickbare bekommt die Hand
   ───────────────────────────────────────────────────────────────────────────
   Browser zeigen bei <button> standardmäßig den normalen Pfeil — man sieht
   also nicht, dass etwas anklickbar ist. Diese Regeln holen das nach, für
   Knöpfe, Kacheln, Listenzeilen, Auswahlfelder und Häkchen gleichermaßen.
   ═══════════════════════════════════════════════════════════════════════════ */
a[href],
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
summary,
label,
select,
input[type="checkbox"],
input[type="radio"],
input[type="file"],
.card,
.area-card,
.game-card,
.file-card,
.tool-btn:not(:disabled),
.action-btn:not(:disabled),
.login-btn,
.footer-link,
.breadcrumbs a,
.drop-zone,
.file-row[data-open],
.emp-chip,
.drag-chip,
.ap-badge,
.day-header,
.radio-btn,
.nc-chip,
.file-list li {
  cursor: pointer;
}

/* Nicht benutzbar: eindeutig zeigen, dass hier nichts passiert */
button:disabled,
.tool-btn:disabled,
.action-btn:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

/* Texteingaben behalten den Schreib-Zeiger */
input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea {
  cursor: text;
}

/* Während des Ziehens: geschlossene Hand auf der ganzen Seite */
body.zieht-element,
body.zieht-element * {
  cursor: grabbing !important;
}

/* ── Rücksicht auf "Bewegung reduzieren" ── */
@media (prefers-reduced-motion: reduce) {
  .card, .card::before, .login-btn, .card-icon { transition: none; }
  .card:hover { transform: none; }
  .card:hover::before { transform: translateX(-120%); }
  .login-btn:hover { transform: none; }
}