Election Templates

ihk-election-static-templates/src/musterstadt.svg

@@ -0,0 +1,15 @@
+<svg width="837" height="180" viewBox="0 0 837 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2115_4199)">
+<path d="M444.232 90V30.66H434.256L417.4 81.142H417.228L400.372 30.66H390.31V90H396.33V37.798H396.502L413.96 90H420.582L438.04 37.798H438.212V90H444.232ZM487.223 90V49.064H481.375V65.92C481.375 72.37 478.021 85.098 469.851 85.098C463.143 85.098 463.831 76.412 463.831 71.768V49.064H457.983V78.304C457.983 84.84 461.251 90.946 468.475 90.946C475.527 90.946 479.311 86.818 481.203 80.54H481.375V90H487.223ZM524.031 78.562C524.031 71.854 519.473 69.876 514.485 66.866L511.045 64.802C508.637 63.34 503.649 61.792 503.649 58.352C503.649 54.396 508.723 53.02 511.905 53.02C515.001 53.02 518.527 53.794 521.451 54.912V49.494C518.269 48.72 515.173 48.118 511.819 48.118C504.767 48.118 497.801 50.87 497.801 58.954C497.801 65.232 502.273 67.468 507.089 70.048L510.787 72.026C513.797 73.66 518.183 75.38 518.183 79.422C518.183 84.84 512.593 86.044 508.207 86.044C504.595 86.044 501.069 85.098 497.629 83.894V89.226C501.241 90.344 505.025 90.946 508.809 90.946C516.979 90.946 524.031 87.764 524.031 78.562ZM552.851 53.966V49.064H541.843V35.82L535.995 39.518V49.064H529.287V53.966H535.995V80.368C535.995 88.28 539.693 90.946 547.347 90.946C549.067 90.946 550.787 90.774 552.507 90.516V85.27C551.045 85.786 550.185 86.044 548.551 86.044C543.907 86.044 541.843 83.55 541.843 79.164V53.966H552.851ZM589.316 65.662V63.684C589.316 54.654 584.586 48.118 575.04 48.118C563 48.118 559.044 57.492 559.044 68.156C559.044 81.4 564.806 90.946 578.996 90.946C582.178 90.946 585.36 90.688 588.37 89.742V84.926C585.618 85.614 583.124 86.044 580.286 86.044C570.224 86.044 565.752 77.014 565.752 68.07V65.662H589.316ZM582.608 60.76H566.182C567.042 56.288 569.966 53.02 574.782 53.02C579.254 53.02 582.608 56.288 582.608 60.76ZM619.703 54.396V48.118C613.167 48.118 608.609 51.042 606.029 56.976H605.857V49.064H600.009V90H605.857V73.058C605.857 64.114 609.125 54.396 619.703 54.396ZM649.84 78.562C649.84 71.854 645.282 69.876 640.294 66.866L636.854 64.802C634.446 63.34 629.458 61.792 629.458 58.352C629.458 54.396 634.532 53.02 637.714 53.02C640.81 53.02 644.336 53.794 647.26 54.912V49.494C644.078 48.72 640.982 48.118 637.628 48.118C630.576 48.118 623.61 50.87 623.61 58.954C623.61 65.232 628.082 67.468 632.898 70.048L636.596 72.026C639.606 73.66 643.992 75.38 643.992 79.422C643.992 84.84 638.402 86.044 634.016 86.044C630.404 86.044 626.878 85.098 623.438 83.894V89.226C627.05 90.344 630.834 90.946 634.618 90.946C642.788 90.946 649.84 87.764 649.84 78.562ZM678.66 53.966V49.064H667.652V35.82L661.804 39.518V49.064H655.096V53.966H661.804V80.368C661.804 88.28 665.502 90.946 673.156 90.946C674.876 90.946 676.596 90.774 678.316 90.516V85.27C676.854 85.786 675.994 86.044 674.36 86.044C669.716 86.044 667.652 83.55 667.652 79.164V53.966H678.66ZM713.749 90V61.276C713.749 52.16 709.277 48.118 699.989 48.118C692.679 48.118 685.455 51.3 685.283 59.556H691.819C692.421 54.654 695.345 53.02 700.161 53.02C708.331 53.02 707.901 59.556 707.901 65.662V66.522C706.525 66.78 705.235 66.78 703.859 66.78C696.291 66.78 684.337 70.134 684.337 79.508C684.337 86.474 688.293 90.946 695.345 90.946C699.903 90.946 705.665 88.882 707.901 84.582H708.073V90H713.749ZM707.901 71.424C707.901 74.864 707.729 76.584 706.353 79.68C704.633 83.378 700.935 86.044 696.807 86.044C693.367 86.044 691.045 83.55 691.045 80.11C691.045 73.574 699.215 71.424 704.461 71.424H707.901ZM755.105 90V30.66H749.257V55.772H749.085C747.365 50.784 743.667 48.118 738.335 48.118C727.155 48.118 724.403 61.018 724.403 69.876C724.403 79.422 726.639 90.946 738.421 90.946C743.323 90.946 747.709 87.764 749.085 83.034H749.257V90H755.105ZM749.257 69.704C749.257 75.38 746.935 86.044 739.625 86.044C732.057 86.044 731.111 76.67 731.111 70.994C731.111 65.318 731.799 53.02 739.797 53.02C747.537 53.02 749.257 63.942 749.257 69.704ZM788.512 53.966V49.064H777.504V35.82L771.656 39.518V49.064H764.948V53.966H771.656V80.368C771.656 88.28 775.354 90.946 783.008 90.946C784.728 90.946 786.448 90.774 788.168 90.516V85.27C786.706 85.786 785.846 86.044 784.212 86.044C779.568 86.044 777.504 83.55 777.504 79.164V53.966H788.512Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M357.99 180L177.872 179.998C198.21 122.045 198.261 58.0287 177.868 0L360 0.00211668V180" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M337.563 33.2232C339.001 31.6191 338.864 30.3189 337.259 30.3189H329.376C327.773 30.3189 326.968 30.1452 324.386 32.7251L302.371 56.5597L302.311 33.2232C302.311 31.6191 301.01 30.3189 299.404 30.3189H294.053C292.448 30.3189 291.145 31.6191 291.145 33.2232L291.143 86.2382C291.143 87.8403 292.444 89.1405 294.049 89.1405H299.425C301.03 89.1405 302.331 87.8403 302.331 86.2382L302.336 72.3757L312.116 61.8145L327.216 86.2382C328.199 87.8403 329.578 89.1405 331.184 89.1405H339.249C340.856 89.1405 341.361 87.8403 340.378 86.2382L319.55 53.5168L337.563 33.2232Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M208.431 86.2357C208.431 87.8398 209.732 89.1401 211.335 89.1401H217.216C218.823 89.1401 220.124 87.8398 220.124 86.2357L220.149 33.2228C220.149 31.6186 218.848 30.3184 217.243 30.3184H211.366C209.759 30.3184 208.46 31.6186 208.46 33.2228L208.431 86.2357Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M267.332 33.2228C267.332 31.6186 268.633 30.3184 270.238 30.3184H276.048C277.656 30.3184 278.957 31.6186 278.957 33.2228L278.949 86.2377C278.949 87.8398 277.647 89.1401 276.042 89.1401H270.271C268.666 89.1401 267.365 87.8398 267.365 86.2377L267.344 64.4H243.957L243.961 86.2377C243.961 87.8398 242.662 89.1401 241.055 89.1401H235.246C233.641 89.1401 232.34 87.8398 232.34 86.2377L232.342 33.2228C232.342 31.6186 233.643 30.3184 235.248 30.3184H241.075C242.678 30.3184 243.982 31.6186 243.982 33.2228L243.957 54.5499H267.344L267.332 33.2228Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M180.433 0L0 0.00211668V180L180.431 179.998C200.802 122.045 200.857 58.0287 180.433 0Z" fill="#CCD7E6"/>
+</g>
+<defs>
+<clipPath id="clip0_2115_4199">
+<rect width="837" height="180" fill="white"/>
+</clipPath>
+</defs>
+</svg>

storybook/package-lock.json

@@ -49,6 +49,7 @@
         "babel-plugin-polyfill-corejs3": "^0.5.3",
         "core-js": "^3.25.3",
         "css-loader": "^5.1.1",
+        "file-loader": "^6.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.55.0",
@@ -8311,6 +8312,44 @@
       "integrity": "sha512-3yurQZ2hD9VISAhJJP9bpYFNQrHHBXE2JxxjY5aLEcDi46RmAzJE2OC9FAde0yis5ElW0jTTzs0zfg/Cca4XqQ==",
       "dev": true
     },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/file-system-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.3.0.tgz",

storybook/package.json

@@ -43,6 +43,7 @@
     "babel-plugin-polyfill-corejs3": "^0.5.3",
     "core-js": "^3.25.3",
     "css-loader": "^5.1.1",
+    "file-loader": "^6.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.55.0",

storybook/public/dummy/howto-list-01.svg

@@ -0,0 +1,10 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="50" fill="#56BD66"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73 29.75C73.6904 29.75 74.25 30.3096 74.25 31L74.25 73C74.25 75.3472 72.3472 77.25 70 77.25H30C29.3096 77.25 28.75 76.6904 28.75 76C28.75 75.3097 29.3096 74.75 30 74.75H70C70.9665 74.75 71.75 73.9665 71.75 73L71.75 31C71.75 30.3096 72.3096 29.75 73 29.75Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M77 33.75C77.6904 33.75 78.25 34.3096 78.25 35L78.25 74C78.25 78.0041 75.0041 81.25 71 81.25H34C33.3096 81.25 32.75 80.6904 32.75 80C32.75 79.3097 33.3096 78.75 34 78.75H71C73.6233 78.75 75.75 76.6234 75.75 74L75.75 35C75.75 34.3096 76.3096 33.75 77 33.75Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58.0337 19.5H29C28.7239 19.5 28.5 19.7239 28.5 20V70C28.5 70.2761 28.7239 70.5 29 70.5H67C67.2761 70.5 67.5 70.2761 67.5 70V28.7696C67.5 28.0941 67.2267 27.4474 66.7423 26.9767L59.776 20.2071C59.3093 19.7537 58.6843 19.5 58.0337 19.5ZM29 17C27.3431 17 26 18.3431 26 20V70C26 71.6569 27.3431 73 29 73H67C68.6569 73 70 71.6569 70 70V28.7696C70 27.4187 69.4534 26.1252 68.4845 25.1838L61.5182 18.4142C60.585 17.5073 59.335 17 58.0337 17H29Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.7501 42.75H61.2501V45.25H34.7501V42.75Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.7501 49.75H61.2501V52.25H34.7501V49.75Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.7501 56.75H61.2501V59.25H34.7501V56.75Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58.25 17.75V28C58.25 28.4142 58.5858 28.75 59 28.75H63C63.6904 28.75 64.25 29.3096 64.25 30C64.25 30.6904 63.6904 31.25 63 31.25H59C57.2051 31.25 55.75 29.7949 55.75 28V17.75H58.25Z" fill="#003366"/>
+</svg>

storybook/public/dummy/howto-list-02.svg

