/* Digitale Werkstatt.css – schlichtes, Milligram-ähnliches Stylesheet
Grundelemente ohne Klassen, nur wenige sprechende Klassen:
.button, .hinweis, .karte (Tourbook-Karte)
Keine externen Schriften, keine CDN-Zugriffe. */

/* ---------- Farben: hier anpassen ---------- */
:root {
--porzellan: #f8f6f1; /* Hintergrund */
--anthrazit: #2b2b2b; /* Text */
--korall: #c93d2f; /* Links, Buttons (dunkel genug für Lesbarkeit) */
--korall-hell: #e8604c; /* Hover-Flächen */
--gold: #f2c230; /* Markierung, Fokus */
--graugruen: #6b6e5c; /* Nebentext, Rahmen */
--linie: #dcd9cd; /* feine Trennlinien */

--schrift: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--schrift-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Basis ---------- */
html {
font-size: 62.5%; /* 1rem = 10px */
box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

body {
max-width: 72rem;
margin: 0 auto;
padding: 2rem;
background: var(--porzellan);
color: var(--anthrazit);
font-family: var(--schrift);
font-size: 1.6rem;
line-height: 1.6;
font-weight: 300;
}

/* ---------- Text ---------- */
p, ul, ol, dl, blockquote, pre, table, figure, form, hr { margin: 0 0 2.4rem; }

h1, h2, h3, h4, h5, h6 {
margin: 0 0 1.4rem;
font-weight: 300;
line-height: 1.25;
letter-spacing: -0.05rem;
}
h1 { font-size: 4rem; }
h2 { font-size: 3rem; margin-top: 4rem; }
h3 { font-size: 2.4rem; margin-top: 3rem; }
h4 { font-size: 2rem; }
h5 { font-size: 1.8rem; }
h6 { font-size: 1.6rem; }

a {
color: var(--korall);
text-decoration-thickness: 0.1rem;
text-underline-offset: 0.25em;
}
a:hover { color: var(--anthrazit); }

strong, b { font-weight: 600; }
small { color: var(--graugruen); font-size: 85%; }
mark { background: var(--gold); padding: 0 0.2em; }

ul, ol { padding-left: 2.4rem; }
li { margin-bottom: 0.6rem; }
li > ul, li > ol { margin: 0.6rem 0 0; }

blockquote {
margin-left: 0;
padding: 0.2rem 0 0.2rem 2rem;
border-left: 0.3rem solid var(--gold);
color: var(--graugruen);
font-style: italic;
}

hr {
border: 0;
border-top: 0.1rem solid var(--linie);
margin: 3.5rem 0;
}

/* ---------- Bilder ---------- */
img, svg, video { max-width: 100%; height: auto; }
figcaption {
margin-top: 0.6rem;
color: var(--graugruen);
font-size: 1.4rem;
}

/* ---------- Code ---------- */
code, pre { font-family: var(--schrift-mono); font-size: 1.4rem; }
code { background: #ece9de; padding: 0.2rem 0.5rem; border-radius: 0.3rem; }
pre {
background: #ece9de;
padding: 1.4rem 1.8rem;
overflow-x: auto;
}
pre code { background: none; padding: 0; }

/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; }
th, td {
padding: 1rem 1.2rem;
text-align: left;
border-bottom: 0.1rem solid var(--linie);
}
th { font-weight: 600; }

/* ---------- Formulare ---------- */
label { display: block; margin-bottom: 0.4rem; font-weight: 600; }

input[type="text"], input[type="email"], input[type="search"],
input[type="url"], input[type="number"], input[type="date"],
textarea, select {
width: 100%;
padding: 0.8rem 1rem;
margin-bottom: 1.6rem;
border: 0.1rem solid var(--graugruen);
border-radius: 0.3rem;
background: #fff;
color: inherit;
font: inherit;
}
textarea { min-height: 12rem; }
input[readonly] {
    background: #ece9de;
    border-color: var(--linie);
} 
button { margin-top: 2.4rem; }


/* ---------- Buttons ---------- */
.button, button, input[type="submit"] {
display: inline-block;
padding: 0.8rem 2.2rem;
border: 0.1rem solid var(--korall);
border-radius: 0.3rem;
background: var(--korall);
color: var(--porzellan);
font: inherit;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.button:hover, button:hover, input[type="submit"]:hover {
background: var(--anthrazit);
border-color: var(--anthrazit);
color: var(--porzellan);
}
.button.outline {
background: transparent;
color: var(--korall);
}
.button.outline:hover { color: var(--porzellan); }

/* ---------- Fokus (Tastaturbedienung) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
outline: 0.3rem solid var(--gold);
outline-offset: 0.2rem;
}

/* ---------- Eigene Bausteine ---------- */
.hinweis {
padding: 1.2rem 1.8rem;
margin-bottom: 2.4rem;
border-left: 0.3rem solid var(--graugruen);
background: #ece9de;
}

/* Karte im Tourbook (Leaflet braucht eine feste Höhe) */
.karte {
height: 40rem;
margin-bottom: 2.4rem;
border: 0.1rem solid var(--linie);
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 40rem) {
body { padding: 1.4rem; }
h1 { font-size: 3.2rem; }
h2 { font-size: 2.6rem; }
.karte { height: 30rem; }