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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs +264 -2810
  2. package/dist/index.d.ts +52 -1
  3. package/dist/index.mjs +264 -2811
  4. package/package.json +7 -4
package/dist/index.cjs CHANGED
@@ -6048,2715 +6048,168 @@ const DESYv2 = KoliBri.createTheme("desy-v2", {
6048
6048
  }`
6049
6049
  });
6050
6050
 
6051
- const css$5 = (input) => input.join(``);
6051
+ var css_248z$D = "@layer kol-theme-component {\n abbr {\n text-decoration: none;\n border-bottom: dotted var(--color-metal) 1px;\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$C = "@layer kol-theme-component {\n :host > div {\n font-family: var(--font-family);\n padding: 0 0.5rem 0 0;\n }\n :host > div > kol-heading-wc {\n font-weight: 700;\n font-size: 1.25rem;\n line-height: 1.75rem;\n }\n :host > div > kol-heading-wc button {\n cursor: pointer;\n width: 100%;\n margin: 0;\n display: flex;\n gap: 0.5em;\n border: 0;\n align-items: center;\n overflow: hidden;\n font-size: inherit;\n line-height: 1.5em;\n background-color: transparent;\n padding: 0.5em;\n padding-left: 0;\n }\n :host > div[part*=open] > kol-heading-wc button {\n padding: 0.5em;\n padding-left: 0;\n }\n :host > div > kol-heading-wc button kol-icon::part(icon) {\n font-family: \"Font Awesome 6 Free\";\n font-weight: 900;\n color: var(--color-midnight);\n }\n .accordion > kol-heading-wc button kol-icon::part(icon)::before {\n content: \"+\";\n }\n .accordion.open > kol-heading-wc button kol-icon::part(icon)::before {\n content: \"\\f068\";\n }\n .accordion {\n width: 100%;\n height: 100%;\n display: grid;\n }\n .accordion[part*=open] div[part=header] {\n padding-left: 2em;\n }\n .accordion[part*=open] div[part=content] {\n padding-top: 1rem;\n }\n button {\n font-weight: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n .accordion {\n background: var(--color-white);\n }\n .accordion[part*=open] {\n padding-bottom: 1em;\n }\n /* .accordion > [part=\"header\"] {height: 0;} */\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n }\n}";
6054
+
6055
+ var css_248z$B = "@layer kol-theme-component {\n :host > div {\n background-color: white;\n border-width: 2px;\n border-style: solid;\n border-radius: 0.25rem;\n display: flex;\n overflow: unset;\n }\n :host > div.default {\n border-color: var(--color-grau-dunkel);\n }\n :host > div.default > .icon {\n background-color: var(--color-grau-dunkel);\n }\n :host > div.error {\n border-color: var(--color-rot);\n }\n :host > div.error > .icon {\n background-color: var(--color-rot);\n }\n :host > div.info {\n border-color: var(--color-blau);\n }\n :host > div.info > .icon {\n background-color: var(--color-blau);\n }\n :host > div.success {\n border-color: var(--color-gruen);\n }\n :host > div.success > .icon {\n background-color: var(--color-gruen);\n }\n :host > div.warning {\n border-color: var(--color-gelb);\n }\n :host > div.warning > .icon {\n background-color: var(--color-gelb);\n }\n :host > div.msg > .icon {\n color: white;\n padding: 0.5em;\n align-items: center;\n display: inline-flex;\n }\n :host > div.msg.warning > .icon {\n color: black;\n }\n :host > div.card.default .heading .icon {\n background-color: var(--color-grau-dunkel);\n }\n :host > div.card.error .heading .icon {\n background-color: var(--color-rot);\n }\n :host > div.card.info .heading .icon {\n background-color: var(--color-blau);\n }\n :host > div.card.success .heading .icon {\n background-color: var(--color-gruen);\n }\n :host > div.card.warning .heading .icon {\n background-color: var(--color-gelb);\n }\n :host > div.card .heading .icon {\n color: white;\n padding: 0.5em;\n align-items: center;\n display: inline-flex;\n }\n :host > div.card.warning .heading .icon {\n color: black;\n }\n :host > div kol-heading-wc .icon {\n margin-right: 0.5em;\n }\n :host > div.card .heading .icon {\n border-radius: 0 0 0.25rem 0;\n }\n :host > div.msg > div {\n padding: 0.25em;\n }\n :host > div.msg > div > .heading {\n padding: 0.25em;\n display: inline-block;\n }\n :host > div .content {\n padding: 0.25em;\n }\n :host > div > div {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > div > div > .content {\n grid-row: 2;\n grid-column: 1;\n }\n :host > div > div > .close {\n grid-row: 1/span 2;\n display: flex;\n }\n :host > div.msg > div > .close > * {\n margin: auto;\n }\n :host > div.msg.default .close .icon {\n color: var(--color-grau-dunkel);\n }\n :host > div.msg.error .close .icon {\n color: var(--color-rot);\n }\n :host > div.msg.info .close .icon {\n color: var(--color-blau);\n }\n :host > div.msg.success .close .icon {\n color: var(--color-gruen);\n }\n :host > div.msg.warning .close .icon {\n color: var(--color-gelb);\n }\n :host > div.card > div > .heading {\n width: 100%;\n }\n .close > button {\n min-width: 44px;\n min-height: 44px;\n display: grid;\n gap: 0.25em;\n line-height: 1.5rem;\n font-family: var(--font-family);\n font-weight: 700;\n cursor: pointer;\n border-radius: 1.5em;\n border-style: solid;\n border-width: 2px;\n font-size: 1rem;\n align-items: center;\n padding: 8px 14px;\n justify-content: center;\n font-style: normal;\n text-align: center;\n text-transform: uppercase;\n width: inherit;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n background-color: rgba(0, 0, 0, 0);\n border-color: rgba(0, 0, 0, 0);\n }\n .close > button.icon-only {\n padding: 8px;\n }\n .close > button.icon-only kol-icon {\n display: inline-block;\n width: 1.5em;\n height: 1.5em;\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .close kol-icon::part(icon)::before {\n content: \"\\f00d\";\n }\n}";
6056
+
6057
+ var css_248z$A = "@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}";
6058
+
6059
+ var css_248z$z = "@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}";
6060
+
6061
+ var css_248z$y = "@charset \"UTF-8\";\n@layer kol-theme-component {\n :host {\n --background-color: var(--color-gruen-dunkel);\n --border-color: var(--color-gruen-dunkel);\n --border-size: 1px;\n --min-size: 2.75rem;\n display: inline-block;\n }\n :is(button, a) {\n outline: none;\n }\n :is(button, a)::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"​\";\n }\n :is(button, a) > kol-span-wc {\n border-width: var(--border-size);\n border-style: solid;\n min-width: var(--min-size);\n min-height: var(--min-size);\n display: grid;\n gap: 0.25em;\n line-height: 1.5;\n font-family: var(--font-family);\n cursor: pointer;\n font-size: var(--text-size);\n align-items: center;\n padding: 0.5rem 0.875rem !important;\n justify-content: center;\n font-style: normal;\n text-align: center;\n text-transform: uppercase;\n width: inherit;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(button, a):hover:enabled > kol-span-wc {\n text-decoration: underline;\n }\n :is(button, a):focus > kol-span-wc {\n outline: var(--color-focus) solid 2px;\n }\n .primary :is(button, a) > kol-span-wc,\n .primary :is(button, a):active > kol-span-wc,\n .primary :is(button, a):hover > kol-span-wc {\n background-color: var(--background-color);\n border-color: var(--border-color);\n color: var(--color-weiss);\n }\n .secondary :is(button, a) > kol-span-wc,\n .danger :is(button, a) > kol-span-wc,\n .normal :is(button, a) > kol-span-wc,\n .ghost :is(button, a) > kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-gruen-hell);\n color: var(--color-grau-dunkel);\n }\n .ghost :is(button, a) > kol-span-wc {\n background-color: transparent;\n color: inherit;\n border: calc(var(--border-size) * 2) solid transparent;\n }\n .secondary :is(button, a):active > kol-span-wc,\n .secondary :is(button, a):hover > kol-span-wc {\n background-color: var(--background-color);\n border-color: var(--background-color);\n border-width: var(--border-size);\n color: var(--color-weiss);\n }\n :is(button, a):disabled > kol-span-wc,\n :is(button, a):disabled:hover > kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-grau-hell);\n color: var(--color-disabled);\n cursor: not-allowed;\n }\n}";
6062
+
6063
+ var css_248z$x = "@layer kol-theme-component {\n div {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5em;\n }\n}";
6064
+
6065
+ var css_248z$w = "@layer kol-theme-component {\n button {\n background-color: transparent;\n border: 0;\n cursor: pointer;\n }\n kol-link-button-wc {\n display: inline-block;\n }\n button {\n color: var(--textFontColorblau);\n font-style: normal;\n font-weight: 400;\n display: inline-flex;\n line-height: 1.5em;\n text-decoration-line: none !important;\n outline: none !important;\n }\n button:focus-within,\n button:hover {\n box-shadow: inset 0 -1px 0 0 currentColor;\n }\n kol-icon {\n padding: 0 0.25em;\n display: inline-block;\n }\n}";
6066
+
6067
+ var css_248z$v = "@layer kol-theme-component {\n :host > div {\n --card-padding: var(--gap);\n border-color: var(--color-gruen);\n border-style: solid;\n border-width: 1px;\n border-radius: 0.25rem;\n box-shadow: 0px 0px 1.875rem 0px rgba(0, 0, 0, 0.3);\n display: grid;\n width: 100%;\n height: 100%;\n background-color: white;\n grid-template-rows: min-content 2fr min-content;\n padding-bottom: var(--gapLarge);\n }\n :host kol-heading-wc {\n display: inline-flex;\n font-style: normal;\n }\n :host kol-heading-wc h1,\n :host kol-heading-wc h2 {\n font-family: var(--textFontSerif);\n font-weight: var(--textFontWeight);\n margin: 0;\n }\n :host kol-heading-wc h1 {\n font-size: var(--headline1FontSize);\n line-height: var(--headline1LineHeight);\n }\n :host kol-heading-wc h2 {\n font-size: var(--headline2FontSize);\n line-height: var(--headline2LineHeight);\n }\n :host kol-heading-wc h3 {\n font-size: var(--headline3FontSize);\n line-height: var(--headline3LineHeight);\n }\n :host kol-heading-wc h4 {\n font-size: var(--headline4FontSize);\n line-height: var(--headline4LineHeight);\n }\n :host div.header {\n border-bottom: 1px solid var(--color-gruen);\n padding: var(--card-padding);\n align-items: flex-start;\n display: flex;\n gap: 0 var(--gapSmall);\n justify-content: space-between;\n }\n :host div.content {\n padding: var(--card-padding) var(--card-padding) 0;\n }\n :host div.footer {\n margin-top: 3rem;\n padding: 0 var(--card-padding);\n }\n}";
6068
+
6069
+ var css_248z$u = "@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}";
6070
+
6071
+ var css_248z$t = "@charset \"UTF-8\";\n/* 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:root,\n:host {\n /* token */\n --color-bleached-silk: #f2f2f2;\n --color-carbon: #333;\n --color-chilled-lemonade: #ffe695;\n --color-green: #4d7f6f;\n --color-green-light: #a7c0b8;\n --color-green-dark: #23614e;\n --color-heroic-blue: #126dff;\n --color-mercury: #ebebeb;\n --color-red-epiphyllum: #d00000;\n --color-speedwell: #595f73;\n --color-tropic-sea: #007194;\n --color-white: #fff; /* template */\n /* general */\n --colorDark: var(--color-carbon);\n --colorLight: var(--color-white); /* primary color */\n --colorPrimary: var(--color-green-dark);\n --colorPrimaryFront: var(--color-white);\n --colorPrimarySuccess: var(--color-green);\n --colorPrimarySuccessFront: var(--color-white);\n --colorPrimaryActive: var(--color-green-light);\n --colorPrimaryActiveFront: var(--color-carbon); /* secondary color */\n --colorSecondary: var(--color-white);\n --colorSecondaryFront: var(--color-carbon);\n --colorSecondarySuccess: var(--color-bleached-silk);\n --colorSecondarySuccessFront: var(--color-carbon);\n --colorSecondaryActive: var(--color-mercury);\n --colorSecondaryActiveFront: var(--color-carbon); /* text */\n --colorText: var(--color-carbon);\n --colorTextBg: var(--color-white);\n --colorTextLight: var(--color-white);\n --colorTextLightBg: var(--color-carbon);\n --colorTextDisabled: var(--color-speedwell);\n --colorTextDisabledBg: var(--color-mercury);\n --colorTextActive: var(--color-green-dark);\n --colorTextActiveBg: var(--color-white); /* signal */\n --colorSignal: var(--color-tropic-sea);\n --colorSignalFront: var(--color-white); /* colorSignalFocus hat keine Frontfarbe */\n --colorSignalFocus: var(--color-heroic-blue);\n --colorSignalSuccess: var(--color-green);\n --colorSignalSuccessFront: var(--color-white);\n --colorSignalWarn: var(--color-chilled-lemonade);\n --colorSignalWarnFront: var(--color-carbon);\n --colorSignalError: var(--color-red-epiphyllum);\n --colorSignalErrorFront: var(--color-white); /* disabled */\n --colorDisabled: var(--color-mercury);\n}\n\n/* font, headline, text */\n:root,\n:host {\n /* token */\n --font-family: \"BundesSans Web\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n \tsans-serif; /* Basis-Größe: html, rem */\n --font-size: 100%;\n --line-height: 1.6875rem; /* template */\n /* h1 */\n --headline1FontSize: 2.5rem;\n --headline1LineHeight: 2.8125rem; /* h2 */\n --headline2FontSize: 2rem;\n --headline2LineHeight: 2.5rem; /* h3 */\n --headline3FontSize: 1.3125rem;\n --headline3LineHeight: 1.6875rem; /* h4 */\n --headline4FontSize: 1rem;\n --headline4LineHeight: 1.6875rem; /* text */\n --textFont: var(--font-family);\n --textFontColor: var(--colorText);\n --textFontSerif: \"BundesSerif Web\", var(--textFont);\n --textFontSize: 1rem;\n --textFontLineHeight: 1.6875rem;\n --textFontWeight: normal;\n}\n\n/* Abstände */\n:root,\n:host {\n /* template */\n --gap: 2rem;\n --gapDouble: calc(var(--gap) * 2);\n --gapSmall: 1.25rem; /* TODO: benötigt nur außerhalb KoliBri Komponenten? */\n --gapSmallest: 0.625rem;\n --gapLarge: 2.5rem;\n}\n\n/* formular */\n:root,\n:host {\n /* template */\n --formBorderWidthAndStyle: 1px solid; /* TODO: eigentlich --color-green sein, aber im Styleguide ist der Wert: #23614E */\n --formBorder: var(--formBorderWidthAndStyle) var(--colorPrimarySuccess);\n --formBorderHover: var(--formBorderWidthAndStyle) var(--colorPrimaryActive);\n --formBorderDisabled: var(--formBorderWidthAndStyle) var(--colorDisabled);\n --formBorderInvalid: var(--formBorderWidthAndStyle) var(--colorSignalError);\n --focusOutline: var(--colorSignalFocus) solid 2px;\n --formFieldBackground: var(--colorLight); /*Select option */\n --formFieldBackgroundHover: var(--colorPrimary); /* Select options */\n --formFieldBackgroundEven: var(--formFieldBackground); /* Select options */\n --formFieldBackgroundOdd: var(--colorSecondaryActive);\n --formFieldBackgroundDisabled: var(--colorSecondarySuccess);\n --formFieldTextColorDisabled: var(--colorTextDisabled);\n}\n\n/* ********************************* */\n/* ********************************* */\n/* ********************************* */\n/* ********************************* */\n:host {\n /* Primärfarbe und Abstufungen */\n --color-gruen-dunkel: var(--colorPrimary);\n --color-gruen: var(--colorPrimarySuccess);\n --color-gruen-hell: var(--colorPrimaryActive); /* Sekundärfarben */\n --color-weiss: var(--colorSecondary);\n --color-grau-dunkel: var(--colorSecondaryFront);\n --color-grau-hell: var(--colorSecondaryActive);\n --color-grau-weiss: var(--colorSecondarySuccess); /* Textfarben */\n --color-graublau: var(--colorTextDisabled); /* Signalfarben */\n --color-blau: var(--colorSignalFocus);\n --color-blau-dunkel: var(--colorSignal);\n --color-gelb: var(--colorSignalWarn);\n --color-rot: var(--colorSignalError);\n --color-disabled: var(--colorTextDisabled);\n --text-size: var(--textFontSize);\n --color-focus: var(--color-blau);\n --spacing: 4px;\n --color-text: var(--color-grau-dunkel);\n}\n\n:host {\n color: var(--color-black);\n font-family: var(--font-family);\n}\n\n:host * {\n box-sizing: border-box;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-family: var(--textFontSerif);\n}\n\nh1,\nh2 {\n font-weight: var(--textFontWeight);\n}\n\nh1 {\n font-size: var(--headline1FontSize);\n line-height: var(--headline1LineHeight);\n}\n\nh2 {\n font-size: var(--headline2FontSize);\n line-height: var(--headline2LineHeight);\n}\n\nh3 {\n font-size: var(--headline3FontSize);\n line-height: var(--headline3LineHeight);\n}\n\nh4,\nh5,\nh6 {\n font-size: var(--headline4FontSize);\n line-height: var(--headline4LineHeight);\n}\n\na,\nbutton,\ninput,\noption,\nselect,\ntextarea {\n hyphens: auto;\n letter-spacing: inherit;\n}\n\n/* a,button,caption,input,option,select,summary,table,textarea {font-size: 1rem;} */\nsummary {\n hyphens: auto;\n letter-spacing: inherit;\n}\n\n*[tabindex]:focus,\nkol-input:not(.checkbox, .radio) .input:focus-within,\nkol-input:is(.checkbox, .radio) input:focus,\nsummary:focus {\n outline: var(--focusOutline);\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\nkol-tooltip .area {\n background-color: var(--colorDark);\n color: var(--colorLight);\n}\n\nkol-tooltip kol-span-wc {\n line-height: 1.5em;\n padding: 0.5rem 0.75rem;\n}\n\nkol-span-wc,\nkol-span-wc > span {\n gap: 0.5em;\n}\n\nkol-span-wc,\nkol-span-wc > span {\n gap: 0.3em;\n}";
6072
+
6073
+ var css_248z$s = "@layer kol-theme-component {\n .headline {\n margin-top: 0;\n }\n}";
6074
+
6075
+ var css_248z$r = "@layer kol-theme-component {\n :host {\n color: inherit;\n }\n /*! * 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. */\n .fa {\n font-family: var(--fa-style-family, \"Font Awesome 6 Free\");\n font-weight: var(--fa-style, 900);\n }\n .fa,\n .fas,\n .fa-solid,\n .far,\n .fa-regular,\n .fal,\n .fa-light,\n .fat,\n .fa-thin,\n .fad,\n .fa-duotone,\n .fab,\n .fa-brands {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n display: var(--fa-display, inline-block);\n font-style: normal;\n font-variant: normal;\n line-height: 1;\n text-rendering: auto;\n }\n [class*=fa-] {\n font-style: 0.8rem;\n }\n /************************************************************/\n .fa-arrow-right::before {\n content: \"\\f061\";\n }\n .fa-arrow-right-from-bracket::before {\n content: \"\\f08b\";\n }\n .fa-clock::before {\n content: \"\\f017\";\n }\n .fa-home::before {\n content: \"\\f015\";\n }\n .fa-times-circle::before {\n content: \"\\f057\";\n }\n .fa-exclamation-triangle::before {\n content: \"\\f071\";\n }\n /************************************************************/\n .fa-chevron-left::before {\n content: \"\\f053\";\n }\n .fa-chevron-right::before {\n content: \"\\f054\";\n }\n .fa-download::before {\n content: \"\\f019\";\n }\n fa-exclamation-triangle::before {\n content: \"\\f071\";\n }\n .fa-file::before {\n content: \"\\f15b\";\n }\n .fa-house::before {\n content: \"\\f015\";\n }\n .fa-link::before {\n content: \"\\f0c1\";\n }\n .fa-plus::before {\n content: \"+\";\n }\n .fa-search::before {\n content: \"\\f002\";\n }\n .fa-times-circle::before {\n content: \"\\f057\";\n }\n .fa-arrow-up-right-from-square::before {\n content: \"\\f08e\";\n }\n .fa-user::before {\n content: \"\\f007\";\n }\n .fa-xmark::before {\n content: \"\\f00d\";\n }\n /************************************************************/\n :root,\n :host {\n --fa-font-regular: normal 400 1em/1 \"Font Awesome 6 Free\";\n }\n @font-face {\n font-family: \"Font Awesome 6 Free\";\n font-style: normal;\n font-weight: 400;\n font-display: block;\n src: url(\"../webfonts/fa-regular-400.woff2\") format(\"woff2\"), url(\"../webfonts/fa-regular-400.ttf\") format(\"truetype\");\n }\n .far,\n .fa-regular {\n font-family: \"Font Awesome 6 Free\";\n font-weight: 400;\n }\n :root,\n :host {\n --fa-font-solid: normal 900 1em/1 \"Font Awesome 6 Free\";\n }\n @font-face {\n font-family: \"Font Awesome 6 Free\";\n font-style: normal;\n font-weight: 900;\n font-display: block;\n src: url(\"../webfonts/fa-solid-900.woff2\") format(\"woff2\"), url(\"../webfonts/fa-solid-900.ttf\") format(\"truetype\");\n }\n .fas,\n .fa-solid {\n font-family: \"Font Awesome 6 Free\";\n font-weight: 900;\n }\n @font-face {\n font-family: \"Font Awesome 5 Brands\";\n font-display: block;\n font-weight: 400;\n src: url(\"../webfonts/fa-brands-400.woff2\") format(\"woff2\"), url(\"../webfonts/fa-brands-400.ttf\") format(\"truetype\");\n }\n @font-face {\n font-family: \"Font Awesome 5 Free\";\n font-display: block;\n font-weight: 900;\n src: url(\"../webfonts/fa-solid-900.woff2\") format(\"woff2\"), url(\"../webfonts/fa-solid-900.ttf\") format(\"truetype\");\n }\n @font-face {\n font-family: \"Font Awesome 5 Free\";\n font-display: block;\n font-weight: 400;\n src: url(\"../webfonts/fa-regular-400.woff2\") format(\"woff2\"), url(\"../webfonts/fa-regular-400.ttf\") format(\"truetype\");\n }\n @font-face {\n font-family: \"FontAwesome\";\n font-display: block;\n src: url(\"../webfonts/fa-solid-900.woff2\") format(\"woff2\"), url(\"../webfonts/fa-solid-900.ttf\") format(\"truetype\");\n }\n @font-face {\n font-family: \"FontAwesome\";\n font-display: block;\n src: url(\"../webfonts/fa-brands-400.woff2\") format(\"woff2\"), url(\"../webfonts/fa-brands-400.ttf\") format(\"truetype\");\n }\n @font-face {\n font-family: \"FontAwesome\";\n font-display: block;\n src: url(\"../webfonts/fa-regular-400.woff2\") format(\"woff2\"), url(\"../webfonts/fa-regular-400.ttf\") format(\"truetype\");\n 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, 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, 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, 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, U+F2C0-F2C1, U+F2C3, U+F2D0, U+F2D2, U+F2D4, U+F2DC;\n }\n @font-face {\n font-family: \"FontAwesome\";\n font-display: block;\n src: url(\"../webfonts/fa-v4compatibility.woff2\") format(\"woff2\"), url(\"../webfonts/fa-v4compatibility.ttf\") format(\"truetype\");\n 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, 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;\n }\n}";
6076
+
6077
+ var css_248z$q = "@layer kol-theme-component {\n :host > div {\n width: 100%;\n padding: 15px;\n background: var(--color-grau-weiss);\n box-shadow: -4px 0px 0px var(--color-gruen);\n }\n}";
6078
+
6079
+ var css_248z$p = "@layer kol-theme-component {\n :host {\n --border-width: 1px;\n --spacing: 0.25rem;\n }\n label {\n cursor: pointer;\n }\n input {\n color: black;\n border-color: var(--color-grau-dunkel);\n border-width: var(--border-width);\n border-style: solid;\n line-height: 24px;\n font-size: 16px;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n input:hover {\n border-color: var(--color-blau);\n }\n /* NEU */\n kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n }\n kol-input.checkbox {\n grid-template-columns: calc(6 * var(--spacing)) auto;\n }\n kol-input.switch {\n grid-template-columns: calc(13 * var(--spacing)) auto;\n }\n kol-input > div.input {\n display: inline-flex;\n order: 1;\n }\n kol-input > div.input input {\n margin: 0px;\n }\n kol-input > label {\n order: 2;\n padding-left: calc(2 * var(--spacing));\n }\n kol-input > kol-alert.error {\n order: 3;\n padding-top: 0.25em;\n grid-column: span 2/auto;\n }\n /* CHECKBOX */\n input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n input[type=checkbox].kol-disabled:before {\n cursor: not-allowed;\n }\n input[type=checkbox]:before {\n content: \"\";\n cursor: pointer;\n }\n input[type=checkbox]:checked {\n background-color: var(--color-blau);\n border-color: var(--color-blau);\n }\n .checkbox input[type=checkbox] {\n height: calc(6 * var(--spacing));\n min-width: calc(6 * var(--spacing));\n width: calc(6 * var(--spacing));\n }\n .checkbox input[type=checkbox]:before {\n background-color: transparent;\n display: block;\n height: calc(6 * var(--spacing));\n position: relative;\n width: calc(6 * var(--spacing));\n }\n .checkbox input[type=checkbox]:checked:before {\n border-right-width: 3px;\n border-bottom-width: 3px;\n left: calc(1.5 * var(--spacing) - var(--border-width));\n top: calc(2.85 * var(--spacing) - var(--border-width));\n transform: rotate(40deg) translate(-50%, -50%);\n background-color: transparent;\n border-width: 0px 3px 3px 0px;\n border-color: white;\n border-style: solid;\n height: calc(3 * var(--spacing));\n width: calc(1.5 * var(--spacing));\n }\n .checkbox input[type=checkbox]:indeterminate:before {\n background-color: var(--color-grau-dunkel);\n height: 0.375rem;\n top: 0.5rem;\n left: 0.2rem;\n width: calc(4 * var(--spacing));\n }\n .switch input[type=checkbox] {\n min-width: 3.2em;\n width: 3.2em;\n height: 1.7em;\n display: inline-block;\n position: relative;\n }\n .switch input[type=checkbox]:before {\n -webkit-transition: 0.5s;\n -moz-transition: 0.5s;\n -ms-transition: 0.5s;\n transition: 0.5;\n width: 1.2em;\n height: 1.2em;\n left: calc(0.25em - var(--border-width));\n top: calc(0.25em - var(--border-width));\n background-color: black;\n position: absolute;\n }\n .switch input[type=checkbox]:checked:before {\n -webkit-transform: translateX(1.5em);\n -moz-transform: translateX(1.5em);\n -ms-transform: translateX(1.5em);\n transform: translateX(1.5em);\n background-color: white;\n }\n .switch input[type=checkbox]:indeterminate:before {\n -webkit-transform: translateX(0.75em);\n -moz-transform: translateX(0.75em);\n -ms-transform: translateX(0.75em);\n transform: translateX(0.75em);\n background-color: var(--color-blau);\n }\n .disabled {\n opacity: 0.33;\n }\n}";
6080
+
6081
+ var css_248z$o = "@layer kol-theme-component {\n kol-input {\n display: grid;\n padding: 0;\n margin: 0;\n }\n input:focus,\n input:hover,\n select:focus,\n select:hover,\n textarea:focus,\n textarea:hover {\n border-color: black;\n }\n kol-input > label {\n order: 1;\n margin-bottom: 0.25em;\n }\n kol-input > label > span {\n color: black;\n font-size: 0.875rem;\n line-height: 1.5rem;\n }\n kol-input > div.input {\n background-color: white;\n display: block;\n order: 2;\n }\n kol-input > kol-alert.error {\n margin-top: 0.25em;\n order: 3;\n }\n input,\n select,\n textarea {\n font-family: var(--font-family);\n background-color: transparent;\n box-sizing: border-box;\n font-size: 1rem;\n display: inline-flex;\n line-height: 1.5em;\n color: black;\n border-color: var(--color-grau-dunkel);\n border-width: 1px;\n border-style: solid;\n padding: 0.5em 0.75em;\n overflow: hidden;\n width: 100%;\n }\n input:not([type=range]),\n select:not([multiple]) {\n height: 2.75em;\n }\n textarea {\n display: inherit;\n }\n input::placeholder {\n color: var(--color-grau-dunkel);\n }\n input:not([type=color]):read-only, input:disabled,\n select:disabled, textarea:read-only, textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .icons {\n display: flex;\n justify-content: space-between;\n height: 0;\n }\n .icons > * {\n margin: 0.75em;\n }\n .icon-left input,\n .icon-left select {\n padding-left: 2em;\n }\n .icon-right input,\n .icon-right select {\n padding-right: 2em;\n }\n kol-button-wc {\n position: relative;\n float: right;\n z-index: 1000;\n margin-top: -33px;\n }\n kol-button-wc button {\n border: 1px solid var(--color-grau-dunkel);\n box-sizing: border-box;\n background-color: transparent;\n cursor: pointer;\n }\n .icon-right kol-button-wc {\n margin-right: 2.5em;\n }\n .disabled {\n opacity: 0.33;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n select option {\n margin: 1px 0;\n padding: 0.5em;\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n color: white;\n }\n}";
6082
+
6083
+ var css_248z$n = "@layer kol-theme-component {\n kol-input label {\n font-weight: 700;\n margin-bottom: var(--gapSmallest);\n }\n input {\n border: var(--formBorder);\n }\n input:hover {\n border: var(--formBorderHover);\n }\n}";
6084
+
6085
+ var css_248z$m = "@layer kol-theme-component {\n kol-input {\n display: grid;\n padding: 0;\n margin: 0;\n }\n input:focus,\n input:hover,\n select:focus,\n select:hover,\n textarea:focus,\n textarea:hover {\n border-color: black;\n }\n kol-input > label {\n order: 1;\n margin-bottom: 0.25em;\n }\n kol-input > label > span {\n color: black;\n font-size: 0.875rem;\n line-height: 1.5rem;\n }\n kol-input > div.input {\n background-color: white;\n display: block;\n order: 2;\n }\n kol-input > kol-alert.error {\n margin-top: 0.25em;\n order: 3;\n }\n input,\n select,\n textarea {\n font-family: var(--font-family);\n background-color: transparent;\n box-sizing: border-box;\n font-size: 1rem;\n display: inline-flex;\n line-height: 1.5em;\n color: black;\n border-color: var(--color-grau-dunkel);\n border-width: 1px;\n border-style: solid;\n padding: 0.5em 0.75em;\n overflow: hidden;\n width: 100%;\n }\n input:not([type=range]),\n select:not([multiple]) {\n height: 2.75em;\n }\n textarea {\n display: inherit;\n }\n input::placeholder {\n color: var(--color-grau-dunkel);\n }\n input:not([type=color]):read-only, input:disabled,\n select:disabled, textarea:read-only, textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .icons {\n display: flex;\n justify-content: space-between;\n height: 0;\n }\n .icons > * {\n margin: 0.75em;\n }\n .icon-left input,\n .icon-left select {\n padding-left: 2em;\n }\n .icon-right input,\n .icon-right select {\n padding-right: 2em;\n }\n kol-button-wc {\n position: relative;\n float: right;\n z-index: 1000;\n margin-top: -33px;\n }\n kol-button-wc button {\n border: 1px solid var(--color-grau-dunkel);\n box-sizing: border-box;\n background-color: transparent;\n cursor: pointer;\n }\n .icon-right kol-button-wc {\n margin-right: 2.5em;\n }\n .disabled {\n opacity: 0.33;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n select option {\n margin: 1px 0;\n padding: 0.5em;\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n color: white;\n }\n}";
6086
+
6087
+ var css_248z$l = "@layer kol-theme-component {\n kol-input {\n display: grid;\n padding: 0;\n margin: 0;\n }\n input:focus,\n input:hover,\n select:focus,\n select:hover,\n textarea:focus,\n textarea:hover {\n border-color: black;\n }\n kol-input > label {\n order: 1;\n margin-bottom: 0.25em;\n }\n kol-input > label > span {\n color: black;\n font-size: 0.875rem;\n line-height: 1.5rem;\n }\n kol-input > div.input {\n background-color: white;\n display: block;\n order: 2;\n }\n kol-input > kol-alert.error {\n margin-top: 0.25em;\n order: 3;\n }\n input,\n select,\n textarea {\n font-family: var(--font-family);\n background-color: transparent;\n box-sizing: border-box;\n font-size: 1rem;\n display: inline-flex;\n line-height: 1.5em;\n color: black;\n border-color: var(--color-grau-dunkel);\n border-width: 1px;\n border-style: solid;\n padding: 0.5em 0.75em;\n overflow: hidden;\n width: 100%;\n }\n input:not([type=range]),\n select:not([multiple]) {\n height: 2.75em;\n }\n textarea {\n display: inherit;\n }\n input::placeholder {\n color: var(--color-grau-dunkel);\n }\n input:not([type=color]):read-only, input:disabled,\n select:disabled, textarea:read-only, textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .icons {\n display: flex;\n justify-content: space-between;\n height: 0;\n }\n .icons > * {\n margin: 0.75em;\n }\n .icon-left input,\n .icon-left select {\n padding-left: 2em;\n }\n .icon-right input,\n .icon-right select {\n padding-right: 2em;\n }\n kol-button-wc {\n position: relative;\n float: right;\n z-index: 1000;\n margin-top: -33px;\n }\n kol-button-wc button {\n border: 1px solid var(--color-grau-dunkel);\n box-sizing: border-box;\n background-color: transparent;\n cursor: pointer;\n }\n .icon-right kol-button-wc {\n margin-right: 2.5em;\n }\n .disabled {\n opacity: 0.33;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n select option {\n margin: 1px 0;\n padding: 0.5em;\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n color: white;\n }\n}";
6088
+
6089
+ var css_248z$k = "@layer kol-theme-component {\n kol-input {\n display: grid;\n padding: 0;\n margin: 0;\n }\n input:focus,\n input:hover,\n select:focus,\n select:hover,\n textarea:focus,\n textarea:hover {\n border-color: black;\n }\n input:focus-within,\n select:focus-within,\n textarea:focus-within {\n outline: var(--color-focus) solid 2px;\n }\n kol-input label {\n font-weight: 700;\n order: 1;\n margin-bottom: var(--gapSmallest);\n }\n kol-input label > span {\n color: black;\n font-size: 0.875rem;\n line-height: 1.5rem;\n }\n kol-input > div.input {\n background-color: white;\n display: block;\n order: 2;\n }\n kol-input > kol-alert.error {\n margin-top: 0.25em;\n order: 3;\n }\n input,\n select,\n textarea {\n font-family: var(--textFont);\n background-color: transparent;\n box-sizing: border-box;\n font-size: var(--textFontSize);\n display: inline-flex;\n line-height: 1.5;\n color: black;\n border-color: var(--color-gruen);\n border-width: 1px;\n border-style: solid;\n padding: 0.5em;\n overflow: hidden;\n width: 100%;\n }\n input:not([type=range]),\n select:not([multiple]) {\n height: 2.75em;\n }\n textarea {\n display: inherit;\n }\n input::placeholder {\n color: var(--color-grau-dunkel);\n }\n input:not([type=color]):read-only, input:disabled,\n select:disabled, textarea:read-only, textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .icons {\n display: flex;\n justify-content: space-between;\n height: 0;\n }\n .icons > * {\n margin: 0.75em;\n }\n .icon-left input,\n .icon-left select {\n padding-left: 2em;\n }\n .icon-right input,\n .icon-right select {\n padding-right: 2em;\n }\n kol-button-wc {\n position: relative;\n float: right;\n z-index: 1;\n margin-top: -33px;\n }\n kol-button-wc button {\n border: 1px solid var(--color-grau-dunkel);\n box-sizing: border-box;\n background-color: transparent;\n cursor: pointer;\n }\n .icon-right kol-button-wc {\n margin-right: 2.5em;\n }\n .disabled {\n opacity: 0.33;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n select option {\n margin: 1px 0;\n padding: 0.5em;\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n background: var(--color-ocean);\n color: white;\n }\n}";
6090
+
6091
+ var css_248z$j = "@layer kol-theme-component {\n kol-input {\n display: grid;\n padding: 0;\n margin: 0;\n }\n input:focus,\n input:hover,\n select:focus,\n select:hover,\n textarea:focus,\n textarea:hover {\n border-color: black;\n }\n kol-input > label {\n order: 1;\n margin-bottom: 0.25em;\n }\n kol-input > label > span {\n color: black;\n font-size: 0.875rem;\n line-height: 1.5rem;\n }\n kol-input > div.input {\n background-color: white;\n display: block;\n order: 2;\n }\n kol-input > kol-alert.error {\n margin-top: 0.25em;\n order: 3;\n }\n input,\n select,\n textarea {\n font-family: var(--font-family);\n background-color: transparent;\n box-sizing: border-box;\n font-size: 1rem;\n display: inline-flex;\n line-height: 1.5em;\n color: black;\n border-color: var(--color-grau-dunkel);\n border-width: 1px;\n border-style: solid;\n padding: 0.5em 0.75em;\n overflow: hidden;\n width: 100%;\n }\n input:not([type=range]),\n select:not([multiple]) {\n height: 2.75em;\n }\n textarea {\n display: inherit;\n }\n input::placeholder {\n color: var(--color-grau-dunkel);\n }\n input:not([type=color]):read-only, input:disabled,\n select:disabled, textarea:read-only, textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .icons {\n display: flex;\n justify-content: space-between;\n height: 0;\n }\n .icons > * {\n margin: 0.75em;\n }\n .icon-left input,\n .icon-left select {\n padding-left: 2em;\n }\n .icon-right input,\n .icon-right select {\n padding-right: 2em;\n }\n kol-button-wc {\n position: relative;\n float: right;\n z-index: 1000;\n margin-top: -33px;\n }\n kol-button-wc button {\n border: 1px solid var(--color-grau-dunkel);\n box-sizing: border-box;\n background-color: transparent;\n cursor: pointer;\n }\n .icon-right kol-button-wc {\n margin-right: 2.5em;\n }\n .disabled {\n opacity: 0.33;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n select option {\n margin: 1px 0;\n padding: 0.5em;\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n color: white;\n }\n}";
6092
+
6093
+ var css_248z$i = "@layer kol-theme-component {\n :host {\n --border-width: 1px;\n --input-color: var(--color-gruen-dunkel);\n --input-inner-position: calc(var(--spacing) + var(--border-width));\n --input-inner-size: calc(var(--spacing) * 3);\n --input-outer-size: calc(var(--spacing) * 6);\n }\n div[slot=input] {\n align-items: center;\n display: flex;\n gap: calc(var(--spacing) * 2);\n }\n fieldset {\n border: 0;\n margin: 0;\n padding: 0;\n }\n fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5rem 32px;\n }\n input {\n cursor: pointer;\n display: grid;\n align-self: center;\n border: var(--border-width) solid var(--input-color);\n appearance: none;\n border-radius: 100%;\n height: var(--input-outer-size);\n width: var(--input-outer-size);\n margin: 0;\n }\n input:hover {\n --border-width: 2px;\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:disabled {\n --input-color: var(--color-disabled);\n }\n input:disabled:hover {\n --border-width: 1px;\n }\n input:disabled + label {\n color: var(--color-disabled);\n }\n input::before {\n content: \"\";\n cursor: pointer; /* left: var(--input-inner-position);top: var(--input-inner-position); */\n position: relative;\n border-radius: 100%;\n display: inline-block;\n height: var(--input-inner-size);\n width: var(--input-inner-size);\n }\n input:hover::before {\n --input-inner-position: var(--spacing);\n }\n input:checked::before {\n background-color: var(--input-color);\n }\n kol-input {\n display: grid;\n }\n kol-input {\n margin-bottom: 1rem;\n }\n kol-input.error input {\n border-color: var(--color-rot);\n padding-left: 1em;\n }\n kol-input.error input:focus,\n kol-input.error select:focus,\n kol-input.error textarea:focus {\n outline: var(--color-focus) solid 2px !important;\n }\n kol-input kol-alert.error {\n margin-bottom: 0.4em;\n order: 1;\n }\n kol-input.error kol-alert.error {\n color: var(--color-rot);\n font-weight: 700;\n }\n label {\n color: var(--color-text);\n cursor: pointer;\n display: grid;\n font-size: var(--text-size); /* order: 2; */\n font-weight: 700;\n }\n legend {\n font-size: var(--text-size);\n margin-bottom: var(--text-size);\n }\n .icons {\n display: flex;\n justify-content: space-between;\n height: 0;\n }\n .icons > * {\n margin: 0.75em;\n }\n .icon-left input,\n .icon-left select {\n padding-left: 2em;\n }\n .icon-right input,\n .icon-right select {\n padding-right: 2em;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
6094
+
6095
+ var css_248z$h = "@layer kol-theme-component {\n /* https://www.cssportal.com/style-input-range/ */\n kol-input {\n display: grid;\n }\n kol-input label {\n display: grid;\n order: 2;\n margin-bottom: 0.4em;\n }\n kol-input div.input {\n box-sizing: border-box;\n order: 3;\n background-color: white;\n border-radius: 0.3125rem;\n }\n kol-input kol-alert.error {\n margin-bottom: 0.4em;\n order: 1;\n }\n input,\n select,\n textarea {\n font-family: var(--font-family);\n background-color: transparent;\n box-sizing: border-box;\n font-size: 1rem;\n display: inline-flex;\n line-height: 1.5em;\n border-color: var(--color-grey);\n border-width: 2px;\n border-style: solid;\n padding: 0.625em 0.875em;\n border-radius: 0.3125rem;\n overflow: hidden;\n width: calc(100% - 4em);\n }\n input,\n select:not([multiple]) {\n height: 2.75em;\n }\n input::placeholder {\n color: var(--color-grey);\n }\n input:hover {\n border-color: var(--color-midnight);\n }\n input:not([type=color]):read-only, input:disabled,\n select:disabled, textarea:read-only, textarea:disabled {\n cursor: not-allowed;\n border-color: var(--border-default);\n }\n .required #label::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .icons {\n display: flex;\n justify-content: space-between;\n height: 0;\n }\n .icons > * {\n margin: 0.725em 0.875em;\n box-sizing: border-box;\n border-color: transparent;\n border-width: 2px;\n border-style: solid;\n }\n .icon-left input,\n .icon-left select {\n padding-left: 2.375em;\n }\n .icon-right input,\n .icon-right select {\n padding-right: 2.375em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-red);\n padding-left: 1em;\n }\n kol-input.error input:focus,\n kol-input.error select:focus,\n kol-input.error textarea:focus {\n outline-color: var(--color-red) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-red);\n font-weight: 700;\n }\n kol-button-wc {\n position: relative;\n float: right;\n z-index: 1000;\n margin-top: -33px;\n }\n kol-button-wc button {\n border: 1px solid var(--color-grey);\n border-radius: 0.25rem;\n box-sizing: border-box;\n background-color: transparent;\n cursor: pointer;\n }\n .icon-right kol-button-wc {\n margin-right: 2.5em;\n }\n .disabled {\n opacity: 0.33;\n }\n .icon-left input,\n .icon-left select {\n margin-left: 2em;\n }\n .icon-right input,\n .icon-right select {\n margin-right: 2em;\n }\n input[type=range] {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n }\n input[type=range] {\n overflow: visible;\n background-color: var(--color-ice);\n border: 0;\n height: 0.5rem;\n padding: 0;\n padding-bottom: 0;\n margin-bottom: 0;\n }\n input[type=range]::-webkit-slider-thumb {\n box-sizing: border-box;\n background-color: var(--color-midnight);\n height: 20px;\n width: 20px;\n border-radius: 20px;\n cursor: pointer;\n -webkit-appearance: none;\n }\n}";
6096
+
6097
+ var css_248z$g = "@layer kol-theme-component {\n kol-input {\n gap: 0.4em;\n }\n kol-input .error {\n order: 3;\n }\n kol-input label {\n font-weight: 700;\n order: 1;\n }\n kol-input .input {\n order: 2;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.875em;\n font-style: italic;\n }\n input {\n border: none;\n }\n .input {\n border-color: var(--color-grey);\n border-style: solid;\n border-width: 1px;\n padding: 0 0.5em;\n }\n .input > kol-icon {\n width: 1.5em;\n }\n .input > input:first-child {\n padding-left: 0.375em;\n }\n .input > input:last-child {\n padding-right: 0.375em;\n }\n .input:hover {\n border-color: var(--color-gruen-hell);\n }\n input:not([type=color]):read-only,\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-rot);\n padding-left: 1em;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-rot) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-rot);\n font-weight: 700;\n }\n .disabled {\n opacity: 0.33;\n }\n label {\n color: var(--color-text);\n line-height: 1.5;\n }\n .input {\n font-size: var(--text-size);\n line-height: 1.5;\n color: var(--colorText);\n border-color: var(--color-gruen);\n border-style: solid;\n width: 100%;\n }\n input:not([type=range]) {\n height: 2.75em;\n }\n input::placeholder {\n color: var(--color-grau-dunkel);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
6098
+
6099
+ var css_248z$f = "@charset \"UTF-8\";\n@layer kol-theme-component {\n :host {\n --background-color: var(--color-gruen-dunkel);\n --border-color: var(--color-gruen-dunkel);\n --border-size: 1px;\n --min-size: 2.75rem;\n display: inline-block;\n }\n :is(button, a) {\n outline: none;\n }\n :is(button, a)::before {\n /* Render zero-width character as first element to set the baseline correctly. */\n content: \"​\";\n }\n :is(button, a) > kol-span-wc {\n border-width: var(--border-size);\n border-style: solid;\n min-width: var(--min-size);\n min-height: var(--min-size);\n display: grid;\n gap: 0.25em;\n line-height: 1.5;\n font-family: var(--font-family);\n cursor: pointer;\n font-size: var(--text-size);\n align-items: center;\n padding: 0.5rem 0.875rem !important;\n justify-content: center;\n font-style: normal;\n text-align: center;\n text-transform: uppercase;\n width: inherit;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(button, a):hover:enabled > kol-span-wc {\n text-decoration: underline;\n }\n :is(button, a):focus > kol-span-wc {\n outline: var(--color-focus) solid 2px;\n }\n .primary :is(button, a) > kol-span-wc,\n .primary :is(button, a):active > kol-span-wc,\n .primary :is(button, a):hover > kol-span-wc {\n background-color: var(--background-color);\n border-color: var(--border-color);\n color: var(--color-weiss);\n }\n .secondary :is(button, a) > kol-span-wc,\n .danger :is(button, a) > kol-span-wc,\n .normal :is(button, a) > kol-span-wc,\n .ghost :is(button, a) > kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-gruen-hell);\n color: var(--color-grau-dunkel);\n }\n .ghost :is(button, a) > kol-span-wc {\n background-color: transparent;\n color: inherit;\n border: calc(var(--border-size) * 2) solid transparent;\n }\n .secondary :is(button, a):active > kol-span-wc,\n .secondary :is(button, a):hover > kol-span-wc {\n background-color: var(--background-color);\n border-color: var(--background-color);\n border-width: var(--border-size);\n color: var(--color-weiss);\n }\n :is(button, a):disabled > kol-span-wc,\n :is(button, a):disabled:hover > kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-grau-hell);\n color: var(--color-disabled);\n cursor: not-allowed;\n }\n}";
6100
+
6101
+ var css_248z$e = "@layer kol-theme-component {\n :is(a, button) {\n /* color: var(--color-midnight); */\n color: var(--external-link-color, var(--color-gruen));\n font-style: normal;\n font-weight: 400;\n padding: var(--external-link-padding, 0);\n text-decoration-line: none;\n }\n :is(a, button):focus {\n /* outline: var(--color-focus) solid 2px; */\n outline: none;\n }\n :is(a, button):hover {\n /* text-decoration-thickness: 0.25em; */\n box-shadow: inset 0 -1px 0 0 var(--external-link-color, var(--color-gruen));\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n /*************************/\n /* kol-link-wc {display: inline-block;} */\n /* kol-icon {padding: 0 0.25rem;} */\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .icon-only {\n padding-bottom: 0.2rem;\n }\n :is(a) kol-span-wc > span {\n gap: var(--gapSmallest);\n }\n}";
6102
+
6103
+ var css_248z$d = "@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}";
6104
+
6105
+ var css_248z$c = "@layer kol-theme-component {\n :host .overlay .modal {\n max-height: calc(100% - 32px);\n }\n}";
6106
+
6107
+ var css_248z$b = "@layer kol-theme-component {\n ul {\n list-style: none;\n }\n a {\n color: var(--colorText);\n display: block;\n padding: 0.3rem 0.5rem;\n text-decoration: none;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n a:hover {\n background-color: var(--colorPrimarySuccess);\n color: var(--colorLight);\n }\n a:focus,\n button:focus {\n outline: var(--focusOutline);\n outline-offset: 2px;\n transition: outline-offset 0.2s linear;\n }\n .list[data-deep=\"0\"] {\n font-family: var(--textFontSerif);\n }\n .horizontal {\n gap: var(--gap);\n }\n}";
6108
+
6109
+ var css_248z$a = "@layer kol-theme-component {\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 --background-color: var(--color-gruen-dunkel);\n --border-color: var(--color-gruen-dunkel);\n --border-size: 1px;\n --min-size: 2.75rem;\n align-items: center;\n background-color: var(--color-weiss);\n border: var(--border-size) solid var(--color-gruen-hell);\n color: var(--color-grau-dunkel);\n cursor: pointer;\n display: grid;\n font-family: var(--font-family);\n font-size: var(--text-size);\n font-style: normal;\n gap: 0.25em;\n justify-content: center;\n line-height: 1.5;\n min-height: var(--min-size);\n min-width: var(--min-size);\n padding: 0.5rem 0.875rem;\n text-align: center;\n text-transform: uppercase;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .button:hover:enabled {\n text-decoration: underline;\n }\n .button:focus {\n outline: var(--color-focus) solid 2px;\n }\n .button:disabled, .button:disabled:hover {\n opacity: 0.5;\n background-color: var(--color-weiss);\n border-color: var(--color-grau-hell);\n color: var(--color-disabled);\n cursor: not-allowed;\n }\n .button .icon {\n display: inline-block;\n width: 1.5em;\n height: 1.5em;\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}";
6110
+
6111
+ var css_248z$9 = "@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}";
6112
+
6113
+ var css_248z$8 = "@layer kol-theme-component {\n :host {\n --color: var(--colorText); /* --color: blue; */\n }\n kol-input {\n color: var(--color);\n font-size: var(--textFontSize);\n gap: var(--gapSmallest);\n }\n label {\n font-weight: 700;\n order: 1;\n }\n .input {\n order: 2;\n }\n kol-alert.error {\n color: var(--colorSignalError);\n order: 3;\n }\n select {\n background-color: var(--colorLight);\n line-height: 1.5;\n color: var(--color);\n border: var(--formBorder);\n padding: 0.5em 0.75em;\n }\n select:hover,\n select:focus {\n border-color: var(--colorPrimaryActive);\n }\n select:disabled {\n cursor: not-allowed;\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: 1px 0;\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n /* kol-input.error select:invalid { */\n kol-input.error select {\n border-color: var(--colorSignalError);\n }\n /* option:active:not(:disabled),option:focus:not(:disabled),option:hover:not(:disabled) {color: white;} */\n}";
6114
+
6115
+ var css_248z$7 = "@layer kol-theme-component {\n kol-link-wc > a > kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: 2px;\n gap: 0.5rem;\n line-height: 1rem;\n padding: 8px 14px;\n background-color: var(--color-ocean);\n border-color: var(--color-ocean);\n color: var(--color-white);\n cursor: pointer;\n }\n}";
6116
+
6117
+ var css_248z$6 = "@layer kol-theme-component {\n .cycle {\n padding: 0.125rem;\n }\n .cycle span {\n background-color: #fc0;\n }\n}";
6118
+
6119
+ var css_248z$5 = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n line-height: var(--textFontLineHeight);\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-weiss);\n }\n tr {\n border-top-width: 2px;\n }\n th {\n background-color: var(--color-gruen);\n color: var(--color-weiss);\n font-weight: normal;\n }\n tbody > tr:nth-child(odd) {\n background-color: #f2f2f2;\n }\n tbody > tr:hover {\n background-color: var(--color-gruen-dunkel);\n color: var(--color-weiss);\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 font-size: var(--textFontSize);\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 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}";
6120
+
6121
+ var css_248z$4 = "@layer kol-theme-component {\n button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n display: block;\n width: 100%;\n }\n :host kol-button-group-wc {\n display: inline-block;\n border-radius: 0.25rem 0.25rem 0 0;\n background-color: var(--kolibri-color-normal);\n }\n :host kol-button-group-wc > div {\n display: inline-flex;\n }\n :host kol-button-group-wc > div + div {\n margin-left: 0.25em;\n }\n :host > div > div {\n padding: 0.25em;\n border: 1px solid var(--kolibri-border-color);\n border-radius: 0 0 0.25rem 0.25rem;\n }\n button {\n box-sizing: border-box;\n font-size: inherit;\n line-height: 1.25em;\n cursor: pointer;\n border-width: 2px;\n box-shadow: 0 0 0.25em gray;\n font-family: var(--kolibri-font-family);\n width: inherit;\n border-radius: var(--kolibri-border-radius);\n border-style: solid;\n padding: calc(2 * var(--kolibri-spacing));\n display: grid;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n kol-button-wc[aria-selected=true] button {\n border-bottom-width: 0.25em !important;\n border-bottom-style: solid;\n border-bottom-color: var(--kolibri-color-accent) !important;\n }\n button > kol-span-wc span {\n display: flex;\n gap: 0.25em;\n align-items: center;\n justify-content: center;\n }\n button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n button.primary,\n button.primary:disabled:hover {\n background-color: var(--kolibri-color-primary);\n border-color: var(--kolibri-color-primary);\n color: white;\n }\n button.primary:hover,\n button.primary:focus {\n color: var(--kolibri-color-primary);\n }\n button.secondary,\n button.secondary:disabled:hover {\n background-color: var(--kolibri-color-secondary);\n border-color: var(--kolibri-color-secondary);\n color: white;\n }\n button.secondary:hover,\n button.secondary:focus {\n color: var(--kolibri-color-secondary);\n }\n button.normal,\n button.normal:disabled:hover {\n background-color: var(--kolibri-color-normal);\n border-color: var(--kolibri-color-normal);\n color: white;\n }\n button.normal:hover,\n button.normal:focus {\n color: var(--kolibri-color-normal);\n }\n button.danger,\n button.danger:disabled:hover {\n background-color: var(--kolibri-color-danger);\n border-color: var(--kolibri-color-danger);\n color: white;\n }\n button.danger:hover,\n button.danger:focus {\n color: var(--kolibri-color-danger);\n }\n button.ghost,\n button.ghost:disabled:hover {\n background-color: white;\n border-color: var(--kolibri-color-ghost);\n color: var(--kolibri-color-ghost);\n }\n button.ghost:hover,\n button.ghost:focus {\n background-color: var(--kolibri-color-ghost);\n color: white;\n }\n button:hover,\n button:focus {\n background-color: white;\n box-shadow: 0 0 0.25em black;\n }\n button:active {\n outline: 0 !important;\n box-shadow: none !important;\n }\n .close-button {\n font-size: 25%;\n height: fit-content;\n width: 0;\n }\n .close-button button {\n width: 1rem;\n position: relative;\n height: 1rem;\n left: -4.25em;\n top: 0.25em;\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left kol-button-group-wc,\n :host > .tabs-align-top kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom kol-button-group-wc,\n :host > .tabs-align-right kol-button-group-wc {\n order: 1;\n }\n :host > div.tabs-align-left kol-button-group-wc > div,\n :host > div.tabs-align-left kol-button-group-wc > div > div,\n :host > div.tabs-align-right kol-button-group-wc > div,\n :host > div.tabs-align-right kol-button-group-wc > div > div {\n display: grid;\n }\n :host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n :host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom kol-button-group-wc div,\n :host > div.tabs-align-top kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n }\n :host > div.tabs-align-bottom > kol-button-group-wc {\n border-radius: 0 0 0.25rem 0.25rem;\n }\n :host > div.tabs-align-bottom > div {\n border-radius: 0.25rem 0.25rem 0 0;\n }\n :host > div.tabs-align-top > kol-button-group-wc {\n border-radius: 0.25rem 0.25rem 0 0;\n }\n :host > div.tabs-align-top > div {\n border-radius: 0 0 0.25rem 0.25rem;\n }\n :host > div.tabs-align-left > kol-button-group-wc {\n border-radius: 0.25rem 0 0 0.25rem;\n }\n :host > div.tabs-align-left > div {\n border-radius: 0 0.25rem 0.25rem 0;\n }\n :host > div.tabs-align-right > kol-button-group-wc {\n border-radius: 0 0.25rem 0.25rem 0;\n }\n :host > div.tabs-align-right > div {\n border-radius: 0.25rem 0 0 0.25rem;\n }\n}";
6122
+
6123
+ var css_248z$3 = "@layer kol-theme-component {\n kol-input {\n gap: 0.4em;\n }\n kol-input .error {\n order: 3;\n }\n kol-input label {\n font-weight: 700;\n order: 1;\n }\n kol-input .input {\n order: 2;\n }\n kol-input .hint {\n order: 4;\n font-size: 0.875em;\n font-style: italic;\n }\n input,\n select,\n textarea {\n border: none;\n }\n .input {\n color: var(--colorText);\n border: var(--formBorder);\n font-size: var(--textFontSize);\n line-height: 1.5;\n padding: 0 0.5em;\n width: 100%;\n }\n .input > kol-icon {\n width: 1.5em;\n }\n .input > input:first-child {\n padding-left: 0.375em;\n }\n .input > input:last-child {\n padding-right: 0.375em;\n }\n .input:hover {\n border-color: var(--color-gruen-hell);\n }\n input:not([type=color]):read-only, input:disabled,\n select:disabled, textarea:read-only, textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n kol-input.error {\n border-left: 3px solid var(--color-rot);\n padding-left: 1em;\n }\n kol-input.error .input:focus-within {\n outline-color: var(--color-rot) !important;\n }\n kol-input.error kol-alert.error {\n color: var(--color-rot);\n font-weight: 700;\n }\n .disabled {\n opacity: 0.33;\n }\n label {\n color: var(--color-text);\n line-height: 1.5;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
6124
+
6125
+ var css_248z$2 = "@layer kol-theme-component {\n :host {\n top: 1rem;\n width: 750px;\n left: 50%;\n transform: translateX(-50%);\n }\n .toast {\n background: #fff;\n margin-top: 1rem;\n }\n}";
6126
+
6127
+ var css_248z$1 = "@layer kol-theme-component {\n :host {\n --kolibri-font-size: var(--textFontSize);\n }\n}";
6128
+
6129
+ const BZSt = KoliBri.createTheme("bzst", {
6130
+ GLOBAL: css_248z$t,
6131
+ "KOL-ABBR": css_248z$D,
6132
+ "KOL-ACCORDION": css_248z$C,
6133
+ "KOL-ALERT": css_248z$B,
6134
+ "KOL-BADGE": css_248z$A,
6135
+ "KOL-BREADCRUMB": css_248z$z,
6136
+ "KOL-BUTTON": css_248z$y,
6137
+ "KOL-BUTTON-GROUP": css_248z$x,
6138
+ "KOL-BUTTON-LINK": css_248z$w,
6139
+ "KOL-CARD": css_248z$v,
6140
+ "KOL-DETAILS": css_248z$u,
6141
+ "KOL-HEADING": css_248z$s,
6142
+ "KOL-ICON": css_248z$r,
6143
+ "KOL-INDENTED-TEXT": css_248z$q,
6144
+ "KOL-INPUT-CHECKBOX": css_248z$p,
6145
+ "KOL-INPUT-COLOR": css_248z$o,
6146
+ "KOL-INPUT-DATE": css_248z$n,
6147
+ "KOL-INPUT-EMAIL": css_248z$m,
6148
+ "KOL-INPUT-FILE": css_248z$l,
6149
+ "KOL-INPUT-NUMBER": css_248z$k,
6150
+ "KOL-INPUT-PASSWORD": css_248z$j,
6151
+ "KOL-INPUT-RADIO": css_248z$i,
6152
+ "KOL-INPUT-RANGE": css_248z$h,
6153
+ "KOL-INPUT-TEXT": css_248z$g,
6154
+ "KOL-LINK": css_248z$e,
6155
+ "KOL-LINK-BUTTON": css_248z$f,
6156
+ "KOL-LINK-GROUP": css_248z$d,
6157
+ "KOL-MODAL": css_248z$c,
6158
+ "KOL-NAV": css_248z$b,
6159
+ "KOL-PAGINATION": css_248z$a,
6160
+ "KOL-PROGRESS": css_248z$9,
6161
+ "KOL-SELECT": css_248z$8,
6162
+ "KOL-SKIP-NAV": css_248z$7,
6163
+ "KOL-SPIN": css_248z$6,
6164
+ "KOL-TABLE": css_248z$5,
6165
+ "KOL-TABS": css_248z$4,
6166
+ "KOL-TEXTAREA": css_248z$3,
6167
+ "KOL-TOAST-CONTAINER": css_248z$2,
6168
+ "KOL-TOOLTIP": css_248z$1
6169
+ });
6170
+
6171
+ var css_248z = "@charset \"UTF-8\";\n/* 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 /* token */\n --color-bleached-silk: #f2f2f2;\n --color-carbon: #333;\n --color-chilled-lemonade: #ffe695;\n --color-green: #4d7f6f;\n --color-green-light: #a7c0b8;\n --color-green-dark: #23614e;\n --color-heroic-blue: #126dff;\n --color-mercury: #ebebeb;\n --color-red-epiphyllum: #d00000;\n --color-speedwell: #595f73;\n --color-tropic-sea: #007194;\n --color-white: #fff; /* template */\n /* general */\n --colorDark: var(--color-carbon);\n --colorLight: var(--color-white); /* primary color */\n --colorPrimary: var(--color-green-dark);\n --colorPrimaryFront: var(--color-white);\n --colorPrimarySuccess: var(--color-green);\n --colorPrimarySuccessFront: var(--color-white);\n --colorPrimaryActive: var(--color-green-light);\n --colorPrimaryActiveFront: var(--color-carbon); /* secondary color */\n --colorSecondary: var(--color-white);\n --colorSecondaryFront: var(--color-carbon);\n --colorSecondarySuccess: var(--color-bleached-silk);\n --colorSecondarySuccessFront: var(--color-carbon);\n --colorSecondaryActive: var(--color-mercury);\n --colorSecondaryActiveFront: var(--color-carbon); /* text */\n --colorText: var(--color-carbon);\n --colorTextBg: var(--color-white);\n --colorTextLight: var(--color-white);\n --colorTextLightBg: var(--color-carbon);\n --colorTextDisabled: var(--color-speedwell);\n --colorTextDisabledBg: var(--color-mercury);\n --colorTextActive: var(--color-green-dark);\n --colorTextActiveBg: var(--color-white); /* signal */\n --colorSignal: var(--color-tropic-sea);\n --colorSignalFront: var(--color-white); /* colorSignalFocus hat keine Frontfarbe */\n --colorSignalFocus: var(--color-heroic-blue);\n --colorSignalSuccess: var(--color-green);\n --colorSignalSuccessFront: var(--color-white);\n --colorSignalWarn: var(--color-chilled-lemonade);\n --colorSignalWarnFront: var(--color-carbon);\n --colorSignalError: var(--color-red-epiphyllum);\n --colorSignalErrorFront: var(--color-white); /* disabled */\n --colorDisabled: var(--color-mercury);\n }\n /* font, headline, text */\n :root,\n :host {\n /* token */\n --font-family: \"BundesSans Web\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n \tsans-serif; /* Basis-Größe: html, rem */\n --font-size: 100%;\n --line-height: 1.6875rem; /* template */\n /* h1 */\n --headline1FontSize: 2.5rem;\n --headline1LineHeight: 2.8125rem; /* h2 */\n --headline2FontSize: 2rem;\n --headline2LineHeight: 2.5rem; /* h3 */\n --headline3FontSize: 1.3125rem;\n --headline3LineHeight: 1.6875rem; /* h4 */\n --headline4FontSize: 1rem;\n --headline4LineHeight: 1.6875rem; /* text */\n --textFont: var(--font-family);\n --textFontColor: var(--colorText);\n --textFontSerif: \"BundesSerif Web\", var(--textFont);\n --textFontSize: 1rem;\n --textFontLineHeight: 1.6875rem;\n --textFontWeight: normal;\n }\n /* Abstände */\n :root,\n :host {\n /* template */\n --gap: 2rem;\n --gapDouble: calc(var(--gap) * 2);\n --gapSmall: 1.25rem; /* TODO: benötigt nur außerhalb KoliBri Komponenten? */\n --gapSmallest: 0.625rem;\n --gapLarge: 2.5rem;\n }\n /* formular */\n :root,\n :host {\n /* template */\n --formBorderWidthAndStyle: 1px solid; /* TODO: eigentlich --color-green sein, aber im Styleguide ist der Wert: #23614E */\n --formBorder: var(--formBorderWidthAndStyle) var(--colorPrimarySuccess);\n --formBorderHover: var(--formBorderWidthAndStyle) var(--colorPrimaryActive);\n --formBorderDisabled: var(--formBorderWidthAndStyle) var(--colorDisabled);\n --formBorderInvalid: var(--formBorderWidthAndStyle) var(--colorSignalError);\n --focusOutline: var(--colorSignalFocus) solid 2px;\n --formFieldBackground: var(--colorLight); /*Select option */\n --formFieldBackgroundHover: var(--colorPrimary); /* Select options */\n --formFieldBackgroundEven: var(--formFieldBackground); /* Select options */\n --formFieldBackgroundOdd: var(--colorSecondaryActive);\n --formFieldBackgroundDisabled: var(--colorSecondarySuccess);\n --formFieldTextColorDisabled: var(--colorTextDisabled);\n }\n /* ********************************* */\n /* ********************************* */\n /* ********************************* */\n /* ********************************* */\n :host {\n /* Primärfarbe und Abstufungen */\n --color-gruen-dunkel: var(--colorPrimary);\n --color-gruen: var(--colorPrimarySuccess);\n --color-gruen-hell: var(--colorPrimaryActive); /* Sekundärfarben */\n --color-weiss: var(--colorSecondary);\n --color-grau-dunkel: var(--colorSecondaryFront);\n --color-grau-hell: var(--colorSecondaryActive);\n --color-grau-weiss: var(--colorSecondarySuccess); /* Textfarben */\n --color-graublau: var(--colorTextDisabled); /* Signalfarben */\n --color-blau: var(--colorSignalFocus);\n --color-blau-dunkel: var(--colorSignal);\n --color-gelb: var(--colorSignalWarn);\n --color-rot: var(--colorSignalError);\n --color-disabled: var(--colorTextDisabled);\n --text-size: var(--textFontSize);\n --color-focus: var(--color-blau);\n --spacing: 4px;\n --color-text: var(--color-grau-dunkel);\n }\n :host {\n color: var(--color-black);\n font-family: var(--font-family);\n }\n :host * {\n box-sizing: border-box;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-family: var(--textFontSerif);\n }\n h1,\n h2 {\n font-weight: var(--textFontWeight);\n }\n h1 {\n font-size: var(--headline1FontSize);\n line-height: var(--headline1LineHeight);\n }\n h2 {\n font-size: var(--headline2FontSize);\n line-height: var(--headline2LineHeight);\n }\n h3 {\n font-size: var(--headline3FontSize);\n line-height: var(--headline3LineHeight);\n }\n h4,\n h5,\n h6 {\n font-size: var(--headline4FontSize);\n line-height: var(--headline4LineHeight);\n }\n a,\n button,\n input,\n option,\n select,\n textarea {\n hyphens: auto;\n letter-spacing: inherit;\n }\n /* a,button,caption,input,option,select,summary,table,textarea {font-size: 1rem;} */\n summary {\n hyphens: auto;\n letter-spacing: inherit;\n }\n *[tabindex]:focus,\n kol-input:not(.checkbox, .radio) .input:focus-within,\n kol-input:is(.checkbox, .radio) input:focus,\n summary:focus {\n outline: var(--focusOutline);\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 .area {\n background-color: var(--colorDark);\n color: var(--colorLight);\n }\n kol-tooltip kol-span-wc {\n line-height: 1.5em;\n padding: 0.5rem 0.75rem;\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}";
6172
+
6173
+ const BZStv2 = KoliBri.createTheme("bzstv2", {
6174
+ GLOBAL: css_248z,
6175
+ "KOL-ABBR": css_248z$D,
6176
+ "KOL-ACCORDION": css_248z$C,
6177
+ "KOL-ALERT": css_248z$B,
6178
+ "KOL-BADGE": css_248z$A,
6179
+ "KOL-BREADCRUMB": css_248z$z,
6180
+ "KOL-BUTTON": css_248z$y,
6181
+ "KOL-BUTTON-GROUP": css_248z$x,
6182
+ "KOL-BUTTON-LINK": css_248z$w,
6183
+ "KOL-CARD": css_248z$v,
6184
+ "KOL-DETAILS": css_248z$u,
6185
+ "KOL-HEADING": css_248z$s,
6186
+ "KOL-ICON": css_248z$r,
6187
+ "KOL-INDENTED-TEXT": css_248z$q,
6188
+ "KOL-INPUT-CHECKBOX": css_248z$p,
6189
+ "KOL-INPUT-COLOR": css_248z$o,
6190
+ "KOL-INPUT-DATE": css_248z$n,
6191
+ "KOL-INPUT-EMAIL": css_248z$m,
6192
+ "KOL-INPUT-FILE": css_248z$l,
6193
+ "KOL-INPUT-NUMBER": css_248z$k,
6194
+ "KOL-INPUT-PASSWORD": css_248z$j,
6195
+ "KOL-INPUT-RADIO": css_248z$i,
6196
+ "KOL-INPUT-RANGE": css_248z$h,
6197
+ "KOL-INPUT-TEXT": css_248z$g,
6198
+ "KOL-LINK": css_248z$e,
6199
+ "KOL-LINK-BUTTON": css_248z$f,
6200
+ "KOL-LINK-GROUP": css_248z$d,
6201
+ "KOL-MODAL": css_248z$c,
6202
+ "KOL-NAV": css_248z$b,
6203
+ "KOL-PAGINATION": css_248z$a,
6204
+ "KOL-PROGRESS": css_248z$9,
6205
+ "KOL-SELECT": css_248z$8,
6206
+ "KOL-SKIP-NAV": css_248z$7,
6207
+ "KOL-SPIN": css_248z$6,
6208
+ "KOL-TABLE": css_248z$5,
6209
+ "KOL-TABS": css_248z$4,
6210
+ "KOL-TEXTAREA": css_248z$3,
6211
+ "KOL-TOAST-CONTAINER": css_248z$2,
6212
+ "KOL-TOOLTIP": css_248z$1
8760
6213
  });
8761
6214
 
8762
6215
  const css$4 = (input) => input.join(``);
@@ -9038,7 +6491,7 @@ const BMF = KoliBri.createTheme("bmf", {
9038
6491
  content: '*';
9039
6492
  padding-left: 0.125em;
9040
6493
  }
9041
- kol-input.error {
6494
+ kol-input.error:not(.hidden-error) {
9042
6495
  border-left: 3px solid var(--color-red);
9043
6496
  padding-left: 1em;
9044
6497
  }
@@ -9117,7 +6570,7 @@ const BMF = KoliBri.createTheme("bmf", {
9117
6570
  content: '*';
9118
6571
  padding-left: 0.125em;
9119
6572
  }
9120
- kol-input.error {
6573
+ kol-input.error:not(.hidden-error) {
9121
6574
  border-left: 3px solid var(--color-red);
9122
6575
  padding-left: 1em;
9123
6576
  }
@@ -9196,7 +6649,7 @@ const BMF = KoliBri.createTheme("bmf", {
9196
6649
  content: '*';
9197
6650
  padding-left: 0.125em;
9198
6651
  }
9199
- kol-input.error {
6652
+ kol-input.error:not(.hidden-error) {
9200
6653
  border-left: 3px solid var(--color-red);
9201
6654
  padding-left: 1em;
9202
6655
  }
@@ -9275,7 +6728,7 @@ const BMF = KoliBri.createTheme("bmf", {
9275
6728
  content: '*';
9276
6729
  padding-left: 0.125em;
9277
6730
  }
9278
- kol-input.error {
6731
+ kol-input.error:not(.hidden-error) {
9279
6732
  border-left: 3px solid var(--color-red);
9280
6733
  padding-left: 1em;
9281
6734
  }
@@ -9355,7 +6808,7 @@ const BMF = KoliBri.createTheme("bmf", {
9355
6808
  content: '*';
9356
6809
  padding-left: 0.125em;
9357
6810
  }
9358
- kol-input.error {
6811
+ kol-input.error:not(.hidden-error) {
9359
6812
  border-left: 3px solid var(--color-red);
9360
6813
  padding-left: 1em;
9361
6814
  }
@@ -9441,7 +6894,7 @@ const BMF = KoliBri.createTheme("bmf", {
9441
6894
  content: '*';
9442
6895
  padding-left: 0.125em;
9443
6896
  }
9444
- kol-input.error {
6897
+ kol-input.error:not(.hidden-error) {
9445
6898
  border-left: 3px solid var(--color-red);
9446
6899
  padding-left: 1em;
9447
6900
  }
@@ -9533,7 +6986,7 @@ const BMF = KoliBri.createTheme("bmf", {
9533
6986
  content: '*';
9534
6987
  padding-left: 0.125em;
9535
6988
  }
9536
- kol-input.error {
6989
+ kol-input.error:not(.hidden-error) {
9537
6990
  border-left: 3px solid var(--color-red);
9538
6991
  padding-left: 1em;
9539
6992
  }
@@ -9844,31 +7297,31 @@ const BMF = KoliBri.createTheme("bmf", {
9844
7297
  }
9845
7298
  `,
9846
7299
  "KOL-HEADING": css$4`
9847
- h1,
9848
- h2,
9849
- h3,
9850
- h4,
9851
- h5,
9852
- h6 {
7300
+ .headline-h1,
7301
+ .headline-h2,
7302
+ .headline-h3,
7303
+ .headline-h4,
7304
+ .headline-h5,
7305
+ .headline-h6 {
9853
7306
  color: inherit;
9854
7307
  font-style: normal;
9855
7308
  margin: 0;
9856
7309
  padding: 0;
9857
7310
  }
9858
- h1,
9859
- h2,
9860
- h3 {
7311
+ .headline-h1,
7312
+ .headline-h2,
7313
+ .headline-h3 {
9861
7314
  font-weight: 700;
9862
7315
  }
9863
- h1 {
7316
+ .headline-h1 {
9864
7317
  font-size: 1.5rem;
9865
7318
  line-height: 1.75rem;
9866
7319
  }
9867
- h2 {
7320
+ .headline-h2 {
9868
7321
  font-size: 1.25rem;
9869
7322
  line-height: 1.75rem;
9870
7323
  }
9871
- h3 {
7324
+ .headline-h3 {
9872
7325
  font-size: 1.125rem;
9873
7326
  line-height: 1.5rem;
9874
7327
  }
@@ -10100,7 +7553,7 @@ const BMF = KoliBri.createTheme("bmf", {
10100
7553
  content: '*';
10101
7554
  padding-left: 0.125em;
10102
7555
  }
10103
- kol-input.error {
7556
+ kol-input.error:not(.hidden-error) {
10104
7557
  border-left: 3px solid var(--color-red);
10105
7558
  padding-left: 1em;
10106
7559
  }
@@ -10207,7 +7660,7 @@ const BMF = KoliBri.createTheme("bmf", {
10207
7660
  content: '*';
10208
7661
  padding-left: 0.125em;
10209
7662
  }
10210
- kol-input.error {
7663
+ kol-input.error:not(.hidden-error) {
10211
7664
  border-left: 3px solid var(--color-red);
10212
7665
  padding-left: 1em;
10213
7666
  }
@@ -10550,7 +8003,7 @@ const BMF = KoliBri.createTheme("bmf", {
10550
8003
  padding-top: 0.25em;
10551
8004
  grid-column: span 2 / auto;
10552
8005
  }
10553
- :host kol-input.error {
8006
+ :host kol-input.error:not(.hidden-error) {
10554
8007
  border-left: 3px solid var(--color-red);
10555
8008
  padding-left: 1em;
10556
8009
  }
@@ -11161,7 +8614,7 @@ const BMF = KoliBri.createTheme("bmf", {
11161
8614
  content: '*';
11162
8615
  padding-left: 0.125em;
11163
8616
  }
11164
- kol-input.error {
8617
+ kol-input.error:not(.hidden-error) {
11165
8618
  border-left: 3px solid var(--color-red);
11166
8619
  padding-left: 1em;
11167
8620
  }
@@ -19375,29 +16828,29 @@ const DEFAULT = KoliBri.createTheme("default", {
19375
16828
  }
19376
16829
  `,
19377
16830
  "KOL-HEADING": css$3`
19378
- h1,
19379
- h2,
19380
- h3,
19381
- h4,
19382
- h5,
19383
- h6 {
16831
+ .headline-h1,
16832
+ .headline-h2,
16833
+ .headline-h3,
16834
+ .headline-h4,
16835
+ .headline-h5,
16836
+ .headline-h6 {
19384
16837
  color: inherit;
19385
16838
  font-style: normal;
19386
16839
  }
19387
- h1,
19388
- h2,
19389
- h3 {
16840
+ .headline-h1,
16841
+ .headline-h2,
16842
+ .headline-h3 {
19390
16843
  font-weight: 700;
19391
16844
  }
19392
- h1 {
16845
+ .headline-h1 {
19393
16846
  font-size: 1.5rem;
19394
16847
  line-height: 1.75rem;
19395
16848
  }
19396
- h2 {
16849
+ .headline-h2 {
19397
16850
  font-size: 1.25rem;
19398
16851
  line-height: 1.75rem;
19399
16852
  }
19400
- h3 {
16853
+ .headline-h3 {
19401
16854
  font-size: 1.125rem;
19402
16855
  line-height: 1.5rem;
19403
16856
  }
@@ -20868,27 +18321,27 @@ const ECL_EC = KoliBri.createTheme("ecl-ec", {
20868
18321
  }
20869
18322
  `,
20870
18323
  "KOL-HEADING": css$2`
20871
- h1 {
18324
+ .headline-h1 {
20872
18325
  font-size: 2rem;
20873
18326
  line-height: 2.5rem;
20874
18327
  }
20875
- h2 {
18328
+ .headline-h2 {
20876
18329
  font-size: 1.75rem;
20877
18330
  line-height: 2rem;
20878
18331
  }
20879
- h3 {
18332
+ .headline-h3 {
20880
18333
  font-size: 1.5rem;
20881
18334
  line-height: 1.75rem;
20882
18335
  }
20883
- h4 {
18336
+ .headline-h4 {
20884
18337
  font-size: 1.25rem;
20885
18338
  line-height: 1.75rem;
20886
18339
  }
20887
- h5 {
18340
+ .headline-h5 {
20888
18341
  font-size: 1rem;
20889
18342
  line-height: 1.5rem;
20890
18343
  }
20891
- h6 {
18344
+ .headline-h6 {
20892
18345
  color: rgb(234, 0, 255);
20893
18346
  }
20894
18347
  `,
@@ -22452,35 +19905,35 @@ const ECL_EU = KoliBri.createTheme("ecl-eu", {
22452
19905
  }
22453
19906
  `,
22454
19907
  "KOL-HEADING": css$2`
22455
- h1,
22456
- h2,
22457
- h3,
22458
- h4,
22459
- h5,
22460
- h6 {
19908
+ .headline-h1,
19909
+ .headline-h2,
19910
+ .headline-h3,
19911
+ .headline-h4,
19912
+ .headline-h5,
19913
+ .headline-h6 {
22461
19914
  font-weight: var(--font-weight-bold);
22462
19915
  }
22463
- h1 {
19916
+ .headline-h1 {
22464
19917
  font-size: 2.625rem;
22465
19918
  line-height: 3.25rem;
22466
19919
  }
22467
- h2 {
19920
+ .headline-h2 {
22468
19921
  font-size: 2.25rem;
22469
19922
  line-height: 2.75rem;
22470
19923
  }
22471
- h3 {
19924
+ .headline-h3 {
22472
19925
  font-size: 2rem;
22473
19926
  line-height: 2.5rem;
22474
19927
  }
22475
- h4 {
19928
+ .headline-h4 {
22476
19929
  font-size: 1.75rem;
22477
19930
  line-height: 2rem;
22478
19931
  }
22479
- h5 {
19932
+ .headline-h5 {
22480
19933
  font-size: 1.5rem;
22481
19934
  line-height: 1.75rem;
22482
19935
  }
22483
- h6 {
19936
+ .headline-h6 {
22484
19937
  font-size: 1.25rem;
22485
19938
  line-height: 1.75rem;
22486
19939
  }
@@ -24683,42 +22136,42 @@ const ITZBund = KoliBri.createTheme("itzbund", {
24683
22136
  }
24684
22137
  `,
24685
22138
  "KOL-HEADING": css$1`
24686
- h1,
24687
- h2,
24688
- h3,
24689
- h4,
24690
- h5,
24691
- h6 {
22139
+ .headline-h1,
22140
+ .headline-h2,
22141
+ .headline-h3,
22142
+ .headline-h4,
22143
+ .headline-h5,
22144
+ .headline-h6 {
24692
22145
  line-height: 1em;
24693
22146
  margin: 0;
24694
22147
  padding: 0;
24695
22148
  }
24696
- h1 {
22149
+ .headline-h1 {
24697
22150
  font-family: var(--font-family-serif);
24698
22151
  font-size: 54px;
24699
22152
  font-weight: bold;
24700
22153
  }
24701
- h2 {
22154
+ .headline-h2 {
24702
22155
  font-family: var(--font-family-serif);
24703
22156
  font-size: 32px;
24704
22157
  font-weight: bold;
24705
22158
  }
24706
- h3 {
22159
+ .headline-h3 {
24707
22160
  font-family: var(--font-family-serif);
24708
22161
  font-size: 26px;
24709
22162
  font-weight: bold;
24710
22163
  }
24711
- h4 {
22164
+ .headline-h4 {
24712
22165
  font-family: var(--font-family-serif);
24713
22166
  font-size: 20px;
24714
22167
  font-weight: normal;
24715
22168
  }
24716
- h5 {
22169
+ .headline-h5 {
24717
22170
  font-family: var(--font-family-serif);
24718
22171
  font-size: 17px;
24719
22172
  font-weight: bold;
24720
22173
  }
24721
- h6 {
22174
+ .headline-h6 {
24722
22175
  font-family: var(--font-family-sans);
24723
22176
  font-size: 17px;
24724
22177
  font-weight: normal;
@@ -35989,32 +33442,32 @@ const MAPZ = KoliBri.createTheme("mapz", {
35989
33442
  }
35990
33443
  `,
35991
33444
  "KOL-HEADING": css`
35992
- h1,
35993
- h2,
35994
- h3,
35995
- h4,
35996
- h5,
35997
- h6 {
33445
+ .headline-h1,
33446
+ .headline-h2,
33447
+ .headline-h3,
33448
+ .headline-h4,
33449
+ .headline-h5,
33450
+ .headline-h6 {
35998
33451
  line-height: 1.25em;
35999
33452
  margin: 0;
36000
33453
  padding: 0;
36001
33454
  }
36002
- h1 {
33455
+ .headline-h1 {
36003
33456
  font-size: 1.5rem !important;
36004
33457
  }
36005
- h2 {
33458
+ .headline-h2 {
36006
33459
  font-size: 1.4rem !important;
36007
33460
  }
36008
- h3 {
33461
+ .headline-h3 {
36009
33462
  font-size: 1.3rem !important;
36010
33463
  }
36011
- h4 {
33464
+ .headline-h4 {
36012
33465
  font-size: 1.2rem !important;
36013
33466
  }
36014
- h5 {
33467
+ .headline-h5 {
36015
33468
  font-size: 1.1rem !important;
36016
33469
  }
36017
- h6 {
33470
+ .headline-h6 {
36018
33471
  font-size: 1rem !important;
36019
33472
  }
36020
33473
  `,
@@ -50524,7 +47977,7 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
50524
47977
  --color-grau-80: hsl(0 0% 20%);
50525
47978
  --color-grau-70: hsl(0 0% 30%);
50526
47979
  --color-grau-60: hsl(0 0% 40%);
50527
- --color-grau-50: hsl(0 0% 50%);
47980
+ --color-grau-50: #8b8b8b;
50528
47981
  --color-grau-40: hsl(0 0% 60%);
50529
47982
  --color-grau-30: hsl(0 0% 70%);
50530
47983
  --color-grau-20: hsl(0 0% 80%);
@@ -50621,39 +48074,39 @@ const ZOLLv2 = KoliBri.createTheme("zoll-v2", {
50621
48074
  }
50622
48075
  `,
50623
48076
  "KOL-HEADING": css`
50624
- h1,
50625
- h2,
50626
- h3,
50627
- h4,
50628
- h5,
50629
- h6 {
48077
+ .headline-h1,
48078
+ .headline-h2,
48079
+ .headline-h3,
48080
+ .headline-h4,
48081
+ .headline-h5,
48082
+ .headline-h6 {
50630
48083
  font-weight: var(--font-weight-bold);
50631
48084
  margin: 0;
50632
48085
  padding: 1rem 0;
50633
48086
  text-align: left;
50634
48087
  }
50635
- h1 {
48088
+ .headline-h1 {
50636
48089
  font-size: 2.5rem;
50637
48090
  line-height: 1.2;
50638
48091
  padding: 0 0 1rem 0;
50639
48092
  }
50640
- h2 {
48093
+ .headline-h2 {
50641
48094
  font-size: 2rem;
50642
48095
  line-height: 1.25;
50643
48096
  }
50644
- h3 {
48097
+ .headline-h3 {
50645
48098
  font-size: 1.75rem;
50646
48099
  line-height: 1.29;
50647
48100
  }
50648
- h4 {
48101
+ .headline-h4 {
50649
48102
  font-size: 1.5rem;
50650
48103
  line-height: 1.33;
50651
48104
  }
50652
- h5 {
48105
+ .headline-h5 {
50653
48106
  font-size: 1.25rem;
50654
48107
  line-height: 1.4;
50655
48108
  }
50656
- h6 {
48109
+ .headline-h6 {
50657
48110
  font-size: 1rem;
50658
48111
  line-height: 1.5;
50659
48112
  }
@@ -59859,39 +57312,39 @@ const ZOLLv3 = KoliBri.createTheme("zoll-v3", {
59859
57312
  }
59860
57313
  `,
59861
57314
  "KOL-HEADING": css`
59862
- h1,
59863
- h2,
59864
- h3,
59865
- h4,
59866
- h5,
59867
- h6 {
57315
+ .headline-h1,
57316
+ .headline-h2,
57317
+ .headline-h3,
57318
+ .headline-h4,
57319
+ .headline-h5,
57320
+ .headline-h6 {
59868
57321
  font-weight: var(--font-weight-bold);
59869
57322
  margin: 0;
59870
57323
  padding: 1rem 0;
59871
57324
  text-align: left;
59872
57325
  }
59873
- h1 {
57326
+ .headline-h1 {
59874
57327
  font-size: 2.5rem;
59875
57328
  line-height: 1.2;
59876
57329
  padding: 0 0 1rem 0;
59877
57330
  }
59878
- h2 {
57331
+ .headline-h2 {
59879
57332
  font-size: 2rem;
59880
57333
  line-height: 1.25;
59881
57334
  }
59882
- h3 {
57335
+ .headline-h3 {
59883
57336
  font-size: 1.75rem;
59884
57337
  line-height: 1.29;
59885
57338
  }
59886
- h4 {
57339
+ .headline-h4 {
59887
57340
  font-size: 1.5rem;
59888
57341
  line-height: 1.33;
59889
57342
  }
59890
- h5 {
57343
+ .headline-h5 {
59891
57344
  font-size: 1.25rem;
59892
57345
  line-height: 1.4;
59893
57346
  }
59894
- h6 {
57347
+ .headline-h6 {
59895
57348
  font-size: 1rem;
59896
57349
  line-height: 1.5;
59897
57350
  }
@@ -67619,6 +65072,7 @@ const EN = KoliBri.createTranslation("en", {});
67619
65072
  exports.BAMF = BAMF;
67620
65073
  exports.BMF = BMF;
67621
65074
  exports.BZSt = BZSt;
65075
+ exports.BZStv2 = BZStv2;
67622
65076
  exports.DE = DE;
67623
65077
  exports.DEFAULT = DEFAULT;
67624
65078
  exports.DESYv1 = DESYv1;