:root{
  --primary-color:var(--plum);
  --primary-strong:var(--plum-deep);
  --surface-color:var(--cream);
  --text-color:var(--ink);
  --muted-color:var(--ink-soft);
  --border-color:var(--line);
  --accent-color:var(--tool-c);
    --font-serif:var(--serif);
    --font-sans:var(--sans);
    --font-mono:var(--mono);

  --pink:#ffaaff;
  --pink-soft:#fff2fb;
  --pink-mid:#ffb8ee;
  --plum:#872426;
  --plum-deep:#5c1517;
  --ink:#2a1215;
  --ink-soft:#6a454d;
  --line:rgba(135,36,38,.16);
  --cream:#fff9fc;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Instrument Sans', system-ui, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;
  --wrap:1200px;
  
  /* Tool Colors (adapted from original dark mode to light mode) */
    --tool-a: #872426; /* Rot - Dunkelrot */
  --tool-b: #c75b91; /* Pink - Magenta */
  --tool-c: #4a8a9a; /* Teal - Blue */
  --tool-accent: #5c1517;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:84px;}
body{margin:0; background:var(--pink-soft); color:var(--ink); font-family:var(--sans); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.02em; line-height:1.02;}
p{margin:0;} a{color:inherit;} img{max-width:100%; display:block;}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 clamp(18px,5vw,56px);}
.section{padding:clamp(58px,9vw,120px) 0;}
.idx{font-family:var(--mono); font-size:.78rem; letter-spacing:.2em; color:var(--plum); text-transform:uppercase;}
.progress{position:fixed; top:0; left:0; height:2px; width:0; background:var(--plum); z-index:9001;}
.chic{position:fixed; top:0; left:0; right:0; z-index:1000; transition:background .4s, box-shadow .4s, border-color .4s; border-bottom:1px solid transparent;}
.chic.scrolled{background:rgba(255,242,251,.82); backdrop-filter:blur(12px); box-shadow:0 12px 30px rgba(92,21,23,.08); border-color:var(--line);}
.chic-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px clamp(18px,5vw,56px);}
.chic .brand{font-family:var(--serif); font-weight:500; letter-spacing:.16em; font-size:1.05rem; text-decoration:none; color:var(--plum);}
.chic-nav{display:flex; gap:6px; flex-wrap:wrap;}
.chic-nav a{font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; text-decoration:none; color:var(--ink); padding:8px 14px; border:1px solid var(--line); border-radius:40px; background:rgba(255,255,255,.4); transition:background .3s, color .3s, border-color .3s;}
.chic-nav a:hover{border-color:var(--plum); color:var(--plum);}
.chic-nav a.active{background:var(--plum); color:var(--pink-soft); border-color:var(--plum);}
.site-volume{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
.site-volume-toggle{display:grid;place-items:center;width:42px;height:42px;padding:8px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.4);color:var(--ink);cursor:pointer}
.site-volume-toggle svg{width:20px;height:20px}
.site-volume-toggle:hover,.site-volume-toggle[aria-expanded="true"]{border-color:var(--plum);color:var(--plum)}
.site-volume-toggle.is-muted .volume-waves,.site-volume-toggle:not(.is-muted) .volume-mute-slash{display:none}
.site-volume-panel{position:absolute;top:calc(100% + 12px);left:0;z-index:1100;display:grid;gap:8px;width:min(300px,calc(100vw - 24px));max-height:min(75vh,560px);overflow:auto;padding:14px;background:var(--cream);border:1px solid var(--line);box-shadow:0 12px 30px rgba(92,21,23,.16);color:var(--ink)}
.site-volume-panel[hidden]{display:none}
.site-volume-panel label{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.72rem}
.site-volume-panel input{width:100%;accent-color:var(--plum)}
.site-volume-panel input:disabled{opacity:.45;cursor:not-allowed}
.site-volume-note{font-size:.72rem;line-height:1.4;color:var(--ink-soft)}
.site-volume-panel button{justify-self:start;border:1px solid var(--line);background:transparent;color:var(--ink);padding:7px 10px;border-radius:4px;cursor:pointer;font:inherit;font-size:.8rem}
.site-volume-panel button:hover{border-color:var(--plum);color:var(--plum)}
.audio-tool-transport{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin:0 0 22px}
.audio-tool-transport .btn-play{min-width:150px;border:1px solid transparent;border-radius:12px;padding:14px 24px;background:linear-gradient(135deg,var(--plum),#c86f8b);color:var(--cream);font:600 1rem var(--sans);cursor:pointer}
.audio-tool-transport .btn-play:hover{box-shadow:0 12px 28px -10px rgba(135,36,38,.36)}
.audio-tool-transport .btn-play.is-live{background:linear-gradient(135deg,#355f88,#4a8a9a);color:white}
.audio-tool-volume{display:grid;gap:4px;width:min(100%,260px);font-family:var(--mono);font-size:.72rem;color:var(--ink-soft)}
.audio-tool-volume>span{display:flex;justify-content:space-between;gap:10px}
.audio-tool-volume input[type=range]{width:100%;accent-color:var(--plum)}
@media (max-width:720px){ .chic .brand{display:none;} .chic-inner{justify-content:center;} }
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
.mask{clip-path:inset(0 100% 0 0); transition:clip-path 1s cubic-bezier(.7,0,.15,1); display:inline-block;}
.mask.in{clip-path:none;}
@media (prefers-reduced-motion: reduce){ .reveal,.mask{opacity:1; transform:none; transition:none; clip-path:none;} }

/* ---------- HERO ---------- */
.hero{min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding-top:84px;
  background:
    linear-gradient(rgba(135,36,38,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(135,36,38,.05) 1px, transparent 1px),
    radial-gradient(140% 120% at 85% 10%, var(--pink) 0%, var(--pink-soft) 55%, #fff 100%);
  background-size:52px 52px, 52px 52px, cover;}
.hero .wrap{position:relative; z-index:2; width:100%;}
.hero-sketch{position:absolute; right:0; top:0; bottom:0; width:46%; z-index:1; pointer-events:none; opacity:.9;}
.hero-sketch svg{position:absolute; right:0; top:50%; transform:translateY(-50%); width:100%; height:auto;}
.hero-eyebrow{font-family:var(--mono); font-size:.78rem; letter-spacing:.28em; color:var(--plum); text-transform:uppercase; margin-bottom:22px;}
.hero h1{font-size:clamp(3.4rem,15vw,11rem); color:var(--plum-deep); font-weight:500; letter-spacing:-.04em; text-shadow:3px 4px 0 var(--pink);}
.hero h1 .mask{display:block;}
.hero-line{font-family:var(--serif); font-size:clamp(1.3rem,3.4vw,2rem); color:var(--ink); margin-top:24px; max-width:22ch;}
.hero-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px;}
.hero-tags span{font-family:var(--mono); font-size:.82rem; color:var(--plum); border:1px solid var(--plum); border-radius:40px; padding:7px 16px; background:rgba(255,255,255,.5);}
.hero-scroll{position:absolute; bottom:28px; left:clamp(18px,5vw,56px); z-index:2; font-family:var(--mono); font-size:.75rem; letter-spacing:.2em; color:var(--plum); animation:bob 2.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);}}
@media (max-width:900px){ .hero-sketch{display:none;} }

/* ---------- PROFILE ---------- */
.profile{background:var(--cream);}
.profile-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,72px); align-items:start;}
.profile-photo{position:sticky; top:100px; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line); background:var(--pink);}
.profile-photo img{width:100%; height:100%; object-fit:cover; filter:saturate(.92);}
.profile-body .idx{margin-bottom:18px;}
.profile-body h2{font-size:clamp(2.2rem,5.5vw,3.6rem); font-weight:400; color:var(--plum-deep); margin-bottom:22px;}
.profile-body .lead{font-family:var(--serif); font-size:clamp(1.35rem,3.2vw,1.9rem); line-height:1.5; color:var(--ink); max-width:24ch;}
.profile-foot{font-family:var(--mono); font-size:.82rem; letter-spacing:.12em; color:var(--plum); margin-top:30px; border-top:1px solid var(--line); padding-top:16px;}
@media (max-width:820px){ .profile-grid{grid-template-columns:1fr;} .profile-photo{position:static; aspect-ratio:16/10;} }

