/* =========================================================================
   Die kleinen Seiten der anderen Apps (/apps/…).
   Sie leben vom Grundgerüst in site.css — hier steht nur, was neu ist.
   Jede Seite setzt ihre Akzentfarbe als --f auf dem Abschnitt.
   ========================================================================= */

.appseite{padding-bottom:26px}

/* ---------- Kopf: Symbol + Name + Satz ---------- */
.apk{display:flex;align-items:center;gap:clamp(16px,3vw,26px);margin-top:6px}
.apk__ic{width:clamp(68px,12vw,96px);height:clamp(68px,12vw,96px);border-radius:22px;
  display:block;flex:none;box-shadow:0 12px 34px rgba(0,0,0,.45)}
/* Der Name steht allein und gross — mit der engen Anton-Laufweite kleben die
   Buchstaben ineinander (Eluan 23.08.). Deshalb hier deutlich mehr Abstand. */
.apk__n{font-size:clamp(36px,8.4vw,68px);line-height:1;color:#fff;margin:0;
  letter-spacing:.055em}
.apk__c{margin-top:8px;font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(17px,3vw,26px);line-height:1.25;color:var(--f)}

/* ---------- Status ---------- */
.apk__s{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:8px 14px;
  border-radius:99px;font-size:12.5px;font-weight:700;color:var(--f);
  background:color-mix(in srgb, var(--f) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--f) 34%, transparent)}
.apk__s::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--f);flex:none}

/* ---------- Die drei Punkte ---------- */
.apts{margin-top:26px;display:grid;gap:2px;list-style:none}
@media(min-width:820px){.apts{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 40px}}
.apts li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:18px 0;border-top:1px solid var(--line)}
@media(min-width:820px){.apts li{display:block;padding-top:20px}}
.apts b{font-family:'Anton',Impact,sans-serif;font-size:17px;color:#3f4a49;line-height:1.3}
@media(min-width:820px){.apts b{display:block;margin-bottom:10px}}
.apts h3{font-size:17px;font-weight:700;margin-bottom:5px}
.apts p{font-size:14px;line-height:1.55;color:var(--muted)}

/* ---------- Die Übersicht auf /gebaut ----------
   Vorher zwei Textkacheln, jetzt vier anklickbare Karten mit Symbol. */
.appl{display:grid;gap:12px;margin-top:26px;list-style:none}
@media(min-width:700px){.appl{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.appl a{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);text-decoration:none;
  transition:border-color .2s,transform .2s var(--ease),background .2s}
.appl a:hover{border-color:color-mix(in srgb, var(--f) 45%, transparent);transform:translateY(-2px)}
.appl a:focus-visible{outline:2px solid var(--f);outline-offset:3px}
.appl img{width:52px;height:52px;border-radius:14px;flex:none;display:block}
.appl b{display:block;font-family:'Anton',Impact,sans-serif;text-transform:uppercase;
  font-size:20px;line-height:1;color:#fff;letter-spacing:.05em}
.appl i{display:block;font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:6px}
.appl em{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--f);margin-top:8px}
.appl span{margin-left:auto;flex:none;color:var(--muted);font-size:20px;line-height:1}