/* ========================================================================= QUADRONET Layout - Fuss "Einzugsgebiet" ------------------------------------------------------------------------- Entschieden 22.10.2026 (Dirk): Entwurf C (Radar 100 km) mit den Rechtliches-Plaketten aus Entwurf B. Vorlage: Projektinformationen/QN-Footer-Entwuerfe.html Markup: Partials/Page/Fuss.html + Partials/Page/Einzugsgebiet.html. Keil und Grundflaeche: 40-abschnitte.css (hier wird nur der Grund ueberschrieben). ========================================================================= */ @layer qn.theme { .fuss { background: radial-gradient(70% 90% at 78% 30%, #24384A 0%, #1D2C39 45%, #16212B 100%); color: var(--hell); /* Trennung nur bei langen Woertern, mind. 4 Zeichen je Seite (sonst "Fo-toaufnahmen", "Ge-spraeche"). Safari ignoriert es. */ hyphenate-limit-chars: 10 4 4; } .fuss a { color: inherit; text-decoration-color: rgba(234, 244, 255, .3); text-underline-offset: .2em; } .fuss a:hover { color: #fff; text-decoration-color: currentColor; text-decoration-thickness: 2px; } /* ----- 1. Einzugsgebiet + Radar --------------------------------------- */ .fuss__haupt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(1rem, 2vw, 1.6rem) clamp(1.6rem, 3vw, 2.4rem); } @media (max-width: 900px) { .fuss__haupt { grid-template-columns: 1fr; } } .fuss__kick { display: flex; align-items: center; gap: .7em; margin: 0; font: 500 .72rem/1.5 var(--qn-schriftfamilie); letter-spacing: .19em; text-transform: uppercase; color: var(--hell-2); } .fuss__kick .wuerfel { --k: .98em; margin-right: 0; } .fuss__satz { margin-top: .7rem; max-width: 15ch; font: 400 clamp(2.1rem, 4.8vw, 3.8rem)/.92 var(--qn-schriftfamilie-ueberschrift); font-synthesis: none; text-transform: uppercase; letter-spacing: .012em; } .fuss__satz em { font-style: normal; color: var(--orange); } .fuss__orte { margin-top: 1.1rem; max-width: 52ch; font-size: .95rem; color: var(--hell-2); } .fuss__orte strong { font-weight: 400; color: var(--hell); } /* Ueberregional: Fernbetreuung */ .fuss__fern { margin-top: 1.4rem; max-width: 52ch; padding: .9rem 1.1rem 1rem; border-left: 3px solid var(--orange); background: rgba(234, 244, 255, .045); font-size: .92rem; color: var(--hell-2); } .fuss__fern strong { font-weight: 400; color: var(--hell); } .fuss__fern-titel { margin: 0 0 .35rem; font: 600 .7rem/1.4 var(--qn-schriftfamilie); letter-spacing: .18em; text-transform: uppercase; color: var(--orange-hell); } .fuss__kanaele { display: flex; flex-wrap: wrap; gap: .35rem; margin: .75rem 0 0; padding: 0; list-style: none; } .fuss__kanaele li { display: inline-flex; align-items: center; gap: .45em; margin: 0; padding: .28rem .5rem; border: 1px solid rgba(234, 244, 255, .26); border-radius: 3px; font: 600 .68rem/1.2 var(--qn-schriftfamilie); letter-spacing: .07em; text-transform: uppercase; color: var(--hell); } /* Immer EINE Zeile, nur Logos (Dirk, 23.10.2026). Mit sechs Kanaelen passen die Namen nirgends in eine Zeile (Bedarf 575 px, Fuss-Spalte am Desktop ca. 535 px - gemessen). Die Kacheln teilen sich die Breite; der Name bleibt fuer Bildschirmleser im span (nur optisch versteckt) und steht als title-Hinweis an der Kachel. */ .fuss__kanaele { flex-wrap: nowrap; gap: .5rem; } .fuss__kanaele li { position: relative; flex: 1 1 0; justify-content: center; padding: .55rem 0; } .fuss__kanaele li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 600px) { .fuss__kanaele { gap: .4rem; } } /* Logos der Kanaele (23.10.2026), Ablage Resources/Public/Icons/Kanaele/. Farbige App-Kacheln aus Dirks Dateien in Projektinformationen: - whatsapp.svg, signal.svg: aus den Sammelboegen whatsapp-logos.ai / signal-logo.ai (EPS) ausgeschnitten, Vektor. WhatsApp: das Symbol ist im Original ausgestanzt - weisse Flaeche dahinter, sonst dunkel. - teamviewer.png: aus TeamViewer_Logo_Icon_Only.svg.webp, Kreis im Original durchsichtig -> weiss gefuellt (wie das offizielle Icon). - teams.svg: teams-logo.svg unveraendert (nur Kopfzeilen entfernt). - telefon.svg, email.svg: eigene Kacheln in Markenorange. Markenrecht bleibt beim Hersteller. EINGEBETTET als data-URI (23.10.2026): Beim Uebertragen auf Dirks Platte wird in jede Bilddatei ein C2PA-Herkunftsvermerk geschrieben (+8 KB je Datei); CSS bleibt unberuehrt. So kein Ballast und sechs Anfragen weniger. Quelldateien: Projektinformationen (siehe oben); TeamViewer als WebP 96 px. */ .fuss__kanaele li::before { content: ""; flex: 0 0 auto; width: 1.9rem; /* rem, nicht em: die Plakette hat .68rem Schrift */ height: 1.9rem; background: no-repeat center / contain; } .fuss__kanaele .k-telefon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='5.4' fill='%23FF8800'/%3E%3Cpath transform='translate(4.2 4.2) scale(.65)' d='M7.2 3.2h2.4l1.5 4.1-2 1.4a11.6 11.6 0 0 0 6.2 6.2l1.4-2 4.1 1.5v2.4a2.4 2.4 0 0 1-2.6 2.4C11 18.6 5.4 13 4.8 5.8a2.4 2.4 0 0 1 2.4-2.6Z' fill='none' stroke='%23141A1F' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E"); } .fuss__kanaele .k-email::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='5.4' fill='%23FF8800'/%3E%3Crect x='5.2' y='7.4' width='13.6' height='9.4' rx='1.4' fill='none' stroke='%23141A1F' stroke-width='1.6'/%3E%3Cpath d='M5.8 8.3l6.2 4.6 6.2-4.6' fill='none' stroke='%23141A1F' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); } .fuss__kanaele .k-teamviewer::before { background-image: url("data:image/webp;base64,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"); } .fuss__kanaele .k-whatsapp::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='2945 0 839 839' style=''%3E%3Cdefs%3E%3C/defs%3E%3Crect x='3028.9' y='83.9' width='671.2' height='671.2' rx='151.0' fill='%23fff'/%3E%3Cpath fill-rule='nonzero' fill='rgb(24.612427%25, 72.407532%25, 23.783875%25)' fill-opacity='1' d='M 3485.328125 510.242188 C 3481.316406 519.660156 3473.808594 532.976562 3461.273438 540.632812 C 3461.273438 540.632812 3427.875 566.285156 3359.925781 532.335938 C 3359.925781 532.335938 3294.894531 498.847656 3258.054688 438.574219 C 3258.054688 438.574219 3226.035156 392.988281 3237.914062 351.550781 C 3241.292969 339.746094 3248.628906 329.449219 3258.15625 321.679688 L 3263.015625 317.710938 C 3270.722656 310.785156 3282.730469 312.003906 3288.886719 320.339844 L 3321.226562 366.269531 C 3326.476562 373.714844 3324.507812 384.023438 3316.878906 389 L 3307.929688 394.847656 C 3304.03125 397.398438 3300.832031 400.988281 3299.183594 405.335938 C 3297.234375 410.433594 3296.695312 417.5 3302.273438 425.417969 C 3302.273438 425.417969 3312.71875 452.582031 3366.164062 486.671875 C 3371.921875 490.347656 3378.847656 492.078125 3385.585938 490.917969 C 3390.957031 489.988281 3396.792969 487.300781 3401.09375 480.773438 L 3410.96875 465.738281 C 3414.089844 461.007812 3420.355469 459.527344 3425.253906 462.367188 L 3480.046875 494.207031 C 3485.625 497.4375 3487.855469 504.316406 3485.328125 510.242188 Z M 3363.925781 205.535156 C 3247.019531 205.535156 3151.898438 300.648438 3151.898438 417.550781 C 3151.898438 462.917969 3166.355469 504.894531 3190.707031 539.414062 L 3168.8125 615.472656 L 3240.003906 589.230469 C 3274.921875 614.492188 3317.636719 629.566406 3363.925781 629.566406 C 3480.828125 629.566406 3575.9375 534.457031 3575.9375 417.550781 C 3575.9375 300.648438 3480.828125 205.535156 3363.925781 205.535156 '/%3E%3Cpath fill-rule='nonzero' fill='rgb(24.612427%25, 72.407532%25, 23.783875%25)' fill-opacity='1' d='M 3613.046875 442.59375 C 3601.769531 557.929688 3509.9375 651.96875 3394.914062 666.003906 C 3336.261719 673.164062 3281.148438 659.65625 3235.402344 632.097656 L 3122.488281 673.042969 C 3117.597656 674.8125 3112.769531 670.285156 3114.242188 665.296875 L 3149.289062 545.851562 C 3121.769531 500.167969 3108.324219 445.132812 3115.460938 386.570312 C 3129.484375 271.617188 3223.386719 179.816406 3338.632812 168.457031 C 3496.414062 152.894531 3628.453125 284.84375 3613.046875 442.59375 Z M 3599.03125 0 L 3128.804688 0 C 3026.507812 0 2943.59375 82.925781 2943.59375 185.203125 L 2943.59375 655.4375 C 2943.59375 757.71875 3026.507812 840.640625 3128.804688 840.640625 L 3599.03125 840.640625 C 3701.320312 840.640625 3784.246094 757.71875 3784.246094 655.4375 L 3784.246094 185.203125 C 3784.246094 82.925781 3701.320312 0 3599.03125 0 '/%3E%3C/svg%3E"); } .fuss__kanaele .k-signal::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='6552 482 1034 1034' style=''%3E%3Cdefs%3E%3C/defs%3E%3Cpath fill='none' stroke-width='10' stroke-linecap='butt' stroke-linejoin='miter' stroke='rgb(100%25, 100%25, 100%25)' stroke-opacity='1' stroke-miterlimit='10' d='M 80005 5 L 5 5 L 5 20005 L 80005 20005 Z M 80005 5 ' transform='matrix(0.1, 0, 0, -0.1, 0, 2001)'/%3E%3Cpath fill-rule='nonzero' fill='rgb(31.015015%25, 41.525269%25, 73.707581%25)' fill-opacity='1' d='M 7345.519531 1517.738281 L 6793.410156 1517.738281 C 6660.210938 1517.738281 6552.230469 1409.761719 6552.230469 1276.558594 L 6552.230469 724.441406 C 6552.230469 591.238281 6660.210938 483.261719 6793.410156 483.261719 L 7345.519531 483.261719 C 7478.730469 483.261719 7586.710938 591.238281 7586.710938 724.441406 L 7586.710938 1276.558594 C 7586.710938 1409.761719 7478.730469 1517.738281 7345.519531 1517.738281 '/%3E%3Cpath fill-rule='nonzero' fill='rgb(100%25, 100%25, 100%25)' fill-opacity='1' d='M 7069.46875 699.238281 C 6903.039062 699.339844 6768.320312 834.28125 6768.320312 1000.609375 C 6768.410156 1057.261719 6784.449219 1112.738281 6814.570312 1160.71875 L 6785.601562 1284.378906 L 6909.160156 1255.421875 C 7050 1344 7235.980469 1301.769531 7324.589844 1161.03125 C 7413.160156 1020.300781 7371.03125 834.28125 7230.328125 745.589844 C 7182.128906 715.289062 7126.378906 699.21875 7069.46875 699.238281 Z M 6897.339844 1289.441406 L 6847.609375 1301.019531 L 6855.539062 1334.941406 L 6892.058594 1326.410156 C 6919.871094 1341.53125 6949.519531 1353.011719 6980.25 1360.539062 L 6988.550781 1326.828125 C 6956.570312 1318.859375 6925.941406 1306.191406 6897.671875 1289.230469 Z M 6735.140625 1214.230469 L 6769.058594 1222.019531 L 6780.648438 1172.308594 C 6763.730469 1143.921875 6751.121094 1113.179688 6743.238281 1081.089844 L 6709.550781 1089.398438 C 6717.109375 1120.128906 6728.601562 1149.75 6743.660156 1177.570312 Z M 6816.75 1308.191406 L 6745.050781 1324.828125 L 6761.78125 1253.101562 L 6727.949219 1245.199219 L 6711.21875 1316.929688 C 6710.160156 1321.378906 6710.019531 1325.988281 6710.761719 1330.5 C 6711.5 1335.011719 6713.070312 1339.328125 6715.480469 1343.210938 C 6717.890625 1347.089844 6721.050781 1350.46875 6724.75 1353.128906 C 6728.460938 1355.800781 6732.679688 1357.710938 6737.128906 1358.75 C 6742.320312 1359.910156 6747.738281 1359.910156 6752.929688 1358.75 L 6824.671875 1342.210938 Z M 7019.140625 668.269531 C 7052.5 663.210938 7086.429688 663.210938 7119.800781 668.269531 L 7124.988281 633.929688 C 7088.191406 628.351562 7050.738281 628.351562 7013.941406 633.929688 Z M 7386.929688 808.789062 L 7357.128906 826.691406 C 7374.601562 855.578125 7387.621094 886.941406 7395.691406 919.710938 L 7429.378906 911.378906 C 7420.53125 875.238281 7406.210938 840.640625 7386.929688 808.789062 Z M 6798.949219 801.199219 C 6818.96875 774.019531 6842.980469 750.019531 6870.179688 729.988281 L 6849.328125 701.980469 C 6819.441406 724.058594 6793.019531 750.46875 6770.960938 780.351562 Z M 7268.75 729.988281 C 7295.949219 750.019531 7319.960938 774.019531 7339.980469 801.199219 L 7367.96875 780.351562 C 7345.910156 750.46875 7319.5 724.058594 7289.601562 701.980469 Z M 7339.980469 1199.800781 C 7319.960938 1226.949219 7295.949219 1250.921875 7268.75 1270.898438 L 7289.421875 1298.921875 C 7319.359375 1276.878906 7345.820312 1250.5 7367.96875 1220.648438 Z M 7119.800781 1332.730469 C 7086.429688 1337.789062 7052.5 1337.789062 7019.140625 1332.730469 L 7013.941406 1367.070312 C 7050.738281 1372.648438 7088.191406 1372.648438 7124.988281 1367.070312 Z M 7429.378906 1089.398438 L 7395.691406 1081.089844 C 7387.621094 1113.921875 7374.601562 1145.351562 7357.128906 1174.308594 L 7386.929688 1192.21875 C 7406.25 1160.300781 7420.53125 1125.628906 7429.378906 1089.398438 Z M 7405.46875 1000.5 C 7405.46875 1017.359375 7404.210938 1034.191406 7401.710938 1050.851562 L 7436.050781 1056.011719 C 7441.609375 1019.179688 7441.609375 981.71875 7436.050781 944.878906 L 7401.710938 950.148438 C 7404.210938 966.808594 7405.511719 983.640625 7405.46875 1000.5 Z M 7261.058594 1317.878906 L 7243.261719 1288.179688 C 7214.390625 1305.640625 7183.011719 1318.640625 7150.25 1326.730469 L 7158.589844 1360.441406 C 7194.691406 1351.5 7229.261719 1337.148438 7261.058594 1317.878906 Z M 6733.421875 1000.5 C 6733.421875 983.640625 6734.71875 966.808594 6737.21875 950.148438 L 6702.878906 944.878906 C 6697.320312 981.71875 6697.320312 1019.179688 6702.878906 1056.011719 L 6737.21875 1050.851562 C 6734.71875 1034.191406 6733.46875 1017.359375 6733.421875 1000.5 Z M 6752 808.789062 C 6732.71875 840.679688 6718.398438 875.308594 6709.550781 911.488281 L 6743.238281 919.808594 C 6751.351562 887.019531 6764.328125 855.621094 6781.800781 826.691406 Z M 7158.488281 640.570312 L 7150.148438 674.269531 C 7182.960938 682.378906 7214.339844 695.378906 7243.261719 712.828125 L 7261.289062 683.019531 C 7229.359375 663.75 7194.691406 649.441406 7158.488281 640.570312 Z M 6980.441406 640.570312 L 6988.78125 674.269531 C 6955.96875 682.378906 6924.589844 695.378906 6895.671875 712.828125 L 6877.878906 683.019531 C 6909.71875 663.730469 6944.289062 649.421875 6980.441406 640.570312 '/%3E%3C/svg%3E"); } .fuss__kanaele .k-teams::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' version='1.1' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd' viewBox='0 0 84666.64 84666.64' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:xodm='http://www.corel.com/coreldraw/odm/2003'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C![CDATA[ .fil0 {fill:none} .fil5 {fill:%23464EB8} .fil4 {fill:%23464EB8} .fil1 {fill:%23505AC9} .fil2 {fill:%23505AC9} .fil3 {fill:%237B83EB} .fil6 {fill:white} ]]%3E%3C/style%3E%3C/defs%3E%3Cg id='Layer_x0020_1'%3E%3Cmetadata id='CorelCorpID_0Corel-Layer'/%3E%3Crect class='fil0' x='-0.01' y='-0' width='84666.64' height='84666.64'/%3E%3Cg id='_2970465301440'%3E%3Cpath class='fil1' d='M64429.8 78310.34c5001.87,160.25 9390.22,-2609.45 11221.05,-7296.51 747.56,-2018.18 749.89,-3364.05 749.89,-5436.95l0 -14891.71c0,-1485.18 106,-3296.97 -188.63,-4739.28 -1103.79,-5401.94 -5330.11,-8939.76 -10810.44,-9275.6 -4867.45,-6.75 -9733.58,-0.68 -14600.91,-0.68 433.64,547.03 937.17,1263.88 1401.19,2017.93 1719.6,3192.88 1350.03,5287.62 1454.2,8904.2l-21.71 17280.79c0,1100.47 -54.93,2283.46 68.4,3361.42 503.36,4589.3 3391.03,8114.41 7798.07,9509.9 1010.12,329.59 1779.85,474.93 2928.89,566.49z'/%3E%3Cpath class='fil2' d='M63136.91 13904.04c5244.54,0 9496.14,4251.46 9496.14,9496.13 0,5244.67 -4251.6,9496.14 -9496.14,9496.14 -5244.55,0 -9496.14,-4251.47 -9496.14,-9496.14 0,-5244.67 4251.59,-9496.13 9496.14,-9496.13z'/%3E%3Cpath class='fil3' d='M15979.9 42284.54c-647.46,13416.9 1690.63,25826.62 5250.58,30358.91 3526.17,3632.94 8396.05,5522.74 12794,5666.89l2880.87 0 27524.45 0c-5661.58,-557.4 -10024.39,-4336.82 -10680.91,-10076.39 -123.33,-1077.96 -75.11,-2276.03 -75.11,-3376.5l-0.81 -17265.71c-6.63,-4663.52 236.05,-7143.89 -2872.21,-10922.13 -2231.83,-2514.31 -5567.85,-3792.8 -8238.85,-3773.3 -4004.67,0.04 -8011.22,-0.13 -12015.94,-0.13 -3190.16,0 -5609.48,-179.71 -8028.25,955.35 -2829.85,1260.6 -5782.44,4116.58 -6537.82,8433.01z'/%3E%3Cpath class='fil4' d='M34756.4 6350.29c6277.56,0 11366.56,5088.88 11366.56,11366.6 0,6277.73 -5089,11366.56 -11366.56,11366.56 -6277.55,0 -11366.6,-5088.83 -11366.6,-11366.56 0,-6277.72 5089.05,-11366.6 11366.6,-11366.6z'/%3E%3Cpath class='fil5' d='M14303.85 42320.52l18172.03 0c3331.59,0 6057.44,2725.98 6057.44,6057.48l0 18171.99c0,3331.5 -2725.85,6057.44 -6057.44,6057.44l-18172.03 0c-3331.6,0 -6057.44,-2725.94 -6057.44,-6057.44l0 -18171.99c0,-3331.5 2725.84,-6057.48 6057.44,-6057.48z'/%3E%3Cpath class='fil6' d='M16805.59 51978.82l4643.18 0.64 0 14136.29 3884.57 1.49 0.21 -14137.78 4640.12 0c0.93,-137.65 0.04,-3057.44 0.04,-3168.75l-13166.5 3.23 -1.62 3164.88z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } @media (max-width: 600px) { .fuss__kanaele li::before { width: 1.6rem; height: 1.6rem; } } .fuss__kontakt { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1.1rem; margin: 1.6rem 0 0; font-size: .95rem; } .fuss__kontakt dt { font: 600 .66rem/2.1 var(--qn-schriftfamilie); letter-spacing: .18em; text-transform: uppercase; color: var(--hell-2); } .fuss__kontakt dd { margin: 0; } /* Adressteile nur zwischen den Teilen umbrechen, nie "Bad | Bergzabern" */ .fuss__nw { white-space: nowrap; } .fuss__kontakt a { color: var(--orange-hell); } .fuss__knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; } /* Garagentor in Fuss-Groesse: deutlich kleiner als gt--klein */ .fuss .gt--fuss { --gt-schrift: .74rem; --gt-luft-y: .85em; --gt-luft-x: 1.3em; --gt-wand: 5px; --gt-tiefe: 42px; } .fuss .gt--fuss .gt__text small { font-size: .78em; } .fuss .gt--fuss .gt__text { text-shadow: 0 3px 10px rgba(0, 0, 0, .7); } .fuss a.gt, .fuss a.gt:hover { color: #fff; text-decoration: none; } /* Radar */ .radar { --radar-tempo: 9s; /* eine Umdrehung des Strahls - Takt fuer die Staedte-Pulse */ position: relative; justify-self: center; width: 100%; max-width: 36rem; aspect-ratio: 1; } .radar svg { width: 100%; height: 100%; overflow: visible; } .radar .ring { fill: none; stroke: rgba(159, 192, 216, .28); stroke-width: .35; } .radar .ring.r100 { stroke: rgba(255, 136, 0, .55); stroke-width: .5; stroke-dasharray: 1.6 1.2; } .radar .achse { stroke: rgba(159, 192, 216, .14); stroke-width: .3; } .radar .km { font: 500 4px var(--qn-schriftfamilie); fill: var(--hell-2); } .radar .rhein { fill: none; stroke: #79B0C0; stroke-width: 1.1; stroke-linecap: round; opacity: .55; } .radar .rhein-t { font: italic 400 3.6px var(--qn-schriftfamilie); fill: #79B0C0; opacity: .85; } .radar .ort { --punkt: var(--hell); --w: 0; } .radar .ort.fern { --punkt: var(--hell-2); } .radar .ort circle { fill: var(--punkt); } /* Puls-Ring: liegt unter dem Punkt, waechst aus ihm heraus */ .radar .ort .ping { fill: none; stroke: var(--orange-hell); stroke-width: .45; opacity: 0; transform-box: fill-box; transform-origin: center; } /* Winkel je Stadt im Uhrzeigersinn ab Norden: atan2(x, -y) aus den Koordinaten in Partials/Page/Einzugsgebiet.html */ .radar .o-landau { --w: 39.6; } .radar .o-neustadt { --w: 20.4; } .radar .o-pirmasens { --w: 290.9; } .radar .o-kaiserslautern { --w: 336.2; } .radar .o-speyer { --w: 53.4; } .radar .o-karlsruhe { --w: 110.0; } .radar .o-wissembourg { --w: 208.1; } .radar .o-mannheim { --w: 38.6; } .radar .o-ludwigshafen { --w: 37.2; } .radar .o-heidelberg { --w: 56.2; } .radar .o-haguenau { --w: 205.5; } .radar .o-baden-baden { --w: 155.3; } .radar .o-zweibruecken { --w: 289.3; } .radar .o-strasbourg { --w: 197.0; } .radar .o-saarbruecken { --w: 281.8; } .radar .o-worms { --w: 24.1; } .radar .o-mainz { --w: 10.4; } .radar .ort text { font: 500 4.6px var(--qn-schriftfamilie); fill: var(--hell); paint-order: stroke; stroke: #1B2833; stroke-width: 1.2px; } .radar .ort.fern text { fill: var(--hell-2); } .radar .weit text { font: 600 4.4px var(--qn-schriftfamilie); fill: var(--orange-hell); letter-spacing: .2px; } .radar .weit text.klein { font-weight: 400; fill: var(--hell-2); } .radar .weit-pfeil { fill: none; stroke: var(--orange-hell); stroke-width: .7; stroke-dasharray: 1.4 1; } .radar .weit-pfeil + .weit-pfeil { stroke-dasharray: none; } .radar .mitte rect { fill: var(--orange); } .radar .mitte text { font: 400 7.5px var(--qn-schriftfamilie-ueberschrift); fill: var(--orange); letter-spacing: .3px; } @media (max-width: 600px) { /* ferne Orte am Telefon ganz weg (Punkt ohne Namen wirkt wie Rauschen), bei "eng" bleibt der Punkt - er sitzt neben Mannheim */ .radar .ort.fern { display: none; } .radar .ort.eng text { display: none; } .radar .ort text { font-size: 6px; } .radar .km { font-size: 5.5px; } .radar .weit text { font-size: 5.6px; } } .radar__strahl { position: absolute; inset: 4.5%; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, transparent 0deg 300deg, rgba(255, 136, 0, .16) 352deg, rgba(255, 136, 0, .32) 360deg); mask: radial-gradient(circle, #000 0 99.5%, transparent 100%); } @media (prefers-reduced-motion: no-preference) { @keyframes qn-radar { to { transform: rotate(1turn); } } .radar__strahl { animation: qn-radar var(--radar-tempo) linear infinite; } /* Staedte pulsen, wenn der Strahl darueberstreicht (Dirk, 23.10.2026). Der Strahl startet oben (Norden) und dreht im Uhrzeigersinn; eine Stadt im Winkel --w wird nach --w/360 einer Umdrehung erreicht. Strahl und Pulse starten im selben Moment und laufen im selben Takt - sie bleiben deshalb dauerhaft synchron. Puls = runder Ring, der aufgeht und verblasst (~0,8 s), dazu blitzt der Punkt kurz orange auf. */ @keyframes qn-ort-ring { 0% { transform: scale(1); opacity: .9; } 9%, 100% { transform: scale(5.5); opacity: 0; } } @keyframes qn-ort-blitz { 0%, 3% { fill: var(--orange-hell); transform: scale(1.5); } 10%, 100% { fill: var(--punkt); transform: scale(1); } } .radar .ort .ping { opacity: 0; animation: qn-ort-ring var(--radar-tempo) ease-out infinite; animation-delay: calc(var(--w) * var(--radar-tempo) / 360); } .radar .ort circle:not(.ping) { transform-box: fill-box; transform-origin: center; animation: qn-ort-blitz var(--radar-tempo) ease-out infinite; animation-delay: calc(var(--w) * var(--radar-tempo) / 360); } @keyframes qn-puls { 0% { r: 2; opacity: .9; } 100% { r: 16; opacity: 0; } } .radar .puls { animation: qn-puls 3s ease-out infinite; } } @media (prefers-reduced-motion: reduce) { .radar__strahl { display: none; } } /* ----- 2. Spalten aus der Hauptnavigation ----------------------------- */ .fuss__navi { border-top: 1px solid rgba(190, 215, 235, .18); } .fuss__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.6rem 2rem; padding-block: 1.8rem; font-size: .9rem; } /* Telefon: zwei Spalten statt fuenf untereinander (spart ca. 600 px). Lange Woerter ("Barrierefreiheitschecker") werden getrennt. */ @media (max-width: 600px) { .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.2rem; } .fuss__liste a { hyphens: auto; } } .fuss__titel { margin: 0 0 .9rem; font: 600 .72rem/1.3 var(--qn-schriftfamilie); letter-spacing: .19em; text-transform: uppercase; color: var(--hell-2); } .fuss__titel a { text-decoration: none; } .fuss__liste { margin: 0; padding: 0; list-style: none; } .fuss__liste li + li { margin-top: .35rem; } .fuss__liste a { text-decoration: none; } .fuss__liste a:hover, .fuss__titel a:hover { text-decoration: underline; } .fuss__liste a[aria-current="page"] { color: var(--orange-hell); } /* ----- 3. Rechtliches als Pruefplaketten + Copyright ------------------ */ .fuss__unten { background: rgba(0, 0, 0, .22); } .fuss__leiste { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 2rem; padding-block: 1.1rem 1.4rem; } .fuss__titel--recht { margin-bottom: .6rem; } .fuss__recht { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; } .fuss__recht li { margin: 0; } .fuss__recht a { display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .75rem; border: 1px dashed rgba(234, 244, 255, .32); border-radius: 3px; font: 600 .66rem/1 var(--qn-schriftfamilie); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; } .fuss__recht a:hover, .fuss__recht a:focus-visible { border-style: solid; border-color: var(--orange); color: #fff; } .fuss__recht a[aria-current="page"] { border-style: solid; border-color: var(--orange-hell); color: var(--orange-hell); } .fuss__copy { display: flex; align-items: center; gap: .7rem; margin: 0; font-size: .78rem; color: var(--hell-2); } .fuss__copy .wuerfel { --k: .9em; margin-right: 0; } }