*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --font: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --gold: #B8963E; --gold-l: #D4AF6A; --gold-pale: #F5EDD8;
  --cream: #FAF7F2; --cream-d: #F0EAE0;
  --dark: #2C1F0E; --mid: #5C3D1E; --light: #8B6240;
  --body: #3A2D1F; --muted: #7A6A57;
  --bdr: rgba(184,150,62,0.2); --bdr-s: rgba(184,150,62,0.4);
}
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--cream); color: var(--body); font-size: 16px; line-height: 1.7; }
a { color: inherit; }

/* NAV */
nav { position: sticky; top: 0; z-index: 100; background: rgba(250,247,242,0.97); border-bottom: 1px solid var(--bdr); padding: 0 2rem; }
.ni { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 58px; }
.logo { font-family: var(--font); font-size: 1.25rem; font-weight: 700; color: var(--dark); text-decoration: none; }
.logo span { color: var(--gold); }
.bc { font-size: 0.78rem; color: var(--muted); }
.bc a { color: var(--muted); text-decoration: none; }
.bc a:hover { color: var(--gold); }
.nav-links { display: flex; gap: 1.75rem; list-style: none; }
.nav-links a { font-size: 0.82rem; font-weight: 400; color: var(--muted); text-decoration: none; letter-spacing: 0.05em; text-transform: uppercase; }
.nav-links a:hover { color: var(--gold); }
@media(max-width:700px){ .nav-links { display:none; } }

/* HERO */
.hero { background: var(--dark); color: #FAF5EC; padding: 5.5rem 2rem 4.5rem; }
.hero-i { max-width: 1100px; margin: 0 auto; }
.hero-2col { display: grid; grid-template-columns: 1fr 290px; gap: 4rem; align-items: center; }
.kicker { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-l); margin-bottom: 0.9rem; }
.hero h1 { font-family: var(--font); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; line-height: 1.15; margin-bottom: 1.1rem; }
.hero h1 em { font-style: italic; color: var(--gold-l); }
.hero-sub { font-size: 0.97rem; color: rgba(250,245,236,0.68); line-height: 1.85; max-width: 580px; }
.hero-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(184,150,62,0.22); padding: 1.5rem; }
.hc-title { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-l); margin-bottom: 0.9rem; }
.hc-row { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.38rem 0; border-bottom: 1px solid rgba(184,150,62,0.12); font-size: 0.83rem; }
.hc-row:last-child { border: none; }
.hc-l { color: rgba(250,245,236,0.48); flex-shrink: 0; }
.hc-v { color: #FAF5EC; text-align: right; }
@media(max-width:800px){ .hero-2col { grid-template-columns: 1fr; } .hero-card { display:none; } }

/* TOC BAR */
.toc { background: var(--cream-d); border-bottom: 1px solid var(--bdr); padding: 0.7rem 2rem; }
.toc-i { max-width: 1100px; margin: 0 auto; display: flex; gap: 1.75rem; flex-wrap: wrap; }
.toc a { font-size: 0.8rem; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--gold); }

/* LAYOUT */
.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
section { padding: 4rem 2rem; }
section:nth-child(odd) { background: var(--cream-d); }
section:nth-child(even) { background: var(--cream); }
.sec-kick { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.sec-h { font-family: var(--font); font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 400; color: var(--dark); margin-bottom: 0.6rem; }
.sec-intro { font-size: 0.93rem; color: var(--muted); max-width: 720px; margin-bottom: 2rem; line-height: 1.85; }
.divider { width: 38px; height: 1px; background: var(--gold); margin: 0.8rem 0 1.8rem; }

/* GRID */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }

/* CARDS */
.card { background: var(--cream); border: 1px solid var(--bdr); padding: 1.6rem; }
.card.hl { border-left: 3px solid var(--gold); }
.card-num { font-family: var(--font); font-size: 2.4rem; font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 0.4rem; }
.card-t { font-family: var(--font); font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: 0.4rem; }
.card-b { font-size: 0.87rem; color: var(--muted); line-height: 1.75; }
.card-meta { margin-top: 0.85rem; padding-top: 0.65rem; border-top: 1px solid var(--bdr); font-size: 0.78rem; color: var(--muted); }
.card-meta strong { color: var(--mid); }