@@ -0,0 +1,8 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="50" fill="#56BD66"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.872 44.8305C64.4569 46.8112 61.3673 48 58 48C50.268 48 44 41.732 44 34C44 26.268 50.268 20 58 20C65.732 20 72 26.268 72 34C72 37.4817 70.7291 40.6665 68.6258 43.1158C68.6881 43.1586 68.7474 43.2077 68.8028 43.2631L76.5965 51.0568C77.0846 51.5449 77.0846 52.3364 76.5965 52.8245C76.1083 53.3127 75.3169 53.3127 74.8287 52.8245L67.035 45.0309C66.9727 44.9686 66.9184 44.9014 66.872 44.8305ZM69.5 34C69.5 40.3513 64.3513 45.5 58 45.5C51.6487 45.5 46.5 40.3513 46.5 34C46.5 27.6487 51.6487 22.5 58 22.5C64.3513 22.5 69.5 27.6487 69.5 34Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38.0278 38.0532C38.595 38.1109 38.9971 38.6094 38.9971 39.1795C38.9971 39.6865 38.685 40.1038 38.2529 40.3242C38.3169 43.0559 39.4299 45.6622 41.3665 47.5989L41.8837 48.1161C42.3718 48.6043 42.3718 49.3957 41.8837 49.8839C41.3955 50.372 40.604 50.372 40.1159 49.8838L39.5987 49.3667C38.1938 47.9617 37.1398 46.2713 36.4933 44.4318C34.9947 47.6516 32.3512 50.2065 29.0791 51.5939L29.061 51.7546L29.5534 54.7028C30.1141 58.06 33.0635 60.5239 36.5217 60.5239C39.9798 60.5239 42.9292 58.06 43.4899 54.7028C43.5961 54.0672 43.7103 53.4313 43.8246 52.7949C43.9965 51.8382 44.1685 50.8803 44.3137 49.9205C44.41 49.2835 44.9522 48.8036 45.5965 48.8036C45.6096 48.8036 45.6228 48.8038 45.6359 48.8042C45.667 48.7947 45.6988 48.7864 45.7311 48.7793C46.4053 48.6308 47.0723 49.057 47.2207 49.7312L47.5261 51.1177C47.9432 53.0112 48.6236 54.837 49.5475 56.5417L51.099 59.4044C51.4279 60.0114 51.2026 60.77 50.5956 61.099C49.9887 61.4279 49.23 61.2026 48.901 60.5956L47.3495 57.7329C46.8399 56.7926 46.3964 55.8193 46.0216 54.8204C46.0053 54.915 45.9893 55.0097 45.9735 55.1043C45.2129 59.6581 41.2123 63 36.5217 63C32.8645 63 29.6268 60.9685 28.0172 57.915C27.2775 60.4342 26.1137 62.8195 24.5666 64.9649L24.014 65.7311C23.6101 66.2911 22.8289 66.4177 22.2689 66.0139C21.709 65.61 21.5824 64.8288 21.9862 64.2688L22.5388 63.5026C24.6259 60.6086 25.9314 57.2253 26.3293 53.6796L26.5313 51.8795L26.1356 49.5104C25.1285 43.4801 29.8581 38 36.0698 38H36.9736C37.3301 38 37.6818 38.0181 38.0278 38.0532ZM28.5867 48.8958C28.6426 48.9255 28.6958 48.9593 28.746 48.9967C31.6298 47.5652 33.8409 45.0028 34.8084 41.8651L35.2226 40.522C31.0615 40.9761 28.0139 44.7355 28.5867 48.8958Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M54.3946 52C53.6467 52 53.0617 52.6441 53.1731 53.3836C53.3614 54.6329 53.6206 55.8781 53.8261 57.1184C54.4838 61.0873 57.9435 64 62 64C66.0565 64 69.5162 61.0873 70.1739 57.1184C70.3794 55.8781 70.6386 54.6329 70.8269 53.3836C70.9383 52.6441 70.3533 52 69.6054 52C68.9685 52 68.4314 52.4726 68.3328 53.1019C68.1436 54.3095 67.9138 55.5137 67.7143 56.7177C67.2545 59.4923 64.8358 61.5285 62 61.5285C59.1642 61.5285 56.7455 59.4923 56.2857 56.7177C56.0862 55.5137 55.8564 54.3095 55.6672 53.1018C55.5686 52.4726 55.0315 52 54.3946 52Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.6566 66.2335C42.1812 65.9172 42.7821 65.75 43.3947 65.75C47.4782 65.75 50.8313 68.9779 50.9867 73.0585L51.2491 79.9524C51.2754 80.6423 50.7374 81.2228 50.0476 81.2491C49.3577 81.2754 48.7772 80.7374 48.7509 80.0476L48.4885 73.1536C48.3842 70.4157 46.1345 68.25 43.3947 68.25C43.2371 68.25 43.0825 68.293 42.9476 68.3744L39.2379 70.6113C37.8881 71.4252 36.1986 71.4252 34.8487 70.6113L31.142 68.3762C31.005 68.2936 30.8482 68.25 30.6882 68.25C27.9409 68.25 25.68 70.412 25.5573 73.1566L25.2488 80.0558C25.2179 80.7455 24.6338 81.2796 23.9442 81.2488C23.2545 81.2179 22.7204 80.6338 22.7512 79.9442L23.0598 73.0449C23.2423 68.9644 26.6036 65.75 30.6882 65.75C31.3031 65.75 31.9063 65.9178 32.4329 66.2353L36.1397 68.4704C36.6955 68.8055 37.3912 68.8055 37.947 68.4704L41.6566 66.2335Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.5116 66.2221C67.0344 65.9134 67.6299 65.75 68.2374 65.75C72.4212 65.75 75.8272 69.1016 75.9905 73.3025L76.2491 79.9514C76.2759 80.6413 75.7384 81.2222 75.0486 81.2491C74.3587 81.2759 73.7778 80.7384 73.7509 80.0486L73.4924 73.3996C73.3799 70.5057 71.0436 68.25 68.2374 68.25C68.0789 68.25 67.9221 68.2926 67.7826 68.3749L63.9264 70.6516C62.5922 71.4393 60.9418 71.4393 59.6076 70.6516L55.7543 68.3768C55.6128 68.2932 55.4536 68.25 55.2927 68.25C54.6414 68.25 54.0188 68.3695 53.4437 68.5879C52.7983 68.8329 52.0764 68.5084 51.8314 67.863C51.5863 67.2176 51.9109 66.4957 52.5563 66.2507C53.4099 65.9266 54.3329 65.75 55.2927 65.75C55.9025 65.75 56.5004 65.9141 57.0253 66.2239L60.8786 68.4988C61.4287 68.8236 62.1053 68.8236 62.6554 68.4988L66.5116 66.2221Z" fill="#003366"/>
+</svg>

storybook/public/dummy/howto-list-03.svg

@@ -0,0 +1,8 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="50" fill="#56BD66"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48 42.2501C39.3015 42.2501 32.25 49.3016 32.25 58.0001C32.25 66.6986 39.3015 73.7501 48 73.7501C56.6985 73.7501 63.75 66.6986 63.75 58.0001V54.4211C63.75 53.7308 64.3096 53.1711 65 53.1711C65.6904 53.1711 66.25 53.7308 66.25 54.4211V58.0001C66.25 68.0793 58.0792 76.2501 48 76.2501C37.9208 76.2501 29.75 68.0793 29.75 58.0001C29.75 47.9209 37.9208 39.7501 48 39.7501H48.8947C49.5851 39.7501 50.1447 40.3097 50.1447 41.0001C50.1447 41.6904 49.5851 42.2501 48.8947 42.2501H48Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.4124 24.4834C72.5452 22.0934 76.2117 21.8848 78.6018 24.0176C80.9919 26.1505 81.2004 29.817 79.0676 32.207L63.9265 49.1745C63.7432 49.3798 63.5044 49.5276 63.2389 49.5999L55.2311 51.7814C54.8229 51.8927 54.386 51.7898 54.0703 51.508C53.7546 51.2263 53.6028 50.8039 53.6671 50.3857L54.9265 42.1822C54.9683 41.9102 55.088 41.6562 55.2713 41.4509L70.4124 24.4834ZM76.9373 25.8829C75.5774 24.6694 73.4912 24.7881 72.2777 26.148L57.3491 42.8772L56.43 48.8637L62.2737 47.2717L77.2023 30.5425C78.4158 29.1826 78.2972 27.0965 76.9373 25.8829Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.6161 41.1162C31.1043 40.6281 31.8957 40.6281 32.3839 41.1162L64.8839 73.6162C65.372 74.1044 65.372 74.8958 64.8839 75.384C64.3957 75.8721 63.6043 75.8721 63.1161 75.384L30.6161 42.884C30.128 42.3958 30.128 41.6044 30.6161 41.1162Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M52.8839 53.1162C52.3957 52.6281 51.6043 52.6281 51.1161 53.1162L31.1161 73.1162C30.628 73.6044 30.628 74.3958 31.1161 74.884C31.6043 75.3721 32.3957 75.3721 32.8839 74.884L52.8839 54.884C53.372 54.3958 53.372 53.6044 52.8839 53.1162Z" fill="#003366"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.7297 19.9852C47.2902 20.3882 47.4179 21.1693 47.0149 21.7298L42.7323 27.6857L46.9919 33.2394C47.412 33.7871 47.3085 34.5718 46.7607 34.992C46.2129 35.4121 45.4283 35.3086 45.0081 34.7608L41.1096 29.6779V34.0001C41.1096 34.6904 40.55 35.2501 39.8596 35.2501C39.1693 35.2501 38.6096 34.6904 38.6096 34.0001V21.0001C38.6096 20.3097 39.1693 19.7501 39.8596 19.7501C40.55 19.7501 41.1096 20.3097 41.1096 21.0001V25.6601L44.9851 20.2704C45.3881 19.7098 46.1692 19.5822 46.7297 19.9852ZM21 19.7501C21.6904 19.7501 22.25 20.3097 22.25 21.0001V33.9992L19.75 34V21.0001C19.75 20.3097 20.3096 19.7501 21 19.7501ZM27.1404 19.7501C27.8307 19.7501 28.3904 20.3097 28.3904 21.0001V26.2501H32.9079V21.0001C32.9079 20.3097 33.4675 19.7501 34.1579 19.7501C34.8483 19.7501 35.4079 20.3097 35.4079 21.0001V34.0001C35.4079 34.6904 34.8483 35.2501 34.1579 35.2501C33.4675 35.2501 32.9079 34.6904 32.9079 34.0001V28.7501H28.3904V34.0001C28.3904 34.6904 27.8307 35.2501 27.1404 35.2501C26.45 35.2501 25.8904 34.6904 25.8904 34.0001V21.0001C25.8904 20.3097 26.45 19.7501 27.1404 19.7501ZM21 35.2501C20.3096 35.2501 19.75 34.6904 19.75 34L22.25 33.9992C22.25 34.6896 21.6904 35.2501 21 35.2501Z" fill="#003366"/>
+</svg>

storybook/stories/_global/scripts/helpers.js

@@ -4,9 +4,12 @@ import {createFooter} from "../../components/footer/FooterComponent";
 import {createPageDetails} from "../../components/page-details/PageDetailsComponent";
 import IHKSidebar from "./sidebar";
 
-export function createElement(tag, classes = [], content = '', parentElement = null) {
+export function createElement(tag, classes = [], content = '', parentElement = null, styles = null) {
   const el = document.createElement(tag);
   el.innerHTML = content;
+  if (styles) {
+    el.style = styles;
+  }
   classes.map((c) => {
     el.classList.add(c);
   })

storybook/stories/_global/styles/_mixins.scss

@@ -168,6 +168,13 @@
   }
 }
 
+@mixin word-wrap() {
+  word-break:     break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens:    auto;
+  hyphens:         auto;
+}
+
 // ICONS
 @mixin icon-ankerlink { content: '\e800'; }
 @mixin icon-barrierefreiheit { content: '\e801'; }
