/* ═══════════════════════════════════════════════════════════════════════════
   intro-augenoptik.css — das Intro der Augenoptik-Seite (nur /augenoptik/, live seit 26.10.2026; Markup vorlagen/teil-intro.php, Bewegung
   assets/js/intro-augenoptik.js). Eingebunden von der Vorlage selbst, nicht von functions.php: eine Datei teil-*.css
   käme auf der Live-Seite für jeden mit und änderte den Bauplan des CSS-Bündels.

   Christopher, 26.10.2026: „Bitte Design deutlich verbessern … Warum der große Abstand zwischen Augenoptik und dem
   Text? … Vor das Augenoptik ein Brillen-Icon, einfach aber schön, in Blau. Text größer." Sein Beispiel (dunkles
   „Floating Liquid": große Schlagzeile, ruhig fließender Grund, schwebende Glasflächen) übersetzt in das Haus: hell,
   Hausfarben, und das Glas ist ein Brillenglas.

   Aufbau (Raster, zwei Spalten ab 900 px):
     links  Titel mit Icon, Leitsatz, darunter ohne Lücke der Einstieg auf einer Glasfläche
     rechts die Sehtafel: Zeichen unscharf, darüber schwebt ein Glas, in dem sie scharf und leicht vergrößert sind
   Bewegt werden nur Lagen (transform): die Farbflecken des Grundes, das Glas, der Entspiegelungsschimmer am Rand.
   „Bewegung reduzieren": nichts davon.
   ═══════════════════════════════════════════════════════════════════════════ */

.leistung-sammel .leistung-buehne.ao-intro{
  --ao-r:28px;
  --ao-flaeche:rgba(255,255,255,.6);
  --ao-rand:rgba(255,255,255,.92);
  --ao-schatten:0 28px 56px -34px rgba(19,55,109,.36), 0 2px 10px rgba(19,55,109,.05);
  padding:clamp(2.4rem, 6vh, 4.25rem) 0 clamp(1rem, 2.5vh, 1.75rem);
}

/* ── Der Grund: die vorhandene Fläche (.leistung-grund, seiten.css) und drei sehr langsame Farbflecken darüber ── */
.ao-flaeche{
  position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 0 62%, transparent 96%);
          mask-image:linear-gradient(180deg, #000 0 62%, transparent 96%);
}
.ao-flaeche span{
  position:absolute; border-radius:50%;
  width:clamp(340px, 52vw, 820px); aspect-ratio:1;
}
.ao-flaeche span:nth-child(1){
  left:-12%; top:-30%;
  background:radial-gradient(closest-side, rgba(205,222,245,.85), rgba(205,222,245,0));
  animation:ao-fleck-a 46s ease-in-out infinite alternate;
}
.ao-flaeche span:nth-child(2){
  right:-14%; top:6%;
  background:radial-gradient(closest-side, rgba(244,231,206,.9), rgba(244,231,206,0));
  animation:ao-fleck-b 58s ease-in-out infinite alternate;
}
.ao-flaeche span:nth-child(3){
  left:30%; top:34%; width:clamp(260px, 36vw, 560px);
  background:radial-gradient(closest-side, rgba(222,233,248,.75), rgba(222,233,248,0));
  animation:ao-fleck-c 71s ease-in-out infinite alternate;
}
@keyframes ao-fleck-a{ to{ transform:translate3d(9vw, 7vh, 0) scale(1.12) } }
@keyframes ao-fleck-b{ to{ transform:translate3d(-8vw, 9vh, 0) scale(.9) } }
@keyframes ao-fleck-c{ to{ transform:translate3d(-6vw, -8vh, 0) scale(1.18) } }

/* ── Raster ─────────────────────────────────────────────────────────────── */
.ao-raster{
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-areas:"kopf kopf" "einstieg tafel";
  grid-template-rows:auto auto;
  column-gap:clamp(2rem, 4.5vw, 5rem);
}
.ao-kopf{ grid-area:kopf; }
.ao-einstieg{ grid-area:einstieg; }
.ao-tafel{ grid-area:tafel; }

/* ── Titel mit Icon, Leitsatz ───────────────────────────────────────────── */
.ao-titel{
  display:flex; align-items:center; gap:.26em; flex-wrap:nowrap;
  margin:0;
  font-weight:800; font-size:clamp(2.55rem, 1.35rem + 4.4vw, 5.4rem); line-height:1;
  letter-spacing:-.028em; color:var(--text, #1F2A38);
}
.ao-icon{
  flex:none; width:1.2em; height:auto; overflow:visible;
  transform:translateY(.05em);        /* optisch auf die Mitte der Kleinbuchstaben, nicht der Zeilenbox */
}
.ao-icon-glas{ fill:url(#ao-icon-glas); stroke:var(--blau, #13376D); stroke-width:3; stroke-linejoin:round; }
.ao-icon-linie{ fill:none; stroke:var(--blau, #13376D); stroke-width:3; stroke-linecap:round; }
.ao-icon-licht{ fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; }
.ao-leitsatz{
  margin:clamp(.7rem, 1.4vw, 1.1rem) 0 0;
  font-size:clamp(1.08rem, .95rem + .55vw, 1.4rem); line-height:1.5;
  color:var(--text-leise, #6B7686); text-wrap:pretty;
}

/* ── Der Einstieg: eine Glasfläche, gleich unter dem Kopf ───────────────── */
.ao-einstieg{
  margin-top:clamp(1.4rem, 2.6vw, 2.2rem);
  padding:clamp(1.35rem, 2.7vw, 2.6rem) clamp(1.25rem, 3vw, 2.9rem);
  border-radius:var(--ao-r);
  background:var(--ao-flaeche);
  border:1px solid var(--ao-rand);
  box-shadow:var(--ao-schatten);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
          backdrop-filter:blur(16px) saturate(1.15);
}
.ao-einstieg-titel{
  margin:0 0 .5em;
  font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-weight:400;
  font-size:clamp(1.85rem, 1.2rem + 1.9vw, 2.75rem); line-height:1.08; letter-spacing:-.005em;
  color:var(--blau, #13376D);
}
.ao-text{ max-width:62ch; }
.ao-text p{
  margin:0 0 .85em;
  font-size:clamp(1.08rem, .98rem + .42vw, 1.28rem); line-height:1.62;
  color:var(--text, #1F2A38); text-wrap:pretty;
}
.ao-text > p:first-child{
  font-size:clamp(1.16rem, 1.02rem + .6vw, 1.45rem); line-height:1.55;
}
/* der Hinweis zum Herstellerportfolio: bleibt, als Fußnote unter einer feinen Goldlinie */
.ao-text > p:last-child:has(> em:only-child){
  margin:1.1rem 0 0; padding-top:.9rem;
  border-top:1px solid rgba(169,143,95,.38);
  font-size:clamp(.9rem, .86rem + .15vw, .98rem); line-height:1.55;
  color:var(--text-leise, #6B7686);
}
.ao-text > p:last-child{ margin-bottom:0; }

/* ── Die Sehtafel und das Glas ──────────────────────────────────────────── */
.ao-tafel{
  position:relative; overflow:hidden; isolation:isolate;
  container-type:size;
  min-height:22rem; margin-top:clamp(1.4rem, 2.6vw, 2.2rem);   /* auf einer Kante mit dem Einstieg */
  border-radius:var(--ao-r);
  background:linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,.42));
  border:1px solid var(--ao-rand);
  box-shadow:var(--ao-schatten);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
          backdrop-filter:blur(16px) saturate(1.15);
  touch-action:pan-y;
}
.ao-zeichen{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:space-evenly;
  padding:7cqh 0;
  --e:min(1.25cqw, 1.5cqh);
  font-weight:700; line-height:1; color:var(--blau, #13376D);
  user-select:none;
}
.ao-zeichen span{ display:block; letter-spacing:.55em; margin-right:-.55em; }
.ao-zeichen span:nth-child(1){ font-size:calc(15 * var(--e)); }
.ao-zeichen span:nth-child(2){ font-size:calc(10.6 * var(--e)); }
.ao-zeichen span:nth-child(3){ font-size:calc(7.8 * var(--e)); }
.ao-zeichen span:nth-child(4){ font-size:calc(5.8 * var(--e)); }
.ao-zeichen span:nth-child(5){ font-size:calc(4.4 * var(--e)); }
.ao-zeichen span:nth-child(6){ font-size:calc(3.4 * var(--e)); }
.ao-zeichen span:nth-child(7){ font-size:calc(2.7 * var(--e)); }
/* ohne Glas: so sieht man die Tafel — weich */
.ao-tafel > .ao-zeichen{ filter:blur(calc(.62 * var(--e))); opacity:.62; }

.ao-glas{
  --d:min(46cqw, 62cqh);
  --cx:var(--gcx, 50cqw); --cy:var(--gcy, 46cqh);
  position:absolute; left:0; top:0; z-index:2;
  width:var(--d); height:var(--d); border-radius:50%; overflow:hidden;
  transform:translate(calc(var(--cx) - 50%), calc(var(--cy) - 50%));
  background:rgba(255,255,255,.93);
  box-shadow:
    0 0 0 2px var(--gold, #CBB082),
    0 0 0 3.5px rgba(255,255,255,.7),
    0 34px 46px -22px rgba(19,55,109,.42),
    0 8px 18px -8px rgba(19,55,109,.18);
}
.ao-glas-innen{
  position:absolute; left:0; top:0; width:100cqw; height:100cqh;
  transform-origin:0 0;
  transform:translate(calc(var(--d) / 2 - var(--cx) * 1.12), calc(var(--d) / 2 - var(--cy) * 1.12)) scale(1.12);
}
/* Glasdicke am Rand, ein Glanzpunkt — über dem Bild im Glas */
.ao-glas::after{
  content:""; position:absolute; inset:0; z-index:2; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.95) 0 3.5%, rgba(255,255,255,0) 17%),
    radial-gradient(circle at 50% 50%, rgba(19,55,109,0) 64%, rgba(19,55,109,.06) 84%, rgba(19,55,109,.15) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), inset 0 -14px 26px -14px rgba(19,55,109,.22);
}
/* der Restreflex einer Entspiegelung: ein farbiger Schimmer am Rand, der langsam umläuft */
.ao-glas::before{
  content:""; position:absolute; inset:0; z-index:3; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 200deg,
    rgba(255,255,255,0) 0deg, rgba(126,186,168,.5) 34deg, rgba(128,150,226,.42) 62deg,
    rgba(203,176,130,.55) 92deg, rgba(255,255,255,0) 128deg, rgba(255,255,255,0) 360deg);
  -webkit-mask-image:radial-gradient(circle, transparent 0 80%, #000 92%, transparent 100%);
          mask-image:radial-gradient(circle, transparent 0 80%, #000 92%, transparent 100%);
  animation:ao-schimmer 38s linear infinite;
}
@keyframes ao-schimmer{ to{ transform:rotate(360deg) } }

/* ── Danach: die Sprungleiste rückt an das Intro heran ──────────────────── */
.leistung-sammel .ao-intro + .leistung-lauf{ padding-top:0; }
.leistung-sammel .ao-intro + .leistung-lauf > .leistung-sprung:first-child{ margin-top:clamp(.75rem, 2vw, 1.5rem); }

/* ── Tablet und Telefon: eine Spalte, die Tafel als Band zwischen Kopf und Einstieg ── */
@media (max-width:900px){
  .ao-raster{
    grid-template-columns:minmax(0, 1fr);
    grid-template-areas:"kopf" "tafel" "einstieg";
    grid-template-rows:auto;
  }
  .ao-tafel{ min-height:0; height:clamp(13.5rem, 46vw, 19rem); margin-top:clamp(1.1rem, 4vw, 1.75rem); }
  .ao-zeichen span{ letter-spacing:.45em; margin-right:-.45em; }
  .ao-zeichen{ --e:min(1.05cqw, 2.05cqh); padding:5cqh 0; }
  .ao-glas{ --d:min(44cqw, 74cqh); }
  .ao-einstieg{ margin-top:clamp(.9rem, 3.5vw, 1.4rem); }
}
@media (max-width:520px){
  .ao-zeichen span:nth-child(7){ display:none; }
  .ao-titel{ gap:.22em; }
}

@media (prefers-reduced-motion:reduce){
  .ao-flaeche span:nth-child(n), .ao-glas::before{ animation:none; }   /* :nth-child(n): so stark wie die Einzelregeln oben */
}