:root{
  --ink:#2E2360; --ink-deep:#1D1642; --coral:#FF8B6A; --coral-deep:#E86B48; --gold:#F2C14E;
  --bg:#FAF8F5; --bg-2:#F1ECE4; --paper:#FFFFFF; --muted:#5C5478; --line:#E4DFD5;
  --shell:1100px; --r:18px; --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 2px 12px rgba(46,35,96,.07); --shadow-lg:0 16px 40px rgba(46,35,96,.15);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);line-height:1.7;font-size:17px;background:var(--bg)}
img{max-width:100%;height:auto}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}
.as-shell{max-width:var(--shell);margin:0 auto;padding:0 22px}
.as-skip{position:absolute;left:-999px}
.as-skip:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;z-index:200;border-radius:8px}

.as-header{position:sticky;top:0;z-index:100;background:rgba(250,248,245,.92);backdrop-filter:blur(12px) saturate(160%);border-bottom:1px solid var(--line)}
.as-head-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.as-brand{display:flex;align-items:center;gap:2px;color:var(--ink);font-weight:600;font-size:1.28rem;font-family:var(--serif)}
.as-brand:hover{text-decoration:none}
.as-brand-a{font-style:italic;font-size:1.5rem;color:var(--coral-deep);margin-right:2px}
.as-accent{color:var(--coral-deep)}
.as-nav{display:flex;gap:28px}
.as-nav a{color:var(--muted);font-weight:600;font-size:.95rem}
.as-nav a:hover{color:var(--ink);text-decoration:none}
.as-burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.as-burger span{width:24px;height:2px;background:var(--ink);display:block}

.as-crumbs{font-size:.85rem;color:var(--muted);padding:14px 0 0}
.as-crumbs a{color:var(--muted)}
.as-sep{margin:0 8px;opacity:.5}

.as-hero{padding:68px 0 54px;text-align:center;background:radial-gradient(circle at 50% 0%,var(--bg-2),var(--bg) 65%)}
.as-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.1rem,5.5vw,3.6rem);line-height:1.1;margin:0 0 18px;letter-spacing:-.01em}
.as-hero .lead{font-size:1.12rem;color:var(--muted);max-width:44em;margin:0 auto 30px}
.as-eyebrow{display:inline-block;font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;color:var(--coral-deep);margin-bottom:18px;font-weight:600}
.as-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.as-search{max-width:480px;margin:0 auto 8px;position:relative}
.as-search input{width:100%;padding:15px 20px;border-radius:99px;border:1.5px solid var(--line);font-size:1.05rem;font-family:inherit;background:var(--paper)}
.as-search input:focus{outline:none;border-color:var(--coral)}
.as-search-res{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--line);border-radius:16px;margin-top:8px;max-height:300px;overflow:auto;z-index:20;display:none;text-align:left;box-shadow:var(--shadow-lg)}
.as-search-res div{padding:12px 20px;cursor:pointer;font-size:.96rem;border-bottom:1px solid var(--bg-2);font-family:var(--serif)}
.as-search-res div:hover{background:var(--bg-2)}

