/* ==================================================================== anleitung.php — uebernommen aus der Fassung vom 14.10.2026. Geaendert wurden nur Farbwerte, Schriften und Glow-Effekte. Jeder Selektor ist auf .seite-anleitung eingegrenzt, damit das CSS dieser Seite nicht in Kopf und Fuss aus sg_kopf.php hineinwirkt. ==================================================================== */ :root{ --bg-color: #0D0E13; --neon-pink: #FF30D0; --neon-cyan: #01F5FF; --neon-orange: #FF30D0; --text-light: #FFFFFF; }.seite-anleitung{ background-color: var(--bg-color); color: var(--text-light); font-family: var(--is); margin: 0; padding: 20px; line-height: 1.7; }.seite-anleitung .container{ max-width: 800px; margin: 0 auto; padding: 40px 20px; }.seite-anleitung h1{ font-family: var(--sg); text-align:left; color: #fff; letter-spacing:-.02em; }.seite-anleitung .untertitel{ text-align: center; color: #9AA7B2; margin-top: -10px; margin-bottom: 30px; font-size: 0.95rem; }.seite-anleitung .content-box{ background: var(--karte); border: 1px solid var(--magenta); padding: 30px; border-radius: 2px; }.seite-anleitung h2{ color: var(--cyan); border-bottom: 1px solid rgba(1, 245, 255, 0.2); padding-bottom: 10px; margin-top: 30px; font-family: var(--sg); font-size: 1.15rem; letter-spacing: 1px; }.seite-anleitung h2:first-of-type{ margin-top: 0; }.seite-anleitung h2.teil{ color: var(--magenta); border-bottom: 2px solid rgba(255, 48, 208,.4); margin-top: 50px; font-size: 1.35rem; }.seite-anleitung h3{ color: var(--magenta); font-family: var(--sg); font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; margin: 25px 0 10px; } /* Vierte Ebene, bisher nur im Regelwerk der Tauschboerse. Ruhiger als h3, damit die Gliederung dort nicht schreit. */.seite-anleitung h4{ color: #fff; font-family: var(--is); font-size: 0.95rem; font-weight: 700; margin: 22px 0 8px; padding-left: 12px; border-left: 3px solid var(--cyan); }.seite-anleitung p{ margin-bottom: 15px; }.seite-anleitung p.signatur{ text-align: center; color: var(--cyan); font-style: italic; margin-top: 30px; }.seite-anleitung strong{ color: #fff; } /* Die vier Punkte unter "Was macht Sonic Groove?". Cyan wie die Aufzaehlungszeichen daneben und wie die Kapitelueberschriften. */.seite-anleitung .angebot strong{ color: var(--cyan); }.seite-anleitung .angebot li{ margin: 10px 0; }.seite-anleitung em{ color: var(--cyan); font-style: normal; }.seite-anleitung ul, .seite-anleitung ol{ margin: 15px 0; padding-left: 24px; }.seite-anleitung li{ margin: 8px 0; }.seite-anleitung li::marker{ color: var(--cyan); }.seite-anleitung code{ font-family: monospace; background: rgba(1, 245, 255,.1); color: var(--cyan); padding: 2px 6px; border-radius: 2px; font-size: 0.9em; }.seite-anleitung pre{ font-family: monospace; background: #000; color: var(--cyan); border-left: 3px solid var(--cyan); padding: 15px; overflow-x: auto; word-break: break-all; white-space: pre-wrap; font-size: 0.85rem; }.seite-anleitung table{ width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.92rem; }.seite-anleitung th{ font-family: var(--sg); font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--cyan); text-align: left; padding: 10px; border-bottom: 2px solid var(--cyan); }.seite-anleitung td{ padding: 10px; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; } /* --- Suche in der Anleitung --- */.seite-anleitung .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }.seite-anleitung .suchbox{ position: relative; margin-bottom: 22px; }.seite-anleitung .suchbox input{ width: 100%; box-sizing: border-box; padding: 14px 44px 14px 16px; background: rgba(0,0,0,.35); border: 1px solid rgba(1, 245, 255,.35); border-radius: 2px; color: #fff; font-family: var(--is); font-size: .95rem; }.seite-anleitung .suchbox input::placeholder{ color: #6f8791; }.seite-anleitung .suchbox input:focus{ outline: none; border-color: var(--cyan); } /* Die eingebaute Loeschtaste von Safari und Chrome weg - wir haben eine eigene, die auch die Trefferliste zuruecksetzt. */.seite-anleitung .suchbox input::-webkit-search-cancel-button{ -webkit-appearance: none; }.seite-anleitung .suchbox button{ position: absolute; top: 9px; right: 8px; width: 30px; height: 30px; background: none; border: 0; color: #7f97a2; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 2px; }.seite-anleitung .suchbox button:hover{ color: var(--cyan); }.seite-anleitung #anlZahl{ margin: 10px 2px 0; font-size: .82rem; color: #9AA7B2; }.seite-anleitung #anlZahl:empty{ display: none; }.seite-anleitung #anlTreffer{ list-style: none; margin: 10px 0 0; padding: 0; }.seite-anleitung #anlTreffer li{ margin: 0 0 6px; }.seite-anleitung #anlTreffer a{ display: block; text-decoration: none; padding: 10px 13px; border: 1px solid rgba(255,255,255,.10); border-radius: 2px; background: rgba(0,0,0,.22); }.seite-anleitung #anlTreffer a:hover{ border-color: var(--cyan); background: rgba(1, 245, 255,.06); }.seite-anleitung #anlTreffer .kap{ display:block; color: var(--cyan); font-size: .78rem; font-family: var(--sg); letter-spacing: 1px; margin-bottom: 3px; }.seite-anleitung #anlTreffer .aus{ display:block; color: #a9bcc6; font-size: .84rem; line-height: 1.5; }.seite-anleitung #anlTreffer mark, .seite-anleitung .treffer-hervor{ background: rgba(255, 48, 208,.30); color: #fff; border-radius: 2px; padding: 0 2px; } /* Die angesprungene Stelle kurz aufleuchten lassen - sonst sucht man nach dem Sprung erneut, diesmal mit den Augen. */.seite-anleitung .sprungziel{ animation: zielblitz 2.2s ease-out 1; } @keyframes zielblitz { 0%, 55% { background: rgba(255, 48, 208,.18); } 100% { background: transparent; } } @media (prefers-reduced-motion: reduce) {.seite-anleitung .sprungziel{ animation: none } } @media print {.seite-anleitung .suchbox{ display: none } }.seite-anleitung .inhalt{ background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1); border-radius: 2px; padding: 20px 25px; margin-bottom: 35px; }.seite-anleitung .inhalt h2{ margin-top: 0; font-size: 0.85rem; letter-spacing: 2px; }.seite-anleitung .inhalt ol{ list-style: none; counter-reset: iv; padding-left: 0; }.seite-anleitung .inhalt li{ counter-increment: iv; padding: 4px 0; margin: 0; }.seite-anleitung .inhalt li::before{ content: counter(iv); display: inline-block; width: 26px; color: #55606a; font-family: monospace; font-size: 0.8rem; } /* Verweise im Fliesstext. Ohne eigene Regel nimmt der Browser sein Standardviolett - das steht neben Cyan und Magenta wie ein Fremdkoerper und sieht aus wie vergessen. */.seite-anleitung .content-box p a, .seite-anleitung .content-box li a, .seite-anleitung .content-box td a{ color: var(--cyan); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(1, 245, 255, .45); transition: 0.25s; }.seite-anleitung .content-box p a:hover, .seite-anleitung .content-box li a:hover, .seite-anleitung .content-box td a:hover{ color: #fff; border-bottom-color: #fff; } /* Das Inhaltsverzeichnis behaelt seinen ruhigen Ton - dort sind es sechsunddreissig Links auf einem Haufen. */ /* Das Inhaltsverzeichnis ist auch eine Liste in der Content-Box und wird deshalb von der Regel darueber miterfasst. Hier wieder normal stark - sechsunddreissig fette Zeilen unter- einander sind zu viel. Zwei Klassen im Selektor, damit die Regel die obige ueberstimmt. */.seite-anleitung .content-box .inhalt a{ font-weight: 400; border-bottom: 0; text-decoration: none; }.seite-anleitung .inhalt a{ color: var(--text-light); text-decoration: none; }.seite-anleitung .inhalt a:hover{ color: var(--cyan); }.seite-anleitung .inhalt .iv-teil{ margin-top: 12px; }.seite-anleitung .inhalt .iv-teil a{ color: var(--magenta); font-family: var(--sg); font-size: 0.78rem; letter-spacing: 1px; }.seite-anleitung .back-button{ display: inline-block; margin: 30px 0 0; color: var(--cyan); text-decoration: none; font-family: var(--is); font-size: 1rem; transition: 0.25s; }.seite-anleitung .back-button:hover{ color: #fff; } /* --- Klappboxen fuer die beiden Teile --- */.seite-anleitung details.teilbox{ border: 1px solid rgba(255, 48, 208, .55); border-radius: 3px; background: rgba(0, 0, 0, .18); margin: 45px 0 0; transition: border-color .25s; } /* Offen traegt volles Magenta, zu einen gedaempften Rahmen. So sieht man beim Scrollen, in welchem Teil man gerade ist. */.seite-anleitung details.teilbox[open]{ border-color: var(--magenta); }.seite-anleitung details.teilbox > summary{ list-style: none; cursor: pointer; padding: 17px 20px; display: flex; align-items: center; gap: 14px; color: var(--text-light); font-family: var(--sg); font-size: 1.2rem; }.seite-anleitung details.teilbox[open] > summary{ border-bottom: 1px solid rgba(255, 48, 208, .22); } /* Die Teilnummer als Plaettchen. Das Wort TEIL steht unsichtbar davor im Markup - fuer die Suche und fuer Vorleseprogramme. */.seite-anleitung details.teilbox > summary .teilnr{ flex: none; width: 30px; height: 30px; border-radius: 3px; background: var(--cyan); color: var(--karte); font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }.seite-anleitung details.teilbox[open] > summary .teilnr{ background: var(--magenta); color: var(--karte); }.seite-anleitung details.teilbox > summary::-webkit-details-marker{ display: none; }.seite-anleitung details.teilbox > summary::after{ content: '\25BC'; margin-left: auto; font-size: .5em; color: #8E98A8; transition: transform .2s; }.seite-anleitung details.teilbox[open] > summary::after{ transform: rotate(180deg); color: var(--magenta); }.seite-anleitung details.teilbox > summary:hover{ background: rgba(255, 255, 255, .04); }.seite-anleitung details.teilbox[open] > summary:hover{ background: rgba(255, 48, 208, .08); }.seite-anleitung details.teilbox .teilinhalt{ padding: 0 20px 20px; } /* Die erste Ueberschrift in der Box braucht oben keinen Abstand, der kommt schon von der Zusammenfassung darueber. */.seite-anleitung details.teilbox .teilinhalt > h2:first-child{ margin-top: 10px; } @media print {.seite-anleitung{ background:#fff; color:#111 }.seite-anleitung .content-box{border-color:#ccc;background:#fff}.seite-anleitung h1, .seite-anleitung h2, .seite-anleitung h3, .seite-anleitung strong{color:#000;text-shadow:none}.seite-anleitung .back-button, .seite-anleitung .inhalt{display:none} }