@public-ui/themes 2.0.0-rc.10 → 2.0.0-rc.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs +274 -2812
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.mjs +274 -2812
  4. package/package.json +12 -9
package/dist/index.cjs CHANGED
@@ -6048,2715 +6048,118 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
6048
6048
  }`
6049
6049
  });
6050
6050
 
6051
- const css$5 = (input) => input.join(``);
6051
+ var css_248z$A = "@layer kol-theme-component {\n .accordion {\n display: grid;\n background: var(--color-white);\n }\n .accordion-heading {\n border: 1px solid var(--color-primary-60);\n font-size: 1.3125rem; /* h3 font-size */\n }\n .headline {\n margin: 0;\n font-weight: normal;\n }\n .accordion-button .button {\n padding: 0 2rem;\n }\n .content {\n padding: 2rem 2rem 2.5rem;\n }\n}";
6052
6052
 
6053
- const BZSt = KoliBri.createTheme("bzst", {
6054
- GLOBAL: css$5`
6055
- /* NOTE: Alle ':root' CSS properties sollten in KoliBri zu ':host' kopiert werden und umgekehrt. Damit vereinheitlicht man alle Variablen auf beiden Seiten und kann diese dann individuell nutzen.*/ /* colors */
6056
- :root,
6057
- :host {
6058
- /* token */
6059
- --color-bleached-silk: #f2f2f2;
6060
- --color-carbon: #333;
6061
- --color-chilled-lemonade: #ffe695;
6062
- --color-green: #4d7f6f;
6063
- --color-green-light: #a7c0b8;
6064
- --color-green-dark: #23614e;
6065
- --color-heroic-blue: #126dff;
6066
- --color-mercury: #ebebeb;
6067
- --color-red-epiphyllum: #d00000;
6068
- --color-speedwell: #595f73;
6069
- --color-tropic-sea: #007194;
6070
- --color-white: #fff; /* template */ /* general */
6071
- --colorDark: var(--color-carbon);
6072
- --colorLight: var(--color-white); /* primary color */
6073
- --colorPrimary: var(--color-green-dark);
6074
- --colorPrimaryFront: var(--color-white);
6075
- --colorPrimarySuccess: var(--color-green);
6076
- --colorPrimarySuccessFront: var(--color-white);
6077
- --colorPrimaryActive: var(--color-green-light);
6078
- --colorPrimaryActiveFront: var(--color-carbon); /* secondary color */
6079
- --colorSecondary: var(--color-white);
6080
- --colorSecondaryFront: var(--color-carbon);
6081
- --colorSecondarySuccess: var(--color-bleached-silk);
6082
- --colorSecondarySuccessFront: var(--color-carbon);
6083
- --colorSecondaryActive: var(--color-mercury);
6084
- --colorSecondaryActiveFront: var(--color-carbon); /* text */
6085
- --colorText: var(--color-carbon);
6086
- --colorTextBg: var(--color-white);
6087
- --colorTextLight: var(--color-white);
6088
- --colorTextLightBg: var(--color-carbon);
6089
- --colorTextDisabled: var(--color-speedwell);
6090
- --colorTextDisabledBg: var(--color-mercury);
6091
- --colorTextActive: var(--color-green-dark);
6092
- --colorTextActiveBg: var(--color-white); /* signal */
6093
- --colorSignal: var(--color-tropic-sea);
6094
- --colorSignalFront: var(--color-white); /* colorSignalFocus hat keine Frontfarbe */
6095
- --colorSignalFocus: var(--color-heroic-blue);
6096
- --colorSignalSuccess: var(--color-green);
6097
- --colorSignalSuccessFront: var(--color-white);
6098
- --colorSignalWarn: var(--color-chilled-lemonade);
6099
- --colorSignalWarnFront: var(--color-carbon);
6100
- --colorSignalError: var(--color-red-epiphyllum);
6101
- --colorSignalErrorFront: var(--color-white); /* disabled */
6102
- --colorDisabled: var(--color-mercury);
6103
- } /* font, headline, text */
6104
- :root,
6105
- :host {
6106
- /* token */
6107
- --font-family: 'BundesSans Web', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
6108
- 'Helvetica Neue', sans-serif; /* Basis-Größe: html, rem */
6109
- --font-size: 100%;
6110
- --line-height: 1.6875rem; /* template */ /* h1 */
6111
- --headline1FontSize: 2.5rem;
6112
- --headline1LineHeight: 2.8125rem; /* h2 */
6113
- --headline2FontSize: 2rem;
6114
- --headline2LineHeight: 2.5rem; /* h3 */
6115
- --headline3FontSize: 1.3125rem;
6116
- --headline3LineHeight: 1.6875rem; /* h4 */
6117
- --headline4FontSize: 1rem;
6118
- --headline4LineHeight: 1.6875rem; /* text */
6119
- --textFont: var(--font-family);
6120
- --textFontColor: var(--colorText);
6121
- --textFontSerif: 'BundesSerif Web', var(--textFont);
6122
- --textFontSize: 1rem;
6123
- --textFontLineHeight: 1.6875rem;
6124
- --textFontWeight: normal;
6125
- } /* Abstände */
6126
- :root,
6127
- :host {
6128
- /* template */
6129
- --gap: 2rem;
6130
- --gapDouble: calc(var(--gap) * 2);
6131
- --gapSmall: 1.25rem; /* TODO: benötigt nur außerhalb KoliBri Komponenten? */
6132
- --gapSmallest: 0.625rem;
6133
- --gapLarge: 2.5rem;
6134
- } /* formular */
6135
- :root,
6136
- :host {
6137
- /* template */
6138
- --formBorderWidthAndStyle: 1px solid; /* TODO: eigentlich --color-green sein, aber im Styleguide ist der Wert: #23614E */
6139
- --formBorder: var(--formBorderWidthAndStyle) var(--colorPrimarySuccess);
6140
- --formBorderHover: var(--formBorderWidthAndStyle) var(--colorPrimaryActive);
6141
- --formBorderDisabled: var(--formBorderWidthAndStyle) var(--colorDisabled);
6142
- --formBorderInvalid: var(--formBorderWidthAndStyle) var(--colorSignalError);
6143
- --focusOutline: var(--colorSignalFocus) solid 2px;
6144
- --formFieldBackground: var(--colorLight); /*Select option */
6145
- --formFieldBackgroundHover: var(--colorPrimary); /* Select options */
6146
- --formFieldBackgroundEven: var(--formFieldBackground); /* Select options */
6147
- --formFieldBackgroundOdd: var(--colorSecondaryActive);
6148
- --formFieldBackgroundDisabled: var(--colorSecondarySuccess);
6149
- --formFieldTextColorDisabled: var(--colorTextDisabled);
6150
- } /* ********************************* */ /* ********************************* */ /* ********************************* */ /* ********************************* */
6151
- :host {
6152
- /* Primärfarbe und Abstufungen */
6153
- --color-gruen-dunkel: var(--colorPrimary);
6154
- --color-gruen: var(--colorPrimarySuccess);
6155
- --color-gruen-hell: var(--colorPrimaryActive); /* Sekundärfarben */
6156
- --color-weiss: var(--colorSecondary);
6157
- --color-grau-dunkel: var(--colorSecondaryFront);
6158
- --color-grau-hell: var(--colorSecondaryActive);
6159
- --color-grau-weiss: var(--colorSecondarySuccess); /* Textfarben */
6160
- --color-graublau: var(--colorTextDisabled); /* Signalfarben */
6161
- --color-blau: var(--colorSignalFocus);
6162
- --color-blau-dunkel: var(--colorSignal);
6163
- --color-gelb: var(--colorSignalWarn);
6164
- --color-rot: var(--colorSignalError);
6165
- --color-disabled: var(--colorTextDisabled);
6166
- --text-size: var(--textFontSize);
6167
- --color-focus: var(--color-blau);
6168
- --spacing: 4px;
6169
- --color-text: var(--color-grau-dunkel);
6170
- }
6171
- :host {
6172
- color: var(--color-black);
6173
- font-family: var(--font-family);
6174
- }
6175
- :host * {
6176
- box-sizing: border-box;
6177
- }
6178
- h1,
6179
- h2,
6180
- h3,
6181
- h4,
6182
- h5,
6183
- h6 {
6184
- font-family: var(--textFontSerif);
6185
- }
6186
- h1,
6187
- h2 {
6188
- font-weight: var(--textFontWeight);
6189
- }
6190
- h1 {
6191
- font-size: var(--headline1FontSize);
6192
- line-height: var(--headline1LineHeight);
6193
- }
6194
- h2 {
6195
- font-size: var(--headline2FontSize);
6196
- line-height: var(--headline2LineHeight);
6197
- }
6198
- h3 {
6199
- font-size: var(--headline3FontSize);
6200
- line-height: var(--headline3LineHeight);
6201
- }
6202
- h4,
6203
- h5,
6204
- h6 {
6205
- font-size: var(--headline4FontSize);
6206
- line-height: var(--headline4LineHeight);
6207
- }
6208
- a,
6209
- button,
6210
- input,
6211
- option,
6212
- select,
6213
- textarea {
6214
- hyphens: auto;
6215
- letter-spacing: inherit;
6216
- } /* a,button,caption,input,option,select,summary,table,textarea {font-size: 1rem;} */
6217
- summary {
6218
- hyphens: auto;
6219
- letter-spacing: inherit;
6220
- }
6221
- *[tabindex]:focus,
6222
- kol-input:not(.checkbox, .radio) .input:focus-within,
6223
- kol-input:is(.checkbox, .radio) input:focus,
6224
- summary:focus {
6225
- outline: var(--focusOutline);
6226
- outline-offset: 2px;
6227
- transition: outline-offset 0.2s linear;
6228
- }
6229
- @keyframes spin {
6230
- 0% {
6231
- transform: rotate(0deg);
6232
- }
6233
- 100% {
6234
- transform: rotate(360deg);
6235
- }
6236
- }
6237
- kol-tooltip .area {
6238
- background-color: var(--colorDark);
6239
- color: var(--colorLight);
6240
- }
6241
- kol-tooltip kol-span-wc {
6242
- line-height: 1.5em;
6243
- padding: 0.5rem 0.75rem;
6244
- }
6245
- kol-span-wc,
6246
- kol-span-wc > span {
6247
- gap: 0.5em;
6248
- }
6249
- kol-span-wc,
6250
- kol-span-wc > span {
6251
- gap: 0.3em;
6252
- }
6253
- `,
6254
- "KOL-BUTTON": css$5`
6255
- :host {
6256
- --background-color: var(--color-gruen-dunkel);
6257
- --border-color: var(--color-gruen-dunkel);
6258
- --border-size: 1px;
6259
- --min-size: 2.75rem;
6260
- display: inline-block;
6261
- }
6262
- :is(button, a) {
6263
- outline: none;
6264
- &::before {
6265
- /* Render zero-width character as first element to set the baseline correctly. */
6266
- content: '\\200B';
6267
- }
6268
- }
6269
- :is(button, a) > kol-span-wc {
6270
- border-width: var(--border-size);
6271
- border-style: solid;
6272
- min-width: var(--min-size);
6273
- min-height: var(--min-size);
6274
- display: grid;
6275
- gap: 0.25em;
6276
- line-height: 1.5;
6277
- font-family: var(--font-family);
6278
- cursor: pointer;
6279
- font-size: var(--text-size);
6280
- align-items: center;
6281
- padding: 0.5rem 0.875rem !important;
6282
- justify-content: center;
6283
- font-style: normal;
6284
- text-align: center;
6285
- text-transform: uppercase;
6286
- width: inherit;
6287
- transition-duration: 0.5s;
6288
- transition-property: background-color, color, border-color;
6289
- }
6290
- :is(button, a):hover:enabled > kol-span-wc {
6291
- text-decoration: underline;
6292
- }
6293
- :is(button, a):focus > kol-span-wc {
6294
- outline: var(--color-focus) solid 2px;
6295
- }
6296
- .primary :is(button, a) > kol-span-wc,
6297
- .primary :is(button, a):active > kol-span-wc,
6298
- .primary :is(button, a):hover > kol-span-wc {
6299
- background-color: var(--background-color);
6300
- border-color: var(--border-color);
6301
- color: var(--color-weiss);
6302
- }
6303
- .secondary :is(button, a) > kol-span-wc,
6304
- .danger :is(button, a) > kol-span-wc,
6305
- .normal :is(button, a) > kol-span-wc,
6306
- .ghost :is(button, a) > kol-span-wc {
6307
- background-color: var(--color-weiss);
6308
- border-color: var(--color-gruen-hell);
6309
- color: var(--color-grau-dunkel);
6310
- }
6311
- .ghost :is(button, a) > kol-span-wc {
6312
- background-color: transparent;
6313
- color: inherit;
6314
- border: calc(var(--border-size) * 2) solid transparent;
6315
- }
6316
- .secondary :is(button, a):active > kol-span-wc,
6317
- .secondary :is(button, a):hover > kol-span-wc {
6318
- background-color: var(--background-color);
6319
- border-color: var(--background-color);
6320
- border-width: var(--border-size);
6321
- color: var(--color-weiss);
6322
- }
6323
- :is(button, a):disabled > kol-span-wc,
6324
- :is(button, a):disabled:hover > kol-span-wc {
6325
- background-color: var(--color-weiss);
6326
- border-color: var(--color-grau-hell);
6327
- color: var(--color-disabled);
6328
- cursor: not-allowed;
6329
- }
6330
- `,
6331
- "KOL-INPUT-TEXT": css$5`
6332
- kol-input {
6333
- gap: 0.4em;
6334
- }
6335
- kol-input .error {
6336
- order: 3;
6337
- }
6338
- kol-input label {
6339
- font-weight: 700;
6340
- order: 1;
6341
- }
6342
- kol-input .input {
6343
- order: 2;
6344
- }
6345
- kol-input .hint {
6346
- order: 4;
6347
- font-size: 0.875em;
6348
- font-style: italic;
6349
- }
6350
- input {
6351
- border: none;
6352
- }
6353
- .input {
6354
- border-color: var(--color-grey);
6355
- border-style: solid;
6356
- border-width: 1px;
6357
- padding: 0 0.5em;
6358
- }
6359
- .input > kol-icon {
6360
- width: 1.5em;
6361
- }
6362
- .input > input:first-child {
6363
- padding-left: 0.375em;
6364
- }
6365
- .input > input:last-child {
6366
- padding-right: 0.375em;
6367
- }
6368
- .input:hover {
6369
- border-color: var(--color-gruen-hell);
6370
- }
6371
- input:not([type='color']):read-only,
6372
- input:disabled {
6373
- cursor: not-allowed;
6374
- }
6375
- .required label > span::after {
6376
- content: '*';
6377
- padding-left: 0.125em;
6378
- }
6379
- kol-input.error {
6380
- border-left: 3px solid var(--color-rot);
6381
- padding-left: 1em;
6382
- }
6383
- kol-input.error .input:focus-within {
6384
- outline-color: var(--color-rot) !important;
6385
- }
6386
- kol-input.error kol-alert.error {
6387
- color: var(--color-rot);
6388
- font-weight: 700;
6389
- }
6390
- .disabled {
6391
- opacity: 0.33;
6392
- }
6393
- label {
6394
- color: var(--color-text);
6395
- line-height: 1.5;
6396
- }
6397
- .input {
6398
- font-size: var(--text-size);
6399
- line-height: 1.5;
6400
- color: var(--colorText);
6401
- border-color: var(--color-gruen);
6402
- border-style: solid;
6403
- width: 100%;
6404
- }
6405
- input:not([type='range']) {
6406
- height: 2.75em;
6407
- }
6408
- input::placeholder {
6409
- color: var(--color-grau-dunkel);
6410
- }
6411
- .required label > span::after {
6412
- content: '*';
6413
- padding-left: 0.125em;
6414
- }
6415
- `,
6416
- "KOL-INPUT-PASSWORD": css$5`
6417
- kol-input {
6418
- display: grid;
6419
- padding: 0;
6420
- margin: 0;
6421
- }
6422
- input:focus,
6423
- input:hover,
6424
- select:focus,
6425
- select:hover,
6426
- textarea:focus,
6427
- textarea:hover {
6428
- border-color: black;
6429
- }
6430
- kol-input > label {
6431
- order: 1;
6432
- margin-bottom: 0.25em;
6433
- }
6434
- kol-input > label > span {
6435
- color: black;
6436
- font-size: 0.875rem;
6437
- line-height: 1.5rem;
6438
- }
6439
- kol-input > div.input {
6440
- background-color: white;
6441
- display: block;
6442
- order: 2;
6443
- }
6444
- kol-input > kol-alert.error {
6445
- margin-top: 0.25em;
6446
- order: 3;
6447
- }
6448
- input,
6449
- select,
6450
- textarea {
6451
- font-family: var(--font-family);
6452
- background-color: transparent;
6453
- box-sizing: border-box;
6454
- font-size: 1rem;
6455
- display: inline-flex;
6456
- line-height: 1.5em;
6457
- color: black;
6458
- border-color: var(--color-grau-dunkel);
6459
- border-width: 1px;
6460
- border-style: solid;
6461
- padding: 0.5em 0.75em;
6462
- overflow: hidden;
6463
- width: 100%;
6464
- }
6465
- input:not([type='range']),
6466
- select:not([multiple]) {
6467
- height: 2.75em;
6468
- }
6469
- textarea {
6470
- display: inherit;
6471
- }
6472
- input::placeholder {
6473
- color: var(--color-grau-dunkel);
6474
- }
6475
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
6476
- cursor: not-allowed;
6477
- }
6478
- .required label > span::after {
6479
- content: '*';
6480
- padding-left: 0.125em;
6481
- }
6482
- .icons {
6483
- display: flex;
6484
- justify-content: space-between;
6485
- height: 0;
6486
- }
6487
- .icons > * {
6488
- margin: 0.75em;
6489
- }
6490
- .icon-left input,
6491
- .icon-left select {
6492
- padding-left: 2em;
6493
- }
6494
- .icon-right input,
6495
- .icon-right select {
6496
- padding-right: 2em;
6497
- }
6498
- kol-button-wc {
6499
- position: relative;
6500
- float: right;
6501
- z-index: 1000;
6502
- margin-top: -33px;
6503
- }
6504
- kol-button-wc button {
6505
- border: 1px solid var(--color-grau-dunkel);
6506
- box-sizing: border-box;
6507
- background-color: transparent;
6508
- cursor: pointer;
6509
- }
6510
- .icon-right kol-button-wc {
6511
- margin-right: 2.5em;
6512
- }
6513
- .disabled {
6514
- opacity: 0.33;
6515
- }
6516
- select[multiple],
6517
- textarea {
6518
- overflow: auto;
6519
- }
6520
- textarea {
6521
- display: block;
6522
- }
6523
- select option {
6524
- margin: 1px 0;
6525
- padding: 0.5em;
6526
- cursor: pointer;
6527
- }
6528
- select option:disabled {
6529
- cursor: not-allowed;
6530
- }
6531
- option:active:not(:disabled),
6532
- option:checked:not(:disabled),
6533
- option:focus:not(:disabled),
6534
- option:hover:not(:disabled) {
6535
- color: white;
6536
- }
6537
- `,
6538
- "KOL-INPUT-NUMBER": css$5`
6539
- kol-input {
6540
- display: grid;
6541
- padding: 0;
6542
- margin: 0;
6543
- }
6544
- input:focus,
6545
- input:hover,
6546
- select:focus,
6547
- select:hover,
6548
- textarea:focus,
6549
- textarea:hover {
6550
- border-color: black;
6551
- }
6552
- input:focus-within,
6553
- select:focus-within,
6554
- textarea:focus-within {
6555
- outline: var(--color-focus) solid 2px;
6556
- }
6557
- kol-input label {
6558
- font-weight: 700;
6559
- order: 1;
6560
- margin-bottom: var(--gapSmallest);
6561
- }
6562
- kol-input label > span {
6563
- color: black;
6564
- font-size: 0.875rem;
6565
- line-height: 1.5rem;
6566
- }
6567
- kol-input > div.input {
6568
- background-color: white;
6569
- display: block;
6570
- order: 2;
6571
- }
6572
- kol-input > kol-alert.error {
6573
- margin-top: 0.25em;
6574
- order: 3;
6575
- }
6576
- input,
6577
- select,
6578
- textarea {
6579
- font-family: var(--textFont);
6580
- background-color: transparent;
6581
- box-sizing: border-box;
6582
- font-size: var(--textFontSize);
6583
- display: inline-flex;
6584
- line-height: 1.5;
6585
- color: black;
6586
- border-color: var(--color-gruen);
6587
- border-width: 1px;
6588
- border-style: solid;
6589
- padding: 0.5em;
6590
- overflow: hidden;
6591
- width: 100%;
6592
- }
6593
- input:not([type='range']),
6594
- select:not([multiple]) {
6595
- height: 2.75em;
6596
- }
6597
- textarea {
6598
- display: inherit;
6599
- }
6600
- input::placeholder {
6601
- color: var(--color-grau-dunkel);
6602
- }
6603
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
6604
- cursor: not-allowed;
6605
- }
6606
- .required label > span::after {
6607
- content: '*';
6608
- padding-left: 0.125em;
6609
- }
6610
- .icons {
6611
- display: flex;
6612
- justify-content: space-between;
6613
- height: 0;
6614
- }
6615
- .icons > * {
6616
- margin: 0.75em;
6617
- }
6618
- .icon-left input,
6619
- .icon-left select {
6620
- padding-left: 2em;
6621
- }
6622
- .icon-right input,
6623
- .icon-right select {
6624
- padding-right: 2em;
6625
- }
6626
- kol-button-wc {
6627
- position: relative;
6628
- float: right;
6629
- z-index: 1;
6630
- margin-top: -33px;
6631
- }
6632
- kol-button-wc button {
6633
- border: 1px solid var(--color-grau-dunkel);
6634
- box-sizing: border-box;
6635
- background-color: transparent;
6636
- cursor: pointer;
6637
- }
6638
- .icon-right kol-button-wc {
6639
- margin-right: 2.5em;
6640
- }
6641
- .disabled {
6642
- opacity: 0.33;
6643
- }
6644
- select[multiple],
6645
- textarea {
6646
- overflow: auto;
6647
- }
6648
- textarea {
6649
- display: block;
6650
- }
6651
- select option {
6652
- margin: 1px 0;
6653
- padding: 0.5em;
6654
- cursor: pointer;
6655
- }
6656
- select option:disabled {
6657
- cursor: not-allowed;
6658
- }
6659
- option:active:not(:disabled),
6660
- option:checked:not(:disabled),
6661
- option:focus:not(:disabled),
6662
- option:hover:not(:disabled) {
6663
- background: var(--color-ocean);
6664
- color: white;
6665
- }
6666
- `,
6667
- "KOL-INPUT-DATE": css$5`
6668
- kol-input label {
6669
- font-weight: 700;
6670
- margin-bottom: var(--gapSmallest);
6671
- }
6672
- input {
6673
- border: var(--formBorder);
6674
- }
6675
- input:hover {
6676
- border: var(--formBorderHover);
6677
- }
6678
- `,
6679
- "KOL-INPUT-EMAIL": css$5`
6680
- kol-input {
6681
- display: grid;
6682
- padding: 0;
6683
- margin: 0;
6684
- }
6685
- input:focus,
6686
- input:hover,
6687
- select:focus,
6688
- select:hover,
6689
- textarea:focus,
6690
- textarea:hover {
6691
- border-color: black;
6692
- }
6693
- kol-input > label {
6694
- order: 1;
6695
- margin-bottom: 0.25em;
6696
- }
6697
- kol-input > label > span {
6698
- color: black;
6699
- font-size: 0.875rem;
6700
- line-height: 1.5rem;
6701
- }
6702
- kol-input > div.input {
6703
- background-color: white;
6704
- display: block;
6705
- order: 2;
6706
- }
6707
- kol-input > kol-alert.error {
6708
- margin-top: 0.25em;
6709
- order: 3;
6710
- }
6711
- input,
6712
- select,
6713
- textarea {
6714
- font-family: var(--font-family);
6715
- background-color: transparent;
6716
- box-sizing: border-box;
6717
- font-size: 1rem;
6718
- display: inline-flex;
6719
- line-height: 1.5em;
6720
- color: black;
6721
- border-color: var(--color-grau-dunkel);
6722
- border-width: 1px;
6723
- border-style: solid;
6724
- padding: 0.5em 0.75em;
6725
- overflow: hidden;
6726
- width: 100%;
6727
- }
6728
- input:not([type='range']),
6729
- select:not([multiple]) {
6730
- height: 2.75em;
6731
- }
6732
- textarea {
6733
- display: inherit;
6734
- }
6735
- input::placeholder {
6736
- color: var(--color-grau-dunkel);
6737
- }
6738
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
6739
- cursor: not-allowed;
6740
- }
6741
- .required label > span::after {
6742
- content: '*';
6743
- padding-left: 0.125em;
6744
- }
6745
- .icons {
6746
- display: flex;
6747
- justify-content: space-between;
6748
- height: 0;
6749
- }
6750
- .icons > * {
6751
- margin: 0.75em;
6752
- }
6753
- .icon-left input,
6754
- .icon-left select {
6755
- padding-left: 2em;
6756
- }
6757
- .icon-right input,
6758
- .icon-right select {
6759
- padding-right: 2em;
6760
- }
6761
- kol-button-wc {
6762
- position: relative;
6763
- float: right;
6764
- z-index: 1000;
6765
- margin-top: -33px;
6766
- }
6767
- kol-button-wc button {
6768
- border: 1px solid var(--color-grau-dunkel);
6769
- box-sizing: border-box;
6770
- background-color: transparent;
6771
- cursor: pointer;
6772
- }
6773
- .icon-right kol-button-wc {
6774
- margin-right: 2.5em;
6775
- }
6776
- .disabled {
6777
- opacity: 0.33;
6778
- }
6779
- select[multiple],
6780
- textarea {
6781
- overflow: auto;
6782
- }
6783
- textarea {
6784
- display: block;
6785
- }
6786
- select option {
6787
- margin: 1px 0;
6788
- padding: 0.5em;
6789
- cursor: pointer;
6790
- }
6791
- select option:disabled {
6792
- cursor: not-allowed;
6793
- }
6794
- option:active:not(:disabled),
6795
- option:checked:not(:disabled),
6796
- option:focus:not(:disabled),
6797
- option:hover:not(:disabled) {
6798
- color: white;
6799
- }
6800
- `,
6801
- "KOL-INPUT-FILE": css$5`
6802
- kol-input {
6803
- display: grid;
6804
- padding: 0;
6805
- margin: 0;
6806
- }
6807
- input:focus,
6808
- input:hover,
6809
- select:focus,
6810
- select:hover,
6811
- textarea:focus,
6812
- textarea:hover {
6813
- border-color: black;
6814
- }
6815
- kol-input > label {
6816
- order: 1;
6817
- margin-bottom: 0.25em;
6818
- }
6819
- kol-input > label > span {
6820
- color: black;
6821
- font-size: 0.875rem;
6822
- line-height: 1.5rem;
6823
- }
6824
- kol-input > div.input {
6825
- background-color: white;
6826
- display: block;
6827
- order: 2;
6828
- }
6829
- kol-input > kol-alert.error {
6830
- margin-top: 0.25em;
6831
- order: 3;
6832
- }
6833
- input,
6834
- select,
6835
- textarea {
6836
- font-family: var(--font-family);
6837
- background-color: transparent;
6838
- box-sizing: border-box;
6839
- font-size: 1rem;
6840
- display: inline-flex;
6841
- line-height: 1.5em;
6842
- color: black;
6843
- border-color: var(--color-grau-dunkel);
6844
- border-width: 1px;
6845
- border-style: solid;
6846
- padding: 0.5em 0.75em;
6847
- overflow: hidden;
6848
- width: 100%;
6849
- }
6850
- input:not([type='range']),
6851
- select:not([multiple]) {
6852
- height: 2.75em;
6853
- }
6854
- textarea {
6855
- display: inherit;
6856
- }
6857
- input::placeholder {
6858
- color: var(--color-grau-dunkel);
6859
- }
6860
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
6861
- cursor: not-allowed;
6862
- }
6863
- .required label > span::after {
6864
- content: '*';
6865
- padding-left: 0.125em;
6866
- }
6867
- .icons {
6868
- display: flex;
6869
- justify-content: space-between;
6870
- height: 0;
6871
- }
6872
- .icons > * {
6873
- margin: 0.75em;
6874
- }
6875
- .icon-left input,
6876
- .icon-left select {
6877
- padding-left: 2em;
6878
- }
6879
- .icon-right input,
6880
- .icon-right select {
6881
- padding-right: 2em;
6882
- }
6883
- kol-button-wc {
6884
- position: relative;
6885
- float: right;
6886
- z-index: 1000;
6887
- margin-top: -33px;
6888
- }
6889
- kol-button-wc button {
6890
- border: 1px solid var(--color-grau-dunkel);
6891
- box-sizing: border-box;
6892
- background-color: transparent;
6893
- cursor: pointer;
6894
- }
6895
- .icon-right kol-button-wc {
6896
- margin-right: 2.5em;
6897
- }
6898
- .disabled {
6899
- opacity: 0.33;
6900
- }
6901
- select[multiple],
6902
- textarea {
6903
- overflow: auto;
6904
- }
6905
- textarea {
6906
- display: block;
6907
- }
6908
- select option {
6909
- margin: 1px 0;
6910
- padding: 0.5em;
6911
- cursor: pointer;
6912
- }
6913
- select option:disabled {
6914
- cursor: not-allowed;
6915
- }
6916
- option:active:not(:disabled),
6917
- option:checked:not(:disabled),
6918
- option:focus:not(:disabled),
6919
- option:hover:not(:disabled) {
6920
- color: white;
6921
- }
6922
- `,
6923
- "KOL-TEXTAREA": css$5`
6924
- kol-input {
6925
- gap: 0.4em;
6926
- }
6927
- kol-input .error {
6928
- order: 3;
6929
- }
6930
- kol-input label {
6931
- font-weight: 700;
6932
- order: 1;
6933
- }
6934
- kol-input .input {
6935
- order: 2;
6936
- }
6937
- kol-input .hint {
6938
- order: 4;
6939
- font-size: 0.875em;
6940
- font-style: italic;
6941
- }
6942
- input,
6943
- select,
6944
- textarea {
6945
- border: none;
6946
- }
6947
- .input {
6948
- color: var(--colorText);
6949
- border: var(--formBorder);
6950
- font-size: var(--textFontSize);
6951
- line-height: 1.5;
6952
- padding: 0 0.5em;
6953
- width: 100%;
6954
- }
6955
- .input > kol-icon {
6956
- width: 1.5em;
6957
- }
6958
- .input > input:first-child {
6959
- padding-left: 0.375em;
6960
- }
6961
- .input > input:last-child {
6962
- padding-right: 0.375em;
6963
- }
6964
- .input:hover {
6965
- border-color: var(--color-gruen-hell);
6966
- }
6967
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
6968
- cursor: not-allowed;
6969
- }
6970
- .required label > span::after {
6971
- content: '*';
6972
- padding-left: 0.125em;
6973
- }
6974
- kol-input.error {
6975
- border-left: 3px solid var(--color-rot);
6976
- padding-left: 1em;
6977
- }
6978
- kol-input.error .input:focus-within {
6979
- outline-color: var(--color-rot) !important;
6980
- }
6981
- kol-input.error kol-alert.error {
6982
- color: var(--color-rot);
6983
- font-weight: 700;
6984
- }
6985
- .disabled {
6986
- opacity: 0.33;
6987
- }
6988
- label {
6989
- color: var(--color-text);
6990
- line-height: 1.5;
6991
- }
6992
- .input {
6993
- }
6994
- .required label > span::after {
6995
- content: '*';
6996
- padding-left: 0.125em;
6997
- }
6998
- `,
6999
- "KOL-ALERT": css$5`
7000
- :host > div {
7001
- background-color: white;
7002
- border-width: 2px;
7003
- border-style: solid;
7004
- border-radius: 0.25rem;
7005
- display: flex;
7006
- overflow: unset;
7007
- }
7008
- :host > div.default {
7009
- border-color: var(--color-grau-dunkel);
7010
- }
7011
- :host > div.default > .icon {
7012
- background-color: var(--color-grau-dunkel);
7013
- }
7014
- :host > div.error {
7015
- border-color: var(--color-rot);
7016
- }
7017
- :host > div.error > .icon {
7018
- background-color: var(--color-rot);
7019
- }
7020
- :host > div.info {
7021
- border-color: var(--color-blau);
7022
- }
7023
- :host > div.info > .icon {
7024
- background-color: var(--color-blau);
7025
- }
7026
- :host > div.success {
7027
- border-color: var(--color-gruen);
7028
- }
7029
- :host > div.success > .icon {
7030
- background-color: var(--color-gruen);
7031
- }
7032
- :host > div.warning {
7033
- border-color: var(--color-gelb);
7034
- }
7035
- :host > div.warning > .icon {
7036
- background-color: var(--color-gelb);
7037
- }
7038
- :host > div.msg > .icon {
7039
- color: white;
7040
- padding: 0.5em;
7041
- align-items: center;
7042
- display: inline-flex;
7043
- }
7044
- :host > div.msg.warning > .icon {
7045
- color: black;
7046
- }
7047
- :host > div.card.default .heading .icon {
7048
- background-color: var(--color-grau-dunkel);
7049
- }
7050
- :host > div.card.error .heading .icon {
7051
- background-color: var(--color-rot);
7052
- }
7053
- :host > div.card.info .heading .icon {
7054
- background-color: var(--color-blau);
7055
- }
7056
- :host > div.card.success .heading .icon {
7057
- background-color: var(--color-gruen);
7058
- }
7059
- :host > div.card.warning .heading .icon {
7060
- background-color: var(--color-gelb);
7061
- }
7062
- :host > div.card .heading .icon {
7063
- color: white;
7064
- padding: 0.5em;
7065
- align-items: center;
7066
- display: inline-flex;
7067
- }
7068
- :host > div.card.warning .heading .icon {
7069
- color: black;
7070
- }
7071
- :host > div kol-heading-wc .icon {
7072
- margin-right: 0.5em;
7073
- }
7074
- :host > div.card .heading .icon {
7075
- border-radius: 0 0 0.25rem 0;
7076
- }
7077
- :host > div.msg > div {
7078
- padding: 0.25em;
7079
- }
7080
- :host > div.msg > div > .heading {
7081
- padding: 0.25em;
7082
- display: inline-block;
7083
- }
7084
- :host > div .content {
7085
- padding: 0.25em;
7086
- }
7087
- :host > div > div {
7088
- display: grid;
7089
- grid-template-columns: 1fr auto;
7090
- }
7091
- :host > div > div > .content {
7092
- grid-row: 2;
7093
- grid-column: 1;
7094
- }
7095
- :host > div > div > .close {
7096
- grid-row: 1 / span 2;
7097
- display: flex;
7098
- }
7099
- :host > div.msg > div > .close > * {
7100
- margin: auto;
7101
- }
7102
- :host > div.msg.default .close .icon {
7103
- color: var(--color-grau-dunkel);
7104
- }
7105
- :host > div.msg.error .close .icon {
7106
- color: var(--color-rot);
7107
- }
7108
- :host > div.msg.info .close .icon {
7109
- color: var(--color-blau);
7110
- }
7111
- :host > div.msg.success .close .icon {
7112
- color: var(--color-gruen);
7113
- }
7114
- :host > div.msg.warning .close .icon {
7115
- color: var(--color-gelb);
7116
- }
7117
- :host > div.card > div > .heading {
7118
- width: 100%;
7119
- }
7120
- .close > button {
7121
- min-width: 44px;
7122
- min-height: 44px;
7123
- display: grid;
7124
- gap: 0.25em;
7125
- line-height: 1.5rem;
7126
- font-family: var(--font-family);
7127
- font-weight: 700;
7128
- cursor: pointer;
7129
- border-radius: 1.5em;
7130
- border-style: solid;
7131
- border-width: 2px;
7132
- font-size: 1rem;
7133
- align-items: center;
7134
- padding: 8px 14px;
7135
- justify-content: center;
7136
- font-style: normal;
7137
- text-align: center;
7138
- text-transform: uppercase;
7139
- width: inherit;
7140
- transition-duration: 0.5s;
7141
- transition-property: background-color, color, border-color;
7142
- background-color: rgba(0, 0, 0, 0);
7143
- border-color: rgba(0, 0, 0, 0);
7144
- }
7145
- .close > button.icon-only {
7146
- padding: 8px;
7147
- }
7148
- .close > button.icon-only kol-icon {
7149
- display: inline-block;
7150
- width: 1.5em;
7151
- height: 1.5em;
7152
- }
7153
- .close > button:active {
7154
- box-shadow: none;
7155
- outline: none;
7156
- }
7157
- .close kol-icon::part(icon)::before {
7158
- content: '\\f00d';
7159
- }
7160
- `,
7161
- "KOL-HEADING": css$5`
7162
- .headline {
7163
- margin-top: 0;
7164
- }
7165
- `,
7166
- "KOL-BADGE": css$5`
7167
- :host {
7168
- display: inline-block;
7169
- }
7170
- kol-span-wc {
7171
- align-items: center;
7172
- border-radius: 0.3125rem;
7173
- display: grid;
7174
- gap: 0.5rem;
7175
- line-height: 1.25rem;
7176
- padding: 0.25rem 0.75rem;
7177
- }
7178
- kol-span-wc span {
7179
- display: flex;
7180
- gap: 0.25rem;
7181
- }
7182
- `,
7183
- "KOL-BUTTON-GROUP": css$5`
7184
- div {
7185
- display: flex;
7186
- flex-wrap: wrap;
7187
- gap: 0.5em;
7188
- }
7189
- `,
7190
- "KOL-INDENTED-TEXT": css$5`
7191
- :host > div {
7192
- width: 100%;
7193
- padding: 15px;
7194
- background: var(--color-grau-weiss);
7195
- box-shadow: -4px 0px 0px var(--color-gruen);
7196
- }
7197
- `,
7198
- "KOL-LINK": css$5`
7199
- :is(a, button) {
7200
- /* color: var(--color-midnight); */
7201
- color: var(--external-link-color, var(--color-gruen));
7202
- font-style: normal;
7203
- font-weight: 400;
7204
- padding: var(--external-link-padding, 0);
7205
- text-decoration-line: none;
7206
- }
7207
- :is(a, button):focus {
7208
- /* outline: var(--color-focus) solid 2px; */
7209
- outline: none;
7210
- }
7211
- :is(a, button):hover {
7212
- /* text-decoration-thickness: 0.25em; */
7213
- box-shadow: inset 0 -1px 0 0 var(--external-link-color, var(--color-gruen));
7214
- }
7215
- .hidden {
7216
- display: none;
7217
- visibility: hidden;
7218
- } /*************************/ /* kol-link-wc {display: inline-block;} */ /* kol-icon {padding: 0 0.25rem;} */
7219
- .hidden {
7220
- display: none;
7221
- visibility: hidden;
7222
- }
7223
- .skip {
7224
- left: -99999px;
7225
- overflow: hidden;
7226
- position: absolute;
7227
- z-index: 9999999;
7228
- line-height: 1em;
7229
- }
7230
- .skip:focus {
7231
- background: white;
7232
- left: unset;
7233
- position: unset;
7234
- }
7235
- .icon-only {
7236
- padding-bottom: 0.2rem;
7237
- }
7238
- :is(a) kol-span-wc > span {
7239
- gap: var(--gapSmallest);
7240
- }
7241
- `,
7242
- "KOL-DETAILS": css$5`
7243
- details {
7244
- display: grid;
7245
- width: 100%;
7246
- }
7247
- summary {
7248
- margin: 0;
7249
- padding: 0;
7250
- }
7251
- summary span {
7252
- margin-left: 0.25rem;
7253
- text-decoration: underline;
7254
- }
7255
- summary span:hover {
7256
- text-decoration-thickness: 0.25em;
7257
- }
7258
- details > kol-indented-text {
7259
- margin: 0.25em 0 0 0.6em;
7260
- }
7261
- `,
7262
- "KOL-SPIN": css$5`
7263
- .cycle {
7264
- padding: 0.125rem;
7265
- & span {
7266
- background-color: #fc0;
7267
- }
7268
- }
7269
- `,
7270
- "KOL-PROGRESS": css$5`
7271
- :host progress,
7272
- :host span {
7273
- display: block;
7274
- height: 0px;
7275
- overflow: hidden;
7276
- width: 0px;
7277
- }
7278
- svg line:first-child,
7279
- svg circle:first-child {
7280
- fill: transparent;
7281
- stroke: var(--color-ice);
7282
- }
7283
- svg line:last-child,
7284
- svg circle:last-child {
7285
- stroke: var(--color-midnight);
7286
- fill: transparent;
7287
- }
7288
- progress {
7289
- display: none;
7290
- }
7291
- `,
7292
- "KOL-SELECT": css$5`
7293
- :host {
7294
- --color: var(--colorText); /* --color: blue; */
7295
- }
7296
- kol-input {
7297
- color: var(--color);
7298
- font-size: var(--textFontSize);
7299
- gap: var(--gapSmallest);
7300
- }
7301
- label {
7302
- font-weight: 700;
7303
- order: 1;
7304
- }
7305
- .input {
7306
- order: 2;
7307
- }
7308
- kol-alert.error {
7309
- color: var(--colorSignalError);
7310
- order: 3;
7311
- }
7312
- select {
7313
- background-color: var(--colorLight);
7314
- line-height: 1.5;
7315
- color: var(--color);
7316
- border: var(--formBorder);
7317
- padding: 0.5em 0.75em;
7318
- }
7319
- select:hover,
7320
- select:focus {
7321
- border-color: var(--colorPrimaryActive);
7322
- }
7323
- select:disabled {
7324
- cursor: not-allowed;
7325
- }
7326
- select[multiple] {
7327
- overflow: auto;
7328
- }
7329
- select option {
7330
- margin: 1px 0;
7331
- cursor: pointer;
7332
- }
7333
- select option:disabled {
7334
- cursor: not-allowed;
7335
- }
7336
- select:not([multiple]) option {
7337
- padding: 0.5em;
7338
- }
7339
- .required label > span::after {
7340
- content: '*';
7341
- padding-left: 0.125em;
7342
- } /* kol-input.error select:invalid { */
7343
- kol-input.error select {
7344
- border-color: var(--colorSignalError);
7345
- } /* option:active:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {color: white;} */
7346
- `,
7347
- "KOL-INPUT-COLOR": css$5`
7348
- kol-input {
7349
- display: grid;
7350
- padding: 0;
7351
- margin: 0;
7352
- }
7353
- input:focus,
7354
- input:hover,
7355
- select:focus,
7356
- select:hover,
7357
- textarea:focus,
7358
- textarea:hover {
7359
- border-color: black;
7360
- }
7361
- kol-input > label {
7362
- order: 1;
7363
- margin-bottom: 0.25em;
7364
- }
7365
- kol-input > label > span {
7366
- color: black;
7367
- font-size: 0.875rem;
7368
- line-height: 1.5rem;
7369
- }
7370
- kol-input > div.input {
7371
- background-color: white;
7372
- display: block;
7373
- order: 2;
7374
- }
7375
- kol-input > kol-alert.error {
7376
- margin-top: 0.25em;
7377
- order: 3;
7378
- }
7379
- input,
7380
- select,
7381
- textarea {
7382
- font-family: var(--font-family);
7383
- background-color: transparent;
7384
- box-sizing: border-box;
7385
- font-size: 1rem;
7386
- display: inline-flex;
7387
- line-height: 1.5em;
7388
- color: black;
7389
- border-color: var(--color-grau-dunkel);
7390
- border-width: 1px;
7391
- border-style: solid;
7392
- padding: 0.5em 0.75em;
7393
- overflow: hidden;
7394
- width: 100%;
7395
- }
7396
- input:not([type='range']),
7397
- select:not([multiple]) {
7398
- height: 2.75em;
7399
- }
7400
- textarea {
7401
- display: inherit;
7402
- }
7403
- input::placeholder {
7404
- color: var(--color-grau-dunkel);
7405
- }
7406
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
7407
- cursor: not-allowed;
7408
- }
7409
- .required label > span::after {
7410
- content: '*';
7411
- padding-left: 0.125em;
7412
- }
7413
- .icons {
7414
- display: flex;
7415
- justify-content: space-between;
7416
- height: 0;
7417
- }
7418
- .icons > * {
7419
- margin: 0.75em;
7420
- }
7421
- .icon-left input,
7422
- .icon-left select {
7423
- padding-left: 2em;
7424
- }
7425
- .icon-right input,
7426
- .icon-right select {
7427
- padding-right: 2em;
7428
- }
7429
- kol-button-wc {
7430
- position: relative;
7431
- float: right;
7432
- z-index: 1000;
7433
- margin-top: -33px;
7434
- }
7435
- kol-button-wc button {
7436
- border: 1px solid var(--color-grau-dunkel);
7437
- box-sizing: border-box;
7438
- background-color: transparent;
7439
- cursor: pointer;
7440
- }
7441
- .icon-right kol-button-wc {
7442
- margin-right: 2.5em;
7443
- }
7444
- .disabled {
7445
- opacity: 0.33;
7446
- }
7447
- select[multiple],
7448
- textarea {
7449
- overflow: auto;
7450
- }
7451
- textarea {
7452
- display: block;
7453
- }
7454
- select option {
7455
- margin: 1px 0;
7456
- padding: 0.5em;
7457
- cursor: pointer;
7458
- }
7459
- select option:disabled {
7460
- cursor: not-allowed;
7461
- }
7462
- option:active:not(:disabled),
7463
- option:checked:not(:disabled),
7464
- option:focus:not(:disabled),
7465
- option:hover:not(:disabled) {
7466
- color: white;
7467
- }
7468
- `,
7469
- "KOL-ACCORDION": css$5`
7470
- :host > div {
7471
- font-family: var(--font-family);
7472
- padding: 0 0.5rem 0 0;
7473
- }
7474
- :host > div > kol-heading-wc {
7475
- font-weight: 700;
7476
- font-size: 1.25rem;
7477
- line-height: 1.75rem;
7478
- }
7479
- :host > div > kol-heading-wc button {
7480
- cursor: pointer;
7481
- width: 100%;
7482
- margin: 0;
7483
- display: flex;
7484
- gap: 0.5em;
7485
- border: 0;
7486
- align-items: center;
7487
- overflow: hidden;
7488
- font-size: inherit;
7489
- line-height: 1.5em;
7490
- background-color: transparent;
7491
- padding: 0.5em;
7492
- padding-left: 0;
7493
- }
7494
- :host > div[part*='open'] > kol-heading-wc button {
7495
- padding: 0.5em;
7496
- padding-left: 0;
7497
- }
7498
- :host > div > kol-heading-wc button kol-icon::part(icon) {
7499
- font-family: 'Font Awesome 6 Free';
7500
- font-weight: 900;
7501
- color: var(--color-midnight);
7502
- }
7503
- .accordion > kol-heading-wc button kol-icon::part(icon)::before {
7504
- content: '\\2b';
7505
- }
7506
- .accordion.open > kol-heading-wc button kol-icon::part(icon)::before {
7507
- content: '\\f068';
7508
- }
7509
- .accordion {
7510
- width: 100%;
7511
- height: 100%;
7512
- display: grid;
7513
- }
7514
- .accordion[part*='open'] div[part='header'] {
7515
- padding-left: 2em;
7516
- }
7517
- .accordion[part*='open'] div[part='content'] {
7518
- padding-top: 1rem;
7519
- }
7520
- button {
7521
- font-weight: inherit;
7522
- font-size: inherit;
7523
- line-height: inherit;
7524
- }
7525
- .accordion {
7526
- background: var(--color-white);
7527
- }
7528
- .accordion[part*='open'] {
7529
- padding-bottom: 1em;
7530
- } /* .accordion > [part="header"] {height: 0;} */
7531
- h1,
7532
- h2,
7533
- h3,
7534
- h4,
7535
- h5,
7536
- h6 {
7537
- margin: 0;
7538
- }
7539
- `,
7540
- "KOL-TABLE": css$5`
7541
- :host * {
7542
- hyphens: var(--hyphens);
7543
- line-height: var(--textFontLineHeight);
7544
- }
7545
- :host > div:first-child {
7546
- overflow-x: auto;
7547
- overflow-y: hidden;
7548
- }
7549
- table {
7550
- border-collapse: collapse;
7551
- }
7552
- caption {
7553
- height: auto;
7554
- text-align: left;
7555
- } /* visuell verstecken */
7556
- caption {
7557
- clip: rect(1px, 1px, 1px, 1px);
7558
- clip-path: inset(50%);
7559
- height: 1px;
7560
- width: 1px;
7561
- margin: -1px;
7562
- overflow: hidden;
7563
- padding: 0;
7564
- position: absolute;
7565
- }
7566
- table,
7567
- tr,
7568
- th,
7569
- td {
7570
- border: 0 solid var(--color-weiss);
7571
- }
7572
- tr {
7573
- border-top-width: 2px;
7574
- }
7575
- th {
7576
- background-color: var(--color-gruen);
7577
- color: var(--color-weiss);
7578
- font-weight: normal;
7579
- }
7580
- tbody > tr:nth-child(odd) {
7581
- background-color: #f2f2f2;
7582
- }
7583
- tbody > tr:hover {
7584
- background-color: var(--color-gruen-dunkel);
7585
- color: var(--color-weiss);
7586
- }
7587
- th,
7588
- td {
7589
- border-right-width: 2px;
7590
- padding: 0.25em 0.5em;
7591
- }
7592
- th > div {
7593
- display: grid;
7594
- grid-template-columns: 1fr auto;
7595
- align-items: center;
7596
- gap: 0.25em;
7597
- }
7598
- .pagination {
7599
- padding: 0.5em;
7600
- font-size: var(--textFontSize);
7601
- gap: 1rem;
7602
- }
7603
- th kol-button button {
7604
- padding: 0.5rem;
7605
- } /* default: [aria-sort="none"] */
7606
- [data-sort] kol-button::part(icon)::before {
7607
- font-family: 'Font Awesome 6 Free';
7608
- font-weight: 900;
7609
- content: '\\f0dc';
7610
- }
7611
- [data-sort='sort-ASC'] kol-button::part(icon)::before {
7612
- content: '\\f0de';
7613
- }
7614
- [data-sort='sort-DESC'] kol-button::part(icon)::before {
7615
- content: '\\f0dd';
7616
- }
7617
- `,
7618
- "KOL-NAV": css$5`
7619
- ul {
7620
- list-style: none;
7621
- }
7622
- a {
7623
- color: var(--colorText);
7624
- display: block;
7625
- padding: 0.3rem 0.5rem;
7626
- text-decoration: none;
7627
- transition-duration: 0.5s;
7628
- transition-property: background-color, color, border-color;
7629
- }
7630
- a:hover {
7631
- background-color: var(--colorPrimarySuccess);
7632
- color: var(--colorLight);
7633
- }
7634
- a:focus,
7635
- button:focus {
7636
- outline: var(--focusOutline);
7637
- outline-offset: 2px;
7638
- transition: outline-offset 0.2s linear;
7639
- }
7640
- .list[data-deep='0'] {
7641
- font-family: var(--textFontSerif);
7642
- }
7643
- .horizontal {
7644
- gap: var(--gap);
7645
- }
7646
- `,
7647
- "KOL-CARD": css$5`
7648
- :host > div {
7649
- --card-padding: var(--gap);
7650
- border-color: var(--color-gruen);
7651
- border-style: solid;
7652
- border-width: 1px;
7653
- border-radius: 0.25rem;
7654
- box-shadow: 0px 0px 1.875rem 0px rgba(0, 0, 0, 0.3);
7655
- display: grid;
7656
- width: 100%;
7657
- height: 100%;
7658
- background-color: white;
7659
- grid-template-rows: min-content 2fr min-content;
7660
- padding-bottom: var(--gapLarge);
7661
- }
7662
- :host kol-heading-wc {
7663
- display: inline-flex;
7664
- font-style: normal;
7665
- }
7666
- :host kol-heading-wc h1,
7667
- :host kol-heading-wc h2 {
7668
- font-family: var(--textFontSerif);
7669
- font-weight: var(--textFontWeight);
7670
- margin: 0;
7671
- }
7672
- :host kol-heading-wc h1 {
7673
- font-size: var(--headline1FontSize);
7674
- line-height: var(--headline1LineHeight);
7675
- }
7676
- :host kol-heading-wc h2 {
7677
- font-size: var(--headline2FontSize);
7678
- line-height: var(--headline2LineHeight);
7679
- }
7680
- :host kol-heading-wc h3 {
7681
- font-size: var(--headline3FontSize);
7682
- line-height: var(--headline3LineHeight);
7683
- }
7684
- :host kol-heading-wc h4 {
7685
- font-size: var(--headline4FontSize);
7686
- line-height: var(--headline4LineHeight);
7687
- }
7688
- :host div.header {
7689
- border-bottom: 1px solid var(--color-gruen);
7690
- padding: var(--card-padding);
7691
- align-items: flex-start;
7692
- display: flex;
7693
- gap: 0 var(--gapSmall);
7694
- justify-content: space-between;
7695
- }
7696
- :host div.content {
7697
- padding: var(--card-padding) var(--card-padding) 0;
7698
- }
7699
- :host div.footer {
7700
- margin-top: 3rem;
7701
- padding: 0 var(--card-padding);
7702
- }
7703
- `,
7704
- "KOL-INPUT-CHECKBOX": css$5`
7705
- :host {
7706
- --border-width: 1px;
7707
- --spacing: 0.25rem;
7708
- }
7709
- label {
7710
- cursor: pointer;
7711
- }
7712
- input {
7713
- color: black;
7714
- border-color: var(--color-grau-dunkel);
7715
- border-width: var(--border-width);
7716
- border-style: solid;
7717
- line-height: 24px;
7718
- font-size: 16px;
7719
- }
7720
- .required label > span::after {
7721
- content: '*';
7722
- padding-left: 0.125em;
7723
- }
7724
- input:hover {
7725
- border-color: var(--color-blau);
7726
- } /* NEU */
7727
- kol-input {
7728
- display: grid;
7729
- align-items: center;
7730
- justify-items: left;
7731
- width: 100%;
7732
- }
7733
- kol-input.checkbox {
7734
- grid-template-columns: calc(6 * var(--spacing)) auto;
7735
- }
7736
- kol-input.switch {
7737
- grid-template-columns: calc(13 * var(--spacing)) auto;
7738
- }
7739
- kol-input > div.input {
7740
- display: inline-flex;
7741
- order: 1;
7742
- }
7743
- kol-input > div.input input {
7744
- margin: 0px;
7745
- }
7746
- kol-input > label {
7747
- order: 2;
7748
- padding-left: calc(2 * var(--spacing));
7749
- }
7750
- kol-input > kol-alert.error {
7751
- order: 3;
7752
- padding-top: 0.25em;
7753
- grid-column: span 2 / auto;
7754
- } /* CHECKBOX */
7755
- input[type='checkbox'] {
7756
- appearance: none;
7757
- background-color: white;
7758
- cursor: pointer;
7759
- transition: 0.5s;
7760
- }
7761
- input[type='checkbox'].kol-disabled:before {
7762
- cursor: not-allowed;
7763
- }
7764
- input[type='checkbox']:before {
7765
- content: '';
7766
- cursor: pointer;
7767
- }
7768
- input[type='checkbox']:checked {
7769
- background-color: var(--color-blau);
7770
- border-color: var(--color-blau);
7771
- }
7772
- .checkbox input[type='checkbox'] {
7773
- height: calc(6 * var(--spacing));
7774
- min-width: calc(6 * var(--spacing));
7775
- width: calc(6 * var(--spacing));
7776
- }
7777
- .checkbox input[type='checkbox']:before {
7778
- background-color: transparent;
7779
- display: block;
7780
- height: calc(6 * var(--spacing));
7781
- position: relative;
7782
- width: calc(6 * var(--spacing));
7783
- }
7784
- .checkbox input[type='checkbox']:checked:before {
7785
- border-right-width: 3px;
7786
- border-bottom-width: 3px;
7787
- left: calc(1.5 * var(--spacing) - var(--border-width));
7788
- top: calc(2.85 * var(--spacing) - var(--border-width));
7789
- transform: rotate(40deg) translate(-50%, -50%);
7790
- background-color: transparent;
7791
- border-width: 0px 3px 3px 0px;
7792
- border-color: white;
7793
- border-style: solid;
7794
- height: calc(3 * var(--spacing));
7795
- width: calc(1.5 * var(--spacing));
7796
- }
7797
- .checkbox input[type='checkbox']:indeterminate:before {
7798
- background-color: var(--color-grau-dunkel);
7799
- height: 0.375rem;
7800
- top: 0.5rem;
7801
- left: 0.2rem;
7802
- width: calc(4 * var(--spacing));
7803
- }
7804
- .switch input[type='checkbox'] {
7805
- min-width: 3.2em;
7806
- width: 3.2em;
7807
- height: 1.7em;
7808
- display: inline-block;
7809
- position: relative;
7810
- }
7811
- .switch input[type='checkbox']:before {
7812
- -webkit-transition: 0.5s;
7813
- -moz-transition: 0.5s;
7814
- -ms-transition: 0.5s;
7815
- transition: 0.5;
7816
- width: 1.2em;
7817
- height: 1.2em;
7818
- left: calc(0.25em - var(--border-width));
7819
- top: calc(0.25em - var(--border-width));
7820
- background-color: black;
7821
- position: absolute;
7822
- }
7823
- .switch input[type='checkbox']:checked:before {
7824
- -webkit-transform: translateX(1.5em);
7825
- -moz-transform: translateX(1.5em);
7826
- -ms-transform: translateX(1.5em);
7827
- transform: translateX(1.5em);
7828
- background-color: white;
7829
- }
7830
- .switch input[type='checkbox']:indeterminate:before {
7831
- -webkit-transform: translateX(0.75em);
7832
- -moz-transform: translateX(0.75em);
7833
- -ms-transform: translateX(0.75em);
7834
- transform: translateX(0.75em);
7835
- background-color: var(--color-blau);
7836
- }
7837
- .disabled {
7838
- opacity: 0.33;
7839
- }
7840
- `,
7841
- "KOL-INPUT-RADIO": css$5`
7842
- :host {
7843
- --border-width: 1px;
7844
- --input-color: var(--color-gruen-dunkel);
7845
- --input-inner-position: calc(var(--spacing) + var(--border-width));
7846
- --input-inner-size: calc(var(--spacing) * 3);
7847
- --input-outer-size: calc(var(--spacing) * 6);
7848
- }
7849
- div[slot='input'] {
7850
- align-items: center;
7851
- display: flex;
7852
- gap: calc(var(--spacing) * 2);
7853
- }
7854
- fieldset {
7855
- border: 0;
7856
- margin: 0;
7857
- padding: 0;
7858
- }
7859
- fieldset.horizontal {
7860
- display: flex;
7861
- flex-wrap: wrap;
7862
- align-items: center;
7863
- gap: 0.5rem 32px;
7864
- }
7865
- input {
7866
- cursor: pointer;
7867
- display: grid;
7868
- align-self: center;
7869
- border: var(--border-width) solid var(--input-color);
7870
- appearance: none;
7871
- border-radius: 100%;
7872
- height: var(--input-outer-size);
7873
- width: var(--input-outer-size);
7874
- margin: 0;
7875
- }
7876
- input:hover {
7877
- --border-width: 2px;
7878
- }
7879
- input:focus:hover {
7880
- box-shadow: none;
7881
- }
7882
- input:disabled {
7883
- --input-color: var(--color-disabled);
7884
- }
7885
- input:disabled:hover {
7886
- --border-width: 1px;
7887
- }
7888
- input:disabled + label {
7889
- color: var(--color-disabled);
7890
- }
7891
- input::before {
7892
- content: '';
7893
- cursor: pointer; /* left: var(--input-inner-position);top: var(--input-inner-position); */
7894
- position: relative;
7895
- border-radius: 100%;
7896
- display: inline-block;
7897
- height: var(--input-inner-size);
7898
- width: var(--input-inner-size);
7899
- }
7900
- input:hover::before {
7901
- --input-inner-position: var(--spacing);
7902
- }
7903
- input:checked::before {
7904
- background-color: var(--input-color);
7905
- }
7906
- kol-input {
7907
- display: grid;
7908
- }
7909
- kol-input {
7910
- margin-bottom: 1rem;
7911
- }
7912
- kol-input.error input {
7913
- border-color: var(--color-rot);
7914
- padding-left: 1em;
7915
- }
7916
- kol-input.error input:focus,
7917
- kol-input.error select:focus,
7918
- kol-input.error textarea:focus {
7919
- outline: var(--color-focus) solid 2px !important;
7920
- }
7921
- kol-input kol-alert.error {
7922
- margin-bottom: 0.4em;
7923
- order: 1;
7924
- }
7925
- kol-input.error kol-alert.error {
7926
- color: var(--color-rot);
7927
- font-weight: 700;
7928
- }
7929
- label {
7930
- color: var(--color-text);
7931
- cursor: pointer;
7932
- display: grid;
7933
- font-size: var(--text-size); /* order: 2; */
7934
- font-weight: 700;
7935
- }
7936
- legend {
7937
- font-size: var(--text-size);
7938
- margin-bottom: var(--text-size);
7939
- }
7940
- .icons {
7941
- display: flex;
7942
- justify-content: space-between;
7943
- height: 0;
7944
- }
7945
- .icons > * {
7946
- margin: 0.75em;
7947
- }
7948
- .icon-left input,
7949
- .icon-left select {
7950
- padding-left: 2em;
7951
- }
7952
- .icon-right input,
7953
- .icon-right select {
7954
- padding-right: 2em;
7955
- }
7956
- .required label > span::after {
7957
- content: '*';
7958
- padding-left: 0.125em;
7959
- }
7960
- `,
7961
- "KOL-TOAST-CONTAINER": css$5`
7962
- :host {
7963
- top: 1rem;
7964
- width: 750px;
7965
- left: 50%;
7966
- transform: translateX(-50%);
7967
- }
7968
- .toast {
7969
- background: #fff;
7970
- margin-top: 1rem;
7971
- }
7972
- `,
7973
- "KOL-TABS": css$5`
7974
- button:disabled {
7975
- opacity: 0.5;
7976
- cursor: not-allowed;
7977
- }
7978
- :host {
7979
- font-family: var(--font-family);
7980
- }
7981
- :host > div {
7982
- display: block;
7983
- width: 100%;
7984
- }
7985
- :host kol-button-group-wc {
7986
- display: inline-block;
7987
- border-radius: 0.25rem 0.25rem 0 0;
7988
- background-color: var(--kolibri-color-normal);
7989
- }
7990
- :host kol-button-group-wc > div {
7991
- display: inline-flex;
7992
- }
7993
- :host kol-button-group-wc > div + div {
7994
- margin-left: 0.25em;
7995
- }
7996
- :host > div > div {
7997
- padding: 0.25em;
7998
- border: 1px solid var(--kolibri-border-color);
7999
- border-radius: 0 0 0.25rem 0.25rem;
8000
- }
8001
- button {
8002
- box-sizing: border-box;
8003
- font-size: inherit;
8004
- line-height: 1.25em;
8005
- cursor: pointer;
8006
- border-width: 2px;
8007
- box-shadow: 0 0 0.25em gray;
8008
- font-family: var(--kolibri-font-family);
8009
- width: inherit;
8010
- border-radius: var(--kolibri-border-radius);
8011
- border-style: solid;
8012
- padding: calc(2 * var(--kolibri-spacing));
8013
- display: grid;
8014
- gap: 0.25em;
8015
- align-items: center;
8016
- justify-content: center;
8017
- text-align: center;
8018
- transition-duration: 0.5s;
8019
- transition-property: background-color, color, border-color;
8020
- }
8021
- kol-button-wc[aria-selected='true'] button {
8022
- border-bottom-width: 0.25em !important;
8023
- border-bottom-style: solid;
8024
- border-bottom-color: var(--kolibri-color-accent) !important;
8025
- }
8026
- button > kol-span-wc span {
8027
- display: flex;
8028
- gap: 0.25em;
8029
- align-items: center;
8030
- justify-content: center;
8031
- }
8032
- button:disabled {
8033
- cursor: not-allowed;
8034
- opacity: 0.5;
8035
- }
8036
- button.primary,
8037
- button.primary:disabled:hover {
8038
- background-color: var(--kolibri-color-primary);
8039
- border-color: var(--kolibri-color-primary);
8040
- color: white;
8041
- }
8042
- button.primary:hover,
8043
- button.primary:focus {
8044
- color: var(--kolibri-color-primary);
8045
- }
8046
- button.secondary,
8047
- button.secondary:disabled:hover {
8048
- background-color: var(--kolibri-color-secondary);
8049
- border-color: var(--kolibri-color-secondary);
8050
- color: white;
8051
- }
8052
- button.secondary:hover,
8053
- button.secondary:focus {
8054
- color: var(--kolibri-color-secondary);
8055
- }
8056
- button.normal,
8057
- button.normal:disabled:hover {
8058
- background-color: var(--kolibri-color-normal);
8059
- border-color: var(--kolibri-color-normal);
8060
- color: white;
8061
- }
8062
- button.normal:hover,
8063
- button.normal:focus {
8064
- color: var(--kolibri-color-normal);
8065
- }
8066
- button.danger,
8067
- button.danger:disabled:hover {
8068
- background-color: var(--kolibri-color-danger);
8069
- border-color: var(--kolibri-color-danger);
8070
- color: white;
8071
- }
8072
- button.danger:hover,
8073
- button.danger:focus {
8074
- color: var(--kolibri-color-danger);
8075
- }
8076
- button.ghost,
8077
- button.ghost:disabled:hover {
8078
- background-color: white;
8079
- border-color: var(--kolibri-color-ghost);
8080
- color: var(--kolibri-color-ghost);
8081
- }
8082
- button.ghost:hover,
8083
- button.ghost:focus {
8084
- background-color: var(--kolibri-color-ghost);
8085
- color: white;
8086
- }
8087
- button:hover,
8088
- button:focus {
8089
- background-color: white;
8090
- box-shadow: 0 0 0.25em black;
8091
- }
8092
- button:active {
8093
- outline: 0 !important;
8094
- box-shadow: none !important;
8095
- }
8096
- .close-button {
8097
- font-size: 25%;
8098
- height: fit-content;
8099
- width: 0;
8100
- }
8101
- .close-button button {
8102
- width: 1rem;
8103
- position: relative;
8104
- height: 1rem;
8105
- left: -4.25em;
8106
- top: 0.25em;
8107
- }
8108
- :host > div {
8109
- display: grid;
8110
- }
8111
- :host > div.tabs-align-left {
8112
- grid-template-columns: auto 1fr;
8113
- }
8114
- :host > div.tabs-align-right {
8115
- grid-template-columns: 1fr auto;
8116
- }
8117
- :host > .tabs-align-left kol-button-group-wc,
8118
- :host > .tabs-align-top kol-button-group-wc {
8119
- order: 0;
8120
- }
8121
- :host > .tabs-align-bottom kol-button-group-wc,
8122
- :host > .tabs-align-right kol-button-group-wc {
8123
- order: 1;
8124
- }
8125
- :host > div.tabs-align-left kol-button-group-wc > div,
8126
- :host > div.tabs-align-left kol-button-group-wc > div > div,
8127
- :host > div.tabs-align-right kol-button-group-wc > div,
8128
- :host > div.tabs-align-right kol-button-group-wc > div > div {
8129
- display: grid;
8130
- }
8131
- :host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,
8132
- :host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {
8133
- width: 100%;
8134
- }
8135
- :host > div.tabs-align-bottom kol-button-group-wc div,
8136
- :host > div.tabs-align-top kol-button-group-wc div {
8137
- display: flex;
8138
- flex-wrap: wrap;
8139
- }
8140
- :host > div.tabs-align-bottom > kol-button-group-wc {
8141
- border-radius: 0 0 0.25rem 0.25rem;
8142
- }
8143
- :host > div.tabs-align-bottom > div {
8144
- border-radius: 0.25rem 0.25rem 0 0;
8145
- }
8146
- :host > div.tabs-align-top > kol-button-group-wc {
8147
- border-radius: 0.25rem 0.25rem 0 0;
8148
- }
8149
- :host > div.tabs-align-top > div {
8150
- border-radius: 0 0 0.25rem 0.25rem;
8151
- }
8152
- :host > div.tabs-align-left > kol-button-group-wc {
8153
- border-radius: 0.25rem 0 0 0.25rem;
8154
- }
8155
- :host > div.tabs-align-left > div {
8156
- border-radius: 0 0.25rem 0.25rem 0;
8157
- }
8158
- :host > div.tabs-align-right > kol-button-group-wc {
8159
- border-radius: 0 0.25rem 0.25rem 0;
8160
- }
8161
- :host > div.tabs-align-right > div {
8162
- border-radius: 0.25rem 0 0 0.25rem;
8163
- }
8164
- `,
8165
- "KOL-PAGINATION": css$5`
8166
- .navigation-list > li {
8167
- min-width: var(--a11y-min-size);
8168
- text-align: center;
8169
- }
8170
- .icon::part(icon) {
8171
- font-family: 'Font Awesome 6 Free';
8172
- font-weight: 900;
8173
- }
8174
- .first .icon::part(icon)::before {
8175
- content: '\\f100';
8176
- }
8177
- .previous .icon::part(icon)::before {
8178
- content: '\\f104';
8179
- }
8180
- .next .icon::part(icon)::before {
8181
- content: '\\f105';
8182
- }
8183
- .last .icon::part(icon)::before {
8184
- content: '\\f101';
8185
- }
8186
- .button {
8187
- --background-color: var(--color-gruen-dunkel);
8188
- --border-color: var(--color-gruen-dunkel);
8189
- --border-size: 1px;
8190
- --min-size: 2.75rem;
8191
- align-items: center;
8192
- background-color: var(--color-weiss);
8193
- border: var(--border-size) solid var(--color-gruen-hell);
8194
- color: var(--color-grau-dunkel);
8195
- cursor: pointer;
8196
- display: grid;
8197
- font-family: var(--font-family);
8198
- font-size: var(--text-size);
8199
- font-style: normal;
8200
- gap: 0.25em;
8201
- justify-content: center;
8202
- line-height: 1.5;
8203
- min-height: var(--min-size);
8204
- min-width: var(--min-size);
8205
- padding: 0.5rem 0.875rem;
8206
- text-align: center;
8207
- text-transform: uppercase;
8208
- transition-duration: 0.5s;
8209
- transition-property: background-color, color, border-color;
8210
- &:hover:enabled {
8211
- text-decoration: underline;
8212
- }
8213
- &:focus {
8214
- outline: var(--color-focus) solid 2px;
8215
- }
8216
- &:disabled,
8217
- &:disabled:hover {
8218
- opacity: 0.5;
8219
- background-color: var(--color-weiss);
8220
- border-color: var(--color-grau-hell);
8221
- color: var(--color-disabled);
8222
- cursor: not-allowed;
8223
- }
8224
- & .icon {
8225
- display: inline-block;
8226
- width: 1.5em;
8227
- height: 1.5em;
8228
- }
8229
- }
8230
- .selected button {
8231
- border-radius: 1.5em;
8232
- border: none;
8233
- color: var(--color-midnight) !important;
8234
- font-weight: 700;
8235
- line-height: normal;
8236
- }
8237
- `,
8238
- "KOL-INPUT-RANGE": css$5`
8239
- /* https://www.cssportal.com/style-input-range/ */
8240
- kol-input {
8241
- display: grid;
8242
- }
8243
- kol-input label {
8244
- display: grid;
8245
- order: 2;
8246
- margin-bottom: 0.4em;
8247
- }
8248
- kol-input div.input {
8249
- box-sizing: border-box;
8250
- order: 3;
8251
- background-color: white;
8252
- border-radius: 0.3125rem;
8253
- }
8254
- kol-input kol-alert.error {
8255
- margin-bottom: 0.4em;
8256
- order: 1;
8257
- }
8258
- input,
8259
- select,
8260
- textarea {
8261
- font-family: var(--font-family);
8262
- background-color: transparent;
8263
- box-sizing: border-box;
8264
- font-size: 1rem;
8265
- display: inline-flex;
8266
- line-height: 1.5em;
8267
- border-color: var(--color-grey);
8268
- border-width: 2px;
8269
- border-style: solid;
8270
- padding: 0.625em 0.875em;
8271
- border-radius: 0.3125rem;
8272
- overflow: hidden;
8273
- width: calc(100% - 4em);
8274
- }
8275
- input,
8276
- select:not([multiple]) {
8277
- height: 2.75em;
8278
- }
8279
- input::placeholder {
8280
- color: var(--color-grey);
8281
- }
8282
- input:hover {
8283
- border-color: var(--color-midnight);
8284
- }
8285
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
8286
- cursor: not-allowed;
8287
- border-color: var(--border-default);
8288
- }
8289
- .required #label::after {
8290
- content: '*';
8291
- padding-left: 0.125em;
8292
- }
8293
- .icons {
8294
- display: flex;
8295
- justify-content: space-between;
8296
- height: 0;
8297
- }
8298
- .icons > * {
8299
- margin: 0.725em 0.875em;
8300
- box-sizing: border-box;
8301
- border-color: transparent;
8302
- border-width: 2px;
8303
- border-style: solid;
8304
- }
8305
- .icon-left input,
8306
- .icon-left select {
8307
- padding-left: calc(0.875em + 1em + 0.5em);
8308
- }
8309
- .icon-right input,
8310
- .icon-right select {
8311
- padding-right: calc(0.875em + 1em + 0.5em);
8312
- }
8313
- kol-input.error {
8314
- border-left: 3px solid var(--color-red);
8315
- padding-left: 1em;
8316
- }
8317
- kol-input.error input:focus,
8318
- kol-input.error select:focus,
8319
- kol-input.error textarea:focus {
8320
- outline-color: var(--color-red) !important;
8321
- }
8322
- kol-input.error kol-alert.error {
8323
- color: var(--color-red);
8324
- font-weight: 700;
8325
- }
8326
- kol-button-wc {
8327
- position: relative;
8328
- float: right;
8329
- z-index: 1000;
8330
- margin-top: -33px;
8331
- }
8332
- kol-button-wc button {
8333
- border: 1px solid var(--color-grey);
8334
- border-radius: 0.25rem;
8335
- box-sizing: border-box;
8336
- background-color: transparent;
8337
- cursor: pointer;
8338
- }
8339
- .icon-right kol-button-wc {
8340
- margin-right: 2.5em;
8341
- }
8342
- .disabled {
8343
- opacity: 0.33;
8344
- }
8345
- .icon-left input,
8346
- .icon-left select {
8347
- margin-left: 2em;
8348
- }
8349
- .icon-right input,
8350
- .icon-right select {
8351
- margin-right: 2em;
8352
- }
8353
- input[type='range'] {
8354
- appearance: none;
8355
- -webkit-appearance: none;
8356
- -moz-appearance: none;
8357
- }
8358
- input[type='range'] {
8359
- overflow: visible;
8360
- background-color: var(--color-ice);
8361
- border: 0;
8362
- height: 0.5rem;
8363
- padding: 0;
8364
- padding-bottom: 0;
8365
- margin-bottom: 0;
8366
- }
8367
- input[type='range']::-webkit-slider-thumb {
8368
- box-sizing: border-box;
8369
- background-color: var(--color-midnight);
8370
- height: 20px;
8371
- width: 20px;
8372
- border-radius: 20px;
8373
- cursor: pointer;
8374
- -webkit-appearance: none;
8375
- }
8376
- `,
8377
- "KOL-LINK-BUTTON": css$5`
8378
- :host {
8379
- --background-color: var(--color-gruen-dunkel);
8380
- --border-color: var(--color-gruen-dunkel);
8381
- --border-size: 1px;
8382
- --min-size: 2.75rem;
8383
- display: inline-block;
8384
- }
8385
- :is(button, a) {
8386
- outline: none;
8387
- &::before {
8388
- /* Render zero-width character as first element to set the baseline correctly. */
8389
- content: '\\200B';
8390
- }
8391
- }
8392
- :is(button, a) > kol-span-wc {
8393
- border-width: var(--border-size);
8394
- border-style: solid;
8395
- min-width: var(--min-size);
8396
- min-height: var(--min-size);
8397
- display: grid;
8398
- gap: 0.25em;
8399
- line-height: 1.5;
8400
- font-family: var(--font-family);
8401
- cursor: pointer;
8402
- font-size: var(--text-size);
8403
- align-items: center;
8404
- padding: 0.5rem 0.875rem !important;
8405
- justify-content: center;
8406
- font-style: normal;
8407
- text-align: center;
8408
- text-transform: uppercase;
8409
- width: inherit;
8410
- transition-duration: 0.5s;
8411
- transition-property: background-color, color, border-color;
8412
- }
8413
- :is(button, a):hover:enabled > kol-span-wc {
8414
- text-decoration: underline;
8415
- }
8416
- :is(button, a):focus > kol-span-wc {
8417
- outline: var(--color-focus) solid 2px;
8418
- }
8419
- .primary :is(button, a) > kol-span-wc,
8420
- .primary :is(button, a):active > kol-span-wc,
8421
- .primary :is(button, a):hover > kol-span-wc {
8422
- background-color: var(--background-color);
8423
- border-color: var(--border-color);
8424
- color: var(--color-weiss);
8425
- }
8426
- .secondary :is(button, a) > kol-span-wc,
8427
- .danger :is(button, a) > kol-span-wc,
8428
- .normal :is(button, a) > kol-span-wc,
8429
- .ghost :is(button, a) > kol-span-wc {
8430
- background-color: var(--color-weiss);
8431
- border-color: var(--color-gruen-hell);
8432
- color: var(--color-grau-dunkel);
8433
- }
8434
- .ghost :is(button, a) > kol-span-wc {
8435
- background-color: transparent;
8436
- color: inherit;
8437
- border: calc(var(--border-size) * 2) solid transparent;
8438
- }
8439
- .secondary :is(button, a):active > kol-span-wc,
8440
- .secondary :is(button, a):hover > kol-span-wc {
8441
- background-color: var(--background-color);
8442
- border-color: var(--background-color);
8443
- border-width: var(--border-size);
8444
- color: var(--color-weiss);
8445
- }
8446
- :is(button, a):disabled > kol-span-wc,
8447
- :is(button, a):disabled:hover > kol-span-wc {
8448
- background-color: var(--color-weiss);
8449
- border-color: var(--color-grau-hell);
8450
- color: var(--color-disabled);
8451
- cursor: not-allowed;
8452
- }
8453
- `,
8454
- "KOL-BUTTON-LINK": css$5`
8455
- button {
8456
- background-color: transparent;
8457
- border: 0;
8458
- cursor: pointer;
8459
- }
8460
- kol-link-button-wc {
8461
- display: inline-block;
8462
- }
8463
- button {
8464
- color: var(--textFontColorblau);
8465
- font-style: normal;
8466
- font-weight: 400;
8467
- display: inline-flex;
8468
- line-height: 1.5em;
8469
- text-decoration-line: none !important;
8470
- outline: none !important;
8471
- }
8472
- button:focus-within,
8473
- button:hover {
8474
- box-shadow: inset 0 -1px 0 0 currentColor;
8475
- }
8476
- kol-icon {
8477
- padding: 0 0.25em;
8478
- display: inline-block;
8479
- }
8480
- `,
8481
- "KOL-ABBR": css$5`
8482
- abbr {
8483
- text-decoration: none;
8484
- border-bottom: dotted var(--color-metal) 1px;
8485
- }
8486
- `,
8487
- "KOL-BREADCRUMB": css$5`
8488
- nav {
8489
- width: 100%;
8490
- }
8491
- ul {
8492
- margin: 0;
8493
- padding: 0;
8494
- list-style: none;
8495
- display: flex;
8496
- flex-wrap: wrap;
8497
- align-items: center;
8498
- }
8499
- kol-link {
8500
- display: inline;
8501
- }
8502
- :host kol-icon[exportparts*='separator'] {
8503
- padding: 0 0.5rem;
8504
- }
8505
- :host kol-icon::part(icon) {
8506
- font-family: 'Font Awesome 6 Free';
8507
- font-weight: 900;
8508
- font-size: 0.875rem !important;
8509
- }
8510
- :host kol-icon::part(icon)::before {
8511
- color: currentColor;
8512
- font-family: 'Font Awesome 6 Free';
8513
- }
8514
- :host ul > li:not(:first-child) kol-icon::part(icon)::before {
8515
- content: '\\f105';
8516
- }
8517
- :host li > kol-link > kol-link-wc > a {
8518
- color: red !important;
8519
- }
8520
- `,
8521
- "KOL-MODAL": css$5`
8522
- :host .overlay .modal {
8523
- max-height: calc(100% - 32px);
8524
- }
8525
- `,
8526
- "KOL-ICON": css$5`
8527
- :host {
8528
- color: inherit;
8529
- } /*! * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) * Copyright 2022 Fonticons, Inc. */
8530
- .fa {
8531
- font-family: var(--fa-style-family, 'Font Awesome 6 Free');
8532
- font-weight: var(--fa-style, 900);
8533
- }
8534
- .fa,
8535
- .fas,
8536
- .fa-solid,
8537
- .far,
8538
- .fa-regular,
8539
- .fal,
8540
- .fa-light,
8541
- .fat,
8542
- .fa-thin,
8543
- .fad,
8544
- .fa-duotone,
8545
- .fab,
8546
- .fa-brands {
8547
- -moz-osx-font-smoothing: grayscale;
8548
- -webkit-font-smoothing: antialiased;
8549
- display: var(--fa-display, inline-block);
8550
- font-style: normal;
8551
- font-variant: normal;
8552
- line-height: 1;
8553
- text-rendering: auto;
8554
- }
8555
- [class*='fa-'] {
8556
- font-style: 0.8rem;
8557
- } /************************************************************/
8558
- .fa-arrow-right::before {
8559
- content: '\\f061';
8560
- }
8561
- .fa-arrow-right-from-bracket::before {
8562
- content: '\\f08b';
8563
- }
8564
- .fa-clock::before {
8565
- content: '\\f017';
8566
- }
8567
- .fa-home::before {
8568
- content: '\\f015';
8569
- }
8570
- .fa-times-circle::before {
8571
- content: '\\f057';
8572
- }
8573
- .fa-exclamation-triangle::before {
8574
- content: '\\f071';
8575
- } /************************************************************/
8576
- .fa-chevron-left::before {
8577
- content: '\\f053';
8578
- }
8579
- .fa-chevron-right::before {
8580
- content: '\\f054';
8581
- }
8582
- .fa-download::before {
8583
- content: '\\f019';
8584
- }
8585
- fa-exclamation-triangle::before {
8586
- content: '\\f071';
8587
- }
8588
- .fa-file::before {
8589
- content: '\\f15b';
8590
- }
8591
- .fa-house::before {
8592
- content: '\\f015';
8593
- }
8594
- .fa-link::before {
8595
- content: '\\f0c1';
8596
- }
8597
- .fa-plus::before {
8598
- content: '\\2b';
8599
- }
8600
- .fa-search::before {
8601
- content: '\\f002';
8602
- }
8603
- .fa-times-circle::before {
8604
- content: '\\f057';
8605
- }
8606
- .fa-arrow-up-right-from-square::before {
8607
- content: '\\f08e';
8608
- }
8609
- .fa-user::before {
8610
- content: '\\f007';
8611
- }
8612
- .fa-xmark::before {
8613
- content: '\\f00d';
8614
- } /************************************************************/
8615
- :root,
8616
- :host {
8617
- --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free';
8618
- }
8619
- @font-face {
8620
- font-family: 'Font Awesome 6 Free';
8621
- font-style: normal;
8622
- font-weight: 400;
8623
- font-display: block;
8624
- src:
8625
- url('../webfonts/fa-regular-400.woff2') format('woff2'),
8626
- url('../webfonts/fa-regular-400.ttf') format('truetype');
8627
- }
8628
- .far,
8629
- .fa-regular {
8630
- font-family: 'Font Awesome 6 Free';
8631
- font-weight: 400;
8632
- }
8633
- :root,
8634
- :host {
8635
- --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
8636
- }
8637
- @font-face {
8638
- font-family: 'Font Awesome 6 Free';
8639
- font-style: normal;
8640
- font-weight: 900;
8641
- font-display: block;
8642
- src:
8643
- url('../webfonts/fa-solid-900.woff2') format('woff2'),
8644
- url('../webfonts/fa-solid-900.ttf') format('truetype');
8645
- }
8646
- .fas,
8647
- .fa-solid {
8648
- font-family: 'Font Awesome 6 Free';
8649
- font-weight: 900;
8650
- }
8651
- @font-face {
8652
- font-family: 'Font Awesome 5 Brands';
8653
- font-display: block;
8654
- font-weight: 400;
8655
- src:
8656
- url('../webfonts/fa-brands-400.woff2') format('woff2'),
8657
- url('../webfonts/fa-brands-400.ttf') format('truetype');
8658
- }
8659
- @font-face {
8660
- font-family: 'Font Awesome 5 Free';
8661
- font-display: block;
8662
- font-weight: 900;
8663
- src:
8664
- url('../webfonts/fa-solid-900.woff2') format('woff2'),
8665
- url('../webfonts/fa-solid-900.ttf') format('truetype');
8666
- }
8667
- @font-face {
8668
- font-family: 'Font Awesome 5 Free';
8669
- font-display: block;
8670
- font-weight: 400;
8671
- src:
8672
- url('../webfonts/fa-regular-400.woff2') format('woff2'),
8673
- url('../webfonts/fa-regular-400.ttf') format('truetype');
8674
- }
8675
- @font-face {
8676
- font-family: 'FontAwesome';
8677
- font-display: block;
8678
- src:
8679
- url('../webfonts/fa-solid-900.woff2') format('woff2'),
8680
- url('../webfonts/fa-solid-900.ttf') format('truetype');
8681
- }
8682
- @font-face {
8683
- font-family: 'FontAwesome';
8684
- font-display: block;
8685
- src:
8686
- url('../webfonts/fa-brands-400.woff2') format('woff2'),
8687
- url('../webfonts/fa-brands-400.ttf') format('truetype');
8688
- }
8689
- @font-face {
8690
- font-family: 'FontAwesome';
8691
- font-display: block;
8692
- src:
8693
- url('../webfonts/fa-regular-400.woff2') format('woff2'),
8694
- url('../webfonts/fa-regular-400.ttf') format('truetype');
8695
- unicode-range: U+F003, U+F006, U+F014, U+F016-F017, U+F01A-F01B, U+F01D, U+F022, U+F03E, U+F044, U+F046, U+F05C-F05D, U+F06E, U+F070, U+F087-F088, U+F08A,
8696
- U+F094, U+F096-F097, U+F09D, U+F0A0, U+F0A2, U+F0A4-F0A7, U+F0C5, U+F0C7, U+F0E5-F0E6, U+F0EB, U+F0F6-F0F8, U+F10C, U+F114-F115, U+F118-F11A,
8697
- U+F11C-F11D, U+F133, U+F147, U+F14E, U+F150-F152, U+F185-F186, U+F18E, U+F190-F192, U+F196, U+F1C1-F1C9, U+F1D9, U+F1DB, U+F1E3, U+F1EA, U+F1F7, U+F1F9,
8698
- U+F20A, U+F247-F248, U+F24A, U+F24D, U+F255-F25B, U+F25D, U+F271-F274, U+F278, U+F27B, U+F28C, U+F28E, U+F29C, U+F2B5, U+F2B7, U+F2BA, U+F2BC, U+F2BE,
8699
- U+F2C0-F2C1, U+F2C3, U+F2D0, U+F2D2, U+F2D4, U+F2DC;
8700
- }
8701
- @font-face {
8702
- font-family: 'FontAwesome';
8703
- font-display: block;
8704
- src:
8705
- url('../webfonts/fa-v4compatibility.woff2') format('woff2'),
8706
- url('../webfonts/fa-v4compatibility.ttf') format('truetype');
8707
- unicode-range: U+F041, U+F047, U+F065-F066, U+F07D-F07E, U+F080, U+F08B, U+F08E, U+F090, U+F09A, U+F0AC, U+F0AE, U+F0B2, U+F0D0, U+F0D6, U+F0E4, U+F0EC,
8708
- U+F10A-F10B, U+F123, U+F13E, U+F148-F149, U+F14C, U+F156, U+F15E, U+F160-F161, U+F163, U+F175-F178, U+F195, U+F1F8, U+F219, U+F250, U+F252, U+F27A;
8709
- }
8710
- `,
8711
- "KOL-SKIP-NAV": css$5`
8712
- kol-link-wc > a > kol-span-wc {
8713
- border-radius: var(--a11y-min-size);
8714
- border-style: solid;
8715
- border-width: 2px;
8716
- gap: 0.5rem;
8717
- line-height: 1rem;
8718
- padding: 8px 14px;
8719
- background-color: var(--color-ocean);
8720
- border-color: var(--color-ocean);
8721
- color: var(--color-white);
8722
- cursor: pointer;
8723
- }
8724
- `,
8725
- "KOL-LINK-GROUP": css$5`
8726
- ul {
8727
- list-style: none;
8728
- margin: 0px;
8729
- padding: 0px;
8730
- }
8731
- nav.horizontal ul {
8732
- display: flex;
8733
- flex-wrap: wrap;
8734
- }
8735
- nav.horizontal li {
8736
- list-style: none;
8737
- margin-left: 1.25rem;
8738
- margin-right: 0.25rem;
8739
- }
8740
- nav.horizontal li:first-child {
8741
- margin-left: 0;
8742
- }
8743
- nav.horizontal li:last-child {
8744
- margin-right: 0;
8745
- }
8746
- nav.vertical li {
8747
- margin-left: 1.75rem;
8748
- margin-right: 0.5rem;
8749
- }
8750
- li.list-none {
8751
- list-style-type: none !important;
8752
- margin-left: 0;
8753
- }
8754
- `,
8755
- "KOL-TOOLTIP": css$5`
8756
- :host {
8757
- --kolibri-font-size: var(--textFontSize);
8758
- }
8759
- `
6053
+ var css_248z$z = "@layer kol-theme-component {\n .alert {\n background-color: white;\n border: 1px solid var(--color-black);\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);\n }\n .heading-icon {\n align-items: center;\n display: flex;\n flex-shrink: 0;\n font-size: 1.5rem;\n height: 100%;\n justify-content: center;\n width: 2.5rem;\n }\n .default .heading-icon {\n background: var(--color-secondary-40);\n }\n .info .heading-icon {\n background: var(--color-blue);\n color: var(--color-white);\n }\n .success .heading-icon {\n background: var(--color-green);\n color: var(--color-white);\n }\n .warning .heading-icon {\n background: var(--color-yellow);\n }\n .error .heading-icon {\n background: var(--color-red);\n color: var(--color-white);\n }\n .heading-content {\n padding: 0.625rem;\n }\n .headline {\n margin: 0 0 0.625rem 0;\n font-size: 1.3125rem; /* h3 font-size */\n }\n .close {\n align-self: flex-start;\n }\n}";
6054
+
6055
+ var css_248z$y = "@layer kol-theme-component {\n :host {\n display: inline-block;\n }\n kol-span-wc {\n align-items: center;\n border-radius: 0.3125rem;\n display: grid;\n gap: 0.5rem;\n line-height: 1.25rem;\n padding: 0.25rem 0.75rem;\n }\n kol-span-wc span {\n display: flex;\n gap: 0.25rem;\n }\n}";
6056
+
6057
+ var css_248z$x = "@layer kol-theme-component {\n nav {\n width: 100%;\n }\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n }\n kol-link {\n display: inline;\n }\n :host kol-icon[exportparts*=separator] {\n padding: 0 0.5rem;\n }\n :host kol-icon::part(icon) {\n font-family: \"Font Awesome 6 Free\";\n font-weight: 900;\n font-size: 0.875rem !important;\n }\n :host kol-icon::part(icon)::before {\n color: currentColor;\n font-family: \"Font Awesome 6 Free\";\n }\n :host ul > li:not(:first-child) kol-icon::part(icon)::before {\n content: \"\\f105\";\n }\n :host li > kol-link > kol-link-wc > a {\n color: red !important;\n }\n}";
6058
+
6059
+ var css_248z$w = "@charset \"UTF-8\";\n@layer kol-theme-component {\n :host {\n display: inline-block;\n }\n button {\n color: inherit;\n outline: none;\n }\n button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"​\";\n }\n button > kol-span-wc {\n border: 1px solid;\n font-size: 1.125rem;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.5rem 0.875rem;\n text-align: center;\n text-transform: uppercase;\n }\n button:hover:not(:disabled) .span-label {\n text-decoration: underline;\n }\n button:focus > kol-span-wc {\n outline: var(--color-blue) solid 2px;\n outline-offset: 2px;\n }\n .primary button > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-white);\n }\n .secondary button > kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-primary-60);\n }\n .secondary button:hover > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-white);\n }\n .ghost button > kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-primary);\n text-transform: unset;\n }\n :is(.primary, .secondary, .ghost) button:disabled > kol-span-wc {\n color: var(--color-disabled-gray);\n }\n :is(.primary, .secondary) button:disabled > kol-span-wc {\n background: var(--color-secondary-40);\n border-color: var(--color-disabled-gray);\n }\n}";
6060
+
6061
+ var css_248z$v = "@layer kol-theme-component {\n div {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5em;\n }\n}";
6062
+
6063
+ var css_248z$u = "@layer kol-theme-component {\n button {\n color: var(--color-primary);\n text-decoration-thickness: 1px;\n text-decoration: none;\n }\n button:not(:disabled):hover, button:focus {\n text-decoration: underline;\n }\n button:focus-within {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .external-link-icon {\n margin-left: 0.25rem;\n }\n button:disabled {\n color: var(--color-disabled-gray);\n cursor: not-allowed;\n }\n}";
6064
+
6065
+ var css_248z$t = "@layer kol-theme-component {\n .card {\n background-color: var(--color-white);\n border: 1px solid var(--color-primary); /* Not part of the design system, necessary because box-shadow alone is not accessible. */\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);\n margin: 2rem 0;\n }\n .header {\n border-bottom: 1px solid var(--color-primary);\n padding: 1.3125rem 2rem; /* vertical padding copied from h3 */\n }\n .header .headline {\n font-size: 1.3125rem; /* h3 font-size */\n font-weight: normal;\n margin: 0;\n }\n .content {\n padding: 2rem 2rem 2.5rem;\n }\n}";
6066
+
6067
+ var css_248z$s = "@layer kol-theme-component {\n details {\n display: grid;\n width: 100%;\n }\n summary {\n margin: 0;\n padding: 0;\n }\n summary span {\n margin-left: 0.25rem;\n text-decoration: underline;\n }\n summary span:hover {\n text-decoration-thickness: 0.25em;\n }\n details > kol-indented-text {\n margin: 0.25em 0 0 0.6em;\n }\n}";
6068
+
6069
+ var css_248z$r = "/* NOTE: Alle ':root' CSS properties sollten in KoliBri zu ':host' kopiert werden und umgekehrt. Damit vereinheitlicht man alle Variablen auf beiden Seiten und kann diese dann individuell nutzen.*/ /* colors */\n@layer kol-theme-global {\n :root,\n :host {\n --color-primary: #005c45;\n --color-primary-60: #00854a;\n --color-primary-40: #99beb5;\n --color-primary-20: #ccdeda;\n --color-secondary: #576164;\n --color-secondary-40: #e5e8e9;\n --color-secondary-20: #f2f3f4;\n --color-secondary-0: #ffffff;\n --color-blue: #0077b6;\n --color-petrol: #007194;\n --color-green: #00854a;\n --color-yellow: #f9e03a;\n --color-red: #c0003c;\n --color-disabled-gray: #595f73;\n --color-black: #000;\n --color-white: #fff;\n }\n :root,\n :host {\n --font-family: \"BundesSans Web\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n \tsans-serif;\n --font-family-serif: \"BundesSerif Web\", var(--font-family);\n }\n :host {\n color: var(--color-black);\n font-family: var(--font-family);\n }\n :host * {\n box-sizing: border-box;\n }\n a,\n button,\n input,\n option,\n select,\n textarea {\n hyphens: auto;\n letter-spacing: inherit;\n }\n summary {\n hyphens: auto;\n letter-spacing: inherit;\n }\n *[tabindex]:focus,\n kol-input:not(.checkbox, .radio) .input:focus-within,\n summary:focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n kol-tooltip-wc {\n font-size: 1.125rem;\n }\n kol-tooltip-wc .tooltip-area {\n background-color: var(--color-white);\n }\n kol-tooltip-wc .tooltip-arrow {\n background-color: var(--color-primary);\n }\n kol-tooltip-wc .tooltip-content {\n padding: 0.5rem;\n border: 2px solid var(--color-primary);\n box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.5em;\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.3em;\n }\n}";
6070
+
6071
+ var css_248z$q = "@layer kol-theme-component {\n .headline {\n margin-top: 0;\n letter-spacing: 0.5;\n }\n h1 {\n font-size: 2.5rem;\n line-height: 2.8125rem;\n font-weight: normal;\n }\n h2 {\n font-size: 2rem;\n line-height: 2.3125rem;\n font-weight: normal;\n }\n h3 {\n font-size: 1.3125rem;\n line-height: 1.6875rem;\n font-weight: bold;\n }\n h4 {\n font-size: 1.125rem;\n line-height: 1.6875rem;\n font-weight: bold;\n }\n h5 {\n color: red;\n }\n h5:after {\n content: \" (H5 is not part of the design system.)\";\n }\n h6 {\n color: red;\n }\n h6:after {\n content: \" (H6 is not part of the design system.)\";\n }\n}";
6072
+
6073
+ var css_248z$p = "@layer kol-theme-component {\n :host {\n color: inherit;\n }\n}";
6074
+
6075
+ var css_248z$o = "@layer kol-theme-component {\n :host > div {\n padding: 0.9375rem;\n background-color: var(--color-secondary-20);\n border-left: 6px solid var(--color-primary);\n }\n}";
6076
+
6077
+ var css_248z$n = "@layer kol-theme-component {\n :host {\n --border-width: 1px;\n --spacing: 0.25rem;\n }\n kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n }\n kol-input:not(.hide-label) {\n grid-template-columns: calc(6 * var(--spacing)) auto;\n }\n kol-input.switch:not(.hide-label) {\n grid-template-columns: calc(13 * var(--spacing)) auto;\n }\n kol-input:has(input:focus) {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n label {\n font-size: 1.125rem;\n font-weight: bold;\n opacity: 1;\n }\n kol-input.disabled label {\n color: var(--color-disabled-gray);\n }\n .input {\n display: inline-flex;\n order: 1;\n }\n input {\n appearance: none;\n background-color: var(--color-white);\n opacity: 1;\n outline: none;\n transition: none;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .input-label {\n order: 2;\n padding-left: calc(2 * var(--spacing));\n }\n .error {\n order: 3;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n /* variant default */\n .default input[type=checkbox] {\n border-radius: 2px;\n border: var(--border-width) solid var(--color-primary);\n height: calc(6 * var(--spacing));\n min-width: calc(6 * var(--spacing));\n width: calc(6 * var(--spacing));\n }\n .default input[type=checkbox]:is(:checked, :indeterminate) {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .default input[type=checkbox]:disabled {\n border-color: var(--color-disabled-gray);\n background-color: var(--color-secondary-40);\n }\n .default input[type=checkbox]:enabled:hover {\n outline: 1px solid var(--color-primary); /* Increase visual border-width without shifting contents */\n }\n .default input[type=checkbox]:enabled:hover:is(:checked, :indeterminate) {\n background: var(--color-white);\n outline-color: var(--color-primary-60);\n border-color: var(--color-primary-60);\n }\n .default input[type=checkbox]:checked::before {\n left: calc(1.5 * var(--spacing) - var(--border-width));\n top: calc(2.85 * var(--spacing) - var(--border-width));\n transform: rotate(40deg) translate(-50%, -50%);\n background-color: transparent;\n border-width: 0 3px 3px 0;\n border-color: var(--color-white);\n border-style: solid;\n height: calc(3 * var(--spacing));\n width: calc(1.5 * var(--spacing));\n }\n .default input[type=checkbox]:checked:enabled:hover::before {\n border-color: var(--color-primary-60);\n }\n .default input[type=checkbox]:checked:disabled::before {\n border-color: var(--color-disabled-gray);\n }\n .default input[type=checkbox]:indeterminate::before {\n background-color: var(--color-white);\n height: 0.3rem;\n top: 0.5rem;\n left: 0.2rem;\n width: calc(4 * var(--spacing));\n transform: rotate(45deg);\n }\n .default input[type=checkbox]:indeterminate:enabled:hover::before {\n background-color: var(--color-primary-60);\n }\n .default input[type=checkbox]:indeterminate:disabled::before {\n background-color: var(--color-disabled-gray);\n }\n /* variant switch */\n .switch input[type=checkbox] {\n border-radius: 1.7em;\n border-width: 1px;\n border-color: var(--color-primary);\n transition: 0.5s background-color, border-color;\n }\n .switch input[type=checkbox]:enabled:hover {\n border-color: var(--color-primary-60);\n }\n .switch input[type=checkbox]:is(:checked, :indeterminate):enabled {\n background: var(--color-primary);\n }\n .switch input[type=checkbox]:is(:checked, :indeterminate):enabled:hover {\n background: var(--color-primary-60);\n }\n .switch input[type=checkbox]:disabled {\n border-color: var(--color-secondary);\n }\n .switch input[type=checkbox]:is(:checked, :indeterminate):disabled {\n background: var(--color-secondary-40);\n }\n .switch input[type=checkbox]::before {\n background: var(--color-white);\n border: 1px solid var(--color-primary);\n border-radius: 50%;\n height: 1.55em;\n width: 1.55em;\n left: 0;\n top: -1px;\n transform: translateX(-1px);\n }\n .switch input[type=checkbox]:indeterminate::before {\n transform: translateX(calc(50% - 2px));\n }\n .switch input[type=checkbox]:checked::before {\n transform: translateX(calc(100% - 4px));\n }\n .switch input[type=checkbox]:enabled:hover::before {\n border-color: var(--color-primary-60);\n }\n .switch input[type=checkbox]:disabled::before {\n background: var(--color-secondary-40);\n border-color: var(--color-secondary);\n }\n .switch .icon {\n display: none;\n }\n}";
6078
+
6079
+ var css_248z$m = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6080
+
6081
+ var css_248z$l = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6082
+
6083
+ var css_248z$k = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6084
+
6085
+ var css_248z$j = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n input {\n padding-top: 0.625rem;\n }\n}";
6086
+
6087
+ var css_248z$i = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6088
+
6089
+ var css_248z$h = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6090
+
6091
+ var css_248z$g = "@layer kol-theme-component {\n kol-input:has(input:focus) {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .radio-input-wrapper {\n align-items: center;\n display: flex;\n min-height: var(--a11y-min-size);\n }\n .fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem 0.75rem;\n }\n .error {\n width: 100%;\n }\n input {\n border-width: 1px;\n opacity: 1;\n }\n input:enabled {\n border-color: var(--color-primary);\n }\n input:enabled:hover {\n border-width: 2px;\n }\n input:checked:enabled:hover {\n border-color: var(--color-primary-60);\n }\n input:disabled {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n input:checked:enabled::before {\n background-color: var(--color-primary);\n }\n input:checked:disabled::before {\n background-color: var(--color-disabled-gray);\n }\n input:checked:enabled:hover::before {\n background-color: var(--color-primary-60);\n }\n .radio-label {\n font-size: 1.125rem;\n font-weight: bold;\n padding-left: 0.75rem;\n opacity: 1;\n }\n .disabled .radio-label {\n color: var(--color-disabled-gray);\n }\n .required .radio-label-span-inner::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
6092
+
6093
+ var css_248z$f = "/* https://www.cssportal.com/style-input-range/ */\n/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n input {\n border: 1px solid var(--color-primary);\n }\n input:focus {\n outline: none;\n }\n input:hover {\n border-color: var(--color-primary-60);\n }\n .inputs-wrapper {\n gap: 0.5rem;\n }\n}";
6094
+
6095
+ var css_248z$e = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6096
+
6097
+ var css_248z$d = "@charset \"UTF-8\";\n@layer kol-theme-component {\n :host {\n display: inline-block;\n }\n a {\n color: inherit;\n outline: none;\n }\n a::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"​\";\n }\n a > kol-span-wc {\n border: 1px solid;\n font-size: 1.125rem;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.5rem 0.875rem;\n text-align: center;\n text-transform: uppercase;\n }\n a:hover:not(:disabled) .span-label {\n text-decoration: underline;\n }\n a:focus > kol-span-wc {\n outline: var(--color-blue) solid 2px;\n outline-offset: 2px;\n }\n .primary a > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-white);\n }\n .secondary a > kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-primary-60);\n }\n .secondary a:hover > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-white);\n }\n .ghost a > kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-primary);\n text-transform: unset;\n }\n :is(.primary, .secondary, .ghost) a:disabled > kol-span-wc {\n color: var(--color-disabled-gray);\n }\n :is(.primary, .secondary) a:disabled > kol-span-wc {\n background: var(--color-secondary-40);\n border-color: var(--color-disabled-gray);\n }\n}";
6098
+
6099
+ var css_248z$c = "@layer kol-theme-component {\n a {\n color: var(--color-primary);\n text-decoration-thickness: 1px;\n text-decoration: none;\n }\n a:not(:disabled):hover, a:focus {\n text-decoration: underline;\n }\n a:focus-within {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .external-link-icon {\n margin-left: 0.25rem;\n }\n}";
6100
+
6101
+ var css_248z$b = "@layer kol-theme-component {\n ul {\n list-style: none;\n margin: 0px;\n padding: 0px;\n }\n nav.horizontal ul {\n display: flex;\n flex-wrap: wrap;\n }\n nav.horizontal li {\n list-style: none;\n margin-left: 1.25rem;\n margin-right: 0.25rem;\n }\n nav.horizontal li:first-child {\n margin-left: 0;\n }\n nav.horizontal li:last-child {\n margin-right: 0;\n }\n nav.vertical li {\n margin-left: 1.75rem;\n margin-right: 0.5rem;\n }\n li.list-none {\n list-style-type: none !important;\n margin-left: 0;\n }\n}";
6102
+
6103
+ var css_248z$a = "@layer kol-theme-component {\n :host .overlay .modal {\n max-height: calc(100% - 32px);\n }\n}";
6104
+
6105
+ var css_248z$9 = "@layer kol-theme-component {\n :host {\n font-size: 1.3125rem; /* h3 font-size */\n }\n :is(a, button) {\n color: var(--color-black);\n display: block;\n margin-left: 0.75rem;\n padding: 0.3125rem;\n text-decoration: none;\n }\n :is(a, button):hover {\n background-color: var(--color-primary);\n color: var(--color-white);\n }\n :is(a, button):focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n}";
6106
+
6107
+ var css_248z$8 = "@layer kol-theme-component {\n .navigation-list {\n gap: unset;\n }\n .navigation-list > li {\n min-width: var(--a11y-min-size);\n text-align: center;\n }\n .icon::part(icon) {\n font-family: \"Font Awesome 6 Free\";\n font-weight: 900;\n }\n .first .icon::part(icon)::before {\n content: \"\\f100\";\n }\n .previous .icon::part(icon)::before {\n content: \"\\f104\";\n }\n .next .icon::part(icon)::before {\n content: \"\\f105\";\n }\n .last .icon::part(icon)::before {\n content: \"\\f101\";\n }\n .button {\n cursor: pointer;\n display: flex;\n height: 2.75rem;\n width: 2.75rem;\n outline: none;\n }\n .button > kol-span-wc {\n margin: auto;\n display: flex;\n background-color: var(--color-white);\n border: 1px solid var(--color-primary);\n color: var(--color-black);\n font-size: 1.125rem;\n font-weight: normal;\n height: 1.875rem;\n width: 1.875rem;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .button > kol-span-wc > * {\n margin: auto;\n }\n .button > kol-span-wc .icon {\n width: 1.5em;\n height: 1.5em;\n }\n .button:hover:enabled > kol-span-wc {\n background-color: var(--color-primary-20);\n border-color: var(--color-primary-60);\n color: var(--color-black);\n }\n .button:focus > kol-span-wc {\n outline: var(--color-blue) solid 2px;\n outline-offset: 2px;\n }\n .button:disabled > kol-span-wc, .button:disabled:hover > kol-span-wc {\n background-color: var(--color-secondary-40);\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n cursor: not-allowed;\n }\n .selected button {\n border-radius: 1.5em;\n border: none;\n color: var(--color-midnight) !important;\n font-weight: 700;\n line-height: normal;\n }\n}";
6108
+
6109
+ var css_248z$7 = "@layer kol-theme-component {\n :host progress,\n :host span {\n display: block;\n height: 0px;\n overflow: hidden;\n width: 0px;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-ice);\n }\n svg line:last-child,\n svg circle:last-child {\n stroke: var(--color-midnight);\n fill: transparent;\n }\n progress {\n display: none;\n }\n}";
6110
+
6111
+ var css_248z$6 = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n select {\n border: none;\n opacity: 1;\n background: transparent;\n }\n select:first-child {\n padding-left: 0.375rem;\n }\n select:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6112
+
6113
+ var css_248z$5 = "@layer kol-theme-component {\n a {\n color: var(--color-primary);\n text-decoration-thickness: 1px;\n text-decoration: none;\n }\n a:not(:disabled):hover, a:focus {\n text-decoration: underline;\n }\n a:focus-within {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .external-link-icon {\n margin-left: 0.25rem;\n }\n a {\n display: block;\n }\n}";
6114
+
6115
+ var css_248z$4 = "@layer kol-theme-component {\n .cycle {\n padding: 0.125rem;\n }\n .cycle span {\n background-color: #fc0;\n }\n}";
6116
+
6117
+ var css_248z$3 = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n }\n :host > div:first-child {\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n border-collapse: collapse;\n }\n caption {\n height: auto;\n text-align: left;\n }\n /* visuell verstecken */\n caption {\n clip: rect(1px, 1px, 1px, 1px);\n clip-path: inset(50%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n }\n table,\n tr,\n th,\n td {\n border: 0 solid var(--color-white);\n }\n tr {\n border-top-width: 2px;\n }\n th {\n background-color: var(--color-primary);\n color: var(--color-white);\n font-size: 1.5rem;\n }\n tbody > tr:nth-child(odd) {\n background-color: var(--color-secondary-20);\n }\n tbody > tr:hover {\n background-color: var(--color-primary);\n color: var(--color-white);\n }\n th,\n td {\n border-right-width: 2px;\n padding: 0.25em 0.5em;\n }\n th > div {\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n gap: 0.25em;\n }\n .pagination {\n padding: 0.5em;\n gap: 1rem;\n }\n th kol-button button {\n padding: 0.5rem;\n }\n /* default: [aria-sort=\"none\"] */\n [data-sort] kol-button::part(icon)::before {\n font-family: \"Font Awesome 6 Free\";\n font-weight: 900;\n color: var(--color-white);\n content: \"\\f0dc\";\n }\n [data-sort=sort-ASC] kol-button::part(icon)::before {\n content: \"\\f0de\";\n }\n [data-sort=sort-DESC] kol-button::part(icon)::before {\n content: \"\\f0dd\";\n }\n}";
6118
+
6119
+ var css_248z$2 = "@layer kol-theme-component {\n .tabs-button-group {\n border-bottom: 1px solid var(--color-primary);\n gap: 2rem;\n padding: 0 2rem;\n }\n .button {\n color: var(--color-primary);\n padding: 0 0.9375rem;\n font-family: var(--font-family-serif);\n }\n .button.selected {\n background: var(--color-primary);\n color: var(--color-white);\n }\n .button:not(:disabled):hover {\n background: var(--color-primary);\n color: var(--color-white);\n text-decoration: underline;\n }\n .button:focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .button:disabled {\n color: var(--color-disabled-gray);\n cursor: not-allowed;\n }\n .tabs-content {\n padding: 2rem 2rem 2.5rem; /* Card paddings */\n }\n}";
6120
+
6121
+ var css_248z$1 = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n textarea {\n border: none;\n opacity: 1;\n background: transparent;\n }\n textarea:first-child {\n padding-left: 0.375rem;\n }\n textarea:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6122
+
6123
+ var css_248z = "@layer kol-theme-component {\n :host {\n top: 4.375rem;\n left: 50%;\n transform: translateX(-50%);\n }\n .toast {\n background: #fff;\n margin-top: 0.75rem;\n }\n}";
6124
+
6125
+ const BZStv1 = KoliBri.createTheme("bzst-v1", {
6126
+ GLOBAL: css_248z$r,
6127
+ "KOL-ACCORDION": css_248z$A,
6128
+ "KOL-ALERT": css_248z$z,
6129
+ "KOL-BADGE": css_248z$y,
6130
+ "KOL-BREADCRUMB": css_248z$x,
6131
+ "KOL-BUTTON": css_248z$w,
6132
+ "KOL-BUTTON-GROUP": css_248z$v,
6133
+ "KOL-BUTTON-LINK": css_248z$u,
6134
+ "KOL-CARD": css_248z$t,
6135
+ "KOL-DETAILS": css_248z$s,
6136
+ "KOL-HEADING": css_248z$q,
6137
+ "KOL-ICON": css_248z$p,
6138
+ "KOL-INDENTED-TEXT": css_248z$o,
6139
+ "KOL-INPUT-CHECKBOX": css_248z$n,
6140
+ "KOL-INPUT-COLOR": css_248z$m,
6141
+ "KOL-INPUT-DATE": css_248z$l,
6142
+ "KOL-INPUT-EMAIL": css_248z$k,
6143
+ "KOL-INPUT-FILE": css_248z$j,
6144
+ "KOL-INPUT-NUMBER": css_248z$i,
6145
+ "KOL-INPUT-PASSWORD": css_248z$h,
6146
+ "KOL-INPUT-RADIO": css_248z$g,
6147
+ "KOL-INPUT-RANGE": css_248z$f,
6148
+ "KOL-INPUT-TEXT": css_248z$e,
6149
+ "KOL-LINK": css_248z$c,
6150
+ "KOL-LINK-BUTTON": css_248z$d,
6151
+ "KOL-LINK-GROUP": css_248z$b,
6152
+ "KOL-MODAL": css_248z$a,
6153
+ "KOL-NAV": css_248z$9,
6154
+ "KOL-PAGINATION": css_248z$8,
6155
+ "KOL-PROGRESS": css_248z$7,
6156
+ "KOL-SELECT": css_248z$6,
6157
+ "KOL-SKIP-NAV": css_248z$5,
6158
+ "KOL-SPIN": css_248z$4,
6159
+ "KOL-TABLE": css_248z$3,
6160
+ "KOL-TABS": css_248z$2,
6161
+ "KOL-TEXTAREA": css_248z$1,
6162
+ "KOL-TOAST-CONTAINER": css_248z
8760
6163
  });
8761
6164
 
8762
6165
  const css$4 = (input) => input.join(``);
@@ -9038,7 +6441,7 @@ const BMF = KoliBri.createTheme("bmf", {
9038
6441
  content: '*';
9039
6442
  padding-left: 0.125em;
9040
6443
  }
9041
- kol-input.error {
6444
+ kol-input.error:not(.hidden-error) {
9042
6445
  border-left: 3px solid var(--color-red);
9043
6446
  padding-left: 1em;
9044
6447
  }
@@ -9117,7 +6520,7 @@ const BMF = KoliBri.createTheme("bmf", {
9117
6520
  content: '*';
9118
6521
  padding-left: 0.125em;
9119
6522
  }
9120
- kol-input.error {
6523
+ kol-input.error:not(.hidden-error) {
9121
6524
  border-left: 3px solid var(--color-red);
9122
6525
  padding-left: 1em;
9123
6526
  }
@@ -9196,7 +6599,7 @@ const BMF = KoliBri.createTheme("bmf", {
9196
6599
  content: '*';
9197
6600
  padding-left: 0.125em;
9198
6601
  }
9199
- kol-input.error {
6602
+ kol-input.error:not(.hidden-error) {
9200
6603
  border-left: 3px solid var(--color-red);
9201
6604
  padding-left: 1em;
9202
6605
  }
@@ -9275,7 +6678,7 @@ const BMF = KoliBri.createTheme("bmf", {
9275
6678
  content: '*';
9276
6679
  padding-left: 0.125em;
9277
6680
  }
9278
- kol-input.error {
6681
+ kol-input.error:not(.hidden-error) {
9279
6682
  border-left: 3px solid var(--color-red);
9280
6683
  padding-left: 1em;
9281
6684
  }
@@ -9355,7 +6758,7 @@ const BMF = KoliBri.createTheme("bmf", {
9355
6758
  content: '*';
9356
6759
  padding-left: 0.125em;
9357
6760
  }
9358
- kol-input.error {
6761
+ kol-input.error:not(.hidden-error) {
9359
6762
  border-left: 3px solid var(--color-red);
9360
6763
  padding-left: 1em;
9361
6764
  }
@@ -9441,7 +6844,7 @@ const BMF = KoliBri.createTheme("bmf", {
9441
6844
  content: '*';
9442
6845
  padding-left: 0.125em;
9443
6846
  }
9444
- kol-input.error {
6847
+ kol-input.error:not(.hidden-error) {
9445
6848
  border-left: 3px solid var(--color-red);
9446
6849
  padding-left: 1em;
9447
6850
  }
@@ -9533,7 +6936,7 @@ const BMF = KoliBri.createTheme("bmf", {
9533
6936
  content: '*';
9534
6937
  padding-left: 0.125em;
9535
6938
  }
9536
- kol-input.error {
6939
+ kol-input.error:not(.hidden-error) {
9537
6940
  border-left: 3px solid var(--color-red);
9538
6941
  padding-left: 1em;
9539
6942
  }
@@ -9844,31 +7247,31 @@ const BMF = KoliBri.createTheme("bmf", {
9844
7247
  }
9845
7248
  `,
9846
7249
  "KOL-HEADING": css$4`
9847
- h1,
9848
- h2,
9849
- h3,
9850
- h4,
9851
- h5,
9852
- h6 {
7250
+ .headline-h1,
7251
+ .headline-h2,
7252
+ .headline-h3,
7253
+ .headline-h4,
7254
+ .headline-h5,
7255
+ .headline-h6 {
9853
7256
  color: inherit;
9854
7257
  font-style: normal;
9855
7258
  margin: 0;
9856
7259
  padding: 0;
9857
7260
  }
9858
- h1,
9859
- h2,
9860
- h3 {
7261
+ .headline-h1,
7262
+ .headline-h2,
7263
+ .headline-h3 {
9861
7264
  font-weight: 700;
9862
7265
  }
9863
- h1 {
7266
+ .headline-h1 {
9864
7267
  font-size: 1.5rem;
9865
7268
  line-height: 1.75rem;
9866
7269
  }
9867
- h2 {
7270
+ .headline-h2 {
9868
7271
  font-size: 1.25rem;
9869
7272
  line-height: 1.75rem;
9870
7273
  }
9871
- h3 {
7274
+ .headline-h3 {
9872
7275
  font-size: 1.125rem;
9873
7276
  line-height: 1.5rem;
9874
7277
  }
@@ -10100,7 +7503,7 @@ const BMF = KoliBri.createTheme("bmf", {
10100
7503
  content: '*';
10101
7504
  padding-left: 0.125em;
10102
7505
  }
10103
- kol-input.error {
7506
+ kol-input.error:not(.hidden-error) {
10104
7507
  border-left: 3px solid var(--color-red);
10105
7508
  padding-left: 1em;
10106
7509
  }
@@ -10207,7 +7610,7 @@ const BMF = KoliBri.createTheme("bmf", {
10207
7610
  content: '*';
10208
7611
  padding-left: 0.125em;
10209
7612
  }
10210
- kol-input.error {
7613
+ kol-input.error:not(.hidden-error) {
10211
7614
  border-left: 3px solid var(--color-red);
10212
7615
  padding-left: 1em;
10213
7616
  }
@@ -10550,7 +7953,7 @@ const BMF = KoliBri.createTheme("bmf", {
10550
7953
  padding-top: 0.25em;
10551
7954
  grid-column: span 2 / auto;
10552
7955
  }
10553
- :host kol-input.error {
7956
+ :host kol-input.error:not(.hidden-error) {
10554
7957
  border-left: 3px solid var(--color-red);
10555
7958
  padding-left: 1em;
10556
7959
  }
@@ -10752,6 +8155,13 @@ const BMF = KoliBri.createTheme("bmf", {
10752
8155
  :host kol-input.button .icon {
10753
8156
  height: auto;
10754
8157
  }
8158
+ .button:focus-within {
8159
+ border-radius: var(--a11y-min-size);
8160
+ outline-color: var(--color-ocean);
8161
+ outline-offset: 2px;
8162
+ outline-style: solid;
8163
+ outline-width: 3px;
8164
+ }
10755
8165
  `,
