:root{--bg:#f3ece2;--paper:#fffaf3;--ink:#27211d;--muted:#6c625a;--line:#d9c8b7;--blue:#315d6c;--blue2:#15343e;--gold:#bd8a4b;--rose:#8a5260;--green:#526b57;--max:1180px;--shadow:0 22px 70px rgba(61,42,27,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#fbf7f0,#eee3d5);color:var(--ink);font:16px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}a{color:inherit}img,video,iframe{max-width:100%}h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.08;margin:0}.wrap{width:min(var(--max),calc(100% - 2rem));margin:auto}
.top{position:sticky;top:0;z-index:50;background:rgba(251,247,240,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.topin{min-height:78px;display:flex;align-items:center;gap:1rem}.brand{text-decoration:none;display:flex;gap:.75rem;align-items:center}.brand b{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:linear-gradient(145deg,var(--blue),var(--blue2));color:#fff;font-family:Georgia,serif}.brand span strong{display:block;font-family:Georgia,serif}.brand small{display:block;color:var(--muted)}nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}nav a{text-decoration:none;font-weight:800;font-size:.88rem}.theme{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:.6rem .85rem;font-weight:800;cursor:pointer}
.hero{padding:5.5rem 0 4.6rem;border-bottom:1px solid var(--line)}.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:3rem;align-items:center}.kicker{text-transform:uppercase;letter-spacing:.15em;font-weight:900;font-size:.76rem;color:var(--blue)}h1{font-size:clamp(3rem,7vw,6.8rem);letter-spacing:-.055em;margin:.5rem 0 1rem}.lead{font-size:1.14rem;color:var(--muted);max-width:760px}.hero-art{min-height:380px;border-radius:34px;overflow:hidden;position:relative;box-shadow:var(--shadow);background:#17282f}.hero-art img{width:100%;height:100%;min-height:380px;object-fit:cover;display:block;opacity:.82}.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(12,22,27,.88))}.hero-caption{position:absolute;z-index:2;left:1.6rem;right:1.6rem;bottom:1.5rem;color:#fff}.hero-caption strong{display:block;font:700 2rem/1.12 Georgia,serif}.buttons{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}.btn{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:.7rem 1rem;border-radius:999px;border:1px solid var(--blue);text-decoration:none;font-weight:850;color:var(--blue2)}.btn.primary{background:var(--blue);color:#fff}
section{padding:4.4rem 0}.alt{background:rgba(255,255,255,.46);border-block:1px solid var(--line)}.section-head{max-width:860px;margin-bottom:2rem}.section-head h2{font-size:clamp(2.2rem,5vw,4.5rem);letter-spacing:-.035em;margin:.35rem 0}.grid{display:grid;gap:1rem}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.card{background:rgba(255,255,255,.76);border:1px solid var(--line);border-radius:24px;padding:1.45rem;box-shadow:0 12px 30px rgba(60,42,25,.06)}.card h3{font-size:1.55rem;margin-bottom:.5rem}.card p{color:var(--muted)}.card a{color:var(--blue);font-weight:850}.tag{display:inline-block;padding:.28rem .6rem;border-radius:999px;background:#e2edf0;color:var(--blue2);font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.quote{padding:3.6rem 0;background:#16252b;color:white}.quote blockquote{font:700 clamp(2rem,4vw,4rem)/1.18 Georgia,serif;margin:0}.quote p{color:#cad9dd}
.text-panel{background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:clamp(1.2rem,4vw,2.5rem);box-shadow:var(--shadow)}.poem{max-width:760px;margin:auto;font-family:Georgia,serif;font-size:1.08rem}.stanza{padding:1rem 1.15rem;margin:.7rem 0;border-left:5px solid var(--blue);background:#fff;border-radius:0 16px 16px 0}.speaker{font-weight:900;color:var(--rose);font-family:Inter,sans-serif;font-size:.77rem;text-transform:uppercase;letter-spacing:.1em}.media{background:#151a1e;color:white;border-radius:26px;padding:1.2rem}.media iframe,.media video{width:100%;aspect-ratio:16/9;border:0;border-radius:17px;background:#000}.media p{color:#d3dbde}.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.gallery figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}.gallery img{width:100%;height:420px;object-fit:contain;background:#e9e0d5}.gallery figcaption{padding:1rem;color:var(--muted)}
.task{border-left:6px solid var(--gold);background:#fff8e8;border-radius:0 18px 18px 0;padding:1rem 1.2rem;margin:1rem 0}.choices{display:flex;gap:.7rem;flex-wrap:wrap}.choice{padding:.7rem .9rem;border:1px solid var(--line);border-radius:14px;background:white;cursor:pointer;font-weight:750}.quiz-line{font-family:Georgia,serif;font-size:1.12rem;line-height:2.25}.quiz-line input{width:10rem;max-width:100%;border:0;border-bottom:2px solid var(--blue);background:transparent;padding:.3rem .25rem;font:inherit;color:inherit}.feedback{font-weight:850;margin-top:1rem}.route{text-align:center;padding:2rem;border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.72)}
footer{background:#5c7484;color:white;padding:2.7rem 1rem;text-align:center}footer a{color:white}.foot{max-width:1400px;margin:auto}.ki{font-size:12px;opacity:.85;max-width:900px;margin:2rem auto 0}
html.dark{color-scheme:dark}html.dark body{background:#0c0f12;color:#f5efe8}html.dark .top{background:#11161a;border-color:#39434a}html.dark .brand small,html.dark .lead,html.dark .card p,html.dark .gallery figcaption{color:#d0c7bf}html.dark nav a{color:#f5efe8}html.dark .theme{background:#20262b;color:#fff;border-color:#4e5960}html.dark .card,html.dark .text-panel,html.dark .route{background:#20262b;border-color:#4b555b}html.dark .alt{background:#151a1e;border-color:#39434a}html.dark .stanza{background:#171c20}html.dark .task{background:#302919}html.dark .choice{background:#171c20;border-color:#4b555b}html.dark .tag{background:#213a44;color:#d9f0f6}html.dark footer{background:#1d3440}
@media(max-width:950px){.hero-grid{grid-template-columns:1fr}.g4,.g3{grid-template-columns:repeat(2,1fr)}.topin{flex-wrap:wrap;padding:.6rem 0}nav{order:3;width:100%;margin-left:0;padding-bottom:.4rem}.hero-art{min-height:300px}.hero-art img{min-height:300px}}
@media(max-width:650px){.g4,.g3,.g2,.gallery{grid-template-columns:1fr}h1{font-size:3.1rem}.gallery img{height:auto}.brand span{display:none}}


/* Zusatzgestaltung Erlkönig */
.audio-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:1.4rem;align-items:stretch;margin-top:1.5rem}
.audio-card,.voice-map,.potato-intro,.lyrics-panel{border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:0 14px 30px rgba(0,0,0,.08)}
.audio-card{padding:1.5rem}.audio-card audio{width:100%;margin-top:1rem}
.voice-map{padding:1.35rem;display:grid;gap:.8rem}.voice-row{display:grid;grid-template-columns:92px 1fr;gap:.8rem;padding:.8rem;border-radius:16px;background:var(--soft)}
.poem-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:1.4rem}.poem-notes{display:grid;gap:1rem;align-content:start}
.note-card{padding:1rem 1.05rem;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.stanza{position:relative;padding-left:1.2rem}
.stanza:before{content:"";position:absolute;left:0;top:.25rem;bottom:.25rem;width:4px;border-radius:4px;background:var(--accent)}
.turning-point{margin:2.2rem auto 0;max-width:880px;padding:1.5rem 1.6rem;border-radius:24px;background:linear-gradient(135deg,#2f1f2d,#5a3345);color:white}
.turning-point h2{color:white}.turning-point p{color:#f5e9ef}
.potato-section{background:radial-gradient(circle at 10% 20%,rgba(197,150,70,.18),transparent 22rem),linear-gradient(180deg,var(--soft),var(--bg))}
.potato-intro{padding:1.55rem}.potato-intro .big-line{font:700 clamp(1.5rem,3vw,2.5rem)/1.2 Georgia,serif;color:var(--accent)}
.video-wrap{margin-top:1.4rem;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.video-wrap iframe{display:block;width:100%;aspect-ratio:16/9;border:0}.lyrics-panel{padding:1.5rem;margin-top:1.4rem}.lyrics-grid{columns:2 340px;column-gap:2rem}.lyrics-grid p{break-inside:avoid;margin:0 0 1rem}
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.compare-card{padding:1.2rem;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
@media(max-width:850px){.audio-stage,.poem-stage{grid-template-columns:1fr}}
@media(max-width:720px){.compare-grid{grid-template-columns:1fr}.lyrics-grid{columns:1}.voice-row{grid-template-columns:1fr}}


/* Originalanimation Zauberlehrling */
.animation-experiment{
  background:
    radial-gradient(circle at 85% 15%,rgba(49,93,108,.14),transparent 24rem),
    linear-gradient(180deg,var(--soft),var(--bg));
}
.animation-intro{
  max-width:930px;margin:0 auto 1.4rem;padding:1.45rem 1.55rem;
  border:1px solid var(--line);border-radius:24px;background:var(--panel);
  box-shadow:var(--shadow)
}
.animation-intro .statement{
  font:700 clamp(1.45rem,3vw,2.5rem)/1.2 Georgia,serif;color:var(--blue2);
  margin:.4rem 0 1rem
}
.animation-shell{
  position:relative;width:100%;max-width:860px;margin:0 auto;
  border:1px solid var(--line);border-radius:28px;padding:18px;
  background:#111820;box-shadow:0 24px 65px rgba(0,0,0,.24);
  overflow:hidden
}
.animation-viewport{
  position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;
  border-radius:18px;background:#000
}
.animation-viewport iframe{
  position:absolute;left:0;top:0;width:800px;height:600px;border:0;
  transform-origin:top left;background:#000;max-width:none
}
.animation-caption{
  max-width:860px;margin:.9rem auto 0;color:var(--muted);font-size:.95rem
}
.frustration-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem
}
.frustration-card{
  padding:1.2rem;border:1px solid var(--line);border-radius:20px;background:var(--panel)
}
.frustration-card h3{margin-top:0}
.experiment-warning{
  margin:1rem auto 0;max-width:860px;padding:1rem 1.15rem;
  border-left:6px solid var(--gold);border-radius:0 18px 18px 0;background:#fff8e8
}
html.dark .animation-intro,html.dark .frustration-card{background:#20262b;border-color:#4b555b}
html.dark .animation-intro .statement{color:#d9edf3}
html.dark .experiment-warning{background:#302919}
@media(max-width:760px){.frustration-grid{grid-template-columns:1fr}}


/* Venezianische Epigramme – vollständige responsive Ausgabe */
.epigram-hero{
  background:
    radial-gradient(circle at 82% 12%,rgba(186,133,61,.20),transparent 25rem),
    linear-gradient(180deg,#f8efe1,var(--bg));
}
.epigram-intro-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:1.4rem;align-items:stretch
}
.epigram-factbox,.editorial-note,.playlist-panel{
  border:1px solid var(--line);border-radius:24px;background:var(--panel);
  padding:1.4rem;box-shadow:var(--shadow)
}
.epigram-factbox strong{display:block;font:700 2.5rem Georgia,serif;color:var(--accent)}
.quicknav{
  position:sticky;top:74px;z-index:30;background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.quicknav-inner{padding:.8rem 0}
.range-links{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:.65rem}
.range-links a,.number-grid a{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);
  font-weight:800
}
.range-links a{padding:.42rem .75rem}
.number-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:.4rem;
  max-height:170px;overflow:auto;padding:.25rem
}
.number-grid a{min-height:38px;font:700 .9rem Georgia,serif}
.epigram-tools{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:end;
  margin:1.4rem 0
}
.epigram-tools label{display:grid;gap:.35rem;font-weight:850}
.epigram-tools input{
  width:100%;min-height:48px;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);color:var(--ink);padding:.75rem 1rem;font:inherit
}
.result-count{font-weight:850;color:var(--muted);white-space:nowrap}
.epigram-list{display:grid;gap:1rem}
.epigram-card{
  scroll-margin-top:260px;border:1px solid var(--line);border-radius:24px;
  background:var(--panel);padding:1.35rem 1.45rem;box-shadow:0 12px 28px rgba(0,0,0,.06)
}
.epigram-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.epigram-number{font:700 1.65rem Georgia,serif;color:var(--accent)}
.top-link{font-size:.82rem;font-weight:800;color:var(--muted)}
.epigram-text{font:400 1.05rem/1.72 Georgia,"Times New Roman",serif}
.variant-label{
  display:inline-block;margin:.45rem 0 .7rem;padding:.3rem .65rem;border-radius:999px;
  background:var(--soft);font-weight:900;color:var(--accent)
}
.variant-label + .epigram-text{margin-bottom:1.2rem}
.collection-map{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.collection-map article{padding:1.2rem;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.playlist-panel iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:16px;background:#000}
.empty-state{display:none;padding:2rem;text-align:center;border:1px dashed var(--line);border-radius:20px}
html.dark .epigram-hero{background:radial-gradient(circle at 82% 12%,rgba(186,133,61,.15),transparent 25rem),linear-gradient(180deg,#15191d,var(--bg))}
@media(max-width:850px){
  .epigram-intro-grid,.collection-map{grid-template-columns:1fr}
  .quicknav{position:relative;top:auto}
  .epigram-card{scroll-margin-top:90px}
}
@media(max-width:620px){
  .epigram-tools{grid-template-columns:1fr}
  .number-grid{grid-template-columns:repeat(4,1fr);max-height:220px}
  .epigram-card{padding:1.1rem}
  .epigram-text{font-size:1rem}
}


/* Epigramm-Sammlung auf- und zuklappbar */
#seitenkopf{position:absolute;top:0}
.epigram-collection{margin-top:1.4rem;border:1px solid var(--line);border-radius:26px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.collection-summary{cursor:pointer;list-style:none;padding:1.25rem 1.4rem;font:700 clamp(1.35rem,3vw,2rem)/1.2 Georgia,serif;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.collection-summary::-webkit-details-marker{display:none}
.collection-summary:after{content:"＋";font:700 1.8rem/1 system-ui}
.epigram-collection[open] .collection-summary:after{content:"−"}
.summary-state{margin-left:auto;font:800 .82rem/1.2 Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.epigram-collection>.epigram-tools,.epigram-collection>.empty-state,.epigram-collection>.epigram-list{margin-left:1.2rem;margin-right:1.2rem}
.collection-controls{display:flex;gap:.65rem;flex-wrap:wrap;padding:1rem 1.2rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.collection-controls-bottom{margin-top:1.2rem;border-bottom:0}
.epigram-collection:not([open])>:not(summary){display:none}
.italien-route{padding-top:0}
html.dark .epigram-collection{background:#20262b;border-color:#4b555b}
@media(max-width:620px){.collection-summary{align-items:flex-start;flex-wrap:wrap}.summary-state{margin-left:0;width:100%}}


/* Tag 4: Wilhelm Meister und Werther */
.fulltext-shell{border:1px solid var(--line);border-radius:28px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.fulltext-toolbar{position:sticky;top:74px;z-index:20;display:flex;gap:.65rem;flex-wrap:wrap;align-items:center;padding:1rem 1.2rem;background:var(--panel);border-bottom:1px solid var(--line)}
.fulltext-toolbar input{flex:1;min-width:240px;min-height:46px;border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;background:var(--bg);color:var(--ink);font:inherit}
.book-list{padding:1rem;display:grid;gap:1rem}.book{border:1px solid var(--line);border-radius:22px;background:var(--bg);overflow:hidden;scroll-margin-top:150px}
.book>summary{cursor:pointer;list-style:none;padding:1.2rem 1.35rem;font:700 clamp(1.35rem,3vw,2rem)/1.2 Georgia,serif;display:flex;justify-content:space-between;gap:1rem}.book>summary::-webkit-details-marker{display:none}.book>summary:after{content:"＋"}.book[open]>summary:after{content:"−"}
.book-content{padding:0 1.35rem 1.5rem;max-width:940px;margin:auto}.book-content h3{margin:2rem 0 .8rem;padding-top:1rem;border-top:1px solid var(--line);font-size:1.55rem}.book-content p{font:400 1.02rem/1.78 Georgia,"Times New Roman",serif}
.book-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.book-nav a{padding:.4rem .65rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:800}
.fulltext-status{font-weight:850;color:var(--muted)}.search-hit{outline:3px solid var(--gold);outline-offset:3px}
.quote-stream{display:grid;gap:1.25rem}.quote-card{padding:1.5rem;border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:0 12px 28px rgba(0,0,0,.06)}
.quote-card blockquote{margin:0;font:700 clamp(1.25rem,2.7vw,2rem)/1.45 Georgia,serif}.quote-source{margin-top:.9rem;color:var(--muted);font-weight:800}
.werther-video{padding:1.1rem;border-radius:24px;background:#15171b;color:#fff;box-shadow:0 18px 42px rgba(0,0,0,.18)}.werther-video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:16px}.werther-video h3{color:#fff}.werther-video p{color:#d8dce0}
.quote-pair{display:grid;grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);gap:1.25rem;align-items:center}.playlist-wide iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:16px}
html.dark .fulltext-shell,html.dark .quote-card{background:#20262b;border-color:#4b555b}html.dark .book{background:#14191d;border-color:#465057}
@media(max-width:850px){.quote-pair{grid-template-columns:1fr}.fulltext-toolbar{position:relative;top:auto}}@media(max-width:620px){.book-list{padding:.6rem}.book-content{padding:0 1rem 1.2rem}}


/* Wilhelm Meister – Toolbar und Buchnavigation sauber getrennt */
.fulltext-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto auto;
  gap:.7rem;
  align-items:center;
}
.fulltext-toolbar input{
  width:100%;
}
.fulltext-status-row{
  padding:.6rem 1.2rem;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
.book-nav-main{
  padding:.9rem 1.2rem 1rem;
  margin:0;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
.book-nav-main a{
  background:var(--bg);
}
@media(max-width:800px){
  .fulltext-toolbar{
    grid-template-columns:1fr 1fr;
  }
  .fulltext-toolbar input{
    grid-column:1/-1;
  }
}
@media(max-width:520px){
  .fulltext-toolbar{
    grid-template-columns:1fr;
  }
}


/* Tag 5 – KI-Galerie und präzises Suchspiel */
.ki-source-note{
  padding:1.2rem 1.3rem;border:1px solid var(--line);border-radius:22px;
  background:var(--panel);margin:1.2rem 0
}
.ki-gallery-section{margin-top:2rem}
.ki-gallery-section h2{margin-bottom:.5rem}
.ki-gallery{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem
}
.ki-gallery figure{
  margin:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:var(--panel);box-shadow:0 12px 28px rgba(0,0,0,.08)
}
.ki-gallery img{display:block;width:100%;height:auto}
.ki-gallery figcaption{padding:.9rem 1rem;font-weight:800;color:var(--muted)}
.search-board{
  position:relative;max-width:850px;margin:1rem auto;cursor:crosshair;
  user-select:none;touch-action:manipulation
}
.search-board img{display:block;width:100%;height:auto;border-radius:18px}
.search-marker{
  position:absolute;display:none;pointer-events:none;transform:translate(-50%,-50%);
  border-radius:50%;z-index:4
}
.search-marker.click{
  width:26px;height:26px;border:4px solid #e64e45;background:rgba(230,78,69,.18)
}
.search-marker.solution{
  border:4px solid #40b875;background:rgba(64,184,117,.18)
}
.search-task-panel{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;
  padding:1.2rem;border:1px solid var(--line);border-radius:22px;background:var(--panel)
}
.search-progress{font-weight:850;color:var(--muted)}
.search-status{
  min-height:3rem;margin-top:1rem;padding:1rem 1.1rem;border-radius:16px;
  background:var(--soft);font-weight:800
}
.search-status.good{border-left:6px solid #40b875}
.search-status.bad{border-left:6px solid #e64e45}
.search-controls{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1rem}
.search-howto{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem}
.search-howto article{padding:1rem;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
html.dark .ki-source-note,html.dark .ki-gallery figure,html.dark .search-task-panel,html.dark .search-howto article{background:#20262b;border-color:#4b555b}
@media(max-width:760px){
  .ki-gallery{grid-template-columns:1fr}
  .search-task-panel{grid-template-columns:1fr}
  .search-howto{grid-template-columns:1fr}
}


/* Tag 1 – Faust unter Strom */
.metal-hero{
  background:
    radial-gradient(circle at 82% 14%,rgba(164,42,52,.22),transparent 25rem),
    linear-gradient(180deg,#17171b,#0e0f12);
  color:#fff;
}
.metal-hero .lead{color:#dedde2}
.metal-hero .hero-art{background:#07080a}
.metal-hero .hero-caption{background:rgba(0,0,0,.68)}
.metal-stage{
  padding:1.2rem;border-radius:26px;background:#0b0c0f;color:#fff;
  border:1px solid #34363c;box-shadow:0 22px 50px rgba(0,0,0,.25)
}
.metal-stage iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:18px;background:#000}
.metal-stage h3{color:#fff}
.metal-stage p{color:#d8d8dd}
.listen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.listen-card{padding:1.2rem;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.listen-card h3{margin-top:0}
.faust-pulse{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:1rem
}
.faust-pulse article{
  padding:1rem;border-radius:18px;background:#17191e;color:#fff;border:1px solid #373a42
}
.faust-pulse strong{display:block;color:#f3c7cb;margin-bottom:.25rem}
.metal-workshop{
  padding:1.4rem;border:1px solid var(--line);border-radius:24px;background:var(--panel)
}
.metal-workshop ol{padding-left:1.35rem}
.metal-workshop li{margin:.75rem 0}
html.dark .listen-card,html.dark .metal-workshop{background:#20262b;border-color:#4b555b}
@media(max-width:850px){
  .listen-grid{grid-template-columns:1fr}
  .faust-pulse{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.faust-pulse{grid-template-columns:1fr}}