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