@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.cjs CHANGED
@@ -4334,10 +4334,10 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
4334
4334
  height: 1.25em;
4335
4335
  left: 2px;
4336
4336
  }
4337
- &:has(input:checked) .icon {
4337
+ &.checked .icon {
4338
4338
  transform: translate(2em, -50%);
4339
4339
  }
4340
- &:has(input:indeterminate) .icon {
4340
+ &.indeterminate .icon {
4341
4341
  transform: translate(1em, -50%);
4342
4342
  }
4343
4343
  }
@@ -6048,2715 +6048,118 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
6048
6048
  }`
6049
6049
  });
6050
6050
 
6051
- const css$5 = (input) => input.join(``);
6051
+ var css_248z$A = "@layer kol-theme-component {\n .accordion {\n display: grid;\n background: var(--color-white);\n }\n .accordion-heading {\n border: 1px solid var(--color-primary-60);\n font-size: 1.3125rem; /* h3 font-size */\n }\n .headline {\n margin: 0;\n font-weight: normal;\n }\n .accordion-button .button {\n padding: 0 2rem;\n }\n .content {\n padding: 2rem 2rem 2.5rem;\n }\n}";
6052
6052
 
6053
- const BZSt = KoliBri.createTheme("bzst", {
6054
- GLOBAL: css$5`
6055
- /* NOTE: Alle ':root' CSS properties sollten in KoliBri zu ':host' kopiert werden und umgekehrt. Damit vereinheitlicht man alle Variablen auf beiden Seiten und kann diese dann individuell nutzen.*/ /* colors */
6056
- :root,
6057
- :host {
6058
- /* token */
6059
- --color-bleached-silk: #f2f2f2;
6060
- --color-carbon: #333;
6061
- --color-chilled-lemonade: #ffe695;
6062
- --color-green: #4d7f6f;
6063
- --color-green-light: #a7c0b8;
6064
- --color-green-dark: #23614e;
6065
- --color-heroic-blue: #126dff;
6066
- --color-mercury: #ebebeb;
6067
- --color-red-epiphyllum: #d00000;
6068
- --color-speedwell: #595f73;
6069
- --color-tropic-sea: #007194;
6070
- --color-white: #fff; /* template */ /* general */
6071
- --colorDark: var(--color-carbon);
6072
- --colorLight: var(--color-white); /* primary color */
6073
- --colorPrimary: var(--color-green-dark);
6074
- --colorPrimaryFront: var(--color-white);
6075
- --colorPrimarySuccess: var(--color-green);
6076
- --colorPrimarySuccessFront: var(--color-white);
6077
- --colorPrimaryActive: var(--color-green-light);
6078
- --colorPrimaryActiveFront: var(--color-carbon); /* secondary color */
6079
- --colorSecondary: var(--color-white);
6080
- --colorSecondaryFront: var(--color-carbon);
6081
- --colorSecondarySuccess: var(--color-bleached-silk);
6082
- --colorSecondarySuccessFront: var(--color-carbon);
6083
- --colorSecondaryActive: var(--color-mercury);
6084
- --colorSecondaryActiveFront: var(--color-carbon); /* text */
6085
- --colorText: var(--color-carbon);
6086
- --colorTextBg: var(--color-white);
6087
- --colorTextLight: var(--color-white);
6088
- --colorTextLightBg: var(--color-carbon);
6089
- --colorTextDisabled: var(--color-speedwell);
6090
- --colorTextDisabledBg: var(--color-mercury);
6091
- --colorTextActive: var(--color-green-dark);
6092
- --colorTextActiveBg: var(--color-white); /* signal */
6093
- --colorSignal: var(--color-tropic-sea);
6094
- --colorSignalFront: var(--color-white); /* colorSignalFocus hat keine Frontfarbe */
6095
- --colorSignalFocus: var(--color-heroic-blue);
6096
- --colorSignalSuccess: var(--color-green);
6097
- --colorSignalSuccessFront: var(--color-white);
6098
- --colorSignalWarn: var(--color-chilled-lemonade);
6099
- --colorSignalWarnFront: var(--color-carbon);
6100
- --colorSignalError: var(--color-red-epiphyllum);
6101
- --colorSignalErrorFront: var(--color-white); /* disabled */
6102
- --colorDisabled: var(--color-mercury);
6103
- } /* font, headline, text */
6104
- :root,
6105
- :host {
6106
- /* token */
6107
- --font-family: 'BundesSans Web', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
6108
- 'Helvetica Neue', sans-serif; /* Basis-Größe: html, rem */
6109
- --font-size: 100%;
6110
- --line-height: 1.6875rem; /* template */ /* h1 */
6111
- --headline1FontSize: 2.5rem;
6112
- --headline1LineHeight: 2.8125rem; /* h2 */
6113
- --headline2FontSize: 2rem;
6114
- --headline2LineHeight: 2.5rem; /* h3 */
6115
- --headline3FontSize: 1.3125rem;
6116
- --headline3LineHeight: 1.6875rem; /* h4 */
6117
- --headline4FontSize: 1rem;
6118
- --headline4LineHeight: 1.6875rem; /* text */
6119
- --textFont: var(--font-family);
6120
- --textFontColor: var(--colorText);
6121
- --textFontSerif: 'BundesSerif Web', var(--textFont);
6122
- --textFontSize: 1rem;
6123
- --textFontLineHeight: 1.6875rem;
6124
- --textFontWeight: normal;
6125
- } /* Abstände */
6126
- :root,
6127
- :host {
6128
- /* template */
6129
- --gap: 2rem;
6130
- --gapDouble: calc(var(--gap) * 2);
6131
- --gapSmall: 1.25rem; /* TODO: benötigt nur außerhalb KoliBri Komponenten? */
6132
- --gapSmallest: 0.625rem;
6133
- --gapLarge: 2.5rem;
6134
- } /* formular */
6135
- :root,
6136
- :host {
6137
- /* template */
6138
- --formBorderWidthAndStyle: 1px solid; /* TODO: eigentlich --color-green sein, aber im Styleguide ist der Wert: #23614E */
6139
- --formBorder: var(--formBorderWidthAndStyle) var(--colorPrimarySuccess);
6140
- --formBorderHover: var(--formBorderWidthAndStyle) var(--colorPrimaryActive);
6141
- --formBorderDisabled: var(--formBorderWidthAndStyle) var(--colorDisabled);
6142
- --formBorderInvalid: var(--formBorderWidthAndStyle) var(--colorSignalError);
6143
- --focusOutline: var(--colorSignalFocus) solid 2px;
6144
- --formFieldBackground: var(--colorLight); /*Select option */
6145
- --formFieldBackgroundHover: var(--colorPrimary); /* Select options */
6146
- --formFieldBackgroundEven: var(--formFieldBackground); /* Select options */
6147
- --formFieldBackgroundOdd: var(--colorSecondaryActive);
6148
- --formFieldBackgroundDisabled: var(--colorSecondarySuccess);
6149
- --formFieldTextColorDisabled: var(--colorTextDisabled);
6150
- } /* ********************************* */ /* ********************************* */ /* ********************************* */ /* ********************************* */
6151
- :host {
6152
- /* Primärfarbe und Abstufungen */
6153
- --color-gruen-dunkel: var(--colorPrimary);
6154
- --color-gruen: var(--colorPrimarySuccess);
6155
- --color-gruen-hell: var(--colorPrimaryActive); /* Sekundärfarben */
6156
- --color-weiss: var(--colorSecondary);
6157
- --color-grau-dunkel: var(--colorSecondaryFront);
6158
- --color-grau-hell: var(--colorSecondaryActive);
6159
- --color-grau-weiss: var(--colorSecondarySuccess); /* Textfarben */
6160
- --color-graublau: var(--colorTextDisabled); /* Signalfarben */
6161
- --color-blau: var(--colorSignalFocus);
6162
- --color-blau-dunkel: var(--colorSignal);
6163
- --color-gelb: var(--colorSignalWarn);
6164
- --color-rot: var(--colorSignalError);
6165
- --color-disabled: var(--colorTextDisabled);
6166
- --text-size: var(--textFontSize);
6167
- --color-focus: var(--color-blau);
6168
- --spacing: 4px;
6169
- --color-text: var(--color-grau-dunkel);
6170
- }
6171
- :host {
6172
- color: var(--color-black);
6173
- font-family: var(--font-family);
6174
- }
6175
- :host * {
6176
- box-sizing: border-box;
6177
- }
6178
- h1,
6179
- h2,
6180
- h3,
6181
- h4,
6182
- h5,
6183
- h6 {
6184
- font-family: var(--textFontSerif);
6185
- }
6186
- h1,
6187
- h2 {
6188
- font-weight: var(--textFontWeight);
6189
- }
6190
- h1 {
6191
- font-size: var(--headline1FontSize);
6192
- line-height: var(--headline1LineHeight);
6193
- }
6194
- h2 {
6195
- font-size: var(--headline2FontSize);
6196
- line-height: var(--headline2LineHeight);
6197
- }
6198
- h3 {
6199
- font-size: var(--headline3FontSize);
6200
- line-height: var(--headline3LineHeight);
6201
- }
6202
- h4,
6203
- h5,
6204
- h6 {
6205
- font-size: var(--headline4FontSize);
6206
- line-height: var(--headline4LineHeight);
6207
- }
6208
- a,
6209
- button,
6210
- input,
6211
- option,
6212
- select,
6213
- textarea {
6214
- hyphens: auto;
6215
- letter-spacing: inherit;
6216
- } /* a,button,caption,input,option,select,summary,table,textarea {font-size: 1rem;} */
6217
- summary {
6218
- hyphens: auto;
6219
- letter-spacing: inherit;
6220
- }
6221
- *[tabindex]:focus,
6222
- kol-input:not(.checkbox, .radio) .input:focus-within,
6223
- kol-input:is(.checkbox, .radio) input:focus,
6224
- summary:focus {
6225
- outline: var(--focusOutline);
6226
- outline-offset: 2px;
6227
- transition: outline-offset 0.2s linear;
6228
- }
6229
- @keyframes spin {
6230
- 0% {
6231
- transform: rotate(0deg);
6232
- }
6233
- 100% {
6234
- transform: rotate(360deg);
6235
- }
6236
- }
6237
- kol-tooltip .area {
6238
- background-color: var(--colorDark);
6239
- color: var(--colorLight);
6240
- }
6241
- kol-tooltip kol-span-wc {
6242
- line-height: 1.5em;
6243
- padding: 0.5rem 0.75rem;
6244
- }
6245
- kol-span-wc,
6246
- kol-span-wc > span {
6247
- gap: 0.5em;
6248
- }
6249
- kol-span-wc,
6250
- kol-span-wc > span {
6251
- gap: 0.3em;
6252
- }
6253
- `,
6254
- "KOL-BUTTON": css$5`
6255
- :host {
6256
- --background-color: var(--color-gruen-dunkel);
6257
- --border-color: var(--color-gruen-dunkel);
6258
- --border-size: 1px;
6259
- --min-size: 2.75rem;
6260
- display: inline-block;
6261
- }
6262
- :is(button, a) {
6263
- outline: none;
6264
- &::before {
6265
- /* Render zero-width character as first element to set the baseline correctly. */
6266
- content: '\\200B';
6267
- }
6268
- }
6269
- :is(button, a) > kol-span-wc {
6270
- border-width: var(--border-size);
6271
- border-style: solid;
6272
- min-width: var(--min-size);
6273
- min-height: var(--min-size);
6274
- display: grid;
6275
- gap: 0.25em;
6276
- line-height: 1.5;
6277
- font-family: var(--font-family);
6278
- cursor: pointer;
6279
- font-size: var(--text-size);
6280
- align-items: center;
6281
- padding: 0.5rem 0.875rem !important;
6282
- justify-content: center;
6283
- font-style: normal;
6284
- text-align: center;
6285
- text-transform: uppercase;
6286
- width: inherit;
6287
- transition-duration: 0.5s;
6288
- transition-property: background-color, color, border-color;
6289
- }
6290
- :is(button, a):hover:enabled > kol-span-wc {
6291
- text-decoration: underline;
6292
- }
6293
- :is(button, a):focus > kol-span-wc {
6294
- outline: var(--color-focus) solid 2px;
6295
- }
6296
- .primary :is(button, a) > kol-span-wc,
6297
- .primary :is(button, a):active > kol-span-wc,
6298
- .primary :is(button, a):hover > kol-span-wc {
6299
- background-color: var(--background-color);
6300
- border-color: var(--border-color);
6301
- color: var(--color-weiss);
6302
- }
6303
- .secondary :is(button, a) > kol-span-wc,
6304
- .danger :is(button, a) > kol-span-wc,
6305
- .normal :is(button, a) > kol-span-wc,
6306
- .ghost :is(button, a) > kol-span-wc {
6307
- background-color: var(--color-weiss);
6308
- border-color: var(--color-gruen-hell);
6309
- color: var(--color-grau-dunkel);
6310
- }
6311
- .ghost :is(button, a) > kol-span-wc {
6312
- background-color: transparent;
6313
- color: inherit;
6314
- border: calc(var(--border-size) * 2) solid transparent;
6315
- }
6316
- .secondary :is(button, a):active > kol-span-wc,
6317
- .secondary :is(button, a):hover > kol-span-wc {
6318
- background-color: var(--background-color);
6319
- border-color: var(--background-color);
6320
- border-width: var(--border-size);
6321
- color: var(--color-weiss);
6322
- }
6323
- :is(button, a):disabled > kol-span-wc,
6324
- :is(button, a):disabled:hover > kol-span-wc {
6325
- background-color: var(--color-weiss);
6326
- border-color: var(--color-grau-hell);
6327
- color: var(--color-disabled);
6328
- cursor: not-allowed;
6329
- }
6330
- `,
6331
- "KOL-INPUT-TEXT": css$5`
6332
- kol-input {
6333
- gap: 0.4em;
6334
- }
6335
- kol-input .error {
6336
- order: 3;
6337
- }
6338
- kol-input label {
6339
- font-weight: 700;
6340
- order: 1;
6341
- }
6342
- kol-input .input {
6343
- order: 2;
6344
- }
6345
- kol-input .hint {
6346
- order: 4;
6347
- font-size: 0.875em;
6348
- font-style: italic;
6349
- }
6350
- input {
6351
- border: none;
6352
- }
6353
- .input {
6354
- border-color: var(--color-grey);
6355
- border-style: solid;
6356
- border-width: 1px;
6357
- padding: 0 0.5em;
6358
- }
6359
- .input > kol-icon {
6360
- width: 1.5em;
6361
- }
6362
- .input > input:first-child {
6363
- padding-left: 0.375em;
6364
- }
6365
- .input > input:last-child {
6366
- padding-right: 0.375em;
6367
- }
6368
- .input:hover {
6369
- border-color: var(--color-gruen-hell);
6370
- }
6371
- input:not([type='color']):read-only,
6372
- input:disabled {
6373
- cursor: not-allowed;
6374
- }
6375
- .required label > span::after {
6376
- content: '*';
6377
- padding-left: 0.125em;
6378
- }
6379
- kol-input.error {
6380
- border-left: 3px solid var(--color-rot);
6381
- padding-left: 1em;
6382
- }
6383
- kol-input.error .input:focus-within {
6384
- outline-color: var(--color-rot) !important;
6385
- }
6386
- kol-input.error kol-alert.error {
6387
- color: var(--color-rot);
6388
- font-weight: 700;
6389
- }
6390
- .disabled {
6391
- opacity: 0.33;
6392
- }
6393
- label {
6394
- color: var(--color-text);
6395
- line-height: 1.5;
6396
- }
6397
- .input {
6398
- font-size: var(--text-size);
6399
- line-height: 1.5;
6400
- color: var(--colorText);
6401
- border-color: var(--color-gruen);
6402
- border-style: solid;
6403
- width: 100%;
6404
- }
6405
- input:not([type='range']) {
6406
- height: 2.75em;
6407
- }
6408
- input::placeholder {
6409
- color: var(--color-grau-dunkel);
6410
- }
6411
- .required label > span::after {
6412
- content: '*';
6413
- padding-left: 0.125em;
6414
- }
6415
- `,
6416
- "KOL-INPUT-PASSWORD": css$5`
6417
- kol-input {
6418
- display: grid;
6419
- padding: 0;
6420
- margin: 0;
6421
- }
6422
- input:focus,
6423
- input:hover,
6424
- select:focus,
6425
- select:hover,
6426
- textarea:focus,
6427
- textarea:hover {
6428
- border-color: black;
6429
- }
6430
- kol-input > label {
6431
- order: 1;
6432
- margin-bottom: 0.25em;
6433
- }
6434
- kol-input > label > span {
6435
- color: black;
6436
- font-size: 0.875rem;
6437
- line-height: 1.5rem;
6438
- }
6439
- kol-input > div.input {
6440
- background-color: white;
6441
- display: block;
6442
- order: 2;
6443
- }
6444
- kol-input > kol-alert.error {
6445
- margin-top: 0.25em;
6446
- order: 3;
6447
- }
6448
- input,
6449
- select,
6450
- textarea {
6451
- font-family: var(--font-family);
6452
- background-color: transparent;
6453
- box-sizing: border-box;
6454
- font-size: 1rem;
6455
- display: inline-flex;
6456
- line-height: 1.5em;
6457
- color: black;
6458
- border-color: var(--color-grau-dunkel);
6459
- border-width: 1px;
6460
- border-style: solid;
6461
- padding: 0.5em 0.75em;
6462
- overflow: hidden;
6463
- width: 100%;
6464
- }
6465
- input:not([type='range']),
6466
- select:not([multiple]) {
6467
- height: 2.75em;
6468
- }
6469
- textarea {
6470
- display: inherit;
6471
- }
6472
- input::placeholder {
6473
- color: var(--color-grau-dunkel);
6474
- }
6475
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
6476
- cursor: not-allowed;
6477
- }
6478
- .required label > span::after {
6479
- content: '*';
6480
- padding-left: 0.125em;
6481
- }
6482
- .icons {
6483
- display: flex;
6484
- justify-content: space-between;
6485
- height: 0;
6486
- }
6487
- .icons > * {
6488
- margin: 0.75em;
6489
- }
6490
- .icon-left input,
6491
- .icon-left select {
6492
- padding-left: 2em;
6493
- }
6494
- .icon-right input,
6495
- .icon-right select {
6496
- padding-right: 2em;
6497
- }
6498
- kol-button-wc {
6499
- position: relative;
6500
- float: right;
6501
- z-index: 1000;
6502
- margin-top: -33px;
6503
- }
6504
- kol-button-wc button {
6505
- border: 1px solid var(--color-grau-dunkel);
6506
- box-sizing: border-box;
6507
- background-color: transparent;
6508
- cursor: pointer;
6509
- }
6510
- .icon-right kol-button-wc {
6511
- margin-right: 2.5em;
6512
- }
6513
- .disabled {
6514
- opacity: 0.33;
6515
- }
6516
- select[multiple],
6517
- textarea {
6518
- overflow: auto;
6519
- }
6520
- textarea {
6521
- display: block;
6522
- }
6523
- select option {
6524
- margin: 1px 0;
6525
- padding: 0.5em;
6526
- cursor: pointer;
6527
- }
6528
- select option:disabled {
6529
- cursor: not-allowed;
6530
- }
6531
- option:active:not(:disabled),
6532
- option:checked:not(:disabled),
6533
- option:focus:not(:disabled),
6534
- option:hover:not(:disabled) {
6535
- color: white;
6536
- }
6537
- `,
6538
- "KOL-INPUT-NUMBER": css$5`
6539
- kol-input {
6540
- display: grid;
6541
- padding: 0;
6542
- margin: 0;
6543
- }
6544
- input:focus,
6545
- input:hover,
6546
- select:focus,
6547
- select:hover,
6548
- textarea:focus,
6549
- textarea:hover {
6550
- border-color: black;
6551
- }
6552
- input:focus-within,
6553
- select:focus-within,
6554
- textarea:focus-within {
6555
- outline: var(--color-focus) solid 2px;
6556
- }
6557
- kol-input label {
6558
- font-weight: 700;
6559
- order: 1;
6560
- margin-bottom: var(--gapSmallest);
6561
- }
6562
- kol-input label > span {
6563
- color: black;
6564
- font-size: 0.875rem;
6565
- line-height: 1.5rem;
6566
- }
6567
- kol-input > div.input {
6568
- background-color: white;
6569
- display: block;
6570
- order: 2;
6571
- }
6572
- kol-input > kol-alert.error {
6573
- margin-top: 0.25em;
6574
- order: 3;
6575
- }
6576
- input,
6577
- select,
6578
- textarea {
6579
- font-family: var(--textFont);
6580
- background-color: transparent;
6581
- box-sizing: border-box;
6582
- font-size: var(--textFontSize);
6583
- display: inline-flex;
6584
- line-height: 1.5;
6585
- color: black;
6586
- border-color: var(--color-gruen);
6587
- border-width: 1px;
6588
- border-style: solid;
6589
- padding: 0.5em;
6590
- overflow: hidden;
6591
- width: 100%;
6592
- }
6593
- input:not([type='range']),
6594
- select:not([multiple]) {
6595
- height: 2.75em;
6596
- }
6597
- textarea {
6598
- display: inherit;
6599
- }
6600
- input::placeholder {
6601
- color: var(--color-grau-dunkel);
6602
- }
6603
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
6604
- cursor: not-allowed;
6605
- }
6606
- .required label > span::after {
6607
- content: '*';
6608
- padding-left: 0.125em;
6609
- }
6610
- .icons {
6611
- display: flex;
6612
- justify-content: space-between;
6613
- height: 0;
6614
- }
6615
- .icons > * {
6616
- margin: 0.75em;
6617
- }
6618
- .icon-left input,
6619
- .icon-left select {
6620
- padding-left: 2em;
6621
- }
6622
- .icon-right input,
6623
- .icon-right select {
6624
- padding-right: 2em;
6625
- }
6626
- kol-button-wc {
6627
- position: relative;
6628
- float: right;
6629
- z-index: 1;
6630
- margin-top: -33px;
6631
- }
6632
- kol-button-wc button {
6633
- border: 1px solid var(--color-grau-dunkel);
6634
- box-sizing: border-box;
6635
- background-color: transparent;
6636
- cursor: pointer;
6637
- }
6638
- .icon-right kol-button-wc {
6639
- margin-right: 2.5em;
6640
- }
6641
- .disabled {
6642
- opacity: 0.33;
6643
- }
6644
- select[multiple],
6645
- textarea {
6646
- overflow: auto;
6647
- }
6648
- textarea {
6649
- display: block;
6650
- }
6651
- select option {
6652
- margin: 1px 0;
6653
- padding: 0.5em;
6654
- cursor: pointer;
6655
- }
6656
- select option:disabled {
6657
- cursor: not-allowed;
6658
- }
6659
- option:active:not(:disabled),
6660
- option:checked:not(:disabled),
6661
- option:focus:not(:disabled),
6662
- option:hover:not(:disabled) {
6663
- background: var(--color-ocean);
6664
- color: white;
6665
- }
6666
- `,
6667
- "KOL-INPUT-DATE": css$5`
6668
- kol-input label {
6669
- font-weight: 700;
6670
- margin-bottom: var(--gapSmallest);
6671
- }
6672
- input {
6673
- border: var(--formBorder);
6674
- }
6675
- input:hover {
6676
- border: var(--formBorderHover);
6677
- }
6678
- `,
6679
- "KOL-INPUT-EMAIL": css$5`
6680
- kol-input {
6681
- display: grid;
6682
- padding: 0;
6683
- margin: 0;
6684
- }
6685
- input:focus,
6686
- input:hover,
6687
- select:focus,
6688
- select:hover,
6689
- textarea:focus,
6690
- textarea:hover {
6691
- border-color: black;
6692
- }
6693
- kol-input > label {
6694
- order: 1;
6695
- margin-bottom: 0.25em;
6696
- }
6697
- kol-input > label > span {
6698
- color: black;
6699
- font-size: 0.875rem;
6700
- line-height: 1.5rem;
6701
- }
6702
- kol-input > div.input {
6703
- background-color: white;
6704
- display: block;
6705
- order: 2;
6706
- }
6707
- kol-input > kol-alert.error {
6708
- margin-top: 0.25em;
6709
- order: 3;
6710
- }
6711
- input,
6712
- select,
6713
- textarea {
6714
- font-family: var(--font-family);
6715
- background-color: transparent;
6716
- box-sizing: border-box;
6717
- font-size: 1rem;
6718
- display: inline-flex;
6719
- line-height: 1.5em;
6720
- color: black;
6721
- border-color: var(--color-grau-dunkel);
6722
- border-width: 1px;
6723
- border-style: solid;
6724
- padding: 0.5em 0.75em;
6725
- overflow: hidden;
6726
- width: 100%;
6727
- }
6728
- input:not([type='range']),
6729
- select:not([multiple]) {
6730
- height: 2.75em;
6731
- }
6732
- textarea {
6733
- display: inherit;
6734
- }
6735
- input::placeholder {
6736
- color: var(--color-grau-dunkel);
6737
- }
6738
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
6739
- cursor: not-allowed;
6740
- }
6741
- .required label > span::after {
6742
- content: '*';
6743
- padding-left: 0.125em;
6744
- }
6745
- .icons {
6746
- display: flex;
6747
- justify-content: space-between;
6748
- height: 0;
6749
- }
6750
- .icons > * {
6751
- margin: 0.75em;
6752
- }
6753
- .icon-left input,
6754
- .icon-left select {
6755
- padding-left: 2em;
6756
- }
6757
- .icon-right input,
6758
- .icon-right select {
6759
- padding-right: 2em;
6760
- }
6761
- kol-button-wc {
6762
- position: relative;
6763
- float: right;
6764
- z-index: 1000;
6765
- margin-top: -33px;
6766
- }
6767
- kol-button-wc button {
6768
- border: 1px solid var(--color-grau-dunkel);
6769
- box-sizing: border-box;
6770
- background-color: transparent;
6771
- cursor: pointer;
6772
- }
6773
- .icon-right kol-button-wc {
6774
- margin-right: 2.5em;
6775
- }
6776
- .disabled {
6777
- opacity: 0.33;
6778
- }
6779
- select[multiple],
6780
- textarea {
6781
- overflow: auto;
6782
- }
6783
- textarea {
6784
- display: block;
6785
- }
6786
- select option {
6787
- margin: 1px 0;
6788
- padding: 0.5em;
6789
- cursor: pointer;
6790
- }
6791
- select option:disabled {
6792
- cursor: not-allowed;
6793
- }
6794
- option:active:not(:disabled),
6795
- option:checked:not(:disabled),
6796
- option:focus:not(:disabled),
6797
- option:hover:not(:disabled) {
6798
- color: white;
6799
- }
6800
- `,
6801
- "KOL-INPUT-FILE": css$5`
6802
- kol-input {
6803
- display: grid;
6804
- padding: 0;
6805
- margin: 0;
6806
- }
6807
- input:focus,
6808
- input:hover,
6809
- select:focus,
6810
- select:hover,
6811
- textarea:focus,
6812
- textarea:hover {
6813
- border-color: black;
6814
- }
6815
- kol-input > label {
6816
- order: 1;
6817
- margin-bottom: 0.25em;
6818
- }
6819
- kol-input > label > span {
6820
- color: black;
6821
- font-size: 0.875rem;
6822
- line-height: 1.5rem;
6823
- }
6824
- kol-input > div.input {
6825
- background-color: white;
6826
- display: block;
6827
- order: 2;
6828
- }
6829
- kol-input > kol-alert.error {
6830
- margin-top: 0.25em;
6831
- order: 3;
6832
- }
6833
- input,
6834
- select,
6835
- textarea {
6836
- font-family: var(--font-family);
6837
- background-color: transparent;
6838
- box-sizing: border-box;
6839
- font-size: 1rem;
6840
- display: inline-flex;
6841
- line-height: 1.5em;
6842
- color: black;
6843
- border-color: var(--color-grau-dunkel);
6844
- border-width: 1px;
6845
- border-style: solid;
6846
- padding: 0.5em 0.75em;
6847
- overflow: hidden;
6848
- width: 100%;
6849
- }
6850
- input:not([type='range']),
6851
- select:not([multiple]) {
6852
- height: 2.75em;
6853
- }
6854
- textarea {
6855
- display: inherit;
6856
- }
6857
- input::placeholder {
6858
- color: var(--color-grau-dunkel);
6859
- }
6860
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
6861
- cursor: not-allowed;
6862
- }
6863
- .required label > span::after {
6864
- content: '*';
6865
- padding-left: 0.125em;
6866
- }
6867
- .icons {
6868
- display: flex;
6869
- justify-content: space-between;
6870
- height: 0;
6871
- }
6872
- .icons > * {
6873
- margin: 0.75em;
6874
- }
6875
- .icon-left input,
6876
- .icon-left select {
6877
- padding-left: 2em;
6878
- }
6879
- .icon-right input,
6880
- .icon-right select {
6881
- padding-right: 2em;
6882
- }
6883
- kol-button-wc {
6884
- position: relative;
6885
- float: right;
6886
- z-index: 1000;
6887
- margin-top: -33px;
6888
- }
6889
- kol-button-wc button {
6890
- border: 1px solid var(--color-grau-dunkel);
6891
- box-sizing: border-box;
6892
- background-color: transparent;
6893
- cursor: pointer;
6894
- }
6895
- .icon-right kol-button-wc {
6896
- margin-right: 2.5em;
6897
- }
6898
- .disabled {
6899
- opacity: 0.33;
6900
- }
6901
- select[multiple],
6902
- textarea {
6903
- overflow: auto;
6904
- }
6905
- textarea {
6906
- display: block;
6907
- }
6908
- select option {
6909
- margin: 1px 0;
6910
- padding: 0.5em;
6911
- cursor: pointer;
6912
- }
6913
- select option:disabled {
6914
- cursor: not-allowed;
6915
- }
6916
- option:active:not(:disabled),
6917
- option:checked:not(:disabled),
6918
- option:focus:not(:disabled),
6919
- option:hover:not(:disabled) {
6920
- color: white;
6921
- }
6922
- `,
6923
- "KOL-TEXTAREA": css$5`
6924
- kol-input {
6925
- gap: 0.4em;
6926
- }
6927
- kol-input .error {
6928
- order: 3;
6929
- }
6930
- kol-input label {
6931
- font-weight: 700;
6932
- order: 1;
6933
- }
6934
- kol-input .input {
6935
- order: 2;
6936
- }
6937
- kol-input .hint {
6938
- order: 4;
6939
- font-size: 0.875em;
6940
- font-style: italic;
6941
- }
6942
- input,
6943
- select,
6944
- textarea {
6945
- border: none;
6946
- }
6947
- .input {
6948
- color: var(--colorText);
6949
- border: var(--formBorder);
6950
- font-size: var(--textFontSize);
6951
- line-height: 1.5;
6952
- padding: 0 0.5em;
6953
- width: 100%;
6954
- }
6955
- .input > kol-icon {
6956
- width: 1.5em;
6957
- }
6958
- .input > input:first-child {
6959
- padding-left: 0.375em;
6960
- }
6961
- .input > input:last-child {
6962
- padding-right: 0.375em;
6963
- }
6964
- .input:hover {
6965
- border-color: var(--color-gruen-hell);
6966
- }
6967
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
6968
- cursor: not-allowed;
6969
- }
6970
- .required label > span::after {
6971
- content: '*';
6972
- padding-left: 0.125em;
6973
- }
6974
- kol-input.error {
6975
- border-left: 3px solid var(--color-rot);
6976
- padding-left: 1em;
6977
- }
6978
- kol-input.error .input:focus-within {
6979
- outline-color: var(--color-rot) !important;
6980
- }
6981
- kol-input.error kol-alert.error {
6982
- color: var(--color-rot);
6983
- font-weight: 700;
6984
- }
6985
- .disabled {
6986
- opacity: 0.33;
6987
- }
6988
- label {
6989
- color: var(--color-text);
6990
- line-height: 1.5;
6991
- }
6992
- .input {
6993
- }
6994
- .required label > span::after {
6995
- content: '*';
6996
- padding-left: 0.125em;
6997
- }
6998
- `,
6999
- "KOL-ALERT": css$5`
7000
- :host > div {
7001
- background-color: white;
7002
- border-width: 2px;
7003
- border-style: solid;
7004
- border-radius: 0.25rem;
7005
- display: flex;
7006
- overflow: unset;
7007
- }
7008
- :host > div.default {
7009
- border-color: var(--color-grau-dunkel);
7010
- }
7011
- :host > div.default > .icon {
7012
- background-color: var(--color-grau-dunkel);
7013
- }
7014
- :host > div.error {
7015
- border-color: var(--color-rot);
7016
- }
7017
- :host > div.error > .icon {
7018
- background-color: var(--color-rot);
7019
- }
7020
- :host > div.info {
7021
- border-color: var(--color-blau);
7022
- }
7023
- :host > div.info > .icon {
7024
- background-color: var(--color-blau);
7025
- }
7026
- :host > div.success {
7027
- border-color: var(--color-gruen);
7028
- }
7029
- :host > div.success > .icon {
7030
- background-color: var(--color-gruen);
7031
- }
7032
- :host > div.warning {
7033
- border-color: var(--color-gelb);
7034
- }
7035
- :host > div.warning > .icon {
7036
- background-color: var(--color-gelb);
7037
- }
7038
- :host > div.msg > .icon {
7039
- color: white;
7040
- padding: 0.5em;
7041
- align-items: center;
7042
- display: inline-flex;
7043
- }
7044
- :host > div.msg.warning > .icon {
7045
- color: black;
7046
- }
7047
- :host > div.card.default .heading .icon {
7048
- background-color: var(--color-grau-dunkel);
7049
- }
7050
- :host > div.card.error .heading .icon {
7051
- background-color: var(--color-rot);
7052
- }
7053
- :host > div.card.info .heading .icon {
7054
- background-color: var(--color-blau);
7055
- }
7056
- :host > div.card.success .heading .icon {
7057
- background-color: var(--color-gruen);
7058
- }
7059
- :host > div.card.warning .heading .icon {
7060
- background-color: var(--color-gelb);
7061
- }
7062
- :host > div.card .heading .icon {
7063
- color: white;
7064
- padding: 0.5em;
7065
- align-items: center;
7066
- display: inline-flex;
7067
- }
7068
- :host > div.card.warning .heading .icon {
7069
- color: black;
7070
- }
7071
- :host > div kol-heading-wc .icon {
7072
- margin-right: 0.5em;
7073
- }
7074
- :host > div.card .heading .icon {
7075
- border-radius: 0 0 0.25rem 0;
7076
- }
7077
- :host > div.msg > div {
7078
- padding: 0.25em;
7079
- }
7080
- :host > div.msg > div > .heading {
7081
- padding: 0.25em;
7082
- display: inline-block;
7083
- }
7084
- :host > div .content {
7085
- padding: 0.25em;
7086
- }
7087
- :host > div > div {
7088
- display: grid;
7089
- grid-template-columns: 1fr auto;
7090
- }
7091
- :host > div > div > .content {
7092
- grid-row: 2;
7093
- grid-column: 1;
7094
- }
7095
- :host > div > div > .close {
7096
- grid-row: 1 / span 2;
7097
- display: flex;
7098
- }
7099
- :host > div.msg > div > .close > * {
7100
- margin: auto;
7101
- }
7102
- :host > div.msg.default .close .icon {
7103
- color: var(--color-grau-dunkel);
7104
- }
7105
- :host > div.msg.error .close .icon {
7106
- color: var(--color-rot);
7107
- }
7108
- :host > div.msg.info .close .icon {
7109
- color: var(--color-blau);
7110
- }
7111
- :host > div.msg.success .close .icon {
7112
- color: var(--color-gruen);
7113
- }
7114
- :host > div.msg.warning .close .icon {
7115
- color: var(--color-gelb);
7116
- }
7117
- :host > div.card > div > .heading {
7118
- width: 100%;
7119
- }
7120
- .close > button {
7121
- min-width: 44px;
7122
- min-height: 44px;
7123
- display: grid;
7124
- gap: 0.25em;
7125
- line-height: 1.5rem;
7126
- font-family: var(--font-family);
7127
- font-weight: 700;
7128
- cursor: pointer;
7129
- border-radius: 1.5em;
7130
- border-style: solid;
7131
- border-width: 2px;
7132
- font-size: 1rem;
7133
- align-items: center;
7134
- padding: 8px 14px;
7135
- justify-content: center;
7136
- font-style: normal;
7137
- text-align: center;
7138
- text-transform: uppercase;
7139
- width: inherit;
7140
- transition-duration: 0.5s;
7141
- transition-property: background-color, color, border-color;
7142
- background-color: rgba(0, 0, 0, 0);
7143
- border-color: rgba(0, 0, 0, 0);
7144
- }
7145
- .close > button.icon-only {
7146
- padding: 8px;
7147
- }
7148
- .close > button.icon-only kol-icon {
7149
- display: inline-block;
7150
- width: 1.5em;
7151
- height: 1.5em;
7152
- }
7153
- .close > button:active {
7154
- box-shadow: none;
7155
- outline: none;
7156
- }
7157
- .close kol-icon::part(icon)::before {
7158
- content: '\\f00d';
7159
- }
7160
- `,
7161
- "KOL-HEADING": css$5`
7162
- .headline {
7163
- margin-top: 0;
7164
- }
7165
- `,
7166
- "KOL-BADGE": css$5`
7167
- :host {
7168
- display: inline-block;
7169
- }
7170
- kol-span-wc {
7171
- align-items: center;
7172
- border-radius: 0.3125rem;
7173
- display: grid;
7174
- gap: 0.5rem;
7175
- line-height: 1.25rem;
7176
- padding: 0.25rem 0.75rem;
7177
- }
7178
- kol-span-wc span {
7179
- display: flex;
7180
- gap: 0.25rem;
7181
- }
7182
- `,
7183
- "KOL-BUTTON-GROUP": css$5`
7184
- div {
7185
- display: flex;
7186
- flex-wrap: wrap;
7187
- gap: 0.5em;
7188
- }
7189
- `,
7190
- "KOL-INDENTED-TEXT": css$5`
7191
- :host > div {
7192
- width: 100%;
7193
- padding: 15px;
7194
- background: var(--color-grau-weiss);
7195
- box-shadow: -4px 0px 0px var(--color-gruen);
7196
- }
7197
- `,
7198
- "KOL-LINK": css$5`
7199
- :is(a, button) {
7200
- /* color: var(--color-midnight); */
7201
- color: var(--external-link-color, var(--color-gruen));
7202
- font-style: normal;
7203
- font-weight: 400;
7204
- padding: var(--external-link-padding, 0);
7205
- text-decoration-line: none;
7206
- }
7207
- :is(a, button):focus {
7208
- /* outline: var(--color-focus) solid 2px; */
7209
- outline: none;
7210
- }
7211
- :is(a, button):hover {
7212
- /* text-decoration-thickness: 0.25em; */
7213
- box-shadow: inset 0 -1px 0 0 var(--external-link-color, var(--color-gruen));
7214
- }
7215
- .hidden {
7216
- display: none;
7217
- visibility: hidden;
7218
- } /*************************/ /* kol-link-wc {display: inline-block;} */ /* kol-icon {padding: 0 0.25rem;} */
7219
- .hidden {
7220
- display: none;
7221
- visibility: hidden;
7222
- }
7223
- .skip {
7224
- left: -99999px;
7225
- overflow: hidden;
7226
- position: absolute;
7227
- z-index: 9999999;
7228
- line-height: 1em;
7229
- }
7230
- .skip:focus {
7231
- background: white;
7232
- left: unset;
7233
- position: unset;
7234
- }
7235
- .icon-only {
7236
- padding-bottom: 0.2rem;
7237
- }
7238
- :is(a) kol-span-wc > span {
7239
- gap: var(--gapSmallest);
7240
- }
7241
- `,
7242
- "KOL-DETAILS": css$5`
7243
- details {
7244
- display: grid;
7245
- width: 100%;
7246
- }
7247
- summary {
7248
- margin: 0;
7249
- padding: 0;
7250
- }
7251
- summary span {
7252
- margin-left: 0.25rem;
7253
- text-decoration: underline;
7254
- }
7255
- summary span:hover {
7256
- text-decoration-thickness: 0.25em;
7257
- }
7258
- details > kol-indented-text {
7259
- margin: 0.25em 0 0 0.6em;
7260
- }
7261
- `,
7262
- "KOL-SPIN": css$5`
7263
- .cycle {
7264
- padding: 0.125rem;
7265
- & span {
7266
- background-color: #fc0;
7267
- }
7268
- }
7269
- `,
7270
- "KOL-PROGRESS": css$5`
7271
- :host progress,
7272
- :host span {
7273
- display: block;
7274
- height: 0px;
7275
- overflow: hidden;
7276
- width: 0px;
7277
- }
7278
- svg line:first-child,
7279
- svg circle:first-child {
7280
- fill: transparent;
7281
- stroke: var(--color-ice);
7282
- }
7283
- svg line:last-child,
7284
- svg circle:last-child {
7285
- stroke: var(--color-midnight);
7286
- fill: transparent;
7287
- }
7288
- progress {
7289
- display: none;
7290
- }
7291
- `,
7292
- "KOL-SELECT": css$5`
7293
- :host {
7294
- --color: var(--colorText); /* --color: blue; */
7295
- }
7296
- kol-input {
7297
- color: var(--color);
7298
- font-size: var(--textFontSize);
7299
- gap: var(--gapSmallest);
7300
- }
7301
- label {
7302
- font-weight: 700;
7303
- order: 1;
7304
- }
7305
- .input {
7306
- order: 2;
7307
- }
7308
- kol-alert.error {
7309
- color: var(--colorSignalError);
7310
- order: 3;
7311
- }
7312
- select {
7313
- background-color: var(--colorLight);
7314
- line-height: 1.5;
7315
- color: var(--color);
7316
- border: var(--formBorder);
7317
- padding: 0.5em 0.75em;
7318
- }
7319
- select:hover,
7320
- select:focus {
7321
- border-color: var(--colorPrimaryActive);
7322
- }
7323
- select:disabled {
7324
- cursor: not-allowed;
7325
- }
7326
- select[multiple] {
7327
- overflow: auto;
7328
- }
7329
- select option {
7330
- margin: 1px 0;
7331
- cursor: pointer;
7332
- }
7333
- select option:disabled {
7334
- cursor: not-allowed;
7335
- }
7336
- select:not([multiple]) option {
7337
- padding: 0.5em;
7338
- }
7339
- .required label > span::after {
7340
- content: '*';
7341
- padding-left: 0.125em;
7342
- } /* kol-input.error select:invalid { */
7343
- kol-input.error select {
7344
- border-color: var(--colorSignalError);
7345
- } /* option:active:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {color: white;} */
7346
- `,
7347
- "KOL-INPUT-COLOR": css$5`
7348
- kol-input {
7349
- display: grid;
7350
- padding: 0;
7351
- margin: 0;
7352
- }
7353
- input:focus,
7354
- input:hover,
7355
- select:focus,
7356
- select:hover,
7357
- textarea:focus,
7358
- textarea:hover {
7359
- border-color: black;
7360
- }
7361
- kol-input > label {
7362
- order: 1;
7363
- margin-bottom: 0.25em;
7364
- }
7365
- kol-input > label > span {
7366
- color: black;
7367
- font-size: 0.875rem;
7368
- line-height: 1.5rem;
7369
- }
7370
- kol-input > div.input {
7371
- background-color: white;
7372
- display: block;
7373
- order: 2;
7374
- }
7375
- kol-input > kol-alert.error {
7376
- margin-top: 0.25em;
7377
- order: 3;
7378
- }
7379
- input,
7380
- select,
7381
- textarea {
7382
- font-family: var(--font-family);
7383
- background-color: transparent;
7384
- box-sizing: border-box;
7385
- font-size: 1rem;
7386
- display: inline-flex;
7387
- line-height: 1.5em;
7388
- color: black;
7389
- border-color: var(--color-grau-dunkel);
7390
- border-width: 1px;
7391
- border-style: solid;
7392
- padding: 0.5em 0.75em;
7393
- overflow: hidden;
7394
- width: 100%;
7395
- }
7396
- input:not([type='range']),
7397
- select:not([multiple]) {
7398
- height: 2.75em;
7399
- }
7400
- textarea {
7401
- display: inherit;
7402
- }
7403
- input::placeholder {
7404
- color: var(--color-grau-dunkel);
7405
- }
7406
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
7407
- cursor: not-allowed;
7408
- }
7409
- .required label > span::after {
7410
- content: '*';
7411
- padding-left: 0.125em;
7412
- }
7413
- .icons {
7414
- display: flex;
7415
- justify-content: space-between;
7416
- height: 0;
7417
- }
7418
- .icons > * {
7419
- margin: 0.75em;
7420
- }
7421
- .icon-left input,
7422
- .icon-left select {
7423
- padding-left: 2em;
7424
- }
7425
- .icon-right input,
7426
- .icon-right select {
7427
- padding-right: 2em;
7428
- }
7429
- kol-button-wc {
7430
- position: relative;
7431
- float: right;
7432
- z-index: 1000;
7433
- margin-top: -33px;
7434
- }
7435
- kol-button-wc button {
7436
- border: 1px solid var(--color-grau-dunkel);
7437
- box-sizing: border-box;
7438
- background-color: transparent;
7439
- cursor: pointer;
7440
- }
7441
- .icon-right kol-button-wc {
7442
- margin-right: 2.5em;
7443
- }
7444
- .disabled {
7445
- opacity: 0.33;
7446
- }
7447
- select[multiple],
7448
- textarea {
7449
- overflow: auto;
7450
- }
7451
- textarea {
7452
- display: block;
7453
- }
7454
- select option {
7455
- margin: 1px 0;
7456
- padding: 0.5em;
7457
- cursor: pointer;
7458
- }
7459
- select option:disabled {
7460
- cursor: not-allowed;
7461
- }
7462
- option:active:not(:disabled),
7463
- option:checked:not(:disabled),
7464
- option:focus:not(:disabled),
7465
- option:hover:not(:disabled) {
7466
- color: white;
7467
- }
7468
- `,
7469
- "KOL-ACCORDION": css$5`
7470
- :host > div {
7471
- font-family: var(--font-family);
7472
- padding: 0 0.5rem 0 0;
7473
- }
7474
- :host > div > kol-heading-wc {
7475
- font-weight: 700;
7476
- font-size: 1.25rem;
7477
- line-height: 1.75rem;
7478
- }
7479
- :host > div > kol-heading-wc button {
7480
- cursor: pointer;
7481
- width: 100%;
7482
- margin: 0;
7483
- display: flex;
7484
- gap: 0.5em;
7485
- border: 0;
7486
- align-items: center;
7487
- overflow: hidden;
7488
- font-size: inherit;
7489
- line-height: 1.5em;
7490
- background-color: transparent;
7491
- padding: 0.5em;
7492
- padding-left: 0;
7493
- }
7494
- :host > div[part*='open'] > kol-heading-wc button {
7495
- padding: 0.5em;
7496
- padding-left: 0;
7497
- }
7498
- :host > div > kol-heading-wc button kol-icon::part(icon) {
7499
- font-family: 'Font Awesome 6 Free';
7500
- font-weight: 900;
7501
- color: var(--color-midnight);
7502
- }
7503
- .accordion > kol-heading-wc button kol-icon::part(icon)::before {
7504
- content: '\\2b';
7505
- }
7506
- .accordion.open > kol-heading-wc button kol-icon::part(icon)::before {
7507
- content: '\\f068';
7508
- }
7509
- .accordion {
7510
- width: 100%;
7511
- height: 100%;
7512
- display: grid;
7513
- }
7514
- .accordion[part*='open'] div[part='header'] {
7515
- padding-left: 2em;
7516
- }
7517
- .accordion[part*='open'] div[part='content'] {
7518
- padding-top: 1rem;
7519
- }
7520
- button {
7521
- font-weight: inherit;
7522
- font-size: inherit;
7523
- line-height: inherit;
7524
- }
7525
- .accordion {
7526
- background: var(--color-white);
7527
- }
7528
- .accordion[part*='open'] {
7529
- padding-bottom: 1em;
7530
- } /* .accordion > [part="header"] {height: 0;} */
7531
- h1,
7532
- h2,
7533
- h3,
7534
- h4,
7535
- h5,
7536
- h6 {
7537
- margin: 0;
7538
- }
7539
- `,
7540
- "KOL-TABLE": css$5`
7541
- :host * {
7542
- hyphens: var(--hyphens);
7543
- line-height: var(--textFontLineHeight);
7544
- }
7545
- :host > div:first-child {
7546
- overflow-x: auto;
7547
- overflow-y: hidden;
7548
- }
7549
- table {
7550
- border-collapse: collapse;
7551
- }
7552
- caption {
7553
- height: auto;
7554
- text-align: left;
7555
- } /* visuell verstecken */
7556
- caption {
7557
- clip: rect(1px, 1px, 1px, 1px);
7558
- clip-path: inset(50%);
7559
- height: 1px;
7560
- width: 1px;
7561
- margin: -1px;
7562
- overflow: hidden;
7563
- padding: 0;
7564
- position: absolute;
7565
- }
7566
- table,
7567
- tr,
7568
- th,
7569
- td {
7570
- border: 0 solid var(--color-weiss);
7571
- }
7572
- tr {
7573
- border-top-width: 2px;
7574
- }
7575
- th {
7576
- background-color: var(--color-gruen);
7577
- color: var(--color-weiss);
7578
- font-weight: normal;
7579
- }
7580
- tbody > tr:nth-child(odd) {
7581
- background-color: #f2f2f2;
7582
- }
7583
- tbody > tr:hover {
7584
- background-color: var(--color-gruen-dunkel);
7585
- color: var(--color-weiss);
7586
- }
7587
- th,
7588
- td {
7589
- border-right-width: 2px;
7590
- padding: 0.25em 0.5em;
7591
- }
7592
- th > div {
7593
- display: grid;
7594
- grid-template-columns: 1fr auto;
7595
- align-items: center;
7596
- gap: 0.25em;
7597
- }
7598
- .pagination {
7599
- padding: 0.5em;
7600
- font-size: var(--textFontSize);
7601
- gap: 1rem;
7602
- }
7603
- th kol-button button {
7604
- padding: 0.5rem;
7605
- } /* default: [aria-sort="none"] */
7606
- [data-sort] kol-button::part(icon)::before {
7607
- font-family: 'Font Awesome 6 Free';
7608
- font-weight: 900;
7609
- content: '\\f0dc';
7610
- }
7611
- [data-sort='sort-ASC'] kol-button::part(icon)::before {
7612
- content: '\\f0de';
7613
- }
7614
- [data-sort='sort-DESC'] kol-button::part(icon)::before {
7615
- content: '\\f0dd';
7616
- }
7617
- `,
7618
- "KOL-NAV": css$5`
7619
- ul {
7620
- list-style: none;
7621
- }
7622
- a {
7623
- color: var(--colorText);
7624
- display: block;
7625
- padding: 0.3rem 0.5rem;
7626
- text-decoration: none;
7627
- transition-duration: 0.5s;
7628
- transition-property: background-color, color, border-color;
7629
- }
7630
- a:hover {
7631
- background-color: var(--colorPrimarySuccess);
7632
- color: var(--colorLight);
7633
- }
7634
- a:focus,
7635
- button:focus {
7636
- outline: var(--focusOutline);
7637
- outline-offset: 2px;
7638
- transition: outline-offset 0.2s linear;
7639
- }
7640
- .list[data-deep='0'] {
7641
- font-family: var(--textFontSerif);
7642
- }
7643
- .horizontal {
7644
- gap: var(--gap);
7645
- }
7646
- `,
7647
- "KOL-CARD": css$5`
7648
- :host > div {
7649
- --card-padding: var(--gap);
7650
- border-color: var(--color-gruen);
7651
- border-style: solid;
7652
- border-width: 1px;
7653
- border-radius: 0.25rem;
7654
- box-shadow: 0px 0px 1.875rem 0px rgba(0, 0, 0, 0.3);
7655
- display: grid;
7656
- width: 100%;
7657
- height: 100%;
7658
- background-color: white;
7659
- grid-template-rows: min-content 2fr min-content;
7660
- padding-bottom: var(--gapLarge);
7661
- }
7662
- :host kol-heading-wc {
7663
- display: inline-flex;
7664
- font-style: normal;
7665
- }
7666
- :host kol-heading-wc h1,
7667
- :host kol-heading-wc h2 {
7668
- font-family: var(--textFontSerif);
7669
- font-weight: var(--textFontWeight);
7670
- margin: 0;
7671
- }
7672
- :host kol-heading-wc h1 {
7673
- font-size: var(--headline1FontSize);
7674
- line-height: var(--headline1LineHeight);
7675
- }
7676
- :host kol-heading-wc h2 {
7677
- font-size: var(--headline2FontSize);
7678
- line-height: var(--headline2LineHeight);
7679
- }
7680
- :host kol-heading-wc h3 {
7681
- font-size: var(--headline3FontSize);
7682
- line-height: var(--headline3LineHeight);
7683
- }
7684
- :host kol-heading-wc h4 {
7685
- font-size: var(--headline4FontSize);
7686
- line-height: var(--headline4LineHeight);
7687
- }
7688
- :host div.header {
7689
- border-bottom: 1px solid var(--color-gruen);
7690
- padding: var(--card-padding);
7691
- align-items: flex-start;
7692
- display: flex;
7693
- gap: 0 var(--gapSmall);
7694
- justify-content: space-between;
7695
- }
7696
- :host div.content {
7697
- padding: var(--card-padding) var(--card-padding) 0;
7698
- }
7699
- :host div.footer {
7700
- margin-top: 3rem;
7701
- padding: 0 var(--card-padding);
7702
- }
7703
- `,
7704
- "KOL-INPUT-CHECKBOX": css$5`
7705
- :host {
7706
- --border-width: 1px;
7707
- --spacing: 0.25rem;
7708
- }
7709
- label {
7710
- cursor: pointer;
7711
- }
7712
- input {
7713
- color: black;
7714
- border-color: var(--color-grau-dunkel);
7715
- border-width: var(--border-width);
7716
- border-style: solid;
7717
- line-height: 24px;
7718
- font-size: 16px;
7719
- }
7720
- .required label > span::after {
7721
- content: '*';
7722
- padding-left: 0.125em;
7723
- }
7724
- input:hover {
7725
- border-color: var(--color-blau);
7726
- } /* NEU */
7727
- kol-input {
7728
- display: grid;
7729
- align-items: center;
7730
- justify-items: left;
7731
- width: 100%;
7732
- }
7733
- kol-input.checkbox {
7734
- grid-template-columns: calc(6 * var(--spacing)) auto;
7735
- }
7736
- kol-input.switch {
7737
- grid-template-columns: calc(13 * var(--spacing)) auto;
7738
- }
7739
- kol-input > div.input {
7740
- display: inline-flex;
7741
- order: 1;
7742
- }
7743
- kol-input > div.input input {
7744
- margin: 0px;
7745
- }
7746
- kol-input > label {
7747
- order: 2;
7748
- padding-left: calc(2 * var(--spacing));
7749
- }
7750
- kol-input > kol-alert.error {
7751
- order: 3;
7752
- padding-top: 0.25em;
7753
- grid-column: span 2 / auto;
7754
- } /* CHECKBOX */
7755
- input[type='checkbox'] {
7756
- appearance: none;
7757
- background-color: white;
7758
- cursor: pointer;
7759
- transition: 0.5s;
7760
- }
7761
- input[type='checkbox'].kol-disabled:before {
7762
- cursor: not-allowed;
7763
- }
7764
- input[type='checkbox']:before {
7765
- content: '';
7766
- cursor: pointer;
7767
- }
7768
- input[type='checkbox']:checked {
7769
- background-color: var(--color-blau);
7770
- border-color: var(--color-blau);
7771
- }
7772
- .checkbox input[type='checkbox'] {
7773
- height: calc(6 * var(--spacing));
7774
- min-width: calc(6 * var(--spacing));
7775
- width: calc(6 * var(--spacing));
7776
- }
7777
- .checkbox input[type='checkbox']:before {
7778
- background-color: transparent;
7779
- display: block;
7780
- height: calc(6 * var(--spacing));
7781
- position: relative;
7782
- width: calc(6 * var(--spacing));
7783
- }
7784
- .checkbox input[type='checkbox']:checked:before {
7785
- border-right-width: 3px;
7786
- border-bottom-width: 3px;
7787
- left: calc(1.5 * var(--spacing) - var(--border-width));
7788
- top: calc(2.85 * var(--spacing) - var(--border-width));
7789
- transform: rotate(40deg) translate(-50%, -50%);
7790
- background-color: transparent;
7791
- border-width: 0px 3px 3px 0px;
7792
- border-color: white;
7793
- border-style: solid;
7794
- height: calc(3 * var(--spacing));
7795
- width: calc(1.5 * var(--spacing));
7796
- }
7797
- .checkbox input[type='checkbox']:indeterminate:before {
7798
- background-color: var(--color-grau-dunkel);
7799
- height: 0.375rem;
7800
- top: 0.5rem;
7801
- left: 0.2rem;
7802
- width: calc(4 * var(--spacing));
7803
- }
7804
- .switch input[type='checkbox'] {
7805
- min-width: 3.2em;
7806
- width: 3.2em;
7807
- height: 1.7em;
7808
- display: inline-block;
7809
- position: relative;
7810
- }
7811
- .switch input[type='checkbox']:before {
7812
- -webkit-transition: 0.5s;
7813
- -moz-transition: 0.5s;
7814
- -ms-transition: 0.5s;
7815
- transition: 0.5;
7816
- width: 1.2em;
7817
- height: 1.2em;
7818
- left: calc(0.25em - var(--border-width));
7819
- top: calc(0.25em - var(--border-width));
7820
- background-color: black;
7821
- position: absolute;
7822
- }
7823
- .switch input[type='checkbox']:checked:before {
7824
- -webkit-transform: translateX(1.5em);
7825
- -moz-transform: translateX(1.5em);
7826
- -ms-transform: translateX(1.5em);
7827
- transform: translateX(1.5em);
7828
- background-color: white;
7829
- }
7830
- .switch input[type='checkbox']:indeterminate:before {
7831
- -webkit-transform: translateX(0.75em);
7832
- -moz-transform: translateX(0.75em);
7833
- -ms-transform: translateX(0.75em);
7834
- transform: translateX(0.75em);
7835
- background-color: var(--color-blau);
7836
- }
7837
- .disabled {
7838
- opacity: 0.33;
7839
- }
7840
- `,
7841
- "KOL-INPUT-RADIO": css$5`
7842
- :host {
7843
- --border-width: 1px;
7844
- --input-color: var(--color-gruen-dunkel);
7845
- --input-inner-position: calc(var(--spacing) + var(--border-width));
7846
- --input-inner-size: calc(var(--spacing) * 3);
7847
- --input-outer-size: calc(var(--spacing) * 6);
7848
- }
7849
- div[slot='input'] {
7850
- align-items: center;
7851
- display: flex;
7852
- gap: calc(var(--spacing) * 2);
7853
- }
7854
- fieldset {
7855
- border: 0;
7856
- margin: 0;
7857
- padding: 0;
7858
- }
7859
- fieldset.horizontal {
7860
- display: flex;
7861
- flex-wrap: wrap;
7862
- align-items: center;
7863
- gap: 0.5rem 32px;
7864
- }
7865
- input {
7866
- cursor: pointer;
7867
- display: grid;
7868
- align-self: center;
7869
- border: var(--border-width) solid var(--input-color);
7870
- appearance: none;
7871
- border-radius: 100%;
7872
- height: var(--input-outer-size);
7873
- width: var(--input-outer-size);
7874
- margin: 0;
7875
- }
7876
- input:hover {
7877
- --border-width: 2px;
7878
- }
7879
- input:focus:hover {
7880
- box-shadow: none;
7881
- }
7882
- input:disabled {
7883
- --input-color: var(--color-disabled);
7884
- }
7885
- input:disabled:hover {
7886
- --border-width: 1px;
7887
- }
7888
- input:disabled + label {
7889
- color: var(--color-disabled);
7890
- }
7891
- input::before {
7892
- content: '';
7893
- cursor: pointer; /* left: var(--input-inner-position);top: var(--input-inner-position); */
7894
- position: relative;
7895
- border-radius: 100%;
7896
- display: inline-block;
7897
- height: var(--input-inner-size);
7898
- width: var(--input-inner-size);
7899
- }
7900
- input:hover::before {
7901
- --input-inner-position: var(--spacing);
7902
- }
7903
- input:checked::before {
7904
- background-color: var(--input-color);
7905
- }
7906
- kol-input {
7907
- display: grid;
7908
- }
7909
- kol-input {
7910
- margin-bottom: 1rem;
7911
- }
7912
- kol-input.error input {
7913
- border-color: var(--color-rot);
7914
- padding-left: 1em;
7915
- }
7916
- kol-input.error input:focus,
7917
- kol-input.error select:focus,
7918
- kol-input.error textarea:focus {
7919
- outline: var(--color-focus) solid 2px !important;
7920
- }
7921
- kol-input kol-alert.error {
7922
- margin-bottom: 0.4em;
7923
- order: 1;
7924
- }
7925
- kol-input.error kol-alert.error {
7926
- color: var(--color-rot);
7927
- font-weight: 700;
7928
- }
7929
- label {
7930
- color: var(--color-text);
7931
- cursor: pointer;
7932
- display: grid;
7933
- font-size: var(--text-size); /* order: 2; */
7934
- font-weight: 700;
7935
- }
7936
- legend {
7937
- font-size: var(--text-size);
7938
- margin-bottom: var(--text-size);
7939
- }
7940
- .icons {
7941
- display: flex;
7942
- justify-content: space-between;
7943
- height: 0;
7944
- }
7945
- .icons > * {
7946
- margin: 0.75em;
7947
- }
7948
- .icon-left input,
7949
- .icon-left select {
7950
- padding-left: 2em;
7951
- }
7952
- .icon-right input,
7953
- .icon-right select {
7954
- padding-right: 2em;
7955
- }
7956
- .required label > span::after {
7957
- content: '*';
7958
- padding-left: 0.125em;
7959
- }
7960
- `,
7961
- "KOL-TOAST-CONTAINER": css$5`
7962
- :host {
7963
- top: 1rem;
7964
- width: 750px;
7965
- left: 50%;
7966
- transform: translateX(-50%);
7967
- }
7968
- .toast {
7969
- background: #fff;
7970
- margin-top: 1rem;
7971
- }
7972
- `,
7973
- "KOL-TABS": css$5`
7974
- button:disabled {
7975
- opacity: 0.5;
7976
- cursor: not-allowed;
7977
- }
7978
- :host {
7979
- font-family: var(--font-family);
7980
- }
7981
- :host > div {
7982
- display: block;
7983
- width: 100%;
7984
- }
7985
- :host kol-button-group-wc {
7986
- display: inline-block;
7987
- border-radius: 0.25rem 0.25rem 0 0;
7988
- background-color: var(--kolibri-color-normal);
7989
- }
7990
- :host kol-button-group-wc > div {
7991
- display: inline-flex;
7992
- }
7993
- :host kol-button-group-wc > div + div {
7994
- margin-left: 0.25em;
7995
- }
7996
- :host > div > div {
7997
- padding: 0.25em;
7998
- border: 1px solid var(--kolibri-border-color);
7999
- border-radius: 0 0 0.25rem 0.25rem;
8000
- }
8001
- button {
8002
- box-sizing: border-box;
8003
- font-size: inherit;
8004
- line-height: 1.25em;
8005
- cursor: pointer;
8006
- border-width: 2px;
8007
- box-shadow: 0 0 0.25em gray;
8008
- font-family: var(--kolibri-font-family);
8009
- width: inherit;
8010
- border-radius: var(--kolibri-border-radius);
8011
- border-style: solid;
8012
- padding: calc(2 * var(--kolibri-spacing));
8013
- display: grid;
8014
- gap: 0.25em;
8015
- align-items: center;
8016
- justify-content: center;
8017
- text-align: center;
8018
- transition-duration: 0.5s;
8019
- transition-property: background-color, color, border-color;
8020
- }
8021
- kol-button-wc[aria-selected='true'] button {
8022
- border-bottom-width: 0.25em !important;
8023
- border-bottom-style: solid;
8024
- border-bottom-color: var(--kolibri-color-accent) !important;
8025
- }
8026
- button > kol-span-wc span {
8027
- display: flex;
8028
- gap: 0.25em;
8029
- align-items: center;
8030
- justify-content: center;
8031
- }
8032
- button:disabled {
8033
- cursor: not-allowed;
8034
- opacity: 0.5;
8035
- }
8036
- button.primary,
8037
- button.primary:disabled:hover {
8038
- background-color: var(--kolibri-color-primary);
8039
- border-color: var(--kolibri-color-primary);
8040
- color: white;
8041
- }
8042
- button.primary:hover,
8043
- button.primary:focus {
8044
- color: var(--kolibri-color-primary);
8045
- }
8046
- button.secondary,
8047
- button.secondary:disabled:hover {
8048
- background-color: var(--kolibri-color-secondary);
8049
- border-color: var(--kolibri-color-secondary);
8050
- color: white;
8051
- }
8052
- button.secondary:hover,
8053
- button.secondary:focus {
8054
- color: var(--kolibri-color-secondary);
8055
- }
8056
- button.normal,
8057
- button.normal:disabled:hover {
8058
- background-color: var(--kolibri-color-normal);
8059
- border-color: var(--kolibri-color-normal);
8060
- color: white;
8061
- }
8062
- button.normal:hover,
8063
- button.normal:focus {
8064
- color: var(--kolibri-color-normal);
8065
- }
8066
- button.danger,
8067
- button.danger:disabled:hover {
8068
- background-color: var(--kolibri-color-danger);
8069
- border-color: var(--kolibri-color-danger);
8070
- color: white;
8071
- }
8072
- button.danger:hover,
8073
- button.danger:focus {
8074
- color: var(--kolibri-color-danger);
8075
- }
8076
- button.ghost,
8077
- button.ghost:disabled:hover {
8078
- background-color: white;
8079
- border-color: var(--kolibri-color-ghost);
8080
- color: var(--kolibri-color-ghost);
8081
- }
8082
- button.ghost:hover,
8083
- button.ghost:focus {
8084
- background-color: var(--kolibri-color-ghost);
8085
- color: white;
8086
- }
8087
- button:hover,
8088
- button:focus {
8089
- background-color: white;
8090
- box-shadow: 0 0 0.25em black;
8091
- }
8092
- button:active {
8093
- outline: 0 !important;
8094
- box-shadow: none !important;
8095
- }
8096
- .close-button {
8097
- font-size: 25%;
8098
- height: fit-content;
8099
- width: 0;
8100
- }
8101
- .close-button button {
8102
- width: 1rem;
8103
- position: relative;
8104
- height: 1rem;
8105
- left: -4.25em;
8106
- top: 0.25em;
8107
- }
8108
- :host > div {
8109
- display: grid;
8110
- }
8111
- :host > div.tabs-align-left {
8112
- grid-template-columns: auto 1fr;
8113
- }
8114
- :host > div.tabs-align-right {
8115
- grid-template-columns: 1fr auto;
8116
- }
8117
- :host > .tabs-align-left kol-button-group-wc,
8118
- :host > .tabs-align-top kol-button-group-wc {
8119
- order: 0;
8120
- }
8121
- :host > .tabs-align-bottom kol-button-group-wc,
8122
- :host > .tabs-align-right kol-button-group-wc {
8123
- order: 1;
8124
- }
8125
- :host > div.tabs-align-left kol-button-group-wc > div,
8126
- :host > div.tabs-align-left kol-button-group-wc > div > div,
8127
- :host > div.tabs-align-right kol-button-group-wc > div,
8128
- :host > div.tabs-align-right kol-button-group-wc > div > div {
8129
- display: grid;
8130
- }
8131
- :host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,
8132
- :host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {
8133
- width: 100%;
8134
- }
8135
- :host > div.tabs-align-bottom kol-button-group-wc div,
8136
- :host > div.tabs-align-top kol-button-group-wc div {
8137
- display: flex;
8138
- flex-wrap: wrap;
8139
- }
8140
- :host > div.tabs-align-bottom > kol-button-group-wc {
8141
- border-radius: 0 0 0.25rem 0.25rem;
8142
- }
8143
- :host > div.tabs-align-bottom > div {
8144
- border-radius: 0.25rem 0.25rem 0 0;
8145
- }
8146
- :host > div.tabs-align-top > kol-button-group-wc {
8147
- border-radius: 0.25rem 0.25rem 0 0;
8148
- }
8149
- :host > div.tabs-align-top > div {
8150
- border-radius: 0 0 0.25rem 0.25rem;
8151
- }
8152
- :host > div.tabs-align-left > kol-button-group-wc {
8153
- border-radius: 0.25rem 0 0 0.25rem;
8154
- }
8155
- :host > div.tabs-align-left > div {
8156
- border-radius: 0 0.25rem 0.25rem 0;
8157
- }
8158
- :host > div.tabs-align-right > kol-button-group-wc {
8159
- border-radius: 0 0.25rem 0.25rem 0;
8160
- }
8161
- :host > div.tabs-align-right > div {
8162
- border-radius: 0.25rem 0 0 0.25rem;
8163
- }
8164
- `,
8165
- "KOL-PAGINATION": css$5`
8166
- .navigation-list > li {
8167
- min-width: var(--a11y-min-size);
8168
- text-align: center;
8169
- }
8170
- .icon::part(icon) {
8171
- font-family: 'Font Awesome 6 Free';
8172
- font-weight: 900;
8173
- }
8174
- .first .icon::part(icon)::before {
8175
- content: '\\f100';
8176
- }
8177
- .previous .icon::part(icon)::before {
8178
- content: '\\f104';
8179
- }
8180
- .next .icon::part(icon)::before {
8181
- content: '\\f105';
8182
- }
8183
- .last .icon::part(icon)::before {
8184
- content: '\\f101';
8185
- }
8186
- .button {
8187
- --background-color: var(--color-gruen-dunkel);
8188
- --border-color: var(--color-gruen-dunkel);
8189
- --border-size: 1px;
8190
- --min-size: 2.75rem;
8191
- align-items: center;
8192
- background-color: var(--color-weiss);
8193
- border: var(--border-size) solid var(--color-gruen-hell);
8194
- color: var(--color-grau-dunkel);
8195
- cursor: pointer;
8196
- display: grid;
8197
- font-family: var(--font-family);
8198
- font-size: var(--text-size);
8199
- font-style: normal;
8200
- gap: 0.25em;
8201
- justify-content: center;
8202
- line-height: 1.5;
8203
- min-height: var(--min-size);
8204
- min-width: var(--min-size);
8205
- padding: 0.5rem 0.875rem;
8206
- text-align: center;
8207
- text-transform: uppercase;
8208
- transition-duration: 0.5s;
8209
- transition-property: background-color, color, border-color;
8210
- &:hover:enabled {
8211
- text-decoration: underline;
8212
- }
8213
- &:focus {
8214
- outline: var(--color-focus) solid 2px;
8215
- }
8216
- &:disabled,
8217
- &:disabled:hover {
8218
- opacity: 0.5;
8219
- background-color: var(--color-weiss);
8220
- border-color: var(--color-grau-hell);
8221
- color: var(--color-disabled);
8222
- cursor: not-allowed;
8223
- }
8224
- & .icon {
8225
- display: inline-block;
8226
- width: 1.5em;
8227
- height: 1.5em;
8228
- }
8229
- }
8230
- .selected button {
8231
- border-radius: 1.5em;
8232
- border: none;
8233
- color: var(--color-midnight) !important;
8234
- font-weight: 700;
8235
- line-height: normal;
8236
- }
8237
- `,
8238
- "KOL-INPUT-RANGE": css$5`
8239
- /* https://www.cssportal.com/style-input-range/ */
8240
- kol-input {
8241
- display: grid;
8242
- }
8243
- kol-input label {
8244
- display: grid;
8245
- order: 2;
8246
- margin-bottom: 0.4em;
8247
- }
8248
- kol-input div.input {
8249
- box-sizing: border-box;
8250
- order: 3;
8251
- background-color: white;
8252
- border-radius: 0.3125rem;
8253
- }
8254
- kol-input kol-alert.error {
8255
- margin-bottom: 0.4em;
8256
- order: 1;
8257
- }
8258
- input,
8259
- select,
8260
- textarea {
8261
- font-family: var(--font-family);
8262
- background-color: transparent;
8263
- box-sizing: border-box;
8264
- font-size: 1rem;
8265
- display: inline-flex;
8266
- line-height: 1.5em;
8267
- border-color: var(--color-grey);
8268
- border-width: 2px;
8269
- border-style: solid;
8270
- padding: 0.625em 0.875em;
8271
- border-radius: 0.3125rem;
8272
- overflow: hidden;
8273
- width: calc(100% - 4em);
8274
- }
8275
- input,
8276
- select:not([multiple]) {
8277
- height: 2.75em;
8278
- }
8279
- input::placeholder {
8280
- color: var(--color-grey);
8281
- }
8282
- input:hover {
8283
- border-color: var(--color-midnight);
8284
- }
8285
- input:not([type="color"]):read-only,input:disabled,/* select:read-only, */select:disabled,textarea:read-only,textarea:disabled {
8286
- cursor: not-allowed;
8287
- border-color: var(--border-default);
8288
- }
8289
- .required #label::after {
8290
- content: '*';
8291
- padding-left: 0.125em;
8292
- }
8293
- .icons {
8294
- display: flex;
8295
- justify-content: space-between;
8296
- height: 0;
8297
- }
8298
- .icons > * {
8299
- margin: 0.725em 0.875em;
8300
- box-sizing: border-box;
8301
- border-color: transparent;
8302
- border-width: 2px;
8303
- border-style: solid;
8304
- }
8305
- .icon-left input,
8306
- .icon-left select {
8307
- padding-left: calc(0.875em + 1em + 0.5em);
8308
- }
8309
- .icon-right input,
8310
- .icon-right select {
8311
- padding-right: calc(0.875em + 1em + 0.5em);
8312
- }
8313
- kol-input.error {
8314
- border-left: 3px solid var(--color-red);
8315
- padding-left: 1em;
8316
- }
8317
- kol-input.error input:focus,
8318
- kol-input.error select:focus,
8319
- kol-input.error textarea:focus {
8320
- outline-color: var(--color-red) !important;
8321
- }
8322
- kol-input.error kol-alert.error {
8323
- color: var(--color-red);
8324
- font-weight: 700;
8325
- }
8326
- kol-button-wc {
8327
- position: relative;
8328
- float: right;
8329
- z-index: 1000;
8330
- margin-top: -33px;
8331
- }
8332
- kol-button-wc button {
8333
- border: 1px solid var(--color-grey);
8334
- border-radius: 0.25rem;
8335
- box-sizing: border-box;
8336
- background-color: transparent;
8337
- cursor: pointer;
8338
- }
8339
- .icon-right kol-button-wc {
8340
- margin-right: 2.5em;
8341
- }
8342
- .disabled {
8343
- opacity: 0.33;
8344
- }
8345
- .icon-left input,
8346
- .icon-left select {
8347
- margin-left: 2em;
8348
- }
8349
- .icon-right input,
8350
- .icon-right select {
8351
- margin-right: 2em;
8352
- }
8353
- input[type='range'] {
8354
- appearance: none;
8355
- -webkit-appearance: none;
8356
- -moz-appearance: none;
8357
- }
8358
- input[type='range'] {
8359
- overflow: visible;
8360
- background-color: var(--color-ice);
8361
- border: 0;
8362
- height: 0.5rem;
8363
- padding: 0;
8364
- padding-bottom: 0;
8365
- margin-bottom: 0;
8366
- }
8367
- input[type='range']::-webkit-slider-thumb {
8368
- box-sizing: border-box;
8369
- background-color: var(--color-midnight);
8370
- height: 20px;
8371
- width: 20px;
8372
- border-radius: 20px;
8373
- cursor: pointer;
8374
- -webkit-appearance: none;
8375
- }
8376
- `,
8377
- "KOL-LINK-BUTTON": css$5`
8378
- :host {
8379
- --background-color: var(--color-gruen-dunkel);
8380
- --border-color: var(--color-gruen-dunkel);
8381
- --border-size: 1px;
8382
- --min-size: 2.75rem;
8383
- display: inline-block;
8384
- }
8385
- :is(button, a) {
8386
- outline: none;
8387
- &::before {
8388
- /* Render zero-width character as first element to set the baseline correctly. */
8389
- content: '\\200B';
8390
- }
8391
- }
8392
- :is(button, a) > kol-span-wc {
8393
- border-width: var(--border-size);
8394
- border-style: solid;
8395
- min-width: var(--min-size);
8396
- min-height: var(--min-size);
8397
- display: grid;
8398
- gap: 0.25em;
8399
- line-height: 1.5;
8400
- font-family: var(--font-family);
8401
- cursor: pointer;
8402
- font-size: var(--text-size);
8403
- align-items: center;
8404
- padding: 0.5rem 0.875rem !important;
8405
- justify-content: center;
8406
- font-style: normal;
8407
- text-align: center;
8408
- text-transform: uppercase;
8409
- width: inherit;
8410
- transition-duration: 0.5s;
8411
- transition-property: background-color, color, border-color;
8412
- }
8413
- :is(button, a):hover:enabled > kol-span-wc {
8414
- text-decoration: underline;
8415
- }
8416
- :is(button, a):focus > kol-span-wc {
8417
- outline: var(--color-focus) solid 2px;
8418
- }
8419
- .primary :is(button, a) > kol-span-wc,
8420
- .primary :is(button, a):active > kol-span-wc,
8421
- .primary :is(button, a):hover > kol-span-wc {
8422
- background-color: var(--background-color);
8423
- border-color: var(--border-color);
8424
- color: var(--color-weiss);
8425
- }
8426
- .secondary :is(button, a) > kol-span-wc,
8427
- .danger :is(button, a) > kol-span-wc,
8428
- .normal :is(button, a) > kol-span-wc,
8429
- .ghost :is(button, a) > kol-span-wc {
8430
- background-color: var(--color-weiss);
8431
- border-color: var(--color-gruen-hell);
8432
- color: var(--color-grau-dunkel);
8433
- }
8434
- .ghost :is(button, a) > kol-span-wc {
8435
- background-color: transparent;
8436
- color: inherit;
8437
- border: calc(var(--border-size) * 2) solid transparent;
8438
- }
8439
- .secondary :is(button, a):active > kol-span-wc,
8440
- .secondary :is(button, a):hover > kol-span-wc {
8441
- background-color: var(--background-color);
8442
- border-color: var(--background-color);
8443
- border-width: var(--border-size);
8444
- color: var(--color-weiss);
8445
- }
8446
- :is(button, a):disabled > kol-span-wc,
8447
- :is(button, a):disabled:hover > kol-span-wc {
8448
- background-color: var(--color-weiss);
8449
- border-color: var(--color-grau-hell);
8450
- color: var(--color-disabled);
8451
- cursor: not-allowed;
8452
- }
8453
- `,
8454
- "KOL-BUTTON-LINK": css$5`
8455
- button {
8456
- background-color: transparent;
8457
- border: 0;
8458
- cursor: pointer;
8459
- }
8460
- kol-link-button-wc {
8461
- display: inline-block;
8462
- }
8463
- button {
8464
- color: var(--textFontColorblau);
8465
- font-style: normal;
8466
- font-weight: 400;
8467
- display: inline-flex;
8468
- line-height: 1.5em;
8469
- text-decoration-line: none !important;
8470
- outline: none !important;
8471
- }
8472
- button:focus-within,
8473
- button:hover {
8474
- box-shadow: inset 0 -1px 0 0 currentColor;
8475
- }
8476
- kol-icon {
8477
- padding: 0 0.25em;
8478
- display: inline-block;
8479
- }
8480
- `,
8481
- "KOL-ABBR": css$5`
8482
- abbr {
8483
- text-decoration: none;
8484
- border-bottom: dotted var(--color-metal) 1px;
8485
- }
8486
- `,
8487
- "KOL-BREADCRUMB": css$5`
8488
- nav {
8489
- width: 100%;
8490
- }
8491
- ul {
8492
- margin: 0;
8493
- padding: 0;
8494
- list-style: none;
8495
- display: flex;
8496
- flex-wrap: wrap;
8497
- align-items: center;
8498
- }
8499
- kol-link {
8500
- display: inline;
8501
- }
8502
- :host kol-icon[exportparts*='separator'] {
8503
- padding: 0 0.5rem;
8504
- }
8505
- :host kol-icon::part(icon) {
8506
- font-family: 'Font Awesome 6 Free';
8507
- font-weight: 900;
8508
- font-size: 0.875rem !important;
8509
- }
8510
- :host kol-icon::part(icon)::before {
8511
- color: currentColor;
8512
- font-family: 'Font Awesome 6 Free';
8513
- }
8514
- :host ul > li:not(:first-child) kol-icon::part(icon)::before {
8515
- content: '\\f105';
8516
- }
8517
- :host li > kol-link > kol-link-wc > a {
8518
- color: red !important;
8519
- }
8520
- `,
8521
- "KOL-MODAL": css$5`
8522
- :host .overlay .modal {
8523
- max-height: calc(100% - 32px);
8524
- }
8525
- `,
8526
- "KOL-ICON": css$5`
8527
- :host {
8528
- color: inherit;
8529
- } /*! * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) * Copyright 2022 Fonticons, Inc. */
8530
- .fa {
8531
- font-family: var(--fa-style-family, 'Font Awesome 6 Free');
8532
- font-weight: var(--fa-style, 900);
8533
- }
8534
- .fa,
8535
- .fas,
8536
- .fa-solid,
8537
- .far,
8538
- .fa-regular,
8539
- .fal,
8540
- .fa-light,
8541
- .fat,
8542
- .fa-thin,
8543
- .fad,
8544
- .fa-duotone,
8545
- .fab,
8546
- .fa-brands {
8547
- -moz-osx-font-smoothing: grayscale;
8548
- -webkit-font-smoothing: antialiased;
8549
- display: var(--fa-display, inline-block);
8550
- font-style: normal;
8551
- font-variant: normal;
8552
- line-height: 1;
8553
- text-rendering: auto;
8554
- }
8555
- [class*='fa-'] {
8556
- font-style: 0.8rem;
8557
- } /************************************************************/
8558
- .fa-arrow-right::before {
8559
- content: '\\f061';
8560
- }
8561
- .fa-arrow-right-from-bracket::before {
8562
- content: '\\f08b';
8563
- }
8564
- .fa-clock::before {
8565
- content: '\\f017';
8566
- }
8567
- .fa-home::before {
8568
- content: '\\f015';
8569
- }
8570
- .fa-times-circle::before {
8571
- content: '\\f057';
8572
- }
8573
- .fa-exclamation-triangle::before {
8574
- content: '\\f071';
8575
- } /************************************************************/
8576
- .fa-chevron-left::before {
8577
- content: '\\f053';
8578
- }
8579
- .fa-chevron-right::before {
8580
- content: '\\f054';
8581
- }
8582
- .fa-download::before {
8583
- content: '\\f019';
8584
- }
8585
- fa-exclamation-triangle::before {
8586
- content: '\\f071';
8587
- }
8588
- .fa-file::before {
8589
- content: '\\f15b';
8590
- }
8591
- .fa-house::before {
8592
- content: '\\f015';
8593
- }
8594
- .fa-link::before {
8595
- content: '\\f0c1';
8596
- }
8597
- .fa-plus::before {
8598
- content: '\\2b';
8599
- }
8600
- .fa-search::before {
8601
- content: '\\f002';
8602
- }
8603
- .fa-times-circle::before {
8604
- content: '\\f057';
8605
- }
8606
- .fa-arrow-up-right-from-square::before {
8607
- content: '\\f08e';
8608
- }
8609
- .fa-user::before {
8610
- content: '\\f007';
8611
- }
8612
- .fa-xmark::before {
8613
- content: '\\f00d';
8614
- } /************************************************************/
8615
- :root,
8616
- :host {
8617
- --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free';
8618
- }
8619
- @font-face {
8620
- font-family: 'Font Awesome 6 Free';
8621
- font-style: normal;
8622
- font-weight: 400;
8623
- font-display: block;
8624
- src:
8625
- url('../webfonts/fa-regular-400.woff2') format('woff2'),
8626
- url('../webfonts/fa-regular-400.ttf') format('truetype');
8627
- }
8628
- .far,
8629
- .fa-regular {
8630
- font-family: 'Font Awesome 6 Free';
8631
- font-weight: 400;
8632
- }
8633
- :root,
8634
- :host {
8635
- --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
8636
- }
8637
- @font-face {
8638
- font-family: 'Font Awesome 6 Free';
8639
- font-style: normal;
8640
- font-weight: 900;
8641
- font-display: block;
8642
- src:
8643
- url('../webfonts/fa-solid-900.woff2') format('woff2'),
8644
- url('../webfonts/fa-solid-900.ttf') format('truetype');
8645
- }
8646
- .fas,
8647
- .fa-solid {
8648
- font-family: 'Font Awesome 6 Free';
8649
- font-weight: 900;
8650
- }
8651
- @font-face {
8652
- font-family: 'Font Awesome 5 Brands';
8653
- font-display: block;
8654
- font-weight: 400;
8655
- src:
8656
- url('../webfonts/fa-brands-400.woff2') format('woff2'),
8657
- url('../webfonts/fa-brands-400.ttf') format('truetype');
8658
- }
8659
- @font-face {
8660
- font-family: 'Font Awesome 5 Free';
8661
- font-display: block;
8662
- font-weight: 900;
8663
- src:
8664
- url('../webfonts/fa-solid-900.woff2') format('woff2'),
8665
- url('../webfonts/fa-solid-900.ttf') format('truetype');
8666
- }
8667
- @font-face {
8668
- font-family: 'Font Awesome 5 Free';
8669
- font-display: block;
8670
- font-weight: 400;
8671
- src:
8672
- url('../webfonts/fa-regular-400.woff2') format('woff2'),
8673
- url('../webfonts/fa-regular-400.ttf') format('truetype');
8674
- }
8675
- @font-face {
8676
- font-family: 'FontAwesome';
8677
- font-display: block;
8678
- src:
8679
- url('../webfonts/fa-solid-900.woff2') format('woff2'),
8680
- url('../webfonts/fa-solid-900.ttf') format('truetype');
8681
- }
8682
- @font-face {
8683
- font-family: 'FontAwesome';
8684
- font-display: block;
8685
- src:
8686
- url('../webfonts/fa-brands-400.woff2') format('woff2'),
8687
- url('../webfonts/fa-brands-400.ttf') format('truetype');
8688
- }
8689
- @font-face {
8690
- font-family: 'FontAwesome';
8691
- font-display: block;
8692
- src:
8693
- url('../webfonts/fa-regular-400.woff2') format('woff2'),
8694
- url('../webfonts/fa-regular-400.ttf') format('truetype');
8695
- unicode-range: U+F003, U+F006, U+F014, U+F016-F017, U+F01A-F01B, U+F01D, U+F022, U+F03E, U+F044, U+F046, U+F05C-F05D, U+F06E, U+F070, U+F087-F088, U+F08A,
8696
- U+F094, U+F096-F097, U+F09D, U+F0A0, U+F0A2, U+F0A4-F0A7, U+F0C5, U+F0C7, U+F0E5-F0E6, U+F0EB, U+F0F6-F0F8, U+F10C, U+F114-F115, U+F118-F11A,
8697
- U+F11C-F11D, U+F133, U+F147, U+F14E, U+F150-F152, U+F185-F186, U+F18E, U+F190-F192, U+F196, U+F1C1-F1C9, U+F1D9, U+F1DB, U+F1E3, U+F1EA, U+F1F7, U+F1F9,
8698
- U+F20A, U+F247-F248, U+F24A, U+F24D, U+F255-F25B, U+F25D, U+F271-F274, U+F278, U+F27B, U+F28C, U+F28E, U+F29C, U+F2B5, U+F2B7, U+F2BA, U+F2BC, U+F2BE,
8699
- U+F2C0-F2C1, U+F2C3, U+F2D0, U+F2D2, U+F2D4, U+F2DC;
8700
- }
8701
- @font-face {
8702
- font-family: 'FontAwesome';
8703
- font-display: block;
8704
- src:
8705
- url('../webfonts/fa-v4compatibility.woff2') format('woff2'),
8706
- url('../webfonts/fa-v4compatibility.ttf') format('truetype');
8707
- unicode-range: U+F041, U+F047, U+F065-F066, U+F07D-F07E, U+F080, U+F08B, U+F08E, U+F090, U+F09A, U+F0AC, U+F0AE, U+F0B2, U+F0D0, U+F0D6, U+F0E4, U+F0EC,
8708
- U+F10A-F10B, U+F123, U+F13E, U+F148-F149, U+F14C, U+F156, U+F15E, U+F160-F161, U+F163, U+F175-F178, U+F195, U+F1F8, U+F219, U+F250, U+F252, U+F27A;
8709
- }
8710
- `,
8711
- "KOL-SKIP-NAV": css$5`
8712
- kol-link-wc > a > kol-span-wc {
8713
- border-radius: var(--a11y-min-size);
8714
- border-style: solid;
8715
- border-width: 2px;
8716
- gap: 0.5rem;
8717
- line-height: 1rem;
8718
- padding: 8px 14px;
8719
- background-color: var(--color-ocean);
8720
- border-color: var(--color-ocean);
8721
- color: var(--color-white);
8722
- cursor: pointer;
8723
- }
8724
- `,
8725
- "KOL-LINK-GROUP": css$5`
8726
- ul {
8727
- list-style: none;
8728
- margin: 0px;
8729
- padding: 0px;
8730
- }
8731
- nav.horizontal ul {
8732
- display: flex;
8733
- flex-wrap: wrap;
8734
- }
8735
- nav.horizontal li {
8736
- list-style: none;
8737
- margin-left: 1.25rem;
8738
- margin-right: 0.25rem;
8739
- }
8740
- nav.horizontal li:first-child {
8741
- margin-left: 0;
8742
- }
8743
- nav.horizontal li:last-child {
8744
- margin-right: 0;
8745
- }
8746
- nav.vertical li {
8747
- margin-left: 1.75rem;
8748
- margin-right: 0.5rem;
8749
- }
8750
- li.list-none {
8751
- list-style-type: none !important;
8752
- margin-left: 0;
8753
- }
8754
- `,
8755
- "KOL-TOOLTIP": css$5`
8756
- :host {
8757
- --kolibri-font-size: var(--textFontSize);
8758
- }
8759
- `
6053
+ var css_248z$z = "@layer kol-theme-component {\n .alert {\n background-color: white;\n border: 1px solid var(--color-black);\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);\n }\n .heading-icon {\n align-items: center;\n display: flex;\n flex-shrink: 0;\n font-size: 1.5rem;\n height: 100%;\n justify-content: center;\n width: 2.5rem;\n }\n .default .heading-icon {\n background: var(--color-secondary-40);\n }\n .info .heading-icon {\n background: var(--color-blue);\n color: var(--color-white);\n }\n .success .heading-icon {\n background: var(--color-green);\n color: var(--color-white);\n }\n .warning .heading-icon {\n background: var(--color-yellow);\n }\n .error .heading-icon {\n background: var(--color-red);\n color: var(--color-white);\n }\n .heading-content {\n padding: 0.625rem;\n }\n .headline {\n margin: 0 0 0.625rem 0;\n font-size: 1.3125rem; /* h3 font-size */\n }\n .close {\n align-self: flex-start;\n }\n}";
6054
+
6055
+ var css_248z$y = "@layer kol-theme-component {\n :host {\n display: inline-block;\n }\n kol-span-wc {\n align-items: center;\n border-radius: 0.3125rem;\n display: grid;\n gap: 0.5rem;\n line-height: 1.25rem;\n padding: 0.25rem 0.75rem;\n }\n kol-span-wc span {\n display: flex;\n gap: 0.25rem;\n }\n}";
6056
+
6057
+ var css_248z$x = "@layer kol-theme-component {\n nav {\n width: 100%;\n }\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n }\n kol-link {\n display: inline;\n }\n :host kol-icon[exportparts*=separator] {\n padding: 0 0.5rem;\n }\n :host kol-icon::part(icon) {\n font-family: \"Font Awesome 6 Free\";\n font-weight: 900;\n font-size: 0.875rem !important;\n }\n :host kol-icon::part(icon)::before {\n color: currentColor;\n font-family: \"Font Awesome 6 Free\";\n }\n :host ul > li:not(:first-child) kol-icon::part(icon)::before {\n content: \"\\f105\";\n }\n :host li > kol-link > kol-link-wc > a {\n color: red !important;\n }\n}";
6058
+
6059
+ var css_248z$w = "@charset \"UTF-8\";\n@layer kol-theme-component {\n :host {\n display: inline-block;\n }\n button {\n color: inherit;\n outline: none;\n }\n button::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"​\";\n }\n button > kol-span-wc {\n border: 1px solid;\n font-size: 1.125rem;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.5rem 0.875rem;\n text-align: center;\n text-transform: uppercase;\n }\n button:hover:not(:disabled) .span-label {\n text-decoration: underline;\n }\n button:focus > kol-span-wc {\n outline: var(--color-blue) solid 2px;\n outline-offset: 2px;\n }\n .primary button > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-white);\n }\n .secondary button > kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-primary-60);\n }\n .secondary button:hover > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-white);\n }\n .ghost button > kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-primary);\n text-transform: unset;\n }\n :is(.primary, .secondary, .ghost) button:disabled > kol-span-wc {\n color: var(--color-disabled-gray);\n }\n :is(.primary, .secondary) button:disabled > kol-span-wc {\n background: var(--color-secondary-40);\n border-color: var(--color-disabled-gray);\n }\n}";
6060
+
6061
+ var css_248z$v = "@layer kol-theme-component {\n div {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5em;\n }\n}";
6062
+
6063
+ var css_248z$u = "@layer kol-theme-component {\n button {\n color: var(--color-primary);\n text-decoration-thickness: 1px;\n text-decoration: none;\n }\n button:not(:disabled):hover, button:focus {\n text-decoration: underline;\n }\n button:focus-within {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .external-link-icon {\n margin-left: 0.25rem;\n }\n button:disabled {\n color: var(--color-disabled-gray);\n cursor: not-allowed;\n }\n}";
6064
+
6065
+ var css_248z$t = "@layer kol-theme-component {\n .card {\n background-color: var(--color-white);\n border: 1px solid var(--color-primary); /* Not part of the design system, necessary because box-shadow alone is not accessible. */\n box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);\n margin: 2rem 0;\n }\n .header {\n border-bottom: 1px solid var(--color-primary);\n padding: 1.3125rem 2rem; /* vertical padding copied from h3 */\n }\n .header .headline {\n font-size: 1.3125rem; /* h3 font-size */\n font-weight: normal;\n margin: 0;\n }\n .content {\n padding: 2rem 2rem 2.5rem;\n }\n}";
6066
+
6067
+ var css_248z$s = "@layer kol-theme-component {\n details {\n display: grid;\n width: 100%;\n }\n summary {\n margin: 0;\n padding: 0;\n }\n summary span {\n margin-left: 0.25rem;\n text-decoration: underline;\n }\n summary span:hover {\n text-decoration-thickness: 0.25em;\n }\n details > kol-indented-text {\n margin: 0.25em 0 0 0.6em;\n }\n}";
6068
+
6069
+ var css_248z$r = "/* NOTE: Alle ':root' CSS properties sollten in KoliBri zu ':host' kopiert werden und umgekehrt. Damit vereinheitlicht man alle Variablen auf beiden Seiten und kann diese dann individuell nutzen.*/ /* colors */\n@layer kol-theme-global {\n :root,\n :host {\n --color-primary: #005c45;\n --color-primary-60: #00854a;\n --color-primary-40: #99beb5;\n --color-primary-20: #ccdeda;\n --color-secondary: #576164;\n --color-secondary-40: #e5e8e9;\n --color-secondary-20: #f2f3f4;\n --color-secondary-0: #ffffff;\n --color-blue: #0077b6;\n --color-petrol: #007194;\n --color-green: #00854a;\n --color-yellow: #f9e03a;\n --color-red: #c0003c;\n --color-disabled-gray: #595f73;\n --color-black: #000;\n --color-white: #fff;\n }\n :root,\n :host {\n --font-family: \"BundesSans Web\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n \tsans-serif;\n --font-family-serif: \"BundesSerif Web\", var(--font-family);\n }\n :host {\n color: var(--color-black);\n font-family: var(--font-family);\n }\n :host * {\n box-sizing: border-box;\n }\n a,\n button,\n input,\n option,\n select,\n textarea {\n hyphens: auto;\n letter-spacing: inherit;\n }\n summary {\n hyphens: auto;\n letter-spacing: inherit;\n }\n *[tabindex]:focus,\n kol-input:not(.checkbox, .radio) .input:focus-within,\n summary:focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n kol-tooltip-wc {\n font-size: 1.125rem;\n }\n kol-tooltip-wc .tooltip-area {\n background-color: var(--color-white);\n }\n kol-tooltip-wc .tooltip-arrow {\n background-color: var(--color-primary);\n }\n kol-tooltip-wc .tooltip-content {\n padding: 0.5rem;\n border: 2px solid var(--color-primary);\n box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.5em;\n }\n kol-span-wc,\n kol-span-wc > span {\n gap: 0.3em;\n }\n}";
6070
+
6071
+ var css_248z$q = "@layer kol-theme-component {\n .headline {\n margin-top: 0;\n letter-spacing: 0.5;\n }\n h1 {\n font-size: 2.5rem;\n line-height: 2.8125rem;\n font-weight: normal;\n }\n h2 {\n font-size: 2rem;\n line-height: 2.3125rem;\n font-weight: normal;\n }\n h3 {\n font-size: 1.3125rem;\n line-height: 1.6875rem;\n font-weight: bold;\n }\n h4 {\n font-size: 1.125rem;\n line-height: 1.6875rem;\n font-weight: bold;\n }\n h5 {\n color: red;\n }\n h5:after {\n content: \" (H5 is not part of the design system.)\";\n }\n h6 {\n color: red;\n }\n h6:after {\n content: \" (H6 is not part of the design system.)\";\n }\n}";
6072
+
6073
+ var css_248z$p = "@layer kol-theme-component {\n :host {\n color: inherit;\n }\n}";
6074
+
6075
+ var css_248z$o = "@layer kol-theme-component {\n :host > div {\n padding: 0.9375rem;\n background-color: var(--color-secondary-20);\n border-left: 6px solid var(--color-primary);\n }\n}";
6076
+
6077
+ var css_248z$n = "@layer kol-theme-component {\n :host {\n --border-width: 1px;\n --spacing: 0.25rem;\n }\n kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n }\n kol-input:not(.hide-label) {\n grid-template-columns: calc(6 * var(--spacing)) auto;\n }\n kol-input.switch:not(.hide-label) {\n grid-template-columns: calc(13 * var(--spacing)) auto;\n }\n kol-input: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}";
6078
+
6079
+ var css_248z$m = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6080
+
6081
+ var css_248z$l = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6082
+
6083
+ var css_248z$k = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6084
+
6085
+ var css_248z$j = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n input {\n padding-top: 0.625rem;\n }\n}";
6086
+
6087
+ var css_248z$i = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6088
+
6089
+ var css_248z$h = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6090
+
6091
+ var css_248z$g = "@layer kol-theme-component {\n kol-input: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}";
6092
+
6093
+ var css_248z$f = "/* https://www.cssportal.com/style-input-range/ */\n/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n input {\n border: 1px solid var(--color-primary);\n }\n input:focus {\n outline: none;\n }\n input:hover {\n border-color: var(--color-primary-60);\n }\n .inputs-wrapper {\n gap: 0.5rem;\n }\n}";
6094
+
6095
+ var css_248z$e = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n input {\n border: none;\n opacity: 1;\n background: transparent;\n }\n input:first-child {\n padding-left: 0.375rem;\n }\n input:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6096
+
6097
+ var css_248z$d = "@charset \"UTF-8\";\n@layer kol-theme-component {\n :host {\n display: inline-block;\n }\n a {\n color: inherit;\n outline: none;\n }\n a::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"​\";\n }\n a > kol-span-wc {\n border: 1px solid;\n font-size: 1.125rem;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.5rem 0.875rem;\n text-align: center;\n text-transform: uppercase;\n }\n a:hover:not(:disabled) .span-label {\n text-decoration: underline;\n }\n a:focus > kol-span-wc {\n outline: var(--color-blue) solid 2px;\n outline-offset: 2px;\n }\n .primary a > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-white);\n }\n .secondary a > kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-primary-60);\n }\n .secondary a:hover > kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-white);\n }\n .ghost a > kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-primary);\n text-transform: unset;\n }\n :is(.primary, .secondary, .ghost) a:disabled > kol-span-wc {\n color: var(--color-disabled-gray);\n }\n :is(.primary, .secondary) a:disabled > kol-span-wc {\n background: var(--color-secondary-40);\n border-color: var(--color-disabled-gray);\n }\n}";
6098
+
6099
+ var css_248z$c = "@layer kol-theme-component {\n a {\n color: var(--color-primary);\n text-decoration-thickness: 1px;\n text-decoration: none;\n }\n a:not(:disabled):hover, a:focus {\n text-decoration: underline;\n }\n a:focus-within {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .external-link-icon {\n margin-left: 0.25rem;\n }\n}";
6100
+
6101
+ var css_248z$b = "@layer kol-theme-component {\n ul {\n list-style: none;\n margin: 0px;\n padding: 0px;\n }\n nav.horizontal ul {\n display: flex;\n flex-wrap: wrap;\n }\n nav.horizontal li {\n list-style: none;\n margin-left: 1.25rem;\n margin-right: 0.25rem;\n }\n nav.horizontal li:first-child {\n margin-left: 0;\n }\n nav.horizontal li:last-child {\n margin-right: 0;\n }\n nav.vertical li {\n margin-left: 1.75rem;\n margin-right: 0.5rem;\n }\n li.list-none {\n list-style-type: none !important;\n margin-left: 0;\n }\n}";
6102
+
6103
+ var css_248z$a = "@layer kol-theme-component {\n :host .overlay .modal {\n max-height: calc(100% - 32px);\n }\n}";
6104
+
6105
+ var css_248z$9 = "@layer kol-theme-component {\n :host {\n font-size: 1.3125rem; /* h3 font-size */\n }\n :is(a, button) {\n color: var(--color-black);\n display: block;\n margin-left: 0.75rem;\n padding: 0.3125rem;\n text-decoration: none;\n }\n :is(a, button):hover {\n background-color: var(--color-primary);\n color: var(--color-white);\n }\n :is(a, button):focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n}";
6106
+
6107
+ var css_248z$8 = "@layer kol-theme-component {\n .navigation-list {\n gap: unset;\n }\n .navigation-list > li {\n min-width: var(--a11y-min-size);\n text-align: center;\n }\n .icon::part(icon) {\n font-family: \"Font Awesome 6 Free\";\n font-weight: 900;\n }\n .first .icon::part(icon)::before {\n content: \"\\f100\";\n }\n .previous .icon::part(icon)::before {\n content: \"\\f104\";\n }\n .next .icon::part(icon)::before {\n content: \"\\f105\";\n }\n .last .icon::part(icon)::before {\n content: \"\\f101\";\n }\n .button {\n cursor: pointer;\n display: flex;\n height: 2.75rem;\n width: 2.75rem;\n outline: none;\n }\n .button > kol-span-wc {\n margin: auto;\n display: flex;\n background-color: var(--color-white);\n border: 1px solid var(--color-primary);\n color: var(--color-black);\n font-size: 1.125rem;\n font-weight: normal;\n height: 1.875rem;\n width: 1.875rem;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .button > kol-span-wc > * {\n margin: auto;\n }\n .button > kol-span-wc .icon {\n width: 1.5em;\n height: 1.5em;\n }\n .button:hover:enabled > kol-span-wc {\n background-color: var(--color-primary-20);\n border-color: var(--color-primary-60);\n color: var(--color-black);\n }\n .button:focus > kol-span-wc {\n outline: var(--color-blue) solid 2px;\n outline-offset: 2px;\n }\n .button:disabled > kol-span-wc, .button:disabled:hover > kol-span-wc {\n background-color: var(--color-secondary-40);\n border-color: var(--color-secondary);\n color: var(--color-secondary);\n cursor: not-allowed;\n }\n .selected button {\n border-radius: 1.5em;\n border: none;\n color: var(--color-midnight) !important;\n font-weight: 700;\n line-height: normal;\n }\n}";
6108
+
6109
+ var css_248z$7 = "@layer kol-theme-component {\n :host progress,\n :host span {\n display: block;\n height: 0px;\n overflow: hidden;\n width: 0px;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-ice);\n }\n svg line:last-child,\n svg circle:last-child {\n stroke: var(--color-midnight);\n fill: transparent;\n }\n progress {\n display: none;\n }\n}";
6110
+
6111
+ var css_248z$6 = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n select {\n border: none;\n opacity: 1;\n background: transparent;\n }\n select:first-child {\n padding-left: 0.375rem;\n }\n select:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6112
+
6113
+ var css_248z$5 = "@layer kol-theme-component {\n a {\n color: var(--color-primary);\n text-decoration-thickness: 1px;\n text-decoration: none;\n }\n a:not(:disabled):hover, a:focus {\n text-decoration: underline;\n }\n a:focus-within {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .external-link-icon {\n margin-left: 0.25rem;\n }\n a {\n display: block;\n }\n}";
6114
+
6115
+ var css_248z$4 = "@layer kol-theme-component {\n .cycle {\n padding: 0.125rem;\n }\n .cycle span {\n background-color: #fc0;\n }\n}";
6116
+
6117
+ var css_248z$3 = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n }\n :host > div:first-child {\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n border-collapse: collapse;\n }\n caption {\n height: auto;\n text-align: left;\n }\n /* visuell verstecken */\n caption {\n clip: rect(1px, 1px, 1px, 1px);\n clip-path: inset(50%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n }\n table,\n tr,\n th,\n td {\n border: 0 solid var(--color-white);\n }\n tr {\n border-top-width: 2px;\n }\n th {\n background-color: var(--color-primary);\n color: var(--color-white);\n font-size: 1.5rem;\n }\n tbody > tr:nth-child(odd) {\n background-color: var(--color-secondary-20);\n }\n tbody > tr:hover {\n background-color: var(--color-primary);\n color: var(--color-white);\n }\n th,\n td {\n border-right-width: 2px;\n padding: 0.25em 0.5em;\n }\n th > div {\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n gap: 0.25em;\n }\n .pagination {\n padding: 0.5em;\n gap: 1rem;\n }\n th kol-button button {\n padding: 0.5rem;\n }\n /* default: [aria-sort=\"none\"] */\n [data-sort] kol-button::part(icon)::before {\n font-family: \"Font Awesome 6 Free\";\n font-weight: 900;\n color: var(--color-white);\n content: \"\\f0dc\";\n }\n [data-sort=sort-ASC] kol-button::part(icon)::before {\n content: \"\\f0de\";\n }\n [data-sort=sort-DESC] kol-button::part(icon)::before {\n content: \"\\f0dd\";\n }\n}";
6118
+
6119
+ var css_248z$2 = "@layer kol-theme-component {\n .tabs-button-group {\n border-bottom: 1px solid var(--color-primary);\n gap: 2rem;\n padding: 0 2rem;\n }\n .button {\n color: var(--color-primary);\n padding: 0 0.9375rem;\n font-family: var(--font-family-serif);\n }\n .button.selected {\n background: var(--color-primary);\n color: var(--color-white);\n }\n .button:not(:disabled):hover {\n background: var(--color-primary);\n color: var(--color-white);\n text-decoration: underline;\n }\n .button:focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n .button:disabled {\n color: var(--color-disabled-gray);\n cursor: not-allowed;\n }\n .tabs-content {\n padding: 2rem 2rem 2.5rem; /* Card paddings */\n }\n}";
6120
+
6121
+ var css_248z$1 = "/* Common styles for all type of inputs */\n@layer kol-theme-component {\n kol-input {\n gap: 0.625rem;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1rem;\n }\n kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n order: 3;\n }\n .input-label {\n font-weight: 700;\n opacity: 1;\n order: 1;\n }\n .input {\n border: 1px solid var(--color-primary);\n order: 2;\n padding: 0 0.5rem;\n }\n .input:hover {\n border-color: var(--color-primary-60);\n }\n kol-input.error .input {\n border-color: var(--color-red);\n }\n kol-input.disabled .input {\n border-color: var(--color-disabled-gray);\n background: var(--color-secondary-40);\n }\n .hint {\n order: 4;\n font-size: 0.875rem;\n font-style: italic;\n }\n textarea {\n border: none;\n opacity: 1;\n background: transparent;\n }\n textarea:first-child {\n padding-left: 0.375rem;\n }\n textarea:last-child {\n padding-right: 0.375rem;\n }\n .input > kol-icon {\n width: 1.5rem;\n }\n}";
6122
+
6123
+ var css_248z = "@layer kol-theme-component {\n :host {\n top: 4.375rem;\n left: 50%;\n transform: translateX(-50%);\n }\n .toast {\n background: #fff;\n margin-top: 0.75rem;\n }\n}";
6124
+
6125
+ const BZStv1 = KoliBri.createTheme("bzst-v1", {
6126
+ GLOBAL: css_248z$r,
6127
+ "KOL-ACCORDION": css_248z$A,
6128
+ "KOL-ALERT": css_248z$z,
6129
+ "KOL-BADGE": css_248z$y,
6130
+ "KOL-BREADCRUMB": css_248z$x,
6131
+ "KOL-BUTTON": css_248z$w,
6132
+ "KOL-BUTTON-GROUP": css_248z$v,
6133
+ "KOL-BUTTON-LINK": css_248z$u,
6134
+ "KOL-CARD": css_248z$t,
6135
+ "KOL-DETAILS": css_248z$s,
6136
+ "KOL-HEADING": css_248z$q,
6137
+ "KOL-ICON": css_248z$p,
6138
+ "KOL-INDENTED-TEXT": css_248z$o,
6139
+ "KOL-INPUT-CHECKBOX": css_248z$n,
6140
+ "KOL-INPUT-COLOR": css_248z$m,
6141
+ "KOL-INPUT-DATE": css_248z$l,
6142
+ "KOL-INPUT-EMAIL": css_248z$k,
6143
+ "KOL-INPUT-FILE": css_248z$j,
6144
+ "KOL-INPUT-NUMBER": css_248z$i,
6145
+ "KOL-INPUT-PASSWORD": css_248z$h,
6146
+ "KOL-INPUT-RADIO": css_248z$g,
6147
+ "KOL-INPUT-RANGE": css_248z$f,
6148
+ "KOL-INPUT-TEXT": css_248z$e,
6149
+ "KOL-LINK": css_248z$c,
6150
+ "KOL-LINK-BUTTON": css_248z$d,
6151
+ "KOL-LINK-GROUP": css_248z$b,
6152
+ "KOL-MODAL": css_248z$a,
6153
+ "KOL-NAV": css_248z$9,
6154
+ "KOL-PAGINATION": css_248z$8,
6155
+ "KOL-PROGRESS": css_248z$7,
6156
+ "KOL-SELECT": css_248z$6,
6157
+ "KOL-SKIP-NAV": css_248z$5,
6158
+ "KOL-SPIN": css_248z$4,
6159
+ "KOL-TABLE": css_248z$3,
6160
+ "KOL-TABS": css_248z$2,
6161
+ "KOL-TEXTAREA": css_248z$1,
6162
+ "KOL-TOAST-CONTAINER": css_248z
8760
6163
  });
8761
6164
 
8762
6165
  const css$4 = (input) => input.join(``);
@@ -8854,7 +6257,7 @@ const BMF = KoliBri.createTheme("bmf", {
8854
6257
  }
8855
6258
  kol-tooltip-wc .tooltip-area {
8856
6259
  background-color: var(--color-white);
8857
- color: var(--color-metal);
6260
+ color: var(--color-black);
8858
6261
  }
8859
6262
  kol-tooltip-wc .tooltip-content {
8860
6263
  border-radius: var(--border-radius);
@@ -8916,6 +6319,12 @@ const BMF = KoliBri.createTheme("bmf", {
8916
6319
  border-color: var(--color-red);
8917
6320
  color: var(--color-white);
8918
6321
  }
6322
+ .success :is(a, button) > kol-span-wc,
6323
+ .success :is(a, button):disabled:hover > kol-span-wc {
6324
+ background-color: var(--color-green);
6325
+ border-color: var(--color-green);
6326
+ color: var(--color-white);
6327
+ }
8919
6328
  .ghost :is(a, button) > kol-span-wc,
8920
6329
  .ghost :is(a, button):disabled:hover > kol-span-wc {
8921
6330
  border-color: var(--color-white);
@@ -8931,6 +6340,8 @@ const BMF = KoliBri.createTheme("bmf", {
8931
6340
  .normal :is(a, button):hover > kol-span-wc,
8932
6341
  .danger :is(a, button):active > kol-span-wc,
8933
6342
  .danger :is(a, button):hover > kol-span-wc,
6343
+ .success :is(a, button):active > kol-span-wc,
6344
+ .success :is(a, button):hover > kol-span-wc,
8934
6345
  .ghost :is(a, button):active > kol-span-wc,
8935
6346
  .ghost :is(a, button):hover > kol-span-wc {
8936
6347
  background-color: var(--color-ocean);
@@ -8951,6 +6362,7 @@ const BMF = KoliBri.createTheme("bmf", {
8951
6362
  .secondary :is(a, button):active > kol-span-wc,
8952
6363
  .normal :is(a, button):active > kol-span-wc,
8953
6364
  .danger :is(a, button):active > kol-span-wc,
6365
+ .success :is(a, button):active > kol-span-wc,
8954
6366
  .ghost :is(a, button):active > kol-span-wc {
8955
6367
  border-color: var(--color-white);
8956
6368
  box-shadow: none;
@@ -8977,6 +6389,14 @@ const BMF = KoliBri.createTheme("bmf", {
8977
6389
  background-color: transparent;
8978
6390
  border-color: transparent;
8979
6391
  }
6392
+ /** CUSTOM_CLASS */
6393
+ :is(a, button).icon-only > kol-span-wc {
6394
+ padding: 8px;
6395
+ width: unset;
6396
+ }
6397
+ :is(a, button).icon-only > kol-span-wc > span > span {
6398
+ display: block;
6399
+ }
8980
6400
  `,
