/* ============================================================================
GlamGen — gemeinsames Stylesheet für die Rechtsseiten
(impressum.html, datenschutz.html, agb.html)
Farben, Radien, Schatten und Typografie sind aus danke.html / dem
GlamGen-App-Theme übernommen, damit die Unterseiten identisch wirken.
============================================================================ */
/* ---------- Schriften (liegen in assets/fonts, relativ zu dieser Datei) ---- */
@font-face{
font-family:"SFPro";
src:url("fonts/SFPRODISPLAYREGULAR.OTF") format("opentype");
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:"SFPro";
src:url("fonts/SFPRODISPLAYBOLD.OTF") format("opentype");
font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Orbitron";
src:url("fonts/Orbitron-Regular.ttf") format("truetype");
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:"Orbitron";
src:url("fonts/Orbitron-Bold.ttf") format("truetype");
font-weight:700; font-style:normal; font-display:swap;
}
/* ---------- Marken-Variablen (identisch zu danke.html) -------------------- */
:root{
--bg: #f6f3fa;
--bg-start: #f7f2ff;
--bg-end: #e2d0ff;
--surface: #ffffff;
--surface-soft: #fcfaff;
--surface-lilac: #f4ecff;
--text: #16141a;
--text-soft: #24202b;
--text-muted: #6f6f78;
--accent: #a474f7;
--accent-dark: #673ab7;
--accent-soft: #e2d0ff;
--border: #e5e7eb;
--border-lilac: #e2d0ff;
--store-bg: #211c27;
--store-bg-soft: #f4f1f7;
--radius: 22px;
--radius-sm: 16px;
--maxw: 48rem;
--shadow: 0 8px 22px rgba(22,20,26,.06), 0 1px 2px rgba(22,20,26,.04);
}
/* ---------- Reset / Basis ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:100%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
margin:0;
font-family:"SFPro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size:1.05rem;
line-height:1.72;
color:var(--text);
background:linear-gradient(180deg, var(--bg-start) 0, var(--bg) 16rem, #fff 100%);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
h1,h2,h3,p{ margin:0; }
a{
color:var(--accent-dark);
text-decoration:underline;
text-underline-offset:3px;
font-weight:700;
}
a:hover{ text-decoration-thickness:2px; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:8px; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:1.5rem; }
/* Tastatur-Sprunglink */
.skip-link{
position:absolute; left:-9999px; top:0; z-index:10;
background:var(--store-bg); color:#fff;
padding:.7rem 1rem; border-radius:0 0 8px 0; text-decoration:none;
}
.skip-link:focus{ left:0; }
/* ---------- Kopfbereich --------------------------------------------------- */
.legal-header{
background:linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
border-bottom:1px solid rgba(226,208,255,.82);
padding:2.6rem 0 2.1rem;
text-align:center;
}
.logo-link{ display:inline-block; line-height:0; }
.legal-header .logo-mark{
width:3.4rem; height:3.4rem;
border-radius:1rem;
box-shadow:0 12px 28px rgba(103,58,183,.18);
}
.legal-header h1{
font-size:2.05rem; line-height:1.12; font-weight:800;
letter-spacing:0; color:var(--text);
margin:.95rem 0 0;
}
.legal-header h1::after{
content:""; display:block;
width:3rem; height:4px; border-radius:999px;
background:var(--accent); margin:1rem auto 0;
}
.legal-sub{
font-size:1.02rem; color:var(--text-muted);
margin:.85rem auto 0; max-width:32rem;
}
/* ---------- Inhalts-Karte ------------------------------------------------- */
main{ padding-bottom:1rem; }
.legal-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:2.4rem;
box-shadow:var(--shadow);
margin:2.6rem 0 1.8rem;
}
/* ---------- Typografie der Rechtstexte ------------------------------------ */
.legal-card h2{
font-size:1.3rem; line-height:1.28; font-weight:800; color:var(--text);
margin:2.4rem 0 .2rem;
scroll-margin-top:1rem;
}
.legal-card h2:first-of-type,
.legal-card > section:first-child h2{ margin-top:0; }
.legal-card h3{
font-size:1.08rem; font-weight:700; color:var(--text-soft);
margin:1.6rem 0 .1rem;
}
.legal-card p{ margin:.85rem 0 0; }
.legal-card ul,.legal-card ol{ margin:.85rem 0 0; padding-left:1.3rem; }
.legal-card li{ margin:.4rem 0; }
.legal-card li::marker{ color:var(--accent-dark); }
.legal-card section + section{ margin-top:.2rem; }
/* Definitionsliste, z. B. für die Impressums-Angaben */
.legal-card dl{ margin:.85rem 0 0; }
.legal-card dt{
font-weight:700; color:var(--text-soft);
margin-top:1rem;
}
.legal-card dd{ margin:.1rem 0 0; }
.legal-card address{ font-style:normal; }
/* Kleiner Meta-Hinweis (Stand etc.) */
.legal-meta{
color:var(--text-muted); font-size:.95rem;
margin:0 0 .4rem;
}
/* Hervorgehobener Hinweiskasten innerhalb der Texte */
.callout{
background:var(--surface-lilac);
border:1px solid var(--border-lilac);
border-left:5px solid var(--accent);
border-radius:var(--radius-sm);
padding:1.1rem 1.2rem;
margin-top:1.2rem;
}
.callout p{ margin:.55rem 0 0; }
.callout p:first-child{ margin-top:0; }
.callout strong{ color:var(--accent-dark); }
/* ---------- Gelbe Platzhalter-Markierung ---------------------------------
Alles in … ist noch von dir zu füllen.
Beim Ersetzen einfach das ganze … durch deinen Text tauschen –
dann verschwindet auch die Markierung. */
.todo{
background:#fff3bf;
color:#5c4400;
padding:.05em .35em;
border-radius:5px;
font-weight:700;
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
}
/* ---------- Entwurfs-Banner ----------------------------------------------
Sichtbarer Hinweis, dass die Seite eine ungeprüfte Vorlage ist.
Vor der Veröffentlichung das