.as-btn{display:inline-block;background:var(--ink);color:#fff;font-weight:600;padding:14px 28px;border-radius:99px;box-shadow:0 8px 24px rgba(46,35,96,.25);transition:transform .15s;border:0;cursor:pointer;font-size:1rem}
.as-btn:hover{text-decoration:none;transform:translateY(-2px);color:#fff}
.as-btn-g{background:transparent;border:1.5px solid var(--ink);color:var(--ink);box-shadow:none}
.as-btn-g:hover{background:rgba(46,35,96,.06)}

.as-sec{padding:52px 0}
.as-sec h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 8px;text-align:center}
.as-lede{font-size:1.05rem;color:var(--muted);text-align:center}
.as-narrow{max-width:800px;margin:0 auto}

.as-page-head{padding:36px 0 4px}

/* ===== AUSSPRACHE-KARTE: das gestalterische Herzstueck ===== */
.as-card-hero{background:linear-gradient(150deg,var(--ink-deep),var(--ink) 60%);border-radius:28px;padding:52px 40px 44px;margin:20px 0 10px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.as-card-hero:before{content:"“";position:absolute;top:-40px;left:20px;font-family:var(--serif);font-size:14rem;color:rgba(255,255,255,.04);font-weight:700;line-height:1}
.as-card-kat{display:inline-block;background:rgba(255,139,106,.16);color:var(--coral);border:1px solid rgba(255,139,106,.35);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;padding:6px 16px;border-radius:99px;margin-bottom:22px;position:relative}
.as-card-word{font-family:var(--serif);font-weight:700;font-style:italic;font-size:clamp(2.6rem,7vw,4.6rem);color:#fff;line-height:1.05;margin:0 0 22px;position:relative}
.as-card-ipa{display:inline-block;font-family:var(--mono);font-size:clamp(1.15rem,2.6vw,1.55rem);color:var(--gold);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:10px 26px;border-radius:14px;margin-bottom:30px;letter-spacing:.02em;position:relative}
.as-syl-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;position:relative}
.as-syl{font-family:var(--serif);font-size:clamp(1.2rem,3vw,1.7rem);color:rgba(255,255,255,.42);font-weight:600;padding:6px 4px;transition:transform .15s}
.as-syl-stressed{color:#fff;position:relative}
.as-syl-stressed:after{content:"";position:absolute;left:8%;right:8%;bottom:-6px;height:4px;background:linear-gradient(90deg,var(--coral),var(--gold));border-radius:99px}
.as-syl-sep{color:rgba(255,255,255,.25);font-size:1.2rem;align-self:center}

.as-article{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:38px;margin:24px 0;box-shadow:var(--shadow)}
.as-article h2{font-family:var(--serif);font-weight:700;margin-top:32px;font-size:1.4rem}
.as-article h2:first-child{margin-top:0}
.as-article p{margin:0 0 16px}

.as-grid{display:grid;gap:16px}
.as-g2{grid-template-columns:repeat(2,1fr)}
.as-g3{grid-template-columns:repeat(3,1fr)}
.as-g4{grid-template-columns:repeat(4,1fr)}
.as-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px;position:relative;transition:transform .18s,box-shadow .18s;box-shadow:var(--shadow)}
.as-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.as-card h3{margin:0 0 6px;font-family:var(--serif);font-weight:700;font-size:1.15rem;font-style:italic}
.as-card .as-card-ipa-mini{font-family:var(--mono);font-size:.86rem;color:var(--coral-deep);display:block;margin-bottom:8px}
.as-card p{margin:0;color:var(--muted);font-size:.88rem}
.as-card-link{position:absolute;inset:0;border-radius:16px}

.as-box{border-radius:16px;padding:22px 24px;margin:24px 0;border:1px solid var(--line);background:var(--bg-2)}
.as-box h3{margin:0 0 8px;font-size:1rem;font-family:var(--serif);font-weight:700}
.as-box p{margin:0;font-size:.97rem}
.as-box-tip{background:#FFF3EC;border-color:#F5D3C2;border-left:4px solid var(--coral)}
.as-box-err{background:#FDECEA;border-color:#F3C4C0;border-left:4px solid #C0392B}

.as-badge{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 12px;border-radius:99px;background:var(--bg-2);color:var(--muted)}

.as-faq details{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin:0 0 10px;padding:2px 20px}
.as-faq summary{cursor:pointer;font-weight:600;padding:15px 0;list-style:none;font-family:var(--serif);font-size:1.02rem}
.as-faq summary::-webkit-details-marker{display:none}
.as-faq summary:before{content:"+";color:var(--coral-deep);font-weight:700;margin-right:11px;font-family:var(--sans)}
.as-faq details[open] summary:before{content:"\2013"}
.as-faq p{margin:0 0 15px;color:var(--muted)}

.as-tags a{display:inline-block;background:var(--paper);border:1px solid var(--line);padding:7px 15px;border-radius:99px;font-size:.9rem;margin:0 7px 8px 0;font-family:var(--serif);font-style:italic}
.as-tags a:hover{border-color:var(--coral);text-decoration:none}
.as-az{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0}
.as-az a{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-weight:600;font-size:.9rem;min-width:34px;text-align:center}
.as-az a:hover{border-color:var(--coral);text-decoration:none}
.as-symlist{columns:2;column-gap:24px;margin:14px 0}
.as-symlist a{display:block;padding:5px 0;font-size:.95rem;font-family:var(--serif);font-style:italic;break-inside:avoid}

.as-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}
.as-kpi div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;box-shadow:var(--shadow)}
.as-kpi b{display:block;font-size:1.7rem;line-height:1.2;font-family:var(--serif);color:var(--coral-deep)}
.as-kpi span{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

.as-band{background:var(--ink-deep);padding:54px 0;margin-top:34px;text-align:center;color:#fff}
.as-band h2{margin:0 0 12px;color:#fff;font-family:var(--serif)}
.as-band p{color:rgba(255,255,255,.82);max-width:42em;margin:0 auto 22px}
.as-band .as-btn{background:var(--coral);box-shadow:0 8px 24px rgba(255,139,106,.35)}

.as-footer{margin-top:56px;border-top:1px solid var(--line);background:var(--bg-2)}
.as-foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:30px;padding:52px 22px 32px}
.as-footer h3{font-size:.84rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px}
.as-footer ul{list-style:none;margin:0;padding:0}
.as-footer li{margin:0 0 9px}
.as-footer a{color:var(--muted);font-size:.93rem}
.as-footer a:hover{color:var(--ink);text-decoration:none}
.as-foot-txt{color:var(--muted);font-size:.91rem;margin:12px 0 0}
.as-brand-f{margin-bottom:6px}
.as-foot-legal{border-top:1px solid var(--line);padding:20px 0}
.as-foot-legal p{color:#8A8299;font-size:.81rem;text-align:center;max-width:920px;margin:0 auto 8px}
.as-copy{opacity:.8}

@media(max-width:960px){
  .as-g3,.as-g4{grid-template-columns:repeat(2,1fr)}
  .as-symlist{columns:1}
  .as-foot-grid{grid-template-columns:1fr 1fr}
  .as-kpi{grid-template-columns:repeat(3,1fr)}
  .as-article{padding:26px 20px}
  .as-card-hero{padding:40px 22px 34px}
  .as-burger{display:flex}
  .as-nav{position:absolute;top:72px;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;padding:6px 0;display:none;border-bottom:1px solid var(--line)}
  body.as-open .as-nav{display:flex}
  .as-nav a{padding:14px 22px;border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .as-g2,.as-g3,.as-g4{grid-template-columns:1fr}
  .as-symlist{columns:1}
  .as-foot-grid{grid-template-columns:1fr}
  .as-kpi{grid-template-columns:1fr 1fr 1fr}
}