/* PROF CARD */
.prof { background: var(--cream-d); border: 1px solid var(--bdr); border-left: 3px solid var(--gold); padding: 1.4rem 1.6rem; margin-bottom: 1.25rem; }
.prof-n { font-family: var(--font); font-size: 1.2rem; font-weight: 700; color: var(--dark); margin-bottom: 0.2rem; }
.prof-r { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.65rem; }
.prof-b { font-size: 0.87rem; color: var(--muted); line-height: 1.75; }
.prof-hi { font-size: 0.82rem; color: var(--muted); margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px solid var(--bdr); }
.prof-hi strong { color: var(--dark); display: block; margin-bottom: 0.15rem; }

/* HS GRID */
.hs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.hs-card { background: var(--cream); border: 1px solid var(--bdr); border-left: 3px solid var(--gold); padding: 1.1rem 1.3rem; text-decoration: none; display: block; transition: background .15s; }
.hs-card:hover { background: var(--gold-pale); }
.hs-city { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.2rem; }
.hs-name { font-family: var(--font); font-size: 0.97rem; font-weight: 700; color: var(--dark); margin-bottom: 0.2rem; }
.hs-prof { font-size: 0.8rem; color: var(--muted); }

/* STEPS */
.steps { max-width: 800px; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 1.25rem; padding: 1.75rem 0; border-bottom: 1px solid var(--bdr); }
.step:last-child { border: none; }
.step-n { font-family: var(--font); font-size: 2.6rem; font-weight: 300; color: var(--gold); line-height: 1; }
.step h3 { font-family: var(--font); font-size: 1.1rem; font-weight: 700; color: var(--dark); margin-bottom: 0.3rem; }
.step p { font-size: 0.88rem; color: var(--muted); line-height: 1.78; }

/* STUDIENGÄNGE */
.sg-list { display: flex; flex-direction: column; gap: 0.75rem; }
.sg-item { background: var(--cream-d); border: 1px solid var(--bdr); padding: 0.9rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sg-n { font-family: var(--font); font-size: 1rem; font-weight: 700; color: var(--dark); }
.sg-d { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.badge { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; background: var(--gold-pale); color: var(--mid); border: 1px solid var(--bdr-s); padding: 0.18rem 0.55rem; white-space: nowrap; }

/* TABLE */
.wtable { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.wtable th { text-align: left; font-family: var(--font); font-size: 0.97rem; font-weight: 700; color: var(--dark); padding: 0.65rem 0.9rem; border-bottom: 2px solid var(--bdr-s); }
.wtable td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--bdr); vertical-align: top; }
.wtable tr:last-child td { border: none; }
.wtable tr:hover td { background: var(--gold-pale); }

/* INFOBOX */
.info { background: var(--gold-pale); border: 1px solid var(--bdr-s); padding: 1.3rem 1.8rem; margin: 1.5rem 0; }
.info p { font-size: 0.9rem; color: var(--body); line-height: 1.82; }
.info strong { color: var(--mid); }

/* MAIN + SIDEBAR */
.main-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 280px; gap: 3rem; padding: 4rem 2rem; align-items: start; }
.mc h2 { font-family: var(--font); font-size: 1.7rem; font-weight: 400; color: var(--dark); margin: 2.2rem 0 0.45rem; }
.mc h2:first-child { margin-top: 0; }
.mc p { font-size: 0.92rem; color: var(--body); line-height: 1.82; margin-bottom: 0.9rem; }
.mc .sk { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.3rem; }
.sidebar { display: flex; flex-direction: column; gap: 1.4rem; }
.sc { background: var(--cream); border: 1px solid var(--bdr); padding: 1.2rem; }
.sc-t { font-family: var(--font); font-size: 1rem; font-weight: 700; color: var(--dark); margin-bottom: 0.65rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bdr); }
.sr { display: flex; gap: 0.6rem; padding: 0.32rem 0; font-size: 0.83rem; border-bottom: 1px solid var(--bdr); }
.sr:last-of-type { border: none; }
.sl { color: var(--muted); min-width: 80px; flex-shrink: 0; }
.sv { color: var(--body); }
.btn { display: block; text-align: center; padding: 0.65rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; margin-top: 0.6rem; }
.btn-g { background: var(--gold); color: var(--dark); }
.btn-g:hover { background: var(--gold-l); }
.btn-o { border: 1px solid var(--bdr-s); color: var(--muted); }
.btn-o:hover { border-color: var(--gold); color: var(--gold); }
@media(max-width:800px){ .main-grid { grid-template-columns: 1fr; } }