8981
6401
  "KOL-INPUT-TEXT": css$4`
8982
6402
  kol-input {
@@ -9038,7 +6458,7 @@ const BMF = KoliBri.createTheme("bmf", {
9038
6458
  content: '*';
9039
6459
  padding-left: 0.125em;
9040
6460
  }
9041
- kol-input.error {
6461
+ kol-input.error:not(.hidden-error) {
9042
6462
  border-left: 3px solid var(--color-red);
9043
6463
  padding-left: 1em;
9044
6464
  }
@@ -9117,7 +6537,7 @@ const BMF = KoliBri.createTheme("bmf", {
9117
6537
  content: '*';
9118
6538
  padding-left: 0.125em;
9119
6539
  }
9120
- kol-input.error {
6540
+ kol-input.error:not(.hidden-error) {
9121
6541
  border-left: 3px solid var(--color-red);
9122
6542
  padding-left: 1em;
9123
6543
  }
@@ -9196,7 +6616,7 @@ const BMF = KoliBri.createTheme("bmf", {
9196
6616
  content: '*';
9197
6617
  padding-left: 0.125em;
9198
6618
  }
9199
- kol-input.error {
6619
+ kol-input.error:not(.hidden-error) {
9200
6620
  border-left: 3px solid var(--color-red);
9201
6621
  padding-left: 1em;
9202
6622
  }
@@ -9275,7 +6695,7 @@ const BMF = KoliBri.createTheme("bmf", {
9275
6695
  content: '*';
9276
6696
  padding-left: 0.125em;
9277
6697
  }
9278
- kol-input.error {
6698
+ kol-input.error:not(.hidden-error) {
9279
6699
  border-left: 3px solid var(--color-red);
9280
6700
  padding-left: 1em;
9281
6701
  }
@@ -9355,7 +6775,7 @@ const BMF = KoliBri.createTheme("bmf", {
9355
6775
  content: '*';
9356
6776
  padding-left: 0.125em;
9357
6777
  }
9358
- kol-input.error {
6778
+ kol-input.error:not(.hidden-error) {
9359
6779
  border-left: 3px solid var(--color-red);
9360
6780
  padding-left: 1em;
9361
6781
  }
@@ -9441,7 +6861,7 @@ const BMF = KoliBri.createTheme("bmf", {
9441
6861
  content: '*';
9442
6862
  padding-left: 0.125em;
9443
6863
  }
9444
- kol-input.error {
6864
+ kol-input.error:not(.hidden-error) {
9445
6865
  border-left: 3px solid var(--color-red);
9446
6866
  padding-left: 1em;
9447
6867
  }
@@ -9533,7 +6953,7 @@ const BMF = KoliBri.createTheme("bmf", {
9533
6953
  content: '*';
9534
6954
  padding-left: 0.125em;
9535
6955
  }
9536
- kol-input.error {
6956
+ kol-input.error:not(.hidden-error) {
9537
6957
  border-left: 3px solid var(--color-red);
9538
6958
  padding-left: 1em;
9539
6959
  }
@@ -9844,31 +7264,31 @@ const BMF = KoliBri.createTheme("bmf", {
9844
7264
  }
9845
7265
  `,
