:root {
–max-ch: 60ch; /* Standard-Lesebreite auf Desktop */
–gap: 1rem;
–text: 1rem;
–bg: #ffffff;
–fg: #111111;
–shadow: rgba(0,0,0,.04);
}

/* Dunkelmodus-Unterstützung */
@media (prefers-color-scheme: dark) {
:root {
–bg: #0e0e12;
–fg: #e8e1e6;
–shadow: rgba(255,255,255,.05);
}
}

html, body {
font-family: Liberation;
text-align: center;
margin: 0;
padding: 0;
background: var(–bg);
color: var(–fg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'Liberation';
    src: url('fonts/LiberationSans-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

h2 {
    font-size: 30px;
}


input {
  width: 230px;
  padding: 8px;
  margin: 10px 0;
  box-sizing: border-box;
 
}

.readable {
/* zentriert den Textblock und begrenzt die Zeilenlänge /
max-width: var(–max-ch);
margin: 0 auto;
padding: 1rem;
/ sanfte, lesbare Abstände /
background: color-mm(white);
box-shadow: 0 0 0 rgba(0,0,0,0); / placeholder, optional */
}

article {
/* Lesetextform */
padding: 0;
margin: 0;
}

/* Typografie (flutschige, skalierbare Schriftgröße) */
h1 {
font-size: clamp(1.4rem, 0.9rem + 2.2vw, 2.4rem);
line-height: 1.2;
margin: 0 0 0.5rem;
}
p {
font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.15rem);
line-height: 1.65;
margin: 0 0 1rem;
letter-spacing: 0.01em;
}

/* Optional: größere Leserichtung bei Tablets/Desktops */
@media (min-width: 900px) {
.readable {
padding: 1.25rem;
}
p { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); }
}

/* Fokus-Stil (Barrierefreiheit) */
:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* Optional: helle/simile Hintergrundfarben für gute Lesbarkeit */
:root { background: #f7f7f8; }

/* Du kannst hier weitere Styles hinzufügen (Überschriften, Listen etc.) */
*/

/* Optional: Hilfsklasse für "lese-Modus" via JS (override) /
.readable–override {
max-width: none;
width: min(68ch, 90%);
margin: 0 auto;
}
.button { / Stil für den Button (wenn genutzt) */ }
button { cursor: pointer; }



input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
background-color: #fff !important;
color: #000 !important;
-webkit-text-fill-color: #000 !important;
box-shadow: inset 0 0 0 1000px #fff;
-moz-box-shadow: inset 0 0 0 1000px #fff;
border: 1px solid #ccc;
background-clip: content-box;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
box-shadow: 0 0 0 1000px #fff inset;
-webkit-text-fill-color: #000 !important;
color: #000 !important;
background-color: #fff !important;
border: 1px solid #ccc;
}