@@ -251,6 +258,8 @@
 @mixin icon-xsmall-liste { content: '\e856'; }
 @mixin icon-xsmall-offen { content: '\e857'; }
 @mixin icon-xsmall-uhr { content: '\e858'; }
+@mixin icon-small-election-group { content: '\e86c'; }
+@mixin icon-small-icon-election-location { content: '\e86e'; }
 @mixin icon-social-facebook { content: '\e859'; }
 @mixin icon-social-linkedin { content: '\e85b'; }
 @mixin icon-social-pinterest { content: '\e85c'; }

storybook/stories/_global/styles/icons.scss

@@ -101,4 +101,6 @@
 .icon-magazine:before { content: '\E8C8'; }
 .icon-lokalisierung:before {content: '\E8C9';}
 .icon-login-flyout:before { content: '\e8ca'; }
-.icon-login-header:before { content: '\e8cb'; }
+.icon-login-header:before { content: '\e8cb'; }
+.icon-small-election-group:before { content: '\e86c'; }
+.icon-small-icon-election-location:before { content: '\e86e'; }

storybook/stories/assets/fonts/icons/icons.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2022 by original authors @ fontello.com</metadata>
+<metadata>Copyright (C) 2023 by original authors @ fontello.com</metadata>
 <defs>
 <font id="icons" horiz-adv-x="1000" >
 <font-face font-family="icons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@@ -14,12 +14,8 @@
 
 <glyph glyph-name="check" unicode="&#xe803;" d="M921 721c14-11 17-32 5-47l-522-661c-10-13-23-24-38-31-15-7-31-10-48-10-16 1-32 5-46 13-15 8-27 19-36 33l-163 231c-11 15-7 36 8 47 15 10 36 7 46-8l164-232 0-1c3-5 8-9 13-11 5-3 11-5 16-5 6 0 12 1 17 4 6 2 10 6 14 10l0 1 523 661c11 15 32 17 47 6z" horiz-adv-x="1000" />
 
-<glyph glyph-name="checkbox-liste" unicode="&#xe804;" d="M483 717h34c55 0 100-45 100-100v-34c0-55-45-100-100-100h-34c-55 0-100 45-100 100v34c0 55 45 100 100 100z m0-67c-18 0-33-15-33-33v-34c0-18 15-33 33-33h34c18 0 33 15 33 33v34c0 18-15 33-33 33h-34z m0-183h34c55 0 100-45 100-100v-34c0-55-45-100-100-100h-34c-55 0-100 45-100 100v34c0 55 45 100 100 100z m0-67c-18 0-33-15-33-33v-34c0-18 15-33 33-33h34c18 0 33 15 33 33v34c0 18-15 33-33 33h-34z m34-183h-34c-55 0-100-45-100-100v-34c0-55 45-100 100-100h34c55 0 100 45 100 100v34c0 55-45 100-100 100z m-67-100c0 18 15 33 33 33h34c18 0 33-15 33-33v-34c0-18-15-33-33-33h-34c-18 0-33 15-33 33v34z" horiz-adv-x="1000" />
-
 <glyph glyph-name="content-schloss" unicode="&#xe805;" d="M167 601c0 19 15 33 33 33h625c18 0 33-14 33-33 0-18-15-33-33-33h-625c-18 0-33 15-33 33z m0-167c0 19 15 34 33 34h500c18 0 33-15 33-34 0-18-15-33-33-33h-500c-18 0-33 15-33 33z m64-133h594c18 0 33-15 33-33 0-19-15-34-33-34h-521c-21 30-46 53-73 67z m120-167c6-21 10-43 13-66h336c18 0 33 15 33 33 0 18-15 33-33 33h-349z m-214-157c0 16 13 30 30 30 13 0 30-14 30-30 0-17-14-30-30-30-17 0-30 13-30 30z m153 123h13c17 0 27-10 30-23v-200c0-17-13-27-26-27h-280c-17 0-27 13-27 27v200c0 13 10 23 27 26h13v34c0 33 13 63 37 86 46 47 130 47 176 0 24-26 37-56 37-90v-33z m-177 90c-16-13-23-33-23-53v-34h153v34c0 20-10 40-23 53-30 27-80 27-107 0z m-63-290h230v150h-230v-150z" horiz-adv-x="1000" />
 
-<glyph glyph-name="content-stern" unicode="&#xe806;" d="M193 576h605c18 0 33 15 33 33 0 18-14 32-33 32h-605c-17 0-32-14-32-32 0-18 15-33 32-33z m0-161h484c18 0 33 14 33 32 0 18-14 33-33 33h-484c-17 0-32-14-32-33 0-18 15-32 32-32z m221-258h263c19 0 33-15 32-32 0-18-15-33-32-33h-245c2 8 3 16 3 24 0 16-8 32-21 41z m385 161h-560l33-64h526c18 0 33 14 33 32 0 17-14 32-32 32z m-435-171c7-1 14-4 19-9 6-5 10-11 12-18 2-7 2-15 0-21-2-7-5-13-10-19l-66-63 16-90c1-8 0-15-2-22-3-7-7-13-13-17-6-4-13-7-21-7-7-1-14 1-21 5l-80 42-80-42c-6-4-12-5-19-5h-2c-7 0-15 3-20 7-6 5-11 10-14 17-2 8-3 15-2 22l16 89-65 64c-5 5-9 12-11 19-2 7-1 14 1 21 2 7 7 13 12 18 6 5 12 8 20 9l90 12 40 82c4 7 8 12 14 16 13 9 29 9 42 0 6-3 10-8 14-15l40-83 90-12z m-91-115c1 6 5 11 9 15l56 54-76 11c-7 1-12 3-17 7-6 3-10 9-13 14l-33 69-34-69c-3-5-7-11-12-14-5-4-11-6-17-7l-76-11 55-54c4-5 7-9 9-15 2-6 2-13 2-19l-13-75 67 35c6 4 13 5 19 5 6 0 13-1 18-5l68-35-13 75c-1 6-1 13 1 19z" horiz-adv-x="968" />
-
 <glyph glyph-name="content" unicode="&#xe807;" d="M167 601c0 19 15 33 33 33h625c18 0 33-14 33-33 0-18-15-33-33-33h-625c-18 0-33 15-33 33z m0-167c0 19 15 34 33 34h500c18 0 33-15 33-34 0-18-15-33-33-33h-500c-18 0-33 15-33 33z m0-166c0 18 15 33 33 33h625c18 0 33-15 33-33 0-19-15-34-33-34h-625c-18 0-33 15-33 34z m0-167c0 18 15 33 33 33h500c18 0 33-15 33-33 0-18-15-33-33-33h-500c-18 0-33 15-33 33z" horiz-adv-x="1000" />
 
 <glyph glyph-name="dauer" unicode="&#xe808;" d="M250 819c0 17-14 31-31 31-17 0-31-14-31-31v-31h-94c-1 0-1 0-1 0-26-1-50-12-67-31-17-18-27-43-26-68v-620c0-12 2-24 7-36 4-12 11-22 20-31 9-9 19-16 31-20 12-5 24-7 36-7h250c17 0 31 14 31 31 0 18-14 32-31 32h-250l-1 0c-4-1-8 0-12 2-4 1-7 3-10 6-3 3-5 6-6 10-2 4-3 8-2 12l0 1v620c0 1 0 1 0 1-1 9 2 18 9 24 6 7 14 11 22 11h94v-94c0-17 14-31 31-31 17 0 31 14 31 31v94h125v-94c0-17 14-31 31-31 18 0 32 14 32 31v94h125v-94c0-17 14-31 31-31 17 0 31 14 31 31v94h93c9 0 17-4 23-11 6-6 9-15 9-24 0 0 0 0 0-1v-183c0-17 14-31 31-31 18 0 32 14 32 31v183c0 25-9 50-26 68-18 19-42 30-67 31 0 0-1 0-1 0h-94v31c0 17-14 31-31 31-17 0-31-14-31-31v-31h-125v31c0 17-14 31-32 31-17 0-31-14-31-31v-31h-125v31z m500-577c0 17-14 31-31 31-17 0-31-14-31-31v-111c0-17 14-31 31-31h110c18 0 32 14 32 31 0 18-14 32-32 32h-79v79z m-31 171c-75 0-146-30-199-83-53-53-82-124-82-199 0-74 29-146 82-199 53-52 124-82 199-82 74 0 146 30 199 82 52 53 82 125 82 199 0 75-30 146-82 199-53 53-125 83-199 83z m-155-127c41 41 97 64 155 64 58 0 113-23 154-64 42-41 65-97 65-155 0-58-23-113-65-154-41-42-96-65-154-65-58 0-114 23-155 65-41 41-64 96-64 154 0 58 23 114 64 155z" horiz-adv-x="1000" />
@@ -202,6 +198,16 @@
 
 <glyph glyph-name="social-instagram" unicode="&#xe861;" d="M0 850v-1000h1000v1000h-1000z m778-602c-2-28-6-48-12-66s-16-32-32-48c-16-16-30-24-48-32-18-6-36-12-66-12-28-2-38-2-112-2s-82 0-112 2c-28 2-48 6-66 12s-32 16-48 32c-16 16-24 30-32 48-6 18-12 36-12 66 2 30 2 38 2 112s0 82 2 112c2 28 6 48 12 66s16 32 32 48 30 24 48 32c18 6 36 12 66 12 28 2 38 2 112 2s82 0 112-2c28-2 48-6 66-12 18-6 32-16 48-32 16-16 24-30 32-48 6-18 12-36 12-66 2-28 2-38 2-112s-4-82-6-112z m-268 202c50 0 90-40 90-90s-40-90-90-90-90 40-90 90 40 90 90 90z m210 70c-4 12-10 22-20 32s-18 16-32 20c-10 4-24 8-50 10-28 2-36 2-110 2-72 0-80 0-110-2-26-2-40-6-50-10-12-4-22-10-32-20s-16-18-20-32c-4-10-8-24-10-50-2-28-2-36-2-110 0-72 0-80 2-110 2-26 6-40 10-50 4-12 10-22 20-32s18-16 32-20c10-4 24-8 50-10 28-2 36-2 110-2s80 0 110 2c26 2 40 6 50 10 12 4 22 10 32 20s16 18 20 32c4 10 8 24 10 50 2 28 2 36 2 110 0 72 0 80-2 110-2 26-6 40-10 50z m-210-298c-76 0-138 62-138 138s62 138 138 138 138-62 138-138-62-138-138-138z m144 250c-18 0-32 14-32 32s14 32 32 32c18 0 32-14 32-32s-14-32-32-32z" horiz-adv-x="1000" />
 