9846
7266
  "KOL-HEADING": css$4`
9847
- h1,
9848
- h2,
9849
- h3,
9850
- h4,
9851
- h5,
9852
- h6 {
7267
+ .headline-h1,
7268
+ .headline-h2,
7269
+ .headline-h3,
7270
+ .headline-h4,
7271
+ .headline-h5,
7272
+ .headline-h6 {
9853
7273
  color: inherit;
9854
7274
  font-style: normal;
9855
7275
  margin: 0;
9856
7276
  padding: 0;
9857
7277
  }
9858
- h1,
9859
- h2,
9860
- h3 {
7278
+ .headline-h1,
7279
+ .headline-h2,
7280
+ .headline-h3 {
9861
7281
  font-weight: 700;
9862
7282
  }
9863
- h1 {
7283
+ .headline-h1 {
9864
7284
  font-size: 1.5rem;
9865
7285
  line-height: 1.75rem;
9866
7286
  }
9867
- h2 {
7287
+ .headline-h2 {
9868
7288
  font-size: 1.25rem;
9869
7289
  line-height: 1.75rem;
9870
7290
  }
9871
- h3 {
7291
+ .headline-h3 {
9872
7292
  font-size: 1.125rem;
9873
7293
  line-height: 1.5rem;
9874
7294
  }
@@ -10100,7 +7520,7 @@ const BMF = KoliBri.createTheme("bmf", {
10100
7520
  content: '*';
10101
7521
  padding-left: 0.125em;
10102
7522
  }
10103
- kol-input.error {
7523
+ kol-input.error:not(.hidden-error) {
10104
7524
  border-left: 3px solid var(--color-red);
10105
7525
  padding-left: 1em;
10106
7526
  }
@@ -10207,7 +7627,7 @@ const BMF = KoliBri.createTheme("bmf", {
10207
7627
  content: '*';
10208
7628
  padding-left: 0.125em;
10209
7629
  }
10210
- kol-input.error {
7630
+ kol-input.error:not(.hidden-error) {
10211
7631
  border-left: 3px solid var(--color-red);
10212
7632
  padding-left: 1em;
10213
7633
  }
@@ -10520,11 +7940,11 @@ const BMF = KoliBri.createTheme("bmf", {
10520
7940
  width: 100%;
10521
7941
  min-height: 44px;
10522
7942
  }
10523
- :host kol-input.default {
7943
+ :host kol-input.default:not(.hide-label) {
10524
7944
  grid-template-columns: 1.5rem auto;
10525
7945
  gap: 0.4em;
10526
7946
  }
10527
- :host kol-input.switch {
7947
+ :host kol-input.switch:not(.hide-label) {
10528
7948
  grid-template-columns: 3.5rem auto;
10529
7949
  gap: 0.4em;
10530
7950
  }
@@ -10550,7 +7970,7 @@ const BMF = KoliBri.createTheme("bmf", {
10550
7970
  padding-top: 0.25em;
10551
7971
  grid-column: span 2 / auto;
10552
7972
  }
10553
- :host kol-input.error {
7973
+ :host kol-input.error:not(.hidden-error) {
10554
7974
  border-left: 3px solid var(--color-red);
10555
7975
  padding-left: 1em;
10556
7976
  }
@@ -10569,7 +7989,7 @@ const BMF = KoliBri.createTheme("bmf", {
10569
7989
  border-color: var(--color-grey);
10570
7990
  border-width: 2px;
10571
7991
  border-style: solid;
10572
- border-radius: 5px; /* padding: 10px 14px; */
7992
+ border-radius: 5px;
10573
7993
  line-height: 24px;
10574
7994
  font-size: 1rem;
10575
7995
  }
@@ -10606,48 +8026,36 @@ const BMF = KoliBri.createTheme("bmf", {
10606
8026
  background-color: var(--color-midnight);
10607
8027
  border-color: var(--color-midnight);
10608
8028
  }
8029
+ :host kol-input.default .checkbox-container {
8030
+ justify-content: flex-start;
8031
+ }
8032
+ :host kol-input.default input[type='checkbox']:indeterminate {
8033
+ background-color: var(--color-midnight);
8034
+ border-color: var(--color-midnight);
8035
+ }
8036
+ :host kol-input.default .icon {
8037
+ color: var(--color-white);
8038
+ margin: -0.125rem 0 0 0.25rem; /* visually align */
8039
+ }
10609
8040
  :host kol-input.default input[type='checkbox'] {
10610
8041
  border-radius: var(--border-radius);
10611
8042
  height: calc(6 * var(--spacing));
10612
8043
  min-width: calc(6 * var(--spacing));
10613
8044
  width: calc(6 * var(--spacing));
10614
8045
  }
10615
- :host kol-input.default input[type='checkbox']:before {
10616
- border-radius: 1.5em;
10617
- background-color: transparent;
10618
- display: block;
10619
- height: calc(6 * var(--spacing));
10620
- position: relative;
10621
- width: calc(6 * var(--spacing));
10622
- }
10623
- :host kol-input.default input[type='checkbox']:checked:before {
10624
- border-right-width: 3px;
10625
- border-bottom-width: 3px;
10626
- left: calc(1.5 * var(--spacing) - 2px);
10627
- top: calc(2.85 * var(--spacing) - 2px);
10628
- transform: rotate(40deg) translate(-50%, -50%);
10629
- background-color: transparent;
10630
- border-width: 0px 3px 3px 0px;
10631
- border-color: white;
10632
- border-radius: 1px;
10633
- border-style: solid;
10634
- height: calc(3 * var(--spacing));
10635
- width: calc(1.5 * var(--spacing));
10636
- }
10637
- :host kol-input.default input[type='checkbox']:indeterminate {
10638
- --tw-bg-opacity: 1;
10639
- background-color: var(--color-midnight);
10640
- }
10641
- :host kol-input.default input[type='checkbox']:indeterminate:before {
10642
- background-color: var(--color-white);
10643
- height: 0.125rem;
10644
- top: 0.6rem;
10645
- left: 0.25rem;
10646
- width: calc(3 * var(--spacing));
10647
- transform: inherit;
10648
- }
10649
- :host kol-input.default input[type='checkbox']:checked:indeterminate:before {
10650
- border-width: 0px 1px 1px 0px;
8046
+ .default {
8047
+ .icon::part(icon) {
8048
+ font-family: 'Font Awesome 6 Free';
8049
+ font-weight: 900;
8050
+ }
8051
+
8052
+ &.checked .icon::part(icon)::before {
8053
+ content: '\\f00c';
8054
+ }
8055
+
8056
+ &.indeterminate .icon::part(icon)::before {
8057
+ content: '\\f068';
8058
+ }
10651
8059
  }
10652
8060
  :host kol-input.switch input[type='checkbox'] {
10653
8061
  min-width: 3.5em;
@@ -10656,13 +8064,9 @@ const BMF = KoliBri.createTheme("bmf", {
10656
8064
  border-width: 0;
10657
8065
  height: 1.5em;
10658
8066
  border-radius: 1.25em;
10659
- display: inline-block;
10660
8067
  position: relative;
10661
8068
  }
10662
8069
  :host kol-input.switch input[type='checkbox']:before {
10663
- -webkit-transition: 0.5s;
10664
- -moz-transition: 0.5s;
10665
- -ms-transition: 0.5s;
10666
8070
  transition: 0.5;
10667
8071
  width: 1.25em;
10668
8072
  height: 1.25em;
@@ -10676,9 +8080,6 @@ const BMF = KoliBri.createTheme("bmf", {
10676
8080
  background-color: var(--color-midnight);
10677
8081
  }
10678
8082
  :host kol-input.switch input[type='checkbox']:checked:before {
10679
- -webkit-transform: translateX(2em);
10680
- -moz-transform: translateX(2em);
10681
- -ms-transform: translateX(2em);
10682
8083
  transform: translateX(2em);
10683
8084
  --tw-bg-opacity: 1;
10684
8085
  }
@@ -10686,12 +8087,12 @@ const BMF = KoliBri.createTheme("bmf", {
10686
8087
  --tw-bg-opacity: 1;
10687
8088
  }
10688
8089
  :host kol-input.switch input[type='checkbox']:indeterminate:before {
10689
- -webkit-transform: translateX(1em);
10690
- -moz-transform: translateX(1em);
10691
- -ms-transform: translateX(1em);
10692
8090
  transform: translateX(1em);
10693
8091
  }
10694
8092
  .switch {
8093
+ & .checkbox-input-element {
8094
+ display: block;
8095
+ }
10695
8096
  & .icon {
10696
8097
  width: 1.25em;
10697
8098
  height: 1.25em;
@@ -10705,13 +8106,13 @@ const BMF = KoliBri.createTheme("bmf", {
10705
8106
  content: '\\2b';
10706
8107
  }
10707
8108
  }
10708
- &:has(input:checked) .icon {
8109
+ &.checked .icon {
10709
8110
  transform: translate(2em, -50%);
10710
8111
  &::part(icon)::before {
10711
8112
  content: '\\f00c';
10712
8113
  }
10713
8114
  }
10714
- &:has(input:indeterminate) .icon {
8115
+ &.indeterminate .icon {
10715
8116
  transform: translate(1em, -50%);
10716
8117
  &::part(icon)::before {
10717
8118
  content: '\\f068';
@@ -10746,12 +8147,23 @@ const BMF = KoliBri.createTheme("bmf", {
10746
8147
  min-width: 32px;
10747
8148
  place-content: center;
10748
8149
  }
8150
+ :host kol-input.button.hide-label > .input {
8151
+ border-top-right-radius: var(--border-radius);
8152
+ border-bottom-right-radius: var(--border-radius);
8153
+ }
10749
8154
  :host kol-input.button > .input > div {
10750
8155
  display: flex;
10751
8156
  }
10752
8157
  :host kol-input.button .icon {
10753
8158
  height: auto;
10754
8159
  }
8160
+ .button:focus-within {
8161
+ border-radius: var(--a11y-min-size);
8162
+ outline-color: var(--color-ocean);
8163
+ outline-offset: 2px;
8164
+ outline-style: solid;
8165
+ outline-width: 3px;
8166
+ }
10755
8167
  `,
