/* portal-public.css — gemeinsames Aussehen der öffentlichen Seiten
 *
 * Genutzt von /, /sus/ und /kollegium/. Bewusst getrennt von portal.css:
 * die öffentlichen Seiten laden weder portal-core.js noch die Shell
 * (sonst 401-Redirect, siehe CLAUDE.md) und brauchen nur diesen Ausschnitt.
 * Farben nach OSZ-Design-Guide, identisch zu start/index.html vorher.
 */
:root{
  --ink:#2B2B29; --orange:#F29200; --beige:#FACB97; --rot:#A51009;
  --grey-d:#5F5E5A; --grey:#B3B3B3; --grey-l:#E8E8E8; --paper:#fff; --bg:#f6f5f3;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5;
}
a{color:#b46a00}
.wrap{max-width:min(1100px,94vw);margin:0 auto;padding:0 1.6rem 4rem}

/* ---- Markenkopf (Bauhaus-Signet als CSS-Formen) ---- */
header.brand{background:var(--ink);color:#fff}
.brand-inner{max-width:min(1100px,94vw);margin:0 auto;display:flex;align-items:center;gap:1rem;padding:1.1rem 1.6rem}
.signet{position:relative;width:42px;height:42px;flex:0 0 42px}
.signet .sq{position:absolute;left:4px;bottom:0;width:30px;height:30px;background:var(--rot)}
.signet .ci{position:absolute;right:0;top:4px;width:22px;height:22px;border-radius:50%;background:var(--orange)}
.signet .tr{position:absolute;left:7px;top:-2px;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:18px solid var(--beige)}
.brand h1{font-size:1.06rem;margin:0;font-weight:700;letter-spacing:.2px}
.brand .sub{font-size:.78rem;color:var(--grey-l);margin-top:1px}
.brand-spacer{flex:1 1 auto}
.brand a.zurueck{
  font:inherit;font-size:.86rem;font-weight:600;text-decoration:none;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  border-radius:8px;padding:.5rem .95rem;white-space:nowrap;transition:background .12s
}
.brand a.zurueck:hover{background:rgba(255,255,255,.22)}
.orange-bar{height:5px;background:var(--orange)}

/* ---- Intro ---- */
.intro{margin-top:1.8rem}
.intro .kick{font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--grey-d);font-weight:600}
.intro h2{margin:.25rem 0 .4rem;font-size:1.6rem}
.intro p{margin:.3rem 0 0;font-size:.95rem;color:var(--grey-d);max-width:80ch}

/* ---- Karten (Türen auf /, Angebote in den Bereichen) ---- */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:2rem}
/* Karten einer Zeile sind sonst gleich hoch. Ist ein Sammelfeld aufgeklappt, wuerden
   die Nachbarn auf dessen Hoehe mitwachsen; dann lieber nach Inhalt setzen.
   Ohne :has()-Unterstuetzung bleibt es beim bisherigen Verhalten. */
.karten:has(details[open]){align-items:start}
a.card{
  display:block;text-decoration:none;color:inherit;background:var(--paper);
  border:1px solid var(--grey-l);border-radius:var(--radius);padding:1.1rem 1.2rem;
  transition:border-color .12s, box-shadow .12s, transform .05s
}
a.card:hover{border-color:var(--orange);box-shadow:0 4px 16px rgba(0,0,0,.06)}
a.card:active{transform:translateY(1px)}
.card .ct{display:flex;align-items:center;gap:.6rem}
.card .ic{font-size:1.5rem;line-height:1;flex:0 0 auto}
.card .t{font-weight:700;font-size:1.05rem}
.card .d{margin:.45rem 0 0;font-size:.88rem;color:var(--grey-d)}
.card .hint{display:inline-block;margin-top:.6rem;font-size:.74rem;font-weight:600;
  background:#fff4e3;border:1px solid var(--beige);color:#9a5d00;border-radius:7px;padding:.18rem .55rem}
.leer{color:var(--grey-d);font-size:.9rem;margin-top:2rem}

/* ---- Sammelfeld (Angebote einer Abteilung, siehe GRUPPEN in portal-bereiche.js)
       <details> statt Akkordeon-Skript: aufklappen kann der Browser selbst. ---- */
details.card-gruppe{
  background:var(--paper);border:1px solid var(--grey-l);border-radius:var(--radius);
  padding:1.1rem 1.2rem;align-self:start;transition:border-color .12s, box-shadow .12s
}
details.card-gruppe:hover{border-color:var(--orange);box-shadow:0 4px 16px rgba(0,0,0,.06)}
details.card-gruppe>summary{
  display:flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none;
  font-weight:700;font-size:1.05rem
}
details.card-gruppe>summary::-webkit-details-marker{display:none}
details.card-gruppe>summary .ic{font-size:1.5rem;line-height:1;flex:0 0 auto}
details.card-gruppe>summary .t{flex:1 1 auto}
details.card-gruppe>summary .zahl{
  flex:0 0 auto;font-size:.74rem;font-weight:600;color:var(--grey-d);
  background:var(--bg);border:1px solid var(--grey-l);border-radius:999px;padding:.1rem .5rem
}
/* Pfeil selbst zeichnen, damit er in jedem Browser gleich sitzt. */
details.card-gruppe>summary::after{
  content:"";flex:0 0 auto;width:.5rem;height:.5rem;margin-left:.1rem;
  border-right:2px solid var(--grey-d);border-bottom:2px solid var(--grey-d);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .12s
}
details.card-gruppe[open]>summary::after{transform:rotate(225deg) translate(-1px,-1px)}
details.card-gruppe>.d{margin:.45rem 0 0;font-size:.88rem;color:var(--grey-d)}
a.untereintrag{
  display:flex;align-items:flex-start;gap:.55rem;text-decoration:none;color:inherit;
  margin-top:.7rem;padding:.6rem .7rem;border:1px solid var(--grey-l);border-radius:9px;
  background:var(--bg);transition:border-color .12s
}
a.untereintrag:hover{border-color:var(--orange)}
a.untereintrag .ic{font-size:1.1rem;line-height:1.3;flex:0 0 auto}
a.untereintrag .t{display:block;font-weight:700;font-size:.93rem}
a.untereintrag .d{display:block;margin-top:.15rem;font-size:.84rem;color:var(--grey-d)}

footer.pg{margin-top:3rem;color:var(--grey-d);font-size:.76rem;text-align:center;line-height:1.9}
footer.pg a.intern-link{color:var(--grey-d);text-decoration:none;border-bottom:1px dotted var(--grey)}
footer.pg a.intern-link:hover{color:var(--ink);border-bottom-color:var(--ink)}