/* savespaces.de – Look and Feel nach Vorlage (vorlagen/wakiga): warmes Aquarell-Orange/Gelb, Wellen oben und unten,
   papierheller Grund, Zierschrift-Überschriften links, Text rechts. Nur Stil übernommen, keine Inhalte/Bilder.
   Keine externen Schriften (Datensparsamkeit): Systemschriften mit ähnlichem Charakter. */
:root {
  --orange: #ff8700;          /* Akzent der Vorlage */
  --orange-tief: #e8641b;
  --gelb: #ffd36b;
  --papier: #fff3cf;
  --papier-hell: #fff9e8;
  --text: #4a2e1f;            /* warmes Dunkelbraun */
  --leise: #7a5a45;
  --braunrot: #6e2a12;        /* Navigation */
  --schatten: 0 10px 30px rgb(160 80 20 / .12);
  --zier: "Segoe Print", "Bradley Hand", "Comic Neue", "Chalkboard SE", "Marker Felt", cursive;
  --schmal: "Saira Semi Condensed", "Roboto Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --sans: "Source Sans Pro", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --breite: 1140px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 18px/1.7 var(--sans); font-weight: 300; color: var(--text);
  background:
    radial-gradient(900px 500px at 15% 30%, rgb(255 255 255 / .55), transparent 70%),
    radial-gradient(800px 600px at 85% 70%, rgb(255 214 120 / .35), transparent 70%),
    linear-gradient(180deg, var(--papier-hell), var(--papier));
  min-height: 100vh; display: flex; flex-direction: column;
}
img { max-width: 100%; height: auto; }
a { color: var(--orange-tief); }
strong { font-weight: 600; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .6rem; font-weight: 400; }
h1 { font-family: var(--zier); color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); text-shadow: 0 2px 6px rgb(120 40 0 / .35); }
h2 { font-family: var(--zier); color: var(--orange); font-size: clamp(2rem, 4.2vw, 2.9rem); transform: rotate(-2deg); transform-origin: left; }
h3 { font-family: var(--schmal); color: var(--orange); font-size: 1.35rem; font-weight: 500; }
.innen { max-width: var(--breite); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }

/* Kopf: Aquarellband mit Welle unten */
.kopf {
  position: relative; color: #fff; padding: .9rem 0 4.5rem;
  background:
    radial-gradient(600px 240px at 20% 10%, rgb(255 210 120 / .55), transparent 70%),
    radial-gradient(700px 260px at 80% 0%, rgb(255 120 30 / .55), transparent 70%),
    linear-gradient(100deg, #ff7a1a 0%, #ff9a2e 40%, #ffb347 70%, #ff8a1f 100%);
}
.kopf::after {   /* Welle: gelbes Band, darunter Papier */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 300 0 520 70 820 38 S 1260 10 1440 34 L1440 90 L0 90Z' fill='%23ffd36b' opacity='.85'/%3E%3Cpath d='M0 62 C 340 30 600 92 900 60 S 1280 40 1440 58 L1440 90 L0 90Z' fill='%23fff9e8'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.kopf .innen { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; position: relative; z-index: 1; }
.nav { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; font-family: var(--schmal); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; padding-top: .3rem; }
.nav a { color: var(--braunrot); text-decoration: none; }
.nav a:hover, .nav a[aria-current] { color: #fff1a8; }
.marke { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; font-family: var(--zier);
  font-size: 1.7rem; transform: rotate(-4deg); text-shadow: 0 2px 5px rgb(120 40 0 / .35); white-space: nowrap; }
.marke img { width: 64px; height: 64px; transform: rotate(4deg); filter: drop-shadow(0 2px 4px rgb(120 40 0 / .3)); }

/* Bühne direkt unter dem Kopf */
.buehne { padding: 1.5rem 0 1rem; }
.buehne .innen { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2.5rem; align-items: center; }
.buehne h1 { color: var(--orange); text-shadow: none; transform: rotate(-2deg); }
.buehne p.gross { font-size: 1.25rem; color: var(--leise); }
.siegel { display: inline-block; margin-bottom: 1rem; padding: .25rem 1rem; border-radius: 999px; background: rgb(255 135 0 / .12);
  color: var(--orange-tief); font-family: var(--schmal); font-size: .95rem; border: 1px solid rgb(255 135 0 / .35); }
.knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.knopf { display: inline-block; font-family: var(--schmal); font-size: 1.05rem; padding: .6rem 1.4rem; border-radius: 999px;
  background: linear-gradient(100deg, #ff7a1a, #ff9f2e); color: #fff; text-decoration: none; box-shadow: 0 4px 12px rgb(232 100 27 / .3); }
.knopf:hover { background: linear-gradient(100deg, #e8641b, #ff8a1f); color: #fff; }
.knopf.zweit { background: transparent; color: var(--orange-tief); border: 1px solid var(--orange); box-shadow: none; }
.knopf.zweit:hover { background: rgb(255 135 0 / .1); }

/* Abschnitte: Zierschrift-Titel links, Inhalt rechts (wie Vorlage) */
section { padding: clamp(2rem, 6vw, 3.5rem) 0; }
.zweispaltig { display: grid; grid-template-columns: minmax(200px, 1fr) 2.4fr; gap: 2rem 3rem; align-items: start; }
.einleitung { color: var(--leise); font-size: 1.1rem; margin: 0 0 1.4rem; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem 2rem; }
.karte { padding: 0; }
.karte p { margin: .2rem 0 0; }
.zeichen { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: rgb(255 135 0 / .15); color: var(--orange-tief); font-family: var(--schmal); font-size: 1.2rem; margin-bottom: .4rem; }
.haken { list-style: none; padding: 0; margin: .3rem 0 0; }
.haken li { padding: .15rem 0 .15rem 1.6rem; position: relative; }
.haken li::before { content: "✿"; position: absolute; left: 0; color: var(--orange); }
.module h3 small { display: block; font-family: var(--sans); font-size: .85rem; color: var(--leise); }
.hinweis { margin-top: 1.6rem; padding: .8rem 1.1rem; border-left: 4px solid var(--orange); background: rgb(255 255 255 / .45); color: var(--leise); }
.kontakt a.mail { font-family: var(--schmal); font-size: 1.4rem; }

/* Fuß: Welle oben, Aquarellband, weiße Links */
.fuss { position: relative; margin-top: auto; padding: 4.5rem 0 1.4rem; color: #fff; text-align: center; font-family: var(--schmal);
  background: linear-gradient(100deg, #ff7a1a 0%, #ff9a2e 45%, #ffb347 70%, #ff8a1f 100%); }
.fuss::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 40 C 1160 70 900 10 600 40 S 160 60 0 36Z' fill='%23fff3cf'/%3E%3Cpath d='M0 36 C 160 60 300 30 600 40 S 1160 70 1440 40 L1440 58 C 1180 86 880 30 600 56 S 180 76 0 58Z' fill='%23ffd36b' opacity='.85'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.fuss a { color: #fff; text-decoration: none; margin: 0 1.2rem; font-size: 1.05rem; }
.fuss a:hover { color: #fff1a8; }
.fuss .klein { display: block; margin-top: .6rem; font-size: .85rem; opacity: .9; }

/* Rechtstexte */
.recht { max-width: 820px; }
.recht h1 { color: var(--orange); text-shadow: none; transform: rotate(-2deg); }
.recht h2 { font-family: var(--schmal); color: var(--orange); font-size: 1.35rem; transform: none; margin-top: 1.6rem; }
.entwurf { background: rgb(255 255 255 / .55); border: 1px dashed var(--orange); border-radius: 10px; padding: .6rem .9rem; color: var(--orange-tief); }
mark { background: #ffe08a; color: #6b3a10; border-radius: 4px; padding: 0 .2rem; }

@media (max-width: 820px) {
  .kopf .innen { flex-direction: column-reverse; align-items: stretch; }
  .marke { align-self: flex-end; font-size: 1.4rem; }
  .nav { font-size: 1rem; gap: .2rem 1rem; }
  .buehne .innen, .zweispaltig { grid-template-columns: 1fr; }
  h2 { transform: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }