/* Локальные вариативные шрифты. Полные семейства, все веса — без обращений к Google. */
@font-face{
  font-family:'Baloo 2';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("/assets/fonts/Baloo2-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:'Baloo 2';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("/assets/fonts/Baloo2-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/HankenGrotesk-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:'Hanken Grotesk';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/HankenGrotesk-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Schibsted Grotesk';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("/assets/fonts/SchibstedGrotesk-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:'Schibsted Grotesk';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("/assets/fonts/SchibstedGrotesk-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lernstudio Elch — shared styles (extracted from design bundle) */
/* =========================================================================
   JULIA GRIDNEV — Brand Kit
   colors_and_type.css — single source of truth for color + type tokens
   Rebrand of agilemom.de. Colors retained from the original; everything
   else elevated for a calm, trustworthy, expert personal brand.
   ========================================================================= */

/* ---- Webfonts -----------------------------------------------------------
   Display/Logo : Schibsted Grotesk  (confident geometric caps)
   Text/UI      : Hanken Grotesk     (warm, humanist, highly legible)
   NOTE: loaded from Google Fonts for now. For production, self-host the
   woff2 files into /fonts and swap these @imports for @font-face. (flagged)
-------------------------------------------------------------------------- */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* vietnamese */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
/* latin-ext */
/* latin */
:root {
  /* === BRAND COLORS (retained from agilemom.de) ======================= */
  --terracotta-700: #A8451F;   /* deep, text-on-light accent / pressed   */
  --terracotta-600: #C2552A;   /* hover                                   */
  --terracotta-500: #DA6534;   /* PRIMARY brand accent (logo orange)      */
  --terracotta-400: #E68A5E;   /* light accent                            */
  --terracotta-200: #F2C7B2;   /* soft fill                               */
  --terracotta-100: #F8E4D9;   /* tint background                         */

  --gold-700: #A9761F;
  --gold-600: #C68C2E;         /* hover                                    */
  --gold-500: #DCA449;         /* SECONDARY warm highlight (button gold)   */
  --gold-400: #E8BE73;
  --gold-200: #F2DDAB;
  --gold-100: #F7ECD2;         /* tint background                          */

  /* === OLIVE (Lernstudio Elch — the book green in the logo) =========== */
  --olive-700: #47533A;        /* deep, text-on-light                      */
  --olive-600: #5C6B49;        /* hover / strong                           */
  --olive-500: #6E7E57;        /* PRIMARY green (logo book)                */
  --olive-400: #8A9A72;        /* light                                    */
  --olive-200: #C8D1B7;        /* soft fill                                */
  --olive-100: #E7ECDD;        /* tint background                          */

  /* Elch moose tan (from logo antlers/head) */
  --tan-600: #A9793F;
  --tan-500: #C0894E;
  --tan-100: #F0E4D3;

  /* === WARM NEUTRALS (derived from the cream + navy, oklch-tuned) ===== */
  --cream:     #FAF6E4;        /* primary canvas (page background)         */
  --paper:     #FFFDF6;        /* raised surface / cards                   */
  --sand-100:  #F4EED9;        /* subtle zebra / fills                     */
  --sand-200:  #EBE4CC;        /* hairline fills                           */
  --sand-300:  #DDD4B7;        /* borders / dividers                       */
  --sand-400:  #C9BE9B;        /* strong borders / disabled stroke         */

  --navy-900:  #10172A;
  --charcoal-900: #241f19;        /* INK — primary text, headings             */
  --navy-700:  #283044;        /* strong ink, secondary headings           */
  --ink-600:   #4B5266;        /* secondary / body-muted text              */
  --ink-400:   #818799;        /* tertiary / placeholders / captions       */
  --ink-300:   #A7AAB6;        /* disabled text                            */
  --white:     #FFFFFF;

  /* === SEMANTIC (harmonised to the warm palette) ====================== */
  --success-600: #3E7A4C;
  --success-500: #4E8C5A;
  --success-100: #E1EEE2;
  --warning-600: var(--gold-600);
  --warning-500: var(--gold-500);
  --warning-100: var(--gold-100);
  --error-600:   #A8341F;
  --error-500:   #C0452F;
  --error-100:   #F6E0D9;
  --info-600:    #356C86;
  --info-500:    #43809B;
  --info-100:    #DCEAEF;

  /* === SEMANTIC ROLE TOKENS (use these in product UI) ================= */
  --bg-canvas:        var(--cream);
  --bg-surface:       var(--paper);
  --bg-subtle:        var(--sand-100);
  --bg-accent:        var(--terracotta-500);
  --bg-accent-soft:   var(--terracotta-100);
  --bg-gold:          var(--gold-500);
  --bg-gold-soft:     var(--gold-100);

  --text-primary:     var(--navy-900);
  --text-secondary:   var(--ink-600);
  --text-muted:       var(--ink-400);
  --text-on-accent:   #FFFFFF;
  --text-on-gold:     var(--navy-900);   /* gold is light → navy text     */
  --text-accent:      var(--terracotta-700);

  --border-subtle:    var(--sand-200);
  --border-default:   var(--sand-300);
  --border-strong:    var(--sand-400);
  --border-accent:    var(--terracotta-500);
  --focus-ring:       color-mix(in oklch, var(--terracotta-500) 55%, transparent);

  /* === TYPOGRAPHY ===================================================== */
  --font-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-text:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Type scale — 16px base, ~1.25 major-third-ish, clamped for display   */
  --fs-display: clamp(2.75rem, 1.6rem + 4.4vw, 4rem); /* @kind other */
  --fs-h1:      clamp(2rem, 1.4rem + 2.2vw, 2.75rem); /* @kind other */
  --fs-h2:      1.875rem; /* @kind other */
  --fs-h3:      1.375rem; /* @kind other */
  --fs-h4:      1.125rem; /* @kind other */
  --fs-body-lg: 1.125rem; /* @kind other */
  --fs-body:    1rem; /* @kind other */
  --fs-small:   0.875rem; /* @kind other */
  --fs-caption: 0.78rem; /* @kind other */
  --fs-overline:0.72rem; /* @kind other */

  --lh-tight:   1.08; /* @kind other */
  --lh-snug:    1.25; /* @kind other */
  --lh-normal:  1.55; /* @kind other */
  --lh-relaxed: 1.7; /* @kind other */

  --ls-display: -0.02em; /* @kind other */
  --ls-heading: -0.012em; /* @kind other */
  --ls-body:    0em; /* @kind other */
  --ls-overline:0.14em; /* @kind other */
  --ls-wordmark:0.04em; /* @kind other */

  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:    700; /* @kind other */
  --fw-black:   800; /* @kind other */

  /* === SPACING (4px base) ============================================= */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10:128px;

  /* === RADII ========================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;     /* default — buttons, inputs, small cards         */
  --radius-lg: 18px;     /* cards, media                                    */
  --radius-xl: 28px;     /* hero panels                                     */
  --radius-pill: 999px;

  /* === SHADOWS (warm navy-tinted, soft) =============================== */
  --shadow-xs: 0 1px 2px rgba(16,23,42,0.05);
  --shadow-sm: 0 2px 6px rgba(16,23,42,0.07);
  --shadow-md: 0 6px 20px -6px rgba(16,23,42,0.12);
  --shadow-lg: 0 18px 44px -14px rgba(16,23,42,0.18);
  --shadow-accent: 0 10px 26px -10px rgba(218,101,52,0.45);

  /* === MOTION ========================================================= */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 130ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}

/* Глобальный ресет из обёртки дизайн-бандла. Вся вёрстка Elch написана
   в расчёте на border-box; без него блоки с падингами шире контейнера. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}


/* =========================================================================
   SEMANTIC ELEMENT STYLES — opt-in via .brand-type scope so cards/pages
   can apply consistent typography without global bleed.
   ========================================================================= */
.brand-type { color: var(--text-primary); font-family: var(--font-text);
  font-size: var(--fs-body); line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.brand-type .overline, .brand-type .eyebrow {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-overline); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--text-accent); }

.brand-type h1, .display-1 {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: var(--ls-display); color: var(--text-primary);
  text-wrap: balance; }

.brand-type h2, .heading-1 {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading); color: var(--text-primary);
  text-wrap: balance; }

.brand-type h3, .heading-2 {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h2); line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading); color: var(--text-primary); }

.brand-type h4, .heading-3 {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-h3); line-height: var(--lh-snug);
  color: var(--text-primary); }

.brand-type p, .body {
  font-size: var(--fs-body); line-height: var(--lh-relaxed);
  color: var(--text-secondary); text-wrap: pretty; }

.brand-type .lead {
  font-size: var(--fs-body-lg); line-height: var(--lh-relaxed);
  color: var(--text-secondary); }

.brand-type small, .caption {
  font-size: var(--fs-small); color: var(--text-muted); }

.brand-type a { color: var(--text-accent); text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px; }

code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* devanagari */
/* vietnamese */
/* latin-ext */
/* latin */
/* devanagari */
/* vietnamese */
/* latin-ext */
/* latin */
/* devanagari */
/* vietnamese */
/* latin-ext */
/* latin */
/* devanagari */
/* vietnamese */
/* latin-ext */
/* latin */
:root{
    --olive-700:#47533A; --olive-600:#5C6B49; --olive-500:#6E7E57;
    --olive-400:#8A9A72; --olive-200:#C8D1B7; --olive-100:#E7ECDD;
    --tan-600:#A9793F; --tan-500:#C0894E; --tan-100:#F0E4D3;
  }
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--cream);color:var(--navy-900);
    font-family:var(--font-text);font-size:16px;line-height:1.55;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  .elch h1,.elch h2,.elch h3,.elch h4{margin:0;font-family:var(--font-display);color:var(--navy-900);}
  .elch p{margin:0;} .elch a{color:inherit;text-decoration:none;} .elch img{display:block;max-width:100%;}
  .elch a{color:var(--olive-600);} .elch a:hover{color:var(--olive-700);}
  .wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
  .rounded{font-family:'Baloo 2',system-ui,sans-serif;}
  .eyebrow{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.15em;
    text-transform:uppercase;color:var(--olive-600);}
  .muted{color:var(--ink-600);line-height:1.7;}

  .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-text);font-weight:600;
    font-size:15px;padding:14px 24px;border-radius:var(--radius-md);border:2px solid transparent;
    cursor:pointer;line-height:1;transition:all var(--dur-base) var(--ease-out);white-space:nowrap;}
  .btn i{width:18px;height:18px;}
  .elch .btn-primary{background:var(--olive-600);color:#fff;box-shadow:0 10px 24px -12px rgba(71,83,58,.6);}
  .elch .btn-primary:hover{background:var(--olive-700);color:#fff;transform:translateY(-1px);}
  .elch .btn-accent{background:var(--gold-500);color:var(--navy-900);box-shadow:0 10px 24px -12px rgba(169,118,31,.5);}
  .elch .btn-accent:hover{background:var(--gold-400);color:var(--navy-900);transform:translateY(-1px);}
  .elch .btn-outline{background:transparent;color:var(--olive-700);border-color:var(--olive-500);}
  .elch .btn-outline:hover{background:var(--olive-500);color:#fff;}
  .elch .btn-ghost{background:transparent;color:var(--olive-700);padding:14px 6px;}
  .elch .btn-ghost:hover{gap:13px;}

  header.nav{position:sticky;top:0;z-index:50;background:color-mix(in oklch,var(--cream) 88%,transparent);
    backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color var(--dur-base),box-shadow var(--dur-base);}
  header.nav.scrolled{border-bottom-color:var(--sand-300);box-shadow:var(--shadow-sm);}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}
  .brand{display:flex;align-items:center;gap:11px;}
  .brand img{width:50px;height:50px;object-fit:contain;}
  .brand .wm{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:24px;color:var(--navy-900);line-height:1;}
  .brand .wm b{color:var(--tan-600);}
  .menu{display:flex;align-items:center;gap:30px;}
  .menu a{font-weight:500;font-size:15px;color:var(--navy-700);transition:color var(--dur-fast);white-space:nowrap;}
  .menu a:hover,.menu a.active{color:var(--olive-600);}
  .nav-cta{display:flex;align-items:center;gap:12px;}
  .burger{display:none;width:44px;height:44px;border:none;background:transparent;cursor:pointer;
    align-items:center;justify-content:center;color:var(--navy-900);border-radius:10px;}
  .burger:hover{background:var(--sand-200);} .burger i{width:26px;height:26px;}
  .mobile-menu{display:none;flex-direction:column;gap:2px;padding:12px 24px 22px;background:var(--cream);
    border-bottom:1px solid var(--sand-300);box-shadow:var(--shadow-md);}
  .mobile-menu a{font-weight:600;font-size:17px;color:var(--navy-700);padding:13px 6px;border-bottom:1px solid var(--sand-200);}
  .mobile-menu a:last-of-type{border-bottom:none;}
  .mobile-menu .btn{margin-top:12px;justify-content:center;}
  .mobile-menu.open{display:flex;}

  .hero{padding:60px 0 76px;}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
  .hero h1{font-size:var(--fs-display);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:16px 0 0;text-wrap:balance;}
  .hero h1 .accent{color:var(--tan-600);}
  .hero .sub{font-family:var(--font-display);font-weight:600;font-size:1.28rem;color:var(--olive-700);margin-top:14px;}
  .hero p.muted{margin-top:18px;max-width:30em;}
  .hero .cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}
  .trust{display:flex;align-items:center;gap:22px;margin-top:32px;flex-wrap:wrap;}
  .trust .item{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-600);font-weight:500;}
  .trust .item i{width:18px;height:18px;color:var(--olive-500);}
  .hero-media{position:relative;}
  .hero-media .photo-ph{width:100%;height:480px;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);}
  .hero-badge{position:absolute;left:16px;bottom:18px;background:var(--paper);border-radius:var(--radius-md);
    box-shadow:var(--shadow-md);padding:13px 17px;display:flex;align-items:center;gap:12px;}
  .hero-badge .ic{width:40px;height:40px;border-radius:10px;background:var(--olive-100);color:var(--olive-600);
    display:flex;align-items:center;justify-content:center;} .hero-badge .ic i{width:21px;height:21px;}
  .hero-badge b{font-family:var(--font-display);font-size:20px;color:var(--navy-900);display:block;line-height:1;}
  .hero-badge span{font-size:12px;color:var(--ink-400);}

  section{padding:82px 0;}
  .sec-head{max-width:700px;margin:0 auto 50px;text-align:center;}
  .sec-head h2{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.01em;margin-top:12px;text-wrap:balance;}
  .sec-head p{margin-top:15px;}

  .offer{background:var(--paper);}
  .offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .card{background:var(--cream);border:1px solid var(--sand-200);border-radius:var(--radius-lg);
    padding:30px 26px;display:flex;flex-direction:column;gap:13px;
    transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base);}
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
  .card .tile{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;}
  .card .tile i{width:25px;height:25px;}
  .tile.olive{background:var(--olive-100);color:var(--olive-600);}
  .tile.terra{background:var(--gold-100);color:var(--gold-700);}
  .tile.tan{background:var(--tan-100);color:var(--tan-600);}
  .card h3{font-size:1.28rem;font-weight:700;}
  .card p{color:var(--ink-600);line-height:1.6;font-size:14.5px;flex:1;}
  .card .more{font-weight:600;color:var(--olive-600);font-size:14px;display:inline-flex;align-items:center;gap:7px;}
  .card.wide{grid-column:span 3;flex-direction:row;align-items:center;gap:26px;background:var(--olive-500);color:#fff;border:none;}
  .card.wide .tile{background:rgba(255,255,255,.18);color:#fff;flex:none;width:60px;height:60px;}
  .card.wide h3{color:#fff;} .card.wide p{color:#EAF0E0;flex:1;}
  .card.wide .btn{flex:none;background:var(--gold-500);color:var(--navy-900);box-shadow:none;border-color:transparent;}
  .card.wide .btn:hover{background:var(--gold-400);transform:translateY(-1px);}

  .about .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;}
  .about-photos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px;}
  .about-photos .photo-ph{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);}
  .about-photos .tall{grid-row:span 2;height:100%;min-height:340px;}
  .about-photos .short{height:158px;}
  .about h2{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.01em;margin-top:12px;}
  .about p{margin-top:16px;color:var(--ink-600);line-height:1.7;}
  .about .facts{display:flex;gap:30px;margin-top:26px;flex-wrap:wrap;}
  .about .facts .f b{font-family:var(--font-display);font-size:30px;color:var(--olive-600);display:block;line-height:1;}
  .about .facts .f span{font-size:13px;color:var(--ink-400);}

  .method{background:var(--olive-100);}
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .why-card{background:var(--paper);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-sm);}
  .why-card .n{width:44px;height:44px;border-radius:50%;background:var(--tan-500);color:#fff;
    display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:18px;}
  .why-card h3{font-size:1.2rem;font-weight:700;}
  .why-card p{color:var(--ink-600);font-size:14.5px;line-height:1.6;}

  .webinar .wrap{background:var(--charcoal-900);border-radius:var(--radius-xl);padding:52px 56px;
    display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;color:var(--cream);}
  .webinar .tag{display:inline-flex;align-items:center;gap:8px;background:rgba(110,126,87,.28);color:var(--olive-200);
    font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:7px 13px;border-radius:999px;white-space:nowrap;}
  .webinar h2{color:var(--cream);font-size:2rem;font-weight:700;margin-top:16px;}
  .webinar p{color:#CFC7B6;margin-top:12px;line-height:1.6;}
  .webinar .meta{display:flex;gap:22px;margin-top:20px;flex-wrap:wrap;}
  .webinar .meta .m{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--olive-200);font-weight:500;}
  .webinar .meta .m i{width:17px;height:17px;}
  .webinar .box{background:var(--paper);border-radius:var(--radius-lg);padding:26px;text-align:center;color:var(--navy-900);}
  .webinar .box .price{font-family:var(--font-display);font-weight:800;font-size:34px;}
  .webinar .box .old{color:var(--ink-400);text-decoration:line-through;font-size:16px;margin-left:8px;}
  .webinar .box .btn{width:100%;justify-content:center;margin-top:16px;}

  .q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .q-card{background:var(--paper);border:1px solid var(--sand-200);border-radius:var(--radius-lg);padding:30px;display:flex;flex-direction:column;gap:16px;}
  .q-card .stars{display:flex;gap:3px;color:var(--gold-500);} .q-card .stars i{width:17px;height:17px;fill:currentColor;}
  .q-card p{color:var(--navy-700);line-height:1.6;font-size:15px;}
  .q-card .by{display:flex;align-items:center;gap:12px;margin-top:auto;}
  .q-card .av{width:42px;height:42px;border-radius:50%;background:var(--olive-100);color:var(--olive-600);
    display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;}
  .q-card .by b{font-size:14px;color:var(--navy-900);display:block;} .q-card .by span{font-size:12.5px;color:var(--ink-400);}

  .final{background:var(--olive-600);}
  .final .wrap{text-align:center;max-width:720px;}
  .final h2{color:var(--cream);font-size:var(--fs-h1);font-weight:800;letter-spacing:-.01em;}
  .final p{color:#E4EAD9;margin-top:16px;font-size:1.05rem;line-height:1.6;}
  .final .cta{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap;}
  .final .btn-primary{background:var(--gold-500);color:var(--navy-900);box-shadow:none;}
  .final .btn-primary:hover{background:var(--gold-400);}
  .final .btn-outline{color:var(--cream);border-color:rgba(255,255,255,.5);}
  .final .btn-outline:hover{background:var(--cream);color:var(--olive-700);border-color:var(--cream);}

  footer.elch-foot{background:var(--charcoal-900);color:var(--cream);padding:60px 0 30px;}
  footer.elch-foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
  footer.elch-foot .brand img{width:44px;height:44px;}
  footer.elch-foot .brand .wm{color:var(--cream);}
  footer.elch-foot .brand .wm b{color:var(--olive-400);}
  .about-f{color:#B6AE9E;font-size:14px;line-height:1.6;margin-top:14px;max-width:26em;}
  .socials{display:flex;gap:10px;margin-top:16px;}
  .socials a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--cream);transition:background var(--dur-fast);}
  .socials a:hover{background:var(--olive-500);} .socials a svg,.socials a i{width:18px;height:18px;}
  footer.elch-foot h4{font-family:var(--font-display);font-size:14px;color:var(--cream);margin-bottom:14px;letter-spacing:.02em;}
  footer.elch-foot .col a{display:block;color:#B6AE9E;font-size:14px;padding:6px 0;transition:color var(--dur-fast);}
  footer.elch-foot .col a:hover{color:var(--gold-400);}
  .footer-base{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;display:flex;
    align-items:center;justify-content:space-between;color:#8C8474;font-size:13px;gap:12px;flex-wrap:wrap;}
  .footer-base span{color:#97907E;}

  @media(max-width:980px){
    .hero .wrap,.about .wrap,.webinar .wrap,.why-grid,.q-grid,.offer-grid{grid-template-columns:1fr;}
    .card.wide{flex-direction:column;align-items:flex-start;text-align:left;grid-column:auto;}
    .menu,.nav-cta .btn{display:none;} .burger{display:flex;}
    footer.elch-foot .wrap{grid-template-columns:1fr 1fr;}
    .hero-media{order:-1;} section{padding:64px 0;}
    .webinar .wrap{padding:38px 30px;} .final .wrap{max-width:none;}
  }
  @media(max-width:640px){
    .wrap{padding:0 20px;} section{padding:52px 0;} .sec-head{margin-bottom:36px;}
    .hero{padding:34px 0 48px;} .hero h1{font-size:2.5rem;} .hero .sub{font-size:1.14rem;}
    .hero-media .photo-ph{height:360px;} .about-photos .tall{min-height:280px;} .about-photos .short{height:140px;}
    footer.elch-foot .wrap{grid-template-columns:1fr 1fr;gap:28px 20px;} .footer-base{flex-direction:column;align-items:flex-start;gap:8px;}
    .cta .btn,.final .cta .btn{flex:1 1 auto;justify-content:center;}
  }
  @media(max-width:400px){.hero h1{font-size:2.2rem;} footer.elch-foot .wrap{grid-template-columns:1fr;} .cta{flex-direction:column;} .cta .btn{width:100%;}}

/* ===== Legal pages (Impressum, Datenschutz) ===== */
.legal{padding:56px 0 80px;}
.legal .wrap{max-width:760px;}
.legal .back{display:inline-block;margin-bottom:18px;font-size:14px;font-weight:600;}
.legal h1{font-size:var(--fs-h1,2.2rem);font-weight:800;letter-spacing:-.02em;margin-bottom:8px;}
.legal .updated{font-size:13.5px;color:var(--ink-400,#8a8a80);margin-bottom:28px;}
.legal h2{font-size:1.15rem;font-weight:700;margin:34px 0 8px;}
.legal h3{font-size:1rem;font-weight:700;margin:22px 0 6px;}
.legal p{margin:8px 0;line-height:1.75;}
.legal ul{margin:10px 0;padding-left:22px;line-height:1.75;}
.legal li{margin:6px 0;}
.legal address{font-style:normal;line-height:1.8;}
.legal .box{border:1px solid var(--sand-300,#ddd6c4);border-radius:14px;padding:20px 24px;margin:18px 0;}


/* Заглушки под фото: видимая рамка с подписью, как в исходном макете.
   При появлении реальных снимков div заменяется на <img> с теми же классами. */
.elch .photo-ph{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:20px;background:var(--sand-100,#f3efe2);border:1.5px dashed var(--sand-400,#c9be9b);
  color:var(--ink-400,#8b8577);font-size:14px;line-height:1.45;}
.elch .about-photos .photo-ph.tall{min-height:300px;}
.elch .about-photos .photo-ph.short{min-height:143px;}


/* ===== Inhaltsseiten (Lernstudio, Angebot, Über mich, Infos) ===== */

/* Kompakter Seiten-Hero ohne Bildspalte */
.elch .page-hero{padding:56px 0 44px;background:var(--paper);border-bottom:1px solid var(--sand-200);}
.elch .page-hero .wrap{max-width:860px;text-align:center;}
.elch .page-hero h1{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.02em;margin-top:12px;text-wrap:balance;}
.elch .page-hero .lead-line{font-family:var(--font-display);font-weight:600;font-size:1.2rem;
  color:var(--olive-700);margin-top:14px;}
.elch .page-hero p{color:var(--ink-600);line-height:1.75;margin-top:16px;text-align:left;}
.elch .page-hero .cta{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap;}

/* Fließtext-Block mit optionaler Überschrift */
.elch .prose{max-width:780px;margin:0 auto;}
.elch .prose.left{margin:0;}
.elch .prose h2{font-size:var(--fs-h2,1.75rem);font-weight:700;letter-spacing:-.01em;margin-bottom:14px;}
.elch .prose h3{font-size:1.2rem;font-weight:700;margin:26px 0 8px;}
.elch .prose p{color:var(--ink-600);line-height:1.78;margin-top:14px;}
.elch .prose p:first-of-type{margin-top:0;}
.elch .prose p strong{color:var(--navy-900);}
.elch .prose .btn{margin-top:26px;}

/* Hervorgehobener Praxis-Kasten */
.elch .note{background:var(--olive-100);border-left:4px solid var(--olive-500);
  border-radius:var(--radius-md);padding:26px 30px;max-width:780px;margin:0 auto;}
.elch .note .label{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--olive-700);}
.elch .note blockquote{margin:12px 0 0;font-family:var(--font-display);font-size:1.15rem;
  font-weight:600;color:var(--navy-900);line-height:1.5;}
.elch .note p{color:var(--ink-600);line-height:1.75;margin-top:14px;}

/* Prinzipien E-L-C-H */
.elch .principles{display:grid;gap:20px;}
.elch .principle{background:var(--paper);border:1px solid var(--sand-200);border-radius:var(--radius-lg);
  padding:28px 30px;display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start;}
.elch .principle .letter{width:64px;height:64px;border-radius:18px;background:var(--olive-600);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1;}
.elch .principle h3{font-size:1.28rem;font-weight:700;}
.elch .principle p{color:var(--ink-600);line-height:1.7;font-size:15px;margin-top:10px;}

/* Ablauf-Schritte */
.elch .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.elch .step{background:var(--paper);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm);}
.elch .step .n{width:42px;height:42px;border-radius:50%;background:var(--olive-600);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:17px;margin-bottom:16px;}
.elch .step h3{font-size:1.12rem;font-weight:700;}
.elch .step p{color:var(--ink-600);font-size:14.5px;line-height:1.65;margin-top:10px;}

/* Zeiten-Tabelle */
.elch .times{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--sand-200);border-radius:var(--radius-md);overflow:hidden;}
.elch .times th,.elch .times td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--sand-200);font-size:15px;}
.elch .times th{font-family:var(--font-display);font-weight:700;color:var(--navy-900);background:var(--olive-100);}
.elch .times tr:last-child td{border-bottom:none;}
.elch .times td:last-child{font-weight:600;color:var(--olive-700);white-space:nowrap;}

/* FAQ */
.elch .faq{max-width:780px;margin:0 auto;display:grid;gap:12px;}
.elch .faq details{background:var(--paper);border:1px solid var(--sand-200);
  border-radius:var(--radius-md);padding:0 22px;}
.elch .faq summary{cursor:pointer;list-style:none;padding:18px 0;font-family:var(--font-display);
  font-weight:700;font-size:16px;color:var(--navy-900);display:flex;
  align-items:center;justify-content:space-between;gap:16px;}
.elch .faq summary::-webkit-details-marker{display:none;}
.elch .faq summary::after{content:"+";font-size:22px;color:var(--olive-600);line-height:1;flex:none;}
.elch .faq details[open] summary::after{content:"–";}
.elch .faq details p{color:var(--ink-600);line-height:1.75;padding-bottom:20px;font-size:15px;}

/* Qualifikationen / Erfahrung */
.elch .creds{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:0 auto;}
.elch .creds .col{background:var(--paper);border:1px solid var(--sand-200);
  border-radius:var(--radius-lg);padding:28px 30px;}
.elch .creds h3{font-size:1.12rem;font-weight:700;margin-bottom:14px;}
.elch .creds ul{list-style:none;margin:0;padding:0;}
.elch .creds li{position:relative;padding:8px 0 8px 30px;color:var(--ink-600);
  font-size:15px;line-height:1.55;}
.elch .creds li::before{content:"✓";position:absolute;left:0;top:8px;
  color:var(--olive-600);font-weight:700;}

/* Signatur-Zitat */
.elch .signature{max-width:780px;margin:0 auto;text-align:center;}
.elch .signature blockquote{margin:0;font-family:var(--font-display);font-size:1.5rem;font-weight:600;
  color:var(--navy-900);line-height:1.45;text-wrap:balance;}
.elch .signature .who{margin-top:18px;font-size:14.5px;color:var(--ink-400);}
.elch .signature .who b{display:block;font-family:var(--font-display);font-size:16px;color:var(--navy-900);}

/* "in Vorbereitung"-Markierung */
.elch .soon{display:inline-flex;align-items:center;gap:8px;background:var(--tan-100);color:var(--tan-600);
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 14px;border-radius:999px;}

/* Kontaktzeilen */
.elch .contact-list{display:grid;gap:14px;max-width:520px;margin:0 auto;}
.elch .contact-list .row{display:flex;align-items:center;gap:14px;background:var(--paper);
  border:1px solid var(--sand-200);border-radius:var(--radius-md);padding:18px 22px;}
.elch .contact-list .row i{width:22px;height:22px;color:var(--olive-600);flex:none;}
.elch .contact-list .row b{display:block;font-family:var(--font-display);font-size:14px;color:var(--navy-900);}
.elch .contact-list .row span{font-size:14.5px;color:var(--ink-600);}

@media(max-width:980px){
  .elch .steps,.elch .creds{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .elch .principle{grid-template-columns:1fr;gap:16px;}
  .elch .note{padding:22px 20px;}
  .elch .times th,.elch .times td{padding:13px 14px;font-size:14px;}
}


/* ===== Hero-Video (Loop im Bildslot) ===== */
.hero-media .hero-frame{position:relative;}
.hero-media .hero-video{
  display:block;width:100%;height:480px;object-fit:cover;
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  background:var(--sand-100);
}
/* Tonschalter: sitzt gegenüber dem Badge, damit sich beide nicht überlagern */
.hero-sound{
  position:absolute;right:16px;bottom:18px;z-index:2;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--sand-300);
  box-shadow:var(--shadow-md);color:var(--olive-600);cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.hero-sound:hover{background:var(--olive-100);transform:translateY(-1px);}
.hero-sound:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;}
.hero-sound[aria-pressed="true"]{background:var(--olive-600);color:#fff;border-color:var(--olive-600);}
.hero-sound i{width:20px;height:20px;}
/* Unter 980px steht das Bild oben und wird schmaler: das Badge wuerde sonst
   im Video liegen. Deshalb rutscht es dort unter das Video. */
@media(max-width:980px){
  .hero-media .hero-badge{position:static;margin-top:14px;width:fit-content;}
  /* Grid-Kinder duerfen unter ihre min-content-Breite schrumpfen. Ohne das
     sprengt die Hero-Spalte auf schmalen Screens den Viewport (bestand schon
     vor dem Video, faellt aber mit dem Video sofort auf). */
  .hero .wrap > *{min-width:0;}
  .hero .cta .btn{white-space:normal;}
}
@media(max-width:640px){
  .hero-media .hero-video{height:360px;}
  .hero-sound{width:42px;height:42px;right:12px;bottom:14px;}
}
/* Nutzer mit reduzierter Bewegung bekommen ein Standbild statt der Schleife */
@media(prefers-reduced-motion:reduce){
  .hero-sound{display:none;}
}

/* Кнопка-переход под секцией (главная: Angebot / Lernkonzept) */
.sec-cta{display:flex;justify-content:center;margin-top:34px;}
/* Перечисление тем внутри карточки предложения */
.offer-grid .card .items{font-weight:600;color:var(--olive-500);margin-top:6px;font-size:14.5px;}

/* Галерея студии: фото с подписями (lernstudio.html) */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:30px;
  max-width:960px;margin-left:auto;margin-right:auto;}
.galerie figure{margin:0;background:var(--paper);border:1px solid var(--sand-200);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.galerie img{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;}
.galerie figcaption{padding:14px 16px 16px;}
.galerie figcaption b{display:block;font-family:var(--font-display);font-weight:700;
  font-size:15.5px;color:var(--olive-700);}
.galerie figcaption span{display:block;margin-top:5px;font-size:14px;color:var(--ink-600);line-height:1.5;}
/* Реальные фото в местах прежних заглушек */
.about-photos img{display:block;width:100%;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);object-fit:cover;}
.about-photos img.tall{grid-row:span 2;height:100%;min-height:340px;}
.about-photos img.short{height:158px;}

/* Одиночный портрет в блоке «Hallo, ich bin Julia Gridnev» */
.about .about-foto img{display:block;width:100%;height:auto;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);}

/* ── Laufband der Elternstimmen ──────────────────────────────────────────
   Läuft von selbst, pausiert bei Hover/Fokus. Die Kopie der Karten legt
   site.js an, damit neue Stimmen einfach ins HTML gehören und sonst nichts. */
.stimmen-lauf{overflow:hidden;padding:4px 0 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.stimmen-spur{display:flex;gap:22px;width:max-content;
  animation:stimmen-zug var(--zug-dauer,50s) linear infinite;}
.stimmen-lauf:hover .stimmen-spur,
.stimmen-lauf:focus-within .stimmen-spur{animation-play-state:paused;}
.stimmen-spur .q-card{flex:0 0 340px;height:auto;}
@keyframes stimmen-zug{from{transform:translateX(0);}
                       to{transform:translateX(calc(-50% - 11px));}}
@media(max-width:640px){.stimmen-spur .q-card{flex-basis:290px;}}
/* Ohne Bewegung: kein Autolauf, dafür manuell wischbar */
@media(prefers-reduced-motion:reduce){
  .stimmen-lauf{overflow-x:auto;}
  .stimmen-spur{animation:none;}
}

@media(max-width:720px){
  .galerie{grid-template-columns:1fr;}
  .galerie img{aspect-ratio:4/3;height:auto;}
}

/* <picture> ist jetzt das Rasterelement — Grössen dorthin durchreichen */
.about-photos picture{display:block;min-width:0;}
.about-photos picture:has(img.tall){grid-row:span 2;height:100%;}
.about-photos picture:has(img.tall) img{height:100%;min-height:340px;}
.about-photos picture:has(img.short) img{height:158px;}
.about-photos picture img{width:100%;object-fit:cover;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);display:block;}
.galerie figure picture{display:block;}
.about .about-foto picture{display:block;}

/* Karte auf "Infos & Ablauf" — OpenStreetMap, setzt keine Cookies */
.karte{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);
  background:var(--paper);border:1px solid var(--sand-200);}
.karte iframe{display:block;width:100%;height:340px;border:0;}
.karte-fuss{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;flex-wrap:wrap;}
.karte-fuss b{display:block;font-family:var(--font-display);font-size:16px;color:var(--olive-700);}
.karte-fuss span{font-size:14px;color:var(--ink-600);}
@media(max-width:640px){.karte iframe{height:260px;}}

/* Über mich: zwei gleich grosse Hochformate nebeneinander */
.about-photos:has(picture:nth-child(2)):not(:has(picture:nth-child(3))){
  grid-template-rows:auto;}
.about-photos:not(:has(picture:nth-child(3))) picture:has(img.tall){grid-row:auto;}
.about-photos:not(:has(picture:nth-child(3))) picture:has(img.tall) img{
  min-height:0;height:auto;aspect-ratio:3/4;}

/* Statische Karte: fertiges Bild bei uns auf dem Server, kein fremder Aufruf */
.karte-bild{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);
  border:1px solid var(--sand-200);background:var(--paper);}
.karte-bild img{display:block;width:100%;height:auto;}

/* ── Kontraste nach WCAG AA nachgezogen (Prüfung 25.08.2026) ───────────── */
/* Sekundärtext war mit #818799 auf hellem Grund bei 3.5:1 — jetzt 4.6:1 */
:root{--ink-400:#6B7285;}
/* Themenzeile in den Angebotskarten: Olive 500 -> dunkler */
.offer-grid .card .items{color:var(--olive-700);}
/* Nummern in den Grundsatz-Karten: heller Text auf Tan war zu schwach */
.why-card .n{background:var(--olive-700);color:var(--cream);}
/* Initialen-Kreis bei den Stimmen */
.q-card .by .av{color:var(--olive-700);font-weight:700;}
/* Fusszeile ist dunkel — Telefonlink muss hell sein, nicht olivgrün */
footer .about-f a,.about-f a{color:var(--gold-400);text-decoration:none;}
footer .about-f a:hover,.about-f a:hover{color:var(--gold-200);text-decoration:underline;}


/* Fusszeilen-Überschriften sind jetzt h3 (Reihenfolge h2->h3), Optik unverändert */
footer.elch-foot .f-titel{font-family:var(--font-display);font-size:14px;color:var(--cream);margin-bottom:14px;letter-spacing:.02em;}