/* Gemeinsame Gestaltung der Unterseiten (Shop, Impressum, Datenschutz). */
:root{
    --green:#15803D; --green-2:#22C55E; --blue:#0369A1;
    --bg:#F0FDF4; --ink:#14532D; --body:#334155; --muted:#64748B;
    --card:#FFFFFF; --line:#E3EBE5; --line-strong:#CFE0D4; --soft:#F6FAF7;
    --radius:16px; --shadow:0 1px 2px rgba(16,40,24,.04),0 6px 20px rgba(16,40,24,.06);
    --focus:#0369A1; --btn:var(--blue);
    color-scheme:light;
  }
  /* Hell ist der feste Ausgangszustand, siehe styles.css. */
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#0B1210; --ink:#E7F3EA; --body:#B9C7BD; --muted:#8AA093;
    --card:#131C18; --line:#23302A; --line-strong:#2E3D35; --soft:#182219;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 26px rgba(0,0,0,.45); --focus:#38BDF8;
  }
  :root[data-theme="light"]{
    --bg:#F0FDF4; --ink:#14532D; --body:#334155; --muted:#64748B;
    --card:#FFFFFF; --line:#E3EBE5; --line-strong:#CFE0D4; --soft:#F6FAF7;
    --shadow:0 1px 2px rgba(16,40,24,.04),0 6px 20px rgba(16,40,24,.06); --focus:#0369A1;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; color:var(--body);
    background:
      radial-gradient(1200px 420px at 50% -140px, color-mix(in srgb,var(--green) 22%, var(--bg)) 0%, rgba(0,0,0,0) 72%),
      var(--bg);
    font-family:"Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size:16px; line-height:1.65; padding:20px 16px 48px;
  }
  .wrap{max-width:1000px; margin:0 auto}
  a{color:var(--blue)}
  :focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:8px}
  .back{display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--muted);
    font-weight:600; font-size:14px; margin-bottom:16px}
  .back svg{width:18px;height:18px}
  .back:hover{color:var(--ink)}
  .head{display:flex; align-items:center; gap:14px; margin-bottom:8px; flex-wrap:wrap}
  .logo{
    width:60px; height:60px; border-radius:50%; flex:none;
    background:linear-gradient(135deg,var(--green),var(--green-2));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:"Lexend"; font-weight:700; font-size:21px;
    box-shadow:var(--shadow); border:3px solid var(--card);
  }
  img.logo{width:auto; max-width:min(100%,220px); height:56px; border-radius:0; background:none; box-shadow:none; border:none; object-fit:contain}
  .head h1{font-family:"Lexend"; color:var(--ink); font-size:24px; margin:0; line-height:1.2}
  .head .sub{color:var(--muted); font-size:14px; margin-top:2px}

/* Nur Shop-Seite */
.shop-head{margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
  .shop-head:empty{display:none}
  .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:22px; margin-top:18px}
  .intro{margin:0 0 4px; font-size:15.5px}
  /* Zwei-Klick-Box */
  .consent{text-align:center; padding:26px 22px}
  .consent h2{font-family:"Lexend"; color:var(--ink); font-size:18px; margin:0 0 8px}
  .consent p{margin:0 auto 16px; max-width:520px; font-size:15px}
  .consent .load{
    background:var(--btn); color:#fff; border:0; border-radius:12px; padding:13px 22px;
    font:inherit; font-weight:700; font-size:15.5px; cursor:pointer; box-shadow:var(--shadow);
  }
  .consent .load:hover{filter:brightness(1.06)}
  .consent .ico{width:44px;height:44px;color:var(--green);margin-bottom:6px}
  .off{text-align:center; padding:26px 22px}
  footer{text-align:center; margin-top:24px; color:var(--muted); font-size:13px; line-height:1.7}
  footer a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
  footer .brand{margin-top:10px; font-size:12px; opacity:.85}
  .fine{margin-top:18px}

/* Nur Rechtstexte */
  body.legal .wrap{max-width:720px}
.doc{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:22px 22px 8px; margin-top:18px;
  }
  .doc h2{font-family:"Lexend"; color:var(--ink); font-size:17px; margin:22px 0 8px}
  .doc h2:first-child{margin-top:2px}
  .doc h3{font-family:"Lexend"; color:var(--ink); font-size:15px; margin:16px 0 6px}
  .doc p{margin:0 0 14px; font-size:15.5px; color:var(--body)}
  .doc ul{margin:0 0 14px; padding-left:20px}
  .doc li{font-size:15.5px; color:var(--body); margin:0 0 5px}
  .doc strong{color:var(--ink); font-weight:600}
  .doc a{color:var(--blue); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere}
  .doc a:hover{color:var(--ink)}
  footer{text-align:center; margin-top:24px; color:var(--muted); font-size:13px; line-height:1.7}
  footer a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
  footer .brand{margin-top:10px; font-size:12px; opacity:.85}
  .iabox{border-top:1px dashed var(--line-strong); margin-top:8px; padding-top:16px}
  .iabox h2{font-family:"Lexend"; color:var(--ink); font-size:17px; margin:0 0 8px}
  .iabox p{margin:0 0 12px; font-size:15px}
  .iaload{background:var(--blue); color:#fff; border:0; border-radius:11px; padding:11px 18px;
    font:inherit; font-weight:700; font-size:14.5px; cursor:pointer}
  .iaload:hover{filter:brightness(1.06)}

  .skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--btn); color:#fff;
    padding:12px 18px; border-radius:0 0 12px 0; font-weight:700; text-decoration:none}
  .skip:focus{left:0}

/* Bedienfeld Barrierefreiheit */
.a11y{position:fixed; top:12px; right:12px; z-index:60}
  .a11y-toggle{width:46px;height:46px;border-radius:50%; background:var(--blue); color:#fff;
    box-shadow:0 6px 18px rgba(8,20,12,.28); display:flex;align-items:center;justify-content:center;
    border:2px solid var(--card); cursor:pointer}
  .a11y-toggle svg{width:24px;height:24px}
  .a11y-panel{position:absolute; top:54px; right:0; width:226px; background:var(--card); border:1px solid var(--line);
    border-radius:14px; box-shadow:0 20px 50px rgba(8,20,12,.3); padding:12px; display:grid; gap:8px}
  .a11y-panel[hidden]{display:none}
  .a11y-row{display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:600; color:var(--ink)}
  .a11y-btns{display:flex; gap:6px}
  .a11y-btns button{width:42px;height:42px;border-radius:10px;border:1px solid var(--line-strong);
    background:var(--card); color:var(--ink); font-weight:700; font-family:"Lexend"; cursor:pointer}
  .a11y-btns button:hover:not(:disabled){background:var(--soft)}
  .a11y-btns button:disabled{opacity:.4; cursor:default}
  .fs-val{display:block; font-size:12px; font-weight:600; color:var(--muted)}
  .a11y-item{display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 10px; border-radius:10px;
    border:1px solid var(--line-strong); background:var(--card); color:var(--ink); font:inherit; font-weight:600;
    font-size:14px; text-align:left; cursor:pointer}
  .a11y-item:hover{background:var(--soft)}
  .a11y-item svg{width:20px;height:20px; color:var(--blue); flex:none}
  .a11y-item.active{background:color-mix(in srgb,var(--blue) 12%, var(--card)); border-color:var(--blue)}