/* Rotlicht – Schwarz, Neonrot, warmes Rosa; Leuchtschrift und Türschilder */
:root {
  --nacht: #0b0508; --nacht-2: #12070b; --wand: #190a10; --wand-2: #23101a;
  --fuge: #3a1420; --fuge-2: #5a2030;
  --hell: #f6e9ec; --matt: #c4a6ae; --fern: #8a6a73;
  --rot: #ff1f3d; --rot-tief: #b3122b; --rosa: #ff7aa8; --rosa-hell: #ffc2d4;
  --serif: Georgia, "Times New Roman", "Liberation Serif", serif;
  --text: "Trebuchet MS", "Segoe UI", Tahoma, "DejaVu Sans", Verdana, sans-serif;
  --glimm: 0 0 6px rgba(255, 122, 168, .9), 0 0 18px rgba(255, 31, 61, .85), 0 0 42px rgba(255, 31, 61, .55);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--hell); font: 17px/1.7 var(--text); background: var(--nacht); }
img { max-width: 100%; height: auto; }
a { color: var(--rosa); }
a:hover { color: #fff; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; }
.wrap { width: min(1120px, 100% - 36px); margin: 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Leiste oben */
.leiste { background: #060204; border-bottom: 2px solid var(--rot); box-shadow: 0 0 26px rgba(255, 31, 61, .55); position: relative; z-index: 5; }
.leiste-in { width: min(1120px, 100% - 36px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 70px; }
.site-logo img { display: block; max-height: 54px; width: auto; }
.site-logo a { display: inline-block; color: var(--hell); text-decoration: none; font: italic 700 1.5rem/1.1 var(--serif); text-shadow: var(--glimm); }
.ab18 { margin: 0; padding: 7px 14px; border: 2px solid var(--rosa); border-radius: 6px; font: 700 .8rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--rosa-hell); box-shadow: 0 0 12px rgba(255, 31, 61, .7), inset 0 0 10px rgba(255, 31, 61, .45); text-shadow: 0 0 8px rgba(255, 31, 61, .9); }

/* Eingang */
.eingang { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; background: var(--nacht); }
.eingang-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.eingang::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--nacht) 0%, var(--nacht) 8%, rgba(11, 5, 8, 0) 34%), linear-gradient(90deg, rgba(11, 5, 8, .97) 0%, rgba(11, 5, 8, .84) 34%, rgba(11, 5, 8, .12) 62%, rgba(11, 5, 8, 0) 100%); }
.eingang-in { position: relative; z-index: 2; width: min(1120px, 100% - 36px); margin: 0 auto; padding: 60px 0 70px; }
.eingang-in > * { max-width: 560px; }
.leucht { display: inline-block; margin: 0 0 22px; padding: 8px 20px 10px; border: 2px solid var(--rosa); border-radius: 10px; font: italic 700 1.5rem/1 var(--serif); letter-spacing: .04em; color: #fff; text-shadow: var(--glimm); box-shadow: 0 0 10px rgba(255, 122, 168, .8), 0 0 28px rgba(255, 31, 61, .7), inset 0 0 14px rgba(255, 31, 61, .5); transform: rotate(-3deg); }
.leucht.klein { font-size: 1.15rem; margin: 34px 0 4px; }
.eingang h1 { margin: 0 0 18px; font-size: clamp(2.1rem, 4.6vw, 3.6rem); color: #fff; text-shadow: 0 0 30px rgba(255, 31, 61, .55); }
.eingang-zeile { margin: 0 0 28px; color: var(--rosa-hell); font-size: 1.02rem; }
.eingang-zeile b { color: #fff; font-size: 1.2em; }
.eingang-knopf { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* Fensterreihe */
.fenster { width: min(1120px, 100% - 36px); margin: -46px auto 0; position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fenster figure { position: relative; margin: 0; padding: 6px; background: #060204; border: 1px solid var(--fuge-2); border-radius: 120px 120px 6px 6px; box-shadow: 0 0 0 1px #000, 0 0 26px rgba(255, 31, 61, .4); overflow: hidden; }
.fenster img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 18%; border-radius: 114px 114px 3px 3px; }
.fenster figure:nth-child(4) img { object-position: 50% 20%; }
.fenster figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 8px 14px; text-align: center; font: italic 700 1.25rem/1 var(--serif); color: #fff; text-shadow: var(--glimm); background: linear-gradient(0deg, rgba(6, 2, 4, .92), rgba(6, 2, 4, 0)); }

/* Einleitung */
.intro { margin: 46px 0 14px; padding: 26px 30px; background: linear-gradient(135deg, var(--wand-2), var(--wand)); border-left: 4px solid var(--rot); box-shadow: -8px 0 26px -8px rgba(255, 31, 61, .6); }
.intro h2 { margin: 0 0 10px; font-size: 1.7rem; font-style: italic; color: #fff; }
.intro p { margin: 0 0 10px; color: #ecd9de; }
.intro p:last-child { margin-bottom: 0; }

/* Werbeplätze */
.ad { position: relative; margin: 32px auto; padding: 30px 12px 12px; max-width: 790px; text-align: center; overflow: hidden; line-height: 0; background: var(--nacht-2); border: 1px solid var(--fuge); }
.ad-label { position: absolute; top: 9px; left: 14px; font: 700 .68rem/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--fern); }
.ad a { display: inline-block; max-width: 100%; line-height: 0; }
.ad img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.ad iframe, .ad > div, .ad > ins, .ad video { max-width: 100% !important; margin-left: auto; margin-right: auto; }
.ad > *:not(.ad-label) { max-width: 100%; }
.ad > :not(a):not(.ad-label) { line-height: normal; }

/* Rangliste: Türschilder */
.strasse { margin: 44px 0; scroll-margin-top: 20px; }
.strasse-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--fuge); }
.strasse-titel { margin: 0; font: 700 2.3rem/1 var(--serif); color: #fff; }
.strasse-titel span { font-style: italic; color: var(--rosa); text-shadow: var(--glimm); margin-right: 4px; }
.schilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.schild { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); background: var(--wand); border: 1px solid var(--fuge); border-radius: 4px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.schild:hover { border-color: var(--rot); box-shadow: 0 0 24px rgba(255, 31, 61, .35); }
.hausnr { margin: 0; display: grid; place-items: center; align-content: start; padding-top: 20px; font: 700 2rem/1 var(--serif); color: var(--rosa); background: #060204; border-right: 1px solid var(--fuge); text-shadow: 0 0 12px rgba(255, 31, 61, .8); }
.schild-in { padding: 18px 20px 16px; min-width: 0; }
.schild-titel { margin: 0 0 6px; font: 700 1.25rem/1.3 var(--serif); }
.sitetitle { color: #fff; text-decoration: none; }
.sitetitle:hover { color: var(--rosa); text-decoration: underline; text-underline-offset: 4px; }
.schild-titel > :not(a), .newsite { margin-left: 8px; padding: 3px 8px; border: 1px solid var(--rosa); border-radius: 4px; font: 700 .64rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--rosa-hell); vertical-align: middle; }
.banner { display: block; margin: 8px 0 6px; max-width: 100%; height: auto; border: 1px solid var(--fuge-2); }
.schild-in a:has(> .banner) { display: inline-block; max-width: 100%; line-height: 0; }
.description { margin: 4px 0 12px; color: #e2ccd2; font-size: .98rem; line-height: 1.55; overflow-wrap: anywhere; }
.zahlen { margin: 0; padding-top: 10px; border-top: 1px dashed var(--fuge); display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: .86rem; color: var(--matt); }
.zahlen b { color: #fff; font-size: 1rem; }
.zahlen small { color: var(--fern); }

/* Platz 1 bis 3 */
.schild.top1 { grid-column: 1 / -1; grid-template-columns: 110px minmax(0, 1fr); border: 2px solid var(--rot); background: linear-gradient(120deg, #2b0a14, var(--wand) 65%); box-shadow: 0 0 34px rgba(255, 31, 61, .45), inset 0 0 40px rgba(255, 31, 61, .08); }
.schild.top1 .hausnr { font-size: 3.4rem; padding-top: 24px; color: #fff; text-shadow: var(--glimm); border-right-color: var(--rot); }
.schild.top1 .schild-in { padding: 24px 28px 20px; }
.schild.top1 .schild-titel { font-size: 1.7rem; }
.schild.top2, .schild.top3 { border-color: var(--fuge-2); }
.schild.top2 .hausnr, .schild.top3 .hausnr { color: #fff; text-shadow: var(--glimm); }

/* Seitenwahl */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 20px 0; }
.pagination:empty { display: none; }
.strasse-kopf .pagination { margin: 0; }
.pagination a, .pagination strong { display: inline-block; min-width: 44px; padding: 10px 12px; text-align: center; text-decoration: none; border-radius: 4px; border: 1px solid var(--fuge-2); background: var(--wand); color: var(--hell); font: 700 .95rem/1.1 var(--text); }
.pagination a:hover { border-color: var(--rot); color: var(--rosa); }
.pagination strong { background: var(--rot); border-color: var(--rot); color: #fff; box-shadow: 0 0 14px rgba(255, 31, 61, .6); }

/* Flur-Bild */
.flur { position: relative; margin: 46px 0; overflow: hidden; border: 1px solid var(--fuge); background: #060204; }
.flur img { display: block; width: 100%; height: 440px; object-fit: cover; object-position: 60% 40%; }
.flur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 2, 4, .88) 0%, rgba(6, 2, 4, .5) 38%, rgba(6, 2, 4, 0) 62%); }
.flur p { z-index: 1; position: absolute; left: 6%; top: 50%; transform: translateY(-50%); margin: 0; max-width: 46%; font: 700 clamp(1.3rem, 3.2vw, 2.3rem)/1.25 var(--serif); color: #fff; }
.flur p span { display: block; font-style: italic; font-size: 1.5em; color: #fff; text-shadow: var(--glimm); }

/* SEO-Text */
.seotext { margin: 46px auto; max-width: 860px; color: #ecd9de; }
.seotext h2 { margin: 40px 0 14px; padding-bottom: 10px; font-size: 1.9rem; color: #fff; border-bottom: 1px solid var(--fuge); }
.seotext h2:first-child { margin-top: 0; }
.seotext h3 { margin: 28px 0 8px; padding-left: 14px; font-size: 1.3rem; font-style: italic; color: var(--rosa-hell); border-left: 3px solid var(--rot); }
.seotext p { margin: 0 0 14px; }
.seotext ul, .seotext ol { margin: 0 0 14px; padding-left: 1.2em; }
.seotext li { margin: 6px 0; }
.seotext li::marker { color: var(--rot); }
.seotext strong { color: #fff; }
.seotext a, .intro a { color: var(--rosa); text-decoration: underline; text-underline-offset: 3px; }

/* Statistik */
.stats { margin: 32px 0 48px; padding: 20px 24px; background: var(--nacht-2); border-top: 2px solid var(--rot); }
.stats-title { margin: 0 0 12px; font: italic 700 1.25rem/1.2 var(--serif); color: var(--rosa-hell); }
.stats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 22px; font-size: .93rem; color: var(--matt); }
.stats strong { color: #fff; }

/* Fuß */
.site-footer { padding: 28px 0 36px; border-top: 1px solid var(--fuge); background: #060204; text-align: center; font-size: .95rem; color: var(--matt); }
.site-footer p { margin: 0 0 10px; }
.site-footer a { color: var(--hell); }
.license, .license a { font-size: .85rem; color: var(--fern); }
.tl-hinweis { max-width: 760px; margin: 0 auto 14px !important; padding: 10px 14px; border: 1px solid var(--fuge-2); background: var(--wand); color: #ecd9de; font-size: .9rem; line-height: 1.5; }

/* Formulare / Unterseiten */
main.wrap > h1 { margin: 12px 0 20px; font-size: clamp(1.9rem, 4.4vw, 2.9rem); color: #fff; }
main.notfound h1 { margin-top: 26px; text-align: center; }
.form-card { margin: 18px 0; padding: 24px 26px; background: var(--wand); border: 1px solid var(--fuge); border-radius: 4px; }
.form-card h2 { margin: 0 0 12px; font-size: 1.35rem; font-style: italic; color: var(--rosa-hell); }
.rules-text { color: #ecd9de; }
.rules-text ul, .rules-text ol { margin: 0; padding-left: 1.25em; }
.rules-text li { margin: 4px 0; }
.rules-text li::marker { color: var(--rot); }
.form-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 16px; align-items: start; margin-bottom: 14px; }
.form-row > label, .form-row > .label { padding-top: 11px; font: 700 .9rem/1.3 var(--text); color: var(--matt); }
.form-row .error { grid-column: 2; color: #ffb38a; font-size: .9rem; }
.form-row .error:empty { display: none; }
.form-row.rules label { display: flex; gap: 10px; align-items: center; padding-top: 10px; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea { width: 100%; padding: 12px 14px; font: 16px/1.4 var(--text); color: var(--hell); background: #060204; border: 1px solid var(--fuge-2); border-radius: 4px; }
input:focus, textarea:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(255, 31, 61, .25); }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--rot); }
.captcha img { vertical-align: middle; margin-right: 10px; background: #fff; }
.captcha input { max-width: 160px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.btn, .form-actions input { display: inline-block; padding: 14px 26px; cursor: pointer; text-decoration: none; font: 700 1rem/1 var(--text); letter-spacing: .04em; color: #fff; background: var(--rot); border: 2px solid var(--rot); border-radius: 4px; box-shadow: 0 0 22px rgba(255, 31, 61, .55); transition: box-shadow .15s, background .15s; }
.btn:hover, .form-actions input:hover { color: #fff; background: #ff3f59; box-shadow: 0 0 34px rgba(255, 31, 61, .85); }
.btn.secondary { background: rgba(6, 2, 4, .6); border-color: var(--rosa); color: var(--rosa-hell); box-shadow: inset 0 0 12px rgba(255, 31, 61, .3); }
.btn.secondary:hover { background: rgba(255, 31, 61, .18); color: #fff; }
.intro a.btn { color: #fff; text-decoration: none; }
.intro a.btn.secondary { color: var(--rosa-hell); }
.message, .updatemessage { color: var(--rosa); font-weight: 700; }
.message:empty { display: none; }
.stats-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.stats-table td { padding: 8px 10px; border-bottom: 1px solid var(--fuge); }
.stats-table td:nth-child(even) { color: var(--rosa-hell); text-align: right; }
.codebox { overflow-x: auto; }
.codebox textarea { min-height: 110px; font: .85rem/1.5 ui-monospace, Menlo, Consolas, monospace; }
.codebox img { max-width: 100%; }

/* 404 */
.zu { position: relative; width: 230px; margin: 40px auto 10px; padding: 6px; background: #060204; border: 1px solid var(--fuge-2); border-radius: 120px 120px 6px 6px; overflow: hidden; }
.zu img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 14%; border-radius: 114px 114px 3px 3px; filter: grayscale(1) brightness(.4); }
.zu span { position: absolute; inset: 0; display: grid; place-items: center; font: italic 700 1.7rem/1 var(--serif); color: #fff; text-shadow: var(--glimm); transform: rotate(-8deg); }
.notfound .intro { max-width: 720px; margin-left: auto; margin-right: auto; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Tablet */
@media (max-width: 900px) {
  .eingang { min-height: 480px; }
  .fenster { gap: 10px; }
  .fenster figcaption { font-size: 1rem; }
  .schilder { grid-template-columns: 1fr; }
  .stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Handy */
@media (max-width: 620px) {
  body { font-size: 16px; }
  .leiste-in { min-height: 58px; }
  .site-logo img { max-height: 44px; }
  .ab18 { padding: 6px 9px; font-size: .68rem; }
  .eingang { min-height: 0; display: block; }
  .eingang-bild { display: block; position: relative; }
  .eingang-bild img { position: static; display: block; width: 100%; height: 440px; object-position: 50% 14%; }
  .eingang-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--nacht) 0%, rgba(11, 5, 8, .75) 22%, rgba(11, 5, 8, 0) 52%); }
  .eingang::after { display: none; }
  .eingang-in { margin-top: -120px; padding: 0 0 34px; }
  .leucht { font-size: 1.2rem; margin-bottom: 14px; }
  .fenster { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .fenster figure, .fenster img { border-radius: 90px 90px 4px 4px; }
  .intro { padding: 20px; margin-top: 34px; }
  .strasse-titel { font-size: 1.8rem; }
  .schild { grid-template-columns: 52px minmax(0, 1fr); }
  .hausnr { font-size: 1.4rem; padding-top: 18px; }
  .schild-in { padding: 14px 14px 12px; }
  .schild.top1 { grid-template-columns: 62px minmax(0, 1fr); }
  .schild.top1 .hausnr { font-size: 2.1rem; padding-top: 20px; }
  .schild.top1 .schild-in { padding: 18px 16px 14px; }
  .schild.top1 .schild-titel { font-size: 1.35rem; }
  .flur img { height: 260px; object-position: 70% 30%; }
  .flur p { max-width: 58%; left: 5%; }
  .form-row { grid-template-columns: 1fr; }
  .form-row .error { grid-column: 1; }
  .stats ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }