#dm {
--asphalt: #16171b;
--asphalt2: #1e2026;
--beton: #cfc9bb;
--papier: #f4f1e8;
--orange: #ff5a1f;
--gelb: #ffcf2d;
--gruen: #7fd44a;
--grau: #8a877e;
background: var(--asphalt);
color: var(--papier);
font-family: 'DM Sans', system-ui, sans-serif;
line-height: 1.55;
margin: 0 auto;
max-width: 860px;
overflow-x: hidden;
position: relative;
}
#dm * { box-sizing: border-box; }
#dm h1, #dm h2, #dm h3, #dm h4, #dm .dis { font-family: 'Dump Display', sans-serif; font-weight: 400; letter-spacing: .015em; }
#dm .mono { font-family: 'Space Mono', monospace; }
/* Warnband */
.warnband { height: 16px; background: repeating-linear-gradient(45deg, var(--gelb) 0 14px, var(--asphalt) 14px 28px); }
.laufband { background: var(--gelb); color: var(--asphalt); font-family: 'Dump Display', sans-serif; font-size: 14px; letter-spacing: .08em; padding: 5px 0; white-space: nowrap; overflow: hidden; }
.laufband span { display: inline-block; padding-left: 100%; animation: lauf 26s linear infinite; }
@keyframes lauf { to { transform: translateX(-100%); } }
/* Hero */
.hero { padding: 26px 18px 10px; position: relative; }
.hero .marke { display: flex; align-items: center; gap: 10px; }
.hero .marke svg { width: 46px; height: 46px; flex: none; color: var(--orange); }
h1 { font-size: clamp(50px, 15vw, 116px); line-height: .82; margin: 10px 0 0; text-transform: uppercase; }
h1 .amp { color: var(--orange); display: inline-block; transform: rotate(-8deg) translateY(4px); }
h1 .more { color: var(--gelb); }
.claim { font-size: clamp(17px, 4.4vw, 22px); font-weight: 500; margin: 16px 0 0; max-width: 24ch; }
.claim b { color: var(--orange); }
.spray { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--grau); letter-spacing: .16em; text-transform: uppercase; margin-top: 14px; }
.heldbild { width: calc(100% + 36px); margin: -26px -18px 0; display: block; }
.nurLeser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero .claim { margin-top: -6px; }
/* Sektionen */
section { padding: 26px 18px 30px; }
.kap { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid #32343c; padding-bottom: 8px; margin-bottom: 18px; }
.kap h2 { font-size: clamp(24px, 6vw, 36px); margin: 0; text-transform: uppercase; }
.kap .nr { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--orange); letter-spacing: .1em; }
/* Aufbau beim Scrollen */
.stufe { opacity: 0; transform: translateY(24px); transition: opacity .45s ease, transform .5s cubic-bezier(.2,.9,.3,1); }
.stufe.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .stufe { opacity: 1; transform: none; transition: none; } .laufband span { animation: none; padding-left: 0; } }
/* Chat */
.frech { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--grau); margin-bottom: 14px; }
.frech button { border: 1px solid #3a3d45; background: none; color: var(--beton); font: inherit; font-size: 12.5px; padding: 5px 11px; cursor: pointer; border-radius: 20px; }
.frech button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; }
.stimmknopf[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); color: var(--asphalt); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.chips button { border: 1px dashed #3a3d45; background: none; color: var(--grau); font: inherit; font-size: 13px; padding: 6px 11px; cursor: pointer; }
.chips button:hover { border-color: var(--gelb); color: var(--gelb); }
.verlauf { display: flex; flex-direction: column; gap: 14px; }
.du, .er { padding: 12px 15px; font-size: 16px; max-width: 90%; }
.du { background: var(--asphalt2); border-right: 3px solid var(--grau); align-self: flex-end; }
.er { background: #101116; border-left: 3px solid var(--orange); align-self: flex-start; }
.er .werkzeug { margin-top: 8px; display: flex; gap: 12px; }
.er .werkzeug button { border: 0; background: none; color: var(--grau); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; }
.er .werkzeug button:hover { color: var(--gelb); }
.tippt span { display: inline-block; width: 6px; height: 6px; background: var(--orange); margin-right: 4px; animation: tipp 1s infinite; }
.tippt span:nth-child(2) { animation-delay: .15s; } .tippt span:nth-child(3) { animation-delay: .3s; }
@keyframes tipp { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }
/* Fundstück */
.fund { display: grid; grid-template-columns: 96px 1fr; gap: 14px; background: var(--asphalt2); padding: 14px; border-left: 3px solid var(--gelb); }
.fund:hover { transform: rotate(-.4deg); transition: transform .2s; }
.fund .bild { background: #0e0f13; aspect-ratio: 1; position: relative; color: var(--beton); }
.fund .bild svg { width: 100%; height: 100%; }
.fund .bild img { transform: scale(2.05); transform-origin: center 46%; }
.fund .bild .ecke { position: absolute; bottom: 0; right: 0; background: var(--gelb); color: var(--asphalt); font-family: 'Space Mono', monospace; font-size: 9px; padding: 1px 4px; }
.fund h4 { font-size: 21px; margin: 0; text-transform: uppercase; line-height: 1.05; }
.fund .zeile { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 3px 0 6px; }
.fund .pr { font-family: 'Dump Display', sans-serif; color: var(--orange); font-size: 20px; }
.fund .ns { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--grau); }
.fund p { margin: 0 0 10px; font-size: 15px; }
.tasten { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.taste { border: 1px solid var(--beton); background: none; color: var(--beton); font: inherit; font-size: 13.5px; padding: 6px 12px; cursor: pointer; text-decoration: none; display: inline-block; }
.taste:hover { background: var(--beton); color: var(--asphalt); }
.taste.knall { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; }
.taste.knall:hover { background: var(--gelb); border-color: var(--gelb); color: var(--asphalt); }
.taste:disabled { opacity: .4; cursor: default; }
.sinn { margin-top: 9px; font-size: 13px; color: var(--grau); }
.sinn .st { cursor: pointer; font-size: 17px; letter-spacing: 3px; }
.sinn .st:hover { color: var(--gelb); }
.eingabe { display: flex; gap: 8px; margin-top: 18px; }
.eingabe input { flex: 1; border: 1px solid #3a3d45; background: #0e0f13; color: var(--papier); padding: 13px 14px; font: inherit; font-size: 16px; }
.eingabe input:focus, .taste:focus, .frech button:focus { outline: 2px solid var(--gelb); outline-offset: 2px; }
.eingabe button { border: 0; background: var(--orange); color: #fff; font-family: 'Dump Display', sans-serif; font-size: 19px; padding: 0 20px; cursor: pointer; text-transform: uppercase; }
.eingabe button:disabled { background: #3a3d45; }
/* Pausenraum */
.spielwiese { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.spiel { background: var(--asphalt2); padding: 14px; }
.spiel h4 { font-size: 18px; margin: 0 0 4px; text-transform: uppercase; }
.spiel p { font-size: 13.5px; color: var(--grau); margin: 0 0 10px; }
.spiel .aus { font-size: 14px; margin-top: 9px; color: var(--gelb); min-height: 1.4em; }
#fliehfeld { position: relative; height: 88px; border: 1px dashed #3a3d45; }
#fliehknopf { position: absolute; left: 10px; top: 26px; }
#ladebalken { height: 12px; background: #0e0f13; margin-top: 8px; }
#ladebalken i { display: block; height: 100%; background: var(--orange); width: 0; }
/* Post */
.regal { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.artikel { background: var(--asphalt2); padding: 13px; display: flex; flex-direction: column; gap: 6px; border-top: 3px solid var(--gruen); }
.artikel h4 { font-size: 18px; margin: 0; text-transform: uppercase; line-height: 1.05; }
.artikel .inh { font-size: 13px; color: var(--grau); flex: 1; }
.artikel .pr { font-family: 'Dump Display', sans-serif; color: var(--gruen); font-size: 20px; }
.artikel { padding: 0; overflow: hidden; }
.artikel .motiv { aspect-ratio: 1; overflow: hidden; }
.artikel .motiv img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.artikel:hover .motiv img { transform: scale(1.04); }
.artikel .inh { font-size: 13.5px; color: var(--grau); padding: 0 13px; }
.artikel .tasten { margin: 10px 13px 13px; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.felder input { border: 1px solid #3a3d45; background: #0e0f13; color: var(--papier); padding: 11px 12px; font: inherit; font-size: 15px; }
@media (max-width: 520px) { .felder { grid-template-columns: 1fr; } }
.brief { background: var(--papier); color: #1a1a1a; padding: 24px 22px; margin-top: 16px; position: relative; }
.brief .kopfz { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8a8578; border-bottom: 1px solid #d5d0c2; padding-bottom: 8px; margin-bottom: 14px; }
.brief h3 { font-size: clamp(21px, 5vw, 30px); margin: 0 0 10px; text-transform: uppercase; line-height: 1.02; }
.brief .body { white-space: pre-wrap; font-size: 15.5px; max-width: 54ch; }
.brief .ps { margin-top: 13px; font-size: 14px; font-style: italic; color: #6b675c; }
.brief .marke { position: absolute; top: 12px; right: 14px; font-family: 'Dump Display', sans-serif; color: var(--orange); border: 2px solid var(--orange); font-size: 12px; padding: 2px 7px; transform: rotate(6deg); }
.auftrag { background: #0e0f13; border: 1px dashed #3a3d45; padding: 12px; margin-top: 10px; font-family: 'Space Mono', monospace; font-size: 11.5px; white-space: pre-wrap; word-break: break-word; color: var(--gruen); }
/* Trichter */
.fuehrung { font-size: 17.5px; max-width: 54ch; margin: 0 0 18px; }
.schmerzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.schmerz { background: var(--asphalt2); border-left: 3px solid var(--orange); padding: 14px; font-size: 15px; color: var(--beton); }
.schmerz b { font-family: 'Dump Display', sans-serif; font-weight: 400; font-size: 19px; text-transform: uppercase; display: block; color: var(--papier); margin-bottom: 5px; }
.grossfrage { font-family: 'Dump Display', sans-serif; font-size: clamp(28px, 8vw, 54px); line-height: 1.02; text-transform: uppercase; margin: 0 0 16px; }
.grossfrage em { color: var(--gelb); font-style: normal; }
.beweise { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.beweis { border-top: 3px solid var(--gelb); padding-top: 10px; font-size: 13.5px; color: var(--grau); }
.beweis em { font-family: 'Dump Display', sans-serif; font-style: normal; font-size: 38px; color: var(--gelb); display: block; line-height: 1; margin-bottom: 4px; }
.schritte { display: grid; gap: 12px; }
.schritt { display: grid; grid-template-columns: 52px 1fr; gap: 14px; background: var(--asphalt2); padding: 14px; font-size: 15px; color: var(--beton); align-items: start; }
.schritt span { font-family: 'Dump Display', sans-serif; font-size: 40px; color: var(--orange); line-height: .9; }
.schritt b { font-family: 'Dump Display', sans-serif; font-weight: 400; font-size: 19px; text-transform: uppercase; display: block; color: var(--papier); margin-bottom: 4px; }
.schritt p { margin: 0; }
.schmerz p { margin: 0; }
/* Teilen */
.teilbox { border: 2px dashed var(--orange); padding: 15px; margin-top: 20px; background: rgba(255,90,31,.06); }
.teilbox .warnung { font-family: 'Dump Display', sans-serif; font-size: clamp(18px, 5vw, 26px); text-transform: uppercase; color: var(--orange); line-height: 1.05; margin-bottom: 4px; }
.teilbox .klein { font-size: 14px; color: var(--grau); margin-bottom: 12px; }
.teilbox .tasten { gap: 8px; }
.teilbox .taste { font-size: 13.5px; }
/* Chatfenster */
.chatknopf {
position: fixed; right: 16px; bottom: 56px; z-index: 60;
border: 0; background: var(--orange); color: #fff; font-family: 'Dump Display', sans-serif;
font-size: 17px; text-transform: uppercase; padding: 13px 18px; cursor: pointer;
box-shadow: 0 8px 22px rgba(0,0,0,.5);
}
.chatknopf:hover { background: var(--gelb); color: var(--asphalt); }
.chatknopf.punkt::after { content: ""; position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; background: var(--gruen); border-radius: 50%; }
#chatfenster {
position: fixed; right: 12px; bottom: 52px; width: min(420px, calc(100vw - 24px));
max-height: min(78vh, 640px); background: var(--asphalt); border: 2px solid var(--orange);
display: flex; flex-direction: column; z-index: 65; box-shadow: 0 18px 50px rgba(0,0,0,.65);
}
#chatfenster[hidden] { display: none; }
.chatkopf { display: flex; align-items: baseline; gap: 8px; background: var(--orange); color: #fff; padding: 9px 12px; font-family: 'Dump Display', sans-serif; }
.chatkopf b { font-size: 18px; font-weight: 400; text-transform: uppercase; }
.chatkopf span { font-family: 'DM Sans', sans-serif; font-size: 12px; opacity: .85; }
.chatkopf button { margin-left: auto; border: 0; background: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.chatkoerper { padding: 12px; overflow-y: auto; }
#chatfenster .verlauf { gap: 12px; }
#chatfenster .du, #chatfenster .er { max-width: 94%; font-size: 15px; }
#chatfenster .fund { grid-template-columns: 76px 1fr; }
#chatfenster .eingabe { margin-top: 14px; }
@media (max-width: 520px) { #chatfenster { right: 0; left: 0; bottom: 46px; width: auto; max-height: 74vh; } }
/* Fund des Tages */
.tageskasten { display: grid; grid-template-columns: 210px 1fr; gap: 18px; background: var(--asphalt2); padding: 16px; border-left: 4px solid var(--gelb); align-items: start; }
.tagesbild { aspect-ratio: 1; overflow: hidden; background: #0e0f13; }
.tagesbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tagesmarke { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gelb); }
.tageskasten h3 { font-family: 'Dump Display', sans-serif; font-weight: 400; font-size: clamp(24px, 6vw, 38px); text-transform: uppercase; margin: 6px 0; line-height: 1.02; }
.tageskasten p { margin: 0 0 10px; font-size: 15.5px; color: var(--beton); }
.tagespreis { font-family: 'Dump Display', sans-serif; font-size: 30px; color: var(--orange); margin-bottom: 12px; }
.tagespreis small { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--grau); display: block; }
.tagespreis b { color: var(--gelb); }
@media (max-width: 560px) { .tageskasten { grid-template-columns: 1fr; } }
/* Gutachten */
.drop { border: 2px dashed #3a3d45; background: var(--asphalt2); padding: 30px 18px; text-align: center; cursor: pointer; }
.drop:hover, .drop.hot { border-color: var(--orange); }
.drop b { font-family: 'Dump Display', sans-serif; font-weight: 400; font-size: 22px; display: block; text-transform: uppercase; }
.drop small { color: var(--grau); font-size: 13px; }
.urteil { display: grid; grid-template-columns: 220px 1fr; gap: 18px; background: var(--asphalt2); padding: 16px; margin-top: 16px; align-items: start; }
.urteil .bildbox { position: relative; }
.urteil img { width: 100%; display: block; filter: grayscale(.3) contrast(1.06); }
.urteil .stempel { position: absolute; bottom: 10px; left: 8px; border: 3px solid var(--orange); color: var(--orange); font-family: 'Dump Display', sans-serif; font-size: 20px; padding: 2px 9px; background: rgba(22,23,27,.82); transform: rotate(-7deg); text-transform: uppercase; }
.urteil h3 { font-family: 'Dump Display', sans-serif; font-weight: 400; font-size: clamp(22px, 5vw, 34px); text-transform: uppercase; margin: 0 0 8px; line-height: 1.02; }
.urteil .balken { height: 9px; background: #0e0f13; margin: 8px 0 12px; }
.urteil .balken i { display: block; height: 100%; background: var(--orange); width: 0; transition: width 1s cubic-bezier(.2,.9,.2,1); }
.urteil .stimme { border-top: 1px solid #32343c; padding: 9px 0; font-size: 14.5px; }
.urteil .stimme cite { display: block; font-style: normal; font-size: 12px; color: var(--grau); }
@media (max-width: 560px) { .urteil { grid-template-columns: 1fr; } }
/* Nichtkorb */
.korbknopf { position: fixed; right: 16px; bottom: 112px; z-index: 60; border: 0; background: var(--gelb); color: var(--asphalt); font-family: 'Dump Display', sans-serif; font-size: 16px; text-transform: uppercase; padding: 11px 16px; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.korbknopf em { font-style: normal; background: var(--asphalt); color: var(--gelb); padding: 0 7px; margin-left: 6px; }
#korbfenster { position: fixed; right: 12px; bottom: 52px; width: min(430px, calc(100vw - 24px)); max-height: min(80vh, 660px); background: var(--asphalt); border: 2px solid var(--gelb); display: flex; flex-direction: column; z-index: 66; box-shadow: 0 18px 50px rgba(0,0,0,.65); }
#korbfenster[hidden] { display: none; }
#korbfenster .chatkopf { background: var(--gelb); color: var(--asphalt); }
#korbfenster .chatkopf button { color: var(--asphalt); }
.korbzeile { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; border-bottom: 1px solid #32343c; padding: 9px 0; }
.korbzeile img { width: 54px; height: 54px; object-fit: cover; }
.korbzeile b { font-family: 'Dump Display', sans-serif; font-weight: 400; font-size: 16px; text-transform: uppercase; display: block; }
.korbzeile span { font-size: 12.5px; color: var(--grau); }
.korbzeile button { border: 0; background: none; color: var(--grau); font-size: 18px; cursor: pointer; }
.korbsumme { display: flex; justify-content: space-between; align-items: baseline; font-family: 'Dump Display', sans-serif; font-size: 22px; padding: 12px 0; text-transform: uppercase; }
.korbsumme em { font-style: normal; color: var(--orange); font-size: 28px; }
.quittung { background: #0e0f13; border: 1px dashed #3a3d45; padding: 12px; margin-top: 10px; font-family: 'Space Mono', monospace; font-size: 11.5px; white-space: pre-wrap; word-break: break-word; color: var(--gruen); }
.gemeldet { opacity: .45; }
/* Community */
.hausordnung { background: var(--asphalt2); border-left: 3px solid var(--gelb); padding: 13px 15px; font-size: 14px; margin-bottom: 16px; }
.hausordnung b { font-family: 'Dump Display', sans-serif; font-size: 17px; text-transform: uppercase; display: block; margin-bottom: 6px; }
.hausordnung span { display: block; margin-top: 4px; }
.hausordnung .ja { color: var(--gruen); }
.hausordnung .nein { color: var(--grau); }
.formular { background: var(--asphalt2); padding: 15px; }
.formular input[type=text], .formular input:not([type]) { border: 1px solid #3a3d45; background: #0e0f13; color: var(--papier); padding: 11px 12px; font: inherit; font-size: 15px; }
.gebuehr { border: 1px dashed #3a3d45; padding: 13px 15px; margin-top: 14px; font-size: 14px; color: var(--grau); }
.gebuehr b { color: var(--gelb); font-family: 'Dump Display', sans-serif; font-size: 16px; text-transform: uppercase; }
.pruefung { margin-top: 12px; font-size: 14.5px; }
.pruefung.nein { color: var(--orange); border-left: 3px solid var(--orange); padding-left: 12px; }
.pruefung.ja { color: var(--gruen); border-left: 3px solid var(--gruen); padding-left: 12px; }
.sortierung { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--grau); margin-bottom: 14px; flex-wrap: wrap; }
.sortierung button { border: 1px solid #3a3d45; background: none; color: var(--beton); font: inherit; font-size: 12.5px; padding: 5px 11px; cursor: pointer; border-radius: 20px; }
.sortierung button[aria-pressed="true"] { background: var(--gelb); border-color: var(--gelb); color: var(--asphalt); font-weight: 700; }
.posten { display: grid; grid-template-columns: 104px 1fr; gap: 14px; background: var(--asphalt2); padding: 14px; margin-bottom: 12px; border-left: 3px solid var(--gruen); }
.posten .bild { background: #0e0f13; aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.posten .bild img { width: 100%; height: 100%; object-fit: cover; }
.posten .bild .kein { font-family: 'Dump Display', sans-serif; color: #3a3d45; font-size: 13px; text-align: center; padding: 6px; }
.posten h4 { font-family: 'Dump Display', sans-serif; font-weight: 400; font-size: 20px; margin: 0; text-transform: uppercase; line-height: 1.05; }
.posten .spruch { font-size: 15px; margin: 6px 0 8px; }
.posten .meta { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--grau); margin-bottom: 8px; }
.posten .meta .pr { color: var(--orange); font-size: 13px; }
.leer { color: var(--grau); font-size: 14px; padding: 14px 0; }
@media (max-width: 520px) { .posten { grid-template-columns: 76px 1fr; } }
/* Punkte */
.punktebalken { position: sticky; bottom: 0; background: var(--gelb); color: var(--asphalt); display: flex; align-items: center; gap: 10px; padding: 8px 16px; z-index: 50; font-family: 'Dump Display', sans-serif; font-size: 15px; text-transform: uppercase; }
.punktebalken em { font-style: normal; font-size: 24px; display: inline-block; }
.punktebalken em.pop { animation: pop .4s ease-out; }
@keyframes pop { 40% { transform: scale(1.45) rotate(-6deg); } }
.punktebalken button { margin-left: auto; border: 2px solid var(--asphalt); background: none; font: inherit; font-size: 13px; padding: 4px 10px; cursor: pointer; text-transform: uppercase; }
.toast { position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%); background: var(--orange); color: #fff; font-family: 'Dump Display', sans-serif; font-size: 16px; padding: 8px 16px; z-index: 70; pointer-events: none; max-width: 92vw; text-align: center; }
.fuss { padding: 18px; font-size: 12px; color: var(--grau); border-top: 1px solid #32343c; }
.fehler { color: var(--orange); font-size: 14px; }

body{margin:0;background:#16171b;color:#f4f1e8;font-family:Arial,sans-serif}#dm{max-width:1080px}#dm .hero{display:block;padding:22px 18px}#dm .hero .heldbild{width:100%;max-height:480px;object-fit:contain}#dm .taste{min-height:40px}#dm .punktebalken{z-index:80}#dm .toast{left:50%;transform:translateX(-50%)}.site-nav{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;padding:16px;background:#1e2026;border-bottom:2px solid #ffcf2d;font:14px Arial}.site-nav a{color:#f4f1e8;text-decoration:none}.site-nav strong{color:#ff5a1f;font-size:21px}.shop-callout{padding:20px;background:#1e2026;border:2px solid #ffcf2d;margin:20px 18px;color:#cfc9bb;font-size:14px}.shop-callout a{color:#ffcf2d}.spiel-label{font:12px monospace;color:#ffcf2d;margin-bottom:10px}.shop-cta{display:inline-block;background:#ff5a1f;color:white!important;text-decoration:none;padding:12px 20px;margin:8px 8px 0 0;font-weight:bold}.legacy-footer{padding:30px 20px 90px;text-align:center;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;font-size:13px}.legacy-footer a{color:#ffcf2d}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.stufe{opacity:1!important;transform:none!important}}

/* Klare Landingpage-Hierarchie */
body{background:#111216;color:#f4f1e8;font-family:'DM Sans',system-ui,sans-serif}
.legacy-header{position:sticky;top:0;z-index:90;background:rgba(17,18,22,.96);border-bottom:1px solid #34353b;backdrop-filter:blur(14px)}
.header-stripes{height:8px;background:repeating-linear-gradient(45deg,#ffcf2d 0 12px,#17181d 12px 24px)}
.site-nav{box-sizing:border-box;width:min(1200px,100%);min-height:76px;margin:auto;padding:12px 28px;display:grid;grid-template-columns:250px 1fr auto;gap:36px;align-items:center;background:transparent;border:0;font:600 14px/1 'DM Sans',sans-serif}
.site-nav a{color:#f4f1e8;text-decoration:none}
.site-brand{display:block;width:230px;transition:transform .25s ease,filter .25s ease}
.site-brand img{display:block;width:100%;height:auto}
.site-brand:hover{transform:translateY(-2px) scale(1.025);filter:drop-shadow(0 6px 16px rgba(255,90,31,.22))}
.site-links{display:flex;justify-content:center;gap:34px;align-items:center}
.site-links a{position:relative;padding:12px 2px;color:#d8d3c8;transition:color .2s ease,transform .2s ease}
.site-links a:after{content:'';position:absolute;left:0;right:100%;bottom:4px;height:2px;background:#ff5a1f;transition:right .24s ease}
.site-links a:hover,.site-links a:focus-visible{color:#fff;transform:translateY(-2px)}
.site-links a:hover:after,.site-links a:focus-visible:after{right:0}
.site-cart{display:flex;align-items:center;gap:12px;border:1px solid #ffcf2d;padding:12px 17px;color:#ffcf2d!important;white-space:nowrap;transition:background .2s ease,color .2s ease,transform .2s ease}
.site-cart span{font-size:18px;transition:transform .2s ease}
.site-cart:hover{background:#ffcf2d;color:#17181d!important;transform:translateY(-2px)}
.site-cart:hover span{transform:translate(3px,-3px)}
#dm{max-width:1200px;box-shadow:0 0 80px rgba(0,0,0,.28)}
#dm .laufband{font-size:13px;padding:6px 0}
.landing-main{display:block}
#dm .hero{display:grid;grid-template-columns:minmax(400px,.95fr) minmax(430px,1.05fr);gap:22px;align-items:center;padding:46px 48px 30px;min-height:620px;overflow:hidden}
.hero-copy{position:relative;z-index:2}
.hero-kicker{font:700 11px/1.5 'Space Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:#ffcf2d;margin:0 0 18px}
#dm .hero h1{font:400 clamp(58px,6vw,92px)/.86 'Dump Display',sans-serif;letter-spacing:.005em;margin:0;text-transform:uppercase;max-width:none}
#dm .hero h1 em{display:block;color:#ff5a1f;font-style:normal}
.hero-intro{max-width:47ch;margin:26px 0 22px;color:#cfc9bb;font-size:17px;line-height:1.65}
.hero-buy{display:flex;align-items:baseline;gap:14px;margin:0 0 22px;flex-wrap:wrap}
.hero-buy strong{font:400 35px/1 'Dump Display',sans-serif;color:#fff}
.hero-buy span{font:11px/1.5 'Space Mono',monospace;color:#8a877e}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-cta,.shop-cta{display:inline-flex;align-items:center;gap:24px;background:#ff5a1f;color:#fff!important;text-decoration:none;padding:15px 21px;margin:0;font-weight:800;box-shadow:0 0 0 0 rgba(255,90,31,.4);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.hero-cta:hover,.shop-cta:hover{background:#ffcf2d;color:#17181d!important;transform:translateY(-4px);box-shadow:0 12px 28px rgba(255,90,31,.22)}
.hero-cta span{font-size:19px;transition:transform .2s ease}.hero-cta:hover span{transform:translate(3px,-3px)}
.hero-link{color:#f4f1e8;text-underline-offset:6px;font-weight:700}.hero-link:hover{color:#ffcf2d}
.hero-visual{position:relative;min-width:0;isolation:isolate}
#dm .hero .heldbild{display:block;width:125%;max-width:none;max-height:none;margin:0 0 0 -8%;object-fit:contain;filter:drop-shadow(0 22px 38px rgba(0,0,0,.42));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
#dm .hero:hover .heldbild{transform:translateY(-6px) scale(1.015)}
.hero-stamp{position:absolute;right:1%;top:3%;display:grid;place-items:center;width:92px;height:92px;border:2px solid #ffcf2d;border-radius:50%;background:#17181de8;color:#ffcf2d;font:400 18px/1.05 'Dump Display',sans-serif;text-align:center;transform:rotate(9deg);box-shadow:0 12px 24px #0008}
.hero-usps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid #34353b;padding-top:24px;margin-top:8px;color:#cfc9bb;font-size:14px}
.hero-usps span{display:flex;align-items:center;gap:11px}.hero-usps b{display:grid;place-items:center;width:24px;height:24px;border:1px solid #ffcf2d;color:#ffcf2d;border-radius:50%}
.warnband{height:9px}
.warnband+.warnband{display:none}
#dm section.landing-section:not(.hero){margin:0;padding:62px 48px 68px;border-left:1px solid transparent;border-right:1px solid transparent;transition:opacity .55s ease,transform .6s cubic-bezier(.2,.8,.2,1),background .3s ease,border-color .3s ease,box-shadow .3s ease}
.motion-ready #dm section.landing-section:not(.section-visible){opacity:.28;transform:translateY(36px) scale(.985)}
#dm section.landing-section.section-visible{opacity:1;transform:none}
#dm section.landing-section:not(.hero):hover{background:#191a20;border-color:#292b31;box-shadow:0 20px 55px rgba(0,0,0,.16);transform:translateY(-4px)}
.kap{margin-bottom:26px}.kap h2{font-size:clamp(34px,4vw,50px)}
.problem-accordion{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.problem-card{min-width:0;background:#1e2026;border:1px solid #33353c;border-top:3px solid #ffcf2d;transition:transform .25s ease,border-color .25s ease,background .25s ease}
.problem-card:hover,.problem-card:focus-within,.problem-card[open]{background:#24262d;border-color:#ff5a1f;transform:translateY(-5px)}
.problem-card summary{list-style:none;min-height:112px;padding:18px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;cursor:pointer;font:400 23px/1.03 'Dump Display',sans-serif;text-transform:uppercase}
.problem-card summary::-webkit-details-marker{display:none}.problem-card summary span{font:10px/1.4 'Space Mono',monospace;color:#ff5a1f}.problem-card summary i{font-style:normal;color:#ffcf2d;transition:transform .25s ease}.problem-card[open] summary i{transform:rotate(45deg)}
.problem-card p{margin:0;padding:0 18px 18px;color:#a9a59b;font-size:14px;line-height:1.55;animation:problem-in .28s ease both}
@keyframes problem-in{from{opacity:0;transform:translateY(-8px)}}
#s-pause[hidden]{display:none!important}
.shop-callout{padding:24px;background:#1e2026;border:1px solid #3b3d45;border-left:4px solid #ffcf2d;margin:20px 0 0;color:#cfc9bb;font-size:15px}
.legacy-footer{padding:30px 20px 90px;text-align:center;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;font-size:13px}.legacy-footer a{color:#ffcf2d}
@media(max-width:900px){.site-nav{grid-template-columns:210px 1fr auto;gap:20px;padding-inline:20px}.site-brand{width:200px}.site-links{gap:18px}#dm .hero{grid-template-columns:1fr;padding:48px 28px 28px;min-height:0}.hero-copy{max-width:680px}.hero-visual{margin-top:-30px}#dm .hero .heldbild{width:110%;margin-left:-5%}.problem-accordion{grid-template-columns:repeat(2,1fr)}#dm section.landing-section:not(.hero){padding:50px 28px}}
@media(max-width:680px){.legacy-header{position:relative}.site-nav{min-height:auto;grid-template-columns:1fr auto;grid-template-areas:'brand cart' 'links links';row-gap:9px;padding:12px 17px 10px}.site-brand{grid-area:brand;width:176px}.site-cart{grid-area:cart;padding:10px 12px;font-size:12px}.site-links{grid-area:links;justify-content:space-between;border-top:1px solid #30323a;padding-top:7px;gap:9px}.site-links a{font-size:12px;padding:8px 0}.header-stripes{height:7px}#dm .laufband{font-size:11px}#dm .hero{padding:36px 18px 24px;gap:16px}#dm .hero h1{font-size:clamp(55px,17vw,78px)}.hero-intro{font-size:16px;margin-top:21px}.hero-buy{margin-bottom:18px}.hero-actions{align-items:stretch}.hero-cta{justify-content:space-between;width:100%}.hero-link{text-align:center;width:100%}.hero-visual{margin-top:0}#dm .hero .heldbild{width:118%;margin-left:-9%}.hero-stamp{width:68px;height:68px;font-size:14px}.hero-usps{grid-template-columns:1fr;gap:10px;padding-top:18px}.problem-accordion{grid-template-columns:1fr}.problem-card summary{min-height:0;font-size:21px}#dm section.landing-section:not(.hero){padding:42px 18px 48px}.chatknopf{right:10px;bottom:54px;padding:10px 12px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.motion-ready #dm section.landing-section:not(.section-visible){opacity:1;transform:none}.landing-section,.site-brand,.site-links a,.site-cart,.hero-cta,.shop-cta,.heldbild{transition:none!important}}

/* Briefgenerator: Produkt zuerst, Text nur als Kaufvorschau */
.brief-generator{max-width:820px;margin:30px auto 0;padding:26px;background:#17181d;border:1px solid #363840;border-top:4px solid var(--orange);box-shadow:0 24px 60px #0006;animation:brief-auf .45s cubic-bezier(.2,.8,.2,1) both}
.brief-produkt{display:grid;grid-template-columns:minmax(180px,320px) 1fr;gap:26px;align-items:center;text-align:left;margin:auto}
.brief-produkt img{display:block;width:100%;aspect-ratio:1.35/1;object-fit:cover;background:#0b0c0f;border:1px solid #30323a;filter:drop-shadow(0 20px 22px #0008);animation:produkt-schweben 2.8s ease-in-out infinite}
.brief-produkt span{font:700 10px/1.5 'Space Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--gelb)}
.brief-produkt h3{font:400 clamp(34px,6vw,62px)/.9 'Dump Display',sans-serif;text-transform:uppercase;margin:8px 0 10px}
.brief-produkt b{font:400 27px/1 'Dump Display',sans-serif;color:var(--orange)}
.brief-laden{margin-top:26px;padding-top:20px;border-top:1px solid #34363d}
.brief-ladezeile{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;color:#cfc9bb;font-size:14px;min-height:40px}
.brief-ladezeile b{font:700 12px/1 'Space Mono',monospace;color:var(--gelb);white-space:nowrap}
.brief-balken{height:11px;margin-top:12px;background:#08090b;border:1px solid #41434b;overflow:hidden}
.brief-balken i{display:block;height:100%;background:repeating-linear-gradient(135deg,var(--orange) 0 13px,var(--gelb) 13px 26px);background-size:37px 37px;box-shadow:0 0 18px #ff5a1f88;transition:width .36s ease;animation:balken-wandert .7s linear infinite}
.brief-generator .brief{margin-top:26px;overflow:hidden}
.brief-gesperrt{position:relative;margin:16px -22px -24px;padding:34px 22px 24px;text-align:center;background:linear-gradient(180deg,rgba(244,241,232,.1),#e7e1d4 42%);border-top:1px dashed #aaa293;color:#242424}
.brief-gesperrt:before{content:'';position:absolute;left:0;right:0;top:-36px;height:48px;background:linear-gradient(180deg,transparent,#f4f1e8);pointer-events:none}
.brief-gesperrt span{display:block;font-size:24px}.brief-gesperrt b{display:block;margin:6px 0 14px;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.brief-gesperrt i{display:block;height:7px;max-width:78%;margin:7px auto;border-radius:5px;background:#aaa59a;filter:blur(2.5px)}.brief-gesperrt i:nth-last-child(1){max-width:51%}
.brief-trigger{max-width:62ch;margin:18px auto 0;text-align:center;color:var(--gelb);font:700 12px/1.55 'Space Mono',monospace}
.brief-aktionen{display:flex;justify-content:center;gap:10px;margin-top:15px!important}.brief-aktionen .taste{margin:0}
@keyframes brief-auf{from{opacity:0;transform:translateY(24px) scale(.98)}}
@keyframes produkt-schweben{50%{transform:translateY(-7px) rotate(-.4deg)}}
@keyframes balken-wandert{to{background-position:37px 0}}
@media(max-width:680px){.brief-generator{padding:18px;margin-top:22px}.brief-produkt{grid-template-columns:1fr;text-align:center;gap:14px}.brief-produkt img{max-width:340px;margin:auto}.brief-ladezeile{align-items:center;text-align:left}.brief-aktionen{display:grid}.brief-aktionen .taste{width:100%}.brief-gesperrt{margin-inline:-18px}}
@media(prefers-reduced-motion:reduce){.brief-produkt img,.brief-balken i,.brief-generator{animation:none!important}}