/* HS NAV BAR */
.hs-nav { background: var(--cream-d); border-top: 1px solid var(--bdr); padding: 1.75rem 2rem; }
.hs-nav-i { max-width: 1100px; margin: 0 auto; }
.hs-nav h3 { font-family: var(--font); font-size: 1rem; font-weight: 700; color: var(--dark); margin-bottom: 0.65rem; }
.pills { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.pill { font-size: 0.78rem; color: var(--muted); border: 1px solid var(--bdr); padding: 0.28rem 0.7rem; text-decoration: none; }
.pill:hover { border-color: var(--gold); color: var(--gold); }
.pill.act { background: var(--gold-pale); border-color: var(--bdr-s); color: var(--dark); font-weight: 600; }

/* REP LIST */
.rep-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
.rep-g h4 { font-family: var(--font); font-size: 0.97rem; font-weight: 700; color: var(--dark); margin-bottom: 0.65rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--bdr-s); }
.rep-g ul { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.rep-g li { font-size: 0.84rem; color: var(--muted); padding-left: 0.9rem; position: relative; }
.rep-g li::before { content: '—'; position: absolute; left: 0; color: var(--gold); font-size: 0.72rem; }
@media(max-width:700px){ .rep-cols { grid-template-columns: 1fr; } }

/* STIP GRID */
.stip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }
.stip { background: var(--cream); border: 1px solid var(--bdr); border-top: 3px solid var(--gold); padding: 1.4rem; }
.stip-org { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.35rem; }
.stip-n { font-family: var(--font); font-size: 1.05rem; font-weight: 700; color: var(--dark); margin-bottom: 0.45rem; }
.stip-b { font-size: 0.85rem; color: var(--muted); line-height: 1.75; }
.stip-r { margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px solid var(--bdr); font-size: 0.78rem; color: var(--muted); }
.stip-r strong { color: var(--mid); display: block; margin-bottom: 0.15rem; }

/* CTA BANNER */
.cta { background: var(--dark); color: #FAF5EC; padding: 3.5rem 2rem; text-align: center; }
.cta h2 { font-family: var(--font); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 300; margin-bottom: 0.75rem; }
.cta h2 em { font-style: italic; color: var(--gold-l); }
.cta p { font-size: 0.88rem; color: rgba(250,245,236,0.62); margin-bottom: 1.7rem; max-width: 460px; margin-left: auto; margin-right: auto; }
.cta-btns { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.btn-gld { background: var(--gold); color: var(--dark); padding: 0.7rem 1.7rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; }
.btn-out { border: 1px solid rgba(184,150,62,0.45); color: var(--gold-l); padding: 0.7rem 1.7rem; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; }

/* EXPERTISE BOX */
.exp-box { background: var(--gold-pale); border: 1px solid var(--bdr-s); padding: 1.6rem 2rem; margin: 2rem 0; display: flex; gap: 1.5rem; align-items: flex-start; }
.exp-av { width: 58px; height: 58px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--font); font-size: 1.2rem; font-weight: 700; color: var(--dark); flex-shrink: 0; }
.exp-t p { font-size: 0.9rem; color: var(--body); line-height: 1.82; margin-bottom: 0.4rem; }
.exp-t .sig { font-size: 0.78rem; color: var(--muted); font-style: italic; }
@media(max-width:600px){ .exp-box { flex-direction: column; } }

/* PATHWAY CARD */
.pw { background: var(--cream); border: 1px solid var(--bdr); padding: 1.5rem; position: relative; }
.pw.hl { border-left: 3px solid var(--gold); }
.pw-badge { position: absolute; top: 0.9rem; right: 0.9rem; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--gold-pale); color: var(--mid); border: 1px solid var(--bdr-s); padding: 0.15rem 0.5rem; }
.pw-i { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; }
.pw-t { font-family: var(--font); font-size: 1.12rem; font-weight: 700; color: var(--dark); margin-bottom: 0.4rem; }
.pw-b { font-size: 0.86rem; color: var(--muted); line-height: 1.75; }
.pw-m { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--bdr); font-size: 0.78rem; color: var(--muted); }
.pw-m strong { color: var(--mid); }