/* ---------- DISCIPLINES ---------- */
.disc{background:var(--pink-soft);}
.disc-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:14px 26px; margin-bottom:34px;}
.disc-head h2{font-size:clamp(2.2rem,6vw,4rem); font-weight:400; color:var(--plum-deep);}
.disc-head .idx{align-self:center;}
.disc-list{border-top:1px solid var(--line);}
.disc-row{display:grid; grid-template-columns:80px 1fr 150px; gap:clamp(16px,3vw,40px); align-items:center; padding:30px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:background .4s, padding-left .4s;}
.disc-row:hover{background:rgba(255,255,255,.6); padding-left:14px;}
.disc-row .dnum{font-family:var(--mono); font-size:1rem; color:var(--plum);}
.disc-row .dt h3{font-size:clamp(1.8rem,4.5vw,3rem); font-weight:400; color:var(--ink); transition:color .35s, transform .35s;}
.disc-row:hover .dt h3{color:var(--plum); transform:translateX(6px);}
.disc-row .dt p{font-size:1rem; color:var(--ink-soft); max-width:44ch; margin-top:6px;}
.disc-row .dthumb{width:150px; height:96px; overflow:hidden; border:1px solid var(--line);}
.disc-row .dthumb img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.disc-row:hover .dthumb img{transform:scale(1.12);}
@media (max-width:820px){ .disc-row{grid-template-columns:56px 1fr;} .disc-row .dthumb{display:none;} }