+<glyph glyph-name="faq" unicode="&#xe869;" d="M500 617c-93 0-167-74-167-167v-33h67v33c0 53 43 100 100 100s100-43 100-100-43-100-100-100c-20 0-33-13-33-33v-67h66v37c77 16 134 83 134 163 0 90-74 167-167 167z m0-434c-23 0-40-20-40-40s20-40 40-40 40 20 40 40-17 40-40 40z m0 667c-277 0-500-223-500-500 0-277 223-500 500-500 277 0 500 223 500 500 0 277-223 500-500 500z m0-933c-240 0-433 193-433 433s193 433 433 433 433-193 433-433-193-433-433-433z" horiz-adv-x="1000" />
+
+<glyph glyph-name="checkbox-liste" unicode="&#xe86a;" d="M517-17h-34c-55 0-100 45-100 100l0 34c0 55 45 100 100 100h34c55 0 100-45 100-100v-34c0-55-45-100-100-100z m0 67c18 0 33 15 33 33v34c0 18-15 33-33 33h-34c-18 0-33-15-33-33v-34c0-18 15-33 33-33h34z m0 183h-34c-55 0-100 45-100 100l0 34c0 55 45 100 100 100h34c55 0 100-45 100-100v-34c0-55-45-100-100-100z m0 67c18 0 33 15 33 33v34c0 18-15 33-33 33h-34c-18 0-33-15-33-33v-34c0-18 15-33 33-33h34z m0 183h-34c-55 0-100 45-100 100l0 34c0 55 45 100 100 100l34 0c55 0 100-45 100-100v-34c0-55-45-100-100-100z m0 67c18 0 33 15 33 33v34c0 18-15 33-33 33h-34c-18 0-33-15-33-33v-34c0-18 15-33 33-33h34z" horiz-adv-x="1000" />
+
+<glyph glyph-name="content-stern" unicode="&#xe86b;" d="M193 576h605c18 0 33 15 33 33 0 18-14 32-33 32h-605c-17 0-32-14-32-32 0-18 15-33 32-33z m0-161h484c18 0 33 14 33 32 0 18-14 33-33 33h-484c-17 0-32-14-32-33 0-18 15-32 32-32z m221-258h263c19 0 33-15 32-32 0-18-15-33-32-33h-245c2 8 3 16 3 24 0 16-8 32-21 41z m385 161h-560l33-64h526c18 0 33 14 33 32 0 17-14 32-32 32z m-435-171c7-1 14-4 19-9 6-5 10-11 12-18 2-7 2-15 0-21-2-7-5-13-10-19l-66-63 16-90c1-8 0-15-2-22-3-7-7-13-13-17-6-4-13-7-21-7-7-1-14 1-21 5l-80 42-80-42c-6-4-12-5-19-5h-2c-7 0-15 3-20 7-6 5-11 10-14 17-2 8-3 15-2 22l16 89-65 64c-5 5-9 12-11 19-2 7-1 14 1 21 2 7 7 13 12 18 6 5 12 8 20 9l90 12 40 82c4 7 8 12 14 16 13 9 29 9 42 0 6-3 10-8 14-15l40-83 90-12z m-91-115c1 6 5 11 9 15l56 54-76 11c-7 1-12 3-17 7-6 3-10 9-13 14l-33 69-34-69c-3-5-7-11-12-14-5-4-11-6-17-7l-76-11 55-54c4-5 7-9 9-15 2-6 2-13 2-19l-13-75 67 35c6 4 13 5 19 5 6 0 13-1 18-5l68-35-13 75c-1 6-1 13 1 19z" horiz-adv-x="968" />
+
+<glyph glyph-name="small-election-group" unicode="&#xe86c;" d="M250 697c-54 0-97-43-97-97 0-54 43-97 97-97 54 0 97 43 97 97 0 54-43 97-97 97z m-181-97c0 100 81 181 181 181 100 0 181-81 181-181 0-100-81-181-181-181-100 0-181 81-181 181z m181-403c-54 0-97-43-97-97 0-54 43-97 97-97 54 0 97 43 97 97 0 54-43 97-97 97z m-181-97c0 100 81 181 181 181 100 0 181-81 181-181 0-100-81-181-181-181-100 0-181 81-181 181z m681 681c-100 0-181-81-181-181 0-100 81-181 181-181 100 0 181 81 181 181 0 100-81 181-181 181z m0-584c-54 0-97-43-97-97 0-54 43-97 97-97 54 0 97 43 97 97 0 54-43 97-97 97z m-181-97c0 100 81 181 181 181 100 0 181-81 181-181 0-100-81-181-181-181-100 0-181 81-181 181z" horiz-adv-x="1000" />
+
+<glyph glyph-name="small-icon-election-location" unicode="&#xe86e;" d="M881 94c-25 17-58 30-95 42-20 5-43 10-67 15-22-28-43-54-62-75 40-5 76-12 106-20 33-10 56-20 71-30 6-4 9-7 11-9-2-2-5-5-11-9-14-10-38-21-71-30-66-19-159-31-264-31-104 0-197 12-263 31-33 9-57 20-72 30-5 4-8 6-10 9 2 1 5 5 10 9 15 10 39 20 72 30 30 8 66 15 105 20-19 21-40 47-62 75-23-5-46-10-66-15-37-11-70-24-95-42-23-15-49-41-49-77 0-37 26-63 49-78 25-17 58-30 95-41 75-22 176-34 287-34 111 0 211 13 287 34 37 10 70 24 95 41 23 15 49 41 49 78 0 36-26 62-49 77h-1z m-382 659c-130 0-236-118-236-234 0-43 14-90 39-138 24-49 57-95 90-137 34-41 67-77 92-101 5-5 10-10 14-14 5 4 9 9 15 14 25 25 59 60 92 101 33 42 67 89 91 137 24 48 38 96 38 138 0 116-106 234-236 234h1z m0-736c0 0-36 31-40 35-8 7-20 18-33 31-27 27-63 64-99 109-36 44-73 96-100 151-28 55-48 116-48 177 0 159 143 316 320 316 177 0 319-157 319-317 0-60-20-121-47-175-28-55-65-107-101-152-36-44-72-82-98-109-14-13-25-24-33-31-4-4-40-35-40-35z m0 552c-23 0-42-19-42-42 0-23 19-41 42-41 23 0 42 18 42 41 0 23-19 42-42 42z m-125-42c0 69 56 125 125 125 69 0 125-56 125-125 0-69-56-125-125-125-69 0-125 56-125 125z" horiz-adv-x="1000" />
+
 <glyph glyph-name="userlike" unicode="&#xe8c6;" d="M826 850h-652c-63 0-114-51-114-114v-662c0-63 51-114 114-114h487l279-110v224 12 650c0 63-51 114-114 114z m-23-673c-89-62-194-95-303-95-109 0-214 33-303 95-14 10-17 30-7 44 9 14 29 18 43 8 79-55 171-84 267-84 96 0 188 29 267 84 14 10 34 6 44-8 10-14 6-34-8-44z" horiz-adv-x="1000" />
 
 <glyph glyph-name="userlike-chat" unicode="&#xe8c7;" d="M500 825c-262 0-475-213-475-475s213-475 475-475c76 0 149 18 212 50h135c14 0 28 5 37 15 10 10 16 24 16 38v116c49 76 75 165 75 256 0 262-213 475-475 475z m252-648c-7-8-14-12-28-12h-448c-11 0-21 5-28 12-8 7-12 17-12 28 0 10 5 20 12 28 7 7 17 11 28 11h448c13 0 21-4 28-11 8-8 12-18 12-28 0-11-4-21-12-28z m0 145c-7-7-17-11-28-11h-369c-11 0-21 4-28 11-8 8-12 18-12 28s5 21 12 28c7 8 17 12 28 12h369c11 0 21-5 28-12 8-7 12-17 12-28s-4-20-12-28z m0 145c-7-7-15-11-28-11h-448c-11 0-21 4-28 11-8 8-12 18-12 28 0 11 5 21 12 28 7 8 17 12 28 12h448c13 0 21-4 28-12 8-7 12-17 12-28 0-10-4-20-12-28z" horiz-adv-x="1000" />

storybook/stories/atoms/search-button/SearchButton.stories.js

@@ -10,4 +10,9 @@ const Template = ({...args}) => {
 };
 
 export const SearchButton = Template.bind({});
-SearchButton.args = {};
+SearchButton.args = {};
+
+export const SearchButtonColored = Template.bind({});
+SearchButtonColored.args = {
+  btnClass: 'secondary',
+};

storybook/stories/atoms/search-button/SearchButtonComponent.js