10756
8166
  "KOL-INPUT-RADIO": css$4`
10757
8167
  /* INPUT */
@@ -11161,7 +8571,7 @@ const BMF = KoliBri.createTheme("bmf", {
11161
8571
  content: '*';
11162
8572
  padding-left: 0.125em;
11163
8573
  }
11164
- kol-input.error {
8574
+ kol-input.error:not(.hidden-error) {
11165
8575
  border-left: 3px solid var(--color-red);
11166
8576
  padding-left: 1em;
11167
8577
  }
@@ -19375,29 +16785,29 @@ const DEFAULT = KoliBri.createTheme("default", {
19375
16785
  }
19376
16786
  `,
19377
16787
  "KOL-HEADING": css$3`
19378
- h1,
19379
- h2,
19380
- h3,
19381
- h4,
19382
- h5,
19383
- h6 {
16788
+ .headline-h1,
16789
+ .headline-h2,
16790
+ .headline-h3,
16791
+ .headline-h4,
16792
+ .headline-h5,
16793
+ .headline-h6 {
19384
16794
  color: inherit;
19385
16795
  font-style: normal;
19386
16796
  }
19387
- h1,
19388
- h2,
19389
- h3 {
16797
+ .headline-h1,
16798
+ .headline-h2,
16799
+ .headline-h3 {
19390
16800
  font-weight: 700;
19391
16801
  }
19392
- h1 {
16802
+ .headline-h1 {
19393
16803
  font-size: 1.5rem;
19394
16804
  line-height: 1.75rem;
19395
16805
  }
19396
- h2 {
16806
+ .headline-h2 {
19397
16807
  font-size: 1.25rem;
19398
16808
  line-height: 1.75rem;
19399
16809
  }
19400
- h3 {
16810
+ .headline-h3 {
19401
16811
  font-size: 1.125rem;
19402
16812
  line-height: 1.5rem;
19403
16813
  }
@@ -20147,6 +17557,13 @@ const DEFAULT = KoliBri.createTheme("default", {
20147
17557
  :host .disabled {
20148
17558
  opacity: 0.33;
20149
17559
  }
17560
+ .button:focus-within {
17561
+ border-radius: var(--border-radius);
17562
+ outline-color: var(--color-primary-variant);
17563
+ outline-offset: 2px;
17564
+ outline-style: solid;
17565
+ outline-width: calc(var(--border-width) * 2);
17566
+ }
20150
17567
  `,