10756
8168
  "KOL-INPUT-RADIO": css$4`
10757
8169
  /* INPUT */
@@ -11161,7 +8573,7 @@ const BMF = KoliBri.createTheme("bmf", {
11161
8573
  content: '*';
11162
8574
  padding-left: 0.125em;
11163
8575
  }
11164
- kol-input.error {
8576
+ kol-input.error:not(.hidden-error) {
11165
8577
  border-left: 3px solid var(--color-red);
11166
8578
  padding-left: 1em;
11167
8579
  }
@@ -19375,29 +16787,29 @@ const DEFAULT = KoliBri.createTheme("default", {
19375
16787
  }
19376
16788
  `,
19377
16789
  "KOL-HEADING": css$3`
19378
- h1,
19379
- h2,
19380
- h3,
19381
- h4,
19382
- h5,
19383
- h6 {
16790
+ .headline-h1,
16791
+ .headline-h2,
16792
+ .headline-h3,
16793
+ .headline-h4,
16794
+ .headline-h5,
16795
+ .headline-h6 {
19384
16796
  color: inherit;
19385
16797
  font-style: normal;
19386
16798
  }
19387
- h1,
19388
- h2,
19389
- h3 {
16799
+ .headline-h1,
16800
+ .headline-h2,
16801
+ .headline-h3 {
19390
16802
  font-weight: 700;
19391
16803
  }
19392
- h1 {
16804
+ .headline-h1 {
19393
16805
  font-size: 1.5rem;
19394
16806
  line-height: 1.75rem;
19395
16807
  }
19396
- h2 {
16808
+ .headline-h2 {
19397
16809
  font-size: 1.25rem;
19398
16810
  line-height: 1.75rem;
19399
16811
  }
19400
- h3 {
16812
+ .headline-h3 {
19401
16813
  font-size: 1.125rem;
19402
16814
  line-height: 1.5rem;
19403
16815
  }
@@ -19980,6 +17392,9 @@ const DEFAULT = KoliBri.createTheme("default", {
19980
17392
  :host kol-input.button {
19981
17393
  gap: 0.4rem 0;
19982
17394
  }
17395
+ .checkbox-container {
17396
+ justify-content: flex-start;
17397
+ }
19983
17398
  :host kol-input > div.input {
19984
17399
  display: inherit;
19985
17400
  min-height: var(--a11y-min-size);
@@ -20048,13 +17463,6 @@ const DEFAULT = KoliBri.createTheme("default", {
20048
17463
  cursor: pointer;
20049
17464
  transition: 0.5s;
20050
17465
  }
20051
- :host kol-input input[type='checkbox'].kol-disabled:before {
20052
- cursor: not-allowed;
20053
- }
20054
- :host kol-input input[type='checkbox']:before {
20055
- content: '';
20056
- cursor: pointer;
20057
- }
20058
17466
  :host kol-input input[type='checkbox']:checked {
20059
17467
  background-color: var(--color-primary);
20060
17468
  border-color: var(--color-primary);
@@ -20065,51 +17473,23 @@ const DEFAULT = KoliBri.createTheme("default", {
20065
17473
  min-width: calc(6 * 0.25rem);
20066
17474
  width: calc(6 * 0.25rem);
20067
17475
  }
20068
- :host kol-input.default input[type='checkbox']:before {
20069
- border-radius: 1.5em;
20070
- background-color: transparent;
20071
- display: block;
20072
- height: calc(6 * 0.25rem);
20073
- position: relative;
20074
- width: calc(6 * 0.25rem);
20075
- }
20076
- :host kol-input.default input[type='checkbox']:checked:before {
20077
- border-right-width: 3px;
20078
- border-bottom-width: 3px;
20079
- left: calc(1.5 * 0.25rem - 2px);
20080
- top: calc(2.85 * 0.25rem - 2px);
20081
- transform: rotate(40deg) translate(-50%, -50%);
20082
- background-color: transparent;
20083
- border-width: 0px 3px 3px 0px;
20084
- border-color: white;
20085
- border-radius: 1px;
20086
- border-style: solid;
20087
- height: calc(3 * 0.25rem);
20088
- width: calc(1.5 * 0.25rem);
20089
- }
20090
17476
  :host kol-input.default input[type='checkbox']:indeterminate {
20091
17477
  background-color: var(--color-primary);
20092
17478
  }
20093
- :host kol-input.default input[type='checkbox']:indeterminate:before {
20094
- background-color: var(--color-light);
20095
- height: 0.125rem;
20096
- top: 0.6rem;
20097
- left: 0.25rem;
20098
- width: calc(3 * 0.25rem);
20099
- transform: inherit;
20100
- }
20101
- :host kol-input.default input[type='checkbox']:checked:indeterminate:before {
20102
- border-width: 0px 1px 1px 0px;
17479
+ :host kol-input.default .icon {
17480
+ color: var(--color-light);
17481
+ margin-left: 0.25rem;
20103
17482
  }
17483
+
20104
17484
  :host kol-input.switch input[type='checkbox'] {
20105
- min-width: 3.5em;
20106
- width: 3.5em;
20107
17485
  background-color: var(--color-subtle);
17486
+ border-radius: 1.25em;
20108
17487
  border-width: 0;
17488
+ display: block;
20109
17489
  height: 1.5em;
20110
- border-radius: 1.25em;
20111
- display: inline-block;
17490
+ min-width: 3.5em;
20112
17491
  position: relative;
17492
+ width: 3.5em;
20113
17493
  }
20114
17494
  :host kol-input.switch input[type='checkbox']:before {
20115
17495
  width: 1.25em;
@@ -20136,17 +17516,24 @@ const DEFAULT = KoliBri.createTheme("default", {
20136
17516
  left: 2px;
20137
17517
  }
20138
17518
 
20139
- &:has(input:checked) .icon {
17519
+ &.checked .icon {
20140
17520
  transform: translate(2em, -50%);
20141
17521
  }
20142
17522
 
20143
- &:has(input:indeterminate) .icon {
17523
+ &.indeterminate .icon {
20144
17524
  transform: translate(1em, -50%);
20145
17525
  }
20146
17526
  }
20147
17527
  :host .disabled {
20148
17528
  opacity: 0.33;
20149
17529
  }
17530
+ .button:focus-within {
17531
+ border-radius: var(--border-radius);
17532
+ outline-color: var(--color-primary-variant);
17533
+ outline-offset: 2px;
17534
+ outline-style: solid;
17535
+ outline-width: calc(var(--border-width) * 2);
17536
+ }
20150
17537
  `,
