/* ================================================================================== PORSCHE 914 SECTOR -- Stil "sector" ---------------------------------------------------------------------------------- Eigenstaendiger Stil nach der Vorlage vom 12.09.2026: dunkler Kopf mit Hero-Foto, Orange als einziger Akzent, hellgrauer Seitengrund, weisse Karten mit dunklen Gruppenkoepfen, rechte Seitenleiste, dunkler Footer. Aufbau: 1. Grundlagen (Farben, Schrift, Container) 2. Kopf: Hero und Navigation 3. Startseite: Raster, Willkommen, Boardliste, Seitenleiste 4. Alle uebrigen Seiten: Tabellen, Formulare, Meldungen, Beitraege 5. Footer 6. Handy 7.-10. Symbole, Board-Symbole, Sprachauswahl, Datenschutzhinweis 11. Bilder in Beitraegen: Galerie und Bildbetrachter 12. Abzeichen statt Sterne 13. Geburtstagskalender und Werbeflaeche der Seitenleiste 14. Schriftbild (Laufweite) ================================================================================== */ /* 1. Grundlagen ================================================================== */ /* Barlow, eine freie Schrift (SIL Open Font License) mit technischem, leicht kantigem Charakter -- passt zum Schriftzug im Kopf. Sie liegt hier im Verzeichnis und wird nicht von Googles Servern geladen: das waere in Deutschland ein Datenschutzproblem, weil dabei die IP des Besuchers an Google geht. Zwei Zeichensaetze je Schnitt: "latin" fuer den Alltag, "latin-ext" laedt der Browser nur nach, wenn ein Text osteuropaeische Buchstaben enthaelt. */ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Wortmarke: "PORSCHE" in der Schrift "Sector Schriftzug", die "914" in "Sector". Beide nur fuer den Kopf. Die Namen sind Aliase fuer diese Seite; Urheber- und Lizenzangaben stehen unveraendert in den Schriftdateien. */ @font-face { font-family: "Sector Schriftzug"; src: url("fonts/sector-schriftzug.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Sector"; src: url("fonts/sector.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } :root { --sc-bg: #eef0f2; --sc-card: #ffffff; --sc-ink: #1e2327; --sc-muted: #6b7278; --sc-line: #dfe2e6; --sc-soft: #f4f5f7; --sc-dark: #23282c; --sc-nav: #2c3237; --sc-group: #3b4147; --sc-orange: #ef6b1e; --sc-orange-2: #d65c12; --sc-radius: 8px; --sc-font: "Barlow", "Segoe UI", "Helvetica Neue", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; } body, #forum_page.sector, #forum_page.sector div, #forum_page.sector td, #forum_page.sector h1, #login-panel td, input, select, button, textarea { font-family: var(--sc-font); font-size: 15px; } html[dir="rtl"] * { text-align: right !important; } /* "hidden" muss auch dann ausblenden, wenn eine Regel dem Element display: flex oder block gibt -- sonst bleiben Hinweisfenster und weggefilterte Sprachen sichtbar. */ [hidden] { display: none !important; } body { margin: 0; overflow-x: hidden; /* fest positionierte Fremdelemente (Cookie-Hinweis, reCAPTCHA-Badge) sollen keinen Querscroll erzeugen */ background: var(--sc-bg); color: var(--sc-ink); text-align: center; -webkit-font-smoothing: antialiased; } #forum_page.sector { display: block; max-width: 1240px; margin: 22px auto; padding: 0; border: 0; border-radius: 12px; /* clip schneidet an den runden Ecken ab wie hidden, macht die Seite aber nicht zum Scrollbehaelter -- sonst haftet nichts (position: sticky) am Browserfenster */ overflow: hidden; overflow: clip; background: var(--sc-card); color: var(--sc-ink); text-align: left; box-shadow: 0 10px 40px rgba(20, 25, 30, .10); } #forum_page.sector a, #login-panel a { color: var(--sc-ink); text-decoration: none; } #forum_page.sector a:hover { text-decoration: underline; } #forum_page.sector :focus-visible, #login-panel :focus-visible { outline: 2px solid var(--sc-orange); outline-offset: 2px; } #forum_page.sector img { border: 0; max-width: 100%; } .clearit { clear: both; } .disclaimer { color: var(--sc-muted); } .show-phone, .show-phone-table-row { display: none; } /* 2. Kopf: Hero und Navigation =================================================== */ #forum_page.sector .sc-hero { position: relative; min-height: 220px; /* Titelbild: der orange-gruene 914 (#702) mit dem gelben dahinter. Das Foto steht rechtsbuendig und nimmt drei Viertel der Breite ein -- so faehrt das Auto rechts neben dem Schriftzug und steht nicht als Orange hinter der orangen 914. Der Verlauf verdeckt die linke Bildkante; dahinter ist der Grund dunkel. */ background: linear-gradient(90deg, rgba(20, 24, 28, 1) 0%, rgba(20, 24, 28, 1) 25%, rgba(20, 24, 28, .9) 32%, rgba(20, 24, 28, .35) 58%, rgba(20, 24, 28, .05) 100%), url('titelbild.jpg') right 50% / 76% auto no-repeat; background-color: var(--sc-dark); } #forum_page.sector .sc-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 220px; padding: 28px 24px 28px 40px; /* rechts wie die Leiste darunter: Konto-Box buendig mit dem Suchfeld */ box-sizing: border-box; } #forum_page.sector .sc-brand { display: inline-flex; flex-direction: column; color: #fff; text-decoration: none; line-height: 1; } #forum_page.sector .sc-brand:hover { text-decoration: none; } #forum_page.sector .sc-brand-porsche { font-family: "Sector Schriftzug", var(--sc-font); font-size: 30px; font-weight: normal; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-left: .06em; } #forum_page.sector .sc-brand-914 { font-family: "Sector", "Sector Schriftzug", var(--sc-font); font-size: 106.5px; /* der Stamm der 4 endet buendig mit dem E von PORSCHE (433,5 px), der Querbalken steht darueber hinaus; die runde 9 haengt 1 px ueber */ font-weight: normal; letter-spacing: .02em; color: var(--sc-orange); margin: -27px 0 0 -2px; /* Sector Schriftzug hat viel Luft im Zeilenkasten: Abstand zur Tinte von PORSCHE wie unten zur Kopfzeile */ } /* Die Schrift setzt die 4 zu weit von der 1 ab: gemessen 24 px zwischen 9 und 1, aber 35,5 px zwischen 1 und 4. Die Differenz wird auf beide Seiten der 1 verteilt -- gleiche Luecken, ohne dass sich Gesamtbreite oder die Kante der 4 verschieben. */ #forum_page.sector .sc-brand-914 .z9 { margin-right: .0545em; } #forum_page.sector .sc-brand-914 .z4 { margin-left: -.0545em; } /* Kopfzeile aus den Einstellungen ("Mittelmotor im Mittelpunkt.") */ #forum_page.sector .sc-brand-line { font-size: 14px; font-weight: 600; letter-spacing: .2875em; /* gemessen so breit wie "PORSCHE" (310 px) */ text-transform: uppercase; color: rgba(255, 255, 255, .78); margin: -10px 0 0 .2em; /* die Ziffern haben unten Luft im Zeilenkasten */ } /* Konto-Box oben rechts im Hero: Name/Anmeldung und Sprachwahl auf dunkler Scheibe, damit sie auch ueber dem hellen Teil des Fotos lesbar bleiben */ #forum_page.sector .sc-account { display: flex; align-items: center; gap: 14px; align-self: flex-start; padding: 8px 12px; background: rgba(20, 24, 28, .66); border: 1px solid var(--sc-orange); border-radius: 8px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Navigation: links die konfigurierte Liste, rechts das Suchfeld */ #forum_page.sector .sc-nav { display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; gap: 0; /* Abstaende ueber Margins, damit die Kanten unten genau passen */ background: var(--sc-nav); color: #fff; padding: 0 24px 0 16px; /* rechts wie der Inhalt darunter, damit die Suche mit der Seitenspalte abschliesst */ border-bottom: 3px solid var(--sc-orange); } /* Die Menuepunkte reichen ueber die volle Hoehe der Leiste (die Leiste ist durch Suchfeld und Sprachknopf hoeher als ein Menuepunkt). Nur so liegt der Strich unter der aktuellen Seite genau auf der orangen Kante der Leiste. */ #forum_page.sector div.PHPFK_navigation { display: flex; align-self: stretch; background: transparent; border: 0; clear: none; } #forum_page.sector div.PHPFK_navigation ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } #forum_page.sector div.PHPFK_navigation ul li { display: flex; float: none; width: auto; } #forum_page.sector div.PHPFK_navigation ul li a { position: relative; display: flex; align-items: center; padding: 14px 14px 12px; color: var(--sc-orange); font-size: 16px; font-weight: 600; text-decoration: none; } /* Der Strich: unten buendig mit der 3 px hohen orangen Unterkante der Leiste und darueber gelegt, 6 px hoch -- ragt also 3 px ueber die Kante in die Leiste */ #forum_page.sector div.PHPFK_navigation ul li a::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -3px; height: 6px; border-radius: 3px 3px 0 0; background: transparent; } /* Menuepunkte orange; beim Ueberfahren und auf der aktuellen Seite weiss */ #forum_page.sector div.PHPFK_navigation ul li a:hover { background: transparent; color: var(--sc-bg); /* dasselbe Grau wie der Strich */ } /* Der Strich bleibt der aktuellen Seite vorbehalten */ #forum_page.sector div.PHPFK_navigation ul li.current a, #forum_page.sector div.PHPFK_navigation ul li a.current { background: transparent; color: var(--sc-bg); } /* Strich im Grau der Seitenflaeche unter der Leiste */ #forum_page.sector div.PHPFK_navigation ul li.current a::after, #forum_page.sector div.PHPFK_navigation ul li a.current::after { background: var(--sc-bg); } /* Unten laufen die Seiten des Strichs nach aussen aus -- wie bei einem Reiter, der aus der grauen Seitenflaeche waechst. Zwei 3 px grosse Hohlkehlen links und rechts neben dem Strich, auf der Hoehe der orangen Kante: grau gefuellt, mit einem viertelkreisfoermigen Ausschnitt oben aussen. Zusammen mit den gerundeten oberen Ecken des Strichs ergibt das eine S-Kurve. */ #forum_page.sector div.PHPFK_navigation ul li.current a::before, #forum_page.sector div.PHPFK_navigation ul li a.current::before { content: ""; position: absolute; z-index: 1; left: -3px; right: -3px; bottom: -3px; height: 3px; background: radial-gradient(circle at 0 0, transparent 2.6px, var(--sc-bg) 3px) left bottom / 3px 3px no-repeat, radial-gradient(circle at 100% 0, transparent 2.6px, var(--sc-bg) 3px) right bottom / 3px 3px no-repeat; pointer-events: none; } /* Bricht die Leiste in zwei Zeilen um, liegt die orange Kante unter der zweiten Zeile -- dann sitzt der Strich unter dem Menuepunkt selbst. Ob die Leiste umbricht, haengt vom Inhalt ab (Mitglieder/Registrieren, Laenge des Sprachnamens); bottom.php prueft es nach dem Aufbau und setzt die Klasse sc-nav-umbruch. */ /* Ohne orange Kante darunter wird der Strich zur Pille: unten wie oben gerundet */ #forum_page.sector .sc-nav-umbruch div.PHPFK_navigation ul li a::after { bottom: 0; border-radius: 3px; } #forum_page.sector .sc-nav-umbruch div.PHPFK_navigation ul li a.current::before { display: none; } @media only screen and (max-width: 640px) { #forum_page.sector div.PHPFK_navigation ul li a::after { bottom: 0; border-radius: 3px; } #forum_page.sector div.PHPFK_navigation ul li a.current::before { display: none; } } /* Der Punkt "Suche" fuehrt nur zur Suchseite -- die Leiste rechts daneben tut dasselbe direkt. Nur ausgeblendet, nicht aus settings_navigation entfernt: die Einstellung gilt fuer alle Stile, und die anderen haben keine Suchleiste. Ueber den Fuss bleibt die Suchseite mit Board- und Nutzerfilter erreichbar. */ #forum_page.sector div.PHPFK_navigation ul li:has(> a[href*="search.php"]) { display: none; } #forum_page.sector .sc-search { display: flex; align-items: center; align-self: center; box-sizing: border-box; flex: 0 0 300px; /* Breite der Seitenspalte: buendig mit dem Knopf darunter */ margin: 8px 0 8px 22px; /* 22px = Rasterluecke zwischen Inhalt und Seitenspalte */ background: #3d444a; border: 1px solid #4a5157; border-radius: 6px; overflow: hidden; } /* Gleiche Hervorhebung wie beim Sprachknopf daneben */ #forum_page.sector .sc-search:hover, #forum_page.sector .sc-search:focus-within { border-color: var(--sc-orange); background: #454d54; } #forum_page.sector .sc-search input[type="text"] { flex: 1 1 auto; width: auto; padding: 8px 12px; border: 0; background: transparent; color: #fff; font-size: 14px; outline: none; } #forum_page.sector .sc-search input::placeholder { color: rgba(255, 255, 255, .55); } #forum_page.sector .sc-search button { display: flex; align-items: center; padding: 8px 10px; border: 0; background: transparent; color: #fff; cursor: pointer; } #forum_page.sector .sc-search button:hover { color: var(--sc-orange); } /* Konto oben rechts: Name, daneben die Aktionen als Liste mit Symbolen -- ohne Trennstriche. Gross- und Kleinschreibung bleiben erhalten: Benutzernamen unterscheiden sie. */ #forum_page.sector .sc-konto { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; font-family: var(--sc-font); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; line-height: 1.2; } #forum_page.sector .sc-konto a { color: #fff; text-decoration: none; } #forum_page.sector .sc-konto a:hover { color: var(--sc-orange); text-decoration: none; } /* Der eigene Name: orange und fett, beim Ueberfahren weiss; fuer Gaeste leer */ #forum_page.sector .sc-konto-name:empty { display: none; } #forum_page.sector .sc-konto-name a { display: inline-flex; align-items: center; gap: 6px; color: var(--sc-orange); font-weight: 700; } #forum_page.sector .sc-konto-name a:hover { color: #fff; } #forum_page.sector .sc-konto-name a::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--ico-person) center / contain no-repeat; mask: var(--ico-person) center / contain no-repeat; } /* Trennung zwischen Name und Aktionen: eine feine Linie statt eines Zeichens */ #forum_page.sector .sc-konto-name:not(:empty) + .konto-menue { margin-left: 12px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .2); } #forum_page.sector .konto-menue { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; margin: 0; padding: 0; list-style: none; } #forum_page.sector .konto-menue li { display: flex; align-items: center; margin: 0; font-size: 0; } #forum_page.sector .konto-menue a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; } #forum_page.sector .konto-menue a::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; background: currentColor; opacity: .8; -webkit-mask: var(--konto-ico, var(--ico-arrow-rt)) center / contain no-repeat; mask: var(--konto-ico, var(--ico-arrow-rt)) center / contain no-repeat; } #forum_page.sector .konto-menue a:hover::before { opacity: 1; } #forum_page.sector .konto-menue a[href*="my_profile.php"] { --konto-ico: var(--ico-tune); } #forum_page.sector .konto-menue a[href*="pm.php"] { --konto-ico: var(--ico-mail); } #forum_page.sector .konto-menue a[href*="ap/"] { --konto-ico: var(--ico-shield-ok); } #forum_page.sector .konto-menue a[href*="action=logout"] { --konto-ico: var(--ico-logout); } #forum_page.sector .konto-menue a[href*="login.php"] { --konto-ico: var(--ico-person); } /* Gaeste: das Forum liefert fuer "Anmelden" ein eigenes Bild-Link davor -- das Symbol kommt hier aus der Maske, das Bild entfaellt. */ #forum_page.sector .konto-menue a:has(> img) { display: none; } /* Ungelesene Nachrichten als Zahl im Kreis */ #forum_page.sector .konto-menue .anzahl { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--sc-orange); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0; } #forum_page.sector .konto-menue a:hover .anzahl { background: #fff; color: var(--sc-orange); } #forum_page.sector div.PHPFK_page { background: var(--sc-bg); padding: 22px 24px 30px; clear: both; } /* 3. Startseite ================================================================== */ #forum_page.sector .sc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; } /* Willkommen: Infotext links, Zitat rechts */ #forum_page.sector .sc-welcome { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-bottom: 18px; padding: 22px 26px; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: var(--sc-radius); } #forum_page.sector .sc-welcome div.info { margin: 0; padding: 0; border: 0; background: none; color: var(--sc-ink); text-align: left; } #forum_page.sector .sc-welcome div.info div { text-align: left !important; font-size: inherit !important; } #forum_page.sector .sc-welcome div.info > div:first-child, #forum_page.sector .sc-welcome div.info b:first-child { font-size: 24px !important; font-weight: 700; line-height: 1.2; letter-spacing: .03em; text-transform: none; } #forum_page.sector .sc-welcome:has(div.info:empty) { grid-template-columns: 1fr; } /* Ueberschrift und Unterzeile als ein Block, gemeinsam neben dem Logo zentriert. Der Zeilenumbruch, den das Forum ans Ende des Infotexts setzt, entfaellt -- er schob die Ueberschrift nach unten. */ #forum_page.sector .sc-welcome-text { min-width: 0; } #forum_page.sector .sc-welcome div.info > br:last-child, #forum_page.sector .sc-welcome div.info > br:last-of-type { display: none; } /* Der Leitsatz: kein Erklaertext, sondern ein Satz mit Haltung -- darum groesser und halbfett, in Grau unter der Ueberschrift. */ #forum_page.sector .sc-welcome-sub { margin: 8px 0 0; max-width: 52ch; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--sc-muted); } #forum_page.sector .sc-welcome-sub .sc-akzent { color: var(--sc-orange); } /* Das alte Markenzeichen (roter 914 ueber dem Chrom-Schriftzug SECTOR) rechts neben dem Begruessungstext */ #forum_page.sector .sc-welcome-logo { width: 238px; height: 90px; justify-self: end; } /* Boardgruppen: Karte mit dunklem Kopf */ #forum_page.sector .sc-main div.content { margin: 0; padding: 0; } #forum_page.sector .sc-main div.content > img { display: none; } /* die blank.gif-Abstandhalter */ #forum_page.sector table { width: 100%; border-spacing: 0; } #forum_page.sector .sc-main div.content > table.main { margin: 0 0 18px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius); overflow: hidden; background: var(--sc-card); } #forum_page.sector .sc-main div.content > table.main > tbody > tr > td { padding: 0; } #forum_page.sector .sc-main td.oben { padding: 13px 20px; background: var(--sc-group); color: #fff; font-size: 18px; font-weight: 700; border: 0; } #forum_page.sector .sc-main td.oben a { color: #fff; } /* Auf-/Zuklappen: statt des alten GIFs ein Pfeil in einer 32px-Klickflaeche, mittig zur Textzeile. Der Kopf wird dafuer zur Flexzeile. */ #forum_page.sector .sc-main td.oben { display: flex; align-items: center; gap: 8px; } #forum_page.sector .sc-main td.oben a img { display: none; } #forum_page.sector .sc-main td.oben > a:first-child { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px 2px -6px 0; border-radius: 6px; flex: 0 0 auto; } #forum_page.sector .sc-main td.oben > a:first-child::before { content: ""; width: 14px; height: 14px; background: #fff; opacity: .75; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16 4 8h16z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16 4 8h16z'/%3E%3C/svg%3E") center / contain no-repeat; } #forum_page.sector .sc-main td.oben > a:first-child:hover { background: rgba(255, 255, 255, .12); text-decoration: none; } #forum_page.sector .sc-main td.oben > a:first-child:hover::before { opacity: 1; } /* Die innere Tabelle einer Gruppe wird zum Block: ein Grid in einer Tabellenzelle wuerde sonst auf Mindestbreite schrumpfen. Die aeussere Karte bleibt Tabelle. */ #forum_page.sector .sc-main table.main table, #forum_page.sector .sc-main table.main table > tbody, #forum_page.sector .sc-main tr.sc-board-row { display: block; width: 100%; } /* eine Boardzeile (Markup aus templates/board_row.html) */ #forum_page.sector td.sc-board-cell { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) 84px 84px 230px; gap: 0 14px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--sc-line); background: var(--sc-card); } #forum_page.sector tr.sc-board-row:first-child td.sc-board-cell { border-top: 0; } #forum_page.sector td.sc-board-cell.g { background: var(--sc-card); } #forum_page.sector tr.sc-board-row:hover td.sc-board-cell { background: #fafbfc; } #forum_page.sector .sc-board-icon { display: block; width: 48px; height: 48px; background-color: var(--sc-group); -webkit-mask: var(--board-ico, var(--ico-bubble)) center / 32px no-repeat; mask: var(--board-ico, var(--ico-bubble)) center / 32px no-repeat; } #forum_page.sector .sc-board-icon.is-new { background-color: var(--sc-orange); } #forum_page.sector .sc-board-main { min-width: 0; } #forum_page.sector .sc-board-title { display: block; font-size: 17px; font-weight: 700; color: var(--sc-ink); line-height: 1.25; } #forum_page.sector .sc-board-desc { margin: 3px 0 0; font-size: 14px; color: var(--sc-muted); line-height: 1.4; } #forum_page.sector .sc-board-main p.sub { margin: 6px 0 0; font-size: 12px; } #forum_page.sector .sc-board-count { text-align: center; line-height: 1.15; } #forum_page.sector .sc-board-count b { display: block; font-size: 18px; font-weight: 700; } #forum_page.sector .sc-board-count span { display: block; font-size: 12px; color: var(--sc-muted); } #forum_page.sector .sc-board-last { min-width: 0; padding-left: 18px; border-left: 1px solid var(--sc-line); font-size: 14px; line-height: 1.35; } #forum_page.sector .sc-board-last a { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #forum_page.sector .sc-board-last a + a { display: none; } /* der doppelte Link (Symbol) */ #forum_page.sector .sc-board-last img { display: none; } #forum_page.sector .sc-board-last p.sub { margin: 3px 0 0; font-size: 13px; color: var(--sc-muted); } #forum_page.sector .sc-board-last p.sub a { display: inline; font-weight: 400; white-space: normal; } /* Leiste unter den Boards (ungelesen / letzte 7 Tage / Statistik) */ #forum_page.sector div.subtable { margin: 4px 0 0; font-size: 14px; color: var(--sc-muted); } #forum_page.sector div.subtable img { vertical-align: middle; } /* Seitenleiste */ #forum_page.sector .sc-cta { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px; padding: 15px 18px; border-radius: var(--sc-radius); background: var(--sc-orange); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; } #forum_page.sector .sc-cta::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25zm17.7-10.2a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75L3 17.25zm17.7-10.2a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") center / contain no-repeat; } /* Der Knopf ist fuer Gaeste "Registrieren" (Stift), fuer Mitglieder "Alle ungelesenen Beitraege" -- dort passt eine Sprechblase mit Punkt */ #forum_page.sector .sc-cta[href*="posts_unread"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm-2 4.9a5 5 0 0 1-5.9-5.9H4a2 2 0 0 0-2 2v18l4-4h12a2 2 0 0 0 2-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm-2 4.9a5 5 0 0 1-5.9-5.9H4a2 2 0 0 0-2 2v18l4-4h12a2 2 0 0 0 2-2z'/%3E%3C/svg%3E"); } #forum_page.sector .sc-cta:hover { background: var(--sc-orange-2); text-decoration: none; } #forum_page.sector .sc-side div.content { margin: 0; padding: 0; } #forum_page.sector .sc-side div.content > table.main { margin: 0 0 18px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius); overflow: hidden; background: var(--sc-card); } #forum_page.sector .sc-side div.content > table.main > tbody > tr > td { padding: 0; } #forum_page.sector .sc-side td.oben { padding: 12px 16px; background: var(--sc-soft); color: var(--sc-ink); font-size: 17px; font-weight: 700; border: 0; border-bottom: 1px solid var(--sc-line); } #forum_page.sector .sc-side td.oben a { color: var(--sc-ink); } #forum_page.sector .sc-side td.oben img { opacity: .5; vertical-align: -1px; } /* Letzte Beitraege: Zeilen aus der Vorlage lastpost_row.html -- Avatar links, Titel und Datum/Autor rechts. Ohne Avatar steht der Anfangsbuchstabe auf der Kachel. */ #forum_page.sector #lastposts_table { display: block; } #forum_page.sector #lastposts_table tbody { display: block; } #forum_page.sector #lastposts_table tr.sc-lp-row { display: block; border-top: 1px solid var(--sc-line); } #forum_page.sector #lastposts_table tr.sc-lp-row:first-child { border-top: 0; } #forum_page.sector td.sc-lp-cell { display: flex !important; align-items: flex-start; gap: 12px; width: auto !important; padding: 11px 16px !important; background: none !important; } #forum_page.sector .sc-lp-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--sc-group); color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; } #forum_page.sector .sc-lp-avatar:hover { text-decoration: none; outline: 2px solid var(--sc-orange); } #forum_page.sector .sc-lp-avatar img { display: block; width: 44px; height: 44px; object-fit: cover; } #forum_page.sector .sc-lp-main { flex: 1 1 auto; min-width: 0; } #forum_page.sector .sc-lp-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.3; } #forum_page.sector .sc-lp-meta { margin: 3px 0 0; font-size: 12.5px; color: var(--sc-muted); } #forum_page.sector .sc-lp-meta a { color: var(--sc-ink); } #forum_page.sector .sc-lp-meta img { vertical-align: middle; } /* Angepinnte Beitraege oben in der Liste: leicht orange hinterlegt. Mitglieder sehen den Pin klein oben rechts im Innenabstand der Zeile -- der Titel behaelt seine volle Breite. Administratoren sehen an der Stelle Pfeile zum Sortieren und "Pin loesen". */ #forum_page.sector #lastposts_table td.sc-lp-cell.sc-lp-angepinnt { position: relative; background: #fdf4ee !important; } #forum_page.sector #lastposts_table tr.sc-lp-row:has(> td.sc-lp-angepinnt) + tr.sc-lp-row:not(:has(> td.sc-lp-angepinnt)) { border-top: 2px solid #f3d3bd; } #forum_page.sector .sc-lp-pin { position: absolute; top: 7px; right: 4px; width: 11px; height: 11px; background: var(--sc-orange); -webkit-mask: var(--ico-pin) center / contain no-repeat; mask: var(--ico-pin) center / contain no-repeat; transform: rotate(35deg); } #forum_page.sector .sc-lp-pin-aktionen { display: flex; flex-direction: column; flex: 0 0 auto; gap: 2px; margin: -3px -6px -3px 0; } #forum_page.sector .sc-lp-pin-aktionen > a, #forum_page.sector .sc-lp-pin-aktionen > span { display: block; width: 22px; height: 18px; border-radius: 4px; background: none; position: relative; } #forum_page.sector .sc-lp-pin-aktionen > a::before, #forum_page.sector .sc-lp-pin-aktionen > span::before { content: ""; position: absolute; inset: 2px 4px; background: var(--sc-muted); -webkit-mask: var(--ico-arrow-dn) center / contain no-repeat; mask: var(--ico-arrow-dn) center / contain no-repeat; } #forum_page.sector .sc-lp-pin-aktionen .sc-lp-pin-hoch::before { transform: rotate(180deg); } #forum_page.sector .sc-lp-pin-aktionen .sc-lp-pin-loesen::before { --ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E"); -webkit-mask-image: var(--ico-x); mask-image: var(--ico-x); } #forum_page.sector .sc-lp-pin-aktionen > a:hover { background: var(--sc-soft); } #forum_page.sector .sc-lp-pin-aktionen > a:hover::before { background: var(--sc-orange); } #forum_page.sector .sc-lp-pin-aktionen > a:focus-visible { outline: 2px solid var(--sc-orange); outline-offset: 1px; } #forum_page.sector .sc-lp-pin-aktionen > span.is-aus::before { opacity: .25; } /* Knopf unter dem Beitrag, wenn schon fuenf angepinnt sind: sichtbar, aber ohne Wirkung */ #forum_page.sector ul.post_buttons span.post_button_aus { display: inline-block; margin: 4px 4px 0 0; padding: 6px 11px; border: 1px dashed var(--sc-line); border-radius: 6px; color: var(--sc-muted); font-size: 13.5px; line-height: 1.3; cursor: not-allowed; } /* Statistik: Zaehler als Zeilen "Bezeichnung ...... Wert", Online darunter */ #forum_page.sector #stat_table { display: flex; flex-direction: column; } #forum_page.sector #stat_table tbody { display: contents; } #forum_page.sector #stat_table tr { display: block; } #forum_page.sector #stat_table td { display: block; padding: 0 !important; width: auto !important; background: none !important; } #forum_page.sector #stat_table td img { display: none; } #forum_page.sector #stat_table tr:nth-child(2) { order: 1; padding: 6px 16px 10px; } #forum_page.sector #stat_table tr:nth-child(1) { order: 2; padding: 12px 16px 14px; border-top: 1px solid var(--sc-line); } #forum_page.sector #stat_table tr:nth-child(3) { order: 3; padding: 12px 16px; border-top: 1px solid var(--sc-line); font-size: 14px; } #forum_page.sector .sc-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--sc-line); font-size: 14.5px; } #forum_page.sector .sc-stat:first-of-type { border-top: 0; } #forum_page.sector .sc-stat-label { color: var(--sc-muted); } #forum_page.sector .sc-stat-value { font-weight: 700; text-align: right; } #forum_page.sector .sc-stat-sep { display: none; } /* Online-Block: eigener Kopf per Pseudo-Element, Mitgliederliste darunter */ #forum_page.sector #stat_table tr:nth-child(1) td:nth-child(2)::before { content: "Online"; display: block; margin: 0 0 8px; font-size: 17px; font-weight: 700; } #forum_page.sector #stat_table tr:nth-child(1) td:nth-child(2) { font-size: 14px; line-height: 1.45; } #forum_page.sector #stat_table tr:nth-child(1) p.sub { margin: 6px 0 0; font-size: 13px; color: var(--sc-muted); } /* 4. Uebrige Seiten ============================================================== */ #forum_page.sector div.content { margin-bottom: 18px; } #forum_page.sector table.main { border: 1px solid var(--sc-line); border-radius: var(--sc-radius); overflow: hidden; background: var(--sc-card); } #forum_page.sector table.main-header { border-bottom-width: 0; border-radius: var(--sc-radius) var(--sc-radius) 0 0; } #forum_page.sector table.main-footer { border-top-width: 0; border-radius: 0 0 var(--sc-radius) var(--sc-radius); } #forum_page.sector td { padding: 9px 12px; text-align: left; color: var(--sc-ink); vertical-align: top; } #forum_page.sector td.oben, #forum_page.sector ul.subnav li.headline { background: var(--sc-group); color: #fff; font-weight: 700; font-size: 15px; border-bottom: 0; } #forum_page.sector td.oben a { color: #fff; } #forum_page.sector td.w { background: var(--sc-card); } #forum_page.sector td.g { background: var(--sc-soft); } #forum_page.sector td.tb { background: var(--sc-card); } #forum_page.sector td.text { line-height: 1.55; } #forum_page.sector .sub, #forum_page.sector .tag { color: var(--sc-muted); margin: 3px 0 0; font-size: 12.5px; } #forum_page.sector .sub a { color: var(--sc-muted); } #forum_page.sector blockquote { margin: 14px 0 14px 0; padding: 10px 14px; border: 1px solid var(--sc-line); background: var(--sc-soft); border-radius: 6px; color: #3d4449; } #forum_page.sector blockquote hr { border: 0; height: 1px; background: var(--sc-line); } /* Lange Adressen und Zeichenketten ohne Leerzeichen (in rund 40 % der Themen) duerfen im Beitrag umbrechen. "anywhere" statt "break-word": nur so zaehlt die Umbruchstelle auch bei der Breitenberechnung der Tabelle mit -- sonst bleibt die Beitragsspalte so breit wie das laengste Wort und laeuft auf dem Handy ueber den Rand. Gewoehnliche Woerter brechen weiter an Leerzeichen, solange die Spalte breit genug ist. */ #forum_page.sector div.PHPFK_page td:has(> a[name]), #forum_page.sector div.PHPFK_page blockquote, #forum_page.sector div.PHPFK_page fieldset { overflow-wrap: anywhere; } #forum_page.sector div.PHPFK_page fieldset { min-width: 0; } #forum_page.sector legend { font-size: 13px; font-weight: 700; color: var(--sc-muted); } #forum_page.sector fieldset { border: 1px solid var(--sc-line); border-radius: 6px; margin: 6px 0; padding: 10px 14px; } /* Formulare */ #forum_page.sector input[type="text"], #forum_page.sector input[type="password"], #forum_page.sector input[type="email"], #forum_page.sector select, #forum_page.sector textarea, #login-panel input[type="text"], #login-panel input[type="password"] { padding: 7px 10px; border: 1px solid #c9ced4; border-radius: 6px; background: #fff; color: var(--sc-ink); font-size: 14px; } #forum_page.sector input[type="text"]:focus, #forum_page.sector input[type="password"]:focus, #forum_page.sector textarea:focus, #forum_page.sector select:focus { border-color: var(--sc-orange); outline: none; box-shadow: 0 0 0 3px rgba(239, 107, 30, .18); } #forum_page.sector input[type="submit"], #forum_page.sector input[type="button"], #forum_page.sector button, #login-panel input[type="submit"] { padding: 8px 16px; border: 0; border-radius: 6px; background: var(--sc-orange); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; } #forum_page.sector input[type="submit"]:hover, #forum_page.sector button:hover, #login-panel input[type="submit"]:hover { background: var(--sc-orange-2); } #forum_page.sector .sc-search button { padding: 8px 10px; border-radius: 0; background: transparent; } #forum_page.sector .sc-search button:hover { background: transparent; } /* Unternavigation, Blaettern, Beitragsknoepfe */ #forum_page.sector ul.subnav { border: 0; padding: 0; margin: 0 0 12px; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } #forum_page.sector ul.subnav li { margin: 0; } #forum_page.sector ul.subnav li a, #forum_page.sector a.link, #forum_page.sector ul.post_buttons a { display: inline-block; padding: 6px 11px; border: 1px solid var(--sc-line); border-radius: 6px; background: var(--sc-card); color: var(--sc-ink); font-size: 13.5px; text-decoration: none; line-height: 1.3; } #forum_page.sector ul.subnav li a:hover, #forum_page.sector a.link:hover, #forum_page.sector ul.post_buttons a:hover { border-color: var(--sc-orange); color: var(--sc-orange); text-decoration: none; } #forum_page.sector ul.subnav li.current a, #forum_page.sector span.link_current { display: inline-block; padding: 6px 11px; border: 1px solid var(--sc-orange); border-radius: 6px; background: var(--sc-orange); color: #fff; font-weight: 700; font-size: 13.5px; line-height: 1.3; } #forum_page.sector ul.post_buttons { border-top: 1px solid var(--sc-line); padding: 8px 0 0; margin: 10px 0 0; list-style: none; } #forum_page.sector ul.post_buttons a { margin: 4px 4px 0 0; } #forum_page.sector div.dropdown ul li { border: 0; } #forum_page.sector div.dropdown ul li:hover { background: var(--sc-soft); border: 0; } #forum_page.sector div.dropdown ul ul { border: 1px solid var(--sc-line); border-radius: 6px; background: var(--sc-card); box-shadow: 0 8px 24px rgba(20, 25, 30, .12); } #forum_page.sector div.dropdown ul ul li:hover { background: var(--sc-soft); } /* Meldungen */ #forum_page.sector div.info, #forum_page.sector div.error, #forum_page.sector #error, #forum_page.sector div.notice, #forum_page.sector #notice, #forum_page.sector div.confirm, #forum_page.sector #confirm { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--sc-line); border-left: 4px solid var(--sc-group); border-radius: 6px; background: var(--sc-card); color: var(--sc-ink); background-image: none; text-align: left; } #forum_page.sector div.error, #forum_page.sector #error { border-left-color: #d13f2c; } #forum_page.sector div.notice, #forum_page.sector #notice { border-left-color: var(--sc-orange); } #forum_page.sector div.confirm, #forum_page.sector #confirm { border-left-color: #2e9e5b; } /* Brotkrumen: eine Leiste -- Haus-Symbol, Pfad mit Winkeln getrennt, aktuelle Seite dunkel; rechts die Vor/Zurueck-Knoepfe zum Nachbarthema, darunter ggf. die Boardbeschreibung. Die Trennzeichen im Markup (">" und geschuetzte Leerzeichen) verschwinden ueber font-size:0, die Winkel kommen aus ::before. */ #forum_page.sector div.subnav { margin: 0 0 16px; } #forum_page.sector div.subnav > table { width: 100%; border-collapse: collapse; } #forum_page.sector div.subnav > table > tbody > tr > td, #forum_page.sector div.subnav > table > tr > td { padding: 0; vertical-align: middle; background: none; } #forum_page.sector div.subnav td:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0; } #forum_page.sector div.subnav td:first-child > a { display: inline-flex; color: var(--sc-muted); } #forum_page.sector div.subnav td:first-child > a:hover { color: var(--sc-orange); } #forum_page.sector div.subnav p.sub { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--sc-muted); } #forum_page.sector div.breadcrumbs { display: inline-flex; flex-wrap: wrap; align-items: center; margin: 0; font-size: 0; color: var(--sc-muted); } #forum_page.sector div.breadcrumbs li { display: inline-flex; align-items: center; font-size: 13.5px; } #forum_page.sector div.breadcrumbs li + li::before { content: ""; display: inline-block; /* das li traegt display:inline als Attribut und wird als Flex-Kind zum Block */ vertical-align: -3px; width: 14px; height: 14px; margin: 0 4px 0 6px; background: var(--sc-muted); opacity: .55; -webkit-mask: var(--ico-chevron) center / contain no-repeat; mask: var(--ico-chevron) center / contain no-repeat; } #forum_page.sector div.breadcrumbs a { color: var(--sc-muted); } #forum_page.sector div.breadcrumbs a:hover { color: var(--sc-orange); text-decoration: none; } #forum_page.sector div.breadcrumbs li:last-child a { color: var(--sc-ink); font-weight: 600; } #forum_page.sector div.breadcrumbs span.tag { font-size: 12px; color: var(--sc-muted); margin-right: 4px; } #forum_page.sector div.subnav td[style*="text-align:right"] { white-space: nowrap; } #forum_page.sector div.subnav td[style*="text-align:right"] a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 4px; border: 1px solid var(--sc-line); border-radius: 6px; background: var(--sc-card); color: var(--sc-muted); } #forum_page.sector div.subnav td[style*="text-align:right"] a:hover { border-color: var(--sc-orange); color: var(--sc-orange); } /* Login-Fenster und Ladehinweis */ #login-panel table { border: 1px solid var(--sc-line); border-radius: 8px; background: var(--sc-card); box-shadow: 0 12px 32px rgba(20, 25, 30, .16); } #login-panel td { padding: 6px; } #loadingbox { font-size: 14px; color: var(--sc-muted); } /* 5. Footer ====================================================================== */ #forum_page.sector .sc-footer { margin: 0; padding: 18px 28px 20px; background: var(--sc-dark); color: rgba(255, 255, 255, .72); font-size: 13.5px; text-align: left; clear: both; } #forum_page.sector .sc-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; } #forum_page.sector .sc-footer a:hover { color: #fff; text-decoration: underline; } #forum_page.sector .sc-footer-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } #forum_page.sector .sc-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; } #forum_page.sector .sc-footer-copy { color: #fff; margin-right: 8px; } #forum_page.sector .sc-footer-tag { padding-left: 16px; border-left: 2px solid var(--sc-orange); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .01em; } #forum_page.sector .sc-footer-legal { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .10); font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .5); text-align: center; } /* 6. Handy ======================================================================= */ @media only screen and (max-width: 960px) { #forum_page.sector { margin: 0; border-radius: 0; } #forum_page.sector .sc-grid { grid-template-columns: 1fr; } #forum_page.sector td.sc-board-cell { grid-template-columns: 48px minmax(0, 1fr) 80px 80px; } #forum_page.sector .sc-board-last { grid-column: 2 / -1; padding: 8px 0 0; border-left: 0; border-top: 1px dashed var(--sc-line); margin-top: 8px; } } @media only screen and (max-width: 640px) { #forum_page.sector .sc-hero, #forum_page.sector .sc-hero-inner { min-height: 160px; } /* Handy: Bild ein Stueck nach rechts und nach oben, damit das Auto ueber der Konto-Box steht statt dahinter. In vw, weil die Bildgroesse an der Breite haengt. */ #forum_page.sector .sc-hero { /* Die untere Bildkante liegt hinter der Konto-Box; ein Verlauf nach unten laesst sie im dunklen Grund auslaufen, statt als harte Kante neben der Box zu stehen. */ background: linear-gradient(to bottom, rgba(20, 24, 28, 0) 30vw, rgba(20, 24, 28, 1) 44vw), /* Die linke Bildkante liegt hier bei 29 % der Breite -- der Verlauf bleibt bis dahin voll deckend und laeuft erst danach aus. */ linear-gradient(90deg, rgba(20, 24, 28, 1) 0%, rgba(20, 24, 28, 1) 34%, rgba(20, 24, 28, .88) 42%, rgba(20, 24, 28, .35) 66%, rgba(20, 24, 28, .05) 100%), url('titelbild.jpg') right -5vw top -6vw / 76% auto no-repeat; background-color: var(--sc-dark); } #forum_page.sector .sc-hero-inner { padding: 20px 22px; } #forum_page.sector .sc-hero-inner { flex-direction: column; align-items: flex-start; gap: 14px; } #forum_page.sector .sc-brand-porsche { font-size: 18px; } #forum_page.sector .sc-brand-914 { font-size: 64px; margin: -15px 0 0 -1px; } #forum_page.sector .sc-brand-line { font-size: 10.5px; letter-spacing: .085em; margin: -6px 0 0 .1em; } #forum_page.sector .sc-account { align-self: stretch; justify-content: space-between; padding: 8px 12px; } /* Kopfzeile auf dem Handy: die Menuepunkte teilen sich die volle Breite, ohne seitliches Schieben -- jeder bekommt gleich viel Luft dazu, der Strich sitzt unter dem Wort. Passen sie nicht in eine Zeile (sehr schmale Geraete, zusaetzliche Punkte aus dem Adminbereich), brechen sie um. Darunter Suche und der Flaggenknopf der Sprachauswahl nebeneinander, beide 40 px hoch. Seitenraender wie der Inhalt. */ #forum_page.sector .sc-nav { position: relative; padding: 0 12px; gap: 0 8px; } #forum_page.sector .sc-nav-primary { order: 1; flex: 1 1 100%; min-width: 0; } #forum_page.sector div.PHPFK_navigation { align-self: auto; } #forum_page.sector div.PHPFK_navigation ul { flex: 1 1 auto; flex-wrap: wrap; justify-content: space-between; margin: 0 -4px; } #forum_page.sector div.PHPFK_navigation ul li { flex: 1 1 auto; justify-content: center; } #forum_page.sector div.PHPFK_navigation ul li a { padding: 13px 4px 11px; font-size: clamp(13px, 4vw, 15px); white-space: nowrap; } #forum_page.sector .sc-search { order: 2; flex: 1 1 0; min-width: 0; width: auto; height: 40px; margin: 10px 0 14px; } /* 16 px: iOS vergroessert die Seite beim Antippen, wenn ein Eingabefeld kleiner ist */ #forum_page.sector .sc-search input[type="text"] { width: 100%; min-width: 0; font-size: 16px; } #forum_page.sector .sc-search button { align-self: stretch; padding: 0 12px; } /* Handy: Name oben, darunter die Aktionen in zwei Spalten; die Trennlinie liegt dann waagerecht zwischen Name und Aktionen statt senkrecht daneben. */ #forum_page.sector .sc-account .sc-konto { width: 100%; font-size: 13px; } #forum_page.sector .sc-konto-name:not(:empty) + .konto-menue { flex: 1 1 100%; margin: 2px 0 0; padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); } #forum_page.sector .konto-menue { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; width: 100%; } #forum_page.sector .konto-menue a { font-size: 13px; } /* Mitglied ohne Administration (drei Aktionen): Name und Aktionen teilen sich ein Raster von zwei mal zwei Feldern -- Name oben links, Mein Profil oben rechts, Postfach unten links, Abmelden unten rechts --, ohne Trennlinie. Mit Administration (vier Aktionen) bleibt es beim Namen oben und dem Raster darunter. */ #forum_page.sector .sc-konto:has(.sc-konto-name:not(:empty)):not(:has(.konto-menue > li:nth-child(4))) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: center; } #forum_page.sector .sc-konto:has(.sc-konto-name:not(:empty)):not(:has(.konto-menue > li:nth-child(4))) .konto-menue { display: contents; } #forum_page.sector .sc-konto:has(.sc-konto-name:not(:empty)):not(:has(.konto-menue > li:nth-child(4))) .sc-konto-name + .konto-menue > li { margin: 0; } #forum_page.sector div.PHPFK_page { padding: 14px 12px 22px; } #forum_page.sector .sc-welcome { grid-template-columns: 1fr; padding: 16px 18px; } #forum_page.sector .sc-welcome div.info > div:first-child { font-size: 22px !important; } #forum_page.sector .sc-welcome-sub { font-size: 17px; margin-top: 6px; } #forum_page.sector .sc-welcome-logo { width: 180px; height: 68px; justify-self: center; } /* Handy: Symbol links, rechts daneben Titel, darunter beide Zaehler in einer Zeile, darunter der letzte Beitrag */ #forum_page.sector td.sc-board-cell { grid-template-columns: 40px auto 1fr; grid-template-areas: "icon main main" "icon c1 c2" "icon last last"; gap: 4px 12px; padding: 14px 14px; align-items: start; } #forum_page.sector .sc-board-icon { grid-area: icon; width: 36px; height: 36px; -webkit-mask-size: 30px; mask-size: 30px; } #forum_page.sector .sc-board-main { grid-area: main; } #forum_page.sector .sc-board-count { grid-area: c1; display: inline-flex; gap: 5px; align-items: baseline; text-align: left; font-size: 13px; margin-top: 2px; } #forum_page.sector .sc-board-count + .sc-board-count { grid-area: c2; } #forum_page.sector .sc-board-count b { display: inline; font-size: 14px; } #forum_page.sector .sc-board-count span { display: inline; } #forum_page.sector .sc-board-last { grid-area: last; } #forum_page.sector .sc-footer-row { flex-direction: column; align-items: flex-start; } } @media only screen and (max-width: 480px) { .hidden-phone { display: none; } .show-phone { display: inline; } .show-phone-table-row { display: table-row; } .breadcrumbs a, .phone-large-line-height { line-height: 2em; } } @media (prefers-reduced-motion: reduce) { #forum_page.sector * { transition: none !important; animation: none !important; } } /* Der Doppelpunkt der Statistik-Bezeichnung ist nur fuer die alten Stile gedacht */ #forum_page.sector .sc-stat-colon { display: none; } /* Nachtraege ---------------------------------------------------------------- */ /* Seitenzahlen und Sprungmarken kompakt, sonst werden Themenzeilen zu hoch */ #forum_page.sector a.link, #forum_page.sector span.link_current { padding: 3px 8px; font-size: 12.5px; line-height: 1.2; } /* In der Seitenleiste keine Rangsymbole hinter Namen -- das ist dort Rauschen */ #forum_page.sector .sc-side p.sub img { display: none; } /* Geburtstagsliste: klein und gedaempft, sie ist Beiwerk */ #forum_page.sector #stat_table tr:nth-child(3) { font-size: 12.5px; line-height: 1.5; color: var(--sc-muted); } #forum_page.sector #stat_table tr:nth-child(3) b { color: var(--sc-ink); display: block; margin-bottom: 4px; } /* Werbeblock und Uebersetzer unterhalb des Rasters: zentriert, mit Abstand */ #forum_page.sector div.PHPFK_page > div[style*="margin-bottom"] { margin-top: 18px; } #forum_page.sector div.PHPFK_page > div[style*="margin-bottom"] img { border-radius: var(--sc-radius); } /* Seitenleiste: Auf-/Zuklappen wie bei den Gruppen als Pfeil */ #forum_page.sector .sc-side td.oben { display: flex; align-items: center; gap: 6px; } #forum_page.sector .sc-side td.oben a img { display: none; } #forum_page.sector .sc-side td.oben > a:first-child { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -6px 0 -6px -2px; border-radius: 6px; flex: 0 0 auto; } #forum_page.sector .sc-side td.oben > a:first-child::before { content: ""; width: 12px; height: 12px; background: var(--sc-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16 4 8h16z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16 4 8h16z'/%3E%3C/svg%3E") center / contain no-repeat; } #forum_page.sector .sc-side td.oben > a:first-child:hover { background: rgba(0, 0, 0, .06); text-decoration: none; } #forum_page.sector .sc-side td.oben img[align="right"] { display: inline; margin-left: auto; opacity: .5; } /* Sponsorbanner unter dem Raster: volle Breite ueber beide Spalten */ #forum_page.sector div.PHPFK_page img[alt="banner"], #forum_page.sector div.PHPFK_page a[href*="typ4shop"] img { display: block; width: 100% !important; height: auto !important; max-width: 100%; margin: 18px 0 0; border: 0 !important; border-radius: var(--sc-radius); } #forum_page.sector div.PHPFK_page > div[style*="margin-bottom"] { margin-top: 0; } /* Mitgliederkarte (Plugin user_map): liegt als eigene table.main direkt im Raster, nicht in div.content -- gleiche Karte, und die innere Tabelle vollstaendig zum Block, sonst schrumpft die Karte auf eine anonyme Tabellenzelle zusammen. */ #forum_page.sector .sc-main > table.main { margin: 0 0 18px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius); overflow: hidden; background: var(--sc-card); } #forum_page.sector .sc-main > table.main > tbody > tr > td { padding: 0; } #forum_page.sector #user_map_table, #forum_page.sector #user_map_table > tbody, #forum_page.sector #user_map_table > tbody > tr, #forum_page.sector #user_map_table > tbody > tr > td { display: block; width: 100%; box-sizing: border-box; } #forum_page.sector #user_map_table > tbody > tr > td { padding: 12px; } #forum_page.sector #map { border-radius: 6px; overflow: hidden; } /* Die Schnellzugriffe unter den Boards ("Alle ungelesenen Beitraege", "Beitraege der letzten 7 Tage") bekommen eine eigene Karte mit Knoepfen statt loser Zeile */ #forum_page.sector .sc-main div.subtable { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 16px; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: var(--sc-radius); font-size: 14px; color: var(--sc-muted); } #forum_page.sector .sc-main div.subtable a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--sc-line); border-radius: 6px; background: var(--sc-soft); color: var(--sc-ink); font-weight: 600; text-decoration: none; } #forum_page.sector .sc-main div.subtable a:hover { border-color: var(--sc-orange); color: var(--sc-orange); } #forum_page.sector .sc-main div.subtable > img { display: none; } /* die kleinen Symbole vor den Knoepfen sagen nichts, was der Text nicht sagt */ #forum_page.sector .sc-main div.subtable a + a { margin-left: 0; } /* Das Forum setzt vor jeden Knopf einen eigenen Link mit einem alten Rasterbild und auf dem Handy zwei Zeilenumbrueche dazwischen. Beides entfaellt: das Symbol steht im Knopf selbst, der Abstand kommt aus dem Raster. font-size: 0 schluckt das geschuetzte Leerzeichen zwischen den Knoepfen. */ #forum_page.sector .sc-main div.subtable { font-size: 0; } #forum_page.sector .sc-main div.subtable a:has(> img), #forum_page.sector .sc-main div.subtable br { display: none; } #forum_page.sector .sc-main div.subtable a { font-size: 14px; } #forum_page.sector .sc-main div.subtable a::before, #forum_page.sector a.sc-karte-gross::before { content: ""; width: 16px; height: 16px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--knopf-ico) center / contain no-repeat; mask: var(--knopf-ico) center / contain no-repeat; } #forum_page.sector .sc-main div.subtable a[href*="posts_unread"] { --knopf-ico: var(--ico-ungelesen); } #forum_page.sector .sc-main div.subtable a[href*="posts_last7"] { --knopf-ico: var(--ico-verlauf); } /* "Karte vergroessern" unter der Mitgliederkarte: Knopf mit Lupe statt Textlink */ #forum_page.sector #user_map_table td.g > div[style*="text-align"] { margin-top: 12px !important; } #forum_page.sector #user_map_table td.g > div[style*="text-align"] > a[href*="map.php"], #forum_page.sector a.sc-karte-gross { --knopf-ico: var(--ico-zoom-in); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--sc-line); border-radius: 6px; background: var(--sc-soft); color: var(--sc-ink); font-size: 14px; font-weight: 600; text-decoration: none; } #forum_page.sector #user_map_table td.g > div[style*="text-align"] > a[href*="map.php"]::before { content: ""; width: 16px; height: 16px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--knopf-ico) center / contain no-repeat; mask: var(--knopf-ico) center / contain no-repeat; } #forum_page.sector #user_map_table td.g > div[style*="text-align"] > a[href*="map.php"]:hover { border-color: var(--sc-orange); color: var(--sc-orange); text-decoration: none; } @media only screen and (max-width: 640px) { /* Handy: die Knoepfe untereinander, jeweils ueber die volle Breite */ #forum_page.sector .sc-main div.subtable { flex-direction: column; align-items: stretch; gap: 8px; } #forum_page.sector .sc-main div.subtable a { justify-content: flex-start; } } /* Fuer Gaeste ist die Zeile leer -- dann auch keine leere Karte zeigen */ #forum_page.sector .sc-main div.subtable:not(:has(a)) { display: none; } /* 7. Symbole ===================================================================== */ /* Die alten Raster-Symbole des Forums (16-px-PNGs aus den 2000ern) werden nicht ausgetauscht, sondern ueberdeckt: Das bleibt im Markup, sein Bildinhalt wird per object-position aus dem Kasten geschoben, und der Kasten bekommt eine Vektor-Maske in der Textfarbe (currentColor -- folgt also Link- und Hover-Farbe). So bleibt der PHP-Code unangetastet, und andere Stile sehen weiterhin ihre PNGs. */ :root { --ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6-1.4-1.4L12.2 12 7.6 7.4z'/%3E%3C/svg%3E"); --ico-chevron-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6 1.4-1.4L11.8 12l4.6-4.6z'/%3E%3C/svg%3E"); --ico-chevrons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l6 6-6 6-1.4-1.4L9.2 12 4.6 7.4zm7 0 6 6-6 6-1.4-1.4 4.6-4.6-4.6-4.6z'/%3E%3C/svg%3E"); --ico-chevrons-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6l-6 6 6 6 1.4-1.4L14.8 12l4.6-4.6zm-7 0-6 6 6 6 1.4-1.4L7.8 12l4.6-4.6z'/%3E%3C/svg%3E"); --ico-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h5v-6h4v6h5v-8h3z'/%3E%3C/svg%3E"); --ico-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E"); --ico-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6v-5c0-3.1-1.6-5.6-4.5-6.3V4a1.5 1.5 0 0 0-3 0v.7C7.6 5.4 6 7.9 6 11v5l-2 2v1h16v-1z'/%3E%3C/svg%3E"); --ico-bell-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm8-3.3L3.3 2 2 3.3l2.5 2.5C4.2 6.7 4 7.8 4 9v7l-2 2v1h14.7l2 2zM18 15.3V11c0-3.1-1.6-5.6-4.5-6.3V4a1.5 1.5 0 0 0-3 0v.7c-.6.1-1.1.4-1.6.7z'/%3E%3C/svg%3E"); --ico-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.8 9.94l-3.75-3.75zM20.7 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z'/%3E%3C/svg%3E"); --ico-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z'/%3E%3C/svg%3E"); --ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6A5 5 0 0 0 7 6v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zM9 6a3 3 0 0 1 6 0v2H9z'/%3E%3C/svg%3E"); --ico-unlock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6a5 5 0 0 0-9.8-1.4l1.9.5A3 3 0 0 1 15 6v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2z'/%3E%3C/svg%3E"); --ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 12V4h1V2H7v2h1v8l-2 2v2h5v6h2v-6h5v-2z'/%3E%3C/svg%3E"); --ico-cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.64 7.64A4 4 0 1 0 6 10c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36A4 4 0 1 0 10 18c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1zM6 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6-7.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zM19 3l-6 6 2 2 7-7V3z'/%3E%3C/svg%3E"); --ico-paste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 2h-4.2A3 3 0 0 0 9.2 2H5a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 18H5V4h2v3h10V4h2z'/%3E%3C/svg%3E"); --ico-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9h4V6h3l-5-5-5 5h3zm-1 1H6V7l-5 5 5 5v-3h3zm14 2-5-5v3h-3v4h3v3zm-9 3h-4v3H7l5 5 5-5h-3z'/%3E%3C/svg%3E"); --ico-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.6 3.8 10.7 9 12 5.2-1.3 9-6.4 9-12V5z'/%3E%3C/svg%3E"); --ico-shield-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.6 3.8 10.7 9 12 5.2-1.3 9-6.4 9-12V5zm-2 16-4-4 1.4-1.4L10 14.2l6.6-6.6L18 9z'/%3E%3C/svg%3E"); --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8l5 5 1.5-1.5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E"); --ico-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 11.6l-9-9A2 2 0 0 0 11 2H4a2 2 0 0 0-2 2v7c0 .6.2 1.1.6 1.4l9 9a2 2 0 0 0 2.8 0l7-7a2 2 0 0 0 0-2.8zM5.5 7A1.5 1.5 0 1 1 7 5.5 1.5 1.5 0 0 1 5.5 7z'/%3E%3C/svg%3E"); --ico-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8v-2H4z'/%3E%3C/svg%3E"); --ico-tune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E"); --ico-zoom-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z'/%3E%3C/svg%3E"); --ico-ungelesen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm-2 4.9a5 5 0 0 1-5.9-5.9H4a2 2 0 0 0-2 2v18l4-4h12a2 2 0 0 0 2-2z'/%3E%3C/svg%3E"); --ico-verlauf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6a7 7 0 1 1 2.05 4.95l-1.42 1.42A9 9 0 1 0 13 3zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z'/%3E%3C/svg%3E"); --ico-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 6h-3a15.6 15.6 0 0 0-1.4-3.6A8 8 0 0 1 18.9 8zM12 4a14 14 0 0 1 1.9 4h-3.8A14 14 0 0 1 12 4zM4.3 14a8.2 8.2 0 0 1 0-4h3.4a16.5 16.5 0 0 0 0 4zm.8 2h3a15.6 15.6 0 0 0 1.4 3.6A8 8 0 0 1 5.1 16zm3-8h-3a8 8 0 0 1 4.3-3.6A15.6 15.6 0 0 0 8.1 8zM12 20a14 14 0 0 1-1.9-4h3.8A14 14 0 0 1 12 20zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.7 14.7 0 0 1 0 4zm.3 5.6A15.6 15.6 0 0 0 15.9 16h3a8 8 0 0 1-4.3 3.6zM16.4 14a16.5 16.5 0 0 0 0-4h3.4a8.2 8.2 0 0 1 0 4z'/%3E%3C/svg%3E"); --ico-arrow-dn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v12l5.5-5.5 1.4 1.4L12 19.8 4.1 11.9l1.4-1.4L11 16z'/%3E%3C/svg%3E"); --ico-arrow-rt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11v2h12l-5.5 5.5 1.4 1.4L19.8 12l-7.9-7.9-1.4 1.4L16 11z'/%3E%3C/svg%3E"); --ico-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm-1 7V3.5L18.5 9z'/%3E%3C/svg%3E"); --ico-clip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 6v11.5a4 4 0 0 1-8 0V5a2.5 2.5 0 0 1 5 0v10.5a1 1 0 0 1-2 0V6H10v9.5a2.5 2.5 0 0 0 5 0V5a4 4 0 0 0-8 0v12.5a5.5 5.5 0 0 0 11 0V6z'/%3E%3C/svg%3E"); --ico-poll: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9h3v11H5zm5.5-5h3v16h-3zM16 13h3v7h-3z'/%3E%3C/svg%3E"); --ico-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.3 6.2 20.6l1.5-6.5L2.6 9.7l6.6-.6L12 3l2.8 6.1 6.6.6-5.1 4.4 1.5 6.5z'/%3E%3C/svg%3E"); --ico-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 2c-2.3 0-7 1.2-7 3.5V19h14v-2.5C15 14.2 10.3 13 8 13zm8 0h-.9c1.2.9 1.9 2 1.9 3.5V19h6v-2.5c0-2.3-4.7-3.5-7-3.5z'/%3E%3C/svg%3E"); --ico-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-2.7 0-8 1.3-8 4v2h16v-2c0-2.7-5.3-4-8-4z'/%3E%3C/svg%3E"); --ico-stat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h4v8H3zm7-6h4v14h-4zm7-4h4v18h-4z'/%3E%3C/svg%3E"); --ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E"); --ico-bubble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4v-4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); } /* Grundmechanik fuer alle ersetzten Bilder */ #forum_page.sector img[src$="/images/homeS.png"], #forum_page.sector img[src$="/images/btn_answer.png"], #forum_page.sector img[src$="/images/btn_notification_off.png"], #forum_page.sector img[src$="/images/btn_notification_on.png"], #forum_page.sector img[src$="/images/btn_edit.png"], #forum_page.sector img[src$="/images/btn_delete.png"], #forum_page.sector img[src$="/images/btn_lock_on.png"], #forum_page.sector img[src$="/images/btn_lock_off.png"], #forum_page.sector img[src$="/images/btn_locked.png"], #forum_page.sector img[src$="/images/btn_unlocked.png"], #forum_page.sector img[src$="/images/btn_pin_on.png"], #forum_page.sector img[src$="/images/btn_pin_off.png"], #forum_page.sector img[src$="/images/btn_cut.png"], #forum_page.sector img[src$="/images/btn_paste.png"], #forum_page.sector img[src$="/images/btn_move.png"], #forum_page.sector img[src$="/images/btn_moderation.png"], #forum_page.sector img[src$="/images/btn_search.png"], #forum_page.sector img[src$="/images/btn_tag.png"], #forum_page.sector img[src$="/images/btn_ip.png"], #forum_page.sector img[src$="/images/back.png"], #forum_page.sector img[src$="/images/forward.png"], #forum_page.sector img[src$="/images/back2.png"], #forum_page.sector img[src$="/images/forward2.png"], #forum_page.sector img[src$="/images/arrow_down.png"], #forum_page.sector img[src$="/images/gotoS.png"], #forum_page.sector img[src$="/images/downloadS.png"], #forum_page.sector img[src$="/images/downloadM.png"], #forum_page.sector img[src$="/images/pollS.png"], #forum_page.sector img[src$="/images/thema.png"], #forum_page.sector img[src$="/images/thema_new.png"], #forum_page.sector img[src$="/images/thema_lock.png"], #forum_page.sector img[src$="/images/thema_pin.png"], #forum_page.sector img[src$="/images/thema_popular.png"], #forum_page.sector img[src$="/images/thema_tag.png"], #forum_page.sector img[src$="/images/boardS.png"], #forum_page.sector img[src$="/images/board.png"], #forum_page.sector img[src$="/images/board_new.png"], #forum_page.sector img[src$="/images/usersS.png"], #forum_page.sector img[src$="/images/usersM.png"], #forum_page.sector img[src$="/images/loginS.png"], #forum_page.sector img[src$="/images/statS.png"], #forum_page.sector img[src$="/images/statM.png"], #forum_page.sector img[src$="/images/Mail.png"], #forum_page.sector img[src$="/images/admin.gif"], #forum_page.sector img[src$="/images/mod.gif"], #forum_page.sector img[src$="/images/1.png"], #forum_page.sector img[src$="/images/2.png"], #forum_page.sector img[src$="/images/3.png"], #forum_page.sector img[src$="/images/4.png"], #forum_page.sector img[src$="/images/5.png"] { width: 16px; height: 16px; object-fit: none; object-position: -999px -999px; vertical-align: -3px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } #forum_page.sector img[src$="/images/homeS.png"] { -webkit-mask-image: var(--ico-home); mask-image: var(--ico-home); } #forum_page.sector img[src$="/images/btn_answer.png"] { -webkit-mask-image: var(--ico-reply); mask-image: var(--ico-reply); } #forum_page.sector img[src$="/images/btn_notification_off.png"] { -webkit-mask-image: var(--ico-bell); mask-image: var(--ico-bell); } #forum_page.sector img[src$="/images/btn_notification_on.png"] { -webkit-mask-image: var(--ico-bell-off); mask-image: var(--ico-bell-off); } #forum_page.sector img[src$="/images/btn_edit.png"] { -webkit-mask-image: var(--ico-pencil); mask-image: var(--ico-pencil); } #forum_page.sector img[src$="/images/btn_delete.png"] { -webkit-mask-image: var(--ico-trash); mask-image: var(--ico-trash); } #forum_page.sector img[src$="/images/btn_lock_on.png"], #forum_page.sector img[src$="/images/btn_locked.png"], #forum_page.sector img[src$="/images/thema_lock.png"] { -webkit-mask-image: var(--ico-lock); mask-image: var(--ico-lock); } #forum_page.sector img[src$="/images/btn_lock_off.png"], #forum_page.sector img[src$="/images/btn_unlocked.png"] { -webkit-mask-image: var(--ico-unlock); mask-image: var(--ico-unlock); } #forum_page.sector img[src$="/images/btn_pin_on.png"], #forum_page.sector img[src$="/images/btn_pin_off.png"], #forum_page.sector img[src$="/images/thema_pin.png"] { -webkit-mask-image: var(--ico-pin); mask-image: var(--ico-pin); } #forum_page.sector img[src$="/images/btn_cut.png"] { -webkit-mask-image: var(--ico-cut); mask-image: var(--ico-cut); } #forum_page.sector img[src$="/images/btn_paste.png"] { -webkit-mask-image: var(--ico-paste); mask-image: var(--ico-paste); } #forum_page.sector img[src$="/images/btn_move.png"] { -webkit-mask-image: var(--ico-move); mask-image: var(--ico-move); } #forum_page.sector img[src$="/images/btn_moderation.png"] { -webkit-mask-image: var(--ico-shield); mask-image: var(--ico-shield); } #forum_page.sector img[src$="/images/btn_search.png"] { -webkit-mask-image: var(--ico-search); mask-image: var(--ico-search); } #forum_page.sector img[src$="/images/btn_tag.png"], #forum_page.sector img[src$="/images/thema_tag.png"] { -webkit-mask-image: var(--ico-tag); mask-image: var(--ico-tag); } #forum_page.sector img[src$="/images/btn_ip.png"] { -webkit-mask-image: var(--ico-globe); mask-image: var(--ico-globe); } #forum_page.sector img[src$="/images/back.png"] { -webkit-mask-image: var(--ico-chevron-l); mask-image: var(--ico-chevron-l); } #forum_page.sector img[src$="/images/forward.png"] { -webkit-mask-image: var(--ico-chevron); mask-image: var(--ico-chevron); } #forum_page.sector img[src$="/images/back2.png"] { -webkit-mask-image: var(--ico-chevrons-l);mask-image: var(--ico-chevrons-l); } #forum_page.sector img[src$="/images/forward2.png"] { -webkit-mask-image: var(--ico-chevrons); mask-image: var(--ico-chevrons); } #forum_page.sector img[src$="/images/arrow_down.png"] { -webkit-mask-image: var(--ico-arrow-dn); mask-image: var(--ico-arrow-dn); } #forum_page.sector img[src$="/images/gotoS.png"] { -webkit-mask-image: var(--ico-arrow-rt); mask-image: var(--ico-arrow-rt); width: 14px; height: 14px; vertical-align: -2px; opacity: .6; } #forum_page.sector img[src$="/images/downloadS.png"], #forum_page.sector img[src$="/images/downloadM.png"] { -webkit-mask-image: var(--ico-clip); mask-image: var(--ico-clip); opacity: .7; } #forum_page.sector img[src$="/images/pollS.png"] { -webkit-mask-image: var(--ico-poll); mask-image: var(--ico-poll); opacity: .7; } #forum_page.sector img[src$="/images/boardS.png"], #forum_page.sector img[src$="/images/board.png"], #forum_page.sector img[src$="/images/board_new.png"] { -webkit-mask-image: var(--ico-bubble); mask-image: var(--ico-bubble); } #forum_page.sector img[src$="/images/board_new.png"] { background-color: var(--sc-orange); } #forum_page.sector img[src$="/images/usersS.png"], #forum_page.sector img[src$="/images/usersM.png"] { -webkit-mask-image: var(--ico-users); mask-image: var(--ico-users); } #forum_page.sector img[src$="/images/loginS.png"] { -webkit-mask-image: var(--ico-person); mask-image: var(--ico-person); } #forum_page.sector img[src$="/images/statS.png"], #forum_page.sector img[src$="/images/statM.png"] { -webkit-mask-image: var(--ico-stat); mask-image: var(--ico-stat); } #forum_page.sector img[src$="/images/Mail.png"] { -webkit-mask-image: var(--ico-mail); mask-image: var(--ico-mail); } /* Themenliste: Dokument-Symbol, ungelesen und beliebt in Orange */ #forum_page.sector img[src$="/images/thema.png"], #forum_page.sector img[src$="/images/thema_new.png"], #forum_page.sector img[src$="/images/thema_popular.png"] { width: 22px; height: 22px; -webkit-mask-image: var(--ico-doc); mask-image: var(--ico-doc); background-color: #aeb4ba; vertical-align: middle; } #forum_page.sector img[src$="/images/thema_new.png"] { background-color: var(--sc-orange); } #forum_page.sector img[src$="/images/thema_popular.png"] { -webkit-mask-image: var(--ico-star); mask-image: var(--ico-star); background-color: var(--sc-orange); } #forum_page.sector img[src$="/images/thema_lock.png"], #forum_page.sector img[src$="/images/thema_pin.png"] { width: 20px; height: 20px; background-color: #aeb4ba; vertical-align: middle; } /* Rang: ein bis fuenf Sterne in Orange, Admin und Moderator als Schild */ #forum_page.sector img[src$="/images/1.png"], #forum_page.sector img[src$="/images/2.png"], #forum_page.sector img[src$="/images/3.png"], #forum_page.sector img[src$="/images/4.png"], #forum_page.sector img[src$="/images/5.png"] { height: 11px; vertical-align: -1px; background-color: var(--sc-orange); -webkit-mask-image: var(--ico-star); mask-image: var(--ico-star); -webkit-mask-size: 11px 11px; mask-size: 11px 11px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: left center; mask-position: left center; } #forum_page.sector img[src$="/images/1.png"] { width: 11px; } #forum_page.sector img[src$="/images/2.png"] { width: 22px; } #forum_page.sector img[src$="/images/3.png"] { width: 33px; } #forum_page.sector img[src$="/images/4.png"] { width: 44px; } #forum_page.sector img[src$="/images/5.png"] { width: 55px; } #forum_page.sector img[src$="/images/admin.gif"] { width: 13px; height: 13px; vertical-align: -2px; background-color: var(--sc-ink); -webkit-mask-image: var(--ico-shield-ok); mask-image: var(--ico-shield-ok); } #forum_page.sector img[src$="/images/mod.gif"] { width: 13px; height: 13px; vertical-align: -2px; background-color: var(--sc-muted); -webkit-mask-image: var(--ico-shield); mask-image: var(--ico-shield); } /* Auf dunklem Grund (Gruppen- und Titelzeilen) hell */ #forum_page.sector td.oben img[src$="/images/admin.gif"], #forum_page.sector td.oben img[src$="/images/mod.gif"] { background-color: #fff; } /* Bewertung: Sterne als Maske statt GIF-Sprite. Thread-Titel (20 px, zum Abstimmen) auf dunklem Grund, Themenliste (14 px, nur Anzeige) auf hellem. */ #forum_page.sector .rating, #forum_page.sector .rating li, #forum_page.sector .rating li a, #forum_page.sector .rating-view, #forum_page.sector .rating-view li { background-image: none !important; } #forum_page.sector .rating { position: relative; width: 100px; height: 18px; margin: 0; padding: 0; list-style: none; } #forum_page.sector .rating::before, #forum_page.sector .rating-view::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, .3); -webkit-mask: var(--ico-star) left center / 20px 18px repeat-x; mask: var(--ico-star) left center / 20px 18px repeat-x; } #forum_page.sector .rating li, #forum_page.sector .rating li a { height: 18px; } #forum_page.sector .rating li.current-rating, #forum_page.sector .rating li a:hover { background-color: var(--sc-orange); -webkit-mask: var(--ico-star) left center / 20px 18px repeat-x; mask: var(--ico-star) left center / 20px 18px repeat-x; } #forum_page.sector .rating-view { position: relative; width: 70px; height: 14px; margin: 0; padding: 0; list-style: none; } #forum_page.sector .rating-view::before { background-color: #c9ced4; -webkit-mask-size: 14px 14px; mask-size: 14px 14px; } #forum_page.sector .rating-view li { position: absolute; left: 0; top: 0; height: 14px; } #forum_page.sector .rating-view li.current-rating-view { background-color: var(--sc-orange); -webkit-mask: var(--ico-star) left center / 14px 14px repeat-x; mask: var(--ico-star) left center / 14px 14px repeat-x; } /* Themenliste auf dem Handy: Die Seitenzahlen unter dem Titel stehen in und hielten die Titelspalte auf ihrer ganzen Breite fest; zusammen mit der Sternespalte lief die Liste rechts ueber den Rand. Jetzt duerfen die Seitenzahlen umbrechen, lange Woerter im Titel ebenso, und die Sternespalte kommt mit wenig Innenabstand aus. */ @media only screen and (max-width: 640px) { #forum_page.sector div.PHPFK_page td nobr { white-space: normal; } #forum_page.sector div.PHPFK_page table.main td:has(> p.sub) > nobr { display: block; margin-top: 6px; } #forum_page.sector div.PHPFK_page table.main td:has(> p.sub) { overflow-wrap: anywhere; } #forum_page.sector div.PHPFK_page table.main td:has(> ul.rating-view) { width: auto !important; padding-left: 4px; padding-right: 10px; } } /* Aktionszeile ueber den Beitraegen (Antwort schreiben, Benachrichtigung, teilen) */ #forum_page.sector div.dropdown > ul > li > a img { margin-right: 2px; } /* 8. Board-Symbole ============================================================== */ /* Jedes Board der Startseite bekommt ein eigenes Symbol; die Zuordnung laeuft ueber die Board-ID, die die Zeilenvorlage als data-board mitgibt. Boards ohne Eintrag (neue Boards) zeigen die Sprechblase. Die Symbole sind Material-Icons (Apache 2.0) als Maske -- die Farbe kommt aus der Basisregel (dunkel, orange bei neuen Beitraegen). */ /* SECTOR live! */ #forum_page.sector .sc-board-icon[data-board="9"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E"); } /* News */ #forum_page.sector .sc-board-icon[data-board="109"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3H3c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5a2 2 0 0 0-2-2zm0 14H3V5h18v12zm-5-6-7 4V7z'/%3E%3C/svg%3E"); } /* TV */ #forum_page.sector .sc-board-icon[data-board="108"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z'/%3E%3C/svg%3E"); } /* klient (Magazin) */ /* AKTUELL */ #forum_page.sector .sc-board-icon[data-board="4"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"); } /* Neuigkeiten (vorstellen) */ #forum_page.sector .sc-board-icon[data-board="6"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 11v2h4v-2h-4zm-2 6.61c.96.71 2.21 1.65 3.2 2.39.4-.53.8-1.07 1.2-1.6-.99-.74-2.24-1.68-3.2-2.4-.4.54-.8 1.08-1.2 1.61zM20.4 5.6c-.4-.53-.8-1.07-1.2-1.6-.99.74-2.24 1.68-3.2 2.4.4.53.8 1.07 1.2 1.6.96-.72 2.21-1.65 3.2-2.4zM4 9c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h1v4h2v-4h1l5 3V6L8 9H4zm11.5 3c0-1.33-.58-2.53-1.5-3.35v6.69c.92-.81 1.5-2.01 1.5-3.34z'/%3E%3C/svg%3E"); } /* Faninformationen */ #forum_page.sector .sc-board-icon[data-board="10"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E"); } /* Events (Treffen) */ #forum_page.sector .sc-board-icon[data-board="16"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E"); } /* Terminkalender */ #forum_page.sector .sc-board-icon[data-board="153"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.77 7.23l.01-.01-3.72-3.72L15 4.56l2.11 2.11c-.94.36-1.61 1.26-1.61 2.33 0 1.38 1.12 2.5 2.5 2.5.36 0 .69-.08 1-.21v7.21c0 .55-.45 1-1 1s-1-.45-1-1V14c0-1.1-.9-2-2-2h-1V5c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v16h8v-7.5h1.5v5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V9c0-.69-.28-1.32-.73-1.77zM12 10H6V5h6v5zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E"); } /* Stories (Benzin) */ /* TECHNIK & TIPPS */ #forum_page.sector .sc-board-icon[data-board="1"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 7.6 7.6 3.7 3.7c-1.1 2.4-.7 5.4 1.3 7.4 1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1 0-1.4z'/%3E%3C/svg%3E"); } /* Technik */ #forum_page.sector .sc-board-icon[data-board="2"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.38 8.57l-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0 0 0 1.74-1 10 10 0 0 0-.27-10.44zm-9.79 6.84a2 2 0 0 0 2.83 0l5.66-8.49-8.49 5.66a2 2 0 0 0 0 2.83z'/%3E%3C/svg%3E"); } /* Tuning & Umbauten */ #forum_page.sector .sc-board-icon[data-board="13"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12zm-12.91 4.72l-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z'/%3E%3C/svg%3E"); } /* Technische Eintragungen */ #forum_page.sector .sc-board-icon[data-board="3"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.2a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4zM9 2 7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z'/%3E%3C/svg%3E"); } /* Fahrzeuggalerie */ #forum_page.sector .sc-board-icon[data-board="7"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/%3E%3C/svg%3E"); } /* Motorsport */ #forum_page.sector .sc-board-icon[data-board="11"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z'/%3E%3C/svg%3E"); } /* Sonstige Themen */ /* KLEINANZEIGEN */ #forum_page.sector .sc-board-icon[data-board="14"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"); } /* Suche */ #forum_page.sector .sc-board-icon[data-board="12"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/%3E%3C/svg%3E"); } /* Biete */ #forum_page.sector .sc-board-icon[data-board="110"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.99 11 3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z'/%3E%3C/svg%3E"); } /* Tausche */ /* WIKI 914 */ #forum_page.sector .sc-board-icon[data-board="5"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z'/%3E%3C/svg%3E"); } /* Historie */ #forum_page.sector .sc-board-icon[data-board="37"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); } /* Ausfuehrungen (Lack) */ #forum_page.sector .sc-board-icon[data-board="17"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 10V8h-4V4h-2v4h-4V4H8v4H4v2h4v4H4v2h4v4h2v-4h4v4h2v-4h4v-2h-4v-4h4zm-6 4h-4v-4h4v4z'/%3E%3C/svg%3E"); } /* Motor-/Getriebenummern */ #forum_page.sector .sc-board-icon[data-board="20"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.07-.12C8.48 10.94 10.42 7.54 13 3h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.15C12.96 17.55 11 21 11 21z'/%3E%3C/svg%3E"); } /* Elektrische Anlage */ #forum_page.sector .sc-board-icon[data-board="101"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-5.33 4.55-8 8.48-8 11.8 0 4.98 3.8 8.2 8 8.2s8-3.22 8-8.2c0-3.32-2.67-7.25-8-11.8z'/%3E%3C/svg%3E"); } /* Einspritzung */ #forum_page.sector .sc-board-icon[data-board="80"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 17c0 1.65-1.35 3-3 3s-3-1.35-3-3h2c0 .55.45 1 1 1s1-.45 1-1-.45-1-1-1H2v-2h9.5c1.65 0 3 1.35 3 3zM19 6.5C19 4.57 17.43 3 15.5 3S12 4.57 12 6.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5S16.33 8 15.5 8H2v2h13.5c1.93 0 3.5-1.57 3.5-3.5zm-.5 4.5H2v2h16.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5v2c1.93 0 3.5-1.57 3.5-3.5S20.43 11 18.5 11z'/%3E%3C/svg%3E"); } /* Schlaeuche (Luft) */ #forum_page.sector .sc-board-icon[data-board="30"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.47.47 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z'/%3E%3C/svg%3E"); } /* Bauteile */ #forum_page.sector .sc-board-icon[data-board="31"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z'/%3E%3C/svg%3E"); } /* Verschleiss & Verbrauch */ #forum_page.sector .sc-board-icon[data-board="25"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m19 9 1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z'/%3E%3C/svg%3E"); } /* Wartung & Pflege */ #forum_page.sector .sc-board-icon[data-board="23"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.783 15.172l2.121-2.121 5.996 5.996-2.121 2.121zM17.5 10c1.93 0 3.5-1.57 3.5-3.5 0-.58-.16-1.12-.41-1.6l-2.7 2.7-1.49-1.49 2.7-2.7c-.48-.25-1.02-.41-1.6-.41C15.57 3 14 4.57 14 6.5c0 .41.08.8.21 1.16l-1.85 1.85-1.78-1.78.71-.71-1.41-1.41L12 3.49a3 3 0 0 0-4.24 0L4.22 7.03l1.41 1.41H2.81l-.71.71 3.54 3.54.71-.71V9.15l1.41 1.41.71-.71 1.78 1.78-7.41 7.41 2.12 2.12L16.34 9.79c.36.13.75.21 1.16.21z'/%3E%3C/svg%3E"); } /* Werkstatt & Anleitungen */ #forum_page.sector .sc-board-icon[data-board="27"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h4v8H3zm7-6h4v14h-4zm7-4h4v18h-4z'/%3E%3C/svg%3E"); } /* Statistiken */ #forum_page.sector .sc-board-icon[data-board="24"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E"); } /* Kaufberatung */ #forum_page.sector .sc-board-icon[data-board="29"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m18 4 2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z'/%3E%3C/svg%3E"); } /* Werbung (Film & Bild) */ #forum_page.sector .sc-board-icon[data-board="32"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 0 0-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E"); } /* Fanprodukte */ #forum_page.sector .sc-board-icon[data-board="123"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2-5.5 9h11L12 2zm5.5 11c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zM3 21.5h8v-8H3v8z'/%3E%3C/svg%3E"); } /* Accessoires */ #forum_page.sector .sc-board-icon[data-board="21"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 2c-2.3 0-7 1.2-7 3.5V19h14v-2.5C15 14.2 10.3 13 8 13zm8 0h-.9c1.2.9 1.9 2 1.9 3.5V19h6v-2.5c0-2.3-4.7-3.5-7-3.5z'/%3E%3C/svg%3E"); } /* Clubs & Vereine */ #forum_page.sector .sc-board-icon[data-board="73"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6h-2c0-2.21-1.79-4-4-4S8 3.79 8 6H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-8 4c0 .55-.45 1-1 1s-1-.45-1-1V8h2v2zm2-6c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2zm4 6c0 .55-.45 1-1 1s-1-.45-1-1V8h2v2z'/%3E%3C/svg%3E"); } /* Clubprodukte */ #forum_page.sector .sc-board-icon[data-board="19"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z'/%3E%3C/svg%3E"); } /* Adressen (Betriebe) */ #forum_page.sector .sc-board-icon[data-board="97"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z'/%3E%3C/svg%3E"); } /* Literatur */ #forum_page.sector .sc-board-icon[data-board="140"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"); } /* Sonstige Berichte */ #forum_page.sector .sc-board-icon[data-board="127"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 10.02h5V21h-5zM17 21h3c1.1 0 2-.9 2-2v-9h-5v11zm3-18H5C3.9 3 3 3.9 3 5v3h19V5c0-1.1-.9-2-2-2zM3 19c0 1.1.9 2 2 2h3V10H3v9z'/%3E%3C/svg%3E"); } /* Technische Daten */ #forum_page.sector .sc-board-icon[data-board="122"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E"); } /* Eigenentwicklungen */ #forum_page.sector .sc-board-icon[data-board="150"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 14-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8zm2-13c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1z'/%3E%3C/svg%3E"); } /* Zulassung */ #forum_page.sector .sc-board-icon[data-board="155"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.68 13.69 12 11.93l2.31 1.76-.88-2.85L15.75 9h-2.84L12 6.19 11.09 9H8.25l2.31 1.84-.88 2.85zM20 10c0-4.42-3.58-8-8-8s-8 3.58-8 8c0 2.03.76 3.87 2 5.28V23l6-2 6 2v-7.72c1.24-1.41 2-3.25 2-5.28zm-8-6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6 2.69-6 6-6z'/%3E%3C/svg%3E"); } /* Zertifikate */ #forum_page.sector .sc-board-icon[data-board="161"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E"); } /* Fahrzeug-Konfigurator */ /* APPS & SOFTWARE */ #forum_page.sector .sc-board-icon[data-board="111"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-2 10h-2.4l-1.6 2.4-3-6L8.6 13H7v-2h.5l2.5-3.8 3 6 .9-1.2H17z'/%3E%3C/svg%3E"); } /* AUTO-Diagnose */ #forum_page.sector .sc-board-icon[data-board="149"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7l-4-4zm-5 16a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm3-10H5V5h10v4z'/%3E%3C/svg%3E"); } /* Software: Diskette */ #forum_page.sector .sc-board-icon[data-board="84"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 1.01 7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E"); } /* Smartphone-Apps */ /* INTERNATIONAL FORUM */ #forum_page.sector .sc-board-icon[data-board="106"] { --board-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7 1.62-4.33L19.12 17h-3.24z'/%3E%3C/svg%3E"); } /* Multilingual Forum */ /* 9. Sprachauswahl ============================================================== */ /* Googles eigene Bedienung wird nicht angezeigt -- ihr Menue ist ein fremdes Dokument im iframe und laesst sich nicht gestalten. Der Container bleibt aber im Seitenbaum, er ist der Motor der Uebersetzung. Die sichtbare Bedienung steht in bottom.php. */ #forum_page.sector .sc-translate, #google_translate_element { display: none !important; } #forum_page.sector .sc-lang { position: relative; display: flex; align-items: center; margin: 8px 0 8px auto; } #forum_page.sector .sc-lang-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #4a5157; border-radius: 6px; background: #3d444a; color: #fff; font-size: 14px; line-height: 1.2; cursor: pointer; white-space: nowrap; } /* Die Flagge der jeweiligen Sprache; die Dateien liegen unter styles/sector/flags/ */ #forum_page.sector .sc-lang-fahne { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } /* Beim Ueberfahren wird nur der Rahmen orange -- die Beschriftung bleibt weiss, orange auf dem dunklen Grund waere zu schwach zu lesen. */ #forum_page.sector .sc-lang-btn:hover { border-color: var(--sc-orange); background: #454d54; } #forum_page.sector .sc-lang-pfeil { width: 10px; height: 10px; background: currentColor; opacity: .7; -webkit-mask: var(--ico-arrow-dn) center / contain no-repeat; mask: var(--ico-arrow-dn) center / contain no-repeat; } #forum_page.sector .sc-lang-btn[aria-expanded="true"] { border-color: var(--sc-orange); } #forum_page.sector .sc-lang-btn[aria-expanded="true"] .sc-lang-pfeil { transform: rotate(180deg); } /* Die Klappliste liegt ueber dem Inhalt: helle Karte wie die Karten darunter */ #forum_page.sector .sc-lang-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 260px; padding: 10px; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: var(--sc-radius); box-shadow: 0 16px 40px rgba(20, 25, 30, .22); } #forum_page.sector .sc-lang-suche { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--sc-line); border-radius: 6px; background: var(--sc-soft); color: var(--sc-ink); font-size: 14px; } #forum_page.sector .sc-lang-suche:focus { outline: 0; border-color: var(--sc-orange); background: var(--sc-card); } /* Hinweis auf die Herkunft der Uebersetzung -- Google verlangt ihn */ #forum_page.sector .sc-lang-quelle { margin: 6px 2px 0; font-size: 8px; letter-spacing: .02em; color: var(--sc-muted); } #forum_page.sector .sc-lang-quelle a { color: var(--sc-muted); text-decoration: underline; } #forum_page.sector .sc-lang-quelle a:hover { color: var(--sc-orange); } #forum_page.sector .sc-lang-liste { max-height: 300px; overflow-y: auto; margin-top: 8px; overscroll-behavior: contain; } #forum_page.sector .sc-lang-eintrag { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 5px; background: none; color: var(--sc-ink); font-size: 14px; text-align: left; cursor: pointer; } #forum_page.sector .sc-lang-eigen { display: block; font-size: 12px; color: var(--sc-muted); margin-top: 1px; } #forum_page.sector .sc-lang-eintrag:hover { background: var(--sc-orange); color: #fff; } #forum_page.sector .sc-lang-eintrag:hover .sc-lang-eigen { color: rgba(255, 255, 255, .85); } #forum_page.sector .sc-lang-eintrag.is-aktiv { color: var(--sc-orange); font-weight: 600; } #forum_page.sector .sc-lang-eintrag.is-aktiv:hover { color: #fff; } #forum_page.sector .sc-lang-leer { margin: 10px 4px 2px; font-size: 13px; color: var(--sc-muted); } /* Trennstrich unter den angehefteten Zeilen (Deutsch, Englisch) -- nur solange sie sichtbar sind, bei einer Suche sind sie ausgeblendet. */ #forum_page.sector .sc-lang-eintrag[data-oben="1"]:not([hidden]) + .sc-lang-eintrag:not([data-oben="1"]) { border-top: 1px solid var(--sc-line); margin-top: 5px; padding-top: 10px; } #forum_page.sector .sc-lang-eintrag .sc-lang-fahne { width: 20px; height: 20px; } #forum_page.sector .sc-lang-texte { min-width: 0; } /* Bei aktiver Uebersetzung schiebt Google die Seite nach unten und hebt Stellen farbig hervor -- beides abgeschaltet; den Balken selbst blendet bottom.php aus. */ body { top: 0 !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } /* 10. Datenschutzhinweis ========================================================= */ /* Er ueberlagert die Seite einmalig, bis er bestaetigt wird. Das alte Skript datenschutz.js wird in diesem Stil nicht geladen; seine Regeln stehen nicht mehr hier, weil sie sonst leere Kaesten formatieren wuerden. */ #forum_page.sector ~ #sc-hinweis, #sc-hinweis { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(18, 22, 26, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); font-family: var(--sc-font); } #sc-hinweis .sc-hinweis-karte { width: 100%; max-width: 520px; box-sizing: border-box; padding: 28px 30px 24px; background: var(--sc-card); border-radius: 12px; box-shadow: 0 24px 60px rgba(10, 14, 18, .45); text-align: left; } #sc-hinweis h2 { margin: 0 0 14px; font-size: 21px; font-weight: 700; color: var(--sc-ink); } #sc-hinweis p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--sc-ink); } #sc-hinweis .sc-hinweis-mehr { margin: 0 0 20px; } #sc-hinweis .sc-hinweis-mehr a { color: var(--sc-orange); text-decoration: underline; } #sc-hinweis .sc-hinweis-ok { display: block; width: 100%; padding: 12px 18px; border: 0; border-radius: 8px; background: var(--sc-orange); color: #fff; font-family: var(--sc-font); font-size: 15px; font-weight: 600; cursor: pointer; } #sc-hinweis .sc-hinweis-ok:hover { background: var(--sc-orange-2); } /* Auf Anforderung geoeffnet (Formular, Karte): eine Zeile mit dem Grund oben und ein Abbrechen-Knopf. Beim ersten Besuch gibt es beides nicht. */ #sc-hinweis .sc-hinweis-grund { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: #fff3ea; color: #7a3a10; font-size: 14px; line-height: 1.5; } #sc-hinweis .sc-hinweis-abbrechen { display: none; width: 100%; margin-top: 8px; padding: 10px 18px; border: 1px solid var(--sc-line); border-radius: 8px; background: var(--sc-card); color: var(--sc-ink); font-family: var(--sc-font); font-size: 14.5px; font-weight: 600; cursor: pointer; } #sc-hinweis.auf-anforderung .sc-hinweis-abbrechen { display: block; } #sc-hinweis .sc-hinweis-abbrechen:hover { border-color: var(--sc-orange); color: var(--sc-orange); } /* Mitgliederkarte ohne Zustimmung */ #forum_page.sector #map { position: relative; background: var(--sc-soft); border-radius: 6px; } #forum_page.sector .sc-karte-hinweis { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; } #forum_page.sector .sc-karte-hinweis p { margin: 0; font-size: 14px; color: var(--sc-muted); } #forum_page.sector .sc-karte-hinweis button { padding: 9px 18px; border: 0; border-radius: 8px; background: var(--sc-orange); color: #fff; font-family: var(--sc-font); font-size: 14.5px; font-weight: 600; cursor: pointer; } #forum_page.sector .sc-karte-hinweis button:hover { background: var(--sc-orange-2); } /* Videos in Beitraegen: Platzhalter im Seitenverhaeltnis 16:9, erst der Klick laedt */ #forum_page.sector .sc-video { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin: 8px 0; padding: 16px; box-sizing: border-box; border-radius: 8px; background: var(--sc-dark); color: rgba(255, 255, 255, .75); text-align: center; } #forum_page.sector .sc-video-start { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border: 0; border-radius: 8px; background: var(--sc-orange); color: #fff; font-family: var(--sc-font); font-size: 15px; font-weight: 600; cursor: pointer; } #forum_page.sector .sc-video-start::before { content: ""; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; } #forum_page.sector .sc-video-start:hover { background: var(--sc-orange-2); } #forum_page.sector .sc-video-hinweis { font-size: 12.5px; line-height: 1.5; max-width: 420px; } #forum_page.sector .sc-video-hinweis a { color: #fff; text-decoration: underline; } #forum_page.sector .sc-video.laeuft { padding: 0; background: #000; } #forum_page.sector .sc-video iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; } /* reCAPTCHA-Plakette: Google erlaubt das Ausblenden, wenn der Hinweis auf reCAPTCHA mit Links zu Googles Datenschutzerklaerung und Nutzungsbedingungen sichtbar auf der Seite steht -- das tut er in der Fusszeile. */ .grecaptcha-badge { visibility: hidden !important; } /* Ladeanzeige beim Absenden von Formularen ("Bitte warten Sie, die Seite wird geladen"): statt grauer Flaeche mit GIF-Kasten eine Karte mit Drehkreis */ #loadingbox, #loadingbox.premium { background: rgba(18, 22, 26, .5) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 1 !important; z-index: 1900 !important; } #loadingbox table { top: 42% !important; width: auto !important; height: auto !important; margin: 0 auto; border: 0 !important; border-radius: 12px; background: var(--sc-card) !important; box-shadow: 0 20px 50px rgba(10, 14, 18, .35); border-collapse: separate; } #loadingbox td { padding: 22px 30px 20px !important; font-family: var(--sc-font); font-size: 14.5px; font-weight: 600 !important; color: var(--sc-ink); text-align: center; vertical-align: middle !important; } #loadingbox td::before { content: ""; display: block; width: 30px; height: 30px; margin: 0 auto 12px; border: 3px solid var(--sc-line); border-top-color: var(--sc-orange); border-radius: 50%; animation: sc-drehen .8s linear infinite; } @keyframes sc-drehen { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #loadingbox td::before { animation-duration: 2.4s; } } #sc-hinweis .sc-hinweis-ok:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; } @media only screen and (max-width: 480px) { #sc-hinweis .sc-hinweis-karte { padding: 22px 20px 20px; } #sc-hinweis h2 { font-size: 19px; } } @media only screen and (max-width: 640px) { /* Die Klappliste haengt unter der ganzen Leiste statt unter dem Knopf -- so kann sie auf schmalen Geraeten nicht seitlich hinauslaufen. */ #forum_page.sector .sc-lang { order: 3; position: static; flex: 0 0 auto; margin: 10px 0 14px; } /* Nur die Flagge: quadratischer Knopf in der Hoehe des Suchfelds. Name und Pfeil bleiben fuer Screenreader im Knopf (aria-label), sichtbar ist nur die Flagge. */ #forum_page.sector .sc-lang-btn { width: 40px; height: 40px; padding: 0; justify-content: center; gap: 0; } #forum_page.sector .sc-lang-btn .sc-lang-fahne { width: 22px; height: 22px; } #forum_page.sector .sc-lang-name, #forum_page.sector .sc-lang-pfeil { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } #forum_page.sector .sc-lang-panel { left: 12px; right: 12px; width: auto; top: calc(100% + 4px); } #forum_page.sector .sc-lang-liste { max-height: 50vh; } } /* 11. Bilder in Beitraegen ======================================================= */ /* Bilder, die in einem Beitrag direkt aufeinander folgen, fasst das Forum zu einer Galerie zusammen (include/functions.php: format_bilder). Kacheln im festen Seitenverhaeltnis, ein einzelnes Bild behaelt seine Form. Die Anzeigebilder haben 1280 Pixel an der laengeren Kante, sind also auch auf dichten Bildschirmen scharf. */ #forum_page.sector .sc-galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 820px; margin: 14px 0; } #forum_page.sector .sc-galerie[data-anzahl="2"], #forum_page.sector .sc-galerie[data-anzahl="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } #forum_page.sector .sc-galerie-bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--sc-soft); cursor: zoom-in; } #forum_page.sector .sc-galerie-bild img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: filter .15s ease; } #forum_page.sector .sc-galerie-bild:hover img { filter: brightness(.88); } #forum_page.sector .sc-galerie-bild:focus-visible { outline: 2px solid var(--sc-orange); outline-offset: 2px; } #forum_page.sector .sc-galerie[data-anzahl="1"] { display: block; } #forum_page.sector .sc-galerie[data-anzahl="1"] .sc-galerie-bild { display: inline-block; max-width: 100%; aspect-ratio: auto; vertical-align: top; background: none; } #forum_page.sector .sc-galerie[data-anzahl="1"] .sc-galerie-bild img { width: auto; height: auto; max-width: 100%; max-height: 620px; object-fit: contain; } /* Gaeste sehen statt der Anhaenge einen Hinweis mit Anmeldelink */ #forum_page.sector .sc-bilder-gesperrt { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; max-width: 820px; box-sizing: border-box; margin: 14px 0; padding: 12px 16px 12px 44px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius); background: var(--sc-soft); color: var(--sc-muted); font-size: 14px; line-height: 1.45; } #forum_page.sector .sc-bilder-gesperrt::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: currentColor; -webkit-mask: var(--ico-lock) center / contain no-repeat; mask: var(--ico-lock) center / contain no-repeat; } #forum_page.sector .sc-bilder-gesperrt a { color: var(--sc-orange); font-weight: 600; text-decoration: none; } #forum_page.sector .sc-bilder-gesperrt a:hover { text-decoration: underline; } /* Liste "Datei-Anhaenge" unter Beitraegen und im Editor: Die schmale Spalte fuer das Vorschaubild schrumpfte in der Tabelle, und max-width:100% drueckte das Bild auf null */ #forum_page.sector td > a > img[src*="type=thumbnail"] { display: block; width: 50px; height: 50px; max-width: none; object-fit: cover; border-radius: 4px; } #forum_page.sector td:has(> a > img[src*="type=thumbnail"]) { min-width: 50px; padding-right: 12px; } /* Nicht mehr vorhandene Bilder (geloeschte Anhaenge, tote Fremdseiten) */ #forum_page.sector .sc-bilder-fehlen { margin: 10px 0 14px; color: var(--sc-muted); font-size: 13px; } #forum_page.sector .sc-galerie + .sc-bilder-fehlen { margin-top: -6px; } @media only screen and (max-width: 640px) { #forum_page.sector .sc-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } /* Ungerade Anzahl: das erste Bild geht ueber die volle Breite */ #forum_page.sector .sc-galerie:not([data-anzahl="1"]) > .sc-galerie-bild:first-child:nth-last-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 10; } #forum_page.sector .sc-galerie[data-anzahl="1"] .sc-galerie-bild img { max-height: 70vh; } } /* Bildbetrachter (styles/sector/bilder.js): dunkle Flaeche ueber der ganzen Seite, oben Zaehler, Original und Schliessen, seitlich die Pfeile. */ html.sc-betrachter-offen { overflow: hidden; } #sc-betrachter { position: fixed; inset: 0; z-index: 2100; display: grid; grid-template-rows: auto minmax(0, 1fr); background: rgba(14, 17, 20, .95); color: #fff; font-family: var(--sc-font); } @media (prefers-reduced-motion: no-preference) { #sc-betrachter:not([hidden]) { animation: sc-betrachter-ein .16s ease-out; } @keyframes sc-betrachter-ein { from { opacity: 0; } to { opacity: 1; } } } #sc-betrachter svg { display: block; width: 100%; height: 100%; fill: currentColor; } #sc-betrachter .sc-betrachter-leiste { display: flex; align-items: center; gap: 4px; padding: 10px 10px 0 20px; } #sc-betrachter .sc-betrachter-zaehler { margin-right: auto; color: rgba(255, 255, 255, .7); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } #sc-betrachter .sc-betrachter-original { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 8px; color: rgba(255, 255, 255, .78); font-size: 14.5px; font-weight: 600; text-decoration: none; } #sc-betrachter .sc-betrachter-symbol { display: block; width: 18px; height: 18px; } #sc-betrachter button { display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; } #sc-betrachter .sc-betrachter-schliessen { width: 44px; height: 44px; } #sc-betrachter .sc-betrachter-schliessen svg { width: 26px; height: 26px; } #sc-betrachter .sc-betrachter-original:hover, #sc-betrachter .sc-betrachter-schliessen:hover { background: rgba(255, 255, 255, .1); color: #fff; } #sc-betrachter .sc-betrachter-buehne { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 12px 84px 28px; overflow: hidden; touch-action: pan-y pinch-zoom; } #sc-betrachter.sc-einzeln .sc-betrachter-buehne { padding-left: 28px; padding-right: 28px; } #sc-betrachter .sc-betrachter-bild { display: block; max-width: 100%; max-height: 100%; border-radius: 4px; box-shadow: 0 16px 48px rgba(0, 0, 0, .5); -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } #sc-betrachter .sc-betrachter-pfeil { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -6px; transform: translateY(-50%); background: rgba(255, 255, 255, .08); } #sc-betrachter .sc-betrachter-pfeil svg { width: 30px; height: 30px; } #sc-betrachter .sc-betrachter-pfeil:hover { background: var(--sc-orange); } #sc-betrachter .sc-betrachter-zurueck { left: 16px; } #sc-betrachter .sc-betrachter-weiter { right: 16px; } #sc-betrachter a:focus-visible, #sc-betrachter button:focus-visible { outline: 2px solid var(--sc-orange); outline-offset: 2px; } @media only screen and (max-width: 640px) { #sc-betrachter .sc-betrachter-leiste { padding: 6px 4px 0 16px; } #sc-betrachter .sc-betrachter-buehne, #sc-betrachter.sc-einzeln .sc-betrachter-buehne { padding: 8px 0 16px; } #sc-betrachter .sc-betrachter-bild { border-radius: 0; box-shadow: none; } /* Auf dem Handy liegen die Pfeile klein ueber dem Bild; Wischen geht auch */ #sc-betrachter .sc-betrachter-pfeil { width: 40px; height: 40px; background: rgba(0, 0, 0, .4); } #sc-betrachter .sc-betrachter-pfeil svg { width: 26px; height: 26px; } #sc-betrachter .sc-betrachter-zurueck { left: 6px; } #sc-betrachter .sc-betrachter-weiter { right: 6px; } } /* 12. Abzeichen ================================================================== */ /* Die Grafiken kommen als Klassen aus AbzeichenStile() am Seitenende (styles/sector/abzeichen/abzeichen.php); hier nur Groesse und Anordnung. */ #forum_page.sector .sc-abz { display: inline-block; flex: none; width: 30px; height: 30px; border-radius: 50%; background-size: 100% 100%; background-repeat: no-repeat; vertical-align: middle; text-decoration: none; } #forum_page.sector a.sc-abz:focus-visible { outline: 2px solid var(--sc-orange); outline-offset: 2px; } /* Neben dem Namen, statt der Sterne */ #forum_page.sector .sc-abz-mini { width: 16px; height: 16px; margin-left: 4px; vertical-align: -4px; } /* Leiste unter dem Namen im Beitrag: Desktop bis fuenf, Handy bis drei */ #forum_page.sector .sc-abz-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 0 4px; } #forum_page.sector .sc-abz-mehr { margin-left: 3px; font-size: 12.5px; font-weight: 600; color: var(--sc-muted); text-decoration: none; } #forum_page.sector .sc-abz-mehr:hover { color: var(--sc-orange); } #forum_page.sector .hidden-phone .sc-abz-schmal, #forum_page.sector .show-phone-table-row .sc-abz-breit { display: none; } #forum_page.sector .show-phone-table-row .sc-abz-leiste { gap: 3px; margin: 6px 0 2px; } #forum_page.sector .show-phone-table-row .sc-abz { width: 26px; height: 26px; } /* Uebersicht im Profil */ #forum_page.sector .sc-abz-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px 24px; margin: 0; padding: 6px 2px; list-style: none; } #forum_page.sector .sc-abz-eintrag { display: flex; align-items: center; gap: 12px; min-width: 0; } #forum_page.sector .sc-abz-eintrag .sc-abz { width: 52px; height: 52px; } #forum_page.sector .sc-abz-eintrag div { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.35; } #forum_page.sector .sc-abz-eintrag b { font-size: 15px; font-weight: 700; color: var(--sc-ink); } #forum_page.sector .sc-abz-eintrag b a { color: inherit; text-decoration: none; } #forum_page.sector .sc-abz-eintrag b a:hover { color: var(--sc-orange); } #forum_page.sector .sc-abz-eintrag span { font-size: 13.5px; color: var(--sc-ink); } #forum_page.sector .sc-abz-eintrag .sc-abz-naechste { font-size: 12.5px; color: var(--sc-muted); } #forum_page.sector .sc-abz-offen b, #forum_page.sector .sc-abz-offen span { color: var(--sc-muted); } #forum_page.sector .sc-abz-zwischentitel { margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--sc-line); font-size: 14px; font-weight: 600; color: var(--sc-muted); } /* Link von der Abzeichen-Box im Profil zur Erklaerung in der FAQ */ #forum_page.sector .sc-abz-profil td.oben { display: flex; align-items: center; gap: 12px; } #forum_page.sector .sc-abz-profil td.oben a.sc-abz-erklaerung { margin-left: auto; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .8); text-decoration: none; } #forum_page.sector .sc-abz-profil td.oben a.sc-abz-erklaerung:hover { color: #fff; text-decoration: underline; } /* Uebersicht der Abzeichen unter dem FAQ-Text (AbzeichenErklaerung), ersetzt die alte Tabelle mit Sternen und Symbolen */ #forum_page.sector .sc-abz-faq { clear: both; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--sc-line); } #forum_page.sector .sc-abz-faq h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: var(--sc-ink); } #forum_page.sector .sc-abz-faq-einleitung { max-width: 80ch; margin: 0 0 18px; line-height: 1.6; color: var(--sc-ink); } #forum_page.sector .sc-abz-faq-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } #forum_page.sector .sc-abz-faq-art { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius); background: var(--sc-card); } /* Der Rang loest die Sterne ab: er bekommt die ganze Breite */ #forum_page.sector .sc-abz-faq-art:first-child { grid-column: 1 / -1; } #forum_page.sector .sc-abz-faq-icons { display: flex; flex-wrap: wrap; gap: 4px; flex: 0 0 132px; } #forum_page.sector .sc-abz-faq-art:first-child .sc-abz-faq-icons { flex-basis: auto; flex-wrap: nowrap; } #forum_page.sector .sc-abz-faq-icons .sc-abz { width: 40px; height: 40px; } #forum_page.sector .sc-abz-faq-text { min-width: 0; } #forum_page.sector .sc-abz-faq-text h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--sc-ink); } #forum_page.sector .sc-abz-faq-text p { margin: 0; font-size: 14px; line-height: 1.55; } #forum_page.sector .sc-abz-faq-stufen { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; } #forum_page.sector .sc-abz-faq-stufen li { padding: 2px 9px; border: 1px solid var(--sc-line); border-radius: 12px; background: var(--sc-soft); font-size: 12.5px; white-space: nowrap; } @media only screen and (max-width: 640px) { #forum_page.sector .sc-abz-faq-liste { grid-template-columns: minmax(0, 1fr); } #forum_page.sector .sc-abz-faq-art { flex-direction: column; gap: 10px; } #forum_page.sector .sc-abz-faq-icons { flex-basis: auto; } #forum_page.sector .sc-abz-faq-art:first-child .sc-abz-faq-icons { flex-wrap: wrap; } #forum_page.sector .sc-abz-faq-stufen li { white-space: normal; } } /* 13. Geburtstagskalender und Werbeflaeche der Seitenleiste ======================= */ /* Kalender ueber die volle Breite unter Hauptspalte und Seitenleiste (styles/sector/ geburtstage/kalender.php und geburtstage.js): links das Monatsraster, daneben der gewaehlte Tag und die naechsten Geburtstage */ #forum_page.sector table.sc-geb-karte { margin-top: 20px; } #forum_page.sector table.sc-geb-karte table tr, #forum_page.sector table.sc-geb-karte table td.g { display: block; width: 100%; box-sizing: border-box; padding: 0; } #forum_page.sector .sc-geb { padding: 18px 20px 20px; } #forum_page.sector .sc-geb-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } #forum_page.sector .sc-geb-monat { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 700; color: var(--sc-ink); } #forum_page.sector .sc-geb-anzahl { margin: 2px 0 0; font-size: 13px; color: var(--sc-muted); } #forum_page.sector .sc-geb-nav { display: flex; gap: 6px; flex: none; } #forum_page.sector .sc-geb-nav button { height: 34px; padding: 0 14px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius); background: var(--sc-card); color: var(--sc-ink); font-family: var(--sc-font); font-size: 14px; font-weight: 600; cursor: pointer; } #forum_page.sector .sc-geb-nav button:hover:not(:disabled) { border-color: var(--sc-orange); color: var(--sc-orange); } #forum_page.sector .sc-geb-nav button:disabled { color: #aab0b5; cursor: default; } #forum_page.sector .sc-geb-nav button:focus-visible, #forum_page.sector .sc-geb-tag:focus-visible { outline: 2px solid var(--sc-orange); outline-offset: 2px; } #forum_page.sector .sc-geb-pfeil { position: relative; width: 34px; padding: 0 !important; } #forum_page.sector .sc-geb-pfeil::before { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ico-chevron) center / contain no-repeat; mask: var(--ico-chevron) center / contain no-repeat; } #forum_page.sector .sc-geb-zurueck::before { -webkit-mask-image: var(--ico-chevron-l); mask-image: var(--ico-chevron-l); } #forum_page.sector .sc-geb-inhalt { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 2fr); gap: 28px; align-items: start; } #forum_page.sector .sc-geb-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } #forum_page.sector .sc-geb-wochentag { padding: 0 0 4px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--sc-muted); } #forum_page.sector .sc-geb-tag { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; min-width: 0; aspect-ratio: 1 / .9; padding: 5px 6px 6px; border: 1px solid transparent; border-radius: var(--sc-radius); background: var(--sc-soft); color: var(--sc-ink); font-family: var(--sc-font); text-align: left; cursor: pointer; } #forum_page.sector .sc-geb-tag:hover { border-color: #c9ced3; } #forum_page.sector .sc-geb-tag.sc-geb-hat { background: var(--sc-card); border-color: var(--sc-line); } #forum_page.sector .sc-geb-tag.sc-geb-fremd { background: transparent; border-color: transparent; color: #b0b6bb; } #forum_page.sector .sc-geb-tag.sc-geb-fremd .sc-geb-koepfe { opacity: .45; } #forum_page.sector .sc-geb-tag.sc-geb-gewaehlt { border-color: var(--sc-orange); box-shadow: inset 0 0 0 1px var(--sc-orange); } #forum_page.sector .sc-geb-zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; font-size: 13px; font-weight: 600; line-height: 1; } #forum_page.sector .sc-geb-ist-heute .sc-geb-zahl { border-radius: 50%; background: var(--sc-orange); color: #fff; } #forum_page.sector .sc-geb-bild { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--sc-group); color: #fff; font-weight: 700; object-fit: cover; } #forum_page.sector .sc-geb-koepfe { display: flex; align-items: center; } #forum_page.sector .sc-geb-bild-klein { width: 22px; height: 22px; font-size: 11px; box-shadow: 0 0 0 2px var(--sc-card); } #forum_page.sector .sc-geb-bild-klein + .sc-geb-bild-klein { margin-left: -4px; } #forum_page.sector .sc-geb-mehr { margin-left: 3px; font-size: 11.5px; font-weight: 600; color: var(--sc-muted); } #forum_page.sector .sc-geb-seite { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; min-width: 0; } /* Trennstrich zwischen gewaehltem Tag und naechsten Geburtstagen: geburtstage.js setzt ihn genau in die Mitte zwischen das Ende der linken und den Anfang der rechten Ueberschrift */ #forum_page.sector .sc-geb-trenner { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--sc-line); } #forum_page.sector .sc-geb-auswahl-datum, #forum_page.sector .sc-geb-naechste-titel { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--sc-ink); } #forum_page.sector .sc-geb-leer { margin: 0; font-size: 14px; color: var(--sc-muted); } #forum_page.sector .sc-geb-personen, #forum_page.sector .sc-geb-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } #forum_page.sector .sc-geb-personen a, #forum_page.sector .sc-geb-liste a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px; margin: 0 -8px; border-radius: var(--sc-radius); color: var(--sc-ink); text-decoration: none; } #forum_page.sector .sc-geb-personen a:hover, #forum_page.sector .sc-geb-liste a:hover { background: var(--sc-soft); } #forum_page.sector .sc-geb-personen a:hover .sc-geb-name, #forum_page.sector .sc-geb-liste a:hover .sc-geb-name { color: var(--sc-orange); } #forum_page.sector .sc-geb-bild-gross { width: 40px; height: 40px; font-size: 16px; } #forum_page.sector .sc-geb-bild-mittel { width: 30px; height: 30px; font-size: 13px; } #forum_page.sector .sc-geb-person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } #forum_page.sector .sc-geb-name { overflow: hidden; font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } #forum_page.sector .sc-geb-alter { font-size: 12.5px; color: var(--sc-muted); } #forum_page.sector .sc-geb-naechste { min-width: 0; } #forum_page.sector .sc-geb-tagdatum { flex: 0 0 58px; font-size: 13px; font-weight: 600; color: var(--sc-muted); } #forum_page.sector .sc-geb-einfach { margin: 0; padding-left: 18px; } /* Mittlere Breite: gewaehlter Tag und naechste Geburtstage untereinander neben dem Raster */ @media only screen and (max-width: 1100px) { #forum_page.sector .sc-geb-inhalt { grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 24px; } #forum_page.sector .sc-geb-seite { display: block; } #forum_page.sector .sc-geb-trenner { display: none; } #forum_page.sector .sc-geb-naechste { margin-top: 18px; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--sc-line); } } @media only screen and (max-width: 760px) { #forum_page.sector .sc-geb { padding: 14px; } #forum_page.sector .sc-geb-inhalt { grid-template-columns: minmax(0, 1fr); gap: 18px; } #forum_page.sector .sc-geb-kopf { flex-wrap: wrap; } #forum_page.sector .sc-geb-monat { font-size: 19px; } /* Auf dem Handy ist fuer Koepfe kein Platz: ein oranger Punkt markiert den Tag */ #forum_page.sector .sc-geb-tag { align-items: center; justify-content: flex-start; aspect-ratio: 1 / 1; padding: 4px 2px; } #forum_page.sector .sc-geb-koepfe { display: none; } #forum_page.sector .sc-geb-tag.sc-geb-hat::after { content: ""; position: absolute; left: 50%; bottom: 18%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--sc-orange); } #forum_page.sector .sc-geb-tag.sc-geb-fremd.sc-geb-hat::after { opacity: .45; } } /* Werbeflaeche in der Seitenleiste (Erweiterte Konfiguration > Werbung): eine Karte je Anzeige, untereinander. Die Seitenleiste reicht bis zum Ende der Hauptspalte; ist dort Platz, laeuft die Werbung beim Scrollen am oberen Fensterrand mit, bis der Kalender kommt. Das Skript in bottom.php schaltet das nur ein, wenn alle Anzeigen ins Fenster passen -- sonst waeren die unteren nie zu sehen. */ #forum_page.sector .sc-side { align-self: stretch; } #forum_page.sector .werbung-seitenleiste { display: grid; gap: 14px; margin: 0 0 18px; } #forum_page.sector .werbung-seitenleiste.werbung-mitlaufen { position: sticky; top: 20px; } #forum_page.sector .werbung-anzeige { padding: 14px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius); background: var(--sc-card); overflow: hidden; } #forum_page.sector .werbung-seitenleiste-titel { margin: 0 0 10px; font-size: 13px; color: var(--sc-muted); } #forum_page.sector .werbung-seitenleiste img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 6px; } #forum_page.sector .werbung-seitenleiste a { display: block; } /* 14. Schriftbild ================================================================= */ /* Der Charakter der Kopfzeile "Mittelmotor im Mittelpunkt" -- Barlow halbfett mit offener Laufweite -- zieht sich durch die ganze Seite, ohne Grossbuchstaben: alles, was man anklickt oder was etwas benennt (Navigation, Koepfe, Titel, Knoepfe, Brot- krumen, Seitenleiste, Fusszeile) bekommt die Laufweite. Fliesstext in Beitraegen und Beschreibungen nur einen Hauch davon -- breit gesperrter Lesetext ermuedet. */ #forum_page.sector, #sc-hinweis, #loadingbox { --sc-laufweite: .045em; --sc-laufweite-text: .012em; } #forum_page.sector, #forum_page.sector div, #forum_page.sector td, #forum_page.sector p, #forum_page.sector li { letter-spacing: var(--sc-laufweite-text); } #forum_page.sector div.PHPFK_navigation ul li a, #forum_page.sector td.oben, #forum_page.sector td.oben a, #forum_page.sector ul.subnav li.headline, #forum_page.sector .sc-board-title, #forum_page.sector .sc-board-count, #forum_page.sector .sc-board-count b, #forum_page.sector .sc-board-last > a, #forum_page.sector div.breadcrumbs li, #forum_page.sector .sc-cta, #forum_page.sector div.subtable a, #forum_page.sector a.link, #forum_page.sector span.link_current, #forum_page.sector ul.post_buttons a, #forum_page.sector ul.subnav li a, #forum_page.sector .sc-lang-btn, #forum_page.sector .sc-lang-eintrag, #forum_page.sector .sc-search input, #forum_page.sector .sc-lp-title, #forum_page.sector .sc-welcome div.info > div:first-child, #forum_page.sector .sc-welcome div.info b:first-child, #forum_page.sector .sc-footer-links, #forum_page.sector .sc-footer-links a, #forum_page.sector .sc-footer-tag, #forum_page.sector .sc-stat-label, #forum_page.sector .sc-konto, #forum_page.sector .konto-menue a, #forum_page.sector .sc-video-start, #forum_page.sector .sc-karte-hinweis button, #forum_page.sector input[type="submit"], #forum_page.sector input[type="button"], #forum_page.sector button, #sc-hinweis h2, #sc-hinweis button, #sc-betrachter .sc-betrachter-leiste, #loadingbox td { letter-spacing: var(--sc-laufweite); } /* 15. Gefaellt mir =============================================================== */ /* Unter dem Beitrag: Knopf mit Daumen und Zahl, daneben wem der Beitrag gefaellt. Der Knopf sieht aus wie die Beitragsknoepfe darunter; gedrueckt ist er orange gefuellt. Unter eigenen Beitraegen steht statt des Knopfs nur Daumen und Zahl. */ #forum_page.sector .gefaellt { --ico-daumen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/%3E%3C/svg%3E"); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--sc-muted); } #forum_page.sector .gefaellt-knopf { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--sc-line); border-radius: 6px; background: var(--sc-card); color: var(--sc-ink); font-weight: 600; text-decoration: none; line-height: 1.3; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } #forum_page.sector .gefaellt-knopf:hover { border-color: var(--sc-orange); color: var(--sc-orange); text-decoration: none; } #forum_page.sector .gefaellt-knopf:focus-visible { outline: 2px solid var(--sc-orange); outline-offset: 2px; } #forum_page.sector .gefaellt-knopf.is-aktiv { border-color: var(--sc-orange); background: var(--sc-orange); color: #fff; } #forum_page.sector .gefaellt-knopf.is-aktiv:hover { border-color: var(--sc-orange-2); background: var(--sc-orange-2); color: #fff; } #forum_page.sector .gefaellt-knopf[aria-busy="true"] { opacity: .6; cursor: progress; } #forum_page.sector .gefaellt-symbol { width: 15px; height: 15px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--ico-daumen) center / contain no-repeat; mask: var(--ico-daumen) center / contain no-repeat; } /* Die Zahl im Knopf, vom Wort durch eine feine Linie getrennt */ #forum_page.sector .gefaellt-knopf .gefaellt-zahl { margin-left: 2px; padding-left: 8px; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 35%, transparent); font-variant-numeric: tabular-nums; } #forum_page.sector .gefaellt-stand { display: inline-flex; align-items: center; gap: 6px; color: var(--sc-orange); font-weight: 700; font-variant-numeric: tabular-nums; } #forum_page.sector .gefaellt-wer a { color: var(--sc-ink); font-weight: 600; text-decoration: none; } #forum_page.sector .gefaellt-wer a:hover { color: var(--sc-orange); text-decoration: underline; } #forum_page.sector .gefaellt-mehr { padding: 0; border: 0; background: none; color: var(--sc-ink); font: inherit; font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; } #forum_page.sector .gefaellt-mehr:hover { color: var(--sc-orange); } @media (prefers-reduced-motion: reduce) { #forum_page.sector .gefaellt-knopf { transition: none; } }