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