20151
17538
  "KOL-INPUT-RADIO": css$3`
20152
17539
  label {
@@ -20868,27 +18255,27 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
20868
18255
  }
20869
18256
  `,
20870
18257
  "KOL-HEADING": css$2`
20871
- h1 {
18258
+ .headline-h1 {
20872
18259
  font-size: 2rem;
20873
18260
  line-height: 2.5rem;
20874
18261
  }
20875
- h2 {
18262
+ .headline-h2 {
20876
18263
  font-size: 1.75rem;
20877
18264
  line-height: 2rem;
20878
18265
  }
20879
- h3 {
18266
+ .headline-h3 {
20880
18267
  font-size: 1.5rem;
20881
18268
  line-height: 1.75rem;
20882
18269
  }
20883
- h4 {
18270
+ .headline-h4 {
20884
18271
  font-size: 1.25rem;
20885
18272
  line-height: 1.75rem;
20886
18273
  }
20887
- h5 {
18274
+ .headline-h5 {
20888
18275
  font-size: 1rem;
20889
18276
  line-height: 1.5rem;
20890
18277
  }
20891
- h6 {
18278
+ .headline-h6 {
20892
18279
  color: rgb(234, 0, 255);
20893
18280
  }
20894
18281
  `,
@@ -21363,6 +18750,9 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21363
18750
  }