@@ -2,9 +2,9 @@ import './search-button.scss';
 import {createElement} from "../../_global/scripts/helpers";
 
 export const createSearchButton = ({
-
+  btnClass = 'primary',
 }) => {
-  const button = createElement('button', ['search-submit']);
+  const button = createElement('button', ['search-submit', btnClass]);
   button.type = 'submit';
   button.ariaLabel = 'Suche starten';
 

storybook/stories/atoms/search-button/search-button.scss

@@ -34,6 +34,15 @@ button.search-submit {
     line-height: 1;
   }
 
+  &.secondary {
+    background-color: var(--theme-color-primary);
+    color: var(--theme-color-white);
+    &:hover {
+      background-color: var(--theme-color-primary-dimmed-04);
+      color: var(--theme-color-primary);
+    }
+  }
+
   @media(max-width: 767px) {
     border-radius: 28px;
     width: 70px;

storybook/stories/components/election-form/ElectionForm.stories.js

@@ -0,0 +1,31 @@
+import {createElectionForm} from "./ElectionFormComponent";
+
+export default {
+  title: 'Components/Election Form',
+  argTypes: {}
+}
+
+const Template = ({...args}) => {
+  return createElectionForm({...args});
+};
+
+export const ElectionForm = Template.bind({});
+ElectionForm.args = {};
+
+export const ElectionFormColorChange = Template.bind({});
+ElectionFormColorChange.args = {
+  backgroundColor: '#003366',
+};
+
+export const ElectionFormNoElectionArea = Template.bind({});
+ElectionFormNoElectionArea.args = {
+  electionArea: false,
+};
+
+export const ElectionFormWording = Template.bind({});
+ElectionFormWording.args = {
+  placeholderElectionGroup: 'Gruppe an Personen',
+  placeholderElectionArea: 'Wählbare Bezirke',
+  placeholderElectionCompany: 'Suche nach Firmen',
+};
+

storybook/stories/components/election-form/ElectionFormComponent.js

@@ -0,0 +1,49 @@
+import './election-form.scss';
+import {createElement} from "../../_global/scripts/helpers";
+import {createInputText} from "../../atoms/input-text/InputTextComponent";
+import {createInputSelect} from "../../atoms/input-select/InputSelectComponent";
+import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
+
+export const createElectionForm =
+  ({
+    title = 'Finden Sie die Branchenvertreter:innen Ihrer Region',
+     backgroundColor = '',
+     inlineStyles = 'background: ' + backgroundColor + ';',
+     electionArea = true,
+     placeholderElectionGroup = 'Wahlgruppe',
+     placeholderElectionArea = 'Wahlbezirk',
+     placeholderElectionCompany = 'Suche nach Name oder Firma',
+  }) => {
+    const electionForm = createElement('div', ['election-form'], null, null, inlineStyles);
+    createElement('h2', [], title, electionForm);
+
+    const form = createElement('form', ['election-form--form'], null, electionForm);
+    const selectWrapper = createElement('div', ['input-wrapper'], null, form);
+    selectWrapper.appendChild(createInputSelect({
+      placeholder: placeholderElectionGroup,
+      isRequired: true,
+      id: 'election-group',
+      name: 'election-group',
+    }));
+    if (electionArea) {
+      const selectWrapper2 = createElement('div', ['input-wrapper'], null, form);
+      selectWrapper2.appendChild(createInputSelect({
+        placeholder: placeholderElectionArea,
+        isRequired: true,
+        id: 'election-area',
+        name: 'election-area',
+      }));
+    }
+    const inputWrapper = createElement('div', ['input-wrapper'], null, form);
+    inputWrapper.appendChild(createInputText({
+      placeholder: placeholderElectionCompany,
+      isRequired: true,
+      id: 'election-searchstring',
+      name: 'election-searchstring',
+    }));
+
+    form.appendChild(createSearchButton({btnClass: 'secondary'}));
+
+
+    return electionForm;
+  }

storybook/stories/components/election-form/election-form.scss

@@ -0,0 +1,77 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.election-form {
+  --theme-color-link: #fff;
+  --theme-color-link-hover: #fff;
+  font-size: var(--font-size-small);
+  background: linear-gradient(140deg, var(--theme-color-gradient-01) 30%, var(--theme-color-gradient-02) 75%, var(--theme-color-gradient-03) 108%);
+  padding: 30px 30px 0 30px;
+  border-radius: var(--border-radius-xs);
+  color: #fff;
+  margin-bottom: 20px;
+  @media(max-width: 567px) {
+    padding-bottom: 14px;
+  }
+
+  h2 {
+    margin-top: var(--section-headline-margin);
+    margin-bottom: 0.9em;
+    font-size: 36px;
+    @media(max-width: 767px) {
+      font-size: 24px;
+    }
+  }
+
+  &--form {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    @media(max-width: 767px) {
+      flex-wrap: wrap;
+    }
+    @media(max-width: 567px) {
+      flex-wrap: nowrap;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+  }
+
+  button.search-submit {
+    position: static;
+    margin-bottom: 14px;
+    @media(max-width: 567px) {
+      margin-bottom: 0;
+    }
+  }
+
+  .input-wrapper {
+    flex: 1;
+    display: flex;
+    @media(max-width: 767px) {
+      flex: initial;
+      width: calc(50% - 15px);
+    }
+    @media(max-width: 567px) {
+      width: 100%;
+    }
+
+    input,
+    select {
+      margin: 0 30px 14px 0;
+      @media(max-width: 767px) {
+        margin-right: 0;
+      }
+    }
+
+    input {
+      width: 100%;
+      flex-grow: 1;
+    }
+
+    @media(max-width: 567px) {
+      display: block;
+    }
+  }
+}

storybook/stories/components/election-result-list-badge/ElectionResultListBadge.stories.js

@@ -0,0 +1,22 @@
+import {createElectionResultListBadge} from "./ElectionResultListBadgeComponent";
+
+export default {
+  title: 'Components/Election Result List Badge',
+  argTypes: {}
+}
+
+const Template = ({...args}) => {
+  return createElectionResultListBadge({...args});
+};
+
+export const ElectionResultListBadge = Template.bind({});
+ElectionResultListBadge.args = {};
+
+export const ElectionResultListBadgeInverted = Template.bind({});
+ElectionResultListBadgeInverted.args = {
+  inverted: true,
+  closable: true,
+  preLabel: 'Wahlgruppe 19',
+  colon: true,
+  label: 'Kreditinstitute / Versicherungen / Immobilienwirtschaft',
+};

storybook/stories/components/election-result-list-badge/ElectionResultListBadgeComponent.js

@@ -0,0 +1,19 @@
+import '././election-result-list-badge.scss';
+import {createElement} from "../../_global/scripts/helpers";
+
+export const createElectionResultListBadge =
+  ({
+     preLabel = '202',
+     label = 'Kanditat:innen',
+     inverted = false,
+     closable = false,
+     colon = false,
+  }) => {
+    const electionResultListBadge = createElement('div', ['election-result-list-badge', inverted ? 'inverted' : 'normal', closable ? 'closable' : 'regular']);
+    const inner = createElement('div', ['badge-inner'], null, electionResultListBadge);
+    const pPre = preLabel + (colon ? ': ' : '');
+    const p = createElement('p', [], pPre, inner);
+    createElement('span', [], label, p);
+
+    return electionResultListBadge;
+  }

storybook/stories/components/election-result-list-badge/election-result-list-badge.scss

@@ -0,0 +1,60 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.election-result-list-badge {
+  .badge-inner {
+    padding: 6px 15px;
+    background: var(--theme-color-primary-dimmed-04);
+    border-radius: 18px;
+    margin-bottom: 8px;
+  }
+  p {
+    font-family: "Korb", sans-serif;
+    font-weight: bold;
+    margin: 0;
+    span {
+      padding-left: 5px;
+      font-weight: normal;
+    }
+  }
+  &.inverted {
+    p {
+      color: var(--theme-color-white);
+      transition: 0.25s ease;
+    }
+    .badge-inner {
+      background: var(--theme-color-primary);
+      transition: 0.25s ease;
+      &:hover {
+        background-color: var(--theme-color-primary-dimmed-04);
+        p {
+          color: var(--theme-color-primary);
+        }
+      }
+    }
+  }
+  &.closable {
+    cursor: pointer;
+    .badge-inner {
+      padding-left: 48px;
+      position: relative;
+      &:before {
+        @include icon-schliessen;
+        font-family: 'Icons', sans-serif;
+        position: absolute;
+        left: 15px;
+        top: 50%;
+        margin-top: -9px;
+        color: var(--theme-color-white);
+        display: block;
+        text-align: center;
+        font-size: 18px;
+        line-height: 1;
+        transition: 0.25s ease;
+      }
+      &:hover:before {
+        color: var(--theme-color-primary);
+      }
+    }
+  }
+}

storybook/stories/components/election-result-list-item/ElectionResultListItem.stories.js

@@ -0,0 +1,13 @@
+import {createElectionResultListItem} from "./ElectionResultListItemComponent";
+
+export default {
+  title: 'Components/Election Result List Item',
+  argTypes: {}
+}
+
+const Template = ({...args}) => {
+  return createElectionResultListItem({...args});
+};
+
+export const ElectionResultListItem = Template.bind({});
+ElectionResultListItem.args = {};

storybook/stories/components/election-result-list-item/ElectionResultListItemComponent.js

@@ -0,0 +1,27 @@
+import './election-result-list-item.scss';
+import {createElement, createImage} from "../../_global/scripts/helpers";
+
+export const createElectionResultListItem =
+  ({
+     image = './dummy/election-list-cover.jpg',
+     name = 'Lars-Hendrick Pirckensee',
+     job = 'Grundstücksmakler, Immobilenemakler',
+     city = 'Kreisfreie Musterstadt, Musterhausen',
+  }) => {
+    const electionResultListItem = createElement('div', ['election-result-list-item']);
+    const topBox = createElement('a', ['top-box'], null, electionResultListItem);
+    topBox.href = '#';
+    const imageBox = createElement('div', ['image-box'], null, topBox);
+    createImage(image, 310, 310, '', [], imageBox);
+    createElement('h3', [], name, topBox);
+
+    const textBox = createElement('div', ['text-box'], null, electionResultListItem);
+    const jobBox = createElement('div', ['job-box'], null, textBox);
+    const jobBoxLink = createElement('a', ['icon-small-election-group'], job, jobBox);
+    jobBoxLink.href = '#';
+    const cityBox = createElement('div', ['city-box'], null, textBox);
+    const cityBoxLink = createElement('a', ['icon-small-icon-election-location'], city, cityBox);
+    cityBoxLink.href = '#';
+
+    return electionResultListItem;
+  }

storybook/stories/components/election-result-list-item/election-result-list-item.scss

@@ -0,0 +1,87 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.election-result-list-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 4px;
+  background: var(--theme-grey-light);
+  text-decoration: none;
+  width: 312px;
+
+  @media (max-width: 693px) {
+    width: 100%;
+  }
+
+  @media(max-width: 356px) {
+    max-width: none;
+  }
+
+  .top-box {
+
+  }
+
+  .image-box {
+    position: relative;
+    width: 100%;
+    padding-bottom: 100%;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+
+  img {
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+
+  .text-box {
+    padding: 10px;
+  }
+
+  h3 {
+    font-size: 28px;
+    line-height: 32px;
+    margin: 5px 10px 15px 10px;
+    text-decoration: underline;
+    @include word-wrap();
+  }
+
+  .job-box,
+  .city-box {
+    margin-bottom: 5px;
+    background: var(--theme-color-primary-dimmed-04);
+    border-radius: 4px;
+    padding: 4px 0 2px 0;
+    @media(max-width: 567px) {
+      display: none;
+    }
+
+    span {
+      display: block;
+      position: relative;
+      width: calc(100% - 8px);
+      margin: 0;
+      padding: 0 0 0 26px;
+      font-size: 16px;
+      line-height: 18px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+
+      &:before {
+        position: absolute;
+        left: 4px;
+        top: 50%;
+        font-family: "Icons";
+        transform: translate(0, -50%);
+      }
+    }
+  }
+}

storybook/stories/components/header/header.scss

@@ -2,7 +2,7 @@
 @import '../../_global/styles/vars';
 
 @media(min-width: 1200px) {
-  .magazine-start, .magazine-article {
+  .magazine-start, .magazine-article, .header-collapsed {
     --header-height: 100px;
 
     .page-header {

storybook/stories/components/howto-list/HowToList.stories.js

@@ -0,0 +1,19 @@
+import {howToListData} from "./HowToListData";
+import {createHowToList} from "./HowToListComponent";
+
+export default {
+  title: 'Components/Howto-Liste',
+  argTypes: {
+    listItems: {
+      name: 'listItems',
+      control: {type: 'object'},
+      defaultValue: howToListData,
+    }
+  }
+}
+const Template = ({...args}) => {
+  return createHowToList({...args});
+}
+
+export const HowToList = Template.bind({});
+HowToList.args = {};

storybook/stories/components/howto-list/HowToListComponent.js

@@ -0,0 +1,29 @@
+import './howto-list.scss';
+import {createElement, createImage} from "../../_global/scripts/helpers";
+import {howToListData} from "./HowToListData";
+
+export const createHowToList =
+  ({
+     listItems: listItems = howToListData,
+     headline = 'Wie funktioniert’s?',
+     text = 'Bestimmen Sie die wirtschaftliche Ausrichtung ihrer Region mit! Wählen Sie die nächste Vollversammlung ihrer IHK. Hier erfahren Sie ganz genau, wie sie mitmachen.',
+  }) => {
+    const div = createElement('div', ['howto-list'], null);
+    const div2 = createElement('div', ['howto-list--left'], null, div);
+    createElement('h2', [], headline, div2);
+    createElement('p', [], text, div2);
+    const ul = createElement('ul', [], null, div);
+    listItems.map((item) => {
+      const li = createElement('li', [], null, ul);
+      const a = createElement('a', [], null, li);
+      createImage(item.icon, 100, 100, '', [], a);
+      createElement('h3', [], item.headline, a);
+      createElement('p', [], item.text, a);
+      createElement('span', [], item.more, a);
+      a.href = item.link;
+      if (item.copy && item.copy.length > 0) {
+        createElement('p', [], item.copy, li);
+      }
+    })
+    return div;
+  }

storybook/stories/components/howto-list/HowToListData.js

@@ -0,0 +1,23 @@
+export const howToListData = [
+  {
+    headline: '1. Wahlunterlagen',
+    text: 'Ihr Unternehmen ist IHK-Mitglied? Dann bekommen Sie automatisch am  12.02.2024 die Wahlunterlagen zugesandt.',
+    more: 'Mehr erfahren',
+    link: '#',
+    icon: './dummy/howto-list-01.svg',
+  },
+  {
+    headline: '2. Kandidat:innen',
+    text: 'Informieren Sie sich über die Kandidat:innen und deren Programm um Ihre Entscheidung zu fällen.',
+    more: 'Mehr erfahren',
+    link: '#',
+    icon: './dummy/howto-list-02.svg',
+  },
+  {
+    headline: '3. Stimmabgabe',
+    text: 'Geben Sie Ihre Stimmen auf den Ihnen zugesandten Unterlagen ab und schicken sie diese mit dem Rückumschlag an uns.',
+    more: 'Mehr erfahren',
+    link: '#',
+    icon: './dummy/howto-list-03.svg',
+  },
+]

storybook/stories/components/howto-list/howto-list.scss

@@ -0,0 +1,75 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.howto-list {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--section-margin);
+  margin-bottom: var(--section-margin);
+  @media(max-width: 767px) {
+    display: block;
+  }
+  &--left {
+    width: calc(50% - 30px);
+    @media(max-width: 767px) {
+      width: auto;
+      padding-bottom: 32px;
+    }
+  }
+  h2 {
+    margin-top: 0;
+    font-size: 64px;
+    line-height: 70px;
+    @media(max-width: 399px) {
+      font-size: 32px;
+      line-height: 35px;
+      margin-bottom: 0.3em;
+    }
+  }
+  p {
+
+  }
+  ul {
+    width: calc(50% - 30px);
+    margin: 0;
+    padding: 0 0 0 132px;
+    @media(max-width: 767px) {
+      width: auto;
+    }
+    @media(max-width: 399px) {
+      padding-left: 0;
+    }
+    li {
+      list-style: none;
+      padding: 0 0 32px 0;
+    }
+    a {
+      display: block;
+      position: relative;
+      text-decoration: none;
+    }
+    h3 {
+      margin-top: 0;
+      margin-bottom: 0.18em;
+    }
+    p {
+      margin-bottom: 5px;
+    }
+    span {
+      text-decoration: underline;
+    }
+    img {
+      position: absolute;
+      left: -132px;
+      top: 2px;
+      width: 100px;
+      height: auto;
+      @media(max-width: 399px) {
+        position: static;
+        left: auto;
+        top: auto;
+      }
+    }
+  }
+}
+

storybook/stories/components/image-text/ImageText.stories.js

@@ -0,0 +1,29 @@
+import {imageTextData} from "./ImageTextData";
+import {createImageText} from "./ImageTextComponent";
+
+export default {
+  title: 'Components/Image and Text',
+  argTypes: {
+    listItems: {
+      name: 'listItems',
+      control: {type: 'object'},
+      defaultValue: imageTextData,
+    }
+  }
+}
+const Template = ({...args}) => {
+  return createImageText({...args});
+}
+
+export const ImageAndText = Template.bind({});
+ImageAndText.args = {};
+
+export const ImageAndTextColored = Template.bind({});
+ImageAndTextColored.args = {
+  colored: 'colored',
+};
+
+export const ImageAndTextSwitched = Template.bind({});
+ImageAndTextSwitched.args = {
+  switched: 'switched',
+};

storybook/stories/components/image-text/ImageTextComponent.js

@@ -0,0 +1,35 @@
+import './image-text.scss';
+import {createElement, createImage} from "../../_global/scripts/helpers";
+import {imageTextData} from "./ImageTextData";
+
+export const createImageText =
+  ({
+     colored = 'no-color',
+     switched = 'normal',
+     listItems: listItems = imageTextData,
+     headline = 'Warum wählen?',
+     text = 'Sie können mitbestimmen, wer Sie und Ihre die Interessen Ihres Unternehmens vertritt.',
+     image = './dummy/why-elect.jpg',
+     link = '',
+     linkname = 'Mehr erfahren',
+  }) => {
+    const div = createElement('div', ['image-text', colored, switched], null);
+    const div2 = createElement('div', ['image-text--image'], null, div);
+    const div3 = createElement('div', ['image-text--text'], null, div);
+    createImage(image, 400, 400, '', [], div2);
+    createElement('h2', [], headline, div3);
+    createElement('p', [], text, div3);
+    const ul = createElement('ul', [], null, div3);
+    listItems.map((item) => {
+      const li = createElement('li', [], null, ul);
+      if (item.headline && item.headline.length > 0) {
+        createElement('h3', [], item.headline, li);
+      }
+      if (item.text && item.text.length > 0) {
+        createElement('p', [], item.text, li);
+      }
+    });
+    const a = createElement('a', ['btn', 'secondary', 'has-icon', 'icon-small-arrow-right-simple'], linkname, div3);
+    a.href = link;
+    return div;
+  }

storybook/stories/components/image-text/ImageTextData.js

@@ -0,0 +1,14 @@
+export const imageTextData = [
+  {
+    headline: 'Vetretung',
+    text: 'Sie können mitbestimmen, wer Sie und Ihre Unternehmensinteressen vertritt.',
+  },
+  {
+    headline: 'Mitbestimmung',
+    text: 'Nehmen Sie Einfluss auf die Ausrichtung und Politik der Kammer.',
+  },
+  {
+    headline: 'Networking',
+    text: 'Knüpfen Sie Kontakte zu anderen Unternehmern und Vertretern.',
+  },
+]

storybook/stories/components/image-text/image-text.scss

@@ -0,0 +1,132 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.image-text {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--section-margin);
+  padding: 45px 0;
+  position: relative;
+  z-index: 1;
+  @media(max-width: 767px) {
+    display: block;
+  }
+
+  &.colored {
+    &:before {
+      content: '';
+      background: var(--theme-grey-light);
+      position: absolute;
+      left: 50%;
+      top: 0;
+      width: 100vw;
+      height: 100%;
+      margin: 0 -50vw;
+      z-index: -1;
+    }
+  }
+
+  &.switched {
+    .image-text--image {
+      order: 2;
+    }
+
+    .image-text--text {
+      order: 1;
+    }
+  }
+
+  @media(max-width: 767px) {
+    display: block;
+  }
+
+  &--text,
+  &--image {
+    width: calc(50% - 30px);
+    @media(max-width: 767px) {
+      width: auto;
+      margin-bottom: 32px;
+    }
+  }
+
+  &--image {
+    position: relative;
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      display: block;
+      height: 8px;
+      background-color: var(--theme-color-secondary);
+      transition: 0.3s ease;
+      z-index: 1;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+  }
+
+  h2 {
+    margin-top: 0;
+    font-size: 64px;
+    line-height: 70px;
+    @media(max-width: 399px) {
+      font-size: 32px;
+      line-height: 35px;
+      margin-bottom: 0.3em;
+    }
+  }
+
+  a {
+    margin-top: 11px;
+  }
+
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 4px;
+  }
+
+  ul, ol {
+    margin: 1em 0 0 0;
+    padding: 0;
+
+    li {
+      position: relative;
+      display: block;
+      padding-left: 32px;
+      margin-bottom: 0.6em;
+
+      @media(max-width: 767px) {
+        padding-left: 24px;
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        width: 8px;
+        height: 8px;
+        border-radius: 3px;
+        background-color: var(--theme-color-secondary);
+        top: 9px;
+
+        @media(max-width: 767px) {
+          top: 10px;
+          width: 6px;
+          height: 6px;
+        }
+      }
+    }
+
+    h3 {
+      margin: 0;
+      font-size: var(--font-size-copy);
+      font-weight: 600;
+    }
+  }
+}
+

storybook/stories/components/magazine-header/MagazineHeader.stories.js

@@ -22,6 +22,11 @@ export default {
       control: 'text',
       defaultValue: 'Wirtschaftsdialoge',
     },
+    smalltext: {
+      name: 'Kleiner Titel (Textform, wenn Logo nicht angegeben ist)',
+      control: 'text',
+      defaultValue: 'IHK Musterstadt Wahl 2024',
+    },
   }
 }
 
@@ -42,3 +47,11 @@ TextMagazineHeader.args = {
   title: 'Wirtschaftsdialoge',
   logo: null,
 };
+
+export const TwoLinesMagazineHeader = Template.bind({});
+TwoLinesMagazineHeader.args = {
+  title: 'Eine starke Entscheidung',
+  smalltext: 'IHK Musterstadt Wahl 2024',
+  logo: './logos/magazine-header-flag.png',
+  backgroundColor: '#003366'
+};

storybook/stories/components/magazine-header/MagazineHeaderComponent.js

@@ -8,14 +8,26 @@ export const createMagazineHeader =
     size = 'regular',
     logo = './logos/wirtschaftsdialoge.svg',
     title = 'Wirtschaftsdialoge',
+    imgtext = 'regular',
+    smalltext = '',
+    backgroundColor = '',
+    inlineStyles = 'background: ' + backgroundColor + ';',
   }) => {
-    const header = createElement('div', ['magazine-header', size]);
-    createElement('span', ['gradient'], null, header);
-    const a = createElement('a', ['title'], null, header);
+    const header = createElement('div', ['magazine-header', size], null, null);
+    createElement('span', ['gradient'], null, header, inlineStyles);
+    if (logo && logo.length > 0 && smalltext.length > 0) {
+        imgtext = 'image-and-text';
+    }
+    const a = createElement('a', ['title', imgtext], null, header);
     a.href = '#';
     a.tabIndex = -1;
-    if (logo && logo.length > 0) {
+    if (logo && logo.length > 0 && smalltext.length === 0) {
       createImage(logo, 400, 100, 'Wirtschaftsdialoge Logo', [], a);
+    } else if (logo && logo.length > 0 && smalltext.length > 0) {
+      createImage(logo, 100, 100, '', [], a);
+      const div = createElement('div', ['text'], null, a);
+      createElement('span', ['title-text'], title, div);
+      createElement('span', ['small-text'], smalltext, div);
     } else {
       a.innerText = title;
     }

storybook/stories/components/magazine-header/magazine-header.scss

@@ -58,6 +58,42 @@
     margin: 0 auto;
   }
 
+  .image-and-text {
+    display: flex;
+    align-items: center;
+    @media(max-width: 567px) {
+      width: auto;
+    }
+    img {
+      @media(max-width: 370px) {
+        display: none;
+      }
+    }
+  }
+  .text {
+    display: flex;
+    flex-direction: column;
+    font-size: 32px;
+    line-height: 29px;
+    padding-left: 10px;
+    margin: 0;
+    white-space: nowrap;
+    @media(max-width: 567px) {
+      font-size: 22px;
+      line-height: 19px;
+    }
+    .title-text {
+      text-align: right;
+    }
+    .small-text {
+      text-align: right;
+      font-size: 19px;
+      @media(max-width: 567px) {
+        font-size: 13px;
+      }
+    }
+  }
+
   &.narrow {
     --magazine-header-height: 50px;
     margin-bottom: 10px;

storybook/stories/pages/election-detail/ElectionDetailPage.js

@@ -0,0 +1,29 @@
+import {createElement} from "../../_global/scripts/helpers";
+import {createHeader} from "../../components/header/HeaderComponent";
+import {createFooter} from "../../components/footer/FooterComponent";
+import {createMagazineHeader} from "../../components/magazine-header/MagazineHeaderComponent";
+import {createElectionDetail} from "../../sections/election-detail/ElectionDetailComponent";
+
+export const createElectionDetailPage = ({
+  stageWithImage = false,
+}) => {
+  const page = createElement('div', ['page', 'header-collapsed']);
+  const magazineHeader = createMagazineHeader({
+    title: 'Eine starke Entscheidung',
+    smalltext: 'IHK Musterstadt Wahl 2024',
+    logo: './logos/magazine-header-flag.png',
+  });
+
+  page.appendChild(createHeader({}));
+  page.appendChild(magazineHeader);
+
+  const wrapper = createElement('div', ['page-wrapper'], null, page);
+  const pageContent = createElement('div', ['page-content'], null, wrapper);
+  const container = createElement('div', ['container'], null, pageContent);
+
+  container.appendChild(createElectionDetail({}));
+
+  page.appendChild(createFooter({}))
+
+  return page;
+}

storybook/stories/pages/election-detail/ElectionDetailPage.stories.js

@@ -0,0 +1,18 @@
+import {createElectionDetailPage} from "./ElectionDetailPage";
+
+export default {
+  title: 'Pages/Election Detail Page',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+
+  },
+}
+
+const Template = ({...args}) => {
+  return createElectionDetailPage({...args});
+};
+
+export const ElectionDetailPage = Template.bind({});
+ElectionDetailPage.args = {};

storybook/stories/pages/election-overview/ElectionOverviewPage.js

@@ -0,0 +1,31 @@
+import {createElement} from "../../_global/scripts/helpers";
+import {createHeader} from "../../components/header/HeaderComponent";
+import {createFooter} from "../../components/footer/FooterComponent";
+import {createElectionForm} from "../../components/election-form/ElectionFormComponent";
+import {createMagazineHeader} from "../../components/magazine-header/MagazineHeaderComponent";
+import {createElectionResultList} from "../../sections/election-result-list/ElectionResultListComponent";
+
+export const createElectionOverviewPage = ({
+  stageWithImage = false,
+}) => {
+  const page = createElement('div', ['page', 'header-collapsed']);
+  const magazineHeader = createMagazineHeader({
+    title: 'Eine starke Entscheidung',
+    smalltext: 'IHK Musterstadt Wahl 2024',
+    logo: './logos/magazine-header-flag.png',
+  });
+
+  page.appendChild(createHeader({}));
+  page.appendChild(magazineHeader);
+
+  const wrapper = createElement('div', ['page-wrapper'], null, page);
+  const pageContent = createElement('div', ['page-content'], null, wrapper);
+  const container = createElement('div', ['container'], null, pageContent);
+
+  container.appendChild(createElectionForm({}));
+  container.appendChild(createElectionResultList({}));
+
+  page.appendChild(createFooter({}))
+
+  return page;
+}

storybook/stories/pages/election-overview/ElectionOverviewPage.stories.js

@@ -0,0 +1,18 @@
+import {createElectionOverviewPage} from "./ElectionOverviewPage";
+
+export default {
+  title: 'Pages/Election Overview Page',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+
+  },
+}
+
+const Template = ({...args}) => {
+  return createElectionOverviewPage({...args});
+};
+
+export const ElectionOverviewPage = Template.bind({});
+ElectionOverviewPage.args = {};

storybook/stories/pages/election-start/ElectionStartPage.js

@@ -0,0 +1,52 @@
+import {createElement} from "../../_global/scripts/helpers";
+import {createHeader} from "../../components/header/HeaderComponent";
+import {createFooter} from "../../components/footer/FooterComponent";
+import {createElectionForm} from "../../components/election-form/ElectionFormComponent";
+import {createImageText} from "../../components/image-text/ImageTextComponent";
+import {createHowToList} from "../../components/howto-list/HowToListComponent";
+import {createMagazineHeader} from "../../components/magazine-header/MagazineHeaderComponent";
+import {createParticipationStage} from "../../sections/participation-stage/ParticipationStageComponent";
+
+export const createElectionStartPage = ({
+  stageWithImage = false,
+}) => {
+  const page = createElement('div', ['page', 'header-collapsed']);
+  const magazineHeader = createMagazineHeader({
+    title: 'Eine starke Entscheidung',
+    smalltext: 'IHK Musterstadt Wahl 2024',
+    logo: './logos/magazine-header-flag.png',
+  });
+
+  page.appendChild(createHeader({}));
+  page.appendChild(magazineHeader);
+
+  const wrapper = createElement('div', ['page-wrapper'], null, page);
+  const pageContent = createElement('div', ['page-content'], null, wrapper);
+
+  pageContent.appendChild(createParticipationStage({
+    imageSrc: null,
+    kicker: 'IHK Musterstadt Vollversammlung',
+    headline: 'Mach’ mit bei der Wahl zur Vollversammlung der IHK Musterstadt!',
+    copy: 'Die Vollversammlung ist das demokratische Herzstück der IHK. Hier entscheiden alle wesentlichen Branchen der regionalen Wirtschaft gemeinsam über die Zukunft der Region.',
+    moreCta: null,
+    buttonCta: {
+      label: 'Entdecken Sie Ihre Kandidat:innen',
+      link: '#',
+      target: '_self',
+    },
+    showProgress: false,
+    progress: null,
+    backgroundImage: './logos/election-header.jpg',
+    isFirstElement: true,
+  }));
+  const container = createElement('div', ['container'], null, pageContent);
+
+  container.appendChild(createHowToList({}));
+  container.appendChild(createImageText({colored: 'colored'}));
+  container.appendChild(createImageText({switched: 'switched'}));
+  container.appendChild(createElectionForm({}));
+
+  page.appendChild(createFooter({}))
+
+  return page;
+}

storybook/stories/pages/election-start/ElectionStartPage.stories.js

@@ -0,0 +1,18 @@
+import {createElectionStartPage} from "./ElectionStartPage";
+
+export default {
+  title: 'Pages/Election Start Page',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+
+  },
+}
+
+const Template = ({...args}) => {
+  return createElectionStartPage({...args});
+};
+
+export const ElectionStartPage = Template.bind({});
+ElectionStartPage.args = {};

