/* Portal Mensfelden (miesfelle.de): Design wie Chronik und Digitale Zeitreise. */

/* ---------- Schriften (selbst gehostet, SIL Open Font License, siehe schriften/OFL-*.txt) ---------- */
/* Herkunft: chronik/theme/zeitreise/public/zeitreise.css, Pfade auf schriften/ angepasst */
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(schriften/atkinson-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(schriften/atkinson-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(schriften/atkinson-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(schriften/atkinson-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata";font-weight:200 900;font-display:swap;src:url(schriften/literata-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-weight:200 900;font-display:swap;src:url(schriften/literata-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Farben wie Chronik und Zeitreise (Ortschronik-Blau, Wappen) ----------
   Herkunft: chronik/theme/zeitreise/public/zeitreise.css (--mf-*) und zeitreise/src/app/globals.css (.dim, .dark).
   Bei Farbänderungen dort hier nachziehen (PRD P-4).
   Klassen an <html> setzt assets/farbschema.js: light, dim (Dämmerung), dark (Dunkel); ohne Klasse gilt das System. */
:root {
  color-scheme:light;
  --mf-50:#f2f4fb; --mf-100:#e3e7f6; --mf-200:#c7cfec; --mf-300:#9eacdc; --mf-400:#7385c9;
  --mf-500:#5a6ab8; --mf-600:#454c9d; --mf-700:#223788; --mf-800:#1b2c6d; --mf-900:#152255; --mf-950:#0d1638;
  --mf-bg:#f8fafc; --mf-card:#fff; --mf-text:#0f172a; --mf-muted:#475569; --mf-border:#e2e8f0;
  --mf-band:var(--mf-700); --mf-band-hover:var(--mf-600);
  --mf-link:var(--mf-700); --mf-accent:var(--mf-100); --mf-accent-text:var(--mf-900);
  --mf-popover:#fff; --mf-popover-text:#0f172a; --mf-ring:var(--mf-600);
  --mf-feld:#fff; --mf-feld-rand:#64748b;

  --font-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-serif:"Literata",Georgia,"Times New Roman",serif;
}
/* Dämmerung: dunkles Mensfelden-Blau */
:root.dim {
  color-scheme:dark;
  --mf-bg:var(--mf-950); --mf-card:var(--mf-900); --mf-text:#f1f5f9; --mf-muted:var(--mf-200); --mf-border:var(--mf-800);
  --mf-band:var(--mf-800); --mf-band-hover:var(--mf-700);
  --mf-link:var(--mf-300); --mf-accent:var(--mf-800); --mf-accent-text:#f1f5f9;
  --mf-popover:var(--mf-900); --mf-popover-text:#f1f5f9; --mf-ring:var(--mf-300);
  --mf-feld:var(--mf-950); --mf-feld-rand:var(--mf-400);
}
/* Dunkel: fast schwarze Flächen, Blau für Band und Akzente; ohne JavaScript auch bei dunklem System */
:root.dark {
  color-scheme:dark;
  --mf-bg:#0a0a0a; --mf-card:#171717; --mf-text:#f5f5f5; --mf-muted:#a3a3a3; --mf-border:#262626;
  --mf-band:var(--mf-950); --mf-band-hover:var(--mf-800);
  --mf-link:var(--mf-300); --mf-accent:#262626; --mf-accent-text:#f5f5f5;
  --mf-popover:#171717; --mf-popover-text:#f5f5f5; --mf-ring:var(--mf-300);
  --mf-feld:#0a0a0a; --mf-feld-rand:#737373;
}
@media (prefers-color-scheme:dark) {
  :root:not(.light):not(.dim):not(.dark) {
    color-scheme:dark;
    --mf-bg:#0a0a0a; --mf-card:#171717; --mf-text:#f5f5f5; --mf-muted:#a3a3a3; --mf-border:#262626;
    --mf-band:var(--mf-950); --mf-band-hover:var(--mf-800);
    --mf-link:var(--mf-300); --mf-accent:#262626; --mf-accent-text:#f5f5f5;
    --mf-popover:#171717; --mf-popover-text:#f5f5f5; --mf-ring:var(--mf-300);
    --mf-feld:#0a0a0a; --mf-feld-rand:#737373;
  }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { background-color:var(--mf-bg); -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background-color:var(--mf-bg); color:var(--mf-text);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.6;
}
main { flex:1; width:100%; max-width:64rem; margin:0 auto; padding:2rem 1rem 3rem; }
h1, h2, h3 { line-height:1.25; margin:0 0 .75rem; }
h1 { font-size:1.75rem; }
h2 { font-size:1.375rem; }
h3 { font-size:1.125rem; }
p { margin:0 0 1rem; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--mf-link); text-underline-offset:.15em; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--mf-ring); outline-offset:2px; border-radius:2px; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
[hidden] { display:none !important; }

/* „Zum Inhalt springen“: erst bei Tastaturfokus sichtbar */
.skip-link {
  position:absolute; left:1rem; top:-4rem; z-index:20; padding:.5rem 1rem; border-radius:.5rem;
  background:var(--mf-card); color:var(--mf-text); font-weight:700;
}
.skip-link:focus { top:.5rem; }

/* ---------- Kopfband ---------- */
.kopf { background-color:var(--mf-band); color:#fff; }
.kopf :focus-visible { outline-color:#fff; }
.kopf-innen {
  max-width:80rem; margin:0 auto; padding:.5rem 16px; min-height:4rem;
  display:flex; align-items:center; gap:.75rem;
}
@media (min-width:640px) { .kopf-innen { padding-inline:24px; } }
.marke { display:flex; align-items:center; gap:.625rem; color:#fff; text-decoration:none; border-radius:.375rem; }
.marke img { width:auto; height:2.5rem; }
.marke-name { display:block; font-size:1.25rem; font-weight:700; line-height:1.1; }
.marke-zusatz { display:block; font-size:.875rem; line-height:1.2; color:var(--mf-100); }

/* ---------- Farbschema-Umschalter (wie zeitreise-mode in der Chronik) ---------- */
.farbschema { position:relative; margin-inline-start:auto; }
.farbschema-knopf {
  display:inline-flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem;
  padding:0; border:0; border-radius:.375rem; background:none; color:#fff; cursor:pointer;
}
.farbschema-knopf:hover, .farbschema-knopf[aria-expanded="true"] { background-color:var(--mf-band-hover); }
.symbol { width:1.25rem; height:1.25rem; flex:none; }
/* Sonne im hellen, Mond in den dunklen Schemata */
.farbschema-mond { display:none; }
:root.dim .farbschema-sonne, :root.dark .farbschema-sonne { display:none; }
:root.dim .farbschema-mond, :root.dark .farbschema-mond { display:inline-flex; }
.farbschema-menue {
  position:absolute; right:0; top:100%; z-index:10; min-width:10rem; margin:.5rem 0 0; padding:.25rem;
  list-style:none; border:1px solid var(--mf-border); border-radius:.5rem;
  background:var(--mf-popover); color:var(--mf-popover-text); box-shadow:0 10px 30px rgba(13,22,56,.25);
}
.farbschema-eintrag {
  display:flex; align-items:center; gap:.5rem; width:100%; min-height:2.5rem; padding:.375rem .5rem;
  border:0; border-radius:.375rem; background:none; color:inherit; font:inherit; font-size:.9375rem;
  text-align:start; cursor:pointer;
}
.farbschema-eintrag:hover, .farbschema-eintrag:focus { background:var(--mf-accent); color:var(--mf-accent-text); outline:none; }
.farbschema-eintrag .haken { margin-inline-start:auto; visibility:hidden; }
.farbschema-eintrag[aria-checked="true"] .haken { visibility:visible; }

/* ---------- Startseite ---------- */
/* Begrüßung und Abschnitte so breit wie die Kacheln */
.begruessung { margin-bottom:2rem; }
.begruessung p { font-size:1.125rem; color:var(--mf-muted); }

.kacheln { display:grid; grid-template-columns:1fr; gap:1.25rem; margin:0 0 2.5rem; padding:0; list-style:none; }
@media (min-width:40rem) { .kacheln { grid-template-columns:1fr 1fr; } }
.kachel {
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--mf-border); border-radius:.75rem; background:var(--mf-card);
}
.kachel img { width:100%; aspect-ratio:44 / 25; object-fit:cover; background:var(--mf-700); }
.kachel-text { padding:1rem 1.25rem 1.25rem; display:flex; flex-direction:column; flex:1; }
.kachel h2 { margin-bottom:.5rem; }
/* Ganze Kachel klickbar über genau einen Link (Überzug per ::after) */
.kachel h2 a { color:var(--mf-text); text-decoration:none; }
.kachel h2 a::after { content:""; position:absolute; inset:0; z-index:1; border-radius:.75rem; }
.kachel h2 a:focus-visible { outline:none; }
.kachel:has(h2 a:focus-visible) { outline:2px solid var(--mf-ring); outline-offset:2px; }
.kachel:hover { border-color:var(--mf-400); }
.kachel:hover h2 a { text-decoration:underline; }
.kachel p { margin-bottom:.75rem; }
.kachel-adresse { margin-top:auto; margin-bottom:0; font-size:.9375rem; color:var(--mf-muted); }
/* Direktlinks der Zeitreise liegen über dem Überzug und bleiben eigene Links */
.direktlinks { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; padding:0; list-style:none; }
.direktlinks a {
  display:inline-flex; align-items:center; min-height:2.75rem; padding:.25rem .875rem;
  border:1px solid var(--mf-border); border-radius:999px; background:var(--mf-card);
  font-size:.9375rem; text-decoration:none;
}
.direktlinks a:hover { background:var(--mf-accent); color:var(--mf-accent-text); }

.abschnitt { margin-bottom:2.5rem; }
.mitmachen { padding:1.25rem; border:1px solid var(--mf-border); border-radius:.75rem; background:var(--mf-card); }
.knoepfe { display:flex; flex-wrap:wrap; gap:.75rem; margin:0; padding:0; list-style:none; }
.knopf {
  display:inline-flex; align-items:center; min-height:2.75rem; padding:.5rem 1.125rem; border-radius:.5rem;
  font-weight:700; text-decoration:none;
}
.knopf-haupt { background:var(--mf-700); color:#fff; }
.knopf-haupt:hover { background:var(--mf-600); }
:root.dim .knopf-haupt, :root.dark .knopf-haupt { background:var(--mf-300); color:var(--mf-950); }
:root.dim .knopf-haupt:hover, :root.dark .knopf-haupt:hover { background:var(--mf-200); }
@media (prefers-color-scheme:dark) {
  :root:not(.light):not(.dim):not(.dark) .knopf-haupt { background:var(--mf-300); color:var(--mf-950); }
}
.knopf-neben { border:1px solid var(--mf-border); color:var(--mf-link); }
.knopf-neben:hover { background:var(--mf-accent); color:var(--mf-accent-text); }

/* Längere Texte in Literata (wie Fließtext der Chronik) */
.lesetext p, .lesetext li { font-family:var(--font-serif); font-size:1.0625rem; line-height:1.7; }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width:44rem; }
.rechtstext h1 { margin-bottom:1.5rem; }
.rechtstext section { margin-bottom:1.75rem; }
.rechtstext ul { padding-inline-start:1.25rem; }
.stand { font-size:.875rem; color:var(--mf-muted); }

/* ---------- Kontaktformular (Felder wie Chronik zeitreise.css, „Eingabefelder“) ---------- */
.einleitung { font-family:var(--font-serif); font-size:1.125rem; line-height:1.7; }
.formular { display:flex; flex-direction:column; gap:1.25rem; margin-top:1.5rem; }
.feld { display:flex; flex-direction:column; gap:.375rem; }
.feld label { font-weight:700; }
.feld input, .feld select, .feld textarea {
  width:100%; min-height:2.75rem; padding:.5rem .75rem; border:1px solid var(--mf-feld-rand); border-radius:.375rem;
  background:var(--mf-feld); color:var(--mf-text); font:inherit;
}
.feld textarea { resize:vertical; }
.feld select { max-width:20rem; }
.feld-hinweis { margin:0; font-size:.9375rem; color:var(--mf-muted); }
.feld-haken { flex-direction:row; align-items:flex-start; gap:.75rem; }
.feld-haken input { flex:none; width:1.375rem; min-height:0; height:1.375rem; margin:.15rem 0 0; accent-color:var(--mf-ring); }
.feld-haken label { font-weight:400; }
button.knopf { border:0; font:inherit; font-weight:700; cursor:pointer; }
/* Honigtopf: für Menschen unsichtbar, Bots füllen ihn aus */
.honigtopf { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
/* Fehlerseite: Grund per Anker (#limit …), ohne JavaScript */
.fehler-grund { display:none; }
.fehler-grund:target { display:block; font-weight:700; }
.rechtstext:has(.fehler-grund:target) .fehler-allgemein { display:none; }

/* ---------- Fußband wie Zeitreise (site-footer.tsx) und Chronik (zeitreise.css, .zeitreise-footer) ---------- */
.fuss { background-color:var(--mf-band); color:#fff; font-size:14px; }
.fuss-innen {
  display:flex; flex-direction:column; gap:4px; max-width:80rem; margin:0 auto; padding:24px 16px;
}
@media (min-width:640px) { .fuss-innen { flex-direction:row; justify-content:space-between; padding:24px; } }
.fuss p { margin:0; }
.fuss ul { display:flex; flex-wrap:wrap; gap:4px 16px; margin:0; padding:0; list-style:none; }
.fuss a { color:#fff; text-decoration:none; text-underline-offset:4px; }
.fuss a:hover, .fuss a[aria-current="page"] { text-decoration:underline; }
.fuss a:focus-visible { outline:2px solid #fff; outline-offset:2px; }
@media (pointer:coarse) { .fuss a { display:inline-flex; align-items:center; min-height:44px; } }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
@media print {
  .kopf, .fuss, .farbschema, .skip-link { display:none; }
}