21364
18751
  `,
21365
18752
  "KOL-INPUT-CHECKBOX": css$2`
18753
+ .checkbox-container {
18754
+ justify-content: flex-start;
18755
+ }
21366
18756
  input[type='checkbox'] {
21367
18757
  background-color: var(--color-white);
21368
18758
  border-width: 2px;
@@ -21391,12 +18781,6 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21391
18781
  background-color: var(--color-blue-130);
21392
18782
  border-color: var(--color-blue-130);
21393
18783
  }
21394
- input[type='checkbox']:checked::before {
21395
- border-color: var(--color-white);
21396
- }
21397
- input[type='checkbox']:indeterminate:hover::before {
21398
- background-color: var(--color-blue-130);
21399
- }
21400
18784
  .error input[type='checkbox'] {
21401
18785
  border-color: var(--color-red);
21402
18786
  }
@@ -21411,12 +18795,20 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21411
18795
  background-color: var(--color-red-1xx);
21412
18796
  border-color: var(--color-red-1xx);
21413
18797
  }
21414
- .error input[type='checkbox']:indeterminate:hover::before {
21415
- background-color: var(--color-red-1xx);
21416
- }
21417
18798
  .error.required label > span::after {
21418
18799
  color: var(--color-red);
21419
18800
  }
18801
+
18802
+ .default .icon {
18803
+ margin-left: 0.2rem;
18804
+ }
18805
+ .default.checked .icon {
18806
+ color: var(--color-white);
18807
+ }
18808
+
18809
+ .switch input[type='checkbox'] {
18810
+ display: block;
18811
+ }
21420
18812
  .switch input[type='checkbox']::before,