storybook/stories/sections/election-detail/ElectionDetail.stories.js

@@ -0,0 +1,45 @@
+import {createElectionDetail} from "./ElectionDetailComponent";
+
+export default {
+  title: 'Sections/Election Detail',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {},
+}
+
+const Template = ({...args}) => {
+  return createElectionDetail({...args});
+};
+
+export const ElectionDetail = Template.bind({});
+ElectionDetail.args = {};
+
+export const ElectionDetailNoVideo = Template.bind({});
+ElectionDetailNoVideo.args = {
+  showVideo: false,
+};
+
+export const ElectionDetailNoText = Template.bind({});
+ElectionDetailNoText.args = {
+  showVideo: false,
+  textheadline: '',
+  copy: '',
+};
+
+export const ElectionDetailNoSocial = Template.bind({});
+ElectionDetailNoSocial.args = {
+  showVideo: false,
+  textheadline: '',
+  copy: '',
+  showSocialMedia: false,
+};
+
+export const ElectionDetailNoElectionArea = Template.bind({});
+ElectionDetailNoElectionArea.args = {
+  showVideo: false,
+  textheadline: '',
+  copy: '',
+  showSocialMedia: false,
+  showElectionArea: false,
+};

storybook/stories/sections/election-detail/ElectionDetailComponent.js