20151
17568
  "KOL-INPUT-RADIO": css$3`
20152
17569
  label {
@@ -20868,27 +18285,27 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
20868
18285
  }
20869
18286
  `,
20870
18287
  "KOL-HEADING": css$2`
20871
- h1 {
18288
+ .headline-h1 {
20872
18289
  font-size: 2rem;
20873
18290
  line-height: 2.5rem;
20874
18291
  }
20875
- h2 {
18292
+ .headline-h2 {
20876
18293
  font-size: 1.75rem;
20877
18294
  line-height: 2rem;
20878
18295
  }
20879
- h3 {
18296
+ .headline-h3 {
20880
18297
  font-size: 1.5rem;
20881
18298
  line-height: 1.75rem;
20882
18299
  }
20883
- h4 {
18300
+ .headline-h4 {
20884
18301
  font-size: 1.25rem;
20885
18302
  line-height: 1.75rem;
20886
18303
  }
20887
- h5 {
18304
+ .headline-h5 {
20888
18305
  font-size: 1rem;
20889
18306
  line-height: 1.5rem;
20890
18307
  }
20891
- h6 {
18308
+ .headline-h6 {
20892
18309
  color: rgb(234, 0, 255);
20893
18310
  }
20894
18311
  `,
@@ -21456,6 +18873,12 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21456
18873
  .hint {
21457
18874
  font-size: 0.875rem;
21458
18875
  }