/* FOOTER */
footer { background: var(--dark); color: rgba(250,245,236,0.42); padding: 1.75rem 2rem; text-align: center; font-size: 0.78rem; }
.fl { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 0.5rem; flex-wrap: wrap; }
.fl a { color: rgba(250,245,236,0.42); text-decoration: none; }
.fl a:hover { color: var(--gold-l); }

/* TRUST BAR */
.trust { background: var(--cream-d); border-bottom: 1px solid var(--bdr); padding: 0.9rem 2rem; }
.trust-i { max-width: 1100px; margin: 0 auto; display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; }
.ti { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--muted); }
.td { width: 5px; height: 5px; background: var(--gold); border-radius: 50%; flex-shrink: 0; }

/* IMAGES */
.page-hero-img { width: 100%; max-height: 220px; object-fit: cover; object-position: center 30%; display: block; opacity: 0.88; }
.section-img { width: 100%; max-height: 200px; object-fit: cover; margin: 1.5rem 0; }
.prof-img-row { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.25rem; }
.portrait-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.uriel-portrait { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.kws-logo { height: 28px; width: auto; opacity: 0.7; }

/* SCROLL-TO-TOP */
.scroll-top { position: fixed; bottom: 1.75rem; right: 1.75rem; width: 46px; height: 46px; background: var(--gold); color: var(--dark); border: none; border-radius: 0; cursor: pointer; font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s, background .2s; z-index: 999; font-family: var(--sans); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.scroll-top.visible { opacity: 1; }
.scroll-top:hover { background: var(--gold-l); }

/* DISCLAIMER */
.disclaimer { background: var(--cream-d); border-top: 2px solid var(--bdr-s); padding: 0.9rem 2rem; font-size: 0.76rem; color: var(--muted); text-align: center; line-height: 1.65; } .disclaimer strong { color: var(--mid); }

/* KLASSIKWELTSHOP PAGE */
.kws-hero { background: var(--dark); color: #FAF5EC; padding: 4rem 2rem 3.5rem; text-align: center; }
.kws-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.kws-card { background: var(--cream-d); border: 1px solid var(--bdr); border-top: 3px solid var(--gold); padding: 1.5rem; }
.img-hero-wrapper { position: relative; }
.img-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(44,31,14,0.7) 100%); }

/* HS LIST WITH LINKS */
.hs-card-link { text-decoration: none; }
.ext-link { font-size: 0.75rem; color: var(--gold); margin-top: 0.5rem; display: block; }

/* SOCIAL MEDIA */
.social-bar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.social-link { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--muted); text-decoration: none; border: 1px solid var(--bdr); padding: 0.35rem 0.75rem; transition: border-color .2s, color .2s; }
.social-link:hover { border-color: var(--gold); color: var(--gold); }
.social-icon { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
.yt-embed { width: 100%; aspect-ratio: 16/9; border: none; margin: 1.25rem 0; display: block; }
.yt-playlist { background: var(--cream-d); border: 1px solid var(--bdr); padding: 1.25rem; margin: 1.25rem 0; }
.yt-playlist h4 { font-family: var(--font); font-size: 1rem; font-weight: 700; color: var(--dark); margin-bottom: 0.5rem; }
.yt-playlist p { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.75rem; }
.yt-playlist a { display: inline-block; background: #FF0000; color: #fff; padding: 0.5rem 1.25rem; font-size: 0.8rem; font-weight: 600; text-decoration: none; letter-spacing: 0.04em; }
.yt-playlist a:hover { background: #cc0000; }