21421
18813
  .switch input[type='checkbox']:indeterminate::before {
21422
18814
  background-color: var(--color-grey-75);
@@ -21456,6 +18848,12 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
21456
18848
  .hint {
21457
18849
  font-size: 0.875rem;
21458
18850
  }
18851
+ .button:focus-within {
18852
+ outline-color: var(--color-blue);
18853
+ outline-offset: 2px;
18854
+ outline-style: solid;
18855
+ outline-width: 2px;
18856
+ }
21459
18857
  `,
21460
18858
  "KOL-INPUT-COLOR": css$2`
21461
18859
  kol-input {
@@ -22452,35 +19850,35 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
22452
19850
  }
22453
19851
  `,
22454
19852
  "KOL-HEADING": css$2`
22455
- h1,
22456
- h2,
22457
- h3,
22458
- h4,
22459
- h5,
22460
- h6 {
19853
+ .headline-h1,
19854
+ .headline-h2,
19855
+ .headline-h3,
19856
+ .headline-h4,
19857
+ .headline-h5,
19858
+ .headline-h6 {
22461
19859
  font-weight: var(--font-weight-bold);
22462
19860
  }
22463
- h1 {
19861
+ .headline-h1 {
22464
19862
  font-size: 2.625rem;
22465
19863
  line-height: 3.25rem;
22466
19864
  }
22467
- h2 {
19865
+ .headline-h2 {
22468
19866
  font-size: 2.25rem;
22469
19867
  line-height: 2.75rem;
22470
19868
  }
22471
- h3 {
19869
+ .headline-h3 {
22472
19870
  font-size: 2rem;
22473
19871
  line-height: 2.5rem;
22474
19872
  }
22475
- h4 {
19873
+ .headline-h4 {
22476
19874
  font-size: 1.75rem;
22477
19875
  line-height: 2rem;
22478
19876
  }
22479
- h5 {
19877
+ .headline-h5 {
22480
19878
  font-size: 1.5rem;
22481
19879
  line-height: 1.75rem;
22482
19880
  }
22483
- h6 {
19881
+ .headline-h6 {
22484
19882
  font-size: 1.25rem;
22485
19883
  line-height: 1.75rem;
22486
19884
  }
@@ -23019,6 +20417,9 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23019
20417
  }
23020
20418
  `,
23021
20419
  "KOL-INPUT-CHECKBOX": css$2`
20420
+ .checkbox-container {
20421
+ justify-content: flex-start;
20422
+ }
23022
20423
  input[type='checkbox'] {
23023
20424
  background-color: var(--color-white);
23024
20425
  border-width: 2px;
@@ -23047,12 +20448,6 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23047
20448
  background-color: var(--color-blue-130);
23048
20449
  border-color: var(--color-blue-130);
23049
20450
  }
23050
- input[type='checkbox']:checked::before {
23051
- border-color: var(--color-white);
23052
- }
23053
- input[type='checkbox']:indeterminate:hover::before {
23054
- background-color: var(--color-blue-130);
23055
- }
23056
20451
  .error input[type='checkbox'] {
23057
20452
  border-color: var(--color-red);
23058
20453
  }
@@ -23067,12 +20462,19 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23067
20462
  background-color: var(--color-red-1xx);
23068
20463
  border-color: var(--color-red-1xx);
23069
20464
  }
23070
- .error input[type='checkbox']:indeterminate:hover::before {
23071
- background-color: var(--color-red-1xx);
23072
- }
23073
20465
  .error.required label > span::after {
23074
20466
  color: var(--color-red);
23075
20467
  }
20468
+ .default .icon {
20469
+ margin-left: 0.2rem;
20470
+ }
20471
+ .default.checked .icon {
20472
+ color: var(--color-white);
20473
+ }
20474
+
20475
+ .switch input[type='checkbox'] {
20476
+ display: block;
20477
+ }
23076
20478
  .switch input[type='checkbox']::before,
23077
20479
  .switch input[type='checkbox']:indeterminate::before {
23078
20480
  background-color: var(--color-grey-75);
@@ -23112,6 +20514,11 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
23112
20514
  .hint {
23113
20515
  font-size: 0.875rem;
23114
20516
  }
20517
+ .button:focus-within {
20518
+ outline-color: var(--color-blue-130);
20519
+ outline-style: solid;
20520
+ outline-width: 2px;
20521
+ }
23115
20522
  `,
23116
20523
  "KOL-INPUT-COLOR": css$2`
23117
20524
  kol-input {
@@ -24683,42 +22090,42 @@ const ITZBund = KoliBri.createTheme("itzbund", {
24683
22090
  }
24684
22091
  `,
24685
22092
  "KOL-HEADING": css$1`
24686
- h1,
24687
- h2,
24688
- h3,
24689
- h4,
24690
- h5,
24691
- h6 {
22093
+ .headline-h1,
22094
+ .headline-h2,
22095
+ .headline-h3,
22096
+ .headline-h4,
22097
+ .headline-h5,
22098
+ .headline-h6 {
24692
22099
  line-height: 1em;
24693
22100
  margin: 0;
24694
22101
  padding: 0;
24695
22102
  }
24696
- h1 {
22103
+ .headline-h1 {
24697
22104
  font-family: var(--font-family-serif);
24698
22105
  font-size: 54px;
24699
22106
  font-weight: bold;
24700
22107
  }
24701
- h2 {
22108
+ .headline-h2 {
24702
22109
  font-family: var(--font-family-serif);
24703
22110
  font-size: 32px;
24704
22111
  font-weight: bold;
24705
22112
  }
24706
- h3 {
22113
+ .headline-h3 {
24707
22114
  font-family: var(--font-family-serif);
24708
22115
  font-size: 26px;
24709
22116
  font-weight: bold;
24710
22117
  }
24711
- h4 {
22118
+ .headline-h4 {
24712
22119
  font-family: var(--font-family-serif);
24713
22120
  font-size: 20px;
24714
22121
  font-weight: normal;
24715
22122
  }
24716
- h5 {
22123
+ .headline-h5 {
24717
22124
  font-family: var(--font-family-serif);
24718
22125
  font-size: 17px;
24719
22126
  font-weight: bold;
24720
22127
  }
24721
- h6 {
22128
+ .headline-h6 {
24722
22129
  font-family: var(--font-family-sans);
24723
22130
  font-size: 17px;
24724
22131
  font-weight: normal;
@@ -25196,9 +22603,8 @@ const ITZBund = KoliBri.createTheme("itzbund", {
25196
22603
  }
25197
22604
  `,
25198
22605
  "KOL-INPUT-CHECKBOX": css$1`
25199
- /* ALL INPUT, SELECT, TEXTAREA */
25200
- label {
25201
- cursor: pointer;
22606
+ .checkbox-container {
22607
+ justify-content: flex-start;
25202
22608
  }
25203
22609
  input {
25204
22610
  color: var(--default-letter);
@@ -25256,58 +22662,28 @@ const ITZBund = KoliBri.createTheme("itzbund", {
25256
22662
  cursor: pointer;
25257
22663
  transition: 0.5s;
25258
22664
  }
25259
- input[type='checkbox'].kol-disabled:before {
25260
- cursor: not-allowed;
25261
- }
25262
- input[type='checkbox']:before {
25263
- content: '';
25264
- cursor: pointer;
25265
- }
25266
22665
  input[type='checkbox']:checked {
25267
22666
  background-color: var(--color-petrol);
25268
22667
  border-color: var(--color-petrol);
25269
22668
  }
25270
22669
  .default input[type='checkbox'] {
25271
- /* border-radius: 0.25em; */
25272
22670
  height: calc(6 * 2 * var(--spacing));
25273
22671
  min-width: calc(6 * 2 * var(--spacing));
25274
22672
  width: calc(6 * 2 * var(--spacing));
25275
22673
  }
25276
- .default input[type='checkbox']:before {
25277
- /* border-radius: 0.25em; */
25278
- background-color: transparent;
25279
- display: block;
25280
- height: calc(6 * 2 * var(--spacing));
25281
- position: relative;
25282
- width: calc(6 * 2 * var(--spacing));
25283
- }
25284
- .default input[type='checkbox']:checked:before {
25285
- border-right-width: 3px;
25286
- border-bottom-width: 3px;
25287
- left: calc(1.5 * 2 * var(--spacing) - 2px);
25288
- top: calc(2.85 * 2 * var(--spacing) - 2px);
25289
- transform: rotate(40deg) translate(-50%, -50%);
25290
- background-color: transparent;
25291
- border-width: 0px 3px 3px 0px;
25292
- border-color: white;
25293
- border-radius: 1px;
25294
- border-style: solid;
25295
- height: calc(3 * 2 * var(--spacing));
25296
- width: calc(1.5 * 2 * var(--spacing));
22674
+
22675
+ .default .icon {
22676
+ margin-left: 0.25rem;
25297
22677
  }
25298
- .default input[type='checkbox']:indeterminate:before {
25299
- background-color: var(--kolibri-color-normal);
25300
- height: 0.375rem;
25301
- top: 0.45rem;
25302
- left: 0.15rem;
25303
- width: calc(4 * 2 * var(--spacing));
22678
+ .default.checked .icon {
22679
+ color: var(--color-weiss);
25304
22680
  }
22681
+
25305
22682
  .switch input[type='checkbox'] {
25306
- /* border-radius: 0.25em; */
22683
+ display: block;
25307
22684
  min-width: 3.2em;
25308
22685
  width: 3.2em;
25309
22686
  height: 1.7em;
25310
- display: inline-block;
25311
22687
  position: relative;
25312
22688
  }
25313
22689
  .switch input[type='checkbox']:before {
@@ -25324,28 +22700,19 @@ const ITZBund = KoliBri.createTheme("itzbund", {
25324
22700
  position: absolute;
25325
22701
  }
25326
22702
  .switch input[type='checkbox']:checked:before {
25327
- -webkit-transform: translateX(1.5em);
25328
- -moz-transform: translateX(1.5em);
25329
- -ms-transform: translateX(1.5em);
25330
22703
  transform: translateX(1.5em);
25331
22704
  background-color: white;
25332
22705
  }
25333
22706
  .switch input[type='checkbox']:indeterminate:before {
25334
- -webkit-transform: translateX(0.75em);
25335
- -moz-transform: translateX(0.75em);
25336
- -ms-transform: translateX(0.75em);
25337
22707
  transform: translateX(0.75em);
25338
22708
  background-color: var(--color-petrol);
25339
22709
  }
25340
- .switch:has(input:not(:checked), input:indeterminate) .icon {
22710
+ .switch:is(:not(.checked), .indeterminate) .icon {
25341
22711
  color: #fff;
25342
22712
  }
25343
22713
  .disabled {
25344
22714
  opacity: 0.33;
25345
22715
  }
25346
- .default kol-icon {
25347
- display: none;
25348
- }
25349
22716
  kol-input span.hint {
25350
22717
  grid-column: span 2;
25351
22718
  font-style: italic;
@@ -25354,6 +22721,13 @@ const ITZBund = KoliBri.createTheme("itzbund", {
25354
22721
  order: 3;
25355
22722
  padding: 0 var(--spacing);
25356
22723
  }
22724
+ .button:focus-within {
22725
+ border-radius: 2rem;
22726
+ outline-color: var(--color-achat) !important;
22727
+ outline-offset: 2px;
22728
+ outline-style: solid;
22729
+ outline-width: 3px;
22730
+ }
25357
22731
  `,
25358
22732
  "KOL-INPUT-RADIO": `/* INPUT */
25359
22733
  :host input:focus {
@@ -27429,7 +24803,15 @@ const MFM = KoliBri.createTheme("mfm", {
27429
24803
  }
27430
24804
  :host .disabled {
27431
24805
  opacity: 0.33;
27432
- }`,
24806
+ }
24807
+ .button:focus-within {
24808
+ border-radius: 0.25rem;
24809
+ outline-color: var(--color-ocean);
24810
+ outline-offset: 2px;
24811
+ outline-style: solid;
24812
+ outline-width: 3px;
24813
+ }
24814
+ `,
27433
24815
  "KOL-INPUT-RADIO": `/* INPUT */
27434
24816
  kol-input {
27435
24817
  display: grid;
@@ -35989,32 +33371,32 @@ const MAPZ = KoliBri.createTheme("mapz", {
35989
33371
  }
35990
33372
  `,
35991
33373
  "KOL-HEADING": css`
35992
- h1,
35993
- h2,
35994
- h3,
35995
- h4,
35996
- h5,
35997
- h6 {
33374
+ .headline-h1,
33375
+ .headline-h2,
33376
+ .headline-h3,
33377
+ .headline-h4,
33378
+ .headline-h5,
33379
+ .headline-h6 {
35998
33380
  line-height: 1.25em;
35999
33381
  margin: 0;
36000
33382
  padding: 0;
36001
33383
  }
36002
- h1 {
33384
+ .headline-h1 {
36003
33385
  font-size: 1.5rem !important;
36004
33386
  }
36005
- h2 {
33387
+ .headline-h2 {
36006
33388
  font-size: 1.4rem !important;
36007
33389
  }
36008
- h3 {
33390
+ .headline-h3 {
36009
33391
  font-size: 1.3rem !important;
36010
33392
  }
36011
- h4 {
33393
+ .headline-h4 {
36012
33394
  font-size: 1.2rem !important;
36013
33395
  }
36014
- h5 {
33396
+ .headline-h5 {
36015
33397
  font-size: 1.1rem !important;
36016
33398
  }
36017
- h6 {
33399
+ .headline-h6 {
36018
33400
  font-size: 1rem !important;
36019
33401
  }
36020
33402
  `,
@@ -36036,6 +33418,9 @@ const MAPZ = KoliBri.createTheme("mapz", {
36036
33418
  content: '*';
36037
33419
  padding-left: 0.125em;
36038
33420
  }
33421
+ .checkbox-container {
33422
+ justify-content: flex-start;
33423
+ }
36039
33424
  input:hover {
36040
33425
  border-color: var(--kolibri-color-primary);
36041
33426
  } /* NEU */
@@ -36076,13 +33461,6 @@ const MAPZ = KoliBri.createTheme("mapz", {
36076
33461
  cursor: pointer;
36077
33462
  transition: 0.5s;
36078
33463
  }
36079
- input[type='checkbox'].kol-disabled:before {
36080
- cursor: not-allowed;
36081
- }
36082
- input[type='checkbox']:before {
36083
- content: '';
36084
- cursor: pointer;
36085
- }
36086
33464
  input[type='checkbox']:checked {
36087
33465
  background-color: var(--kolibri-color-primary);
36088
33466
  border-color: var(--kolibri-color-primary);
@@ -36093,41 +33471,21 @@ const MAPZ = KoliBri.createTheme("mapz", {
36093
33471
  min-width: calc(6 * var(--kolibri-spacing));
36094
33472
  width: calc(6 * var(--kolibri-spacing));
36095
33473
  }
36096
- .default input[type='checkbox']:before {
36097
- border-radius: 0.25em;
36098
- background-color: transparent;
36099
- display: block;
36100
- height: calc(6 * var(--kolibri-spacing));
36101
- position: relative;
36102
- width: calc(6 * var(--kolibri-spacing));
33474
+ .default .icon {
33475
+ margin-left: 0.25rem;
36103
33476
  }
36104
- .default input[type='checkbox']:checked:before {
36105
- border-right-width: 3px;
36106
- border-bottom-width: 3px;
36107
- left: calc(1.5 * var(--kolibri-spacing) - 2px);
36108
- top: calc(2.85 * var(--kolibri-spacing) - 2px);
36109
- transform: rotate(40deg) translate(-50%, -50%);
36110
- background-color: transparent;
36111
- border-width: 0px 3px 3px 0px;
36112
- border-color: white;
36113
- border-radius: 1px;
36114
- border-style: solid;
36115
- height: calc(3 * var(--kolibri-spacing));
36116
- width: calc(1.5 * var(--kolibri-spacing));
33477
+ .default.checked .icon {
33478
+ color: #fff;
36117
33479
  }
36118
- .default input[type='checkbox']:indeterminate:before {
36119
- background-color: var(--kolibri-color-normal);
36120
- height: 0.375rem;
36121
- top: 0.45rem;
36122
- left: 0.15rem;
36123
- width: calc(4 * var(--kolibri-spacing));
33480
+ .default.indeterminate .icon {
33481
+ color: var(--kolibri-color-normal);
36124
33482
  }
36125
33483
  .switch input[type='checkbox'] {
33484
+ display: block; //
36126
33485
  min-width: 3.2em;
36127
33486
  width: 3.2em;
36128
33487
  height: 1.7em;
36129
33488
  border-radius: 0.25em;
36130
- display: inline-block;
36131
33489
  position: relative;
36132
33490
  }
36133
33491
  .switch input[type='checkbox']:before {
@@ -36157,12 +33515,19 @@ const MAPZ = KoliBri.createTheme("mapz", {
36157
33515
  transform: translateX(0.75em);
36158
33516
  background-color: var(--kolibri-color-primary);
36159
33517
  }
36160
- .switch:has(input:not(:checked), input:indeterminate) .icon {
33518
+ .switch:is(.checked, .indeterminate) .icon {
36161
33519
  color: #fff;
36162
33520
  }
36163
33521
  .disabled {
36164
33522
  opacity: 0.33;
36165
33523
  }
33524
+ .button:focus-within {
33525
+ border-radius: var(--kolibri-border-radius);
33526
+ outline-color: var(--kolibri-color-outline);
33527
+ outline-offset: 2px;
33528
+ outline-style: solid;
33529
+ outline-width: 3px;
33530
+ }
36166
33531
  `,
36167
33532
  "KOL-INPUT-RADIO": css`
36168
33533
  label {
@@ -50524,7 +47889,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
50524
47889
  --color-grau-80: hsl(0 0% 20%);
50525
47890
  --color-grau-70: hsl(0 0% 30%);
50526
47891
  --color-grau-60: hsl(0 0% 40%);
50527
- --color-grau-50: hsl(0 0% 50%);
47892
+ --color-grau-50: #8b8b8b;
50528
47893
  --color-grau-40: hsl(0 0% 60%);
50529
47894
  --color-grau-30: hsl(0 0% 70%);
50530
47895
  --color-grau-20: hsl(0 0% 80%);
@@ -50621,39 +47986,39 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
50621
47986
  }
50622
47987
  `,
50623
47988
  "KOL-HEADING": css`
50624
- h1,
50625
- h2,
50626
- h3,
50627
- h4,
50628
- h5,
50629
- h6 {
47989
+ .headline-h1,
47990
+ .headline-h2,
47991
+ .headline-h3,
47992
+ .headline-h4,
47993
+ .headline-h5,
47994
+ .headline-h6 {
50630
47995
  font-weight: var(--font-weight-bold);
50631
47996
  margin: 0;
50632
47997
  padding: 1rem 0;
50633
47998
  text-align: left;
50634
47999
  }
50635
- h1 {
48000
+ .headline-h1 {
50636
48001
  font-size: 2.5rem;
50637
48002
  line-height: 1.2;
50638
48003
  padding: 0 0 1rem 0;
50639
48004
  }
50640
- h2 {
48005
+ .headline-h2 {
50641
48006
  font-size: 2rem;
50642
48007
  line-height: 1.25;
50643
48008
  }
50644
- h3 {
48009
+ .headline-h3 {
50645
48010
  font-size: 1.75rem;
50646
48011
  line-height: 1.29;
50647
48012
  }
50648
- h4 {
48013
+ .headline-h4 {
50649
48014
  font-size: 1.5rem;
50650
48015
  line-height: 1.33;
50651
48016
  }
50652
- h5 {
48017
+ .headline-h5 {
50653
48018
  font-size: 1.25rem;
50654
48019
  line-height: 1.4;
50655
48020
  }
50656
- h6 {
48021
+ .headline-h6 {
50657
48022
  font-size: 1rem;
50658
48023
  line-height: 1.5;
50659
48024
  }
@@ -51274,12 +48639,15 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51274
48639
  :host {
51275
48640
  --spacing: 0.25rem;
51276
48641
  }
48642
+ .checkbox-container {
48643
+ justify-content: flex-start;
48644
+ }
51277
48645
  input {
51278
48646
  border-color: var(--color-neutral-dark);
51279
48647
  border-width: 2px;
51280
48648
  border-style: solid;
51281
48649
  }
51282
- label {
48650
+ .input-label {
51283
48651
  padding-left: 0.75rem;
51284
48652
  }
51285
48653
  kol-input:not(.disabled):hover label,
@@ -51292,10 +48660,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51292
48660
  :host kol-input:not(.disabled) :is(.input, label) {
51293
48661
  cursor: pointer;
51294
48662
  }
51295
- :host kol-input.disabled :is(.input, label),
51296
- :host kol-input.disabled input[type='checkbox']::before {
51297
- cursor: not-allowed;
51298
- }
51299
48663
  .required label > span::after {
51300
48664
  content: '*';
51301
48665
  padding-left: 0.125em;
@@ -51339,9 +48703,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51339
48703
  background-color: white;
51340
48704
  transition: 0.5s;
51341
48705
  }
51342
- input[type='checkbox']:before {
51343
- content: '';
51344
- }
51345
48706
  input[type='checkbox']:checked,
51346
48707
  input[type='checkbox']:indeterminate {
51347
48708
  background-color: var(--color-blau);
@@ -51353,44 +48714,19 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51353
48714
  min-width: calc(6 * var(--spacing));
51354
48715
  width: calc(6 * var(--spacing));
51355
48716
  }
51356
- .default input[type='checkbox']:before {
51357
- border-radius: 0.25em;
51358
- background-color: transparent;
51359
- display: block;
51360
- height: calc(6 * var(--spacing));
51361
- position: relative;
51362
- width: calc(6 * var(--spacing));
51363
- }
51364
- .default input[type='checkbox']:checked:before {
51365
- border-right-width: 3px;
51366
- border-bottom-width: 3px;
51367
- left: calc(1.5 * var(--spacing) - 2px);
51368
- top: calc(2.85 * var(--spacing) - 2px);
51369
- transform: rotate(40deg) translate(-50%, -50%);
51370
- background-color: transparent;
51371
- border-width: 0px 3px 3px 0px;
51372
- border-color: white;
51373
- border-radius: 1px;
51374
- border-style: solid;
51375
- height: calc(3 * var(--spacing));
51376
- width: calc(1.5 * var(--spacing));
51377
- }
51378
48717
  .default input[type='checkbox']:indeterminate {
51379
48718
  background-color: var(--color-blau);
51380
48719
  }
51381
- .default input[type='checkbox']:indeterminate:before {
51382
- background-color: white;
51383
- height: 0.25rem;
51384
- top: 0.5rem;
51385
- left: 0.25rem;
51386
- width: 0.75rem;
48720
+ .default .icon {
48721
+ color: #fff;
48722
+ margin-left: 0.25rem;
51387
48723
  }
51388
48724
  .switch input[type='checkbox'] {
48725
+ display: block;
51389
48726
  min-width: 3.2em;
51390
48727
  width: 3.2em;
51391
48728
  height: 1.7em;
51392
48729
  border-radius: 0.25em;
51393
- display: inline-block;
51394
48730
  position: relative;
51395
48731
  }
51396
48732
  .switch input[type='checkbox']:before {
@@ -51407,9 +48743,6 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51407
48743
  position: absolute;
51408
48744
  }
51409
48745
  .switch input[type='checkbox']:checked:before {
51410
- -webkit-transform: translateX(1.5em);
51411
- -moz-transform: translateX(1.5em);
51412
- -ms-transform: translateX(1.5em);
51413
48746
  transform: translateX(1.5em);
51414
48747
  background-color: white;
51415
48748
  }
@@ -51417,18 +48750,22 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51417
48750
  background-color: var(--color-blau);
51418
48751
  }
51419
48752
  .switch input[type='checkbox']:indeterminate:before {
51420
- -webkit-transform: translateX(0.75em);
51421
- -moz-transform: translateX(0.75em);
51422
- -ms-transform: translateX(0.75em);
51423
48753
  transform: translateX(0.75em);
51424
48754
  background-color: white;
51425
48755
  }
51426
- .switch:has(input:not(:checked, :indeterminate)) .icon {
48756
+ .switch:not(.checked):not(.indeterminate) .icon {
51427
48757
  color: #fff;
51428
48758
  }
51429
48759
  .disabled {
51430
48760
  opacity: 0.33;
51431
48761
  }
48762
+ .button:focus-within {
48763
+ border-radius: var(--border-radius);
48764
+ outline-color: var(--color-blau-dark);
48765
+ outline-offset: 0.125rem;
48766
+ outline-style: solid;
48767
+ outline-width: 0.125rem;
48768
+ }
51432
48769
  `,
51433
48770
  "KOL-INPUT-RADIO": css`
51434
48771
  /* ALL INPUT, SELECT, TEXTAREA */
@@ -51444,12 +48781,12 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
51444
48781
  border-width: 2px;
51445
48782
  border-style: solid;
51446
48783
  }
51447
- kol-input:has(input:disabled) input,
51448
- kol-input:has(input:disabled) label {
48784
+ kol-input.disabled input,
48785
+ kol-input.disabled label {
51449
48786
  cursor: not-allowed !important;
51450
48787
  opacity: 0.5;
51451
48788
  }
51452
- kol-input:hover:has(input:not(:disabled)) label,
48789
+ kol-input:hover:not(.disabled) label,
51453
48790
  kol-input:focus-within {
51454
48791
  text-decoration: underline;
51455
48792
  }
@@ -59428,6 +56765,9 @@ const checkboxStyles = css`
59428
56765
  content: '*';
59429
56766
  padding-left: 0.125em;
59430
56767
  }
56768
+ .checkbox-container {
56769
+ justify-content: flex-start;
56770
+ }
59431
56771
  .input {
59432
56772
  display: inline-flex;
59433
56773
  }
@@ -59478,44 +56818,24 @@ const checkboxStyles = css`
59478
56818
  border: 2px solid var(--color-neutral-dark);
59479
56819
  height: calc(6 * var(--spacing));
59480
56820
  width: calc(6 * var(--spacing));
59481
- &::before {
59482
- display: block;
59483
- height: calc(6 * var(--spacing));
59484
- width: calc(6 * var(--spacing));
59485
- }
59486
- &:checked::before {
59487
- left: calc(1.5 * var(--spacing) - 2px);
59488
- top: calc(2.85 * var(--spacing) - 2px);
59489
- transform: rotate(40deg) translate(-50%, -50%);
59490
- border-width: 0 3px 3px 0;
59491
- border-color: var(--color-blau);
59492
- border-radius: 1px;
59493
- border-style: solid;
59494
- height: calc(3 * var(--spacing));
59495
- width: calc(1.5 * var(--spacing));
59496
- }
59497
- &:indeterminate::before {
59498
- background-color: var(--color-blau);
59499
- height: 0.6rem;
59500
- left: 0.325rem;
59501
- top: 0.325rem;
59502
- width: 0.6rem;
59503
- }
59504
56821
  }
59505
56822
  kol-input.default:not(.disabled):hover input,
59506
56823
  kol-input.default:focus-within input {
59507
56824
  border-color: var(--color-neutral-dark-correct);
59508
56825
  }
56826
+ .default .icon {
56827
+ margin-left: 0.25rem;
56828
+ }
59509
56829
 
59510
56830
  /* SWITCH */
59511
56831
  kol-input.switch {
59512
56832
  grid-template-columns: calc(13 * var(--spacing)) auto;
59513
56833
  }
59514
56834
  .switch input[type='checkbox'] {
56835
+ display: block;
59515
56836
  background: var(--color-grau-50);
59516
56837
  border-color: transparent;
59517
56838
  border-radius: var(--a11y-min-size);
59518
- display: inline-block;
59519
56839
  height: 1.7em;
59520
56840
  position: relative;
59521
56841
  transition: outline-offset 0.25s linear;
@@ -59552,14 +56872,19 @@ const checkboxStyles = css`
59552
56872
  font-weight: 700;
59553
56873
  }
59554
56874
  }
59555
- .switch:has(input[type='checkbox']:not(:checked, :indeterminate)) .icon {
59556
- opacity: 0; /* Avoid display: none because it breaks the transform-animation */
56875
+ .switch:not(.checked, .indeterminate) .icon {
56876
+ opacity: 0; /* Avoid display: none because it breaks the 'transform' animation */
59557
56877
  }
59558
56878
 
59559
56879
  /* BUTTON */
59560
56880
  kol-input.button {
59561
56881
  grid-template-areas: 'input label' 'error error' 'hint hint';
59562
56882
  }
56883
+
56884
+ .button:focus-within {
56885
+ outline: 0.125rem solid var(--color-blau);
56886
+ outline-offset: 0.125rem;
56887
+ }
59563
56888
  `;
59564
56889
 
59565
56890
  const detailsStyles = css`
@@ -59612,12 +56937,12 @@ const radioStyles = css`
59612
56937
  border-width: 2px;
59613
56938
  border-style: solid;
59614
56939
  }
59615
- kol-input:has(input:disabled) input,
59616
- kol-input:has(input:disabled) label {
56940
+ kol-input.disabled input,
56941
+ kol-input.disabled label {
59617
56942
  cursor: not-allowed !important;
59618
56943
  opacity: 0.5;
59619
56944
  }
59620
- kol-input:hover:has(input:not(:disabled)) label,
56945
+ kol-input:hover:not(.disabled) label,
59621
56946
  kol-input:focus-within {
59622
56947
  text-decoration: underline;
59623
56948
  }
@@ -59859,39 +57184,39 @@ const ZOLLv3 = KoliBri.createTheme("zoll-v3", {
59859
57184
  }
59860
57185
  `,
59861
57186
  "KOL-HEADING": css`
59862
- h1,
59863
- h2,
59864
- h3,
59865
- h4,
59866
- h5,
59867
- h6 {
57187
+ .headline-h1,
57188
+ .headline-h2,
57189
+ .headline-h3,
57190
+ .headline-h4,
57191
+ .headline-h5,
57192
+ .headline-h6 {
59868
57193
  font-weight: var(--font-weight-bold);
59869
57194
  margin: 0;
59870
57195
  padding: 1rem 0;
59871
57196
  text-align: left;
59872
57197
  }
59873
- h1 {
57198
+ .headline-h1 {
59874
57199
  font-size: 2.5rem;
59875
57200
  line-height: 1.2;
59876
57201
  padding: 0 0 1rem 0;
59877
57202
  }
59878
- h2 {
57203
+ .headline-h2 {
59879
57204
  font-size: 2rem;
59880
57205
  line-height: 1.25;
59881
57206
  }
59882
- h3 {
57207
+ .headline-h3 {
59883
57208
  font-size: 1.75rem;
59884
57209
  line-height: 1.29;
59885
57210
  }
59886
- h4 {
57211
+ .headline-h4 {
59887
57212
  font-size: 1.5rem;
59888
57213
  line-height: 1.33;
59889
57214
  }
59890
- h5 {
57215
+ .headline-h5 {
59891
57216
  font-size: 1.25rem;
59892
57217
  line-height: 1.4;
59893
57218
  }
59894
- h6 {
57219
+ .headline-h6 {
59895
57220
  font-size: 1rem;
59896
57221
  line-height: 1.5;
59897
57222
  }
@@ -67618,7 +64943,7 @@ const EN = KoliBri.createTranslation("en", {});
67618
64943
 
67619
64944
  exports.BAMF = BAMF;
67620
64945
  exports.BMF = BMF;
67621
- exports.BZSt = BZSt;
64946
+ exports.BZStv1 = BZStv1;
67622
64947
  exports.DE = DE;
67623
64948
  exports.DEFAULT = DEFAULT;
67624
64949
  exports.DESYv1 = DESYv1;