@@ -0,0 +1,109 @@
+import './election-detail.scss';
+import {createElement, createImage} from "../../_global/scripts/helpers";
+import {createSocialIcons} from "../../atoms/social-icons/SocialIconsComponent";
+import {socialIconsBookmark} from "../../atoms/social-icons/SocialIconsData";
+import {createVideo} from "../../components/video/VideoComponent";
+import {createButton} from "../../atoms/button/ButtonComponent";
+
+export const createElectionDetail =
+  ({
+    image = './dummy/election-list-cover.jpg',
+    name = 'Lars-Hendrick Pirckensee',
+    subheadline = 'Geschäftsführerin Cocolor GmbH',
+    textheadline = 'Was möchten Sie bewegen?',
+    copy = 'Ich kandidiere, weil ich als Familienunternehmer die Bedingungen für die kommenden Generationen und die Anliegen der Musterstädtischen Groß- und Außenhändler in der IHK aktiv mitgestalten will.  Dabei ist es mir sehr wichtig, Ideen gegen den Fachkräftemangel zu entwickeln, die Chancen der Digitalisierung zu nutzen und die Infrastruktur für alle Verkehrsträger zukunftsfähig aufzustellen!  Dabei ist es mir sehr wichtig, Ideen gegen den Fachkräftemangel zu entwickeln, die Chancen der Digitalisierung zu nutzen und die Infrastruktur für alle Verkehrsträger zukunftsfähig aufzustellen!  Dabei ist es mir sehr wichtig, Ideen gegen den Fachkräftemangel zu entwickeln, die Chancen der Digitalisierung zu nutzen und die Infrastruktur für alle Verkehrsträger zukunftsfähig aufzustellen!',
+    smheadline = 'Meine Kanäle',
+    infoheadline1 = 'Wahlgruppe 02',
+    infoheadline2 = 'Wahlbezirk 05',
+    infoheadline3 = 'Unternehmen',
+    infotext1 = 'Kreditinstitute / Versicherungen / Immobilienwirtschaft',
+    infotext2 = 'Kreisfreie Stadt Musterstadt und Kreis Musterhausen',
+    infobox3headline = 'Cocolor GmbH',
+    infobox3address = 'Carl-Backhaus-Str. 13<br />22926 Ahrensburg ',
+    infobox3website = 'Unternehmenswebseite',
+    infobox3email = 'E-Mail',
+    infobox3phone = '+49 4102 77899-31',
+    backButton = 'Zur Kandidatenübersicht',
+    contactHeadline = 'IHK-Wahlbüro',
+    contactText = 'Wir beantworten gerne Ihre Fragen zur IHK-Wahl 2024. Rufen Sie uns einfach an.',
+    showVideo = true,
+    showSocialMedia = true,
+    showElectionArea = true,
+  }) => {
+    const electionDetail = createElement('div', ['election-detail']);
+    const text = createElement('div', ['election-detail--text'], null, electionDetail);
+    if (showVideo) {
+        const video = createElement('div', ['election-detail--video'], null, electionDetail);
+        const videocontainer = createElement('div', ['video-container'], null, video);
+        videocontainer.appendChild(createVideo({
+            caption: '',
+            copyright: '',
+        }));
+    }
+    const info = createElement('div', ['election-detail--info'], null, electionDetail);
+    const back = createElement('div', ['election-detail--back'], null, electionDetail);
+    const more = createElement('div', ['election-detail--more', 'contact-wrapper'], null, electionDetail);
+
+    createImage(image, 545, 526, '', [], text);
+    const textbox = createElement('div', ['text-box'], null, text);
+    createElement('h1', [], name, textbox);
+    createElement('p', ['subheadline'], subheadline, textbox);
+    if (textheadline) {
+        createElement('h2', [], textheadline, textbox);
+    }
+    if (copy) {
+        createElement('p', [], copy, textbox);
+    }
+
+    if (showSocialMedia) {
+        const socialmedia = createElement('div', ['social-media'], null, textbox);
+        createElement('p', [], smheadline, socialmedia);
+        const iconsList = createSocialIcons({
+          items: socialIconsBookmark,
+        })
+        socialmedia.appendChild(iconsList);
+    }
+
+    const info1 = createElement('div', ['info-box', 'info-box-01'], null, info);
+    createElement('p', ['info-headline'], infoheadline1, info1);
+    const boxContent1 = createElement('p', ['info-box--content', 'info-box--text'], null, info1);
+    const boxContent1A = createElement('a', [], infotext1, boxContent1);
+    boxContent1A.href = '#';
+
+    if (showElectionArea) {
+        const info2 = createElement('div', ['info-box', 'info-box-02'], null, info);
+        createElement('p', ['info-headline'], infoheadline2, info2);
+        const boxContent2 = createElement('p', ['info-box--content', 'info-box--text'], null, info2);
+        const boxContent2A = createElement('a', [], infotext2, boxContent2);
+        boxContent2A.href = '#';
+    }
+
+    const info3 = createElement('div', ['info-box', 'info-box-03'], null, info);
+    createElement('p', ['info-headline'], infoheadline3, info3);
+    const info3content = createElement('div', ['info-box--content', 'info-box--content'], null, info3);
+    createElement('p', ['headline'], infobox3headline, info3content);
+    createElement('p', ['address'], infobox3address, info3content);
+    const website = createElement('p', [], null, info3content);
+    const websiteA = createElement('a', [], infobox3website, website);
+    websiteA.href = '#';
+    const email = createElement('p', [], null, info3content);
+    const emailA = createElement('a', [], infobox3email, email);
+    emailA.href = 'mailto:#';
+    const phone = createElement('p', [], null, info3content);
+    const phoneA = createElement('a', [], infobox3phone, phone);
+    phoneA.href = 'tel:004941027789931';
+
+    back.appendChild(createButton({
+        label: backButton,
+    }));
+
+    createElement('h3', [], contactHeadline, more);
+    createElement('p', [], contactText, more);
+
+    const ul = createElement('ul', ['contact-buttons'], null, more);
+    const li = createElement('li', [], null, ul);
+    const liA = createElement('a', ['icon-telefon', 'btn', 'white', 'btn-small', 'icon-left'], '04141/524-0', li);
+    liA.href= 'tel:04141/524-0';
+
+    return electionDetail;
+  }

storybook/stories/sections/election-detail/election-detail.scss

@@ -0,0 +1,162 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.election-detail {
+  margin: 0 0 80px 0;
+  &--text {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    background: var(--theme-color-primary-dimmed-04);
+    padding: 0 0 30px 0;
+    @media (max-width: 1100px) {
+      display: block;
+    }
+
+    img {
+      display: block;
+      width: 545px;
+      margin: 0 40px 0 0;
+      @media (max-width: 1100px) {
+        width: 100%;
+      }
+    }
+
+    .text-box {
+      flex: 1;
+      padding-right: 1.5rem;
+      @media (max-width: 1100px) {
+        padding-left: 15px;
+        padding-right: 15px;
+      }
+    }
+
+    h1 {
+      margin: 1.5rem 0;
+    }
+
+    h2 {
+      margin: 0 0 0.75rem 0;
+      font-size: 36px;
+      line-height: 42px;
+    }
+
+    p {
+      margin: 0 0 1.5rem 0;
+
+      &.subheadline {
+        margin: -1rem 0 1.5rem 0;
+        font-weight: 600;
+      }
+    }
+
+    .social-media {
+      p {
+        font-size: 1rem;
+        text-transform: uppercase;
+        margin: 0 0 0.5rem 0;
+      }
+
+      .social-icons {
+        a {
+          &:before {
+            color: var(--theme-color-primary);
+          }
+
+          &:hover:before {
+            color: var(--theme-color-secondary);
+          }
+        }
+      }
+    }
+  }
+
+  &--video {
+    padding: 30px 0;
+    background: var(--theme-color-primary-dimmed-02);
+    @media (max-width: 1100px) {
+      background: none;
+    }
+
+    .video-container {
+      margin: 0 auto;
+      max-width: 976px;
+      @media (max-width: 1100px) {
+        width: 100%;
+        max-width: none;
+      }
+      .video {
+        margin: 0;
+      }
+    }
+  }
+
+  &--info {
+    display: flex;
+    justify-content: space-between;
+    background: var(--theme-color-primary);
+    color: var(--theme-color-white);
+    @media (max-width: 1023px) {
+      display: block;
+      background: none;
+    }
+
+    .info-box {
+      flex: 1;
+      padding: 30px 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      @media (max-width: 1023px) {
+        background: var(--theme-color-primary);
+        margin: 0 0 5px 0;
+      }
+    }
+    .info-headline {
+      @include kicker;
+    }
+    .info-box--content {
+      p {
+        font-size: 18px;
+        line-height: 27px;
+        margin: 0 0 5px 0;
+        &.headline {
+          font-weight: 600;
+          margin: 0;
+        }
+        &.address {
+          margin-bottom: 10px;
+        }
+      }
+    }
+    .info-box--text {
+      font-size: 36px;
+      line-height: 44px;
+      margin: 0;
+      font-family: 'Korb', sans-serif;
+      @media (max-width: 767px) {
+        font-size: 24px;
+        line-height: 29px;
+      }
+    }
+    a {
+      color: var(--theme-color-white);
+      &:hover {
+        color: var(--theme-color-secondary);
+      }
+    }
+  }
+
+  &--back {
+    background: var(--theme-color-primary-dimmed-04);
+    display: flex;
+    justify-content: center;
+    padding: 30px 15px;
+    margin: 20px 0 0 0;
+  }
+
+  &--more {
+    margin: 60px 0 0 0 !important;
+    max-width: none !important;
+  }
+}

storybook/stories/sections/election-result-list/ElectionResultList.stories.js

@@ -0,0 +1,24 @@
+import {electionResultListData} from "./ElectionResultListData";
+import {createElectionResultList} from "./ElectionResultListComponent";
+
+export default {
+  title: 'Sections/Election Result List',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    resultList: electionResultListData
+  },
+  argTypes: {
+    type: {
+      name: 'Election Result List Typ',
+    }
+  }
+}
+
+const Template = ({...args}) => {
+  return createElectionResultList({...args});
+};
+
+export const ElectionResultList = Template.bind({});
+ElectionResultList.args = {};

storybook/stories/sections/election-result-list/ElectionResultListComponent.js

@@ -0,0 +1,41 @@
+import './election-result-list.scss';
+import {createElement} from "../../_global/scripts/helpers";
+import {electionResultListData} from "./ElectionResultListData";
+import {createElectionResultListItem} from "../../components/election-result-list-item/ElectionResultListItemComponent";
+import {
+    createElectionResultListBadge
+} from "../../components/election-result-list-badge/ElectionResultListBadgeComponent";
+
+export const createElectionResultList =
+({
+    listItems = electionResultListData,
+}) => {
+
+    const electionResultList = createElement('div', ['election-result-list']);
+    const electionResultListHeader = createElement('div', ['election-result-list--header'], null, electionResultList);
+    const electionResultListHeaderLeft = createElement('div', ['election-result-list--header-left'], null, electionResultListHeader);
+    const electionResultListInner = createElement('div', ['election-result-list--inner'], null, electionResultList);
+
+    electionResultListHeaderLeft.appendChild(createElectionResultListBadge({
+        inverted: true,
+        preLabel: 'Wahlgruppe 19',
+        colon: true,
+        label: 'Kreditinstitute / Versicherungen / Immobilienwirtschaft',
+    }));
+    electionResultListHeaderLeft.appendChild(createElectionResultListBadge({
+        inverted: true,
+        preLabel: 'Wahlbezirk 5',
+        colon: true,
+        label: 'Kreisfreie Musterstadt, Musterhausen',
+    }));
+    electionResultListHeader.appendChild(createElectionResultListBadge({}));
+
+    listItems.map((items, index) => {
+        const item = createElectionResultListItem({
+            name: items.name
+        });
+        electionResultListInner.appendChild(item);
+    });
+
+    return electionResultList;
+}

storybook/stories/sections/election-result-list/ElectionResultListData.js

@@ -0,0 +1,26 @@
+export const electionResultListData = [
+  {
+    name: 'Peter Pan'
+  },
+  {
+    name: 'Hannelore Kohl'
+  },
+  {
+    name: 'Sabine Leutheuser-Schnarrenberger'
+  },
+  {
+    name: 'Rudi Rastlos'
+  },
+  {
+    name: 'Pedro Pony'
+  },
+  {
+    name: 'Ansgar Knut Weimar'
+  },
+  {
+    name: 'Hans Dampf'
+  },
+  {
+    name: 'Benjamin von Gröning-Saarfeld'
+  },
+]

storybook/stories/sections/election-result-list/election-result-list.scss

@@ -0,0 +1,46 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.election-result-list {
+  .election-result-list--header {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 20px;
+    @media (max-width: 767px) {
+      display: block;
+    }
+    &-left {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      @media (min-width: 768px) {
+        margin-right: 20px;
+      }
+    }
+  }
+  .election-result-list-badge {
+    @media (max-width: 767px) {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+  .election-result-list--inner {
+    //display: grid;
+    //grid-template-columns: repeat(4, minmax(269px, 1fr));
+    grid-gap: 30px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding: 20px 0 40px 0;
+
+    //@media (min-width: 549px) and (max-width: 567px) {
+    //  grid-template-columns: 1fr 1fr;
+    //}
+    //@media (max-width: 548px) {
+    //  grid-template-columns: repeat(auto-fit, minmax(163px, 1fr));
+    //}
+    //@media (max-width: 356px) {
+    //  grid-template-columns: 1fr;
+    //}
+  }
+}

storybook/stories/sections/participation-stage/ParticipationStage.stories.js

@@ -79,4 +79,15 @@ GenericParticipation.args = {
 }
 
 export const ParticipationWithImage = Template.bind({});
-ParticipationWithImage.args = {}
+ParticipationWithImage.args = {}
+
+export const ParticipationWithBackgroundImage = Template.bind({});
+ParticipationWithBackgroundImage.args = {
+  imageSrc: null,
+  backgroundImage: './logos/election-header.jpg',
+}
+
+export const ParticipationFirstElement = Template.bind({});
+ParticipationFirstElement.args = {
+  isFirstElement: true,
+}

storybook/stories/sections/participation-stage/ParticipationStageComponent.js

@@ -20,6 +20,8 @@ export const createParticipationStage = ({
   },
   showProgress = true,
   progress = 60,
+  backgroundImage = null,
+  isFirstElement = false,
 }) => {
   const hasImage = imageSrc && imageSrc.length > 0;
   const section = createElement('section', ['participation', 'participation-stage']);
@@ -28,6 +30,16 @@ export const createParticipationStage = ({
   const col = createElement('div', ['col'], null, row);
   const tb = createElement('div', ['text-box'], null, col);
 
+  if (backgroundImage && backgroundImage.length > 0) {
+    //section.content('style=background: red;');
+    section.style = 'background-image: url(' + backgroundImage + ');';
+    section.classList.add('background-image');
+  }
+
+  if (isFirstElement) {
+    section.classList.add('first-element');
+  }
+
   if (kicker && kicker.length > 0) {
     createElement('p', ['kicker'], kicker, tb);
   }

storybook/stories/sections/participation-stage/participation-stage.scss

@@ -10,6 +10,17 @@
   align-items: center;
   margin: 0;
 
+  &.background-image {
+    background-size: cover;
+    background-position: 50% 50%;
+  }
+
+  &.first-element {
+    @media(min-width: 1400px) {
+      margin-top: -60px;
+    }
+  }
+
   .kicker {
     margin-bottom: 0.6em;
   }

storybook/storybook-static/iframe.html

@@ -354,8 +354,8 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
 
       
-      import './runtime~main.f5bc3373.iframe.bundle.js';
+      import './runtime~main.1493efc7.iframe.bundle.js';
       
       import './2084.012e3dc4.iframe.bundle.js';
       
-      import './main.67217d82.iframe.bundle.js';</script></body></html>
+      import './main.77bda69a.iframe.bundle.js';</script></body></html>

templates/source/sass/partials/objects/_magazine.scss

@@ -129,7 +129,7 @@
   }
 }
 
-.magazine-start {
+.magazine-start, .header-collapsed {
   .page-content > .teasers:first-child {
     @media(max-width: 767px) {
       margin-top: 10px;
@@ -371,7 +371,7 @@ a:hover .reading-time {
   }
 }
 
-.magazine-article, .magazine-start {
+.magazine-article, .magazine-start, .header-collapsed {
   .teaser {
     .text-box:not(:last-child) {
       padding-bottom: 24px;