18876
+ .button:focus-within {
18877
+ outline-color: var(--color-blue);
18878
+ outline-offset: 2px;
18879
+ outline-style: solid;
18880
+ outline-width: 2px;
18881
+ }
21459
18882
  `,
21460
18883
  "KOL-INPUT-COLOR": css$2`
21461
18884
  kol-input {
@@ -22452,35 +19875,35 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
22452
19875
  }
22453
19876
  `,
22454
19877
  "KOL-HEADING": css$2`
22455
- h1,
22456
- h2,
22457
- h3,
22458
- h4,
22459
- h5,
22460
- h6 {
19878
+ .headline-h1,
19879
+ .headline-h2,
19880
+ .headline-h3,
19881
+ .headline-h4,
19882
+ .headline-h5,
19883
+ .headline-h6 {
22461
19884
  font-weight: var(--font-weight-bold);
22462
19885
  }
22463
- h1 {
19886
+ .headline-h1 {
22464
19887
  font-size: 2.625rem;
22465
19888
  line-height: 3.25rem;
22466
19889
  }
22467
- h2 {
19890
+ .headline-h2 {
22468
19891
  font-size: 2.25rem;
22469
19892
  line-height: 2.75rem;
22470
19893
  }
22471
- h3 {
19894
+ .headline-h3 {
22472
19895
  font-size: 2rem;
22473
19896
  line-height: 2.5rem;
22474
19897
  }
22475
- h4 {
19898
+ .headline-h4 {
22476
19899
  font-size: 1.75rem;
22477
19900
  line-height: 2rem;
22478
19901
  }
22479
- h5 {
19902
+ .headline-h5 {
22480
19903
  font-size: 1.5rem;
22481
19904
  line-height: 1.75rem;
22482
19905
  }
22483
- h6 {
19906
+ .headline-h6 {
22484
19907
  font-size: 1.25rem;
22485
19908
  line-height: 1.75rem;
22486
19909
  }
@@ -23112,6 +20535,11 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23112
20535
  .hint {
23113
20536
  font-size: 0.875rem;
23114
20537
  }
20538
+ .button:focus-within {
20539
+ outline-color: var(--color-blue-130);
20540
+ outline-style: solid;
20541
+ outline-width: 2px;
20542
+ }
23115
20543
  `,
23116
20544
  "KOL-INPUT-COLOR": css$2`
23117
20545
  kol-input {
@@ -24683,42 +22111,42 @@ const ITZBund = KoliBri.createTheme("itzbund", {
24683
22111
  }
24684
22112
  `,
24685
22113
  "KOL-HEADING": css$1`
24686
- h1,
24687
- h2,
24688
- h3,
24689
- h4,
24690
- h5,
24691
- h6 {
22114
+ .headline-h1,
22115
+ .headline-h2,
22116
+ .headline-h3,
22117
+ .headline-h4,
22118
+ .headline-h5,
22119
+ .headline-h6 {
24692
22120
  line-height: 1em;
24693
22121
  margin: 0;
24694
22122
  padding: 0;
24695
22123
  }
24696
- h1 {
22124
+ .headline-h1 {
24697
22125
  font-family: var(--font-family-serif);
24698
22126
  font-size: 54px;
24699
22127
  font-weight: bold;
24700
22128
  }
24701
- h2 {
22129
+ .headline-h2 {
24702
22130
  font-family: var(--font-family-serif);
24703
22131
  font-size: 32px;
24704
22132
  font-weight: bold;
24705
22133
  }
24706
- h3 {
22134
+ .headline-h3 {
24707
22135
  font-family: var(--font-family-serif);
24708
22136
  font-size: 26px;
24709
22137
  font-weight: bold;
24710
22138
  }
24711
- h4 {
22139
+ .headline-h4 {
24712
22140
  font-family: var(--font-family-serif);
24713
22141
  font-size: 20px;
24714
22142
  font-weight: normal;
24715
22143
  }
24716
- h5 {
22144
+ .headline-h5 {
24717
22145
  font-family: var(--font-family-serif);
24718
22146
  font-size: 17px;
24719
22147
  font-weight: bold;
24720
22148
  }
24721
- h6 {
22149
+ .headline-h6 {
24722
22150
  font-family: var(--font-family-sans);
24723
22151
  font-size: 17px;
24724
22152
  font-weight: normal;
@@ -25354,6 +22782,13 @@ const ITZBund = KoliBri.createTheme("itzbund", {
25354
22782
  order: 3;
25355
22783
  padding: 0 var(--spacing);
25356
22784
  }
22785
+ .button:focus-within {
22786
+ border-radius: 2rem;
22787
+ outline-color: var(--color-achat) !important;
22788
+ outline-offset: 2px;
22789
+ outline-style: solid;
22790
+ outline-width: 3px;
22791
+ }
25357
22792
  `,
25358
22793
  "KOL-INPUT-RADIO": `/* INPUT */
25359
22794
  :host input:focus {
@@ -27429,7 +24864,15 @@ const MFM = KoliBri.createTheme("mfm", {
27429
24864
  }
27430
24865
  :host .disabled {
27431
24866
  opacity: 0.33;
27432
- }`,
24867
+ }
24868
+ .button:focus-within {
24869
+ border-radius: 0.25rem;
24870
+ outline-color: var(--color-ocean);
24871
+ outline-offset: 2px;
24872
+ outline-style: solid;
24873
+ outline-width: 3px;
24874
+ }
24875
+ `,
27433
24876
  "KOL-INPUT-RADIO": `/* INPUT */
27434
24877
  kol-input {
27435
24878
  display: grid;
@@ -35989,32 +33432,32 @@ const MAPZ = KoliBri.createTheme("mapz", {
35989
33432
  }
35990
33433
  `,
35991
33434
  "KOL-HEADING": css`
35992
- h1,
35993
- h2,
35994
- h3,
35995
- h4,
35996
- h5,
35997
- h6 {
33435
+ .headline-h1,
33436
+ .headline-h2,
33437
+ .headline-h3,
33438
+ .headline-h4,
33439
+ .headline-h5,
33440
+ .headline-h6 {
35998
33441
  line-height: 1.25em;
35999
33442
  margin: 0;
36000
33443
  padding: 0;
36001
33444
  }
36002
- h1 {
33445
+ .headline-h1 {
36003
33446
  font-size: 1.5rem !important;
36004
33447
  }
36005
- h2 {
33448
+ .headline-h2 {
36006
33449
  font-size: 1.4rem !important;
36007
33450
  }
36008
- h3 {
33451
+ .headline-h3 {
36009
33452
  font-size: 1.3rem !important;
36010
33453
  }
36011
- h4 {
33454
+ .headline-h4 {
36012
33455
  font-size: 1.2rem !important;
36013
33456
  }
36014
- h5 {
33457
+ .headline-h5 {
36015
33458
  font-size: 1.1rem !important;
36016
33459
  }
36017
- h6 {
33460
+ .headline-h6 {
36018
33461
  font-size: 1rem !important;
36019
33462
  }
36020
33463
  `,
@@ -36163,6 +33606,13 @@ const MAPZ = KoliBri.createTheme("mapz", {
36163
33606
  .disabled {
36164
33607
  opacity: 0.33;
36165
33608
  }
33609
+ .button:focus-within {
33610
+ border-radius: var(--kolibri-border-radius);
33611
+ outline-color: var(--kolibri-color-outline);
33612
+ outline-offset: 2px;
33613
+ outline-style: solid;
33614
+ outline-width: 3px;
33615
+ }
36166
33616
  `,
36167
33617
  "KOL-INPUT-RADIO": css`
36168
33618
  label {
@@ -50524,7 +47974,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
50524
47974
  --color-grau-80: hsl(0 0% 20%);
50525
47975
  --color-grau-70: hsl(0 0% 30%);
50526
47976
  --color-grau-60: hsl(0 0% 40%);
50527
- --color-grau-50: hsl(0 0% 50%);
47977
+ --color-grau-50: #8b8b8b;
50528
47978
  --color-grau-40: hsl(0 0% 60%);
50529
47979
  --color-grau-30: hsl(0 0% 70%);
50530
47980
  --color-grau-20: hsl(0 0% 80%);
@@ -50621,39 +48071,39 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
50621
48071
  }
50622
48072
  `,
50623
48073
  "KOL-HEADING": css`
50624
- h1,
50625
- h2,
50626
- h3,
50627
- h4,
50628
- h5,
50629
- h6 {
48074
+ .headline-h1,
48075
+ .headline-h2,
48076
+ .headline-h3,
48077
+ .headline-h4,
48078
+ .headline-h5,
48079
+ .headline-h6 {
50630
48080
  font-weight: var(--font-weight-bold);
50631
48081
  margin: 0;
50632
48082
  padding: 1rem 0;
50633
48083
  text-align: left;
50634
48084
  }
50635
- h1 {
48085
+ .headline-h1 {
50636
48086
  font-size: 2.5rem;
50637
48087
  line-height: 1.2;
50638
48088
  padding: 0 0 1rem 0;
50639
48089
  }
50640
- h2 {
48090
+ .headline-h2 {
50641
48091
  font-size: 2rem;
50642
48092
  line-height: 1.25;
50643
48093
  }
50644
- h3 {
48094
+ .headline-h3 {
50645
48095
  font-size: 1.75rem;
50646
48096
  line-height: 1.29;
50647
48097
  }
50648
- h4 {
48098
+ .headline-h4 {
50649
48099
  font-size: 1.5rem;
50650
48100
  line-height: 1.33;
50651
48101
  }
50652
- h5 {
48102
+ .headline-h5 {
50653
48103
  font-size: 1.25rem;
50654
48104
  line-height: 1.4;
50655
48105
  }
50656
- h6 {
48106
+ .headline-h6 {
50657
48107
  font-size: 1rem;
50658
48108
  line-height: 1.5;
50659
48109
  }
@@ -51429,6 +48879,13 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51429
48879
  .disabled {
51430
48880
  opacity: 0.33;
51431
48881
  }
48882
+ .button:focus-within {
48883
+ border-radius: var(--border-radius);
48884
+ outline-color: var(--color-blau-dark);
48885
+ outline-offset: 0.125rem;
48886
+ outline-style: solid;
48887
+ outline-width: 0.125rem;
48888
+ }
51432
48889
  `,
51433
48890
  "KOL-INPUT-RADIO": css`
51434
48891
  /* ALL INPUT, SELECT, TEXTAREA */
@@ -59560,6 +57017,11 @@ const checkboxStyles = css`
59560
57017
  kol-input.button {
59561
57018
  grid-template-areas: 'input label' 'error error' 'hint hint';
59562
57019
  }
57020
+
57021
+ .button:focus-within {
57022
+ outline: 0.125rem solid var(--color-blau);
57023
+ outline-offset: 0.125rem;
57024
+ }
59563
57025
  `;
59564
57026
 
59565
57027
  const detailsStyles = css`
@@ -59859,39 +57321,39 @@ const ZOLLv3 = KoliBri.createTheme("zoll-v3", {
59859
57321
  }
59860
57322
  `,
59861
57323
  "KOL-HEADING": css`
59862
- h1,
59863
- h2,
59864
- h3,
59865
- h4,
59866
- h5,
59867
- h6 {
57324
+ .headline-h1,
57325
+ .headline-h2,
57326
+ .headline-h3,
57327
+ .headline-h4,
57328
+ .headline-h5,
57329
+ .headline-h6 {
59868
57330
  font-weight: var(--font-weight-bold);
59869
57331
  margin: 0;
59870
57332
  padding: 1rem 0;
59871
57333
  text-align: left;
59872
57334
  }
59873
- h1 {
57335
+ .headline-h1 {
59874
57336
  font-size: 2.5rem;
59875
57337
  line-height: 1.2;
59876
57338
  padding: 0 0 1rem 0;
59877
57339
  }
59878
- h2 {
57340
+ .headline-h2 {
59879
57341
  font-size: 2rem;
59880
57342
  line-height: 1.25;
59881
57343
  }
59882
- h3 {
57344
+ .headline-h3 {
59883
57345
  font-size: 1.75rem;
59884
57346
  line-height: 1.29;
59885
57347
  }
59886
- h4 {
57348
+ .headline-h4 {
59887
57349
  font-size: 1.5rem;
59888
57350
  line-height: 1.33;
59889
57351
  }
59890
- h5 {
57352
+ .headline-h5 {
59891
57353
  font-size: 1.25rem;
59892
57354
  line-height: 1.4;
59893
57355
  }
59894
- h6 {
57356
+ .headline-h6 {
59895
57357
  font-size: 1rem;
59896
57358
  line-height: 1.5;
59897
57359
  }
@@ -67618,7 +65080,7 @@ const EN = KoliBri.createTranslation("en", {});
67618
65080
 
67619
65081
  exports.BAMF = BAMF;
67620
65082
  exports.BMF = BMF;
67621
- exports.BZSt = BZSt;
65083
+ exports.BZStv1 = BZStv1;
67622
65084
  exports.DE = DE;
67623
65085
  exports.DEFAULT = DEFAULT;
67624
65086
  exports.DESYv1 = DESYv1;