/* Softwareportal · Copyright (c) 2026 Lorenz Taferner · Licensed under the EUPL
 * SPDX-License-Identifier: EUPL-1.2 */
/* =========================================================================
   Softwareportal – Gestaltung im Stil des Ticketsystems
   Farben und Schriften entsprechen ticket/style.css
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Jost:wght@400;500;600;700&display=swap');

:root{
  /* --- Palette aus ticket --- */
  --bg:        #E9E6E1;   /* warmes Creme */
  --paper:     #E9E6E1;
  --card:      #FFFFFF;
  --surface-2: #F3F1EC;   /* Feld-/Eingabe-Hintergrund */
  --ink:       #374957;   /* dunkles Schiefer */
  --ink-soft:  #5F7D95;
  --muted:     #8A93A0;
  --line:      rgba(14,42,71,.14);

  --navy:      var(--hub-kern,#0E2A47);
  --navy-2:    #213B55;
  --red:       #ED5B2D;
  --red-hi:    #F54132;
  --orange:    #F4A23B;
  --teal:      #1DCDC3;
  --teal-d:    #14938C;
  --green:     #2EA56A;

  /* --- Rollen der Variablen im Hub (Namen bleiben stabil) --- */
  --brand:      var(--navy);
  --brand-dark: #08213A;
  --brand-tint: #E4F7F5;      /* Teal-Hauch für Chips/Icons */
  --accent:     var(--red);
  --accent-2:   #CF4A22;

  --ok:     #1F7A4C;  --ok-bg:  #DCF1E6;
  --err:    #C53A1E;  --err-bg: #FBE0D7;

  /* --- Rundungen: die Skala aus mRDPv2/direktion.php ---
     Dort ist sie nicht zufaellig, sondern gestuft nach Groesse des Elements:
     je kleiner die Flaeche, desto kleiner der Radius, sonst wirkt ein kleiner
     Knopf wie eine Pille und eine grosse Karte wie ein Kasten.
       16px  Karten und Tabellen        (.card / .card-panel / .tabelle)
       10px  Knoepfe, Eingaben, Hinweise (.btn / input / .alert)
        8px  Chips und Marken
        6px  Miniknoepfe in Tabellenzellen
     Die Namen bleiben unveraendert - jedes Programm zieht seine Rundungen
     ueber var(--radius) und var(--radius-s) aus dieser Datei, ein Wert hier
     wirkt also portalweit. */
  --radius:    16px;
  --radius-s:  10px;
  --radius-chip:8px;
  --radius-xs:  6px;
  --shadow:   0 3px 16px rgba(14,42,71,.10);
  /* Seitenbreite aller Programme (09/2026: 1180 -> 1440). Portalleiste und
     Programmkopf lesen denselben Wert, damit Kopf und Inhalt fluchten.
     Reine Lesetexte (Q-Artikel) begrenzen sich selbst, sonst wuerden die
     Zeilen auf grossen Bildschirmen zu lang. */
  --wrap:     1440px;

  --font-display:'Arvo', Georgia, 'Times New Roman', serif;
  --font-body:'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.55 var(--font-body);
}

h1,h2,h3{ font-family:var(--font-display); font-weight:700; margin:0; letter-spacing:.5px; }
a{ color:var(--accent-2); }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

