/* Gemeinsames Stylesheet fuer portal.ewerh.4-zero.org */

:root {
  --bg: #f6f7f5; --surface: #ffffff; --text: #1b2420; --muted: #5c6b63;
  --accent: #2f7d5d; --accent-text: #ffffff; --border: #dfe4e0;
  --chip: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131714; --surface: #1c211e; --text: #e8ede9; --muted: #9daba3;
    --accent: #4fae82; --accent-text: #0e1411; --border: #2b322e;
    --chip: #ffffff;
  }
}
:root[data-theme="dark"] {
  --bg: #131714; --surface: #1c211e; --text: #e8ede9; --muted: #9daba3;
  --accent: #4fae82; --accent-text: #0e1411; --border: #2b322e;
  --chip: #ffffff;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}
.wrap { width: 100%; max-width: 56rem; margin: 0 auto; padding: 3rem 1.25rem; flex: 1; }
.wrap.narrow { max-width: 44rem; }
a { color: var(--accent); }

/* Kopfbereich */
header { margin-bottom: 2.5rem; }

/* Anmeldestatus: fest an der rechten oberen Bildschirmecke.
   position:fixed statt im Textfluss - .wrap ist auf 56rem begrenzt und
   zentriert, dort saesse der Knopf auf breiten Schirmen mitten auf der Seite.
   Die Pille bekommt einen eigenen Hintergrund, damit sie beim Scrollen
   ueber dem Inhalt lesbar bleibt.
   Oberhalb des Inhalts: .wrap hat 3rem Innenabstand oben, die Pille endet
   darueber - sie ueberdeckt die Kopfzeile also nicht. */
.authbox {
  position: fixed; top: .75rem; right: .75rem; z-index: 10;
  display: flex; align-items: center; gap: .5rem;
  max-width: calc(100vw - 1.5rem);
  background: var(--surface); border: 1px solid var(--border);
  /* Rechteck mit gerundeten Ecken - die Seite nutzt 6px fuer Knoepfe und
     12px fuer Karten; 10px fuegt sich dazwischen ein. Runde Pillen (999px)
     sind hier den kleinen Markern .tag und .badge vorbehalten. */
  border-radius: 10px; padding: .5rem .5rem .5rem .9rem;
}
.authname {
  color: var(--muted); font-size: .82rem; font-weight: 600;
  /* Feste Zeilenhoehe: der geerbte Wert 1.6 erzeugt Halbdurchschuss, der
     sich oben und unten ungleich aufrundet - der Knopf sass dadurch sichtbar
     zu tief im Kasten. */
  line-height: 1.4;
  max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Der Knopf sitzt hier im Kasten, nicht in einer Karte: .btn richtet sich
   dort mit align-self:flex-end und margin-top unten aus, was hier den Knopf
   nach unten drueckt.
   WICHTIG - zwei Klassen (.authbox .authbtn), nicht nur .authbtn: .btn steht
   weiter unten in dieser Datei, und bei gleicher Spezifitaet gewinnt die
   spaetere Regel. Ein einfaches .authbtn blieb wirkungslos. */
.authbox .authbtn {
  align-self: center; margin-top: 0; flex: none;
  padding: .3rem .8rem; font-size: .8rem;    /* Radius kommt aus .btn (6px) */
  line-height: 1.4;                          /* siehe Hinweis bei .authname */
}
/* Nur der Anmelden-Knopf, kein Name: gleichmaessige Polsterung. */
.authbox.nurknopf { padding: .5rem; }

/* Kontomenue. Der Kasten ist der Bezugspunkt fuer die absolute Lage des
   Menues - deshalb position:relative trotz position:fixed am Elternteil
   (fixed ist ebenfalls ein gueltiger Bezugsrahmen). */
/* touch-action: manipulation unterdrueckt die Wartezeit auf einen
   Doppeltipp - der Knopf reagiert dadurch sofort statt nach ~300 ms. */
.authtrigger { cursor: pointer; font-family: inherit; touch-action: manipulation; }
/* Der Pfeil zeigt, dass sich etwas aufklappt. ::after statt Zeichen im Text,
   damit er nicht mitkopiert wird. */
.authtrigger::after { content: " \25BE"; }
.authbox.offen .authtrigger::after { content: " \25B4"; }

/* Unsichtbare Flaeche hinter dem Menue: faengt Tipps daneben ab.
   Sie liegt unter dem Kasten (z-index 10), aber ueber allem anderen.
   Ohne sie muesste man sich auf das Durchblasen von Klicks bis zum
   document verlassen - das schlaegt auf Mobilbrowsern fehl. */
.authoverlay {
  position: fixed; inset: 0; z-index: 9;
  background: transparent;
}
.authoverlay[hidden] { display: none; }

.authmenu {
  position: absolute; top: calc(100% + .35rem); right: 0; min-width: 12.5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: .35rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
}
.authmenuitem {
  display: block; padding: .45rem .6rem; border-radius: 6px;
  color: var(--text); text-decoration: none; font-size: .85rem; line-height: 1.4;
  white-space: nowrap;
}
.authmenuitem:hover, .authmenuitem:focus-visible { background: var(--bg); }
.authmenuitem.abmelden { color: var(--accent); font-weight: 600; }
.authtrenner { border: 0; border-top: 1px solid var(--border); margin: .35rem .2rem; }

/* Schmale Schirme: Name kuerzer, damit die Pille nicht die halbe
   Bildschirmbreite belegt. */
@media (max-width: 30rem) {
  .authname { max-width: 7rem; }
}

.eyebrow { color: var(--muted); font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.25; margin: 0 0 .75rem; }
.lede { color: var(--muted); margin: 0; max-width: 40rem; }
.lede + .lede { margin-top: .75rem; }

/* Zweckbeschreibung auf der Startseite */
.purpose { margin: 0 0 2.5rem; max-width: 44rem; }
.purpose h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.purpose p { color: var(--muted); margin: 0 0 .8rem; }
.purpose p:last-child { margin-bottom: 0; }

/* Karten */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 0 0 2rem; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem;
}
.logo { height: 46px; display: flex; align-items: center; margin-bottom: .2rem; }
.logo img, .logo svg { max-height: 46px; max-width: 100%; width: auto; display: block; }
.logo.chip img { background: var(--chip); padding: 5px 8px; border-radius: 8px; max-height: 46px; }
.logo.rounded img { border-radius: 9px; }
.logo.mark { color: var(--text); }
.logo.icon { color: var(--accent); }
.card h2 { font-size: 1.05rem; margin: 0; }
.card p { color: var(--muted); font-size: .9rem; margin: 0; flex: 1; }
.btn {
  display: inline-block; align-self: flex-end; margin-top: .6rem;
  background: var(--accent); color: var(--accent-text); text-decoration: none;
  padding: .45rem .9rem; border-radius: 6px; font-size: .9rem; font-weight: 600;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); font-weight: 500; }
.btn.ghost:hover { background: var(--accent); color: var(--accent-text); }
.tag {
  font-size: .68em; font-weight: 600; vertical-align: .18em;
  background: var(--accent); color: var(--accent-text);
  padding: .1em .5em; border-radius: 999px; letter-spacing: .03em;
}
/* Badge sitzt im selben Slot wie der Knopf, damit die Karten
   einer Reihe unten auf gleicher Linie abschliessen. */
.badge {
  display: inline-block; align-self: flex-end; margin-top: .6rem;
  border: 1px dashed var(--border); color: var(--muted);
  padding: .45rem .9rem; border-radius: 6px; font-size: .9rem;
}
.hint { font-size: .8rem; color: var(--muted); margin: 0; }

/* Fliesstext-Seiten (Nutzungsbedingungen o. ae.) */
.doc h2 {
  font-size: 1.15rem; margin: 2.2rem 0 .6rem; padding-top: .2rem;
  border-top: 1px solid var(--border);
}
.doc h2:first-of-type { border-top: 0; margin-top: 1.5rem; }
.doc h3 { font-size: 1.02rem; margin: 1.4rem 0 .5rem; }
.doc h3 .num { color: var(--muted); font-weight: 600; margin-right: .45rem; }
.doc h2 .num { color: var(--muted); font-weight: 600; margin-right: .45rem; }
.doc p { margin: 0 0 .9rem; }
.doc ul { margin: 0 0 .9rem; padding-left: 1.3rem; }
.doc li { margin-bottom: .5rem; }
.doc li::marker { color: var(--accent); }
.meta { color: var(--muted); font-size: .875rem; margin: 0 0 1.5rem; }
.back { display: inline-block; margin-bottom: 1.5rem; font-size: .9rem; text-decoration: none; }
.back:hover { text-decoration: underline; }

/* Fussbereich */
footer { border-top: 1px solid var(--border); padding: 1.5rem 1.25rem; color: var(--muted); font-size: .85rem; }
footer .wrap-f { max-width: 56rem; margin: 0 auto; }
.legal { margin: 0 0 .5rem; }
.legal a { color: var(--accent); text-decoration: none; font-weight: 500; }
.legal a:hover { text-decoration: underline; }
.legal span { margin: 0 .5rem; opacity: .5; }