/* ============================================================================ ROCKHARZ Ticketmarktplatz 2027 — Stylesheet Design v7 „poster-bold-rhz-layout", identisch zum Camp-R-Buchungstool. Herkunft: app/assets/styles/app.css + design/tokens.css aus dem campsite-booking-Repository. Dort liefert Tailwind die Reset-Schicht (@tailwind base); hier gibt es keinen Build-Schritt, deshalb steht unten ein eigener, knapper Reset an ihrer Stelle. Alle Komponenten darunter sind unverändert übernommen — sie waren nie von Tailwind abhängig. Beim Nachziehen von Designänderungen aus Camp-R: die Token im :root-Block sind die Schnittstelle. Farbwechsel passieren dort, nicht in den Regeln. ============================================================================ */ /* ============ TOKENS (Quelle: design/tokens.css) ============ */ :root{ /* Flächen / Neutral */ --bg:#080a11; --bg-veil:rgba(8,10,17,.86); --panel:#000c07; --panel-2:#0e1014; --line:#2c3b42; --line-soft:#1e262d; --ink:#0c0608; /* Text */ --paper:#f5e6c9; --paper-dim:#c9d9dc; /* Akzent-Slots (Default: RHZ-Blau) */ --accent:#9eabbf; --accent-hot:#c9d9dc; --accent-deep:#5b7386; --accent-focus:rgba(158,171,191,.22); --accent-soft:rgba(158,171,191,.10); /* Layout-Rhythmus: EIN Abstand zwischen den Blöcken des Content-Stacks. */ --block-gap:22px; /* Status */ --red:#cf2e2e; --green:#7cc966; /* Feste Website-Farben (Header/Footer) */ --blue:#9eabbf; --nav-bg:#00151c; --nav-hover-bg:#1e2830; --nav-hover-text:#ffdeaa; --footer-bg:#081623; --footer-text:#465282; --btn-site-bg:#07222d; --btn-site-text:#fff6d3; /* Radius / Typo */ --radius:4px; --font-body:"Segoe UI","Helvetica Neue",Arial,"Liberation Sans",sans-serif; --font-poster:"Arial Narrow","Liberation Sans Narrow","Helvetica Neue Condensed","Franklin Gothic Medium",Arial,sans-serif; --font-mono:"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace; } /* Alt-Theme Orange: Klasse auf oder beliebigen Container setzen */ .theme-orange{ --accent:#eaad67; --accent-hot:#ffdeaa; --accent-deep:#ba6427; --accent-focus:rgba(234,173,103,.22); --accent-soft:rgba(234,173,103,.10); } /* ============ RESET ============ Ersetzt @tailwind base. Bewusst schmal: nur was die Komponenten unten voraussetzen — durchgängiges border-box, entfernte Browser-Vorgaben an Überschriften/Listen, Formularelemente erben die Schrift. */ *,*::before,*::after{box-sizing:border-box} h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0} ul[class],ol[class]{list-style:none;margin:0;padding:0} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;padding:0} /* Browser setzen

kursiv — die Rücksendeadresse soll wie eine Anschrift aussehen, nicht wie ein Zitat. */ address{font-style:normal} table{border-collapse:collapse} fieldset{margin:0;padding:0;border:0;min-width:0} legend{padding:0} /* ============ BASIS ============ */ html{ scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; } body{ margin:0; /* Bild ist 2000px breit: auf volle Viewport-Breite skalieren, sonst harte Kanten auf breiten Displays; Höhe proportional, läuft unten in Schwarz aus (bewusst kein cover: das würde seitlich croppen). */ background:var(--bg) url('rhz2027_bg.webp') no-repeat fixed center top; background-size:100% auto; color:var(--paper); font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } body::before{ content:"";position:fixed;inset:0;z-index:-1; background: linear-gradient(180deg,rgba(8,10,17,.28) 0%,rgba(8,10,17,.45) 320px,rgba(8,10,17,.78) 760px,rgba(8,10,17,.92) 100%); } img{max-width:100%;height:auto} a{color:var(--accent);text-decoration:underline} a:hover{color:var(--accent-hot)} :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px} p{margin:.5rem 0} .wrap{max-width:1120px;margin:0 auto;padding:0 20px} /* ============ POSTER TYPO ============ */ .poster{ font-family:var(--font-poster); font-stretch:condensed; text-transform:uppercase; font-weight:900; letter-spacing:.005em; line-height:.92; margin:0; } .display{font-size:clamp(2.6rem,8vw,5.2rem)} .h1{font-size:clamp(2.1rem,5.5vw,3.6rem)} .h2{font-size:clamp(1.5rem,3.4vw,2.2rem)} .h3{font-size:clamp(1.15rem,2.4vw,1.5rem)} .kicker{ font-family:var(--font-mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);margin:0 0 .6rem; } .lede{font-size:1.08rem;color:var(--paper-dim);max-width:64ch} .accent{color:var(--accent)} /* ============ TOP BAR / NAV ============ */ .site-head{position:sticky;top:0;z-index:50} .navbar{ background:var(--nav-bg); border-bottom:1px solid #1e262d; box-shadow:0 6px 18px rgba(0,0,0,.5); } .navbar-inner{display:flex;align-items:stretch;gap:0;max-width:1120px;margin:0 auto} .brand{ display:flex;align-items:center;gap:.55rem;padding:.7rem 20px; text-decoration:none;flex-shrink:0; } .brand .mark{ font-family:var(--font-poster);font-weight:900;text-transform:uppercase;font-stretch:condensed; font-size:1.25rem;line-height:1;color:var(--ink); background:var(--accent);padding:.28em .5em;transform:skewX(-6deg); } .brand .sub{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;color:var(--paper-dim);text-transform:uppercase} .mainnav{ display:flex;overflow-x:auto;scrollbar-width:none;margin-left:auto; } .mainnav::-webkit-scrollbar{display:none} .mainnav a{ display:flex;align-items:center;padding:0 .85rem;white-space:nowrap; font-family:var(--font-poster);font-stretch:condensed;font-weight:700;text-transform:uppercase; font-size:.92rem;letter-spacing:.06em;color:#e5e2d7;text-decoration:none; border-right:1px solid rgba(255,255,255,.1); } .mainnav a:hover{color:var(--nav-hover-text);background:var(--nav-hover-bg)} .mainnav a[aria-current="page"]{color:var(--nav-hover-text);background:var(--nav-hover-bg);box-shadow:inset 0 -3px 0 var(--accent)} /* ============ HERO ============ */ .hero{padding:34px 0 10px;text-align:center} .hero img{width:min(880px,100%);margin:0 auto;filter:drop-shadow(0 18px 42px rgba(0,0,0,.65))} .hero .display{margin-top:6px;text-shadow:0 4px 0 rgba(0,0,0,.55)} .page-head{padding:34px 0 8px;text-align:center} .page-head .h1{text-shadow:0 3px 0 rgba(0,0,0,.55)} /* ============ STEMPEL-BADGES ============ */ .stamp{ font-family:var(--font-poster);font-stretch:condensed;font-weight:900;text-transform:uppercase; font-size:.95rem;letter-spacing:.08em;line-height:1.1;text-align:center; padding:.3em .55em;border:3px solid currentColor;border-radius:3px; transform:rotate(5deg);background:rgba(8,10,17,.82); box-shadow:4px 4px 0 rgba(0,0,0,.5); } .stamp.ok{color:var(--green)} .stamp.soon{color:var(--accent)} .stamp.out{color:var(--red)} .stamp.static{position:static;display:inline-block} .badge-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:center} /* ============ TICKET-STUB BUTTONS ============ */ .stub{ position:relative;display:inline-block;cursor:pointer;text-decoration:none;text-align:center; font-family:var(--font-poster);font-stretch:condensed;font-weight:900;text-transform:uppercase; font-size:1.15rem;letter-spacing:.09em;line-height:1; background:var(--accent);color:var(--ink); border:3px solid var(--ink);border-radius:2px; padding:1rem 1.7rem; box-shadow:7px 7px 0 rgba(0,0,0,.6); transition:transform .08s ease,box-shadow .08s ease,background .15s; } .stub::after{ /* Perforation */ content:"";position:absolute;inset:5px;pointer-events:none; border:2px dashed rgba(12,6,8,.55);border-radius:1px; } .stub:hover{background:var(--accent-hot);color:var(--ink);transform:translate(-2px,-2px);box-shadow:9px 9px 0 rgba(0,0,0,.6)} .stub:active{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(0,0,0,.6)} .stub.ghost{background:transparent;color:var(--paper);border-color:var(--paper)} .stub.ghost::after{border-color:rgba(245,230,201,.4)} .stub.ghost:hover{background:rgba(245,230,201,.12);color:#fff6d3} .stub.disabled,.stub:disabled{ background:#1e2830;color:#9eabbf;border-color:#0e1014;cursor:not-allowed; box-shadow:none;transform:none; } .stub.big{font-size:1.35rem;padding:1.15rem 2.2rem} .stub-block{display:block;width:100%} /* Website-Button-Stil (Sekundär-Button) */ .btn-site{ display:inline-block;cursor:pointer;text-decoration:none;text-align:center; font-family:var(--font-body);font-weight:700;font-size:.95rem;line-height:34px; background:var(--btn-site-bg);color:var(--btn-site-text);border:1px solid var(--btn-site-bg);border-radius:3px; padding:5px 25px;transition:background .15s,color .15s,transform .1s; } .btn-site:hover{background:#0c3242;color:#ffdeaa} .btn-site:active{transform:translateY(1px)} /* ============ PANELS / PROSE ============ */ .panel{ background:rgba(0,12,7,.92);border:0;border-bottom:3px solid var(--line); padding:26px 26px 30px;margin:var(--block-gap) 0; } .panel.boxed{border:1px solid var(--line);border-left:4px solid var(--accent)} .panel.tight{padding:20px} .note{font-size:.88rem;color:var(--paper-dim)} .footnote{font-size:.82rem;color:var(--paper-dim);border-top:1px dashed var(--line);margin-top:1rem;padding-top:.8rem} .rule{ border:0;height:6px;margin:26px 0; background:repeating-linear-gradient(90deg,var(--accent) 0 26px,transparent 26px 40px); opacity:.85; } /* Adressblock (Rücksendeadresse): als Karte statt als Fließtext-Absätze */ .addr{ font-family:var(--font-mono);font-size:.98rem;line-height:1.7;color:var(--paper); background:#00050c;border:1px solid var(--line);border-left:4px solid var(--accent); padding:14px 18px;margin:.8rem 0;display:inline-block;min-width:min(320px,100%); } .addr .who{font-family:var(--font-poster);font-stretch:condensed;font-weight:900; text-transform:uppercase;font-size:1.1rem;letter-spacing:.04em;display:block;margin-bottom:.25rem} /* Rücksendeadresse als Hauptsache der Seite: Ohne sie kommt das Ticket nie an, deshalb bekommt sie das Gewicht einer Karte und nicht das einer Randnotiz. */ .addr-card{ background:var(--panel);border:3px solid var(--accent);border-radius:var(--radius); box-shadow:10px 10px 0 rgba(0,0,0,.55); padding:22px 26px 24px;margin:var(--block-gap) 0; } .addr-card .addr-head{ font-family:var(--font-mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);margin:0 0 .8rem; } .addr-card .addr-lines{ font-family:var(--font-mono);font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.6; color:var(--paper);margin:0; } .addr-card .addr-lines .who{ font-family:var(--font-poster);font-stretch:condensed;font-weight:900;text-transform:uppercase; font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:.03em;display:block; color:var(--paper);margin-bottom:.35rem; } .addr-card .addr-note{margin:1rem 0 0;font-size:.92rem;color:var(--paper-dim)} .addr-card .addr-note strong{color:var(--paper)} /* Faktenliste mit Akzent-Strichen statt Standard-Bullets */ .facts{list-style:none;padding-left:0;margin:.5rem 0 0} .facts li{position:relative;padding-left:1.15rem;margin:.35rem 0;color:var(--paper-dim)} .facts li::before{content:"";position:absolute;left:0;top:.52em;width:.55rem;height:3px;background:var(--accent)} /* Preis-Ribbon (Nennwert / Marktplatzpreis) */ .price-ribbon{ display:inline-flex;align-items:baseline;gap:.5rem;background:var(--accent);color:var(--ink); font-family:var(--font-poster);font-stretch:condensed;font-weight:700;font-size:1.35rem; padding:.35rem 1.4rem .3rem .9rem; clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%); } .price-ribbon small{font-family:var(--font-body);font-weight:600;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase} .price-row{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;margin:1rem 0 .2rem} /* ============ FORMULARE ============ */ .form-shell{margin:0} fieldset.group{ border:3px solid var(--line);border-radius:var(--radius); background:rgba(0,12,7,.94);box-shadow:8px 8px 0 rgba(0,0,0,.5); padding:20px 22px 24px;margin:0 0 26px; } fieldset.group legend{ font-family:var(--font-poster);font-stretch:condensed;font-weight:900;text-transform:uppercase; font-size:1.35rem;letter-spacing:.04em;color:var(--paper); background:var(--ink);border:2px solid var(--line); padding:.18em .6em;margin-left:-8px; box-shadow:4px 4px 0 rgba(0,0,0,.5); } legend .nr{color:var(--accent);font-family:var(--font-mono);font-size:.8em;margin-right:.35em} .f-grid{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:620px){ .f-grid.two{grid-template-columns:1fr 1fr} .f-grid.plz-stadt{grid-template-columns:1fr 2fr} } .field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:16px} .f-grid .field{margin-bottom:0} .field label,.field .lbl, .f-label{ font-family:var(--font-poster);font-stretch:condensed;font-weight:700;text-transform:uppercase; font-size:.92rem;letter-spacing:.09em;color:var(--paper-dim); } .field label.required::after,.f-label.required::after{content:" *";color:var(--accent)} .field .req{color:var(--accent)} /* Eingabefelder */ .fi{ width:100%;appearance:none; background:#00050c;color:var(--paper); border:2px solid var(--line);border-bottom:4px solid var(--line); border-radius:3px;padding:.85rem 1rem;font-size:1.02rem;font-family:var(--font-body); transition:border-color .15s,box-shadow .15s,background .15s; } select.fi{ background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%); background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%; background-size:6px 6px;background-repeat:no-repeat; padding-right:2.6rem; } .fi::placeholder{color:#44596b} .fi:hover{border-color:var(--paper-dim)} .fi:focus{ outline:none;border-color:var(--accent);border-bottom-color:var(--accent); box-shadow:0 0 0 4px var(--accent-focus);background:#00151c; } .fi-err,.fi-err:focus{border-color:var(--red)!important;border-bottom-color:var(--red)!important;box-shadow:0 0 0 4px rgba(207,46,46,.18)} /* Ticketnummer: fünf Ziffern, monospace und gesperrt gesetzt — sie sind der Schlüssel des ganzen Vorgangs und sollen beim Abtippen prüfbar sein. */ .fi.code{font-family:var(--font-mono);font-size:1.25rem;letter-spacing:.28em} .hint{font-size:.82rem;color:var(--paper-dim)} /* Checkboxen */ .check{display:flex;gap:.8rem;align-items:flex-start;margin:.7rem 0;cursor:pointer} .check input[type=checkbox],input[type=checkbox].fi-check{ appearance:none;-webkit-appearance:none;flex-shrink:0;width:26px;height:26px;margin:0;cursor:pointer; background:#00050c;border:3px solid var(--line);border-radius:3px; display:inline-grid;place-items:center;transition:border-color .15s,background .15s; padding:0; } .check input[type=checkbox]::after,input[type=checkbox].fi-check::after{ content:"";width:12px;height:12px;transform:scale(0);transition:transform .12s; background:var(--accent); clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%); } .check input[type=checkbox]:checked,input[type=checkbox].fi-check:checked{border-color:var(--accent);background:#07222d} .check input[type=checkbox]:checked::after,input[type=checkbox].fi-check:checked::after{transform:scale(1)} .check input[type=checkbox]:focus-visible,input[type=checkbox].fi-check:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .check .txt{font-size:.95rem;color:var(--paper-dim)} .check .txt b,.check .txt strong{color:var(--paper)} .form-foot{display:flex;flex-direction:column;gap:.8rem;align-items:stretch;margin-top:4px} @media(min-width:620px){.form-foot{flex-direction:row;align-items:center;justify-content:space-between}} /* ============ ALERTS ============ */ .alert{ border:3px solid;border-radius:var(--radius);padding:14px 18px;margin:16px 0; display:flex;gap:.8rem;align-items:flex-start;font-size:.98rem; box-shadow:6px 6px 0 rgba(0,0,0,.45); } .alert .ic{font-family:var(--font-poster);font-weight:900;font-size:1.3rem;line-height:1} .alert .bd{flex:1;min-width:0} .alert.ok{border-color:var(--green);background:rgba(124,201,102,.12);color:#cdeec6} .alert.err{border-color:var(--red);background:rgba(207,46,46,.12);color:#f2b8b2} .alert.info{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-hot)} .alert.info a{color:var(--accent-hot)} .alert.err a,.alert.ok a{color:inherit} .alert ul{list-style:disc;margin:.4rem 0 0;padding-left:1.2rem} .alert li{margin:.25rem 0} /* ============ FAQ ACCORDION ============ */ details.qa{ border:2px solid var(--line);border-radius:var(--radius);background:rgba(0,12,7,.92); margin:0 0 10px;overflow:hidden; } details.qa summary{ cursor:pointer;list-style:none;padding:14px 18px; font-family:var(--font-poster);font-stretch:condensed;font-weight:700;text-transform:uppercase; font-size:1.05rem;letter-spacing:.04em;color:var(--paper); display:flex;align-items:baseline;gap:.6rem; } details.qa summary::-webkit-details-marker{display:none} details.qa summary .qn{color:var(--accent);font-family:var(--font-mono);font-size:.8rem;flex-shrink:0} details.qa summary::after{ content:"+";margin-left:auto;font-family:var(--font-poster);font-weight:900;font-size:1.4rem;color:var(--accent); } details.qa[open] summary::after{content:"–"} details.qa[open]{border-color:var(--accent)} details.qa .a{padding:0 18px 16px;color:var(--paper-dim);font-size:.96rem} details.qa .a p{margin:.4rem 0} details.qa .a ul,details.qa .a ol{margin:.4rem 0;padding-left:1.2rem;list-style:disc} details.qa .a ol{list-style:decimal} details.qa .a li{margin:.3rem 0} details.qa summary:hover{background:var(--accent-soft)} details.qa summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px} /* ============ ERFOLG ============ */ .success-stamp{ display:inline-block;border:5px solid var(--green);color:var(--green);border-radius:6px; font-family:var(--font-poster);font-stretch:condensed;font-weight:900;text-transform:uppercase; font-size:clamp(1.8rem,5vw,3rem);padding:.2em .6em;transform:rotate(-4deg); background:rgba(124,201,102,.08);box-shadow:8px 8px 0 rgba(0,0,0,.5); } /* ============ FOOTER ============ */ .site-foot{ margin-top:50px;background:var(--footer-bg); border-top:1px solid #1e262d; padding:26px 0 0; } .site-foot .cols{display:grid;gap:18px} @media(min-width:680px){.site-foot .cols{grid-template-columns:1fr 1fr 1fr}} .site-foot h5{ margin:0 0 12px;font-family:var(--font-body);font-weight:700;font-size:.75rem; text-transform:uppercase;letter-spacing:1px;color:#c9d9dc; border-bottom:1px solid #1e262d;padding-bottom:10px; } .site-foot p{font-size:.88rem;color:var(--footer-text)} .site-foot a{font-size:.88rem;color:var(--blue);text-decoration:none} .site-foot a:hover{color:#ffdeaa} .site-foot ul{list-style:none;margin:0;padding:0} .site-foot li{margin:.25rem 0} .foot-bar{ margin-top:22px;border-top:1px solid #1e262d;padding:12px 0 14px; font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; color:var(--footer-text);text-align:center; } /* ============ HILFSKLASSEN ============ */ .center{text-align:center} .mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem} .mb-1{margin-bottom:.6rem}.mb-2{margin-bottom:1.2rem} .narrow{max-width:560px;margin-left:auto;margin-right:auto} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}