/* ========================================================================== smaragd.css - URBAN FOREST, Art-Deco-Smaragd (Stilmuster C) fuer alle 4 Seiten (04.10.26) Eine Datei, eine Zeile pro Seite: als LETZTES Stylesheet (Einbau-Stellen: EINBAU.md). Ersetzt (nur per Ueberschreiben, kein Seitenmarkup noetig): Linie + Stein .abschnitt/footer ::before ::after (Start, Autopflege, Haushalt), .trenner (Geschichte), .naht-unten (Haushalt) Nummern Start .anlass h3 / .schritt .nr | Autopflege/Haushalt .kachel .nr, Autopflege .schritt .nr2 Haushalt .nr3, .anleitung .nr2, .ikon | Geschichte .plakette (Sechseck-Plakette), .lupe (Rand) Kleine Sechsecke .kicker/.bildunter (Start, Geschichte), .format, .merk li (Haushalt), .set-hinweis, .n-sep, .mehr a (Autopflege, Haushalt), Scrollhint Wabe-Textur --wabe (Moos -> Smaragd); Sicherheitsnetz: --moos / --moos-dunkel / --moos-hell zeigen auf Smaragd-Tokens Hell/dunkel: Standard = dunkel (Messing #c9a24a). Haushalt ist hell: dort setzt :root:has(.naht-unten) die hellen Bildvarianten (Messing-tief #a98240); die dunklen Inseln der Haushaltseite (.werkstatt, footer, .kachel.dunkel, .mehr a.dunkel, .anleitung.dunkel) stellen wieder auf dunkel. Geschichte-Naehte: .held-text .unter, .kap-text h2, .kap-kopf h2, .strecke-kopf, .kap-marke (84-px-/Strecken-Linien) und .verlauf (Zeitstrahl) als 1-px-Messinglinie. Nicht angefasst (bewusst): Autopflege .merk li::before / .kat::before / .bildplatz::after (Kategoriefarbe --akz). Farben: nur Werte aus konzept/smaragd_tokens.md bzw. deren Mischung. Keine externen Ressourcen, keine Animation, keine Layout-Aenderung (nur absolut positionierte Pseudo-Elemente). Zeilen-Geometrie: Linienbox (8 px hoch), Linie auf Zeile 4, Mitte = Mitte der Steinbox (28 x 23). Hinweis: background-position in Prozent bezieht sich auf (Box - Bild): 24-px-Endstueck mit Kante bei 50% -+ 14 px = calc(50% -+ 26px). ========================================================================== */ :root { /* Sicherheitsnetz: jede uebrig gebliebene var(--moos...) wird Smaragd (Tokens), nie mehr Moos */ --moos: #32453c; --moos-dunkel: #283a2f; --moos-hell: #355143; --wabe: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2056'%20width='100'%20height='56'%3E%3Cpath%20d='M66%2028%2050%200H16L0%2028l16%2028h34l16-28h34'%20fill='none'%20stroke='%23355143'%20stroke-opacity='0.75'%20stroke-width='1.4'/%3E%3Cpath%20d='M0%2028h34L50%200h34l16%2028-16%2028H50L34%2028'%20fill='none'%20stroke='%23355143'%20stroke-opacity='0.75'%20stroke-width='1.4'/%3E%3C/svg%3E"); --sm-stein-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2023'%20width='28'%20height='23'%3E%3Cdefs%3E%3ClinearGradient%20id='f'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%2332453c'/%3E%3Cstop%20offset='1'%20stop-color='%231c2f27'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon%20points='7.28,0.50%2020.72,0.50%2027.41,11.50%2020.72,22.50%207.28,22.50%200.59,11.50'%20fill='none'%20stroke='%23c9a24a'%20stroke-width='1'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='8.97,3.50%2019.03,3.50%2023.90,11.50%2019.03,19.50%208.97,19.50%204.10,11.50'%20fill='url%28%23f%29'/%3E%3C/svg%3E"); --sm-end-l-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%208'%20width='24'%20height='8'%3E%3Crect%20x='0'%20y='4'%20width='15.5'%20height='1'%20fill='%23c9a24a'/%3E%3Crect%20x='4'%20y='1'%20width='8'%20height='1'%20fill='%23a98240'/%3E%3Crect%20x='4'%20y='7'%20width='8'%20height='1'%20fill='%23a98240'/%3E%3Cpolygon%20points='15.0,4.5%2018.5,1.0%2022.0,4.5%2018.5,8.0'%20fill='%23c9a24a'/%3E%3C/svg%3E"); --sm-end-r-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%208'%20width='24'%20height='8'%3E%3Cg%20transform='translate%2824,0%29%20scale%28-1,1%29'%3E%3Crect%20x='0'%20y='4'%20width='15.5'%20height='1'%20fill='%23c9a24a'/%3E%3Crect%20x='4'%20y='1'%20width='8'%20height='1'%20fill='%23a98240'/%3E%3Crect%20x='4'%20y='7'%20width='8'%20height='1'%20fill='%23a98240'/%3E%3Cpolygon%20points='15.0,4.5%2018.5,1.0%2022.0,4.5%2018.5,8.0'%20fill='%23c9a24a'/%3E%3C/g%3E%3C/svg%3E"); --sm-nr60-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2052'%20width='60'%20height='52'%3E%3Cpolygon%20points='15.43,0.75%2044.57,0.75%2059.13,26.00%2044.57,51.25%2015.43,51.25%200.87,26.00'%20fill='none'%20stroke='%23c9a24a'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='15.87,1.50%2044.13,1.50%2058.27,26.00%2044.13,50.50%2015.87,50.50%201.73,26.00'%20fill='%23283a2f'/%3E%3Cpolygon%20points='17.43,4.20%2042.57,4.20%2055.15,26.00%2042.57,47.80%2017.43,47.80%204.85,26.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-hex11-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2011%2010'%20width='11'%20height='10'%3E%3Cpolygon%20points='3.02,0.45%207.98,0.45%2010.49,5.00%207.98,9.55%203.02,9.55%200.51,5.00'%20fill='%23283a2f'%20stroke='%23c9a24a'%20stroke-width='0.9'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-hex10-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%209'%20width='10'%20height='9'%3E%3Cpolygon%20points='2.74,0.40%207.26,0.40%209.54,4.50%207.26,8.60%202.74,8.60%200.46,4.50'%20fill='%23283a2f'%20stroke='%23c9a24a'%20stroke-width='0.8'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-hex14-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2013'%20width='14'%20height='13'%3E%3Cpolygon%20points='3.80,0.50%2010.20,0.50%2013.43,6.50%2010.20,12.50%203.80,12.50%200.57,6.50'%20fill='%23283a2f'%20stroke='%23c9a24a'%20stroke-width='1'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-hex12-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2010'%20width='12'%20height='10'%3E%3Cpolygon%20points='3.25,0.45%208.75,0.45%2011.48,5.00%208.75,9.55%203.25,9.55%200.52,5.00'%20fill='%23283a2f'%20stroke='%23c9a24a'%20stroke-width='0.9'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-nr62-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2062%2054'%20width='62'%20height='54'%3E%3Cpolygon%20points='15.93,0.75%2046.07,0.75%2061.14,27.00%2046.07,53.25%2015.93,53.25%200.86,27.00'%20fill='none'%20stroke='%23c9a24a'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='16.37,1.50%2045.63,1.50%2060.27,27.00%2045.63,52.50%2016.37,52.50%201.73,27.00'%20fill='%23283a2f'/%3E%3Cpolygon%20points='17.93,4.20%2044.07,4.20%2057.16,27.00%2044.07,49.80%2017.93,49.80%204.84,27.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-nr54-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2054%2048'%20width='54'%20height='48'%3E%3Cpolygon%20points='13.94,0.75%2040.06,0.75%2053.14,24.00%2040.06,47.25%2013.94,47.25%200.86,24.00'%20fill='none'%20stroke='%23c9a24a'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='14.38,1.50%2039.62,1.50%2052.28,24.00%2039.62,46.50%2014.38,46.50%201.72,24.00'%20fill='%23283a2f'/%3E%3Cpolygon%20points='15.96,4.20%2038.04,4.20%2049.18,24.00%2038.04,43.80%2015.96,43.80%204.82,24.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-nr50-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2050%2044'%20width='50'%20height='44'%3E%3Cpolygon%20points='12.94,0.75%2037.06,0.75%2049.14,22.00%2037.06,43.25%2012.94,43.25%200.86,22.00'%20fill='none'%20stroke='%23c9a24a'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='13.37,1.50%2036.63,1.50%2048.27,22.00%2036.63,42.50%2013.37,42.50%201.73,22.00'%20fill='%23283a2f'/%3E%3Cpolygon%20points='14.94,4.20%2035.06,4.20%2045.17,22.00%2035.06,39.80%2014.94,39.80%204.83,22.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-nr44-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2044%2039'%20width='44'%20height='39'%3E%3Cpolygon%20points='11.44,0.75%2032.56,0.75%2043.14,19.50%2032.56,38.25%2011.44,38.25%200.86,19.50'%20fill='none'%20stroke='%23c9a24a'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='11.88,1.50%2032.12,1.50%2042.28,19.50%2032.12,37.50%2011.88,37.50%201.72,19.50'%20fill='%23283a2f'/%3E%3Cpolygon%20points='13.45,4.20%2030.55,4.20%2039.18,19.50%2030.55,34.80%2013.45,34.80%204.82,19.50'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-stein-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2023'%20width='28'%20height='23'%3E%3Cdefs%3E%3ClinearGradient%20id='f'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%2332453c'/%3E%3Cstop%20offset='1'%20stop-color='%231c2f27'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon%20points='7.28,0.50%2020.72,0.50%2027.41,11.50%2020.72,22.50%207.28,22.50%200.59,11.50'%20fill='none'%20stroke='%23a98240'%20stroke-width='1'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='8.97,3.50%2019.03,3.50%2023.90,11.50%2019.03,19.50%208.97,19.50%204.10,11.50'%20fill='url%28%23f%29'/%3E%3C/svg%3E"); --sm-end-l-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%208'%20width='24'%20height='8'%3E%3Crect%20x='0'%20y='4'%20width='15.5'%20height='1'%20fill='%23a98240'/%3E%3Crect%20x='4'%20y='1'%20width='8'%20height='1'%20fill='%23a98240'/%3E%3Crect%20x='4'%20y='7'%20width='8'%20height='1'%20fill='%23a98240'/%3E%3Cpolygon%20points='15.0,4.5%2018.5,1.0%2022.0,4.5%2018.5,8.0'%20fill='%23a98240'/%3E%3C/svg%3E"); --sm-end-r-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%208'%20width='24'%20height='8'%3E%3Cg%20transform='translate%2824,0%29%20scale%28-1,1%29'%3E%3Crect%20x='0'%20y='4'%20width='15.5'%20height='1'%20fill='%23a98240'/%3E%3Crect%20x='4'%20y='1'%20width='8'%20height='1'%20fill='%23a98240'/%3E%3Crect%20x='4'%20y='7'%20width='8'%20height='1'%20fill='%23a98240'/%3E%3Cpolygon%20points='15.0,4.5%2018.5,1.0%2022.0,4.5%2018.5,8.0'%20fill='%23a98240'/%3E%3C/g%3E%3C/svg%3E"); --sm-nr60-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2052'%20width='60'%20height='52'%3E%3Cpolygon%20points='15.43,0.75%2044.57,0.75%2059.13,26.00%2044.57,51.25%2015.43,51.25%200.87,26.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='15.87,1.50%2044.13,1.50%2058.27,26.00%2044.13,50.50%2015.87,50.50%201.73,26.00'%20fill='%23283a2f'/%3E%3Cpolygon%20points='17.43,4.20%2042.57,4.20%2055.15,26.00%2042.57,47.80%2017.43,47.80%204.85,26.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-hex11-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2011%2010'%20width='11'%20height='10'%3E%3Cpolygon%20points='3.08,0.55%207.92,0.55%2010.37,5.00%207.92,9.45%203.08,9.45%200.63,5.00'%20fill='%23283a2f'%20stroke='%23a98240'%20stroke-width='1.1'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-hex10-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%209'%20width='10'%20height='9'%3E%3Cpolygon%20points='2.79,0.50%207.21,0.50%209.43,4.50%207.21,8.50%202.79,8.50%200.57,4.50'%20fill='%23283a2f'%20stroke='%23a98240'%20stroke-width='1.0'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-hex14-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2013'%20width='14'%20height='13'%3E%3Cpolygon%20points='3.86,0.60%2010.14,0.60%2013.32,6.50%2010.14,12.40%203.86,12.40%200.68,6.50'%20fill='%23283a2f'%20stroke='%23a98240'%20stroke-width='1.2'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-hex12-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2010'%20width='12'%20height='10'%3E%3Cpolygon%20points='3.31,0.55%208.69,0.55%2011.36,5.00%208.69,9.45%203.31,9.45%200.64,5.00'%20fill='%23283a2f'%20stroke='%23a98240'%20stroke-width='1.1'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-nr62-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2062%2054'%20width='62'%20height='54'%3E%3Cpolygon%20points='15.93,0.75%2046.07,0.75%2061.14,27.00%2046.07,53.25%2015.93,53.25%200.86,27.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='16.37,1.50%2045.63,1.50%2060.27,27.00%2045.63,52.50%2016.37,52.50%201.73,27.00'%20fill='%23283a2f'/%3E%3Cpolygon%20points='17.93,4.20%2044.07,4.20%2057.16,27.00%2044.07,49.80%2017.93,49.80%204.84,27.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-nr54-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2054%2048'%20width='54'%20height='48'%3E%3Cpolygon%20points='13.94,0.75%2040.06,0.75%2053.14,24.00%2040.06,47.25%2013.94,47.25%200.86,24.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='14.38,1.50%2039.62,1.50%2052.28,24.00%2039.62,46.50%2014.38,46.50%201.72,24.00'%20fill='%23283a2f'/%3E%3Cpolygon%20points='15.96,4.20%2038.04,4.20%2049.18,24.00%2038.04,43.80%2015.96,43.80%204.82,24.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-nr50-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2050%2044'%20width='50'%20height='44'%3E%3Cpolygon%20points='12.94,0.75%2037.06,0.75%2049.14,22.00%2037.06,43.25%2012.94,43.25%200.86,22.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='13.37,1.50%2036.63,1.50%2048.27,22.00%2036.63,42.50%2013.37,42.50%201.73,22.00'%20fill='%23283a2f'/%3E%3Cpolygon%20points='14.94,4.20%2035.06,4.20%2045.17,22.00%2035.06,39.80%2014.94,39.80%204.83,22.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-nr44-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2044%2039'%20width='44'%20height='39'%3E%3Cpolygon%20points='11.44,0.75%2032.56,0.75%2043.14,19.50%2032.56,38.25%2011.44,38.25%200.86,19.50'%20fill='none'%20stroke='%23a98240'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='11.88,1.50%2032.12,1.50%2042.28,19.50%2032.12,37.50%2011.88,37.50%201.72,19.50'%20fill='%23283a2f'/%3E%3Cpolygon%20points='13.45,4.20%2030.55,4.20%2039.18,19.50%2030.55,34.80%2013.45,34.80%204.82,19.50'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-nr68-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2068%2060'%20width='68'%20height='60'%3E%3Cpolygon%20points='17.44,0.75%2050.56,0.75%2067.14,30.00%2050.56,59.25%2017.44,59.25%200.86,30.00'%20fill='none'%20stroke='%23c9a24a'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='17.87,1.50%2050.13,1.50%2066.28,30.00%2050.13,58.50%2017.87,58.50%201.72,30.00'%20fill='%23283a2f'/%3E%3Cpolygon%20points='19.45,4.20%2048.55,4.20%2063.17,30.00%2048.55,55.80%2019.45,55.80%204.83,30.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-nr58-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2058%2051'%20width='58'%20height='51'%3E%3Cpolygon%20points='14.94,0.75%2043.06,0.75%2057.14,25.50%2043.06,50.25%2014.94,50.25%200.86,25.50'%20fill='none'%20stroke='%23c9a24a'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='15.37,1.50%2042.63,1.50%2056.27,25.50%2042.63,49.50%2015.37,49.50%201.73,25.50'%20fill='%23283a2f'/%3E%3Cpolygon%20points='16.94,4.20%2041.06,4.20%2053.17,25.50%2041.06,46.80%2016.94,46.80%204.83,25.50'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-plak132-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20132%20114'%20width='132'%20height='114'%3E%3Cpolygon%20points='33.58,1.00%2098.42,1.00%20130.84,57.00%2098.42,113.00%2033.58,113.00%201.16,57.00'%20fill='none'%20stroke='%23c9a24a'%20stroke-width='2'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='34.15,2.00%2097.85,2.00%20129.69,57.00%2097.85,112.00%2034.15,112.00%202.31,57.00'%20fill='%23283a2f'/%3E%3Cpolygon%20points='36.23,5.60%2095.77,5.60%20125.53,57.00%2095.77,108.40%2036.23,108.40%206.47,57.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.8'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-plak112-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20112%2097'%20width='112'%20height='97'%3E%3Cpolygon%20points='28.58,1.00%2083.42,1.00%20110.85,48.50%2083.42,96.00%2028.58,96.00%201.15,48.50'%20fill='none'%20stroke='%23c9a24a'%20stroke-width='2'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='29.15,2.00%2082.85,2.00%20109.69,48.50%2082.85,95.00%2029.15,95.00%202.31,48.50'%20fill='%23283a2f'/%3E%3Cpolygon%20points='31.00,5.20%2081.00,5.20%20106.00,48.50%2081.00,91.80%2031.00,91.80%206.00,48.50'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.8'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-lupe160-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20160%20139'%20width='160'%20height='139'%3E%3Cpolygon%20points='40.43,0.75%20119.57,0.75%20159.13,69.50%20119.57,138.25%2040.43,138.25%200.87,69.50'%20fill='%23283a2f'%20stroke='%23c9a24a'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='41.97,3.40%20118.03,3.40%20156.08,69.50%20118.03,135.60%2041.97,135.60%203.92,69.50'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-lupe124-d: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20124%20108'%20width='124'%20height='108'%3E%3Cpolygon%20points='31.43,0.75%2092.57,0.75%20123.14,54.00%2092.57,107.25%2031.43,107.25%200.86,54.00'%20fill='%23283a2f'%20stroke='%23c9a24a'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='32.97,3.40%2091.03,3.40%20120.08,54.00%2091.03,104.60%2032.97,104.60%203.92,54.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-ikon-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2058%2050'%20width='58'%20height='50'%3E%3Cpolygon%20points='14.93,0.75%2043.07,0.75%2057.13,25.00%2043.07,49.25%2014.93,49.25%200.87,25.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='1.5'%20stroke-linejoin='miter'/%3E%3Cpolygon%20points='15.36,1.50%2042.64,1.50%2056.27,25.00%2042.64,48.50%2015.36,48.50%201.73,25.00'%20fill='%23283a2f'/%3E%3Cpolygon%20points='16.92,4.20%2041.08,4.20%2053.14,25.00%2041.08,45.80%2016.92,45.80%204.86,25.00'%20fill='none'%20stroke='%23a98240'%20stroke-width='0.7'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-hex14x12-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2012'%20width='14'%20height='12'%3E%3Cpolygon%20points='3.84,0.60%2010.16,0.60%2013.31,6.00%2010.16,11.40%203.84,11.40%200.69,6.00'%20fill='%23283a2f'%20stroke='%23a98240'%20stroke-width='1.2'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-hex9-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%209%208'%20width='9'%20height='8'%3E%3Cpolygon%20points='2.57,0.55%206.43,0.55%208.37,4.00%206.43,7.45%202.57,7.45%200.63,4.00'%20fill='%23283a2f'%20stroke='%23a98240'%20stroke-width='1.1'%20stroke-linejoin='miter'/%3E%3C/svg%3E"); --sm-linie-d: var(--sm-end-l-d) calc(50% - 26px) 0 / 24px 8px no-repeat, var(--sm-end-r-d) calc(50% + 26px) 0 / 24px 8px no-repeat, linear-gradient(90deg, rgba(201,162,74,0) 0, #c9a24a 28px, #c9a24a 100%) 0 4px / calc(50% - 32px) 1px no-repeat, linear-gradient(270deg, rgba(201,162,74,0) 0, #c9a24a 28px, #c9a24a 100%) 100% 4px / calc(50% - 32px) 1px no-repeat; --sm-linie-h: var(--sm-end-l-h) calc(50% - 26px) 0 / 24px 8px no-repeat, var(--sm-end-r-h) calc(50% + 26px) 0 / 24px 8px no-repeat, linear-gradient(90deg, rgba(169,130,64,0) 0, #a98240 28px, #a98240 100%) 0 4px / calc(50% - 32px) 1px no-repeat, linear-gradient(270deg, rgba(169,130,64,0) 0, #a98240 28px, #a98240 100%) 100% 4px / calc(50% - 32px) 1px no-repeat; /* aktive Variante (Standard dunkel) */ --sm-stein: var(--sm-stein-d); --sm-end-l: var(--sm-end-l-d); --sm-end-r: var(--sm-end-r-d); --sm-linie: var(--sm-linie-d); --sm-nr60: var(--sm-nr60-d); --sm-hex11: var(--sm-hex11-d); --sm-hex10: var(--sm-hex10-d); --sm-hex14: var(--sm-hex14-d); } /* Haushalt = hell */ :root:has(.naht-unten) { --sm-stein: var(--sm-stein-h); --sm-end-l: var(--sm-end-l-h); --sm-end-r: var(--sm-end-r-h); --sm-linie: var(--sm-linie-h); --sm-nr60: var(--sm-nr60-h); --sm-hex11: var(--sm-hex11-h); --sm-hex10: var(--sm-hex10-h); --sm-hex14: var(--sm-hex14-h); } /* dunkle Inseln (Haushalt; auf den anderen Seiten wirkungslos, weil dort ohnehin dunkel) */ .werkstatt, footer, .kachel.dunkel, .mehr a.dunkel, .anleitung.dunkel { --sm-stein: var(--sm-stein-d); --sm-end-l: var(--sm-end-l-d); --sm-end-r: var(--sm-end-r-d); --sm-linie: var(--sm-linie-d); --sm-nr60: var(--sm-nr60-d); --sm-hex11: var(--sm-hex11-d); --sm-hex10: var(--sm-hex10-d); --sm-hex14: var(--sm-hex14-d); } /* ---------- Trennlinie: 1-px-Messinglinie, volle Deckkraft bis kurz vor den Enden, Art-Deco-Endstuecke am Ornament ---------- Maske der Schraegstriche wird aufgehoben. Kein content/top/left/width hier: bleibt je Seite wie gehabt (existiert ::before nicht, entsteht nichts). */ .abschnitt::before, footer::before, .trenner::before, .naht-unten::before, .werkstatt .naht-unten::before { height: 8px; -webkit-mask: none; mask: none; background: var(--sm-linie); } /* ---------- Stein: Smaragd-Sechseck in konzentrischem Messing-Umriss, 28 x 23, mittig auf der Linie ---------- */ .abschnitt::after, footer::after, .trenner::after, .naht-unten::after { width: 28px; height: 23px; margin-left: -14px; background: var(--sm-stein) center / 100% 100% no-repeat; clip-path: none; } .abschnitt::after, footer::after { top: 5px; } .trenner::after { top: 2px; } .naht-unten::after { top: -7px; } /* ---------- Nummern-Sechsecke: Smaragd-Fuellung, 1,5-px-Messingring, Haarlinie innen, Zahl in Messing-Licht ---------- */ /* Start: Finder-Kachel (Ring + Fuellung als ein Bild auf ::after, Aussenmass 60 x 52 wie das bisherige ::before) */ .anlass h3::before { display: none; } .anlass h3::after { left: calc(var(--pad) - 3px); top: -32px; width: 60px; height: 52px; clip-path: none; background: var(--sm-nr60) center / 100% 100% no-repeat; color: #deb668; } /* Autopflege + Haushalt: Kachel-Nummer (Ring inset -3px = 60 x 52; Haushalt-dunkel-Kachel und Autopflege-Kategoriefarbe werden einheitlich) */ .kachel .nr { color: #deb668; } .kachel .nr::before, .kachel.dunkel .nr::before { clip-path: none; background: var(--sm-nr60) center / 100% 100% no-repeat; } .kachel .nr::after { display: none; } /* Start .schritt .nr und Autopflege .schritt .nr2 (gleiche Geometrie: 62 x 54, Ring inset -3px = 68 x 60) */ .schritt .nr, .schritt .nr2 { color: #deb668; } .schritt .nr::before, .schritt .nr2::before { clip-path: none; background: var(--sm-nr68-d) center / 100% 100% no-repeat; } .schritt .nr::after, .schritt .nr2::after { display: none; } @media (max-width: 760px) { .schritt .nr::before { background-image: var(--sm-nr58-d); } } @media (max-width: 560px) { .schritt .nr2::before { background-image: var(--sm-nr58-d); } } /* Haushalt: Titel-Nummer .nr3 (56 x 48, Ring inset -3px; hell, im Werkstatt-Band dunkel) */ .nr3 { color: #deb668; } .nr3::before, .werkstatt .nr3::before { clip-path: none; background: var(--sm-nr62-h) center / 100% 100% no-repeat; } .werkstatt .nr3::before { background-image: var(--sm-nr62-d); } .nr3::after { display: none; } @media (max-width: 760px) { .nr3::before { background-image: var(--sm-nr54-h); } .werkstatt .nr3::before { background-image: var(--sm-nr54-d); } } /* Haushalt: Schritt-Nummer .nr2 in der Anleitung (nur ::after vorhanden: Ring liegt innerhalb der 50 x 44) */ .anleitung .nr2 { color: #deb668; } .anleitung .nr2::after, .anleitung.dunkel .nr2::after { clip-path: none; background: var(--sm-nr50-h) center / 100% 100% no-repeat; } .anleitung.dunkel .nr2::after { background-image: var(--sm-nr50-d); } @media (max-width: 640px) { .anleitung .nr2::after { background-image: var(--sm-nr44-h); } .anleitung.dunkel .nr2::after { background-image: var(--sm-nr44-d); } } /* Haushalt: Sechseck-Icon der "Sicher anwenden"-Liste (58 x 50, Icon-Strich bleibt Creme) */ .ikon { clip-path: none; background: var(--sm-ikon-h) center / 100% 100% no-repeat; } /* ---------- Geschichte: Kapitel-Plakette (Sechseck 132 x 114, <=1100 px: 112 x 97) und Lupe ---------- */ .plakette { color: #deb668; } .plakette::before { clip-path: none; background: var(--sm-plak132-d) center / 100% 100% no-repeat; } .plakette::after { display: none; } @media (max-width: 1100px) { .plakette::before { background-image: var(--sm-plak112-d); } } /* Lupe: Rand als Smaragd mit Messing-Doppelkontur; das Glas (.glas) bleibt unveraendert */ .lupe { clip-path: none; background: var(--sm-lupe160-d) center / 100% 100% no-repeat; } @media (max-width: 760px) { .lupe { background-image: var(--sm-lupe124-d); } } /* ---------- Kleine Sechsecke (Kicker, Bildunterschrift, Format, Aufzaehlung, Hinweis, Querverweis, Nav-Trenner, Scrollhinweis) ---------- */ .story-kopf .kicker::before, .kicker::before, .bildunter::before, .format::before { background: var(--sm-hex11) center / 100% 100% no-repeat; clip-path: none; } .mehr a::before { background: var(--sm-hex14) center / 100% 100% no-repeat; clip-path: none; } /* Haushalt-Aufzaehlung (Autopflege bleibt in Kategoriefarbe, deshalb nur mit Haushalt-Haken) */ :root:has(.naht-unten) .merk li::before { background: var(--sm-hex10) center / 100% 100% no-repeat; clip-path: none; opacity: 1; } .set-hinweis::before { background: var(--sm-hex14x12-h) center / 100% 100% no-repeat; clip-path: none; } .n-sep { background: var(--sm-hex9-h) center / 100% 100% no-repeat; clip-path: none; } /* Scrollhinweis (Haushalt): Punkt = Smaragd-Sechseck, Naht = 2-px-Linie statt Stiche */ .scrollhint { --scrollhint-f: #a98240; --scrollhint-text: #7a5a1e; } .scrollhint--hell { --scrollhint-f: #c9a24a; --scrollhint-text: #deb668; } .scrollhint__naht::before { -webkit-mask: none; mask: none; left: 6px; width: 2px; background: var(--scrollhint-f); } .scrollhint__punkt { background: var(--sm-hex12-h) center / 100% 100% no-repeat; clip-path: none; } .scrollhint--hell .scrollhint__punkt { background-image: var(--sm-hex12-d); } /* ---------- Geschichte: Schraegstrich-Naehte -> 1-px-Messinglinie (Boxen und Abstaende unveraendert, nur Hintergrund) ---------- 84-px-Naht unter Ueberschriften, Strecken-Linie neben Stadt./Wald., Linie neben der Kapitel-Plakette (mobil): Linie + Art-Deco-Endstueck am freien Ende, kein Stein. */ .held-text .unter::before, .kap-text h2::after, .strecke-kopf::after, .kap-marke::after { background: var(--sm-end-l-d) 100% 0 / 24px 8px no-repeat, linear-gradient(#c9a24a, #c9a24a) 0 4px / calc(100% - 30px) 1px no-repeat; } /* rechtsbuendige Ueberschrift (Kapitel Heute): Endstueck links, Linie laeuft zum rechten Textrand */ .kap-kopf h2::after { background: var(--sm-end-r-d) 0 0 / 24px 8px no-repeat, linear-gradient(#c9a24a, #c9a24a) 100% 4px / calc(100% - 30px) 1px no-repeat; } /* bis 1100 px steht die Ueberschrift links (die Seite setzt dort margin-left: 0): Endstueck rechts wie bei den anderen */ @media (max-width: 1100px) { .kap-kopf h2::after { background: var(--sm-end-l-d) 100% 0 / 24px 8px no-repeat, linear-gradient(#c9a24a, #c9a24a) 0 4px / calc(100% - 30px) 1px no-repeat; } } /* Zeitstrahl (senkrecht): 1-px-Messinglinie, Ein-/Ausblenden an den Enden bleibt wie in der Seite (deren Maske), Plaketten liegen darauf */ .verlauf::before { width: 1px; margin-left: 0; background: linear-gradient(#c9a24a, #c9a24a); } /* ---------- Windows-Kontrastmodus: Systemfarben (Hintergrundbilder/Verlaeufe werden dort nicht verlaesslich gezeichnet) ---------- */ @media (forced-colors: active) { .abschnitt::before, footer::before, .trenner::before, .naht-unten::before, .werkstatt .naht-unten::before { forced-color-adjust: none; background: linear-gradient(CanvasText, CanvasText) 0 4px / calc(50% - 20px) 1px no-repeat, linear-gradient(CanvasText, CanvasText) 100% 4px / calc(50% - 20px) 1px no-repeat; } .abschnitt::after, footer::after, .trenner::after, .naht-unten::after { forced-color-adjust: none; background: CanvasText; clip-path: var(--hex, polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%)); } /* Nummern: Ring (CanvasText) + Fuellung (Canvas) in der urspruenglichen Zweischicht-Geometrie */ .anlass h3::before { display: block; content: ""; forced-color-adjust: none; position: absolute; left: calc(var(--pad) - 3px); top: -32px; width: 60px; height: 52px; background: CanvasText; clip-path: var(--hex); } .anlass h3::after { forced-color-adjust: none; left: var(--pad); top: -29px; width: 54px; height: 46px; background: Canvas; color: CanvasText; clip-path: var(--hex); } .kachel .nr, .schritt .nr, .schritt .nr2, .nr3, .plakette { color: CanvasText; } .kachel .nr::before, .kachel.dunkel .nr::before, .schritt .nr::before, .schritt .nr2::before, .nr3::before, .werkstatt .nr3::before, .plakette::before { forced-color-adjust: none; background: CanvasText; clip-path: var(--hex); } .kachel .nr::after, .schritt .nr::after, .schritt .nr2::after, .nr3::after { display: block; content: ""; forced-color-adjust: none; position: absolute; z-index: -1; inset: 0; background: Canvas; clip-path: var(--hex); } .plakette::after { display: block; content: ""; forced-color-adjust: none; position: absolute; inset: 6px 7px; background: Canvas; clip-path: var(--hex); } /* .nr2 hat nur ::after: ::before liefert den Ring (CanvasText), ::after die Fuellung (Canvas), Zahl bleibt CanvasText */ .anleitung .nr2 { color: CanvasText; } .anleitung .nr2::before { content: ""; position: absolute; z-index: -2; inset: 0; forced-color-adjust: none; background: CanvasText; clip-path: var(--hex); } .anleitung .nr2::after, .anleitung.dunkel .nr2::after { forced-color-adjust: none; inset: 2px; background: Canvas; clip-path: var(--hex); } .ikon { position: relative; background: none; isolation: isolate; } .ikon::before { content: ""; position: absolute; z-index: -2; inset: 0; background: CanvasText; clip-path: var(--hex); } .ikon::after { content: ""; position: absolute; z-index: -1; inset: 2px; background: Canvas; clip-path: var(--hex); } .lupe { forced-color-adjust: none; background: CanvasText; clip-path: var(--hex); } /* kleine Sechsecke */ .story-kopf .kicker::before, .kicker::before, .bildunter::before, .format::before, .mehr a::before, .set-hinweis::before, .n-sep, .scrollhint__punkt { forced-color-adjust: none; background: CanvasText; clip-path: var(--hex, polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%)); } :root:has(.naht-unten) .merk li::before { forced-color-adjust: none; background: CanvasText; clip-path: var(--hex, polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%)); } .scrollhint__naht::before { forced-color-adjust: none; background: CanvasText; } .held-text .unter::before, .kap-text h2::after, .strecke-kopf::after, .kap-marke::after { forced-color-adjust: none; background: linear-gradient(CanvasText, CanvasText) 0 4px / 100% 1px no-repeat; } .kap-kopf h2::after { forced-color-adjust: none; background: linear-gradient(CanvasText, CanvasText) 0 4px / 100% 1px no-repeat; } .verlauf::before { forced-color-adjust: none; background: CanvasText; } }