/* ===========================================================
   Angersternchen – gemeinsame Basis für alle Designvarianten
   Farben, Schriften, Reset. Pro Variante kommt v1/v2/v3.css dazu.
   =========================================================== */

:root{
  color-scheme: light;

  /* --- Markenfarben ---
     Einzige Quelle ist theme.json: die Werte unten greifen auf die
     dort erzeugten Preset-Variablen zu und nennen den Hex-Wert nur noch
     als Rückfallebene. Farbe ändern heißt deshalb: theme.json ändern. */
  --navy:        var(--wp--preset--color--navy, #0f1b4c);   /* Logo-Dunkelblau, leicht vertieft – Fließtext & Flächen */
  /* Das Dunkelblau der Mutter-KG „De 11 Pille“, abgenommen von der
     Überschrift auf 11pille.com/angersternchen/. Gemessen: #183050.
     Dient als Anker für den Hero, damit die Nachwuchsgarde farblich
     zur KG gehört. */
  --pille-navy:  var(--wp--preset--color--pille-navy, #183050);
  --pille-deep:  var(--wp--preset--color--pille-deep, #081525);   /* dieselbe Linie, weiter abgedunkelt */
  --navy-soft:   var(--wp--preset--color--navy-soft, #253566);
  --blue:        var(--wp--preset--color--blue, #1b4fd8);   /* Royalblau der Gardekostüme – Primärfarbe */
  --blue-mid:    #4b85f0;
  --blue-light:  var(--wp--preset--color--blue-light, #8fc2ff);   /* hellblau */
  --blue-baby:   var(--wp--preset--color--blue-baby, #c8e2ff);   /* Babyblau – Menüleiste und Footer */
  --blue-pale:   var(--wp--preset--color--blue-pale, #d7e9ff);
  --blue-tint:   var(--wp--preset--color--blue-tint, #eef6ff);   /* zarte Flächen */

  --yellow:      var(--wp--preset--color--yellow, #ffd233);   /* Gold-Gelb – freundlicher als das Logo-Neon */
  --yellow-light:var(--wp--preset--color--yellow-light, #ffe99a);   /* hellgelb */
  --yellow-pale: var(--wp--preset--color--yellow-pale, #fff8e0);
  --yellow-neon: #fffc01;   /* ausschließlich fürs Logo selbst */

  --white:       #ffffff;

  /* --- Typo --- */
  --font-display:"Sansita Swashed", "Comic Sans MS", cursive;
  --font-body:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(.875rem, .83rem + .22vw, 1rem);
  --step-0:  clamp(1rem, .95rem + .28vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem);
  --step-3:  clamp(2rem, 1.5rem + 2.3vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.6rem + 4.4vw, 5rem);

  /* --- Maße --- */
  --wrap: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 22px;
  --radius-lg: 34px;
  --shadow: 0 10px 30px rgba(15,27,76,.10), 0 2px 8px rgba(15,27,76,.06);
  --shadow-lg: 0 24px 60px rgba(15,27,76,.18), 0 6px 18px rgba(15,27,76,.08);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--navy);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.02;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-1); }
p{ margin:0 0 1em; }
a{ color:var(--blue); }
img,svg,picture{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:min(var(--wrap), 100% - var(--gutter)*2); margin-inline:auto; }
/* Träger für SVG-Filterdefinitionen – darf nichts einnehmen */
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.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;
}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--blue); outline-offset:3px; border-radius:6px;
}

/* ---------- Das Sternenfenster: Logo als Schnittschablone ----------
   Außen Farbfläche, durch die Sternform hindurch das Foto.
   Der Löwe ist im Logo bereits Negativform, bleibt also in Außenfarbe
   stehen und hält die Marke lesbar.

   Drei Ebenen:
     .starwin        – trägt den Schlagschatten (filter wird sonst mitmaskiert)
     .starwin__ring  – gleiche Maske, leicht vergrößert -> Kontur/Aufkleber-Effekt
     .starwin__clip  – das maskierte Foto
   Die mask-image-Deklaration kommt aus der generierten assets/mask.css.   */
.starwin{ position:relative; filter:drop-shadow(0 22px 46px rgba(15,27,76,.42)); }
.starwin__ring,
.starwin__clip{
  position:absolute; inset:0;
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-position:center;   mask-position:center;
  -webkit-mask-size:contain;      mask-size:contain;
}
.starwin__ring{
  background:var(--ring-color, #fff);
  transform:scale(var(--ring-scale, 1.022));
  transform-origin:center;
}
.starwin__clip img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--photo-pos, center 40%);
}
.starwin__clip picture{ display:contents; }

/* ---------- Varianten-Umschalter (nur fürs Review, fliegt später raus) ---------- */
.devbar{
  position:fixed; inset:auto 0 0 0; z-index:999;
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  padding:.5rem .9rem;
  background:rgba(15,27,76,.93); color:#fff;
  font:500 13px/1.3 var(--font-body);
  backdrop-filter:blur(8px);
}
.devbar strong{ font-weight:700; }
.devbar a,.devbar button{
  color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.35);
  background:none; border-radius:99px; padding:.2rem .7rem; cursor:pointer;
  font:inherit;
}
.devbar a[aria-current]{ background:var(--yellow); color:var(--navy); border-color:var(--yellow); font-weight:700; }
.devbar .hint{ opacity:.7; margin-left:auto; }
@media (max-width:640px){ .devbar .hint{ display:none; } }
body{ }