/* Denk.Mal Basis (Roman 17.07.): gemeinsame Grundlage fuer alle Seiten.
   Variablen, Typografie, Textbreiten-Regel, Kopf, Kachelmenue, Zeiger, Fuss.
   Wird zusammen mit haptik.css eingebunden. */
:root { --espresso:#2A1E15; --grund:#FAF7F2; --grau:#7D7266; --smaragd:#1F8A70; --pink:#EA5C9F; --sonne:#F5D93F;
  --g-rosa:#fbd6e0; --g-papier:#f9ead8; --g-blau:#93c0e7; --g-vanille:#fee4bf; --g-blush:#f6beab; --g-weiss:#faf2e8; }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { font-family:'Open Sans',sans-serif; color:var(--espresso); background:var(--grund); line-height:1.7; }
h1,h2,h3,.slab { font-family:'Museo Slab',Georgia,serif; font-weight:500; line-height:1.06;
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere; }
p { hyphens:auto; -webkit-hyphens:auto; text-wrap:pretty; }
img { max-width:100%; }
a { color:inherit; }
section { position:relative; overflow:hidden; }

/* Textbreiten-Regel (Ziel 55 bis 70 Zeichen). Einrueckung ueber margin, nie ueber padding im engen Container. */
.lauftext { max-width:62ch; }
.eingebettet { display:block;
  -webkit-mask-image:radial-gradient(115% 115% at 50% 50%, #000 58%, transparent 91%);
  mask-image:radial-gradient(115% 115% at 50% 50%, #000 58%, transparent 91%); }
.ki { font-size:.7rem; color:#2a1e1590; }
.credit { font-size:.7rem; color:var(--grau); }

/* Kopf */
header.kopf { position:sticky; top:0; z-index:6; display:flex; justify-content:space-between; align-items:center; padding:.85rem 4vw; backdrop-filter:blur(8px); }
header.kopf .menue-auf { display:inline-flex; align-items:center; gap:.7rem; background:var(--espresso); color:var(--grund);
  border:none; border-radius:15px; padding:.5rem 1.2rem .5rem .55rem; cursor:pointer; font-family:'Museo Slab'; font-size:1rem; }
.menue-auf .raster { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px; width:28px; height:28px; }
.menue-auf .raster i { border-radius:4px; transition:transform .3s cubic-bezier(.34,1.56,.64,1), border-radius .3s ease; }
.menue-auf .raster i:nth-child(1){ background:var(--g-rosa); } .menue-auf .raster i:nth-child(2){ background:var(--g-blau); }
.menue-auf .raster i:nth-child(3){ background:var(--sonne); } .menue-auf .raster i:nth-child(4){ background:var(--pink); }
header.kopf .menue-auf:hover .raster i:nth-child(1){ transform:translate(-2px,-2px) rotate(-8deg); }
header.kopf .menue-auf:hover .raster i:nth-child(2){ transform:translate(2px,-2px) rotate(8deg); }
header.kopf .menue-auf:hover .raster i:nth-child(3){ transform:translate(-2px,2px) rotate(8deg); }
header.kopf .menue-auf:hover .raster i:nth-child(4){ transform:translate(2px,2px) rotate(-8deg); border-radius:50%; }
header.kopf .logo-bunt { height:50px; }
@media (prefers-reduced-motion:reduce){ .menue-auf .raster i{ transition:none; } }

/* Overlay-Kachelmenue */
.menue { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; background:var(--espresso);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
.menue.auf { opacity:1; visibility:visible; }
.menuebar { flex:none; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; color:var(--grund); }
.menuebar .logo-bunt { height:38px; }
.menuebar .rechts { display:flex; align-items:center; gap:1.6rem; }
.menuebar a.klein { color:#faf7f2cc; text-decoration:none; font-size:.9rem; font-weight:600; }
.menuebar .sprache a { font-weight:700; } .menuebar .sprache a.an { color:var(--grund); }
.menue-zu { display:inline-flex; align-items:center; gap:.55rem; background:none; color:var(--grund); border:1.5px solid #faf7f244; border-radius:999px; padding:.5rem 1.2rem; font-family:'Open Sans'; font-weight:700; font-size:.9rem; cursor:pointer; }
.menue-zu:hover { border-color:var(--pink); color:var(--pink); }
.kacheln { flex:1; min-height:0; display:flex; flex-direction:column; gap:4px; padding:4px; }
.reihe { flex:1; min-height:0; display:flex; gap:4px; }
.kachel { flex:1; min-width:0; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:2rem 2.2rem; }
.kachel.k1{ background:var(--g-rosa); } .kachel.k2{ background:var(--g-blau); } .kachel.k3{ background:var(--g-vanille); }
.kachel.k4{ background:var(--g-papier); } .kachel.k5{ background:var(--g-blush); } .kachel.k6{ background:var(--sonne); }
.kachel .zahl { position:absolute; top:1.5rem; left:2.2rem; font-family:'Museo Slab'; font-size:.95rem; color:#2a1e1560; pointer-events:none; }
.kachel .pfeil { position:absolute; top:1.6rem; right:1.8rem; font-size:1.6rem; color:#2a1e1580; pointer-events:none; transition:transform .3s ease; }
.kachel:hover .pfeil { transform:translate(4px,-4px); }
.kachel .haupt { font-family:'Museo Slab'; font-size:clamp(1.6rem,3vw,2.8rem); color:var(--espresso); text-decoration:none; align-self:flex-start; }
.kachel .haupt::after { content:''; position:absolute; inset:0; z-index:1; }
.kachel .unter { list-style:none; position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:.3rem .5rem; margin-top:.9rem; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease, opacity .35s ease; }
.kachel:hover .unter, .kachel:focus-within .unter { max-height:220px; opacity:1; }
.kachel .unter a { text-decoration:none; color:var(--espresso); font-size:.84rem; background:#ffffff70; border-radius:999px; padding:.26rem .7rem; }
.kachel .unter a:hover { background:#fff; }
@media (max-width:820px){ .kacheln{ overflow-y:auto; } .reihe{ flex-direction:column; flex:none; } .kachel{ min-height:120px; } .kachel .unter{ max-height:220px; opacity:1; } }

/* Fuss */
footer.ende { display:flex; justify-content:space-between; padding:1.4rem 4vw 2.4rem; font-size:.85rem; color:#2a1e15aa; flex-wrap:wrap; gap:1rem; }
footer.ende a { color:#2a1e15aa; }

/* Invert-Zeiger */
@media (pointer:fine) { body.zeiger-aktiv, body.zeiger-aktiv a, body.zeiger-aktiv button { cursor:none; } }
#zeiger { position:fixed; left:0; top:0; z-index:9999; pointer-events:none; display:none; }
#zeiger svg { display:block; transform-origin:4px 3px; transition:transform .22s ease; filter:drop-shadow(0 1px 2px #2a1e1533); }
#zeiger svg path { fill:#FAF7F2; stroke:#EA5C9F; stroke-width:2.2; transition:fill .15s ease, stroke .15s ease; }
#zeiger.gross { mix-blend-mode:difference; }
#zeiger.gross svg { transform:scale(1.4); filter:none; }
#zeiger.gross svg path { fill:#ffffff; stroke:#ffffff; }
@media (prefers-reduced-motion: reduce) { #zeiger svg, #zeiger svg path { transition:none; } }