Das Gedicht gelesen durch zwölf Brillen gleichzeitig.
sinlos·coraherzzón
DAS WORT ALS SYSTEM
LITERATURWISSENSCHAFT»Herzlos« wird buchstäblich — das Zeichen gibt seinen Körper zurück▾
Zwischen Konkretpoesie und Neuer Subjektivität. Keine Reime, kein Metrum. Die Grundeinheit ist das Enjambement — jeder Zeilenbruch erzeugt eine semantische Doppelbelichtung.
»Herzlos« am Anfang und »Herz los« am Ende sind paradigmatisch äquivalent — aber syntagmatisch verschieden. Das Gedicht ist die Entfaltung dieses Unterschieds.
Die poetische Kraft kommt nicht aus Bildlichkeit, sondern aus syntaktischer Brechung. Das einzige Bild — das Herz — ist so konventionell, dass es an der Grenze zum Abstraktum steht.
sinlos·coraherzzón radikalisiert diesen Vorgang: zwei Sprachen, die dieselbe Remotivierung vollziehen. Das Zeichen gibt seinen Körper in zwei Sprachen zurück.
PHÄNOMENOLOGIEEmpfindung ohne eigenen Leib — ein phänomenologischer Skandal▾
Das Ich beschreibt eine Erfahrung, die phänomenologisch unmöglich sein sollte: Es fühlt die Gefühle eines fremden Bewusstseins nicht als fremde, sondern als einzige.
»Erspüren« beschreibt eine leibliche Intentionalität, die nicht vom eigenen Körper ausgeht — von einem Organ, das sich im fremden Körper orientieren muss.
Merleau-Ponty: der Leib ist die Schwelle zwischen Eigenem und Fremdem. Das Gedicht unterläuft dieses Modell. Das Herz ist weder Eigenleib noch Fremdleib — ein vagabundierendes Sensorium.
sinlos·coraherzzón ist die Naht selbst als Lautgestalt. Merleau-Ponty: die Naht ist der Leib.
HERMENEUTIKDer beste Interpret ist der, der kein Vorverständnis mehr mitbringt▾
Gadamers Horizontverschmelzung wird literalisiert — und widerlegt. Die Verschmelzung hier ist asymmetrisch: Das Ich gibt, das Du empfängt. Es bleiben nicht zwei Horizonte.
»Wirkliches Verstehen ist kein Dialog auf Augenhöhe, sondern ein Opfer. Man versteht den Anderen erst dann, wenn man das Eigene aufgibt.«
Das Ich hat seine Innerlichkeit weggegeben und versteht das Du trotzdem — oder gerade deshalb. Das ist eine hermeneutische Provokation.
EXISTENTIALISMUSLiebe als einzige Kraft, die die Jemeinigkeit durchbrechen kann▾
Heidegger: Existenz ist immer je meine, unvertretbar, unübertragbar. Das Gedicht widerspricht in der ersten Zeile. Das Ich hat den Kern seiner Jemeinigkeit weggegeben.
Sartre: Entweder ich objektiviere den Anderen, oder der Andere objektiviert mich. Das Gedicht entwirft eine dritte Möglichkeit: das Ich macht sich selbst freiwillig zum Objekt — durch einen autonomen Akt.
»Die Leere führt nirgendwohin. Das Ich wird nicht eigentlich. Es stellt nur fest, dass es sein Herz los ist. Die Leere ist nicht Durchgang — sondern Endpunkt.«
Kierkegaard wird im Semikolon hörbar. Die Logik führt in eine Aporie — und statt sie aufzulösen, springt das Ich in die Frage.
ONTOLOGIE»Bin ich« — Seinssetzung und Entleerung im selben Atemzug▾
Das Herz wechselt zwischen zwei Seinsweisen: Als Geschenk ist es vorhanden — ein Ding. Als schlagendes Organ existiert es. Es hat eine doppelte Ontologie: Zuhandenheit im fremden Leib, Abwesenheit im eigenen.
Levinas: Das Ich hat sein Sein an den Anderen abgetreten. Was übrig bleibt, ist ein Ich, das nur noch als Relation existiert.
»Bin ich / mein Herz los« — das Sein wird im selben Atemzug gesetzt und geleert. Das Ich ist, aber es ist als Mangel.«
Das Gedicht endet ohne ontologischen Abschluss. Der Zustand ist nicht vorübergehend. Er ist die Seinsweise der Liebe: ein dauerhaftes Nicht-bei-sich-Sein.
PSYCHOANALYSEKeine Introjektion — eine radikale Projektion des psychischen Kerns▾
Freud: Das Ich schleudert sein libidinöses Zentrum ins Objekt hinaus. Was bleibt: ein Körper, der weint, ohne zu wissen warum. Alexithymie — aber nicht durch Verdrängung, sondern durch Verschenkung.
Klein: projektive Identifikation als Liebesakt. Das Herz funktioniert als Teilobjekt, das vom Inneren des Anderen aus Bericht erstattet.
»Totale Empathie und totale Kontrolle sind strukturell nicht unterscheidbar. Die Liebe trägt einen paranoiden Kern.«
Lacan: »Bin ich mein Herz los« ist die Grundformel des Begehrens. Das Subjekt konstituiert sich über einen Mangel. Die Erzählung »ich schenke es dir« — eine imaginäre Bewältigung struktureller Kastration.
JUNGDas Ich projiziert nicht seine Anima — es projiziert seine Fähigkeit zur Projektion▾
Das Herz funktioniert als Selbst im Jungschen Sinne. Indem das Ich es verschenkt, gibt es sein Selbst ab. Das genaue Gegenteil von Individuation.
Was bleibt: ein Ich ohne Symbolisierungsfähigkeit, ohne Zugang zum Unbewussten. »Verlassen und leer« — Deflation. Das Unbewusste ist abgezogen. Das Ich steht in einer Wüste ohne Bilder.
»Ist ›schenke es dir‹ ein bewusster Akt — oder die Rationalisierung einer unbewussten Verschmelzung, die längst stattgefunden hat?«
MORPHOLOGIEEine Kippfigur, die nie zur Ruhe kommt▾
Salber: Psychische Wirklichkeit organisiert sich in Gestalten. Die Gesamtbewegung des Gedichts ist eine Umbildung: »herzlos« als feste Bedeutung wird aufgebrochen — und in eine neue überführt.
Erste Strophe: Zentrierung. Zweite Strophe: Ausbreitung. »Verlassen und leer« — maximale Ausbreitung, die Gestalt zerfasert an ihren Rändern.
»Wie wirkt das?« — als Kippfigur. Jede Leserichtung (Verlust, Gabe, Liebe, Leere) ist gleich wahr und gleich unvollständig.«
KONSTRUKTIVISMUSDas Gedicht beweist seine eigene Unmöglichkeit durch seine Existenz▾
Maturana: Kein System kann Elemente in ein anderes einschleusen. Was das Ich als »erspüren« beschreibt, ist eine Konstruktion des eigenen Systems — die dem Du zugeschrieben wird.
Von Foerster: »Meine Tränen können es nicht sein; wie kann ich weinen« — Kybernetik zweiter Ordnung. Das System beobachtet seine eigenen Operationen als paradox.
»Ist das viabel?« Die Konstruktion erklärt das Weinen — aber löst die Leere nicht auf. Viabel genug für ein Gedicht. Nicht viabel genug für Trost.«
sinlos·coraherzzón: Zwei operational geschlossene Sprachsysteme durchdringen einander. Das Wort beweist seine eigene Unmöglichkeit durch Existenz.
STRUKTURALISMUSDas punctum: »verlassen und leer« — das Detail das das System sprengt▾
Die binären Oppositionen: ich/du, eigen/fremd, innen/außen, voll/leer. Entscheidend: das Gedicht hält diese Oppositionen nicht stabil. Es lässt sie systematisch kollabieren.
Greimas: Das Aktantenmodell scheitert. Das Subjekt ist zugleich Sender und Objekt — es sendet sich selbst. Intrasubjektive Spaltung lässt sich nicht darstellen.
»Das studium: Herz-Verschenken als Liebesmetapher. Das punctum: ›verlassen und leer‹ — die zwei Wörter die den Text unterbrechen und das System sprengen.«
Saussures Arbitrarität wird ausgehebelt. Das Gedicht remotiviert »herzlos« — gibt dem Zeichen seinen Körper zurück. Poesie macht die Sprache sich selbst sichtbar.
ADLERMangel wird in Großzügigkeit umgedeutet — und kehrt unverkleidet zurück▾
Das Ich inszeniert seine Herzlosigkeit als Geschenk. »Ich bin nicht herzlos, weil mir etwas fehlt — sondern weil ich gegeben habe.« Kompensationsstrategie höchster Raffinesse.
»Dient die Gabe dem Du — oder dient sie dem Ich, das sich über die Gabe definiert?«
Der Lebensstil: permanente Transmutation von Passivität in Aktivität. Im letzten Wort scheitert die Kompensation. Das Minderwertigkeitsgefühl kehrt zurück — diesmal ohne Verkleidung.
Boss: Das Empfindungsvermögen ist nicht dort, wo der Leib ist. Eine ontologische Deplatzierung.
Binswanger: Es gibt kein Wir. Die Wirheit scheitert, weil die Gabe einseitig bleibt. Was entsteht: eine asymmetrische Verschränkung — das Ich ist im Du, ohne dass das Du im Ich wäre.
»Das Ich ist der Einsamkeit des Du gegenüber erschlossen — kraft eines ausgelagerten Organs. Kann Erschlossenheit delegiert werden? Die Daseinsanalyse kann diese Frage nicht beantworten.«
<script>
// ══ NAVIGATION ══
const screens = ['s0','s1','s2','s3','s4','s5'];
let aktuellerScreen = 0;
function zeigeScreen(idx) {
const alt = document.getElementById(screens[aktuellerScreen]);
const neu = document.getElementById(screens[idx]);
alt.classList.add('exit');
setTimeout(() => { alt.classList.remove('active','exit'); }, 700);
neu.classList.add('active');
aktuellerScreen = idx;
// Nav aktualisieren
document.querySelectorAll('.nav-btn').forEach((b,i) => {
b.classList.toggle('aktiv', i === idx);
});
document.getElementById('nav').classList.add('sichtbar');
if (idx === 1) {
startGedichtAnimation();
}
if (idx === 2) startWortAssembly();
if (idx === 3) initOrakel();
}
// Swipe
let touchX = 0;
document.addEventListener('touchstart', e => { touchX = e.touches[0].clientX; }, {passive:true});
document.addEventListener('touchend', e => {
const dx = touchX - e.changedTouches[0].clientX;
if (Math.abs(dx) > 55) {
const next = aktuellerScreen + (dx > 0 ? 1 : -1);
if (next >= 0 && next < screens.length) zeigeScreen(next);
}
}, {passive:true});
// ══ GEDICHT-ANIMATION ══
let gedichtGestartet = false;
function startGedichtAnimation() {
if (gedichtGestartet) return;
gedichtGestartet = true;
const alles = document.getElementById('s1-alles');
if (alles) {
alles.style.transition = 'opacity 14s ease';
requestAnimationFrame(() => requestAnimationFrame(() => {
alles.style.opacity = '1';
}));
}
// kein Titel auf Screen 1
// WEITER erscheint nach dem Fade
setTimeout(() => {
const btn = document.getElementById('weiter1');
if (!btn) return;
btn.style.transition = 'opacity 1.4s ease';
btn.style.opacity = '0.45';
setTimeout(() => btn.classList.add('schlagend'), 1500);
}, 16000);
}
// ══ ROULETTE ══
const SEGS = [
{ id:'feuer', label:'DIE GESCHICHTE', element:'🔥 FEUER', icon:'🔥', color:'#e85d04', colorDark:'#7a0000', colorText:'#ffd5a0',
desc:'Chat-Protokolle, Annäherung, Verbrennung.', quote:'»Manche Feuer löscht man nicht – man überlebt sie.«' },
{ id:'wasser', label:'DIE BEDEUTUNG', element:'💧 WASSER', icon:'💧', color:'#0096c7', colorDark:'#03045e', colorText:'#a0d8ff',
desc:'Symbole, Tränen, das Fließende.', quote:'»Tränen lügen nicht – selbst wenn das Herz schweigt.«' },
{ id:'erde', label:'DAS VERFAHREN', element:'🌿 ERDE', icon:'🌿', color:'#7cb518', colorDark:'#283618', colorText:'#c8e6a0',
desc:'Paragraphen, Strafanzeigen, Institutionen.', quote:'»Das Recht kennt keinen Schmerz – nur Tatbestände.«' },
{ id:'luft', label:'DIE ANALYSE', element:'💨 LUFT', icon:'💨', color:'#8ecae6', colorDark:'#1a4a5e', colorText:'#d0f0ff',
desc:'KI-Kommentare, Widersprüche.', quote:'»Die Maschine hat keine Moral. Nur Muster.«' },
{ id:'aether', label:'DIE GRENZE', element:'✦ ÄTHER', icon:'✦', color:'#e9c46a', colorDark:'#4a2a00', colorText:'#f5d88a',
desc:'Das Intime, der Sphairos, das Reale.', quote:'»Im Zentrum liegt das, was keine Sprache findet.«' }
];
const canvas = document.getElementById('wheelCanvas');
const ctx2 = canvas ? canvas.getContext('2d') : null;
const SZ = 480, CX = 240, CY = 240, R = 230, IR = 76;
const DEG = Math.PI/180;
const WHEEL = [];
for (let s=0;s<5;s++){
WHEEL.push({seg:SEGS[0],size:8*DEG});
WHEEL.push({seg:SEGS[1],size:8*DEG});
WHEEL.push({seg:SEGS[2],size:8*DEG});
WHEEL.push({seg:SEGS[3],size:8*DEG});
WHEEL.push({seg:SEGS[0],size:8*DEG});
WHEEL.push({seg:SEGS[1],size:8*DEG});
WHEEL.push({seg:SEGS[2],size:8*DEG});
WHEEL.push({seg:SEGS[3],size:8*DEG});
WHEEL.push({seg:SEGS[4],size:8*DEG});
}
const N = WHEEL.length;
const STARTS = [];
let acc=0;
for(let i=0;i<N;i++){STARTS.push(acc);acc+=WHEEL[i].size;}
let angle=-Math.PI/2, cAngle=0, spinning=false, spinCount=0;
function hex2rgba(h,a){
const r=parseInt(h.slice(1,3),16),g=parseInt(h.slice(3,5),16),b=parseInt(h.slice(5,7),16);
return `rgba(${r},${g},${b},${a})`;
}
function drawWheel(a, ca) {
if (!ctx2) return;
ctx2.clearRect(0,0,SZ,SZ);
for(let i=0;i<N;i++){
const {seg,size}=WHEEL[i];
const s=a+STARTS[i], e=s+size, m=s+size/2;
const isG=seg.id==='aether';
const path=new Path2D();
path.moveTo(CX,CY); path.arc(CX,CY,R,s,e); path.closePath();
const gx=CX+Math.cos(m)*R*0.6, gy=CY+Math.sin(m)*R*0.6;
const grad=ctx2.createRadialGradient(gx,gy,0,CX,CY,R);
if(isG){grad.addColorStop(0,'#f5d88a');grad.addColorStop(0.5,'#c9a96e');grad.addColorStop(1,'#4a2a00');}
else{grad.addColorStop(0,hex2rgba(seg.color,0.92));grad.addColorStop(1,hex2rgba(seg.colorDark,0.96));}
ctx2.save();ctx2.fillStyle=grad;ctx2.fill(path);ctx2.clip(path);
ctx2.translate(CX,CY);ctx2.rotate(m);
const tR=IR+(R-IR)*0.76;
ctx2.textAlign='center';ctx2.textBaseline='middle';
if(isG){ctx2.font='bold 14px "Cinzel",serif';ctx2.fillStyle='rgba(20,10,0,0.9)';ctx2.fillText('✦',tR,0);}
else{ctx2.font='18px serif';ctx2.fillText(seg.icon,tR,0);}
ctx2.restore();
}
for(let i=0;i<N;i++){
const la=a+STARTS[i], isG=WHEEL[i].seg.id==='aether';
ctx2.beginPath();
ctx2.moveTo(CX+Math.cos(la)*IR,CY+Math.sin(la)*IR);
ctx2.lineTo(CX+Math.cos(la)*R,CY+Math.sin(la)*R);
ctx2.strokeStyle=isG?'rgba(201,169,110,0.9)':'rgba(201,169,110,0.4)';
ctx2.lineWidth=isG?1.5:0.8; ctx2.stroke();
}
ctx2.beginPath();ctx2.arc(CX,CY,R,0,Math.PI*2);
ctx2.strokeStyle='#c9a96e';ctx2.lineWidth=1.5;ctx2.stroke();
// Innenkreis
ctx2.save();ctx2.translate(CX,CY);ctx2.rotate(ca);
const cg=ctx2.createRadialGradient(0,0,0,0,0,IR);
cg.addColorStop(0,'#1a0800');cg.addColorStop(1,'#060606');
ctx2.beginPath();ctx2.arc(0,0,IR,0,Math.PI*2);ctx2.fillStyle=cg;ctx2.fill();
// Kreisschrift
const cr=IR-7, txt='MAÑANA DE MAÑANA · ';
const apc=(Math.PI*2)/(txt.length*3);
ctx2.font='italic 7px "Cormorant Garamond",serif';
ctx2.fillStyle='rgba(201,169,110,0.75)';
ctx2.textAlign='center';ctx2.textBaseline='middle';
for(let r=0;r<3;r++){for(let c=0;c<txt.length;c++){
const ca2=-Math.PI/2+(r*txt.length+c)*apc;
ctx2.save();ctx2.rotate(ca2+Math.PI/2);ctx2.translate(0,-cr);ctx2.rotate(-Math.PI/2);
ctx2.fillText(txt[c],0,0);ctx2.restore();
}}
// Crosshair
[38,24,12].forEach((rr,ii)=>{
ctx2.beginPath();ctx2.arc(0,0,rr,0,Math.PI*2);
ctx2.strokeStyle=ii===2?'rgba(201,169,110,0.4)':'rgba(30,12,6,0.9)';
ctx2.lineWidth=0.8;ctx2.stroke();
});
ctx2.strokeStyle='rgba(25,12,5,0.9)';ctx2.lineWidth=0.9;
ctx2.beginPath();ctx2.moveTo(-IR+10,0);ctx2.lineTo(IR-10,0);ctx2.stroke();
ctx2.beginPath();ctx2.moveTo(0,-IR+10);ctx2.lineTo(0,IR-10);ctx2.stroke();
ctx2.beginPath();ctx2.arc(0,0,3,0,Math.PI*2);
ctx2.fillStyle='#c9a96e';ctx2.globalAlpha=0.55;ctx2.fill();ctx2.globalAlpha=1;
// Text
ctx2.textAlign='center';ctx2.textBaseline='middle';
if(!spinning&&spinCount===0){
ctx2.font='7px "Cinzel",serif';ctx2.fillStyle='rgba(201,169,110,0.45)';
ctx2.fillText('TIPPEN',0,-22);
ctx2.font='bold 13px "Cormorant Garamond",serif';ctx2.fillStyle='#f0ece4';
ctx2.shadowColor='rgba(201,169,110,0.3)';ctx2.shadowBlur=8;
ctx2.fillText('»Mañana',0,-4);ctx2.fillText('de Mañana«',0,12);
ctx2.shadowBlur=0;
ctx2.font='italic 8px "Cormorant Garamond",serif';ctx2.fillStyle='#c9a96e';
ctx2.fillText('∴ Das Gedicht',0,26);
} else if(spinning){
ctx2.font='8px "Cinzel",serif';ctx2.fillStyle='rgba(201,169,110,0.25)';
ctx2.fillText('· · ·',0,0);
} else {
ctx2.font='6.5px "Cinzel",serif';ctx2.fillStyle='rgba(201,169,110,0.4)';
ctx2.fillText('NOCHMALS',0,-22);
ctx2.font='bold 12px "Cormorant Garamond",serif';ctx2.fillStyle='#f0ece4';
ctx2.fillText('»Mañana',0,-4);ctx2.fillText('de Mañana«',0,12);
ctx2.font='italic 8px "Cormorant Garamond",serif';ctx2.fillStyle='#555';
ctx2.fillText(`Runde ${spinCount}`,0,26);
}
ctx2.restore();
ctx2.beginPath();ctx2.arc(CX,CY,IR,0,Math.PI*2);
ctx2.strokeStyle='#c9a96e';ctx2.lineWidth=1.5;ctx2.stroke();
}
function easeOut(t){return 1-Math.pow(1-t,4);}
function getWinner(fa){
const n=(((-fa-Math.PI/2)%(Math.PI*2))+Math.PI*2)%(Math.PI*2);
for(let i=0;i<N;i++){
const s=(STARTS[i]%(Math.PI*2)+Math.PI*2)%(Math.PI*2);
const e=((STARTS[i]+WHEEL[i].size)%(Math.PI*2)+Math.PI*2)%(Math.PI*2);
if(s<e?(n>=s&&n<e):(n>=s||n<e))return i;
}return 0;
}
function spin(){
if(spinning)return;
spinning=true;spinCount++;
document.getElementById('ergebnis').classList.remove('sichtbar','offen');
const tot=(6+Math.random()*6)*Math.PI*2+Math.random()*Math.PI*2;
const dur=4500+Math.random()*2000;
const sa=angle,sc=cAngle,st=performance.now();
function anim(now){
const t=Math.min((now-st)/dur,1),e=easeOut(t);
angle=sa+tot*e;cAngle=sc-tot*e*1.4;
drawWheel(angle,cAngle);
if(t<1){requestAnimationFrame(anim);}
else{
spinning=false;
const wi=getWinner(angle);
zeigeErgebnis(WHEEL[wi].seg);
kachelMarkieren(WHEEL[wi].seg.id);
}
}
requestAnimationFrame(anim);
}
function zeigeErgebnis(seg){
const el=document.getElementById('ergebnis');
el.style.borderColor=hex2rgba(seg.color,0.3);
document.getElementById('eIcon').textContent=seg.icon;
document.getElementById('eElement').textContent=seg.element;
document.getElementById('eElement').style.color=seg.colorText;
document.getElementById('eTitel').textContent=seg.label;
document.getElementById('eTitel').style.color=seg.colorText;
document.getElementById('eText').textContent=seg.desc;
document.getElementById('eZitat').textContent=seg.quote;
document.getElementById('eZitat').style.color=seg.colorText;
el.querySelector('.ergebnis-kopf').style.background=hex2rgba(seg.colorDark,0.5);
requestAnimationFrame(()=>{
el.classList.add('sichtbar');
setTimeout(()=>el.classList.add('offen'),400);
});
}
function toggleErgebnis(){
document.getElementById('ergebnis').classList.toggle('offen');
}
if (canvas) {
canvas.addEventListener('click',e=>{
if(spinning)return;
const rect=canvas.getBoundingClientRect();
const sx=canvas.width/rect.width,sy=canvas.height/rect.height;
const x=(e.clientX-rect.left)*sx-CX,y=(e.clientY-rect.top)*sy-CY;
if(Math.sqrt(x*x+y*y)<=IR)spin();
});
canvas.addEventListener('touchend',e=>{
if(spinning)return;
const t=e.changedTouches[0];
const rect=canvas.getBoundingClientRect();
const sx=canvas.width/rect.width,sy=canvas.height/rect.height;
const x=(t.clientX-rect.left)*sx-CX,y=(t.clientY-rect.top)*sy-CY;
if(Math.sqrt(x*x+y*y)<=IR){e.preventDefault();spin();}
},{passive:false});
}
// ══ KACHELN ══
const ANMELDUNG = 'https://www.theater24.net/theater24/vorgaben/philosophie-der-performativtaet/teil-4-manana-de-manana/spieler-interface/anmeldung';
const KACHEL_DATA = {
feuer: { desc:'Chat-Protokolle, Annäherung, Verbrennung. Das Feuer kennt keine Gnade.', url: ANMELDUNG + '?ziel=aether/feuer' },
wasser: { desc:'Symbole, Tränen, das Fließende. Was bedeutet es, wenn Tränen herzlos werden?', url: ANMELDUNG + '?ziel=aether/wasser' },
erde: { desc:'Paragraphen, Strafanzeigen, Institutionen. Das Recht kennt keinen Schmerz.', url: ANMELDUNG + '?ziel=aether/erde' },
luft: { desc:'KI-Kommentare, Widersprüche, das Unsichtbare. Die Maschine hat keine Moral.', url: ANMELDUNG + '?ziel=aether/luft' },
aether: { desc:'Das Intime, der Sphairos, das Reale. Im Zentrum liegt das, was keine Sprache findet.', url: ANMELDUNG + '?ziel=aether' },
};
function selectTile(id){
const row = document.getElementById('tilesRow');
const tiles = document.querySelectorAll('.seg-tile');
const panel = document.getElementById('s4Panel');
const desc = document.getElementById('s4Desc');
const link = document.getElementById('s4Link');
const bereitsAktiv = document.querySelector(`.seg-tile[data-id="${id}"]`)?.classList.contains('active');
tiles.forEach(t => t.classList.remove('active'));
if (row) row.classList.remove('has-active');
if (!bereitsAktiv) {
document.querySelector(`.seg-tile[data-id="${id}"]`)?.classList.add('active');
if (row) row.classList.add('has-active');
if (panel && KACHEL_DATA[id]) {
desc.textContent = KACHEL_DATA[id].desc;
link.href = KACHEL_DATA[id].url;
panel.classList.add('aktiv');
}
} else {
if (panel) panel.classList.remove('aktiv');
}
}
function kachelWaehlen(id){ selectTile(id); }
// ══ META-SCREEN TIMING ══
// Nach 9 Sekunden Screen 0 → weiter zu Screen 1 möglich
setTimeout(()=>{
document.getElementById('nav').classList.add('sichtbar');
},3000);
// ══ DEUTUNGEN ══
function toggleDeutung(el) {
const war = el.classList.contains('offen');
// Alle schließen
document.querySelectorAll('.deutung.offen').forEach(d => d.classList.remove('offen'));
// Diese öffnen wenn sie zu war
if (!war) el.classList.add('offen');
}
// Initiales Rad zeichnen
setTimeout(()=>drawWheel(angle,cAngle),100);
// ══ TITEL ANPASSEN – exakt so breit wie die längste Gedichtzeile ══
function titelAnpassen() {
// Referenz: längste Zeile im Gedicht
const referenz = document.querySelector('#s1 .gedicht-strophe');
const titel1 = document.querySelector('#s1 .gedicht-titel');
if (!referenz) return;
// Breite der längsten Zeile messen
// Wir nehmen die tatsächliche Breite des strophe-Containers
const breite = referenz.getBoundingClientRect().width;
if (breite < 10) return;
// Titel-Breite iterativ auf Zielbreite einstellen
[titel1, titel0].forEach(el => {
if (!el) return;
// Binäre Suche nach der richtigen Schriftgröße
// Gedichtzeile: tatsächliche Schriftgröße messen
const probeZeile = document.querySelector('#s1 .gedicht-strophe');
const gedichtFs = probeZeile
? parseFloat(window.getComputedStyle(probeZeile).fontSize)
: 18;
// Titel = kleiner als Gedicht, diskret
const zielFs = gedichtFs * 0.75;
let lo = zielFs * 0.9, hi = zielFs * 1.1, fs = zielFs;
el.style.whiteSpace = 'nowrap';
el.style.display = 'inline-block';
for (let i = 0; i < 14; i++) {
fs = (lo + hi) / 2;
el.style.fontSize = fs + 'px';
const w = el.getBoundingClientRect().width;
if (w < breite * 0.97) lo = fs;
else hi = fs;
}
el.style.fontSize = fs + 'px';
el.style.display = '';
el.style.whiteSpace = '';
console.log('Titel px:', Math.round(fs));
});
}
// ══ SCREEN 2: Wort-Assembly – Fragmente über Screen verstreut, finden sich ══
let wortAssemblyGestartet = false;
function startWortAssembly() {
if (wortAssemblyGestartet) return;
wortAssemblyGestartet = true;
const fragDaten = [
{ id: 'wf-sin', text: 'sin' },
{ id: 'wf-los', text: 'los' },
{ id: 'wf-punkt', text: '·' },
{ id: 'wf-cora', text: 'cora' },
{ id: 'wf-herz', text: 'herz' },
{ id: 'wf-zon', text: 'zón' },
];
const W = window.innerWidth;
const H = window.innerHeight;
// Zufällige Startpositionen – über den ganzen Screen verstreut
// Drei in der linken Hälfte, drei in der rechten, alle auf verschiedenen Höhen
const startPos = [
{ top: H * 0.10, left: W * 0.05 }, // sin – oben links
{ top: H * 0.22, left: W * 0.60 }, // los – oben rechts
{ top: H * 0.48, left: W * 0.44 }, // · – Mitte
{ top: H * 0.65, left: W * 0.07 }, // cora – unten links
{ top: H * 0.38, left: W * 0.68 }, // herz – rechts Mitte
{ top: H * 0.78, left: W * 0.55 }, // zón – unten rechts
];
const ziel = document.getElementById('mw-ziel');
const unten = document.getElementById('mw-unten');
const weiter = document.getElementById('weiter2');
// Phase 1: Fragmente an ihren Startpositionen platzieren und einblenden
fragDaten.forEach((fd, i) => {
const el = document.getElementById(fd.id);
if (!el) return;
const pos = startPos[i];
// Setze Startposition absolut
el.style.position = 'absolute';
el.style.top = pos.top + 'px';
el.style.left = pos.left + 'px';
el.style.transition = 'none';
// Einblenden mit Verzögerung
setTimeout(() => {
el.style.transition = 'opacity 1s ease';
el.classList.add('sichtbar');
// Beim ersten Fragment: Herzschlag beginnt
}, 200 + i * 500);
});
// Phase 2: Kurze Pause – dann alle zur Mitte fliegen
const assemblyDelay = 200 + fragDaten.length * 500 + 1400;
setTimeout(() => {
// Ziel: Bildschirmmitte
const cx = W / 2;
const cy = H * 0.42;
fragDaten.forEach((fd, i) => {
const el = document.getElementById(fd.id);
if (!el) return;
const pos = startPos[i];
const dx = cx - pos.left;
const dy = cy - pos.top;
// Sanfte Transition zur Mitte
el.style.transition = `transform 1.3s cubic-bezier(0.4,0,0.2,1) ${i*60}ms, opacity 0.7s ease ${i*60+800}ms, color 0.8s ease`;
el.style.transform = `translate(${dx}px, ${dy}px) scale(0.5)`;
el.style.color = 'rgba(201,169,110,0.5)';
});
// Fragmente ausblenden – Zielwort erscheint
setTimeout(() => {
fragDaten.forEach(fd => {
const el = document.getElementById(fd.id);
if (el) el.style.opacity = '0';
});
if (ziel) ziel.classList.add('sichtbar');
}, 1100);
// Erklärung + WEITER erscheinen
setTimeout(() => {
if (unten) unten.classList.add('sichtbar');
}, 2600);
setTimeout(() => {
if (weiter) {
weiter.style.opacity = '0.45';
setTimeout(() => weiter.classList.add('schlagend'), 1400);
}
}, 3200);
}, assemblyDelay);
}
// ══ SCREEN 0: Fragmente kristallisieren ══
const FRAGMENTE = [
{ text: 'ich hätte mir vorgestellt, wie viel unendliche Möglichkeiten', typ: 'k' },
{ text: 'oder man wechselt einfach die Sprache', typ: 'si' },
{ text: 'wir machen das ganz konsequent', typ: 'k' },
{ text: 'wie James Joyce', typ: 'k' },
{ text: 'sin', typ: 'highlight' },
{ text: 'Stillstand in Bewegung', typ: 'k' },
{ text: 'los', typ: 'highlight' },
{ text: 'die Erinnerung spricht. nicht du. nicht ich.', typ: 'si' },
{ text: 'Hat nichts zu sagen.', typ: 'si' },
{ text: 'cora', typ: 'highlight' },
{ text: 'Un-Schuld!', typ: 'k' },
{ text: 'herz', typ: 'highlight' },
{ text: 'und leidenschaftliche Erinnerung dazwischen', typ: 'si' },
{ text: 'zón', typ: 'highlight' },
{ text: 'nur der Tod schafft Klarheit', typ: 'k' },
{ text: 'wer nicht mit seiner Erinnerung bezahlt, dem bleibt die Geschichte verschlossen', typ: 'si' },
{ text: '·', typ: 'highlight' },
];
// Das Quelldokument – WhatsApp, 11.10.24, 13:27
// Nicht Fragment. Nicht Kommentar. Dokument.
const QUELLDOKUMENT = {
zeitstempel: '11.10.24, 13:27',
text: [
'Muchas lágrimas sin corazón',
'No tengo corazón.',
'Porque yo te lo di a ti',
'Corazón mío',
'Late en ti con tu corazones juntos',
'Y me siento',
'Qué triste estás.',
'',
'Porque son tus lágrimas',
'Que lloro, mis lágrimas',
'No puede ser. ¿Cómo?',
'Puedo llorar porque estoy',
'Perdí mi corazón',
'— — —', // die gestrichene Zeile als Lücke
]
};
let metaStarted = false;
function startMetaAnimation() {
if (metaStarted) return;
metaStarted = true;
const raum = document.getElementById('fragmentraum');
// ── Quelldokument aufbauen und platzieren ──
const qdok = document.getElementById('quelldok');
const qdokInner = document.getElementById('qdok-inner');
if (qdok && qdokInner) {
// Zeitstempel
const ts = document.createElement('div');
ts.className = 'qdok-ts';
ts.textContent = QUELLDOKUMENT.zeitstempel;
qdokInner.appendChild(ts);
// Zeilen
QUELLDOKUMENT.text.forEach(zeile => {
const z = document.createElement('div');
if (zeile === '') {
z.className = 'qdok-zeile leer';
} else if (zeile === '— — —') {
z.className = 'qdok-zeile strich';
z.textContent = '— — —';
} else {
z.className = 'qdok-zeile';
z.textContent = zeile;
}
qdokInner.appendChild(z);
});
// Position: untere linke Ecke, etwas eingerückt
const W = window.innerWidth;
const H = window.innerHeight;
qdok.style.position = 'absolute';
qdok.style.left = Math.max(12, W * 0.04) + 'px';
qdok.style.bottom = '80px';
// Erscheint früh – liegt unter allem anderen
setTimeout(() => {
qdok.classList.add('sichtbar');
}, 600);
}
const W = window.innerWidth;
const H = window.innerHeight;
// Fragmente nacheinander einblenden, pulsieren, dann in Hintergrund sinken
FRAGMENTE.forEach((f, i) => {
setTimeout(() => {
const el = document.createElement('div');
el.className = 'frag ' + f.typ;
el.textContent = f.text;
// Zufällige Position – aber lesbar, nicht am Rand
const left = 8 + Math.random() * 50;
const top = 10 + (i / FRAGMENTE.length) * 72 + (Math.random() - 0.5) * 8;
el.style.left = left + '%';
el.style.top = top + '%';
if (f.typ === 'k') el.style.right = (100 - left - 40) + '%';
raum.appendChild(el);
// Einblenden – pulsierend
requestAnimationFrame(() => {
el.style.opacity = f.typ === 'highlight' ? '0.85' : f.typ === 'si' ? '0.5' : '0.7';
});
// Nach einer Weile in Hintergrund sinken
setTimeout(() => {
el.classList.add('gesunken');
}, 4000 + Math.random() * 3000);
}, i * 1400 + 400);
});
// Gedicht erscheint über den gesunkenen Fragmenten
const gedichtStart = FRAGMENTE.length * 1400 + 2000;
const TAKT = 4000;
const SEQUENZ = [
[0.15, 0], // O
[0, 0],
[0.33, 0], // O
[0, 0],
[0, 0.33], // U
[0, 0],
[0.50, 0], // O
[0, 0],
[0, 0.50], // U
[0, 0],
[0, 0.66], // U
[0, 0],
[0.66, 0], // O
[0, 0],
[0, 0.88], // U
[0, 0],
[0.88, 0], // O
[0, 0],
[1.0, 1.0], // beide bleiben
];
SEQUENZ.forEach(([op1, op2], s) => {
setTimeout(() => {
const b1 = document.getElementById('go-block1');
const b2 = document.getElementById('go-block2');
if (b1) b1.style.opacity = op1;
if (b2) b2.style.opacity = op2;
}, gedichtStart + 400 + s * TAKT);
});
// Trennstrich erscheint bei Stufe 8
setTimeout(() => {
const linie = document.getElementById('go-linie');
if (linie) linie.style.background = 'rgba(201,169,110,0.3)';
}, gedichtStart + 400 + 8 * TAKT);
// SI-Label nach der Sequenz
setTimeout(() => {
const si = document.getElementById('go-si');
if (si) si.style.color = 'rgba(201,169,110,0.45)';
}, gedichtStart + 400 + SEQUENZ.length * TAKT + 8000);
// Titel erscheint nach Sequenz + 18 Sek
setTimeout(() => {
const t = document.getElementById('go-titel');
const d = document.getElementById('go-datum');
if (t) t.style.opacity = '1';
if (d) d.style.opacity = '1';
}, gedichtStart + 400 + SEQUENZ.length * TAKT + 18000);
// Nach Titel + 8 Sek: 13 Wörter lösen sich, dann erste Zeile
const titelZeit = gedichtStart + 400 + SEQUENZ.length * TAKT + 18000;
const wanderStart = titelZeit + 8000;
// Alle Wörter aus dem Gedicht gesammelt
// Zielsprache aus Browser
const zielSprache = (navigator.language || 'es').split('-')[0];
// Übersetzungs-Funktion via Proxy
async function uebersetze(text) {
try {
const r = await fetch('https://theater24.net/files/agon/translate-proxy.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text, source: 'de', target: zielSprache })
});
const d = await r.json();
return d.translatedText || text;
} catch(e) { return text; }
}
// Titel-Taumeln dann Farbfluss
setTimeout(async () => {
const titel = document.getElementById('go-titel');
// 1. Titel taumelt
if (titel) {
titel.style.transition = 'transform 0.4s ease-in-out';
titel.style.transformOrigin = 'center center';
titel.style.transform = 'rotate(130deg)';
await new Promise(r => setTimeout(r, 400));
titel.style.transform = 'rotate(-108deg)';
await new Promise(r => setTimeout(r, 400));
titel.style.transform = 'rotate(360deg)';
await new Promise(r => setTimeout(r, 500));
titel.style.transition = 'transform 0.3s ease';
titel.style.transform = 'rotate(0deg)';
await new Promise(r => setTimeout(r, 600));
// Titel auf Zielsprache übersetzen
const titelUe = await uebersetze('Herzlose Tränen');
titel.style.transition = 'color 0.8s ease';
titel.style.color = '#c9212b';
await new Promise(r => setTimeout(r, 400));
titel.textContent = titelUe;
titel.style.color = 'var(--gold)';
}
await new Promise(r => setTimeout(r, 1200));
// 2. Roter Farbfluss von oben — Zeile für Zeile übersetzen
const zeilen = ['go-z1','go-z2','go-z3','go-z4','go-z5','go-z6','go-z7','go-z8','go-z9','go-z10','go-z11','go-z12'];
for (let i = 0; i < zeilen.length; i++) {
const el = document.getElementById(zeilen[i]);
if (!el) continue;
// Rote Farbe überflutet die Zeile
el.style.transition = 'color 0.5s ease, text-shadow 0.5s ease';
el.style.color = '#c9212b';
el.style.textShadow = '0 0 12px rgba(201,33,43,0.6)';
// Gleichzeitig übersetzen
const originalText = el.textContent;
const uebersetzt = await uebersetze(originalText);
await new Promise(r => setTimeout(r, 500));
// Text wechselt auf Übersetzung
el.style.transition = 'opacity 0.3s ease';
el.style.opacity = '0';
await new Promise(r => setTimeout(r, 300));
el.textContent = uebersetzt;
el.style.opacity = '1';
await new Promise(r => setTimeout(r, 600));
// Fragment löst sich in den Raum — rot
el.style.transition = 'opacity 1.5s ease';
el.style.opacity = '0';
if (raum) {
const frag = document.createElement('div');
frag.className = 'frag k';
frag.textContent = uebersetzt;
frag.style.left = (8 + Math.random() * 65) + '%';
frag.style.top = (5 + Math.random() * 80) + '%';
frag.style.fontSize = (9 + Math.random() * 6) + 'px';
frag.style.color = '#c9212b';
frag.style.opacity = '0';
frag.style.transition = 'opacity 2s ease';
raum.appendChild(frag);
setTimeout(() => { frag.style.opacity = '0.7'; }, 100);
}
await new Promise(r => setTimeout(r, 800));
}
}, wanderStart);
setTimeout(() => {
const btn = document.getElementById('meta-weiter');
if (btn) {
btn.style.opacity = '0.45';
setTimeout(() => btn.classList.add('schlagend'), 1400);
}
}, gedichtStart + 11000);
}
// Startet wenn Screen 0 aktiv ist (beim Laden sofort)
// Cover-Tap startet alles
const _musik = (function(){
const src = 'https://theater24.net/files/inhalte/medien/audio/songs/Orchestral%20E-Flat%20Accretion%205.51.mp3';
let audio = null, muted = false;
function starten() {
if (audio) return;
audio = new Audio(src);
audio.loop = true;
audio.volume = 0;
audio.play().catch(()=>{});
let v = 0;
const fade = setInterval(() => {
v = Math.min(v + 0.01, 0.72);
if (audio) audio.volume = muted ? 0 : v;
if (v >= 0.72) clearInterval(fade);
}, 120);
}
function mute() {
muted = true;
if (audio) audio.volume = 0;
const btn = document.getElementById('mutePanelBtn');
if (btn) { btn.textContent = 'TON AN'; btn.style.color = 'var(--gold)'; }
}
function unmute() {
muted = false;
if (audio) audio.volume = 0.72;
const btn = document.getElementById('mutePanelBtn');
if (btn) { btn.textContent = 'STUMM'; btn.style.color = 'rgba(201,169,110,0.5)'; }
}
return { starten, mute, unmute, isMuted: () => muted, setVol(v) { if (audio) audio.volume = muted ? 0 : v; } };
})();
let coverDone = false;
function radEinstieg() {
if (!coverDone) {
// Cover noch aktiv — Blitz auslösen, dann direkt zu Screen 3
coverDone = true;
const nova = document.getElementById('supernova');
const titel = document.getElementById('supernova-titel');
nova.classList.add('flash');
setTimeout(() => { if (titel) titel.classList.add('zoom'); }, 80);
setTimeout(() => {
nova.classList.remove('flash');
nova.classList.add('fade');
setTimeout(() => nova.classList.remove('fade'), 2500);
}, 3800);
setTimeout(() => { document.getElementById('cover').classList.add('weg'); }, 300);
setTimeout(() => { _musik.starten(); }, 600);
setTimeout(() => { zeigeScreen(3); initOrakel(); }, 1200);
} else {
zeigeScreen(3); initOrakel();
}
}
function coverTap() {
if (coverDone) return;
coverDone = true;
const nova = document.getElementById('supernova');
const titel = document.getElementById('supernova-titel');
nova.classList.add('flash');
setTimeout(() => { if (titel) titel.classList.add('zoom'); }, 80);
setTimeout(() => {
nova.classList.remove('flash');
nova.classList.add('fade');
setTimeout(() => nova.classList.remove('fade'), 2500);
}, 3800);
setTimeout(() => { document.getElementById('cover').classList.add('weg'); }, 300);
setTimeout(() => { _musik.starten(); }, 600);
setTimeout(startMetaAnimation, 15000);
}
// ══ ORCHESTRAL MUSIK ══
let _lautnessAktiv = true;
function toggleLautness() {
_lautnessAktiv = !_lautnessAktiv;
const btn = document.getElementById('lautnessBtn');
if (btn) btn.classList.toggle('aktiv', _lautnessAktiv);
}
function toggleTonPanel() {
const inner = document.getElementById('tonInner');
const btn = document.getElementById('muteBtn');
const offen = inner.classList.toggle('offen');
// Panel schließt sich automatisch nach 4 Sek
clearTimeout(window._tonTO);
if (offen) window._tonTO = setTimeout(() => inner.classList.remove('offen'), 4000);
}
function setVolume(val) {
document.getElementById('volZahl').textContent = val;
const v = val / 100;
if (_musik && _musik.setVol) _musik.setVol(v);
}
function toggleMute() {
_musik.isMuted() ? _musik.unmute() : _musik.mute();
}
let _orakelInitDone = false;
function initOrakel() {
if (_orakelInitDone) return;
_orakelInitDone = true;
(function(){
const ELEMENTE_O = {
feuer: { label:'DIE GESCHICHTE', name:'FEUER', color:'#e85d04', dark:'#7a0000', ct:'#ffd5a0', desc:'Chat-Protokolle, Annäherung, Verbrennung.', quote:'»Manche Feuer löscht man nicht – man überlebt sie.«', path:'M20 6L34 34H6Z M20 6V22', url: ANMELDUNG + '?ziel=aether/feuer' },
wasser: { label:'DIE BEDEUTUNG', name:'WASSER', color:'#0096c7', dark:'#03045e', ct:'#a0d8ff', desc:'Symbole, Tränen, das Fließende.', quote:'»Tränen lügen nicht – selbst wenn das Herz schweigt.«', path:'M12 16C12 32 28 32 28 16 M20 24A2 2 0 1 0 20 25', url: ANMELDUNG + '?ziel=aether/wasser' },
erde: { label:'DAS VERFAHREN', name:'ERDE', color:'#7cb518', dark:'#283618', ct:'#c8e6a0', desc:'Paragraphen, Strafanzeigen, Institutionen.', quote:'»Das Recht kennt keinen Schmerz – nur Tatbestände.«', path:'M20 6L36 14V26L20 34L4 26V14Z M20 6V20 M4 14L20 20 M36 14L20 20', url: ANMELDUNG + '?ziel=aether/erde' },
luft: { label:'DIE ANALYSE', name:'LUFT', color:'#8ecae6', dark:'#1a4a5e', ct:'#d0f0ff', desc:'KI-Kommentare, Widersprüche.', quote:'»Die Maschine hat keine Moral. Nur Muster.«', path:'M8 15H32 M6 22H28 M10 29H34', url: ANMELDUNG + '?ziel=aether/luft' },
aether: { label:'DIE GRENZE', name:'ÄTHER', color:'#e9c46a', dark:'#4a2a00', ct:'#f5d88a', desc:'Das Intime, der Sphairos, das Reale.', quote:'»Im Zentrum liegt das, was keine Sprache findet.«', path:'M20 4L24 16L36 20L24 24L20 36L16 24L4 20L16 16Z', url: ANMELDUNG + '?ziel=aether' }
};
const EL_ORDER_O = ['feuer','wasser','erde','luft','aether'];
const oCanvas = document.getElementById('orakelCanvas');
if (!oCanvas) { _orakelInitDone = false; return; }
const oCtx = oCanvas.getContext('2d');
const SZ=680,CX=340,CY=340,R=326,IR_MIN=68,IR_MAX=108;
const WHEEL_O=[]; for(let g=0;g<9;g++) EL_ORDER_O.forEach(id=>WHEEL_O.push(id));
const N_O=WHEEL_O.length, SLICE_O=(Math.PI*2)/N_O;
const iconPaths_O={};
Object.entries(ELEMENTE_O).forEach(([id,el])=>{iconPaths_O[id]=new Path2D(el.path);});
let oPhase='init',oAngle=-Math.PI/2,oCenterAngle=0,oSpinning=false,oSpinCount=0,oSmoothSpeed=0;
const O_SMOOTH=0.12;
let oGewaehlt=null;
const O_SLOTS={feuer:0,wasser:0,erde:0,luft:0},O_SLOTS_MAX=4;
let oTotalFilled=0;
function getIR_O(){return IR_MIN+(oTotalFilled/16)*(IR_MAX-IR_MIN);}
function hex2rgba_O(h,a){return `rgba(${parseInt(h.slice(1,3),16)},${parseInt(h.slice(3,5),16)},${parseInt(h.slice(5,7),16)},${a})`;}
function baueFortschritt_O(){
const bar=document.getElementById('fortschrittBar');
if(!bar)return;
['feuer','erde','wasser','luft'].forEach(id=>{
for(let i=0;i<O_SLOTS_MAX;i++){
const s=document.createElement('div');
s.className='slot-mini';s.dataset.el=id;s.dataset.idx=i;
s.style.setProperty('--fill-c',ELEMENTE_O[id].color);
bar.appendChild(s);
}
});
}
baueFortschritt_O();
function aktualisiereFortschritt_O(){
document.querySelectorAll('.slot-mini').forEach(s=>{
const el=s.dataset.el,idx=parseInt(s.dataset.idx);
if(idx<O_SLOTS[el]){s.classList.add('voll');s.style.background=ELEMENTE_O[el].color;}
});
}
function drawWheel_O(a,ca,rawSpeed){
oSmoothSpeed+=(Math.abs(rawSpeed)-oSmoothSpeed)*O_SMOOTH;
const sI=Math.min(1,Math.pow(oSmoothSpeed/0.10,1.3));
const IR=getIR_O(),sunBright=oTotalFilled/16;
oCtx.clearRect(0,0,SZ,SZ);
for(let i=0;i<N_O;i++){
const elId=WHEEL_O[i],el=ELEMENTE_O[elId];
const s=a+i*SLICE_O,e=s+SLICE_O,m=s+SLICE_O/2;
const isG=elId==='aether';
const path=new Path2D();
path.moveTo(CX,CY);path.arc(CX,CY,R,s,e);path.closePath();
const gx=CX+Math.cos(m)*R*0.6,gy=CY+Math.sin(m)*R*0.6;
const grad=oCtx.createRadialGradient(gx,gy,0,CX,CY,R);
if(isG){grad.addColorStop(0,'#f5d88a');grad.addColorStop(0.5,'#c9a96e');grad.addColorStop(1,'#4a2a00');}
else{grad.addColorStop(0,hex2rgba_O(el.color,0.92));grad.addColorStop(1,hex2rgba_O(el.dark,0.96));}
oCtx.fillStyle=grad;oCtx.fill(path);
const baseR=IR+(R-IR)*0.72;
const t=((i%N_O)*1.618033988%N_O)/N_O;
const spiralR=IR*0.2+t*(R*0.92-IR*0.2);
const iR=baseR+(spiralR-baseR)*sI;
const ix=CX+Math.cos(m)*iR,iy=CY+Math.sin(m)*iR;
const iSz=isG?0.32+sI*0.08:0.38+sI*0.12;
oCtx.save();oCtx.translate(ix,iy);oCtx.scale(iSz,iSz);oCtx.translate(-20,-20);
oCtx.globalAlpha=0.85-sI*0.2;
oCtx.strokeStyle=isG?'rgba(20,10,0,0.9)':'rgba(255,255,255,0.85)';
oCtx.lineWidth=2;oCtx.lineCap='round';oCtx.lineJoin='round';
oCtx.stroke(iconPaths_O[elId]);oCtx.globalAlpha=1;oCtx.restore();
}
for(let i=0;i<N_O;i++){
const la=a+i*SLICE_O,isG=WHEEL_O[i]==='aether';
const innerR=IR*(1-sI*0.5);
oCtx.beginPath();oCtx.moveTo(CX+Math.cos(la)*innerR,CY+Math.sin(la)*innerR);
oCtx.lineTo(CX+Math.cos(la)*R,CY+Math.sin(la)*R);
oCtx.strokeStyle=isG?'rgba(201,169,110,0.9)':'rgba(201,169,110,0.35)';
oCtx.lineWidth=isG?1.5:0.6;oCtx.stroke();
}
oCtx.beginPath();oCtx.arc(CX,CY,R,0,Math.PI*2);oCtx.strokeStyle='#c9a96e';oCtx.lineWidth=1.5;oCtx.stroke();
const PR=IR+14;
['feuer','erde','wasser','luft'].forEach((elId,q)=>{
for(let s=0;s<O_SLOTS_MAX;s++){
const idx=q*O_SLOTS_MAX+s;
const sa=-Math.PI/2+(idx/16)*Math.PI*2+0.02,ea=-Math.PI/2+((idx+1)/16)*Math.PI*2-0.02;
oCtx.beginPath();oCtx.arc(CX,CY,PR,sa,ea);
if(s<O_SLOTS[elId]){oCtx.strokeStyle=hex2rgba_O(ELEMENTE_O[elId].color,0.85);oCtx.lineWidth=5;}
else{oCtx.strokeStyle='rgba(255,255,255,0.06)';oCtx.lineWidth=3;}
oCtx.stroke();
}
});
oCtx.save();oCtx.translate(CX,CY);oCtx.rotate(ca);
const cAlpha=1-sI*0.65;
const cg=oCtx.createRadialGradient(0,0,0,0,0,IR);
const sunR=Math.floor(26+sunBright*20),sunG=Math.floor(8+sunBright*12);
cg.addColorStop(0,`rgba(${sunR},${sunG},0,${cAlpha})`);
cg.addColorStop(0.6,`rgba(12,6,0,${cAlpha})`);
cg.addColorStop(1,`rgba(6,6,6,${cAlpha})`);
oCtx.beginPath();oCtx.arc(0,0,IR,0,Math.PI*2);oCtx.fillStyle=cg;oCtx.fill();
if(sI<0.2){
oCtx.globalAlpha=1-sI*5;oCtx.textAlign='center';oCtx.textBaseline='middle';
if(oPhase==='supernova'||oPhase==='init'){
oCtx.font=`7px "Cinzel",serif`;oCtx.fillStyle='rgba(201,169,110,0.5)';oCtx.fillText('ERWECKEN',0,-14);
oCtx.font=`bold ${IR*0.16}px "Cormorant Garamond",serif`;oCtx.fillStyle='#f0ece4';oCtx.fillText('☉',0,8);
} else if(!oSpinning){
oCtx.font=`6px "Cinzel",serif`;oCtx.fillStyle='rgba(201,169,110,0.4)';
oCtx.fillText(oSpinCount===0?'DREHEN':'NOCHMALS',0,-16);
oCtx.font=`bold ${IR*0.13}px "Cormorant Garamond",serif`;oCtx.fillStyle='#f0ece4';
oCtx.fillText('»Mañana',0,-2);oCtx.fillText('de Mañana«',0,12);
}
oCtx.globalAlpha=1;
}
oCtx.restore();
oCtx.beginPath();oCtx.arc(CX,CY,IR,0,Math.PI*2);
oCtx.strokeStyle=`rgba(201,169,110,${0.6+sunBright*0.4})`;oCtx.lineWidth=1.5;oCtx.stroke();
}
function triggerSupernova_O(){
oPhase='supernova';
const sn=document.getElementById('supernova');
if(sn){sn.classList.add('flash');setTimeout(()=>{sn.classList.remove('flash');sn.classList.add('fade');},300);setTimeout(()=>{sn.classList.remove('fade');oPhase='wahl';startWahlPhase_O();},2800);}
else{setTimeout(()=>{oPhase='wahl';startWahlPhase_O();},300);}
}
function startWahlPhase_O(){
document.querySelectorAll('.wahl-btn:not(#aetherBtn)').forEach(b=>b.classList.add('pulsierend'));
}
window.aetherTap = function(){
const svg=document.getElementById('aetherSvg');
if(svg){svg.style.opacity='1';setTimeout(()=>{svg.style.opacity='0';},1200);}
window.waehlElement('aether');
};
window.waehlElement = function(id){
if(oPhase!=='wahl'&&oPhase!=='spiel')return;
if(id==='aether')return;
oGewaehlt=id;oPhase='spiel';
document.querySelectorAll('.wahl-btn').forEach(b=>{b.classList.remove('pulsierend');b.classList.toggle('gewaehlt',b.dataset.el===id);});
};
function easeOut_O(t){return 1-Math.pow(1-t,4);}
function getWinner_O(fa){
const n=(((-fa-Math.PI/2)%(Math.PI*2))+Math.PI*2)%(Math.PI*2);
for(let i=0;i<N_O;i++){
const s=((i*SLICE_O)%(Math.PI*2)+Math.PI*2)%(Math.PI*2);
const e=(((i+1)*SLICE_O)%(Math.PI*2)+Math.PI*2)%(Math.PI*2);
if(s<e?(n>=s&&n<e):(n>=s||n<e))return i;
}
return 0;
}
function spin_O(){
if(oSpinning)return;
// Gewonnenen Element-Button entfernen
if(window._letzterLand){
const gewonnenId = window._letzterLand.el.name.toLowerCase().replace('ä','ae');
const gewonnenBtn = document.querySelector(`.wahl-btn[data-el="${window._letzterLand.el === ELEMENTE_O.aether ? 'aether' : Object.keys(ELEMENTE_O).find(k=>ELEMENTE_O[k]===window._letzterLand.el)}"]`);
if(gewonnenBtn && gewonnenBtn.parentNode){
gewonnenBtn.parentNode.style.transition='opacity 0.6s ease';
gewonnenBtn.parentNode.style.opacity='0';
setTimeout(()=>{ if(gewonnenBtn.parentNode) gewonnenBtn.parentNode.style.display='none'; },600);
}
window._letzterLand = null;
}
// Existenz-Text entfernen
const em = document.getElementById('existenzMsg');
if(em) em.textContent = '';
oSpinning=true;oSpinCount++;
const resonanz=document.getElementById('resonanz');
if(resonanz)resonanz.classList.remove('sichtbar','offen');
const totalRot=(6+Math.random()*6)*Math.PI*2+Math.random()*Math.PI*2;
const dur=4500+Math.random()*2000;
const startA=oAngle,startC=oCenterAngle,startT=performance.now();
let prevA=oAngle;
function anim(now){
const t=Math.min((now-startT)/dur,1),e=easeOut_O(t);
const newA=startA+totalRot*e,raw=newA-prevA;prevA=newA;
oAngle=newA;oCenterAngle=startC-totalRot*e*1.4;
drawWheel_O(oAngle,oCenterAngle,raw);
if(t<1)requestAnimationFrame(anim);
else{
oSpinning=false;
function decay(){oSmoothSpeed*=0.88;drawWheel_O(oAngle,oCenterAngle,0);if(oSmoothSpeed>0.001)requestAnimationFrame(decay);else{oSmoothSpeed=0;drawWheel_O(oAngle,oCenterAngle,0);}}
decay();
verarbeiteErgebnis_O(WHEEL_O[getWinner_O(oAngle)]);
}
}
requestAnimationFrame(anim);
}
function verarbeiteErgebnis_O(landedEl){
const el=ELEMENTE_O[landedEl];
const istTreffer=landedEl===oGewaehlt,istAether=landedEl==='aether';
let ebene=1,ebeneText='RESONANZ · 1 FRAGE';
if(istTreffer){ebene=2;ebeneText='SYNCHRONIZITÄT · 2 FRAGEN';}
if(istAether){ebene*=2;ebeneText=`ÄTHER × ${ebene} FRAGEN`;}
if(landedEl!=='aether'&&O_SLOTS[landedEl]<O_SLOTS_MAX){O_SLOTS[landedEl]++;oTotalFilled++;aktualisiereFortschritt_O();}
else if(istAether){
const minEl=['feuer','wasser','erde','luft'].reduce((a,b)=>O_SLOTS[a]<=O_SLOTS[b]?a:b);
if(O_SLOTS[minEl]<O_SLOTS_MAX){O_SLOTS[minEl]++;oTotalFilled++;aktualisiereFortschritt_O();}
}
// Ergebnis direkt als Resonanz zeigen
zeigeResonanz_O(el, ebeneText, ebene);
if(oTotalFilled>=16){setTimeout(()=>{document.getElementById('grenze').classList.add('aktiv');},2000);}
}
window.schicksalNehmen = function(){
const dlg = document.getElementById('schicksalDialog');
if(dlg){ dlg.style.opacity='0'; setTimeout(()=>{ dlg.style.pointerEvents='none'; dlg.style.display='none'; }, 600); }
if(oSpinCount===0){
// Noch kein Spin — jetzt drehen
spin_O();
} else if(window._letzterLand){
const {el,ebeneText,ebene} = window._letzterLand;
zeigeResonanz_O(el, ebeneText, ebene);
}
};
window.schicksalRiskieren = function(){
const dlg = document.getElementById('schicksalDialog');
if(dlg){ dlg.style.opacity='0'; setTimeout(()=>{ dlg.style.pointerEvents='none'; }, 600); }
['feuer','wasser','erde','luft'].forEach(id=>{ O_SLOTS[id]=0; });
oTotalFilled=0;
aktualisiereFortschritt_O();
setTimeout(()=>spin_O(), 800);
};
function zeigeResonanz_O(el, ebeneText, ebene){
const rEl = document.getElementById('resonanz');
if(!rEl)return;
document.getElementById('rIcon').innerHTML=`<path d="${el.path}" stroke="${el.ct}" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>`;
document.getElementById('rElement').textContent=el.name;document.getElementById('rElement').style.color=el.ct;
document.getElementById('rTitel').textContent=el.label;document.getElementById('rTitel').style.color=el.ct;
document.getElementById('rEbene').textContent=ebeneText;document.getElementById('rEbene').style.color=ebene>=2?el.ct:'#555';
// Element-Buttons bekommen Link-Funktion
document.querySelectorAll('.wahl-btn').forEach(btn => {
const id = btn.dataset.el;
if (!id || !ELEMENTE_O[id]) return;
btn.onclick = () => { window.open(ELEMENTE_O[id].url, '_blank'); };
btn.style.cursor = 'pointer';
btn.title = ELEMENTE_O[id].name + ' · ÖFFNEN';
});
document.getElementById('rText').textContent=el.desc;
document.getElementById('rZitat').textContent=el.quote;document.getElementById('rZitat').style.color=el.ct;
rEl.querySelector('.resonanz-kopf').style.background=hex2rgba_O(el.dark,0.5);
rEl.style.borderColor=hex2rgba_O(el.color,0.3);
// Link zur Element-Seite
let rLink = document.getElementById('rLink');
if (!rLink) {
rLink = document.createElement('a');
rLink.id = 'rLink';
rLink.target = '_blank';
rLink.style.cssText = 'display:block;text-align:center;padding:10px 16px;font-family:\'Cinzel\',serif;font-size:8px;letter-spacing:3px;text-decoration:none;border-top:1px solid #111;';
rEl.querySelector('.resonanz-body').appendChild(rLink);
}
rLink.href = el.url;
rLink.innerHTML = '◈';
rLink.style.cssText = `display:block;text-align:center;padding:14px;font-size:22px;text-decoration:none;border-top:1px solid #111;color:${el.ct};opacity:0.35;transition:opacity 0.4s;`;
rLink.ontouchstart = () => { rLink.style.opacity='1'; };
rLink.ontouchend = () => { setTimeout(()=>{ rLink.style.opacity='0.35'; },1200); };
// Existenz-Text unter der Resonanz-Box
let existenzMsg = document.getElementById('existenzMsg');
if (!existenzMsg) {
existenzMsg = document.createElement('p');
existenzMsg.id = 'existenzMsg';
existenzMsg.style.cssText = 'font-family:"Cormorant Garamond",serif;font-size:13px;font-style:italic;color:rgba(201,169,110,0.5);text-align:center;padding:14px 20px 0;line-height:1.7;';
rEl.parentNode.insertBefore(existenzMsg, rEl.nextSibling);
}
existenzMsg.textContent = 'Willst du weiterspielen — oder Erkenntnisse sammeln? Es geht um deine Existenz.';
// Beim nächsten Spin: gewonnenen Element-Button entfernen
window._letzterLand = { el, ebeneText, ebene };
requestAnimationFrame(()=>{rEl.classList.add('sichtbar');setTimeout(()=>rEl.classList.add('offen'),400);});
if(oTotalFilled>=16){setTimeout(()=>{document.getElementById('grenze').classList.add('aktiv');},2000);}
}
function handleClick_O(clientX,clientY){
if(!oCanvas||!document.getElementById('s3').classList.contains('active'))return;
const rect=oCanvas.getBoundingClientRect();
const sx=oCanvas.width/rect.width,sy=oCanvas.height/rect.height;
const x=(clientX-rect.left)*sx-CX,y=(clientY-rect.top)*sy-CY;
const dist=Math.sqrt(x*x+y*y);
if(oPhase==='init'||oPhase==='supernova'){if(dist<=getIR_O())triggerSupernova_O();return;}
if(oPhase==='wahl')return;
if(oPhase==='spiel'&&!oSpinning&&oGewaehlt){
if(dist<=R){
if(oSpinCount===0){
// Erster Tap: Dialog zuerst
const dlg = document.getElementById('schicksalDialog');
const txt = document.getElementById('schicksalText');
if(dlg && txt){
txt.textContent = 'Das Rad wartet. Bist du bereit dein Schicksal zu empfangen — oder willst du alles riskieren, deine Existenz?';
dlg.style.display='flex';dlg.style.pointerEvents='auto';
setTimeout(()=>{ dlg.style.opacity='1'; },50);
}
} else {
spin_O();
}
}
}
}
oCanvas.addEventListener('click',e=>handleClick_O(e.clientX,e.clientY));
oCanvas.addEventListener('touchend',e=>{const t=e.changedTouches[0];handleClick_O(t.clientX,t.clientY);e.preventDefault();},{passive:false});
oPhase='wahl';
startWahlPhase_O();
(function renderLoop_O(){
if(document.getElementById('s3').classList.contains('active')&&!oSpinning&&oPhase!=='grenze')
drawWheel_O(oAngle,oCenterAngle,0);
requestAnimationFrame(renderLoop_O);
})();
drawWheel_O(oAngle,oCenterAngle,0);
})();
}
// ══ LANGUAGE BAR ══
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'de',
includedLanguages: 'de,en,es,fr,it,pt,nl,pl,ru,uk,tr,ar,hi,zh-CN,ja,ko,sv,cs',
autoDisplay: false
}, 'google_translate_element');
}
function setLang(code, btn) {
document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const pair = (code === 'de') ? 'de|de' : 'de|' + code;
if (typeof doGTranslate === 'function') {
doGTranslate(pair);
} else {
let tries = 0;
const iv = setInterval(() => {
const sel = document.querySelector('.goog-te-combo');
if (sel) { clearInterval(iv); sel.value = code; sel.dispatchEvent(new Event('change')); }
if (++tries > 30) clearInterval(iv);
}, 200);
}
}
function lbScroll(dir) {
const t = document.getElementById('lang-bar-scroll');
if (t) t.scrollBy({ left: dir * 200, behavior: 'smooth' });
}
function lbUpdateArrows() {
const t = document.getElementById('lang-bar-scroll');
const prev = document.getElementById('lb-prev');
const next = document.getElementById('lb-next');
if (!t || !prev || !next) return;
prev.classList.toggle('hidden', t.scrollLeft < 8);
next.classList.toggle('hidden', t.scrollLeft >= t.scrollWidth - t.clientWidth - 8);
}
document.addEventListener('DOMContentLoaded', () => {
const t = document.getElementById('lang-bar-scroll');
if (!t) return;
t.addEventListener('scroll', lbUpdateArrows, { passive: true });
lbUpdateArrows();
});
</script>
Wir verwenden Cookies und ähnliche Technologien auf unserer Website und verarbeiten personenbezogene Daten von dir (z.B. IP-Adresse), um z.B. Inhalte und Anzeigen zu personalisieren, Medien von Drittanbietern einzubinden oder Zugriffe auf unsere Website zu analysieren. Die Datenverarbeitung kann auch erst in Folge gesetzter Cookies stattfinden. Wir teilen diese Daten mit Dritten, die wir in den Privatsphäre-Einstellungen benennen.
Technischer Name: Facebook
Funktionale Services sind notwendig, um über die wesentliche Funktionalität der Website hinausgehende Features wie hübschere Schriftarten, Videowiedergabe oder interaktive Web 2.0-Features bereitzustellen. Inhalte von z.B. Video- und Social Media-Plattformen sind standardmäßig gesperrt und können zugestimmt werden. Wenn dem Service zugestimmt wird, werden diese Inhalte automatisch ohne weitere manuelle Einwilligung geladen.
YouTube ermöglicht das Einbetten von Inhalten auf Websites, die auf youtube.com veröffentlicht werden, um die Website mit Videos zu verbessern. Dies erfordert die Verarbeitung der IP-Adresse und der Metadaten des Nutzers. Cookies oder Cookie-ähnliche Technologien können gespeichert und ausgelesen werden. Diese können personenbezogene Daten und technische Daten wie Nutzer-IDs, Einwilligungen, Einstellungen des Videoplayers, verbundene Geräte, Interaktionen mit dem Service, Push-Benachrichtigungen und dem genutzten Konto enthalten. Diese Daten können verwendet werden, um besuchte Websites zu erfassen, detaillierte Statistiken über das Nutzerverhalten zu erstellen und um die Dienste von Google zu verbessern. Sie können auch zur Profilerstellung verwendet werden, z. B. um dir personalisierte Dienste anzubieten, wie Werbung auf der Grundlage deiner Interessen oder Empfehlungen. Diese Daten können von Google mit den Daten der auf den Websites von Google (z. B. youtube.com und google.com) eingeloggten Nutzer verknüpft werden. Google stellt personenbezogene Daten seinen verbundenen Unternehmen, anderen vertrauenswürdigen Unternehmen oder Personen zur Verfügung, die diese Daten auf der Grundlage der Anweisungen von Google und in Übereinstimmung mit den Datenschutzbestimmungen von Google verarbeiten können.
Verwendung auf gesetzlicher Grundlage von: Einwilligung zur Verarbeitung personenbezogener Daten, Einwilligung zur Speicherung oder zum Zugriff auf Informationen auf der Endeinrichtung des Nutzers
Provider: Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland
Anbieter: Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland
Verwendung auf gesetzlicher Grundlage von: Einwilligung zur Verarbeitung personenbezogener Daten, Einwilligung zur Speicherung oder zum Zugriff auf Informationen auf der Endeinrichtung des Nutzers
Provider: Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland
Essenzielle Services sind für die grundlegende Funktionalität der Website erforderlich. Sie enthalten nur technisch notwendige Services. Diesen Services kann nicht widersprochen werden.
Schützt vor Cross-Site-Request-Forgery Angriffen.
Speicherdauer: Dieses Cookie bleibt nur für die aktuelle Browsersitzung bestehen.
Speichert die aktuelle PHP-Session.
Speicherdauer: Dieses Cookie bleibt nur für die aktuelle Browsersitzung bestehen.
Die Datenverarbeitung kann mit deiner Einwilligung oder auf Basis eines berechtigten Interesses erfolgen, dem du in den Privatsphäre-Einstellungen widersprechen kannst. Du hast das Recht, nicht einzuwilligen und deine Einwilligung zu einem späteren Zeitpunkt zu ändern oder zu widerrufen. Weitere Informationen zur Verwendung deiner Daten findest du in unserer Datenschutzerklärung.