code{
  background:var(--surface-2); padding:.1em .4em; border-radius:6px;
  font:.88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* großzügige Ränder, auf kleinen Displays etwas knapper */
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
@media (min-width:900px){ .wrap{ padding:0 34px; } }
@media (max-width:420px){ .wrap{ padding:0 18px; } }
.page{ padding-top:26px; padding-bottom:104px; }
.muted{ color:var(--muted); }
.small{ font-size:.85rem; }

/* --- Kopfbereich mit Logo (Startseite) ---------------------------------- */
.hero{
  background:var(--navy);
  color:#fff;
  padding:20px 0;
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg, var(--teal) 0 33%, var(--orange) 33% 66%, var(--red) 66% 100%) 1;
}
.hero .wrap{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.hero__logobox{
  background:#fff; border-radius:50%; padding:7px; flex:none;
  width:60px; height:60px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--teal), 0 2px 8px rgba(0,0,0,.25);
}
.hero__logo{ width:100%; height:100%; object-fit:contain; display:block; }
.hero__text{ padding-left:20px; border-left:1px solid rgba(255,255,255,.22); }
.hero__text--plain{ padding-left:0; border-left:0; }
.hero__eyebrow{
  margin:0 0 3px; text-transform:uppercase; letter-spacing:.18em;
  font-size:.68rem; color:var(--teal); font-weight:600;
}
.hero__title{ margin:0; font-size:1.6rem; line-height:1.1; color:#fff; }
.hero__sub{ margin:6px 0 0; color:#DCE6EE; font-size:.93rem; }

.hero__auth{ margin-left:auto; display:flex; align-items:center; gap:12px; color:#DCE6EE; font-size:.9rem; }
.hero__authname strong{ color:#fff; }
.hero__authbtn{
  display:inline-block; padding:7px 14px; border-radius:999px;
  border:1.5px solid rgba(255,255,255,.28); color:#DCE6EE;
  text-decoration:none; font-weight:600; font-size:.82rem; white-space:nowrap;
  letter-spacing:.02em;
}
.hero__authbtn:hover{ background:rgba(255,255,255,.12); color:#fff; }
@media (max-width:600px){
  .hero__text{ padding-left:0; border-left:0; }
  .hero__auth{ margin-left:0; width:100%; }
}

/* --- Kopfleiste (Installer, Verwaltung) --------------------------------- */
.topbar{
  background:var(--navy); color:#fff;
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg, var(--teal) 0 33%, var(--orange) 33% 66%, var(--red) 66% 100%) 1;
}
.topbar .wrap{ display:flex; align-items:center; gap:18px; height:58px; }
.brand{ color:#fff; text-decoration:none; font-weight:700; font-family:var(--font-display); }
.topbar__title{ color:#DCE6EE; }
.topbar__logout{ margin-left:auto; color:#DCE6EE; text-decoration:none; font-weight:600; font-size:.9rem; }
.topbar__logout:hover{ color:#fff; }

/* --- Kategorien & Kacheln ----------------------------------------------- */
.kategorie{ margin-bottom:34px; }
.kategorie__titel{
  font-family:var(--font-body);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-soft); font-weight:700;
  margin:0 0 14px; padding-left:14px; position:relative;
}
.kategorie__titel::before{
  content:""; position:absolute; left:0; top:.1em;
  width:4px; height:1.1em; background:var(--red); border-radius:2px;
}

.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:980px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:440px){ .grid{ grid-template-columns:1fr; } }

.kachel{
  display:flex; flex-direction:column; gap:10px;
  background:var(--card);
  border:1px solid var(--line);
  border-top:3px solid var(--teal);
  border-radius:var(--radius);
  padding:18px;
  text-decoration:none; color:inherit;
  box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.kachel:hover{
  transform:translateY(-3px);
  border-top-color:var(--red);
  box-shadow:0 14px 34px rgba(14,42,71,.16);
}
.kachel__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kachel__icon{
  font-size:1.45rem; line-height:1; flex:none;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border-radius:12px;
}
.chip{
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal-d); background:var(--brand-tint);
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.kachel__name{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--navy); }
.kachel__desc{
  color:var(--ink-soft); font-size:.9rem; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden;
}
.kachel__foot{ display:flex; justify-content:flex-end; margin-top:auto; padding-top:4px; }
.kachel__pfeil{ color:var(--red); font-weight:700; transition:transform .15s; }
.kachel:hover .kachel__pfeil{ transform:translateX(4px); }

.empty{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:40px; text-align:center; box-shadow:var(--shadow);
}

/* --- Panels, Tabellen, Buttons ------------------------------------------ */
.card-panel{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
}
h1{ font-size:1.45rem; margin:0 0 6px; color:var(--navy); }
/* Überschriften auf dunklem Grund immer hell */
.hero h1, .hero h2, .hero h3,
.topbar h1, .topbar h2, .topbar h3{ color:#fff; }

.login__form{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.login__form input{ flex:1; min-width:180px; }

/* Alle textartigen Eingaben gleich behandeln. Vorher fehlten number, date,
   time, email, tel und url – die erschienen als nackte Browser-Kaestchen
   mitten zwischen den gestalteten Feldern. */
input[type=text],input[type=password],input[type=search],input[type=number],
input[type=date],input[type=time],input[type=datetime-local],input[type=month],
input[type=week],input[type=email],input[type=tel],input[type=url],
textarea,select{
  padding:8px 11px; border:1.5px solid var(--line);
  border-radius:var(--radius-s); font-size:.95rem; background:var(--surface-2); color:var(--ink);
}
input:focus,select:focus,textarea:focus{ outline:2px solid var(--teal); outline-offset:1px; background:#fff; }

/* ======================================================================
   TABELLEN - die Formensprache aus mRDPv2/direktion.php

   Was dort anders gemacht ist als frueher hier, und warum es besser ist:

   1. DER KOPF IST WEISS, nicht gefaerbt. Kleine graue Grossbuchstaben, darunter
      eine 1,5px-Linie. Ein farbiger Balken zieht den Blick auf die
      Spaltennamen - die liest man aber einmal. Danach stoert er beim Lesen
      der Daten, auf die es ankommt.
   2. KEINE SENKRECHTEN LINIEN, und die waagrechten sind Haarlinien
      (rgba(14,42,71,.06) statt der kraeftigen --line). Ein Raster aus vollen
      Linien zerlegt die Tabelle in Kaestchen; die Zeile soll aber als Zeile
      lesbar bleiben.
   3. DIE LETZTE ZEILE HAT KEINE LINIE. Sonst liegt direkt ueber dem
      gerundeten Rand der Karte noch ein Strich, und die Rundung wirkt wie ein
      Fehler statt wie eine Form.
   4. DER KOPF LAEUFT MIT (position:sticky). Wirksam wird das nur in einem Feld
      mit begrenzter Hoehe - siehe .tabelle-scroll--hoch weiter unten. Steht
      die Tabelle frei auf der Seite, schadet die Angabe nicht, sie tut nur
      nichts.

   ZWEI VARIANTEN, beide bewusst NICHT die Vorgabe:
     .tabelle--dicht  0,78rem und 4px Zellenabstand, wie das Pruefungsboard.
                      Nur fuer reine Leselisten. In einer Tabelle mit
                      Eingabefeldern kleben die Felder bei diesen Massen
                      aneinander und lassen sich am Laptop kaum treffen.
     .tabelle--navy   Dunkelblauer Kopf. Fuer breite Listen, in denen der
                      weisse Kopf zwischen den Spalten untergeht.
   Beide lassen sich kombinieren.
   ====================================================================== */
.tabelle{
  width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  margin-top:18px; font-size:.88rem;
}
.tabelle th,.tabelle td{ text-align:left; padding:9px 12px; vertical-align:top; }
.tabelle th{
  position:sticky; top:0; z-index:2;
  background:var(--card); color:var(--ink-soft);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap; border-bottom:1.5px solid var(--line);
}
.tabelle td{ color:var(--ink); border-bottom:1px solid rgba(14,42,71,.06); }
.tabelle tbody tr:last-child td{ border-bottom:none; }

/* WECHSELNDE ZEILENFARBE
   Der Farbton ist --surface-2 (#F3F1EC), das warme Creme der Eingabefelder.
   Bewusst dieser und kein neuer: er steckt schon im System, klingt an den
   Seitenhintergrund an und beisst sich nicht mit dem Teal des Hovers.

   Warum trotzdem die Haarlinien bleiben: Der Wechsel traegt breite Tabellen,
   in denen das Auge weit nach rechts wandert - die Linie allein reisst dort
   ab. Umgekehrt verschwindet der Wechsel, sobald eine Tabelle nur zwei oder
   drei Zeilen hat; dann haelt die Linie die Zeile zusammen. Beides zusammen
   funktioniert, weil der Wechsel sehr zart und die Linie sehr duenn ist -
   kraeftig gesetzt wuerde eines von beidem stoeren.

   nth-child(even): die erste Zeile bleibt weiss. Faengt der Wechsel schon
   oben an, sieht die Tabelle aus, als fehlte ihr eine Zeile. */
.tabelle tbody tr:nth-child(even){ background:var(--surface-2); }

/* NACH dem Wechsel, nicht davor: beide Regeln sind gleich stark, es gewinnt
   die spaetere. Stuende der Hover oben, faende er auf jeder zweiten Zeile
   nicht statt. */
.tabelle tbody tr:hover{ background:var(--brand-tint); }

/* Fusszeile mit Summen: abgesetzt, aber ohne Farbflaeche. */
.tabelle tfoot th,.tabelle tfoot td{
  position:static; background:var(--surface-2); color:var(--navy);
  border-top:1.5px solid var(--line); border-bottom:none;
  font-size:.82rem; text-transform:none; letter-spacing:0;
}

/* Zahlenspalten: rechtsbuendig und mit gleich breiten Ziffern, sonst
   springen die Nachkommastellen von Zeile zu Zeile. */
.tabelle .zahl,.tabelle th.zahl{ text-align:right; font-variant-numeric:tabular-nums; }

/* --- Variante: dichte Leseliste --- */
.tabelle--dicht{ font-size:.78rem; }
.tabelle--dicht th,.tabelle--dicht td{ padding:4px 6px; }
.tabelle--dicht th{ font-size:.6rem; letter-spacing:.03em; }

/* --- Variante: Tabelle mit Eingabefeldern in den Zellen ---

   Das Problem, das sie loest: Ohne Vorgabe verteilt der Browser die Breite
   nach dem Inhalt - und der laengste Inhalt einer Spalte ist oft die
   UEBERSCHRIFT, nicht der Wert. "Soll Jahresstunden" zieht seine Spalte auf,
   waehrend daneben "Andrea HEBENSTREIT" auf zwei Zeilen umbricht und die
   ganze Zeile doppelt hoch wird. Genau verkehrt herum.

   Deshalb hier: feste Aufteilung (table-layout:fixed) mit einem <colgroup>
   je Tabelle, Ueberschriften duerfen umbrechen, und die Eingabefelder fuellen
   ihre Spalte, statt ueber size="" eine eigene Breite mitzubringen.

   min-width haelt die Tabelle lesbar: Wird das Fenster schmaler, schrumpfen
   nicht die Spalten, sondern .tabelle-scroll schiebt waagrecht. Ein
   Eingabefeld, das auf 3 Zeichen zusammenfaellt, ist unbrauchbar. */
.tabelle--felder{ table-layout:fixed; min-width:78rem; }
.tabelle--felder th{ white-space:normal; }
.tabelle--felder td > input[type=text],
.tabelle--felder td > input[type=number],
.tabelle--felder td > input[type=date],
.tabelle--felder td > input[type=time],
.tabelle--felder td > select,
.tabelle--felder td > textarea{ width:100%; min-width:0; }

/* Zahlen rechtsbuendig - auch im Eingabefeld. Beim Vergleichen von 100.00 und
   80.00 untereinander springt sonst das Komma. */
.tabelle--felder td.zahl > input{ text-align:right; font-variant-numeric:tabular-nums; }

/* Personenzelle: Name gross, Kuerzel klein darunter. Der Name bricht erst,
   wenn die Spalte wirklich zu schmal ist - deshalb balance statt auto. */
.tabelle .person{ font-weight:600; color:var(--navy); text-wrap:balance; }
.tabelle .person .kuerzel{
  display:block; margin-top:1px; font-weight:400; font-size:.78em;
  color:var(--muted); letter-spacing:.04em;
}

/* --- Variante: dunkelblauer Kopf --- */
.tabelle--navy th{
  background:var(--navy); color:#fff; border-bottom:none;
}
.tabelle--navy tfoot th,.tabelle--navy tfoot td{ background:var(--surface-2); color:var(--navy); }
.proj-icon{ margin-right:6px; }

.pill{ display:inline-block; padding:3px 11px; border-radius:999px;
  font-size:.76rem; font-weight:600; background:var(--surface-2); color:var(--muted); }
.pill--ok{ background:var(--ok-bg); color:var(--ok); }

.btn-row{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:var(--radius-s); padding:10px 16px;
  font-size:.92rem; font-weight:600; letter-spacing:.01em; cursor:pointer;
  text-decoration:none;
  transition:filter .12s, transform .04s, background-color .12s, box-shadow .12s;
}
.btn:hover{ filter:brightness(1.07); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* GRUNDKNOPF (09/2026)
   Bisher setzte .btn weder Hintergrund noch Farbe: ein <a class="btn"> sah aus
   wie ein roter, unterstrichener Link, ein <button class="btn"> hatte das Grau
   des Browsers. Einzelne Programme haben sich deshalb eigene Knoepfe gebaut
   (wochenplan: .wp-knopf, boerse: .btn--leise).

   Jetzt bekommt ein Knopf OHNE Zusatzklasse das Aussehen eines ruhigen
   Zweitknopfs: weiss, feine Kontur, Schrift in der Kernfarbe.

   Zwei Kunstgriffe, damit kein Programm dabei etwas verliert:
   - :where() hat die Spezifitaet 0. Jede Regel eines Programms, die .btn
     selbst gestaltet (Q-Handbuch, Ticket, pult-app ...), gewinnt weiterhin -
     auch wenn sie VOR dieser Datei geladen wird.
   - Die Kontur ist ein innerer Schatten, kein Rahmen. .btn behaelt
     border:none; Knoepfe mit eigener Farbe bekommen keinen zweiten Rand, und
     die Hoehe bleibt fuer alle Knoepfe gleich.
   Knoepfe mit einer Variante (btn--...) sind ausgenommen: die bringen ihr
   Aussehen selbst mit.
   a:where(...) hat die Spezifitaet eines Elements und steht nach a{...}
   weiter oben - sonst gewaenne dort die rote Linkfarbe. */
:where(.btn:not([class*="btn--"])),
a:where(.btn:not([class*="btn--"])){
  background:var(--card); color:var(--navy);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
:where(.btn:not([class*="btn--"]):hover){
  background:var(--brand-tint); box-shadow:inset 0 0 0 1.5px var(--teal); filter:none;
}

.btn--primary{ background:linear-gradient(140deg, var(--red-hi), var(--red)); color:#fff;
  box-shadow:0 2px 8px rgba(237,91,45,.25); }
.btn--navy{ background:var(--navy); color:#fff; }
.btn--danger{ background:#fff; color:var(--err); border:1.5px solid var(--err); }
.btn--danger:hover{ background:var(--err-bg); filter:none; }
/* Leiser Knopf fuer Nebenhandlungen - frueher nur in der Schulboerse
   (boerse.css), dort bleibt die eigene Regel mit rotem Hover bestehen. */
.btn--leise{ background:var(--card); color:var(--navy); border:1.5px solid var(--line); }
.btn--leise:hover{ background:var(--brand-tint); border-color:var(--teal); filter:none; }
.btn:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

.alert{ padding:12px 14px; border-radius:var(--radius-s); margin:0 0 14px; font-weight:500; }
.alert--ok{ background:var(--ok-bg); color:var(--ok); }
.alert--fehler{ background:var(--err-bg); color:var(--err); }

.diag{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:12px 14px; margin:16px 0; font-size:.9rem; }
.diag summary{ cursor:pointer; font-weight:600; color:var(--ink-soft); }
.diag p{ margin:8px 0 0; }
.diag code{ word-break:break-all; }

/* --- Verwaltungsoberflaeche ---------------------------------------------
   Diese Bausteine waren bisher nur in benutzer.php als <style> hinterlegt.
   raeume.php benutzte dieselben Klassennamen, bekam aber keine Gestaltung –
   daher sahen die beiden Seiten unterschiedlich aus. Jetzt stehen sie hier
   einmal fuer alle Seiten des Portals.                                     */

.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:14px 0 9px; }
.toolbar__search{ flex:1; min-width:220px; position:relative; }
.toolbar__search input{ width:100%; padding:8px 12px 8px 32px; border:1px solid var(--line);
  border-radius:10px; font-size:.92rem; background:#fff; }
.toolbar__search::before{ content:"\1F50E"; position:absolute; left:11px; top:50%;
  transform:translateY(-50%); font-size:.85rem; opacity:.5; }
.toolbar__sel{ padding:8px 10px; border:1px solid var(--line); border-radius:10px;
  font-size:.88rem; background:#fff; }
.toolbar__count{ color:var(--muted); font-size:.86rem; white-space:nowrap; }

.btn.mini,.mini{ padding:6px 11px; font-size:.82rem; }

.iconbtn{ border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer;
  border-radius:8px; padding:5px 8px; font-size:.88rem; line-height:1.1; }
.iconbtn:hover{ border-color:var(--accent); color:var(--accent); }
.iconbtn--danger:hover{ border-color:var(--err); color:var(--err); }

/* Waagrechter Auslauf fuer breite Tabellen.
   Der Rahmen wandert dabei von der Tabelle auf diesen Kasten: sonst laege die
   gerundete Ecke der Tabelle innerhalb des Auslaufs und wuerde beim Schieben
   mit weggescrollt. */
.tabelle-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); margin-top:18px;
}
.tabelle-scroll .tabelle{ border:none; border-radius:0; margin-top:0; }

/* Nur MIT Hoehenbegrenzung laeuft der Tabellenkopf wirklich mit. Ohne sie
   gibt es kein Feld, an dessen Oberkante er kleben koennte - deshalb eine
   eigene Klasse und nicht als Vorgabe. */
.tabelle-scroll--hoch{ overflow:auto; max-height:70vh; }

/* Aufklappbare Abschnitte: eigener Fokusrahmen statt des blauen Browserrahmens */
details.card-panel{ padding:14px 17px; }
details.card-panel > summary{
  cursor:pointer; font-weight:600; color:var(--navy); font-size:.95rem;
  list-style:none; display:flex; align-items:center; gap:7px; outline:none;
}
details.card-panel > summary::-webkit-details-marker{ display:none; }
details.card-panel > summary::before{
  content:"\25B8"; font-size:.75em; color:var(--muted); transition:transform .12s ease;
}
details.card-panel[open] > summary::before{ transform:rotate(90deg); }
details.card-panel > summary:focus-visible{
  outline:2px solid var(--teal); outline-offset:3px; border-radius:6px;
}

/* --- Fuß ----------------------------------------------------------------- */
.fuss{ border-top:1px solid var(--line); padding:22px 0; color:var(--muted); }
.fuss .wrap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fuss a{ color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:.9rem; }
.fuss a:hover{ color:var(--red); }
.fuss__trenner{ color:var(--line); }

/* --- Verwaltung des Portals (Block am Seitenende) ------------------------
   Zurückhaltend gehalten: kleine Schrift, blasse Symbole, eigene Fläche.
   Die Programmkacheln oben bleiben die Hauptsache – hierher kommt nur, wer
   etwas einstellen will. Drei Spalten auf breiten Schirmen, darunter zwei,
   am Telefon eine.                                                        */
.fuss .wrap:has(.verw){ display:block; }          /* der Block bestimmt selbst */
.verw{ width:100%; }
.verw__kopf{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.verw__titel{
  margin:0; font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.verw__knopf{
  font-size:.8rem; font-weight:600; text-decoration:none;
  color:var(--ink-soft); border:1px solid var(--line);
  border-radius:999px; padding:4px 12px; background:var(--card);
  transition:border-color .14s ease, color .14s ease;
}
.verw__knopf:hover{ border-color:var(--teal); color:var(--navy); }

.verw__raster{
  display:grid; gap:10px 26px;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}
.verw__gruppe{ min-width:0; }
.verw__gruppentitel{
  margin:0 0 6px; font-size:.74rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); opacity:.75;
  padding-bottom:5px; border-bottom:1px solid var(--line);
}
.verw__liste{ list-style:none; margin:0; padding:0; }
.verw__liste li{ margin:0; }

.fuss .verw__liste a{
  display:flex; align-items:flex-start; gap:9px;
  padding:7px 8px; margin-left:-8px;          /* Text bleibt an der Spaltenkante */
  border-radius:8px; font-weight:500; font-size:.88rem;
  color:var(--ink); text-decoration:none;
  transition:background .12s ease, color .12s ease;
}
.fuss .verw__liste a:hover,
.fuss .verw__liste a:focus-visible{ background:var(--surface-2); color:var(--navy); }
.fuss .verw__liste a:focus-visible{ outline:2px solid var(--teal); outline-offset:1px; }

.verw__symbol{
  flex:0 0 auto; width:18px; height:18px; margin-top:1px; color:var(--muted);
  transition:color .12s ease;
}
.verw__symbol svg{ width:18px; height:18px; display:block; }
.fuss .verw__liste a:hover .verw__symbol{ color:var(--teal-d); }

.verw__text{ min-width:0; display:block; }
.verw__name{ display:block; line-height:1.3; }
/* Die rote Aufgabenzahl haengt am Link und soll nicht im Text kleben. */
.verw__name .app-aufgaben{ margin-left:6px; }
.verw__hinweis{
  display:block; font-size:.76rem; font-weight:400; line-height:1.4;
  color:var(--muted); margin-top:1px;
}

/* Zwei enge Spalten sind schlechter als eine ruhige: unter 620px untereinander. */
@media (max-width:620px){
  .verw__raster{ grid-template-columns:minmax(0,1fr); gap:14px; }
}
@media (max-width:400px){
  .verw__hinweis{ display:none; }              /* am Telefon zaehlt die Liste */
}
@media print{ .verw{ display:none; } }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* --- Kacheln anordnen (persönliches Dashboard) --------------------------- */
.anordnen__titel{ font-size:1.2rem; margin:0 0 4px; color:var(--navy); }
.kachel--sort{
  cursor:grab; user-select:none; border-top-color:var(--orange);
  background:#fff;
}
.kachel--sort:active{ cursor:grabbing; }
.kachel--sort .griff{ color:var(--muted); font-size:1.1rem; letter-spacing:-2px; }
.kachel--sort.zieht{ opacity:.45; transform:scale(.97); }
.kachel--sort.bewegt{ box-shadow:0 0 0 3px var(--teal); }
.sortbtns{ display:flex; gap:6px; margin-top:auto; padding-top:8px; }
.sortbtn{
  flex:1; border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink);
  border-radius:8px; padding:6px 0; font-size:.9rem; line-height:1;
}
.sortbtn:hover{ border-color:var(--red); color:var(--red); background:#fff; }