/*
* Golly Base – Grundkomponenten für alle privaten Golly-Apps
* v1.0 (2026-07-10) · nutzt ausschließlich var(--*) aus golly-tokens.css
* Einbindung (immer BEIDE, tokens zuerst, mit Versions-Query):
*
*
*/
/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
font-family:var(--font-ui);
color:var(--color-text-primary);
background:var(--color-surface-muted);
min-height:100vh;
line-height:var(--leading-normal);
}
img,svg{max-width:100%;height:auto}
a{color:var(--color-accent-hover)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-sm)}
/* ── Hintergrund: ruhiges Warmgrau mit Diagonalstruktur (Portal-Wallpaper) ── */
.golly-bg{
background:
repeating-linear-gradient(45deg, transparent 0 14px, rgba(158,152,144,.08) 14px 15px),
var(--color-surface-raised);
}
/* ── Markenleiste oben ── */
.golly-topbar{
background:var(--color-surface);
border-bottom:2px solid var(--color-accent);
padding:var(--space-4) var(--space-6);
text-align:center;
}
.golly-topbar img{width:320px;max-width:80%}
.golly-topbar.small{padding:var(--space-3) var(--space-6)}
.golly-topbar.small img{width:200px;max-width:60%}
.golly-topbar .back{
float:left;font-size:var(--text-sm);text-decoration:none;
color:var(--color-text-secondary);line-height:2.2;
}
.golly-topbar .back:hover{color:var(--color-accent-hover)}
/* ── "Screen": Inhaltskarte in der Mitte ── */
.golly-screen{
width:100%;max-width:680px;margin:0 auto;
background:var(--color-surface-muted);
border:1px solid var(--color-border);
border-radius:var(--radius-xl);
box-shadow:var(--shadow-lg);
padding:var(--space-8) var(--space-6) var(--space-6);
}
.golly-claim{
text-align:center;font-family:var(--font-display);font-style:italic;
font-size:var(--text-base);color:var(--color-text-secondary);
margin-bottom:var(--space-8);
}
/* ── App-Grid (Homescreen) ── */
.golly-apps{
display:grid;grid-template-columns:repeat(3,1fr);
gap:26px 10px;justify-items:center;
}
@media (min-width:420px){.golly-apps{grid-template-columns:repeat(4,1fr)}}
@media (min-width:560px){.golly-apps{grid-template-columns:repeat(5,1fr)}}
.golly-app{
display:flex;flex-direction:column;align-items:center;gap:9px;
text-decoration:none;color:var(--color-text-primary);
width:84px;
transition:transform var(--duration-normal) var(--ease-default);
}
.golly-app:active{transform:scale(.92)}
@media (hover:hover){.golly-app:hover{transform:translateY(-3px)}}
.golly-tile{
width:68px;height:68px;border-radius:var(--radius-xl);
background:var(--color-surface);
border:1px solid var(--color-border);
box-shadow:var(--shadow-sm);
display:flex;align-items:center;justify-content:center;
font-size:31px;
transition:box-shadow var(--duration-normal) var(--ease-default),
border-color var(--duration-normal) var(--ease-default);
}
@media (hover:hover){.golly-app:hover .golly-tile{box-shadow:var(--shadow-md);border-color:var(--color-accent)}}
.golly-app.soon .golly-tile{background:var(--color-surface-raised);opacity:.6;filter:saturate(.5)}
.golly-lbl{font-size:var(--text-xs);font-weight:var(--font-medium);text-align:center}
.golly-app.soon .golly-lbl{color:var(--color-text-muted)}
.golly-badge{
font-size:9px;font-weight:var(--font-semibold);letter-spacing:1px;
background:var(--color-accent-subtle);color:var(--color-accent-hover);
padding:1px 7px;border-radius:var(--radius-full);
}
/* ── Buttons ── */
.golly-btn{
display:inline-block;font-family:var(--font-ui);font-size:var(--text-sm);
font-weight:var(--font-semibold);text-decoration:none;cursor:pointer;
background:var(--color-primary);color:var(--color-text-inverse);
border:none;border-radius:var(--radius-md);
padding:var(--space-3) var(--space-6);
transition:background var(--duration-fast) var(--ease-default);
}
.golly-btn:hover{background:var(--color-primary-hover)}
.golly-btn.accent{background:var(--color-accent)}
.golly-btn.accent:hover{background:var(--color-accent-hover)}
/* ── Card ── */
.golly-card{
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
padding:var(--space-6);
}
/* ── Login-Gate (per-App-Login) ── */
.golly-gate{
max-width:360px;margin:10vh auto;padding:var(--space-8) var(--space-6);
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-xl);
box-shadow:var(--shadow-lg);
text-align:center;
}
.golly-gate h1{font-family:var(--font-display);font-size:var(--text-2xl);margin-bottom:var(--space-2)}
.golly-gate p{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-6)}
.golly-gate input{
width:100%;font-family:var(--font-ui);font-size:var(--text-base);
padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3);
background:var(--color-surface-muted);color:var(--color-text-primary);
border:1px solid var(--color-border-strong);border-radius:var(--radius-md);
}
.golly-gate input:focus{border-color:var(--color-accent);outline:none}
.golly-gate .error{color:var(--color-error);font-size:var(--text-sm);margin-bottom:var(--space-3)}
.golly-gate .golly-btn{width:100%}
/* ── Fußzeile ── */
.golly-foot{
background:var(--color-surface);border-top:1px solid var(--color-border);
padding:var(--space-4) var(--space-6);text-align:center;
font-size:var(--text-xs);color:var(--color-text-muted);
}
.golly-foot a{color:var(--color-text-secondary);text-decoration:none;margin:0 8px}
.golly-foot a:hover{color:var(--color-accent-hover)}
.golly-foot .ver{display:block;margin-top:6px;opacity:.7}
/* ── Admin-Hinweis (sichtbar, wenn Admin-Session aktiv) ── */
.golly-adminbar{
background:var(--color-primary);color:var(--color-text-inverse);
font-size:var(--text-xs);text-align:center;padding:4px 8px;letter-spacing:.5px;
}
.golly-adminbar a{color:var(--color-accent);text-decoration:none;margin-left:10px}