@public-ui/themes 2.0.0-rc.9 → 2.0.0

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 (5) hide show
  1. package/README.md +37 -4
  2. package/dist/index.cjs +415 -3090
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.mjs +415 -3090
  5. package/package.json +13 -10
package/dist/index.mjs CHANGED
@@ -4332,10 +4332,10 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
4332
4332
  height: 1.25em;
4333
4333
  left: 2px;
4334
4334
  }
4335
- &:has(input:checked) .icon {
4335
+ &.checked .icon {
4336
4336
  transform: translate(2em, -50%);
4337
4337
  }
4338
- &:has(input:indeterminate) .icon {
4338
+ &.indeterminate .icon {
4339
4339
  transform: translate(1em, -50%);
4340
4340
  }
4341
4341
  }
@@ -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:focus-within {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .input-label {\n font-size: 1.125rem;\n font-weight: bold;\n opacity: 1;\n }\n kol-input.disabled .input-label {\n color: var(--color-disabled-gray);\n }\n .input {\n display: inline-flex;\n order: 1;\n }\n .checkbox-container {\n justify-content: flex-start;\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 .checkbox-input-element {\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 .checkbox-input-element:is(:checked, :indeterminate) {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .default .checkbox-input-element:disabled {\n border-color: var(--color-disabled-gray);\n background-color: var(--color-secondary-40);\n }\n .default:not(.disabled):hover .checkbox-input-element {\n outline: 1px solid var(--color-primary); /* Increase visual border-width without shifting contents */\n }\n .default:not(.disabled):hover:is(.checked, .indeterminate) .checkbox-input-element {\n background: var(--color-white);\n outline-color: var(--color-primary-60);\n border-color: var(--color-primary-60);\n }\n .default .icon {\n margin-left: 0.25rem;\n }\n .default.indeterminate .icon::part(icon) {\n transform: translateY(-0.1875rem);\n }\n .default.indeterminate .icon::part(icon)::before {\n content: \"\\\\\";\n font-family: var(--font-family);\n }\n .default:is(.checked, .indeterminate) .icon {\n color: var(--color-white);\n }\n .default:is(.checked, .indeterminate):not(.disabled):hover .icon {\n color: var(--color-primary-60);\n }\n .default:is(.checked, .indeterminate).disabled .icon {\n color: var(--color-disabled-gray);\n }\n /* variant switch */\n .switch input[type=checkbox] {\n border-color: var(--color-primary);\n border-radius: 1.7em;\n border-width: 1px;\n display: block;\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:focus-within {\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(``);
@@ -8852,7 +6255,7 @@ const BMF = KoliBri.createTheme("bmf", {
8852
6255
  }
8853
6256
  kol-tooltip-wc .tooltip-area {
8854
6257
  background-color: var(--color-white);
8855
- color: var(--color-metal);
6258
+ color: var(--color-black);
8856
6259
  }
8857
6260
  kol-tooltip-wc .tooltip-content {
8858
6261
  border-radius: var(--border-radius);
@@ -8914,6 +6317,12 @@ const BMF = KoliBri.createTheme("bmf", {
8914
6317
  border-color: var(--color-red);
8915
6318
  color: var(--color-white);
8916
6319
  }
6320
+ .success :is(a, button) > kol-span-wc,
6321
+ .success :is(a, button):disabled:hover > kol-span-wc {
6322
+ background-color: var(--color-green);
6323
+ border-color: var(--color-green);
6324
+ color: var(--color-white);
6325
+ }
8917
6326
  .ghost :is(a, button) > kol-span-wc,
8918
6327
  .ghost :is(a, button):disabled:hover > kol-span-wc {
8919
6328
  border-color: var(--color-white);
@@ -8929,6 +6338,8 @@ const BMF = KoliBri.createTheme("bmf", {
8929
6338
  .normal :is(a, button):hover > kol-span-wc,
8930
6339
  .danger :is(a, button):active > kol-span-wc,
8931
6340
  .danger :is(a, button):hover > kol-span-wc,
6341
+ .success :is(a, button):active > kol-span-wc,
6342
+ .success :is(a, button):hover > kol-span-wc,
8932
6343
  .ghost :is(a, button):active > kol-span-wc,
8933
6344
  .ghost :is(a, button):hover > kol-span-wc {
8934
6345
  background-color: var(--color-ocean);
@@ -8949,6 +6360,7 @@ const BMF = KoliBri.createTheme("bmf", {
8949
6360
  .secondary :is(a, button):active > kol-span-wc,
8950
6361
  .normal :is(a, button):active > kol-span-wc,
8951
6362
  .danger :is(a, button):active > kol-span-wc,
6363
+ .success :is(a, button):active > kol-span-wc,
8952
6364
  .ghost :is(a, button):active > kol-span-wc {
8953
6365
  border-color: var(--color-white);
8954
6366
  box-shadow: none;
@@ -8975,6 +6387,14 @@ const BMF = KoliBri.createTheme("bmf", {
8975
6387
  background-color: transparent;
8976
6388
  border-color: transparent;
8977
6389
  }
6390
+ /** CUSTOM_CLASS */
6391
+ :is(a, button).icon-only > kol-span-wc {
6392
+ padding: 8px;
6393
+ width: unset;
6394
+ }
6395
+ :is(a, button).icon-only > kol-span-wc > span > span {
6396
+ display: block;
6397
+ }
8978
6398
  `,
8979
6399
  "KOL-INPUT-TEXT": css$4`
8980
6400
  kol-input {
@@ -9036,7 +6456,7 @@ const BMF = KoliBri.createTheme("bmf", {
9036
6456
  content: '*';
9037
6457
  padding-left: 0.125em;
9038
6458
  }
9039
- kol-input.error {
6459
+ kol-input.error:not(.hidden-error) {
9040
6460
  border-left: 3px solid var(--color-red);
9041
6461
  padding-left: 1em;
9042
6462
  }
@@ -9115,7 +6535,7 @@ const BMF = KoliBri.createTheme("bmf", {
9115
6535
  content: '*';
9116
6536
  padding-left: 0.125em;
9117
6537
  }
9118
- kol-input.error {
6538
+ kol-input.error:not(.hidden-error) {
9119
6539
  border-left: 3px solid var(--color-red);
9120
6540
  padding-left: 1em;
9121
6541
  }
@@ -9194,7 +6614,7 @@ const BMF = KoliBri.createTheme("bmf", {
9194
6614
  content: '*';
9195
6615
  padding-left: 0.125em;
9196
6616
  }
9197
- kol-input.error {
6617
+ kol-input.error:not(.hidden-error) {
9198
6618
  border-left: 3px solid var(--color-red);
9199
6619
  padding-left: 1em;
9200
6620
  }
@@ -9273,7 +6693,7 @@ const BMF = KoliBri.createTheme("bmf", {
9273
6693
  content: '*';
9274
6694
  padding-left: 0.125em;
9275
6695
  }
9276
- kol-input.error {
6696
+ kol-input.error:not(.hidden-error) {
9277
6697
  border-left: 3px solid var(--color-red);
9278
6698
  padding-left: 1em;
9279
6699
  }
@@ -9353,7 +6773,7 @@ const BMF = KoliBri.createTheme("bmf", {
9353
6773
  content: '*';
9354
6774
  padding-left: 0.125em;
9355
6775
  }
9356
- kol-input.error {
6776
+ kol-input.error:not(.hidden-error) {
9357
6777
  border-left: 3px solid var(--color-red);
9358
6778
  padding-left: 1em;
9359
6779
  }
@@ -9439,7 +6859,7 @@ const BMF = KoliBri.createTheme("bmf", {
9439
6859
  content: '*';
9440
6860
  padding-left: 0.125em;
9441
6861
  }
9442
- kol-input.error {
6862
+ kol-input.error:not(.hidden-error) {
9443
6863
  border-left: 3px solid var(--color-red);
9444
6864
  padding-left: 1em;
9445
6865
  }
@@ -9531,7 +6951,7 @@ const BMF = KoliBri.createTheme("bmf", {
9531
6951
  content: '*';
9532
6952
  padding-left: 0.125em;
9533
6953
  }
9534
- kol-input.error {
6954
+ kol-input.error:not(.hidden-error) {
9535
6955
  border-left: 3px solid var(--color-red);
9536
6956
  padding-left: 1em;
9537
6957
  }
@@ -9842,31 +7262,31 @@ const BMF = KoliBri.createTheme("bmf", {
9842
7262
  }
9843
7263
  `,
9844
7264
  "KOL-HEADING": css$4`
9845
- h1,
9846
- h2,
9847
- h3,
9848
- h4,
9849
- h5,
9850
- h6 {
7265
+ .headline-h1,
7266
+ .headline-h2,
7267
+ .headline-h3,
7268
+ .headline-h4,
7269
+ .headline-h5,
7270
+ .headline-h6 {
9851
7271
  color: inherit;
9852
7272
  font-style: normal;
9853
7273
  margin: 0;
9854
7274
  padding: 0;
9855
7275
  }
9856
- h1,
9857
- h2,
9858
- h3 {
7276
+ .headline-h1,
7277
+ .headline-h2,
7278
+ .headline-h3 {
9859
7279
  font-weight: 700;
9860
7280
  }
9861
- h1 {
7281
+ .headline-h1 {
9862
7282
  font-size: 1.5rem;
9863
7283
  line-height: 1.75rem;
9864
7284
  }
9865
- h2 {
7285
+ .headline-h2 {
9866
7286
  font-size: 1.25rem;
9867
7287
  line-height: 1.75rem;
9868
7288
  }
9869
- h3 {
7289
+ .headline-h3 {
9870
7290
  font-size: 1.125rem;
9871
7291
  line-height: 1.5rem;
9872
7292
  }
@@ -10098,7 +7518,7 @@ const BMF = KoliBri.createTheme("bmf", {
10098
7518
  content: '*';
10099
7519
  padding-left: 0.125em;
10100
7520
  }
10101
- kol-input.error {
7521
+ kol-input.error:not(.hidden-error) {
10102
7522
  border-left: 3px solid var(--color-red);
10103
7523
  padding-left: 1em;
10104
7524
  }
@@ -10205,7 +7625,7 @@ const BMF = KoliBri.createTheme("bmf", {
10205
7625
  content: '*';
10206
7626
  padding-left: 0.125em;
10207
7627
  }
10208
- kol-input.error {
7628
+ kol-input.error:not(.hidden-error) {
10209
7629
  border-left: 3px solid var(--color-red);
10210
7630
  padding-left: 1em;
10211
7631
  }
@@ -10518,11 +7938,11 @@ const BMF = KoliBri.createTheme("bmf", {
10518
7938
  width: 100%;
10519
7939
  min-height: 44px;
10520
7940
  }
10521
- :host kol-input.default {
7941
+ :host kol-input.default:not(.hide-label) {
10522
7942
  grid-template-columns: 1.5rem auto;
10523
7943
  gap: 0.4em;
10524
7944
  }
10525
- :host kol-input.switch {
7945
+ :host kol-input.switch:not(.hide-label) {
10526
7946
  grid-template-columns: 3.5rem auto;
10527
7947
  gap: 0.4em;
10528
7948
  }
@@ -10548,7 +7968,7 @@ const BMF = KoliBri.createTheme("bmf", {
10548
7968
  padding-top: 0.25em;
10549
7969
  grid-column: span 2 / auto;
10550
7970
  }
10551
- :host kol-input.error {
7971
+ :host kol-input.error:not(.hidden-error) {
10552
7972
  border-left: 3px solid var(--color-red);
10553
7973
  padding-left: 1em;
10554
7974
  }
@@ -10567,7 +7987,7 @@ const BMF = KoliBri.createTheme("bmf", {
10567
7987
  border-color: var(--color-grey);
10568
7988
  border-width: 2px;
10569
7989
  border-style: solid;
10570
- border-radius: 5px; /* padding: 10px 14px; */
7990
+ border-radius: 5px;
10571
7991
  line-height: 24px;
10572
7992
  font-size: 1rem;
10573
7993
  }
@@ -10604,48 +8024,36 @@ const BMF = KoliBri.createTheme("bmf", {
10604
8024
  background-color: var(--color-midnight);
10605
8025
  border-color: var(--color-midnight);
10606
8026
  }
8027
+ :host kol-input.default .checkbox-container {
8028
+ justify-content: flex-start;
8029
+ }
8030
+ :host kol-input.default input[type='checkbox']:indeterminate {
8031
+ background-color: var(--color-midnight);
8032
+ border-color: var(--color-midnight);
8033
+ }
8034
+ :host kol-input.default .icon {
8035
+ color: var(--color-white);
8036
+ margin: -0.125rem 0 0 0.25rem; /* visually align */
8037
+ }
10607
8038
  :host kol-input.default input[type='checkbox'] {
10608
8039
  border-radius: var(--border-radius);
10609
8040
  height: calc(6 * var(--spacing));
10610
8041
  min-width: calc(6 * var(--spacing));
10611
8042
  width: calc(6 * var(--spacing));
10612
8043
  }
10613
- :host kol-input.default input[type='checkbox']:before {
10614
- border-radius: 1.5em;
10615
- background-color: transparent;
10616
- display: block;
10617
- height: calc(6 * var(--spacing));
10618
- position: relative;
10619
- width: calc(6 * var(--spacing));
10620
- }
10621
- :host kol-input.default input[type='checkbox']:checked:before {
10622
- border-right-width: 3px;
10623
- border-bottom-width: 3px;
10624
- left: calc(1.5 * var(--spacing) - 2px);
10625
- top: calc(2.85 * var(--spacing) - 2px);
10626
- transform: rotate(40deg) translate(-50%, -50%);
10627
- background-color: transparent;
10628
- border-width: 0px 3px 3px 0px;
10629
- border-color: white;
10630
- border-radius: 1px;
10631
- border-style: solid;
10632
- height: calc(3 * var(--spacing));
10633
- width: calc(1.5 * var(--spacing));
10634
- }
10635
- :host kol-input.default input[type='checkbox']:indeterminate {
10636
- --tw-bg-opacity: 1;
10637
- background-color: var(--color-midnight);
10638
- }
10639
- :host kol-input.default input[type='checkbox']:indeterminate:before {
10640
- background-color: var(--color-white);
10641
- height: 0.125rem;
10642
- top: 0.6rem;
10643
- left: 0.25rem;
10644
- width: calc(3 * var(--spacing));
10645
- transform: inherit;
10646
- }
10647
- :host kol-input.default input[type='checkbox']:checked:indeterminate:before {
10648
- border-width: 0px 1px 1px 0px;
8044
+ .default {
8045
+ .icon::part(icon) {
8046
+ font-family: 'Font Awesome 6 Free';
8047
+ font-weight: 900;
8048
+ }
8049
+
8050
+ &.checked .icon::part(icon)::before {
8051
+ content: '\\f00c';
8052
+ }
8053
+
8054
+ &.indeterminate .icon::part(icon)::before {
8055
+ content: '\\f068';
8056
+ }
10649
8057
  }
10650
8058
  :host kol-input.switch input[type='checkbox'] {
10651
8059
  min-width: 3.5em;
@@ -10654,13 +8062,9 @@ const BMF = KoliBri.createTheme("bmf", {
10654
8062
  border-width: 0;
10655
8063
  height: 1.5em;
10656
8064
  border-radius: 1.25em;
10657
- display: inline-block;
10658
8065
  position: relative;
10659
8066
  }
10660
8067
  :host kol-input.switch input[type='checkbox']:before {
10661
- -webkit-transition: 0.5s;
10662
- -moz-transition: 0.5s;
10663
- -ms-transition: 0.5s;
10664
8068
  transition: 0.5;
10665
8069
  width: 1.25em;
10666
8070
  height: 1.25em;
@@ -10674,9 +8078,6 @@ const BMF = KoliBri.createTheme("bmf", {
10674
8078
  background-color: var(--color-midnight);
10675
8079
  }
10676
8080
  :host kol-input.switch input[type='checkbox']:checked:before {
10677
- -webkit-transform: translateX(2em);
10678
- -moz-transform: translateX(2em);
10679
- -ms-transform: translateX(2em);
10680
8081
  transform: translateX(2em);
10681
8082
  --tw-bg-opacity: 1;
10682
8083
  }
@@ -10684,12 +8085,12 @@ const BMF = KoliBri.createTheme("bmf", {
10684
8085
  --tw-bg-opacity: 1;
10685
8086
  }
10686
8087
  :host kol-input.switch input[type='checkbox']:indeterminate:before {
10687
- -webkit-transform: translateX(1em);
10688
- -moz-transform: translateX(1em);
10689
- -ms-transform: translateX(1em);
10690
8088
  transform: translateX(1em);
10691
8089
  }
10692
8090
  .switch {
8091
+ & .checkbox-input-element {
8092
+ display: block;
8093
+ }
10693
8094
  & .icon {
10694
8095
  width: 1.25em;
10695
8096
  height: 1.25em;
@@ -10703,13 +8104,13 @@ const BMF = KoliBri.createTheme("bmf", {
10703
8104
  content: '\\2b';
10704
8105
  }
10705
8106
  }
10706
- &:has(input:checked) .icon {
8107
+ &.checked .icon {
10707
8108
  transform: translate(2em, -50%);
10708
8109
  &::part(icon)::before {
10709
8110
  content: '\\f00c';
10710
8111
  }
10711
8112
  }
10712
- &:has(input:indeterminate) .icon {
8113
+ &.indeterminate .icon {
10713
8114
  transform: translate(1em, -50%);
10714
8115
  &::part(icon)::before {
10715
8116
  content: '\\f068';
@@ -10744,12 +8145,23 @@ const BMF = KoliBri.createTheme("bmf", {
10744
8145
  min-width: 32px;
10745
8146
  place-content: center;
10746
8147
  }
8148
+ :host kol-input.button.hide-label > .input {
8149
+ border-top-right-radius: var(--border-radius);
8150
+ border-bottom-right-radius: var(--border-radius);
8151
+ }
10747
8152
  :host kol-input.button > .input > div {
10748
8153
  display: flex;
10749
8154
  }
10750
8155
  :host kol-input.button .icon {
10751
8156
  height: auto;
10752
8157
  }
8158
+ .button:focus-within {
8159
+ border-radius: var(--a11y-min-size);
8160
+ outline-color: var(--color-ocean);
8161
+ outline-offset: 2px;
8162
+ outline-style: solid;
8163
+ outline-width: 3px;
8164
+ }
10753
8165
  `,
10754
8166
  "KOL-INPUT-RADIO": css$4`
10755
8167
  /* INPUT */
@@ -11159,7 +8571,7 @@ const BMF = KoliBri.createTheme("bmf", {
11159
8571
  content: '*';
11160
8572
  padding-left: 0.125em;
11161
8573
  }
11162
- kol-input.error {
8574
+ kol-input.error:not(.hidden-error) {
11163
8575
  border-left: 3px solid var(--color-red);
11164
8576
  padding-left: 1em;
11165
8577
  }
@@ -19373,29 +16785,29 @@ const DEFAULT = KoliBri.createTheme("default", {
19373
16785
  }
19374
16786
  `,
19375
16787
  "KOL-HEADING": css$3`
19376
- h1,
19377
- h2,
19378
- h3,
19379
- h4,
19380
- h5,
19381
- h6 {
16788
+ .headline-h1,
16789
+ .headline-h2,
16790
+ .headline-h3,
16791
+ .headline-h4,
16792
+ .headline-h5,
16793
+ .headline-h6 {
19382
16794
  color: inherit;
19383
16795
  font-style: normal;
19384
16796
  }
19385
- h1,
19386
- h2,
19387
- h3 {
16797
+ .headline-h1,
16798
+ .headline-h2,
16799
+ .headline-h3 {
19388
16800
  font-weight: 700;
19389
16801
  }
19390
- h1 {
16802
+ .headline-h1 {
19391
16803
  font-size: 1.5rem;
19392
16804
  line-height: 1.75rem;
19393
16805
  }
19394
- h2 {
16806
+ .headline-h2 {
19395
16807
  font-size: 1.25rem;
19396
16808
  line-height: 1.75rem;
19397
16809
  }
19398
- h3 {
16810
+ .headline-h3 {
19399
16811
  font-size: 1.125rem;
19400
16812
  line-height: 1.5rem;
19401
16813
  }
@@ -19978,6 +17390,9 @@ const DEFAULT = KoliBri.createTheme("default", {
19978
17390
  :host kol-input.button {
19979
17391
  gap: 0.4rem 0;
19980
17392
  }
17393
+ .checkbox-container {
17394
+ justify-content: flex-start;
17395
+ }
19981
17396
  :host kol-input > div.input {
19982
17397
  display: inherit;
19983
17398
  min-height: var(--a11y-min-size);
@@ -20046,13 +17461,6 @@ const DEFAULT = KoliBri.createTheme("default", {
20046
17461
  cursor: pointer;
20047
17462
  transition: 0.5s;
20048
17463
  }
20049
- :host kol-input input[type='checkbox'].kol-disabled:before {
20050
- cursor: not-allowed;
20051
- }
20052
- :host kol-input input[type='checkbox']:before {
20053
- content: '';
20054
- cursor: pointer;
20055
- }
20056
17464
  :host kol-input input[type='checkbox']:checked {
20057
17465
  background-color: var(--color-primary);
20058
17466
  border-color: var(--color-primary);
@@ -20063,51 +17471,23 @@ const DEFAULT = KoliBri.createTheme("default", {
20063
17471
  min-width: calc(6 * 0.25rem);
20064
17472
  width: calc(6 * 0.25rem);
20065
17473
  }
20066
- :host kol-input.default input[type='checkbox']:before {
20067
- border-radius: 1.5em;
20068
- background-color: transparent;
20069
- display: block;
20070
- height: calc(6 * 0.25rem);
20071
- position: relative;
20072
- width: calc(6 * 0.25rem);
20073
- }
20074
- :host kol-input.default input[type='checkbox']:checked:before {
20075
- border-right-width: 3px;
20076
- border-bottom-width: 3px;
20077
- left: calc(1.5 * 0.25rem - 2px);
20078
- top: calc(2.85 * 0.25rem - 2px);
20079
- transform: rotate(40deg) translate(-50%, -50%);
20080
- background-color: transparent;
20081
- border-width: 0px 3px 3px 0px;
20082
- border-color: white;
20083
- border-radius: 1px;
20084
- border-style: solid;
20085
- height: calc(3 * 0.25rem);
20086
- width: calc(1.5 * 0.25rem);
20087
- }
20088
17474
  :host kol-input.default input[type='checkbox']:indeterminate {
20089
17475
  background-color: var(--color-primary);
20090
17476
  }
20091
- :host kol-input.default input[type='checkbox']:indeterminate:before {
20092
- background-color: var(--color-light);
20093
- height: 0.125rem;
20094
- top: 0.6rem;
20095
- left: 0.25rem;
20096
- width: calc(3 * 0.25rem);
20097
- transform: inherit;
20098
- }
20099
- :host kol-input.default input[type='checkbox']:checked:indeterminate:before {
20100
- border-width: 0px 1px 1px 0px;
17477
+ :host kol-input.default .icon {
17478
+ color: var(--color-light);
17479
+ margin-left: 0.25rem;
20101
17480
  }
17481
+
20102
17482
  :host kol-input.switch input[type='checkbox'] {
20103
- min-width: 3.5em;
20104
- width: 3.5em;
20105
17483
  background-color: var(--color-subtle);
17484
+ border-radius: 1.25em;
20106
17485
  border-width: 0;
17486
+ display: block;
20107
17487
  height: 1.5em;
20108
- border-radius: 1.25em;
20109
- display: inline-block;
17488
+ min-width: 3.5em;
20110
17489
  position: relative;
17490
+ width: 3.5em;
20111
17491
  }
20112
17492
  :host kol-input.switch input[type='checkbox']:before {
20113
17493
  width: 1.25em;
@@ -20134,17 +17514,24 @@ const DEFAULT = KoliBri.createTheme("default", {
20134
17514
  left: 2px;
20135
17515
  }
20136
17516
 
20137
- &:has(input:checked) .icon {
17517
+ &.checked .icon {
20138
17518
  transform: translate(2em, -50%);
20139
17519
  }
20140
17520
 
20141
- &:has(input:indeterminate) .icon {
17521
+ &.indeterminate .icon {
20142
17522
  transform: translate(1em, -50%);
20143
17523
  }
20144
17524
  }
20145
17525
  :host .disabled {
20146
17526
  opacity: 0.33;
20147
17527
  }
17528
+ .button:focus-within {
17529
+ border-radius: var(--border-radius);
17530
+ outline-color: var(--color-primary-variant);
17531
+ outline-offset: 2px;
17532
+ outline-style: solid;
17533
+ outline-width: calc(var(--border-width) * 2);
17534
+ }
20148
17535
  `,
20149
17536
  "KOL-INPUT-RADIO": css$3`
20150
17537
  label {
@@ -20866,27 +18253,27 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
20866
18253
  }
20867
18254
  `,
20868
18255
  "KOL-HEADING": css$2`
20869
- h1 {
18256
+ .headline-h1 {
20870
18257
  font-size: 2rem;
20871
18258
  line-height: 2.5rem;
20872
18259
  }
20873
- h2 {
18260
+ .headline-h2 {
20874
18261
  font-size: 1.75rem;
20875
18262
  line-height: 2rem;
20876
18263
  }
20877
- h3 {
18264
+ .headline-h3 {
20878
18265
  font-size: 1.5rem;
20879
18266
  line-height: 1.75rem;
20880
18267
  }
20881
- h4 {
18268
+ .headline-h4 {
20882
18269
  font-size: 1.25rem;
20883
18270
  line-height: 1.75rem;
20884
18271
  }
20885
- h5 {
18272
+ .headline-h5 {
20886
18273
  font-size: 1rem;
20887
18274
  line-height: 1.5rem;
20888
18275
  }
20889
- h6 {
18276
+ .headline-h6 {
20890
18277
  color: rgb(234, 0, 255);
20891
18278
  }
20892
18279
  `,
@@ -21361,6 +18748,9 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21361
18748
  }
21362
18749
  `,
21363
18750
  "KOL-INPUT-CHECKBOX": css$2`
18751
+ .checkbox-container {
18752
+ justify-content: flex-start;
18753
+ }
21364
18754
  input[type='checkbox'] {
21365
18755
  background-color: var(--color-white);
21366
18756
  border-width: 2px;
@@ -21389,12 +18779,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21389
18779
  background-color: var(--color-blue-130);
21390
18780
  border-color: var(--color-blue-130);
21391
18781
  }
21392
- input[type='checkbox']:checked::before {
21393
- border-color: var(--color-white);
21394
- }
21395
- input[type='checkbox']:indeterminate:hover::before {
21396
- background-color: var(--color-blue-130);
21397
- }
21398
18782
  .error input[type='checkbox'] {
21399
18783
  border-color: var(--color-red);
21400
18784
  }
@@ -21409,12 +18793,20 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21409
18793
  background-color: var(--color-red-1xx);
21410
18794
  border-color: var(--color-red-1xx);
21411
18795
  }
21412
- .error input[type='checkbox']:indeterminate:hover::before {
21413
- background-color: var(--color-red-1xx);
21414
- }
21415
18796
  .error.required label > span::after {
21416
18797
  color: var(--color-red);
21417
18798
  }
18799
+
18800
+ .default .icon {
18801
+ margin-left: 0.2rem;
18802
+ }
18803
+ .default.checked .icon {
18804
+ color: var(--color-white);
18805
+ }
18806
+
18807
+ .switch input[type='checkbox'] {
18808
+ display: block;
18809
+ }
21418
18810
  .switch input[type='checkbox']::before,
21419
18811
  .switch input[type='checkbox']:indeterminate::before {
21420
18812
  background-color: var(--color-grey-75);
@@ -21454,6 +18846,12 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21454
18846
  .hint {
21455
18847
  font-size: 0.875rem;
21456
18848
  }
18849
+ .button:focus-within {
18850
+ outline-color: var(--color-blue);
18851
+ outline-offset: 2px;
18852
+ outline-style: solid;
18853
+ outline-width: 2px;
18854
+ }
21457
18855
  `,
21458
18856
  "KOL-INPUT-COLOR": css$2`
21459
18857
  kol-input {
@@ -22450,35 +19848,35 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
22450
19848
  }
22451
19849
  `,
22452
19850
  "KOL-HEADING": css$2`
22453
- h1,
22454
- h2,
22455
- h3,
22456
- h4,
22457
- h5,
22458
- h6 {
19851
+ .headline-h1,
19852
+ .headline-h2,
19853
+ .headline-h3,
19854
+ .headline-h4,
19855
+ .headline-h5,
19856
+ .headline-h6 {
22459
19857
  font-weight: var(--font-weight-bold);
22460
19858
  }
22461
- h1 {
19859
+ .headline-h1 {
22462
19860
  font-size: 2.625rem;
22463
19861
  line-height: 3.25rem;
22464
19862
  }
22465
- h2 {
19863
+ .headline-h2 {
22466
19864
  font-size: 2.25rem;
22467
19865
  line-height: 2.75rem;
22468
19866
  }
22469
- h3 {
19867
+ .headline-h3 {
22470
19868
  font-size: 2rem;
22471
19869
  line-height: 2.5rem;
22472
19870
  }
22473
- h4 {
19871
+ .headline-h4 {
22474
19872
  font-size: 1.75rem;
22475
19873
  line-height: 2rem;
22476
19874
  }
22477
- h5 {
19875
+ .headline-h5 {
22478
19876
  font-size: 1.5rem;
22479
19877
  line-height: 1.75rem;
22480
19878
  }
22481
- h6 {
19879
+ .headline-h6 {
22482
19880
  font-size: 1.25rem;
22483
19881
  line-height: 1.75rem;
22484
19882
  }
@@ -23017,6 +20415,9 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23017
20415
  }
23018
20416
  `,
23019
20417
  "KOL-INPUT-CHECKBOX": css$2`
20418
+ .checkbox-container {
20419
+ justify-content: flex-start;
20420
+ }
23020
20421
  input[type='checkbox'] {
23021
20422
  background-color: var(--color-white);
23022
20423
  border-width: 2px;
@@ -23045,12 +20446,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23045
20446
  background-color: var(--color-blue-130);
23046
20447
  border-color: var(--color-blue-130);
23047
20448
  }
23048
- input[type='checkbox']:checked::before {
23049
- border-color: var(--color-white);
23050
- }
23051
- input[type='checkbox']:indeterminate:hover::before {
23052
- background-color: var(--color-blue-130);
23053
- }
23054
20449
  .error input[type='checkbox'] {
23055
20450
  border-color: var(--color-red);
23056
20451
  }
@@ -23065,12 +20460,19 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23065
20460
  background-color: var(--color-red-1xx);
23066
20461
  border-color: var(--color-red-1xx);
23067
20462
  }
23068
- .error input[type='checkbox']:indeterminate:hover::before {
23069
- background-color: var(--color-red-1xx);
23070
- }
23071
20463
  .error.required label > span::after {
23072
20464
  color: var(--color-red);
23073
20465
  }
20466
+ .default .icon {
20467
+ margin-left: 0.2rem;
20468
+ }
20469
+ .default.checked .icon {
20470
+ color: var(--color-white);
20471
+ }
20472
+
20473
+ .switch input[type='checkbox'] {
20474
+ display: block;
20475
+ }
23074
20476
  .switch input[type='checkbox']::before,
23075
20477
  .switch input[type='checkbox']:indeterminate::before {
23076
20478
  background-color: var(--color-grey-75);
@@ -23110,6 +20512,11 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23110
20512
  .hint {
23111
20513
  font-size: 0.875rem;
23112
20514
  }
20515
+ .button:focus-within {
20516
+ outline-color: var(--color-blue-130);
20517
+ outline-style: solid;
20518
+ outline-width: 2px;
20519
+ }
23113
20520
  `,
23114
20521
  "KOL-INPUT-COLOR": css$2`
23115
20522
  kol-input {
@@ -24681,42 +22088,42 @@ const ITZBund = KoliBri.createTheme("itzbund", {
24681
22088
  }
24682
22089
  `,
24683
22090
  "KOL-HEADING": css$1`
24684
- h1,
24685
- h2,
24686
- h3,
24687
- h4,
24688
- h5,
24689
- h6 {
22091
+ .headline-h1,
22092
+ .headline-h2,
22093
+ .headline-h3,
22094
+ .headline-h4,
22095
+ .headline-h5,
22096
+ .headline-h6 {
24690
22097
  line-height: 1em;
24691
22098
  margin: 0;
24692
22099
  padding: 0;
24693
22100
  }
24694
- h1 {
22101
+ .headline-h1 {
24695
22102
  font-family: var(--font-family-serif);
24696
22103
  font-size: 54px;
24697
22104
  font-weight: bold;
24698
22105
  }
24699
- h2 {
22106
+ .headline-h2 {
24700
22107
  font-family: var(--font-family-serif);
24701
22108
  font-size: 32px;
24702
22109
  font-weight: bold;
24703
22110
  }
24704
- h3 {
22111
+ .headline-h3 {
24705
22112
  font-family: var(--font-family-serif);
24706
22113
  font-size: 26px;
24707
22114
  font-weight: bold;
24708
22115
  }
24709
- h4 {
22116
+ .headline-h4 {
24710
22117
  font-family: var(--font-family-serif);
24711
22118
  font-size: 20px;
24712
22119
  font-weight: normal;
24713
22120
  }
24714
- h5 {
22121
+ .headline-h5 {
24715
22122
  font-family: var(--font-family-serif);
24716
22123
  font-size: 17px;
24717
22124
  font-weight: bold;
24718
22125
  }
24719
- h6 {
22126
+ .headline-h6 {
24720
22127
  font-family: var(--font-family-sans);
24721
22128
  font-size: 17px;
24722
22129
  font-weight: normal;
@@ -25194,9 +22601,8 @@ const ITZBund = KoliBri.createTheme("itzbund", {
25194
22601
  }
25195
22602
  `,
25196
22603
  "KOL-INPUT-CHECKBOX": css$1`
25197
- /* ALL INPUT, SELECT, TEXTAREA */
25198
- label {
25199
- cursor: pointer;
22604
+ .checkbox-container {
22605
+ justify-content: flex-start;
25200
22606
  }
25201
22607
  input {
25202
22608
  color: var(--default-letter);
@@ -25254,58 +22660,28 @@ const ITZBund = KoliBri.createTheme("itzbund", {
25254
22660
  cursor: pointer;
25255
22661
  transition: 0.5s;
25256
22662
  }
25257
- input[type='checkbox'].kol-disabled:before {
25258
- cursor: not-allowed;
25259
- }
25260
- input[type='checkbox']:before {
25261
- content: '';
25262
- cursor: pointer;
25263
- }
25264
22663
  input[type='checkbox']:checked {
25265
22664
  background-color: var(--color-petrol);
25266
22665
  border-color: var(--color-petrol);
25267
22666
  }
25268
22667
  .default input[type='checkbox'] {
25269
- /* border-radius: 0.25em; */
25270
22668
  height: calc(6 * 2 * var(--spacing));
25271
22669
  min-width: calc(6 * 2 * var(--spacing));
25272
22670
  width: calc(6 * 2 * var(--spacing));
25273
22671
  }
25274
- .default input[type='checkbox']:before {
25275
- /* border-radius: 0.25em; */
25276
- background-color: transparent;
25277
- display: block;
25278
- height: calc(6 * 2 * var(--spacing));
25279
- position: relative;
25280
- width: calc(6 * 2 * var(--spacing));
25281
- }
25282
- .default input[type='checkbox']:checked:before {
25283
- border-right-width: 3px;
25284
- border-bottom-width: 3px;
25285
- left: calc(1.5 * 2 * var(--spacing) - 2px);
25286
- top: calc(2.85 * 2 * var(--spacing) - 2px);
25287
- transform: rotate(40deg) translate(-50%, -50%);
25288
- background-color: transparent;
25289
- border-width: 0px 3px 3px 0px;
25290
- border-color: white;
25291
- border-radius: 1px;
25292
- border-style: solid;
25293
- height: calc(3 * 2 * var(--spacing));
25294
- width: calc(1.5 * 2 * var(--spacing));
22672
+
22673
+ .default .icon {
22674
+ margin-left: 0.25rem;
25295
22675
  }
25296
- .default input[type='checkbox']:indeterminate:before {
25297
- background-color: var(--kolibri-color-normal);
25298
- height: 0.375rem;
25299
- top: 0.45rem;
25300
- left: 0.15rem;
25301
- width: calc(4 * 2 * var(--spacing));
22676
+ .default.checked .icon {
22677
+ color: var(--color-weiss);
25302
22678
  }
22679
+
25303
22680
  .switch input[type='checkbox'] {
25304
- /* border-radius: 0.25em; */
22681
+ display: block;
25305
22682
  min-width: 3.2em;
25306
22683
  width: 3.2em;
25307
22684
  height: 1.7em;
25308
- display: inline-block;
25309
22685
  position: relative;
25310
22686
  }
25311
22687
  .switch input[type='checkbox']:before {
@@ -25322,28 +22698,19 @@ const ITZBund = KoliBri.createTheme("itzbund", {
25322
22698
  position: absolute;
25323
22699
  }
25324
22700
  .switch input[type='checkbox']:checked:before {
25325
- -webkit-transform: translateX(1.5em);
25326
- -moz-transform: translateX(1.5em);
25327
- -ms-transform: translateX(1.5em);
25328
22701
  transform: translateX(1.5em);
25329
22702
  background-color: white;
25330
22703
  }
25331
22704
  .switch input[type='checkbox']:indeterminate:before {
25332
- -webkit-transform: translateX(0.75em);
25333
- -moz-transform: translateX(0.75em);
25334
- -ms-transform: translateX(0.75em);
25335
22705
  transform: translateX(0.75em);
25336
22706
  background-color: var(--color-petrol);
25337
22707
  }
25338
- .switch:has(input:not(:checked), input:indeterminate) .icon {
22708
+ .switch:is(:not(.checked), .indeterminate) .icon {
25339
22709
  color: #fff;
25340
22710
  }
25341
22711
  .disabled {
25342
22712
  opacity: 0.33;
25343
22713
  }
25344
- .default kol-icon {
25345
- display: none;
25346
- }
25347
22714
  kol-input span.hint {
25348
22715
  grid-column: span 2;
25349
22716
  font-style: italic;
@@ -25352,6 +22719,13 @@ const ITZBund = KoliBri.createTheme("itzbund", {
25352
22719
  order: 3;
25353
22720
  padding: 0 var(--spacing);
25354
22721
  }
22722
+ .button:focus-within {
22723
+ border-radius: 2rem;
22724
+ outline-color: var(--color-achat) !important;
22725
+ outline-offset: 2px;
22726
+ outline-style: solid;
22727
+ outline-width: 3px;
22728
+ }
25355
22729
  `,
25356
22730
  "KOL-INPUT-RADIO": `/* INPUT */
25357
22731
  :host input:focus {
@@ -27427,7 +24801,15 @@ const MFM = KoliBri.createTheme("mfm", {
27427
24801
  }
27428
24802
  :host .disabled {
27429
24803
  opacity: 0.33;
27430
- }`,
24804
+ }
24805
+ .button:focus-within {
24806
+ border-radius: 0.25rem;
24807
+ outline-color: var(--color-ocean);
24808
+ outline-offset: 2px;
24809
+ outline-style: solid;
24810
+ outline-width: 3px;
24811
+ }
24812
+ `,
27431
24813
  "KOL-INPUT-RADIO": `/* INPUT */
27432
24814
  kol-input {
27433
24815
  display: grid;
@@ -35987,32 +33369,32 @@ const MAPZ = KoliBri.createTheme("mapz", {
35987
33369
  }
35988
33370
  `,
35989
33371
  "KOL-HEADING": css`
35990
- h1,
35991
- h2,
35992
- h3,
35993
- h4,
35994
- h5,
35995
- h6 {
33372
+ .headline-h1,
33373
+ .headline-h2,
33374
+ .headline-h3,
33375
+ .headline-h4,
33376
+ .headline-h5,
33377
+ .headline-h6 {
35996
33378
  line-height: 1.25em;
35997
33379
  margin: 0;
35998
33380
  padding: 0;
35999
33381
  }
36000
- h1 {
33382
+ .headline-h1 {
36001
33383
  font-size: 1.5rem !important;
36002
33384
  }
36003
- h2 {
33385
+ .headline-h2 {
36004
33386
  font-size: 1.4rem !important;
36005
33387
  }
36006
- h3 {
33388
+ .headline-h3 {
36007
33389
  font-size: 1.3rem !important;
36008
33390
  }
36009
- h4 {
33391
+ .headline-h4 {
36010
33392
  font-size: 1.2rem !important;
36011
33393
  }
36012
- h5 {
33394
+ .headline-h5 {
36013
33395
  font-size: 1.1rem !important;
36014
33396
  }
36015
- h6 {
33397
+ .headline-h6 {
36016
33398
  font-size: 1rem !important;
36017
33399
  }
36018
33400
  `,
@@ -36034,6 +33416,9 @@ const MAPZ = KoliBri.createTheme("mapz", {
36034
33416
  content: '*';
36035
33417
  padding-left: 0.125em;
36036
33418
  }
33419
+ .checkbox-container {
33420
+ justify-content: flex-start;
33421
+ }
36037
33422
  input:hover {
36038
33423
  border-color: var(--kolibri-color-primary);
36039
33424
  } /* NEU */
@@ -36074,13 +33459,6 @@ const MAPZ = KoliBri.createTheme("mapz", {
36074
33459
  cursor: pointer;
36075
33460
  transition: 0.5s;
36076
33461
  }
36077
- input[type='checkbox'].kol-disabled:before {
36078
- cursor: not-allowed;
36079
- }
36080
- input[type='checkbox']:before {
36081
- content: '';
36082
- cursor: pointer;
36083
- }
36084
33462
  input[type='checkbox']:checked {
36085
33463
  background-color: var(--kolibri-color-primary);
36086
33464
  border-color: var(--kolibri-color-primary);
@@ -36091,41 +33469,21 @@ const MAPZ = KoliBri.createTheme("mapz", {
36091
33469
  min-width: calc(6 * var(--kolibri-spacing));
36092
33470
  width: calc(6 * var(--kolibri-spacing));
36093
33471
  }
36094
- .default input[type='checkbox']:before {
36095
- border-radius: 0.25em;
36096
- background-color: transparent;
36097
- display: block;
36098
- height: calc(6 * var(--kolibri-spacing));
36099
- position: relative;
36100
- width: calc(6 * var(--kolibri-spacing));
33472
+ .default .icon {
33473
+ margin-left: 0.25rem;
36101
33474
  }
36102
- .default input[type='checkbox']:checked:before {
36103
- border-right-width: 3px;
36104
- border-bottom-width: 3px;
36105
- left: calc(1.5 * var(--kolibri-spacing) - 2px);
36106
- top: calc(2.85 * var(--kolibri-spacing) - 2px);
36107
- transform: rotate(40deg) translate(-50%, -50%);
36108
- background-color: transparent;
36109
- border-width: 0px 3px 3px 0px;
36110
- border-color: white;
36111
- border-radius: 1px;
36112
- border-style: solid;
36113
- height: calc(3 * var(--kolibri-spacing));
36114
- width: calc(1.5 * var(--kolibri-spacing));
33475
+ .default.checked .icon {
33476
+ color: #fff;
36115
33477
  }
36116
- .default input[type='checkbox']:indeterminate:before {
36117
- background-color: var(--kolibri-color-normal);
36118
- height: 0.375rem;
36119
- top: 0.45rem;
36120
- left: 0.15rem;
36121
- width: calc(4 * var(--kolibri-spacing));
33478
+ .default.indeterminate .icon {
33479
+ color: var(--kolibri-color-normal);
36122
33480
  }
36123
33481
  .switch input[type='checkbox'] {
33482
+ display: block; //
36124
33483
  min-width: 3.2em;
36125
33484
  width: 3.2em;
36126
33485
  height: 1.7em;
36127
33486
  border-radius: 0.25em;
36128
- display: inline-block;
36129
33487
  position: relative;
36130
33488
  }
36131
33489
  .switch input[type='checkbox']:before {
@@ -36155,12 +33513,19 @@ const MAPZ = KoliBri.createTheme("mapz", {
36155
33513
  transform: translateX(0.75em);
36156
33514
  background-color: var(--kolibri-color-primary);
36157
33515
  }
36158
- .switch:has(input:not(:checked), input:indeterminate) .icon {
33516
+ .switch:is(.checked, .indeterminate) .icon {
36159
33517
  color: #fff;
36160
33518
  }
36161
33519
  .disabled {
36162
33520
  opacity: 0.33;
36163
33521
  }
33522
+ .button:focus-within {
33523
+ border-radius: var(--kolibri-border-radius);
33524
+ outline-color: var(--kolibri-color-outline);
33525
+ outline-offset: 2px;
33526
+ outline-style: solid;
33527
+ outline-width: 3px;
33528
+ }
36164
33529
  `,
36165
33530
  "KOL-INPUT-RADIO": css`
36166
33531
  label {
@@ -50522,7 +47887,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
50522
47887
  --color-grau-80: hsl(0 0% 20%);
50523
47888
  --color-grau-70: hsl(0 0% 30%);
50524
47889
  --color-grau-60: hsl(0 0% 40%);
50525
- --color-grau-50: hsl(0 0% 50%);
47890
+ --color-grau-50: #8b8b8b;
50526
47891
  --color-grau-40: hsl(0 0% 60%);
50527
47892
  --color-grau-30: hsl(0 0% 70%);
50528
47893
  --color-grau-20: hsl(0 0% 80%);
@@ -50619,39 +47984,39 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
50619
47984
  }
50620
47985
  `,
50621
47986
  "KOL-HEADING": css`
50622
- h1,
50623
- h2,
50624
- h3,
50625
- h4,
50626
- h5,
50627
- h6 {
47987
+ .headline-h1,
47988
+ .headline-h2,
47989
+ .headline-h3,
47990
+ .headline-h4,
47991
+ .headline-h5,
47992
+ .headline-h6 {
50628
47993
  font-weight: var(--font-weight-bold);
50629
47994
  margin: 0;
50630
47995
  padding: 1rem 0;
50631
47996
  text-align: left;
50632
47997
  }
50633
- h1 {
47998
+ .headline-h1 {
50634
47999
  font-size: 2.5rem;
50635
48000
  line-height: 1.2;
50636
48001
  padding: 0 0 1rem 0;
50637
48002
  }
50638
- h2 {
48003
+ .headline-h2 {
50639
48004
  font-size: 2rem;
50640
48005
  line-height: 1.25;
50641
48006
  }
50642
- h3 {
48007
+ .headline-h3 {
50643
48008
  font-size: 1.75rem;
50644
48009
  line-height: 1.29;
50645
48010
  }
50646
- h4 {
48011
+ .headline-h4 {
50647
48012
  font-size: 1.5rem;
50648
48013
  line-height: 1.33;
50649
48014
  }
50650
- h5 {
48015
+ .headline-h5 {
50651
48016
  font-size: 1.25rem;
50652
48017
  line-height: 1.4;
50653
48018
  }
50654
- h6 {
48019
+ .headline-h6 {
50655
48020
  font-size: 1rem;
50656
48021
  line-height: 1.5;
50657
48022
  }
@@ -51272,12 +48637,15 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51272
48637
  :host {
51273
48638
  --spacing: 0.25rem;
51274
48639
  }
48640
+ .checkbox-container {
48641
+ justify-content: flex-start;
48642
+ }
51275
48643
  input {
51276
48644
  border-color: var(--color-neutral-dark);
51277
48645
  border-width: 2px;
51278
48646
  border-style: solid;
51279
48647
  }
51280
- label {
48648
+ .input-label {
51281
48649
  padding-left: 0.75rem;
51282
48650
  }
51283
48651
  kol-input:not(.disabled):hover label,
@@ -51290,10 +48658,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51290
48658
  :host kol-input:not(.disabled) :is(.input, label) {
51291
48659
  cursor: pointer;
51292
48660
  }
51293
- :host kol-input.disabled :is(.input, label),
51294
- :host kol-input.disabled input[type='checkbox']::before {
51295
- cursor: not-allowed;
51296
- }
51297
48661
  .required label > span::after {
51298
48662
  content: '*';
51299
48663
  padding-left: 0.125em;
@@ -51337,9 +48701,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51337
48701
  background-color: white;
51338
48702
  transition: 0.5s;
51339
48703
  }
51340
- input[type='checkbox']:before {
51341
- content: '';
51342
- }
51343
48704
  input[type='checkbox']:checked,
51344
48705
  input[type='checkbox']:indeterminate {
51345
48706
  background-color: var(--color-blau);
@@ -51351,44 +48712,19 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51351
48712
  min-width: calc(6 * var(--spacing));
51352
48713
  width: calc(6 * var(--spacing));
51353
48714
  }
51354
- .default input[type='checkbox']:before {
51355
- border-radius: 0.25em;
51356
- background-color: transparent;
51357
- display: block;
51358
- height: calc(6 * var(--spacing));
51359
- position: relative;
51360
- width: calc(6 * var(--spacing));
51361
- }
51362
- .default input[type='checkbox']:checked:before {
51363
- border-right-width: 3px;
51364
- border-bottom-width: 3px;
51365
- left: calc(1.5 * var(--spacing) - 2px);
51366
- top: calc(2.85 * var(--spacing) - 2px);
51367
- transform: rotate(40deg) translate(-50%, -50%);
51368
- background-color: transparent;
51369
- border-width: 0px 3px 3px 0px;
51370
- border-color: white;
51371
- border-radius: 1px;
51372
- border-style: solid;
51373
- height: calc(3 * var(--spacing));
51374
- width: calc(1.5 * var(--spacing));
51375
- }
51376
48715
  .default input[type='checkbox']:indeterminate {
51377
48716
  background-color: var(--color-blau);
51378
48717
  }
51379
- .default input[type='checkbox']:indeterminate:before {
51380
- background-color: white;
51381
- height: 0.25rem;
51382
- top: 0.5rem;
51383
- left: 0.25rem;
51384
- width: 0.75rem;
48718
+ .default .icon {
48719
+ color: #fff;
48720
+ margin-left: 0.25rem;
51385
48721
  }
51386
48722
  .switch input[type='checkbox'] {
48723
+ display: block;
51387
48724
  min-width: 3.2em;
51388
48725
  width: 3.2em;
51389
48726
  height: 1.7em;
51390
48727
  border-radius: 0.25em;
51391
- display: inline-block;
51392
48728
  position: relative;
51393
48729
  }
51394
48730
  .switch input[type='checkbox']:before {
@@ -51405,9 +48741,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51405
48741
  position: absolute;
51406
48742
  }
51407
48743
  .switch input[type='checkbox']:checked:before {
51408
- -webkit-transform: translateX(1.5em);
51409
- -moz-transform: translateX(1.5em);
51410
- -ms-transform: translateX(1.5em);
51411
48744
  transform: translateX(1.5em);
51412
48745
  background-color: white;
51413
48746
  }
@@ -51415,18 +48748,22 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51415
48748
  background-color: var(--color-blau);
51416
48749
  }
51417
48750
  .switch input[type='checkbox']:indeterminate:before {
51418
- -webkit-transform: translateX(0.75em);
51419
- -moz-transform: translateX(0.75em);
51420
- -ms-transform: translateX(0.75em);
51421
48751
  transform: translateX(0.75em);
51422
48752
  background-color: white;
51423
48753
  }
51424
- .switch:has(input:not(:checked, :indeterminate)) .icon {
48754
+ .switch:not(.checked):not(.indeterminate) .icon {
51425
48755
  color: #fff;
51426
48756
  }
51427
48757
  .disabled {
51428
48758
  opacity: 0.33;
51429
48759
  }
48760
+ .button:focus-within {
48761
+ border-radius: var(--border-radius);
48762
+ outline-color: var(--color-blau-dark);
48763
+ outline-offset: 0.125rem;
48764
+ outline-style: solid;
48765
+ outline-width: 0.125rem;
48766
+ }
51430
48767
  `,
51431
48768
  "KOL-INPUT-RADIO": css`
51432
48769
  /* ALL INPUT, SELECT, TEXTAREA */
@@ -51442,12 +48779,12 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51442
48779
  border-width: 2px;
51443
48780
  border-style: solid;
51444
48781
  }
51445
- kol-input:has(input:disabled) input,
51446
- kol-input:has(input:disabled) label {
48782
+ kol-input.disabled input,
48783
+ kol-input.disabled label {
51447
48784
  cursor: not-allowed !important;
51448
48785
  opacity: 0.5;
51449
48786
  }
51450
- kol-input:hover:has(input:not(:disabled)) label,
48787
+ kol-input:hover:not(.disabled) label,
51451
48788
  kol-input:focus-within {
51452
48789
  text-decoration: underline;
51453
48790
  }
@@ -59426,6 +56763,9 @@ const checkboxStyles = css`
59426
56763
  content: '*';
59427
56764
  padding-left: 0.125em;
59428
56765
  }
56766
+ .checkbox-container {
56767
+ justify-content: flex-start;
56768
+ }
59429
56769
  .input {
59430
56770
  display: inline-flex;
59431
56771
  }
@@ -59476,44 +56816,24 @@ const checkboxStyles = css`
59476
56816
  border: 2px solid var(--color-neutral-dark);
59477
56817
  height: calc(6 * var(--spacing));
59478
56818
  width: calc(6 * var(--spacing));
59479
- &::before {
59480
- display: block;
59481
- height: calc(6 * var(--spacing));
59482
- width: calc(6 * var(--spacing));
59483
- }
59484
- &:checked::before {
59485
- left: calc(1.5 * var(--spacing) - 2px);
59486
- top: calc(2.85 * var(--spacing) - 2px);
59487
- transform: rotate(40deg) translate(-50%, -50%);
59488
- border-width: 0 3px 3px 0;
59489
- border-color: var(--color-blau);
59490
- border-radius: 1px;
59491
- border-style: solid;
59492
- height: calc(3 * var(--spacing));
59493
- width: calc(1.5 * var(--spacing));
59494
- }
59495
- &:indeterminate::before {
59496
- background-color: var(--color-blau);
59497
- height: 0.6rem;
59498
- left: 0.325rem;
59499
- top: 0.325rem;
59500
- width: 0.6rem;
59501
- }
59502
56819
  }
59503
56820
  kol-input.default:not(.disabled):hover input,
59504
56821
  kol-input.default:focus-within input {
59505
56822
  border-color: var(--color-neutral-dark-correct);
59506
56823
  }
56824
+ .default .icon {
56825
+ margin-left: 0.25rem;
56826
+ }
59507
56827
 
59508
56828
  /* SWITCH */
59509
56829
  kol-input.switch {
59510
56830
  grid-template-columns: calc(13 * var(--spacing)) auto;
59511
56831
  }
59512
56832
  .switch input[type='checkbox'] {
56833
+ display: block;
59513
56834
  background: var(--color-grau-50);
59514
56835
  border-color: transparent;
59515
56836
  border-radius: var(--a11y-min-size);
59516
- display: inline-block;
59517
56837
  height: 1.7em;
59518
56838
  position: relative;
59519
56839
  transition: outline-offset 0.25s linear;
@@ -59550,14 +56870,19 @@ const checkboxStyles = css`
59550
56870
  font-weight: 700;
59551
56871
  }
59552
56872
  }
59553
- .switch:has(input[type='checkbox']:not(:checked, :indeterminate)) .icon {
59554
- opacity: 0; /* Avoid display: none because it breaks the transform-animation */
56873
+ .switch:not(.checked, .indeterminate) .icon {
56874
+ opacity: 0; /* Avoid display: none because it breaks the 'transform' animation */
59555
56875
  }
59556
56876
 
59557
56877
  /* BUTTON */
59558
56878
  kol-input.button {
59559
56879
  grid-template-areas: 'input label' 'error error' 'hint hint';
59560
56880
  }
56881
+
56882
+ .button:focus-within {
56883
+ outline: 0.125rem solid var(--color-blau);
56884
+ outline-offset: 0.125rem;
56885
+ }
59561
56886
  `;
59562
56887
 
59563
56888
  const detailsStyles = css`
@@ -59610,12 +56935,12 @@ const radioStyles = css`
59610
56935
  border-width: 2px;
59611
56936
  border-style: solid;
59612
56937
  }
59613
- kol-input:has(input:disabled) input,
59614
- kol-input:has(input:disabled) label {
56938
+ kol-input.disabled input,
56939
+ kol-input.disabled label {
59615
56940
  cursor: not-allowed !important;
59616
56941
  opacity: 0.5;
59617
56942
  }
59618
- kol-input:hover:has(input:not(:disabled)) label,
56943
+ kol-input:hover:not(.disabled) label,
59619
56944
  kol-input:focus-within {
59620
56945
  text-decoration: underline;
59621
56946
  }
@@ -59857,39 +57182,39 @@ const ZOLLv3 = KoliBri.createTheme("zoll-v3", {
59857
57182
  }
59858
57183
  `,
59859
57184
  "KOL-HEADING": css`
59860
- h1,
59861
- h2,
59862
- h3,
59863
- h4,
59864
- h5,
59865
- h6 {
57185
+ .headline-h1,
57186
+ .headline-h2,
57187
+ .headline-h3,
57188
+ .headline-h4,
57189
+ .headline-h5,
57190
+ .headline-h6 {
59866
57191
  font-weight: var(--font-weight-bold);
59867
57192
  margin: 0;
59868
57193
  padding: 1rem 0;
59869
57194
  text-align: left;
59870
57195
  }
59871
- h1 {
57196
+ .headline-h1 {
59872
57197
  font-size: 2.5rem;
59873
57198
  line-height: 1.2;
59874
57199
  padding: 0 0 1rem 0;
59875
57200
  }
59876
- h2 {
57201
+ .headline-h2 {
59877
57202
  font-size: 2rem;
59878
57203
  line-height: 1.25;
59879
57204
  }
59880
- h3 {
57205
+ .headline-h3 {
59881
57206
  font-size: 1.75rem;
59882
57207
  line-height: 1.29;
59883
57208
  }
59884
- h4 {
57209
+ .headline-h4 {
59885
57210
  font-size: 1.5rem;
59886
57211
  line-height: 1.33;
59887
57212
  }
59888
- h5 {
57213
+ .headline-h5 {
59889
57214
  font-size: 1.25rem;
59890
57215
  line-height: 1.4;
59891
57216
  }
59892
- h6 {
57217
+ .headline-h6 {
59893
57218
  font-size: 1rem;
59894
57219
  line-height: 1.5;
59895
57220
  }
@@ -67614,4 +64939,4 @@ const DE = KoliBri.createTranslation("de", {});
67614
64939
 
67615
64940
  const EN = KoliBri.createTranslation("en", {});
67616
64941
 
67617
- export { BAMF, BMF, BZSt, DE, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, EN, ITZBund, MAPZ, MFM, ZOLLv2, ZOLLv3 };
64942
+ export { BAMF, BMF, BZStv1, DE, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, EN, ITZBund, MAPZ, MFM, ZOLLv2, ZOLLv3 };