/* ---------- WORK (handwerk) ---------- */
.work{background:var(--cream); position:relative; overflow:hidden;}
.work .wrap{position:relative; z-index:1;}
.work-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:14px 26px; margin-bottom:44px;}
.work-head h2{font-size:clamp(2.2rem,6vw,4rem); font-weight:400; color:var(--plum-deep);}
.work-head .idx{align-self:center;}
.work-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(16px,2.4vw,30px);}
.piece{border:1px solid var(--line); background:var(--pink-soft); padding:12px 12px 18px; transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;}
.piece:nth-child(1){grid-column:span 3; transform:rotate(-.8deg);}
.piece:nth-child(2){grid-column:span 3; transform:rotate(1deg);}
.piece:nth-child(3){grid-column:span 3; transform:rotate(.7deg);}
.piece:nth-child(4){grid-column:span 3; transform:rotate(-.6deg);}
.piece:hover{transform:rotate(0) translateY(-8px); box-shadow:0 26px 55px rgba(92,21,23,.16); border-color:var(--plum); z-index:3; position:relative;}
.piece .ph{overflow:hidden; aspect-ratio:16/10; background:var(--pink);}
.piece .ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.3s cubic-bezier(.2,.7,.2,1);}
.piece:hover .ph img{transform:scale(1.1);}
.piece .meta{display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; gap:10px;}
.piece .meta b{font-family:var(--serif); font-weight:500; font-size:1.2rem; color:var(--ink);}
.piece .meta span{font-family:var(--mono); font-size:.78rem; color:var(--plum);}
@media (max-width:760px){ .work-grid{grid-template-columns:1fr;} .piece{grid-column:1/-1 !important; transform:none !important;} }

/* ---------- MUSIC ---------- */
.musik{background:var(--plum-deep); color:var(--pink-soft); position:relative; overflow:hidden;}
.musik::before{content:""; position:absolute; inset:0; background:radial-gradient(70% 60% at 85% 0%, rgba(255,170,255,.16), transparent 60%); pointer-events:none;}
.musik .wrap{position:relative; z-index:1;}
.musik-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:14px 26px; margin-bottom:30px;}
.musik-head h2{font-size:clamp(2.2rem,6vw,4rem); font-weight:400; color:var(--pink-soft);}
.musik-head .idx{color:var(--pink-mid); align-self:center;}
.band-photo{position:relative; overflow:hidden; aspect-ratio:16/7; border:1px solid rgba(255,170,255,.2); margin-bottom:34px;}
.band-photo img{width:100%; height:100%; object-fit:cover; filter:saturate(.92);}
.band-photo .cap{position:absolute; left:18px; bottom:14px; font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; color:var(--pink-soft); background:rgba(92,21,23,.55); backdrop-filter:blur(6px); padding:6px 14px; border:1px solid rgba(255,170,255,.3);}
.albumblock{margin-bottom:26px;}
.albumblock .ablabel{font-family:var(--mono); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pink-mid); margin:0 0 10px;}
.bc-frame{width:100%;display:flex;justify-content:center;border:0; background:transparent; overflow:hidden;}
.bc-frame iframe{display:block;width:min(100%,700px);border:0;}
.musik-foot{margin-top:30px; display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center;}
.musik-foot a{font-family:var(--serif); font-size:1.4rem; color:var(--pink-mid); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s;}
.musik-foot a:hover{border-color:var(--pink-mid);}

/* ---------- MATH ---------- */
.math{background:var(--cream);}
.math .grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,72px); align-items:start;}
.math-left{position:sticky; top:100px;}
.math-left .idx{margin-bottom:18px;}
.math-left h2{font-size:clamp(2.2rem,5.5vw,3.6rem); font-weight:400; color:var(--plum-deep); margin-bottom:20px;}
.math-left p{color:var(--ink-soft); max-width:36ch;}
.formula-wall{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.formula{border:1px solid var(--line); background:var(--pink-soft); padding:22px 20px; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; position:relative; overflow:hidden; display:block; text-decoration:none; color:inherit; cursor:pointer;}
.formula:hover{transform:translateY(-6px); box-shadow:0 20px 44px rgba(92,21,23,.12); border-color:var(--plum);}
.formula .fnum{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; color:var(--plum); text-transform:uppercase;}
.formula .ftitle{font-family:var(--serif); font-size:clamp(1.5rem,3vw,1.9rem); color:var(--ink); margin:8px 0 12px;}
.formula .fnote{font-size:.88rem; color:var(--ink-soft); margin:0;}
.formula .fmark{position:absolute; right:14px; bottom:10px; font-family:var(--mono); font-size:.78rem; color:rgba(135,36,38,.45);}
@media (max-width:820px){ .math .grid{grid-template-columns:1fr;} .math-left{position:static;} .formula-wall{grid-template-columns:1fr;} }

/* ---------- TOOLS (MATH INTERACTIVE) ---------- */
.tool-section{background:var(--pink-soft); padding-bottom:120px; border-top:1px solid var(--line); position:relative; overflow:hidden;}
.tool-section::before { 
    content:""; 
    position:absolute; 
    inset:0; 
    background: 
        linear-gradient(rgba(135,36,38,.03) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(135,36,38,.03) 1px, transparent 1px); 
    background-size: 50px 50px; 
    z-index:0; 
    opacity: .6;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent 100%);
}
.tool-section .wrap { position: relative; z-index: 1; }
#feature-04-container{margin-bottom:76px}
#tool-wellen .wave-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:30px}
#tool-wellen .wave-column{padding:0 18px 0 0;border:0;background:transparent}
#tool-wellen .wave-column h4{margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);color:var(--plum);font-family:var(--mono);font-size:.78rem;text-transform:uppercase}
#tool-wellen .wave-lfo-toggle{display:flex;align-items:center;gap:8px;margin:4px 0 10px;color:var(--ink-soft);font-family:var(--mono);font-size:.75rem}
#tool-wellen .wave-lfo-toggle input{width:auto;accent-color:var(--tool-c)}
#tool-wellen .wave-global-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
#tool-wellen .wave-controls>div{min-width:0}
#tool-wellen .wave-controls input[type="range"]{width:100%}
#tool-wellen #waveShape{min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:var(--cream);color:var(--ink);font:inherit}
@media(max-width:600px){#tool-wellen .wave-controls,#tool-wellen .wave-global-controls{grid-template-columns:1fr;gap:0}#tool-wellen .wave-column{margin-bottom:16px}}
.tool-header { margin-bottom: 50px; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; }
.tool-header h2 { font-size: clamp(2.5rem, 5vw, 4rem); color: var(--plum-deep); margin-bottom: 16px; }
.tool-header p { color: var(--ink-soft); font-size: 1.1rem; font-family: var(--serif); }

.tool-card {
    background: var(--cream); 
    border: 1px solid var(--line);
    border-radius: 24px; 
    padding: clamp(24px, 4vw, 48px);
    margin-bottom: 60px;
    box-shadow: 0 20px 50px -20px rgba(92,21,23,.08);
    scroll-margin-top: 100px;
    position: relative;
    overflow: hidden;
}
.tool-card h3 { font-size: 2.5rem; color: var(--plum-deep); margin-bottom: 10px; }
.tool-sub { font-family: var(--mono); font-size: .9rem; color: var(--plum); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 30px; display: flex; align-items: center; gap: 10px; }
.tool-sub::after { content:""; display: block; flex: 1; height: 1px; background: var(--line); }

.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 800px) { .tool-grid { grid-template-columns: 1fr; } }

/* UI Elements */
.viz-box { 
    background: #fff; 
    border: 1px solid var(--line); 
    border-radius: 16px; 
    padding: 20px; 
    margin-bottom: 30px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 300px; 
    position: relative; 
    overflow: hidden;
    background-image: radial-gradient(var(--line) 1px, transparent 1px);
    background-size: 20px 20px;
}
.viz-svg { width: 100%; height: auto; max-height: 450px; display: block; }

.data-panel { 
    background: var(--cream); 
    border: 1px solid var(--line); 
    border-radius: 16px; 
    padding: 24px;
    position: relative;
}
.data-row { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 12px; 
    font-family: var(--mono); 
    font-size: .9rem; 
    border-bottom: 1px dashed var(--line); 
    padding-bottom: 8px;
    transition: border-color .2s;
}
.data-row:hover { border-bottom-color: var(--plum); }
.data-row:last-child { border-bottom: none; }
.data-val { font-weight: 700; }
.hl-a { color: var(--tool-a); }
.hl-b { color: var(--tool-b); }
.hl-c { color: var(--tool-c); }

.control-group { margin-bottom: 24px; }
.control-label { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .85rem; color: var(--ink-soft); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .05em;}
.control-val { font-weight: 700; color: var(--plum); }

input[type=range] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 999px;
    background: var(--line); outline: none; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
    background: var(--plum); border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(92,21,23,.3); cursor: grab; transition: transform .1s;
}
input[type=range]::-webkit-slider-thumb:active { transform: scale(1.1); cursor: grabbing; }
input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--plum); border: 4px solid #fff; box-shadow: 0 4px 12px rgba(92,21,23,.3); cursor: grab; }

/* Input Fields */
.triangle-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 15px; }
.triangle-input-column { display: grid; align-content: start; gap: 15px; min-width: 0; }
.triangle-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.triangle-error { color: var(--tool-a); font-family: var(--mono); font-size: .85rem; margin-top: 8px; }
@media (max-width:540px) { .triangle-input-grid, .triangle-results { grid-template-columns: 1fr; } }
.input-field { position: relative; }
.input-field label { display: block; font-size: .8rem; color: var(--ink-soft); margin-bottom: 5px; font-family: var(--mono); }
.input-field input { 
    width: 100%; 
    background: #fff; 
    border: 1px solid var(--line); 
    border-radius: 8px; 
    padding: 10px 40px 10px 12px; 
    font-family: var(--mono); 
    font-size: 1rem; 
    color: var(--ink);
    transition: border-color .2s;
}
.input-field input:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(135,36,38,.1); }
.input-field input[readonly] { background: #f7f3f4; color: var(--ink-soft); cursor: default; }
.input-field .unit { 
    position: absolute; 
    right: 12px; 
    top: 50%; 
    transform: translateY(-50%); 
    font-family: var(--mono); 
    font-size: .8rem; 
    color: var(--ink-soft);
    pointer-events: none;
}

/* Buttons & Segments */
.btn-group { display: flex; gap: 10px; margin-top: 20px; }
.btn-small { 
    flex: 1; 
    padding: 12px; 
    border-radius: 50px; 
    border: 1px solid var(--line); 
    background: #fff; 
    font-family: var(--mono); 
    font-size: .8rem; 
    cursor: pointer; 
    transition: all .2s; 
    color: var(--ink);
}
.btn-small:hover { background: var(--pink); border-color: var(--plum); }
.btn-small.active { background: var(--plum); color: #fff; border-color: var(--plum); }

.seg-control { display: flex; border: 1px solid var(--line); border-radius: 50px; overflow: hidden; margin-bottom: 20px; }
.seg-btn { flex: 1; padding: 10px; background: transparent; border: none; font-family: var(--mono); font-size: .8rem; cursor: pointer; color: var(--ink-soft); transition: all .2s; }
.seg-btn.active { background: var(--plum); color: white; }

/* SVG specific styles */
.v-grid { stroke: rgba(135,36,38,.08); stroke-width: 1; }
.v-frame { fill: none; stroke: var(--line); stroke-width: 1; }
.v-shape { fill: rgba(255,170,255,.15); stroke: var(--tool-a); stroke-width: 3; stroke-linejoin: round; transition: all .1s; }
.v-shape-2 { fill: rgba(74,138,154,.1); stroke: var(--tool-c); stroke-width: 3; }
.v-axis { stroke: var(--tool-a); stroke-width: 3; }
.v-axis-b { stroke: var(--tool-b); stroke-width: 3; }
.v-angle { fill: none; stroke: var(--tool-c); stroke-width: 2; }
.v-text { font-family: var(--mono); font-size: 14px; fill: var(--tool-a); font-weight: bold; }
.v-text-b { font-family: var(--mono); font-size: 14px; fill: var(--tool-b); font-weight: bold; }
.v-text-c { font-family: var(--mono); font-size: 14px; fill: var(--tool-c); font-weight: bold; }

.p-curve { fill: none; stroke: var(--tool-a); stroke-width: 3; stroke-linecap: round; }
.p-curve-2 { fill: none; stroke: var(--tool-b); stroke-width: 3; stroke-linecap: round; }
.p-curve-3 { fill: none; stroke: var(--tool-c); stroke-width: 3; stroke-linecap: round; }
.p-marker { fill: #fff; stroke: var(--tool-a); stroke-width: 4; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.p-axis { stroke: var(--ink); stroke-width: 1; }
.p-tick { stroke: var(--line); stroke-width: 1; }
.p-label { font-family: var(--mono); font-size: 12px; fill: var(--ink-soft); }

/* Animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
@keyframes pulse {
    0% { r: 4; opacity: 1; }
    50% { r: 6; opacity: 0.5; }
    100% { r: 4; opacity: 1; }
}
.anim-float { animation: float 4s ease-in-out infinite; }
.anim-pulse { animation: pulse 2s infinite; }

/* Specific: Ellipse Plot Area */
.plot-container {
    position: relative;
    width: 100%;
    height: 300px;
    background: linear-gradient(to bottom, #fff, var(--pink-soft));
    border-radius: 12px;
    border: 1px solid var(--line);
    margin-bottom: 20px;
    overflow: hidden;
}
.plot-grad-bar {
    position: absolute;
    bottom: 10px;
    left: 10%;
    width: 80%;
    height: 8px;
    background: linear-gradient(90deg, #4a8a9a, #872426, #c75b91);
    border-radius: 4px;
    opacity: 0.6;
}

  .rhythm-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin: 24px 0 18px; }
  .rhythm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
  .rhythm-actions .btn-small { flex: 0 1 auto; min-width: 132px; }
  .rhythm-tempo { display: grid; grid-template-columns: auto minmax(130px, 210px) auto; align-items: center; gap: 12px; font-family: var(--mono); font-size: .85rem; color: var(--ink-soft); }
  .rhythm-tempo output { min-width: 58px; color: var(--plum); font-weight: 700; }
  .rhythm-grid-scroll { overflow-x: auto; padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; }
  .rhythm-grid { display: grid; grid-template-columns: 82px repeat(16, minmax(24px, 1fr)); gap: 6px; align-items: center; min-width: 560px; }
  .rhythm-corner, .rhythm-step-number { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); text-align: center; }
  .rhythm-instrument { font-family: var(--mono); font-size: .78rem; color: var(--ink); }
  .rhythm-step { width: 100%; aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; transition: background .12s, border-color .12s, outline-color .12s; }
  .rhythm-step:hover { border-color: var(--plum); }
  .rhythm-step.beat-start, .rhythm-step-number.beat-start { box-shadow: inset 2px 0 rgba(42,18,21,.18); }
  .rhythm-step.is-active[data-instrument="clap"] { background: #b58433; border-color: #b58433; }
  .rhythm-step.is-active[data-instrument="snare"] { background: var(--tool-b); border-color: var(--tool-b); }
  .rhythm-step.is-active[data-instrument="hat"] { background: var(--tool-c); border-color: var(--tool-c); }
  .rhythm-step.is-active[data-instrument="kick"] { background: var(--tool-a); border-color: var(--tool-a); }
  .rhythm-step.is-current { outline: 2px solid var(--ink); outline-offset: 1px; }
  .rhythm-status { min-height: 1.5em; margin-top: 6px; color: var(--ink-soft); font-family: var(--mono); font-size: .8rem; }
  @media (max-width: 600px) { .rhythm-toolbar { align-items: stretch; } .rhythm-tempo { grid-template-columns: auto minmax(0, 1fr) auto; } }

/* ---------- KONTAKT ---------- */
.kontakt{background:#fff; text-align:center; position:relative; overflow:hidden;}
.kontakt .kgrid{position:absolute; inset:0; background:linear-gradient(rgba(135,36,38,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(135,36,38,.06) 1px,transparent 1px); background-size:52px 52px;}
.kontakt .wrap{position:relative;}
.kontakt .idx{margin-bottom:18px;}
.kontakt h2{font-size:clamp(2.6rem,8vw,5.5rem); font-weight:500; color:var(--plum-deep);}
.kontakt .sub{font-family:var(--serif); font-size:1.3rem; color:var(--plum); margin-top:14px;}
.kontakt .btnrow{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px;}
.kontakt .btn{display:inline-flex; align-items:center; gap:.5em; font-weight:500; text-decoration:none; padding:14px 28px; border-radius:50px; font-size:.95rem; transition:transform .3s, background .3s, color .3s; border:1.5px solid var(--plum);}
.kontakt .btn.primary{background:var(--plum); color:var(--pink-soft); border-color:var(--plum);}
.kontakt .btn.primary:hover{background:var(--plum-deep); transform:translateY(-3px);}
.kontakt .btn.ghost:hover{background:var(--plum); color:var(--pink-soft); transform:translateY(-3px);}

/* ---------- FOOTER ---------- */
footer{background:var(--plum-deep); color:rgba(255,242,251,.8); padding:56px 0 34px;}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px;}
.foot-grid h4{font-family:var(--serif); font-weight:500; color:var(--pink-mid); font-size:1.05rem; margin:0 0 14px;}
.foot-grid a{color:rgba(255,242,251,.8); text-decoration:none; display:block; margin-bottom:10px; transition:color .3s;}
.foot-grid a:hover{color:var(--pink-mid);}
.foot-grid p{margin:0 0 12px; font-size:.95rem;}
.foot-word{font-family:var(--serif); font-weight:500; letter-spacing:.08em; font-size:clamp(2.4rem,8vw,4.6rem); color:rgba(255,242,251,.92); border-top:1px solid rgba(255,170,255,.2); margin:38px 0 18px; padding-top:28px;}
.foot-fine{font-size:.85rem; color:rgba(255,242,251,.62); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;}
@media (max-width:720px){ .foot-grid{grid-template-columns:1fr 1fr; gap:28px;} .foot-grid > div:first-child{grid-column:1/-1;} }