/* YetiSearch Simple Modal CSS
   Lightweight typeahead with grouped results
   Uses shared theme variables from yetisearch-pro-theme.css
*/

/* Modal container */
.ys-simple-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.ys-simple-modal[aria-hidden="true"] {
  display: none;
}

/* Backdrop */
.ys-simple-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ys-overlay-bg);
  backdrop-filter: var(--ys-overlay-blur);
  -webkit-backdrop-filter: var(--ys-overlay-blur);
}

/* Dialog */
.ys-simple-dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 16px;
  background: var(--ys-panel-bg);
  border: 1px solid var(--ys-border);
  border-radius: 12px;
  box-shadow: var(--ys-dialog-shadow);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
}

/* Input wrapper */
.ys-simple-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ys-border);
  flex-shrink: 0;
}

.ys-simple-search-icon {
  width: 20px;
  height: 20px;
  color: var(--ys-text-muted);
  flex-shrink: 0;
}

.ys-simple-input-wrapper input {
  flex: 1;
  background: var(--ys-input-bg);
  border: 1px solid var(--ys-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ys-input-text);
  outline: none;
}
.ys-simple-input-wrapper input:focus {
  border-color: var(--ys-accent, var(--ys-border));
}

.ys-simple-input-wrapper input::placeholder {
  color: var(--ys-input-placeholder);
}

.ys-simple-shortcut {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ys-simple-shortcut kbd,
.ys-simple-command kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--ys-kbd-bg);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--ys-kbd-text);
}

/* Results area */
.ys-simple-results {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--ys-scrollbar-thumb) var(--ys-scrollbar-track);
}

.ys-simple-results::-webkit-scrollbar {
  width: 8px;
}

.ys-simple-results::-webkit-scrollbar-track {
  background: var(--ys-scrollbar-track);
}

.ys-simple-results::-webkit-scrollbar-thumb {
  background: var(--ys-scrollbar-thumb);
  border-radius: 4px;
}

.ys-simple-results::-webkit-scrollbar-thumb:hover {
  background: var(--ys-scrollbar-thumb-hover);
}

/* Results header */
.ys-simple-results-header {
  padding: 8px 16px;
  font-size: 0.875rem;
  color: var(--ys-text-secondary);
  border-bottom: 1px solid var(--ys-border);
  background: var(--ys-panel-bg);
  position: sticky;
  top: 0;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.1s ease;
}

/* Loading state */
.ys-simple-loading {
  padding: 48px 16px;
  text-align: center;
  color: var(--ys-text-secondary);
}

.ys-simple-spinner {
  width: 24px;
  height: 24px;
  margin: 0 auto 12px;
  animation: ys-simple-spin 1s linear infinite;
  color: var(--ys-accent);
}

.ys-simple-spinner-track {
  opacity: 0.25;
}

.ys-simple-spinner-head {
  opacity: 0.75;
}

@keyframes ys-simple-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Empty state */
.ys-simple-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--ys-text-secondary);
  opacity: 1;
  transition: opacity 0.1s ease;
}

.ys-simple-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--ys-text-muted);
}

.ys-simple-empty-hint {
  font-size: 0.875rem;
  margin-top: 4px;
}

.ys-suggestion-link {
  color: var(--ys-accent);
  text-decoration: underline;
  cursor: pointer;
}

.ys-suggestion-link:hover {
  color: var(--ys-accent-hover);
}

/* Type more */
.ys-simple-type-more {
  padding: 48px 16px;
  text-align: center;
  color: var(--ys-text-secondary);
  opacity: 1;
  transition: opacity 0.1s ease;
}

/* Results list */
.ys-simple-results-list {
  padding: 8px 0;
  opacity: 1;
  transition: opacity 0.1s ease;
}

/* Group */
.ys-simple-group {
  margin-bottom: 8px;
}

.ys-simple-group:last-child {
  margin-bottom: 0;
}

.ys-simple-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ys-text-secondary);
  background: var(--ys-panel-bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

.ys-simple-group-icon {
  width: 16px;
  height: 16px;
}

/* Result item */
.ys-simple-result {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ys-simple-result:hover {
  background: var(--ys-result-hover);
}

.ys-simple-result.selected {
  background: var(--ys-result-selected-bg);
  box-shadow: inset 0 0 0 1px var(--ys-result-selected-ring);
}

.ys-simple-result-icon {
  width: 20px;
  height: 20px;
  color: var(--ys-text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.ys-simple-result-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ys-simple-result-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ys-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ys-simple-result-title mark {
  background: var(--ys-highlight-bg);
  color: var(--ys-highlight-text);
  border-radius: 2px;
  padding: 0 2px;
}

.ys-simple-result-breadcrumb {
  font-size: 0.75rem;
  color: var(--ys-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ys-simple-result-snippet {
  font-size: 0.75rem;
  color: var(--ys-text-muted);
  margin-top: 2px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ys-simple-result-snippet mark {
  background: var(--ys-highlight-bg);
  color: var(--ys-highlight-text);
  border-radius: 2px;
  padding: 0 2px;
}

.ys-simple-result-arrow {
  width: 16px;
  height: 16px;
  color: var(--ys-text-muted);
  flex-shrink: 0;
  align-self: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ys-simple-result:hover .ys-simple-result-arrow,
.ys-simple-result.selected .ys-simple-result-arrow {
  opacity: 1;
}

/* Footer */
.ys-simple-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--ys-border);
  font-size: 0.75rem;
  color: var(--ys-text-secondary);
  flex-shrink: 0;
}

.ys-simple-commands {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ys-simple-command {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ys-simple-command kbd + kbd {
  margin-left: 2px;
}

.ys-simple-powered-by a {
  color: var(--ys-accent);
  text-decoration: none;
}

.ys-simple-powered-by a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px) {
  .ys-simple-modal {
    padding-top: 5vh;
  }

  .ys-simple-dialog {
    margin: 0 8px;
    max-height: 90vh;
  }

  .ys-simple-footer {
    flex-direction: column;
    gap: 8px;
  }

  .ys-simple-commands {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
}
/* YetiSearch Pro Theme Variables
   Shared color palette using Tailwind zinc scale
   Override these variables in your custom CSS for theming
*/

:root {
  /* ═══════════════════════════════════════════════════════════════
     LIGHT MODE (default)
     Using Tailwind zinc scale for neutral grays
     ═══════════════════════════════════════════════════════════════ */

  /* Core palette - Tailwind zinc */
  --ys-zinc-50: #fafafa;
  --ys-zinc-100: #f4f4f5;
  --ys-zinc-200: #e4e4e7;
  --ys-zinc-300: #d4d4d8;
  --ys-zinc-400: #a1a1aa;
  --ys-zinc-500: #71717a;
  --ys-zinc-600: #52525b;
  --ys-zinc-700: #3f3f46;
  --ys-zinc-800: #27272a;
  --ys-zinc-900: #18181b;
  --ys-zinc-950: #09090b;

  /* Accent color */
  --ys-accent: #3b82f6;
  --ys-accent-hover: #2563eb;
  --ys-accent-subtle: rgba(59, 130, 246, 0.1);
  --ys-accent-ring: rgba(59, 130, 246, 0.25);

  /* Semantic colors - Light mode */
  --ys-overlay-bg: rgba(0, 0, 0, 0.5);
  --ys-overlay-blur: blur(4px);

  --ys-dialog-bg: var(--ys-zinc-50);
  --ys-dialog-border: var(--ys-zinc-200);
  --ys-dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  --ys-panel-bg: #ffffff;
  --ys-panel-alt: var(--ys-zinc-100);

  --ys-text: var(--ys-zinc-900);
  --ys-text-secondary: var(--ys-zinc-600);
  --ys-text-muted: var(--ys-zinc-400);

  --ys-border: var(--ys-zinc-200);
  --ys-border-subtle: var(--ys-zinc-100);

  --ys-input-bg: transparent;
  --ys-input-text: var(--ys-zinc-900);
  --ys-input-placeholder: var(--ys-zinc-400);

  --ys-result-hover: var(--ys-zinc-100);
  --ys-result-selected-bg: var(--ys-accent-subtle);
  --ys-result-selected-ring: var(--ys-accent-ring);

  --ys-highlight-bg: #fef08a;
  --ys-highlight-text: inherit;

  --ys-kbd-bg: var(--ys-zinc-100);
  --ys-kbd-text: var(--ys-zinc-600);

  --ys-scrollbar-track: transparent;
  --ys-scrollbar-thumb: rgba(161, 161, 170, 0.3);
  --ys-scrollbar-thumb-hover: rgba(161, 161, 170, 0.5);

  /* Segment/toggle controls */
  --ys-segment-bg: transparent;
  --ys-segment-active-bg: var(--ys-zinc-800);
  --ys-segment-active-text: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   Triggered by data-theme="dark", class="dark", or data-ys-theme="dark"
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"],
.dark,
[data-ys-theme="dark"] {
  --ys-overlay-bg: rgba(0, 0, 0, 0.7);

  --ys-dialog-bg: var(--ys-zinc-900);
  --ys-dialog-border: var(--ys-zinc-700);

  --ys-panel-bg: var(--ys-zinc-900);
  --ys-panel-alt: var(--ys-zinc-800);

  --ys-text: var(--ys-zinc-100);
  --ys-text-secondary: var(--ys-zinc-400);
  --ys-text-muted: var(--ys-zinc-500);

  --ys-border: var(--ys-zinc-700);
  --ys-border-subtle: var(--ys-zinc-800);

  --ys-input-text: var(--ys-zinc-100);
  --ys-input-placeholder: var(--ys-zinc-500);

  --ys-result-hover: rgba(63, 63, 70, 0.5);
  --ys-result-selected-bg: rgba(59, 130, 246, 0.15);

  --ys-highlight-bg: rgba(234, 179, 8, 0.35);
  --ys-highlight-text: var(--ys-zinc-100);

  --ys-kbd-bg: var(--ys-zinc-800);
  --ys-kbd-text: var(--ys-zinc-400);

  --ys-scrollbar-thumb: rgba(82, 82, 91, 0.5);
  --ys-scrollbar-thumb-hover: rgba(82, 82, 91, 0.7);

  --ys-segment-active-bg: rgba(255, 255, 255, 0.12);
}
.md-alert {
  padding: 8px 16px;
  border-left: 3.5px solid #333333;
  margin-bottom: 16px;
}

.md-alert-body > *:last-child {
  margin-bottom: 0;
}

.md-alert-title {
  display: flex;
  font-weight: bold;
  align-items: center;
  margin-bottom: 8px;
  margin-top: 0;

  & > svg {
    margin-right: 8px;
  }
}

.md-alert--note {
  border-color: var(--gh-alert-note-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-note-title-color);
    fill: var(--gh-alert-note-title-color);
  }
}

.md-alert--tip {
  border-color: var(--gh-alert-tip-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-tip-title-color);
    fill: var(--gh-alert-tip-title-color);
  }
}

.md-alert--important {
  border-color: var(--gh-alert-important-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-important-title-color);
    fill: var(--gh-alert-important-title-color);
  }
}

.md-alert--warning {
  border-color: var(--gh-alert-warning-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-warning-title-color);
    fill: var(--gh-alert-warning-title-color);
  }
}

.md-alert--caution {
  border-color: var(--gh-alert-caution-border-color);

  & > .md-alert-title {
    color: var(--gh-alert-caution-title-color);
    fill: var(--gh-alert-caution-title-color);
  }
}
#grav-login {
    max-width: 30rem;
    margin: 5rem auto;
    background: #fcfcfc;
    border: 4px solid #eee;
    border-radius: 4px;
    padding: 1rem 3rem 3rem 3rem;
    text-align: center;
}

#grav-login .form-actions {
    text-align: right;
}

#grav-logout {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.alert.info {
    color: #27ae60;
}

.alert.error {
    color: #e74c3c;
}

#grav-login p {
    font-size: small;
    margin: 1rem 0;
    padding: 0;
    text-align: center;
}
#grav-login .form-actions p {
    margin-bottom: 0;
}

#grav-login .button {
    vertical-align: middle;
}

#grav-login .delimiter {
    display: block;
    font-size: 1.6rem;
    letter-spacing: 1px;
    line-height: 1.6rem;
    position: relative;
    text-transform: uppercase;
    margin: 1rem 0;
}

#grav-login .delimiter::after,
#grav-login .delimiter::before {
    background-color: #777777;
    content: "";
    height: 1px;
    position: absolute;
    top: 0.8rem;
    width: 40%;
}
#grav-login .delimiter::before {
    background-image: linear-gradient(to right, #777777, #ffffff);
    left: 0;
}
#grav-login .delimiter::after {
    background-image: linear-gradient(to left, #777777, #ffffff);
    right: 0;
}

#grav-login .rememberme {
    display: inline-block;
    float: left;
    padding: 7px 0;
    vertical-align: middle;
}

#grav-login .rememberme label {
    font-weight: inherit;
    display: inline;
}

.login-status {
    white-space: nowrap;
    vertical-align: middle;
}
.form-group.has-errors{background:rgba(255,0,0,.05);border:1px solid rgba(255,0,0,.2);border-radius:3px;margin:0 -5px;padding:0 5px}.form-errors{color:#b52b27}.form-honeybear{display:none;position:absolute !important;height:1px;width:1px;overflow:hidden;clip-path:rect(0px, 1px, 1px, 0px)}.form-errors p{margin:0}.form-input-file input{display:none}.form-input-file .dz-default.dz-message{position:absolute;text-align:center;left:0;right:0;top:50%;transform:translateY(-50%);margin:0}.form-input-file.dropzone{position:relative;min-height:70px;border-radius:3px;margin-bottom:.85rem;border:2px dashed #ccc;color:#aaa;padding:.5rem}.form-input-file.dropzone .dz-preview{margin:.5rem}.form-input-file.dropzone .dz-preview:hover{z-index:2}.form-input-file.dropzone .dz-preview .dz-image img{margin:0}.form-input-file.dropzone .dz-preview .dz-remove{font-size:16px;position:absolute;top:3px;right:3px;display:inline-flex;height:20px;width:20px;background-color:red;justify-content:center;align-items:center;color:#fff;font-weight:bold;border-radius:50%;cursor:pointer;z-index:20}.form-input-file.dropzone .dz-preview .dz-remove:hover{background-color:darkred;text-decoration:none}.form-input-file.dropzone .dz-preview .dz-error-message{min-width:140px;width:auto}.form-input-file.dropzone .dz-preview .dz-image,.form-input-file.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:3px;z-index:1}.filepond--root.form-input{min-height:7rem;height:auto;overflow:hidden;border:0}.form-tabs .tabs-nav{display:flex;padding-top:1px;margin-bottom:-1px}.form-tabs .tabs-nav a{flex:1;transition:color .5s ease,background .5s ease;cursor:pointer;text-align:center;padding:10px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #ccc;border-radius:5px 5px 0 0}.form-tabs .tabs-nav a.active{border:1px solid #ccc;border-bottom:1px solid rgba(0,0,0,0);margin:0 -1px}.form-tabs .tabs-nav a.active span{color:inherit}.form-tabs .tabs-nav span{display:inline-block;line-height:1.1}.form-tabs.subtle .tabs-nav{margin-right:0 !important}.form-tabs .tabs-content .tab__content{display:none;padding-top:2rem}.form-tabs .tabs-content .tab__content.active{display:block}.checkboxes{display:inline-block}.checkboxes label{display:inline;cursor:pointer;position:relative;padding:0 0 0 20px;margin-right:15px}.checkboxes label:before{content:"";display:inline-block;width:20px;height:20px;left:0;margin-top:0;margin-right:10px;position:absolute;border-radius:3px;border:1px solid #e6e6e6}.checkboxes input[type=checkbox]{display:none}.checkboxes input[type=checkbox]:checked+label:before{content:"✓";font-size:20px;line-height:1;text-align:center}.checkboxes.toggleable label{margin-right:0}.form-field-toggleable .checkboxes.toggleable{margin-right:5px;vertical-align:middle}.form-field-toggleable .checkboxes+label{display:inline-block}.switch-toggle{display:inline-flex;overflow:hidden;border-radius:3px;line-height:35px;border:1px solid #ccc}.switch-toggle input[type=radio]{position:absolute;visibility:hidden;display:none}.switch-toggle label{display:inline-block;cursor:pointer;padding:0 15px;margin:0;white-space:nowrap;color:inherit;transition:background-color .5s ease}.switch-toggle input.highlight:checked+label{background:#333;color:#fff}.switch-toggle input:checked+label{color:#fff;background:#999}.signature-pad{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:10px;width:100%;height:100%;max-width:700px;max-height:460px;border:1px solid #f0f0f0;background-color:#fff;padding:16px}.signature-pad--body{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;border:1px solid #f6f6f6;min-height:100px}.signature-pad--body canvas{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:4px;box-shadow:0 0 5px rgba(0,0,0,.02) inset}.signature-pad--footer{color:#c3c3c3;text-align:center;font-size:1.2em}.signature-pad--actions{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px}[data-grav-field=array] .form-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}[data-grav-field=array] .form-row>input,[data-grav-field=array] .form-row>textarea{margin:0;display:inline-block}[data-grav-field=array] .form-row>span[data-grav-array-action]{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:1.9rem;min-height:1.9rem;padding:.25rem;border-radius:3px;cursor:pointer;color:inherit;opacity:.45;transition:opacity .2s ease}[data-grav-field=array] .form-row>span[data-grav-array-action]:hover{opacity:1}[data-grav-field=array] .form-row>span[data-grav-array-action=sort]{cursor:grab}[data-grav-field=array] .form-row>span[data-grav-array-action=sort]:active{cursor:grabbing}.form-data.basic-captcha .form-input-wrapper{border:1px solid #ccc;border-radius:5px;display:flex;overflow:hidden}.form-data.basic-captcha .form-input-prepend{display:flex;color:#333;background-color:#ccc;flex-shrink:0}.form-data.basic-captcha .form-input-prepend img{margin:0}.form-data.basic-captcha .form-input-prepend button>svg{margin:0 8px;width:18px;height:18px}.form-data.basic-captcha input.form-input{border:0}
:root{
  /* Vorgabe */
  --bg:#0F1112;
  --primary:#208cbc;
  /* Abgeleitete Palette (aus #208cbc) */
  --primary-bright:#3BB3E6;
  --cyan:#4FD6E8;
  --teal:#2AA79B;
  --violet:#5E6AD2;
  --deep:#0B5C80;
  /* Flächen */
  --bg-soft:#131617;
  --surface:#171B1D;
  --surface-2:#1D2225;
  --line:#262C30;
  --line-soft:rgba(255,255,255,.07);
  /* Typo */
  --text:#F2F6F8;
  --muted:#9AA7B0;
  --muted-2:#68757F;
  --display:'DM Sans',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Referenz-Verlauf (Button-Vorlage): Blau -> Cyan -> Eis -> Weiss, nach oben rechts */
  --g1:#1D82B2; --g2:#3FB2DC; --g3:#A9E6F8; --g4:#FFFFFF;
  --grad:linear-gradient(75deg,var(--g1) 0%,var(--g2) 48%,var(--g3) 78%,var(--g4) 100%);
  --logo-img:url("data:image/svg+xml,%3Csvg viewBox=%22-12 -3 803 156%22 fill=%22%23FFFFFF%22 role=%22img%22 aria-label=%22centron%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M88.6434 117.455C91.7697 117.455 93.7738 131.84 93.9295 139.273C94.0367 144.389 75.8157 149.719 54.2906 149.719C27.9712 149.719 26.0122 146.157 16.0479 140.002C3.7378 128.903 0 115.122 0 91.2699C0 65.0207 4.89965 54.1374 15.917 43.8388C22.166 37.9974 33.3493 33.3453 46.5816 32.5467C69.352 31.9709 93.2749 36.2033 93.2749 43.6566C92.2808 53.2815 91.19 64.895 87.8117 65.0333C63.0494 62.8493 51.6755 62.5839 46.773 65.0631C39.2712 68.8568 35.8536 77.2173 35.8536 90.9062C35.8536 107.448 38.9522 114.386 46.1116 117.765C51.3628 119.827 69.908 118.761 88.6434 117.455Z%22/%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M142.485 99.6254L202.831 99.6254C209.959 97.6242 210.926 91.8397 210.926 87.7178C210.926 47.9802 193.984 32.7319 158.435 32.7319C131.489 32.7319 111.495 44.9445 107.525 78.7868L107.525 99.6254C107.525 139.31 135.173 155.945 180.85 148.115C192.139 146.18 198.377 144.97 202.718 141.837C204.307 140.691 204.496 138.915 203.961 134.878L201.701 121.786C200.807 118.43 199.432 118.269 195.941 118.43C194.668 118.489 192.483 118.726 189.727 119.025C182.758 119.78 172.138 120.931 163.391 120.599C150.811 120.122 144.368 115.002 142.485 99.6254ZM143.232 78.8681L175.307 78.8681C174.612 66.2889 169.852 59.5705 159.59 59.5701C148.248 59.8135 143.883 66.056 143.232 78.8681Z%22/%3E%3Cpath d=%22M232.813 34.9721L230.438 37.5566V144.492V144.958V145.424C230.438 146.198 231.805 147.838 233.562 147.838H262.498C263.411 147.838 265.075 145.875 265.075 145.261V72.0556C286.089 63.6971 296.683 61.5343 301.433 76.0111V145.261C301.433 145.957 302.141 147.838 304.01 147.838H333.173C334.635 147.838 335.597 146.71 335.597 145.414V64.8578C335.597 59.6282 334 52.2188 330.239 45.7423C319.664 27.5334 286.68 30.0306 264.842 45.7423V38.3539C264.842 36.4339 262.978 34.9721 260.496 34.9721H232.813Z%22/%3E%3Cpath d=%22M675.481 34.9721L673.105 37.5566V144.492V144.958V145.424C673.105 146.198 674.473 147.838 676.23 147.838H705.166C706.079 147.838 707.743 145.875 707.743 145.261V72.0556C728.757 63.6971 739.351 61.5343 744.101 76.0111V145.261C744.101 145.957 744.809 147.838 746.678 147.838H775.841C777.303 147.838 778.265 146.71 778.265 145.414V64.8578C778.265 59.6282 776.668 52.2188 772.907 45.7423C762.332 27.5334 729.348 30.0306 707.51 45.7423V38.3539C707.51 36.4339 705.646 34.9721 703.164 34.9721H675.481Z%22/%3E%3Cpath d=%22M367.379 10.8092V34.8449H355.145C354.098 34.8449 352.328 36.0137 352.328 37.6621V58.9534C352.328 60.3614 353.364 61.7658 355.141 61.7658H367.175L367.751 123.009C367.751 136.353 377.955 149.278 397.248 149.278H408.347C420.406 149.278 438.279 145.206 438.279 141.15C438.279 134.186 437.556 127.142 435.844 118.164C435.579 116.901 434.757 116.716 433.367 116.716H408.347C405.558 116.716 401.495 113.144 401.495 109.412L401.051 61.7658H426.59C428.477 61.7658 429.164 60.9127 429.164 59.1918V38.4306C429.164 35.7156 428.316 34.8449 425.578 34.8449H401.051C401.092 21.5986 401.045 1.84586 401.045 1.3805C401.045 1.3805 399.302 -1.34669 393.484 0.865209L370.84 6.95465C368.855 7.68642 367.379 9.30058 367.379 10.8092Z%22/%3E%3Cpath d=%22M459.535 34.8638C457.051 34.8638 454.746 35.6981 454.746 37.0011L454.559 144.206C454.559 145.901 456.042 148.016 458.369 148.016H485.453C487.975 148.016 489.723 146.144 489.723 143.746V78.2026C502.967 73.402 515.099 70.6526 529.232 67.6448C532.235 66.545 533.966 65.6257 533.508 62.6077L530.52 36.6022C530.33 35.0894 529.461 33.4985 527.475 33.4985C516.252 33.4985 504.761 39.193 489.415 51.041V38.821C489.415 36.7301 488.473 34.8638 486.786 34.8638H459.535Z%22/%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M646.192 57.7492C638.998 40.4491 619.036 32.4125 599.059 32.6338L599.059 32.6337C579.085 32.4156 559.13 40.4525 551.937 57.7492C541.872 81.9542 545.14 108.894 551.272 124.071C557.168 142.044 578.166 150.047 599.059 149.761L599.059 149.761C619.955 150.05 640.96 142.048 646.857 124.071C652.989 108.894 656.257 81.9542 646.192 57.7492ZM599.059 119.922L599.059 119.921L599.129 119.921C612.313 119.921 616.531 112.189 616.792 92.3097L616.805 92.3097C616.805 91.9638 616.804 91.6214 616.802 91.2824C616.804 90.9434 616.805 90.601 616.805 90.2552L616.792 90.2552C616.531 70.376 612.313 62.6443 599.129 62.6443L599.059 62.6444L599.059 62.6458L599.008 62.6457C585.824 62.6457 581.606 70.3775 581.344 90.2567L581.331 90.2567C581.331 90.6025 581.332 90.9449 581.334 91.2839C581.332 91.6229 581.331 91.9653 581.331 92.3111L581.344 92.3111C581.606 112.19 585.824 119.922 599.008 119.922L599.059 119.922Z%22/%3E%3C/svg%3E");
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 12px 30px rgba(0,0,0,.45);
  --shadow-lg:0 30px 70px rgba(0,0,0,.6);
  --maxw:1180px;
  /* Theme-abhaengige Rollen (Dark-Default) */
  --heading:#FFFFFF;
  --nav-bg:rgba(15,17,18,.7);
  --nav-bg-scrolled:rgba(15,17,18,.85);
  --hover-bg:rgba(255,255,255,.06);
  --chip-bg:rgba(255,255,255,.08);
  --chip-line:rgba(255,255,255,.15);
  --accent-text:var(--primary-bright);
  --accent-soft:var(--cyan);
  --btn-contrast-bg:#FFFFFF;
  --btn-contrast-fg:#0F1112;
  --btn-ghost-bg:rgba(255,255,255,.06);
  --btn-ghost-bg-h:rgba(255,255,255,.12);
  --footer-bg:#0A0C0D;
  --cta-shade:rgba(15,17,18,.35);
  --cta-fg:#FFFFFF;
  --cta-fg-soft:rgba(255,255,255,.85);
  --cta-fg-fine:rgba(255,255,255,.6);
  --h1-shadow:0 2px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}
/* ============ Light Mode: Flaechen & Text hell, Blautoene identisch ============ */
html[data-theme="light"]{
  --bg:#FFFFFF;
  --bg-soft:#F4F9FC;
  --surface:#FFFFFF;
  --surface-2:#F1F7FA;
  --line:#DEE8EE;
  --line-soft:rgba(13,42,58,.09);
  --text:#0E2433;
  --muted:#445866;
  --muted-2:#7587933;
  --muted-2:#75879377;
  --muted-2:#758793;
  --heading:#0E2433;
  --shadow-sm:0 1px 2px rgba(13,42,58,.08);
  --shadow-md:0 12px 30px rgba(13,42,58,.12);
  --shadow-lg:0 30px 70px rgba(13,42,58,.16);
  --nav-bg:rgba(255,255,255,.72);
  --nav-bg-scrolled:rgba(255,255,255,.88);
  --hover-bg:rgba(13,42,58,.05);
  --chip-bg:rgba(255,255,255,.65);
  --chip-line:rgba(13,42,58,.12);
  --accent-text:var(--g1);
  --accent-soft:var(--g2);
  --btn-contrast-bg:#0E2433;
  --btn-contrast-fg:#FFFFFF;
  --btn-ghost-bg:rgba(13,42,58,.05);
  --btn-ghost-bg-h:rgba(13,42,58,.1);
  --footer-bg:#F4F9FC;
  --cta-shade:rgba(255,255,255,.3);
  --cta-fg:#0E2433;
  --cta-fg-soft:rgba(14,36,51,.85);
  --cta-fg-fine:rgba(14,36,51,.6);
  --h1-shadow:none;
  --logo-img:url("data:image/svg+xml,%3Csvg viewBox=%22-12 -3 803 156%22 fill=%22%23000000%22 role=%22img%22 aria-label=%22centron%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M88.6434 117.455C91.7697 117.455 93.7738 131.84 93.9295 139.273C94.0367 144.389 75.8157 149.719 54.2906 149.719C27.9712 149.719 26.0122 146.157 16.0479 140.002C3.7378 128.903 0 115.122 0 91.2699C0 65.0207 4.89965 54.1374 15.917 43.8388C22.166 37.9974 33.3493 33.3453 46.5816 32.5467C69.352 31.9709 93.2749 36.2033 93.2749 43.6566C92.2808 53.2815 91.19 64.895 87.8117 65.0333C63.0494 62.8493 51.6755 62.5839 46.773 65.0631C39.2712 68.8568 35.8536 77.2173 35.8536 90.9062C35.8536 107.448 38.9522 114.386 46.1116 117.765C51.3628 119.827 69.908 118.761 88.6434 117.455Z%22/%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M142.485 99.6254L202.831 99.6254C209.959 97.6242 210.926 91.8397 210.926 87.7178C210.926 47.9802 193.984 32.7319 158.435 32.7319C131.489 32.7319 111.495 44.9445 107.525 78.7868L107.525 99.6254C107.525 139.31 135.173 155.945 180.85 148.115C192.139 146.18 198.377 144.97 202.718 141.837C204.307 140.691 204.496 138.915 203.961 134.878L201.701 121.786C200.807 118.43 199.432 118.269 195.941 118.43C194.668 118.489 192.483 118.726 189.727 119.025C182.758 119.78 172.138 120.931 163.391 120.599C150.811 120.122 144.368 115.002 142.485 99.6254ZM143.232 78.8681L175.307 78.8681C174.612 66.2889 169.852 59.5705 159.59 59.5701C148.248 59.8135 143.883 66.056 143.232 78.8681Z%22/%3E%3Cpath d=%22M232.813 34.9721L230.438 37.5566V144.492V144.958V145.424C230.438 146.198 231.805 147.838 233.562 147.838H262.498C263.411 147.838 265.075 145.875 265.075 145.261V72.0556C286.089 63.6971 296.683 61.5343 301.433 76.0111V145.261C301.433 145.957 302.141 147.838 304.01 147.838H333.173C334.635 147.838 335.597 146.71 335.597 145.414V64.8578C335.597 59.6282 334 52.2188 330.239 45.7423C319.664 27.5334 286.68 30.0306 264.842 45.7423V38.3539C264.842 36.4339 262.978 34.9721 260.496 34.9721H232.813Z%22/%3E%3Cpath d=%22M675.481 34.9721L673.105 37.5566V144.492V144.958V145.424C673.105 146.198 674.473 147.838 676.23 147.838H705.166C706.079 147.838 707.743 145.875 707.743 145.261V72.0556C728.757 63.6971 739.351 61.5343 744.101 76.0111V145.261C744.101 145.957 744.809 147.838 746.678 147.838H775.841C777.303 147.838 778.265 146.71 778.265 145.414V64.8578C778.265 59.6282 776.668 52.2188 772.907 45.7423C762.332 27.5334 729.348 30.0306 707.51 45.7423V38.3539C707.51 36.4339 705.646 34.9721 703.164 34.9721H675.481Z%22/%3E%3Cpath d=%22M367.379 10.8092V34.8449H355.145C354.098 34.8449 352.328 36.0137 352.328 37.6621V58.9534C352.328 60.3614 353.364 61.7658 355.141 61.7658H367.175L367.751 123.009C367.751 136.353 377.955 149.278 397.248 149.278H408.347C420.406 149.278 438.279 145.206 438.279 141.15C438.279 134.186 437.556 127.142 435.844 118.164C435.579 116.901 434.757 116.716 433.367 116.716H408.347C405.558 116.716 401.495 113.144 401.495 109.412L401.051 61.7658H426.59C428.477 61.7658 429.164 60.9127 429.164 59.1918V38.4306C429.164 35.7156 428.316 34.8449 425.578 34.8449H401.051C401.092 21.5986 401.045 1.84586 401.045 1.3805C401.045 1.3805 399.302 -1.34669 393.484 0.865209L370.84 6.95465C368.855 7.68642 367.379 9.30058 367.379 10.8092Z%22/%3E%3Cpath d=%22M459.535 34.8638C457.051 34.8638 454.746 35.6981 454.746 37.0011L454.559 144.206C454.559 145.901 456.042 148.016 458.369 148.016H485.453C487.975 148.016 489.723 146.144 489.723 143.746V78.2026C502.967 73.402 515.099 70.6526 529.232 67.6448C532.235 66.545 533.966 65.6257 533.508 62.6077L530.52 36.6022C530.33 35.0894 529.461 33.4985 527.475 33.4985C516.252 33.4985 504.761 39.193 489.415 51.041V38.821C489.415 36.7301 488.473 34.8638 486.786 34.8638H459.535Z%22/%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M646.192 57.7492C638.998 40.4491 619.036 32.4125 599.059 32.6338L599.059 32.6337C579.085 32.4156 559.13 40.4525 551.937 57.7492C541.872 81.9542 545.14 108.894 551.272 124.071C557.168 142.044 578.166 150.047 599.059 149.761L599.059 149.761C619.955 150.05 640.96 142.048 646.857 124.071C652.989 108.894 656.257 81.9542 646.192 57.7492ZM599.059 119.922L599.059 119.921L599.129 119.921C612.313 119.921 616.531 112.189 616.792 92.3097L616.805 92.3097C616.805 91.9638 616.804 91.6214 616.802 91.2824C616.804 90.9434 616.805 90.601 616.805 90.2552L616.792 90.2552C616.531 70.376 612.313 62.6443 599.129 62.6443L599.059 62.6444L599.059 62.6458L599.008 62.6457C585.824 62.6457 581.606 70.3775 581.344 90.2567L581.331 90.2567C581.331 90.6025 581.332 90.9449 581.334 91.2839C581.332 91.6229 581.331 91.9653 581.331 92.3111L581.344 92.3111C581.606 112.19 585.824 119.922 599.008 119.922L599.059 119.922Z%22/%3E%3C/svg%3E");
  color-scheme:light;
}
/* Gradient-Headline: im Light Mode ohne Weiss-Auslauf (gleiche Blautoene) */
html[data-theme="light"] .hero h1 .grad{background:linear-gradient(75deg,#0B5C80,var(--g1) 55%,var(--g2));-webkit-background-clip:text;background-clip:text}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--text);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.12;color:var(--text)}
.eyebrow{font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}

/* ---------- Scroll-Reveal (Stripe-typisch: sanftes Aufsteigen) ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--body);font-weight:600;font-size:.95rem;border-radius:6px;padding:.72rem 1.4rem;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap}
.btn svg{transition:transform .15s ease}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:linear-gradient(75deg,var(--g1) 0%,var(--g2) 55%,var(--g4) 130%);color:#fff}
.btn-primary:hover{background:linear-gradient(75deg,#2496C8 0%,#54C2E8 55%,var(--g4) 125%);transform:translateY(-1px);box-shadow:0 10px 26px rgba(32,140,188,.45)}
.btn-white{background:var(--btn-contrast-bg);color:var(--btn-contrast-fg)}
.btn-white:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-outline{background:var(--btn-ghost-bg);color:var(--text);border:1px solid var(--line)}
.btn-outline:hover{background:var(--btn-ghost-bg-h);transform:translateY(-1px)}
.link-arrow{font-weight:600;color:var(--accent-text);display:inline-flex;align-items:center;gap:.35rem}
.link-arrow svg{transition:transform .15s ease}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- Nav ---------- */
header.nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
header.nav.scrolled{border-bottom-color:var(--line-soft);background:var(--nav-bg-scrolled)}
.nav-inner{display:flex;align-items:center;gap:2rem;height:66px}
.brand{display:block;width:118px;height:23px;background:var(--logo-img) left center/contain no-repeat;text-indent:-9999px;overflow:hidden;flex-shrink:0}
.brand span{display:none}
.nav-links{display:flex;align-items:center;gap:.15rem;flex:1;min-width:0}
.nav-item{position:relative}
.nav-item>a{font-size:.9rem;font-weight:500;color:var(--muted);padding:.5rem .55rem;border-radius:8px;transition:color .15s,background .15s;display:inline-flex;align-items:center;gap:.24rem;white-space:nowrap}
.nav-item>a:hover{color:var(--heading);background:var(--hover-bg)}
.nav-item>a svg{opacity:.55;transition:transform .2s}
.nav-item:hover>a svg,.nav-item.pinned>a svg{transform:rotate(180deg)}
.nav-toggle{cursor:pointer}
/* Mega-Dropdown (Stripe-typisch: schwebendes Panel mit Pfeil) */
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);min-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:22px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;z-index:70}
.mega::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);width:14px;height:14px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:3px 0 0 0}
.nav-item:hover .mega,.nav-item:focus-within .mega,.nav-item.pinned .mega{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
/* Zwei-Spalten-Variante: Kategorien links, Inhalte rechts */
.mega2{position:absolute;top:calc(100% + 10px);left:-70px;width:min(780px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:14px;display:flex;gap:14px;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;z-index:70}
.mega2::before{content:"";position:absolute;top:-7px;left:106px;transform:rotate(45deg);width:14px;height:14px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:3px 0 0 0}
.nav-item:hover .mega2,.nav-item:focus-within .mega2,.nav-item.pinned .mega2{opacity:1;pointer-events:auto;transform:translateY(0)}
.m2-side{width:212px;flex-shrink:0;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px}
.m2-cat{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.62rem .8rem;border-radius:9px;font-family:var(--body);font-weight:600;font-size:.9rem;color:var(--muted);background:none;border:0;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.m2-cat:hover{color:var(--text);background:var(--hover-bg)}
.m2-cat svg{opacity:0;flex-shrink:0;transition:opacity .15s}
.m2-cat.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.m2-cat.on svg{opacity:1}
.m2-main{flex:1;padding:10px 8px 6px;min-height:270px}
.m2-group{display:none}
.m2-group.on{display:block}
.m2-group h5,.m2-group .m2-h{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--heading);margin:0 0 .15rem}
.m2-desc{font-size:.85rem;color:var(--muted-2);margin-bottom:14px}
.m2-items{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.m2-items a{display:flex;gap:.65rem;padding:.6rem .65rem;border-radius:10px;transition:background .15s}
.m2-items a:hover{background:var(--hover-bg)}
.m2-items .mi2{width:30px;height:30px;flex-shrink:0;border-radius:8px;display:grid;place-items:center;background:linear-gradient(75deg,rgba(29,130,178,.2),rgba(63,178,220,.13) 60%,rgba(255,255,255,.08))}
.m2-items b{display:block;font-size:.88rem;color:var(--text)}
.m2-items span{font-size:.78rem;color:var(--muted-2);line-height:1.35;display:block}
.m2-cols{display:grid;grid-template-columns:1fr 1fr;gap:1px 16px}
.m2-cols a{display:block;padding:.34rem .55rem;border-radius:7px;font-size:.86rem;color:var(--muted);transition:background .15s,color .15s}
.m2-cols a:hover{background:var(--hover-bg);color:var(--text)}
.m2-foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:.35rem;white-space:nowrap;font-size:.88rem}
.m2-note{font-size:.78rem;color:var(--muted-2);margin-top:10px}
.mega a{display:flex;gap:.75rem;padding:.6rem .7rem;border-radius:10px;transition:background .15s}
.mega a:hover{background:var(--hover-bg)}
.mega .mi{width:34px;height:34px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;background:linear-gradient(75deg,rgba(29,130,178,.32),rgba(63,178,220,.22) 60%,rgba(255,255,255,.14));color:var(--accent-text)}
.mega b{display:block;font-size:.9rem;color:var(--text)}
.mega span{font-size:.8rem;color:var(--muted-2)}
.mega .mega-foot{grid-column:1/-1;margin-top:8px;padding-top:14px;border-top:1px solid var(--line);display:block}
.nav-cta{display:flex;align-items:center;gap:.5rem}
.nav-cta .login{font-size:.92rem;font-weight:600;color:var(--heading);padding:.5rem .6rem;display:inline-flex;align-items:center;gap:.3rem}
.nav-cta .login:hover{color:var(--primary-bright)}
.theme-toggle{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--btn-ghost-bg);color:var(--heading);display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s}
.theme-toggle:hover{background:var(--btn-ghost-bg-h);transform:translateY(-1px)}
.theme-toggle .ic-sun{display:none}
html[data-theme="light"] .theme-toggle .ic-sun{display:block}
html[data-theme="light"] .theme-toggle .ic-moon{display:none}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem}
.burger span{display:block;width:22px;height:2px;background:var(--heading);margin:4px 0;border-radius:2px}

/* ---------- Hero mit animiertem Seiden-Band (WebGL) ---------- */
.hero{position:relative;overflow:hidden;padding-top:70px;padding-bottom:120px}
/* Startseite (nur dort traegt der Hero die id "signup"): Hero fuellt wie im
   urspruenglichen Design den Viewport, das Logo-Band beginnt erst unter dem
   Fold. svh beruecksichtigt mobile Browserleisten; 64px = Headerhoehe. */
#signup.hero{min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:center}
#signup.hero>.hero-inner{width:100%}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.silk-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Fließender Canvas-Verlauf (CTA-Band): kleines internes Raster, weich hochskaliert */
.gradient-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto}

.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding-top:70px}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--chip-bg);border:1px solid var(--chip-line);backdrop-filter:blur(6px);color:var(--text);font-weight:600;font-size:.82rem;padding:.4rem .85rem;border-radius:999px;margin-bottom:1.5rem}
.hero-badge b{color:var(--accent-text)}
.hero-badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent-soft);position:relative}
.hero-badge .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent-soft);opacity:.6;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.2rem);font-weight:800;color:var(--heading);text-shadow:var(--h1-shadow);max-width:15ch}
.hero h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{margin-top:1.25rem;font-size:1.14rem;color:var(--muted);max-width:46ch}
html:not([data-theme="light"]) .hero p.lead{color:rgba(242,246,248,.9)}
.hero-actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* Schwebendes Dashboard-Mockup (Stripe-typisch: UI-Karte im Hero, leicht gedreht) */
.hero-visual{position:relative;perspective:1200px}
.dash{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;transform:rotateY(-8deg) rotateX(3deg);transform-style:preserve-3d;animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotateY(-8deg) rotateX(3deg) translateY(0)}50%{transform:rotateY(-8deg) rotateX(3deg) translateY(-12px)}}
.dash-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.dash-top .dt-l{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.88rem}
.dash-top .dot{width:9px;height:9px;border-radius:50%;background:#3ED598;box-shadow:0 0 8px #3ED598}
.dash-top .dt-r{font-size:.78rem;color:var(--muted-2)}
.dash-body{padding:18px}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.kpi .k-label{font-size:.72rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em}
.kpi .k-val{font-family:var(--display);font-weight:700;font-size:1.15rem;margin-top:.15rem}
.kpi .k-val em{font-style:normal;font-size:.72rem;color:#3ED598;margin-left:.3rem}
.chart{margin-top:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px}
.chart .c-head{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted-2);margin-bottom:8px}
.chart svg .area{fill:url(/user/themes/centron/css/#gradA)}
.chart svg .lineP{stroke:var(--primary-bright);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.4s .5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.rows{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:.82rem}
.row .r-l{display:flex;align-items:center;gap:.6rem}
.row .r-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:rgba(32,140,188,.18);color:var(--primary-bright);font-size:.72rem;font-weight:700}
.row .ok{color:#3ED598;font-weight:600;font-size:.76rem}
/* kleine schwebende Benachrichtigung */
.toast{position:absolute;right:-14px;bottom:34px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:12px 16px;display:flex;gap:.7rem;align-items:center;animation:float 7s 1.2s ease-in-out infinite}
.toast .t-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(75deg,var(--g1),var(--g2) 60%,var(--g3));color:#fff}
.toast b{display:block;font-size:.85rem}
.toast span{font-size:.75rem;color:var(--muted-2)}

/* ---------- Logo-/Trust-Leiste ---------- */
.logos{padding:40px 0 10px;position:relative;z-index:2}
.logos .l-label{text-align:center;color:var(--muted-2);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:scroll 32s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee .badge{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;color:var(--muted);font-size:.95rem;white-space:nowrap}
.marquee .badge .dot{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--primary-bright)}
.marquee .c-logo{height:32px;width:auto;flex:none;align-self:center;margin-right:44px;filter:brightness(0) invert(1);opacity:.7;transition:opacity .25s}
.marquee .c-logo:hover{opacity:1}
html[data-theme="light"] .marquee .c-logo{filter:brightness(0);opacity:.55}
.marquee .c-logo[src*="minges"]{filter:grayscale(1)}
html[data-theme="light"] .marquee .c-logo[src*="minges"]{filter:grayscale(1);opacity:.75}
.marquee-track:has(.c-logo){gap:0;animation-duration:70s}

/* ---------- Sections ---------- */
section{padding:96px 0}
.section-head{max-width:660px}
.section-head h2{font-size:clamp(1.9rem,3.5vw,2.7rem);font-weight:700;margin-top:.7rem}
.section-head p{margin-top:1rem;color:var(--muted);font-size:1.08rem}
.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- Split mit Code-Panel (Stripe-typisch) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.code-panel{background:#0A0C0D;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;font-family:var(--mono)}
.code-panel .cp-tabs{display:flex;gap:2px;background:#080A0B;border-bottom:1px solid var(--line);padding:8px 10px 0}
.code-panel .cp-tab{font-size:.75rem;padding:.45rem .9rem;color:var(--muted-2);border-radius:8px 8px 0 0;cursor:default}
.code-panel .cp-tab.active{background:#0A0C0D;color:var(--text);border:1px solid var(--line);border-bottom-color:#0A0C0D}
.code-panel pre{margin:0;padding:18px;font-size:.8rem;line-height:1.75;color:#C8D3DA;white-space:pre-wrap}
.c-k{color:#6FC7EE}.c-s{color:#7DD3A0}.c-f{color:#B9A6F2}.c-c{color:#5A6870}.c-n{color:#F0B26B}
.typing-caret{display:inline-block;width:8px;height:14px;background:var(--primary-bright);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- Feature-Karten ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:52px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;padding:1px;background:linear-gradient(75deg,rgba(29,130,178,.6),transparent 40%,transparent 60%,rgba(255,255,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.card:hover::before{opacity:1}
.card .ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(75deg,rgba(29,130,178,.32),rgba(63,178,220,.2) 60%,rgba(255,255,255,.12));color:var(--accent-text)}
.card h3{font-size:1.15rem;font-weight:700}
.card p{margin-top:.55rem;color:var(--muted);font-size:.96rem}
.card .foot{margin-top:1.1rem}
.card .tag{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-text)}

/* ---------- Stats ---------- */
/* ---------- Backbone: Stat-Buehne mit morphendem Partikelsystem ----------
   Theme-aware: hell = weisse Buehne mit blauen Partikeln, dunkel = blaue Buehne */
.backbone{position:relative;overflow:hidden;padding:0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  --bb-int:4.2s;
  --bb-h:#fff;--bb-num:#B9D4E6;--bb-num-on:#fff;--bb-lab:#8FB3CB;--bb-lab-on:#DCEBF5;
  --bb-line:rgba(255,255,255,.16);--bb-bar:#A9E6F8;
  background:linear-gradient(180deg,#0A1520 0%,#0C3049 42%,#14567C 78%,#1D82B2 130%)}
html[data-theme="light"] .backbone{
  --bb-h:#0E2433;--bb-num:#A7BDCD;--bb-num-on:#0E2433;--bb-lab:#93A9B9;--bb-lab-on:#445866;
  --bb-line:rgba(13,42,58,.12);--bb-bar:#1D82B2;
  background:#fff}
.bb-head{padding:88px 24px 0;text-align:center}
.bb-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:700;color:var(--bb-h);max-width:22ch;margin:0 auto}
.bb-grid{max-width:var(--maxw);margin:64px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr)}
.bb-stat{position:relative;padding:16px 26px 6px;border-left:1px solid var(--bb-line);transition:opacity .6s ease}
.bb-stat:first-child{border-left:0}
.bb-stat::after{content:"";position:absolute;left:26px;right:26px;top:0;height:2px;border-radius:2px;background:var(--bb-bar);transform:scaleX(0);transform-origin:left}
.bb-stat.on::after{animation:bbfill var(--bb-int) linear forwards}
@keyframes bbfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bb-stat .num{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.03em;color:var(--bb-num);transition:color .6s ease}
.bb-stat .label{margin-top:.3rem;font-size:.9rem;color:var(--bb-lab);transition:color .6s ease;line-height:1.4}
.bb-stat.on .num{color:var(--bb-num-on)}
.bb-stat.on .label{color:var(--bb-lab-on)}
.bb-canvas{display:block;width:100%;height:440px;margin-top:8px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat .num{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.6vw,2.8rem);color:var(--heading);letter-spacing:-.03em}
.stat .num em{font-style:normal;color:var(--accent-text)}
.stat .label{margin-top:.25rem;font-size:.92rem;color:var(--muted)}

/* ---------- Testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.quote:hover{transform:translateY(-4px);border-color:rgba(32,140,188,.5)}
.quote .stars{color:var(--accent-soft);letter-spacing:2px;font-size:.95rem}
.quote h4{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:.9rem 0 .6rem;color:var(--heading)}
.quote p{color:var(--muted);font-size:.95rem;flex:1}
.quote .who{margin-top:1.3rem;display:flex;align-items:center;gap:.75rem}
.quote .who .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;color:#fff;background:linear-gradient(75deg,var(--g1),var(--g2));font-size:.95rem}
.quote .who b{display:block;font-size:.92rem;color:var(--text)}
.quote .who span{font-size:.85rem;color:var(--muted-2)}

/* ---------- Blog ---------- */
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.post{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);transition:transform .2s,box-shadow .2s}
.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.post:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.post .thumb{aspect-ratio:840/610;min-height:150px;overflow:hidden;background:linear-gradient(75deg,var(--g1),var(--g2) 55%,var(--g3) 105%)}
.post .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post .thumb.b{background:linear-gradient(75deg,#0B5C80,var(--g1) 60%,var(--g2))}
.post .thumb.c{background:linear-gradient(75deg,var(--g2),var(--g3) 60%,var(--g4))}
.post .body{padding:22px}
.post .cat{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text)}
.post h3{font-size:1.06rem;font-weight:700;margin:.5rem 0;line-height:1.25}
.post p{color:var(--muted);font-size:.9rem}
.post .meta{margin-top:.9rem;font-size:.8rem;color:var(--muted-2)}
.post a.meta{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent-text);font-weight:700;font-size:.86rem;text-decoration:none;transition:gap .2s}.post a.meta svg{width:14px;height:14px}.post:hover a.meta{gap:.7rem;text-decoration:underline;text-underline-offset:3px}

/* ---------- Big CTA mit animiertem Band ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:24px;padding:70px 52px;border:1px solid var(--line)}
.cta-band .cta-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg-soft)}
.cta-band .cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--cta-shade),transparent 30%,transparent 70%,var(--cta-shade))}
.cta-band .inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:700;max-width:20ch;color:var(--cta-fg)}
.cta-band p{margin-top:.7rem;color:var(--cta-fg-soft);max-width:44ch}
.cta-band .fine{margin-top:.6rem;font-size:.8rem;color:var(--cta-fg-fine)}

/* ---------- Footer ---------- */
footer{background:var(--footer-bg);color:var(--muted);padding:76px 0 36px;border-top:1px solid var(--line-soft)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot-brand .brand{width:132px;height:26px}
.foot-brand p{margin-top:1rem;font-size:.92rem;color:var(--muted-2);max-width:34ch}
.foot-address{font-style:normal;font-size:.84rem;line-height:1.7;color:var(--muted);margin-top:.8rem}.foot-address a{color:var(--muted);text-decoration:none}.foot-address a:hover{color:var(--accent-text);text-decoration:underline}
.foot-brand .socials{margin-top:1.4rem;display:flex;gap:.6rem}
.foot-brand .socials a{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:var(--hover-bg);color:var(--muted);transition:background .15s,color .15s}
.foot-brand .socials a:hover{background:var(--primary);color:#fff}
.foot-col h4,.foot-col .foot-h{color:var(--heading);font-family:var(--display);font-size:.85rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:1rem}
.foot-col a{display:block;font-size:.92rem;color:var(--muted-2);padding:.28rem 0;transition:color .15s}
.foot-col a:hover{color:var(--heading)}
.foot-bottom{margin-top:52px;padding-top:26px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--muted-2)}
.foot-bottom .legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-bottom a:hover{color:var(--heading)}
.foot-note{margin-top:20px;font-size:.78rem;color:#4E5A63;line-height:1.6}

/* ---------- Stack-Section: dunkles Integrations-Diagramm ---------- */
.stack{position:relative;background:#0A1428;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);overflow:hidden}
.stack::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(129,178,210,.13) 1px,transparent 1.3px);background-size:22px 22px;pointer-events:none}
.stack .wrap{position:relative}
.stack h2{color:#fff;font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:700;max-width:38ch;line-height:1.4}
.stack h2 span{color:#8FB3CB;font-weight:600}
.stack .st-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
.stack .btn-outline{color:#fff;border-color:rgba(255,255,255,.32)}
.stack .btn-outline:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.stack .st-divider{height:1px;background:rgba(143,179,203,.18);margin:44px 0}
.stack .st-lead{color:#fff;font-weight:700;font-size:1.02rem;max-width:56ch;line-height:1.6}
.stack .st-lead span{color:#8FB3CB;font-weight:500}
.stack-diagram{position:relative;margin:46px auto 8px;aspect-ratio:900/440;max-width:900px}
.stack-diagram .wires{position:absolute;inset:0;width:100%;height:100%}
.stack-diagram .wires path{fill:none;stroke:rgba(129,178,210,.32);stroke-width:1.5}
.stack-diagram .wires path.pulse{stroke:var(--g3);stroke-width:2;stroke-dasharray:7 140;animation:wiredash 3.4s linear infinite;opacity:.85}
@keyframes wiredash{to{stroke-dashoffset:-294}}
.nd{position:absolute;transform:translate(-50%,-50%);background:linear-gradient(75deg,var(--g1),#2B9CCB);color:#fff;font-size:.74rem;font-weight:700;padding:.42rem .72rem;border-radius:8px;white-space:nowrap;box-shadow:0 4px 14px rgba(6,24,38,.45)}
.nd.ghost{background:none;border:1.5px dashed rgba(143,179,203,.4);color:#9FC2DA;box-shadow:none;transition:opacity .35s}
.nd.ghost.empty{width:50px;height:30px;padding:0}
.nd.ghost.fade{opacity:.15}
.nd-center{position:absolute;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:14px;display:grid;place-items:center;background:#0E2233;border:1px solid rgba(143,203,235,.4);box-shadow:0 0 0 6px rgba(29,130,178,.12),0 10px 26px rgba(6,24,38,.5)}
.nd-center b{font-family:var(--display);font-weight:800;font-size:1.6rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.nd-center img{width:24px;height:auto;display:block}
.tilegrid{position:absolute;transform:translate(-50%,-50%);display:grid;grid-template-columns:46px 46px;gap:8px;perspective:520px}
.dstwrap{position:absolute;transform:translate(-50%,-50%);perspective:520px}
.tile{width:46px;height:46px;border-radius:10px;background:#fff;display:grid;place-items:center;font-size:.55rem;font-weight:800;color:#12293A;text-align:center;line-height:1.15;padding:2px;box-shadow:0 4px 12px rgba(6,24,38,.4);transition:transform .42s cubic-bezier(.45,.1,.55,.9);will-change:transform;backface-visibility:hidden}
.tile img{width:26px;height:26px;display:block}
.tile.flip{transform:rotateY(90deg)}
@media(max-width:760px){.nd{font-size:.58rem;padding:.3rem .5rem}.nd.ghost.empty{width:36px;height:24px}.tile{width:36px;height:36px;font-size:.46rem}.tile img{width:20px;height:20px}.tilegrid{grid-template-columns:36px 36px;gap:6px}.nd-center{width:50px;height:50px}.nd-center b{font-size:1.25rem}.nd-center img{width:19px}}
/* ---------- Pricing-Seite ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--g2)}
.pcard .p-top{display:flex;align-items:center;gap:.7rem}
.pcard .p-name{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--heading)}
.pcard .p-from{font-size:.76rem;color:var(--muted-2);margin-top:1rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.pcard .p-price{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.03em;color:var(--heading);line-height:1.1}
.pcard .p-price small{font-family:var(--body);font-weight:500;font-size:.85rem;color:var(--muted-2);letter-spacing:0}
.pcard .p-tag{font-size:.92rem;font-weight:600;color:var(--text);margin-top:.7rem;line-height:1.4}
.pcard ul{list-style:none;margin:0;margin-top:.7rem;padding:0;flex:1}
.pcard li{font-size:.87rem;color:var(--muted);padding:.24rem 0 .24rem 1.4rem;position:relative}
.pcard li::before{content:"";position:absolute;left:0;top:.52rem;width:.85rem;height:.85rem;border-radius:50%;background:linear-gradient(75deg,rgba(29,130,178,.25),rgba(63,178,220,.18))}
.pcard li::after{content:"";position:absolute;left:.22rem;top:.74rem;width:.42rem;height:.22rem;border-left:1.6px solid var(--accent-text);border-bottom:1.6px solid var(--accent-text);transform:rotate(-45deg)}
.pcard .foot{margin-top:1.1rem}
/* FAQ */
.faq{max-width:780px;margin:52px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem .2rem;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--heading)}.faq summary h3{margin:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--body);font-weight:500;font-size:1.4rem;color:var(--accent-text);line-height:1;transition:transform .2s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 .2rem 1.2rem;color:var(--muted);font-size:.95rem;max-width:64ch}
/* Benefits */
.benefit-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;margin-top:36px}
.benefit-cols .b-item{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem;color:var(--muted);padding:.35rem 0}
.benefit-cols .b-item .bi{flex-shrink:0;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:linear-gradient(75deg,rgba(29,130,178,.25),rgba(63,178,220,.16));color:var(--accent-text);font-size:.7rem;font-weight:700;margin-top:.1rem}
@media(max-width:960px){.price-grid{grid-template-columns:1fr 1fr}.benefit-cols{grid-template-columns:1fr}}
@media(max-width:560px){.price-grid{grid-template-columns:1fr}}
/* ---------- Preistabellen (Tarif-Detailseiten) ---------- */
section[id]{scroll-margin-top:84px}
.anchor-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.6rem}
.anchor-nav a{font-size:.85rem;font-weight:600;color:var(--text);background:var(--btn-ghost-bg);border:1px solid var(--line);border-radius:999px;padding:.42rem .95rem;transition:background .15s,border-color .15s}
.anchor-nav a:hover{background:var(--btn-ghost-bg-h);border-color:var(--g2)}
.tbl-wrap{overflow-x:auto;margin-top:22px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
.tbl th{text-align:left;font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);padding:.85rem 1.15rem;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
.tbl td{padding:.82rem 1.15rem;border-bottom:1px solid var(--line);color:var(--muted)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--hover-bg)}
.tbl .t-name{color:var(--heading);font-weight:600}
.tbl .t-price{color:var(--accent-text);font-weight:700;white-space:nowrap}
.tbl .t-go{text-align:right}
.tbl .t-go a{color:var(--accent-text);font-weight:700}
.pool-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.tbl-label{margin-top:26px;font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--heading)}
/* ---------- Produktseiten ---------- */
.check-list{list-style:none;margin:1.4rem 0 0;padding:0}
.check-list li{font-size:.98rem;color:var(--muted);padding:.32rem 0 .32rem 1.7rem;position:relative}
.check-list li::before{content:"";position:absolute;left:0;top:.42rem;width:1.05rem;height:1.05rem;border-radius:50%;background:linear-gradient(75deg,rgba(29,130,178,.28),rgba(63,178,220,.2))}
.check-list li::after{content:"";position:absolute;left:.28rem;top:.68rem;width:.5rem;height:.26rem;border-left:1.7px solid var(--accent-text);border-bottom:1.7px solid var(--accent-text);transform:rotate(-45deg)}
.check-list li b{color:var(--text)}
/* Vergleichs-Balken (animieren beim Reveal) */
.bars{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.bar-row{display:grid;grid-template-columns:120px 1fr 74px;gap:14px;align-items:center}
.bar-row .b-label{font-size:.88rem;font-weight:600;color:var(--text);text-align:right}
.bar-row .b-val{font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--muted)}
.bar-track{height:26px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:6px;background:linear-gradient(75deg,var(--g1),var(--g2));transition:width 1.2s cubic-bezier(.2,.7,.3,1) .2s}
.bar-fill.muted{background:var(--muted-2);opacity:.45}
.rv.in .bar-fill{width:var(--w)}
.bar-row.hero .b-label,.bar-row.hero .b-val{color:var(--accent-text)}
.big-badge{display:inline-flex;flex-direction:column;gap:.1rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 20px;margin-top:22px}
.big-badge b{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--accent-text);letter-spacing:-.02em}
.big-badge span{font-size:.8rem;color:var(--muted-2)}
@media(max-width:560px){.bar-row{grid-template-columns:86px 1fr 64px}}
/* ---------- Tutorials: Uebersicht & Artikel ---------- */
.tchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tchip{appearance:none;cursor:pointer;font:inherit;font-size:.84rem;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.42rem .9rem;transition:border-color .15s,background .15s}
.tchip b{font-weight:800;color:var(--muted-2);margin-left:.3rem}
.tchip:hover{border-color:var(--g2)}
.tchip.active{border-color:var(--g1);background:linear-gradient(75deg,rgba(29,130,178,.16),rgba(63,178,220,.1));color:var(--heading)}
.tchip.active b{color:var(--accent-text)}
.tsearch{position:relative;max-width:520px;margin-top:18px}
.tsearch input{appearance:none;font:inherit;width:100%;font-size:.95rem;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.75rem 1rem .75rem 2.6rem;transition:border-color .15s,box-shadow .15s}
.tsearch input:focus{outline:none;border-color:var(--g2);box-shadow:0 0 0 3px rgba(63,178,220,.18)}
.tsearch svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);pointer-events:none}
.tut-list{margin-top:34px;display:grid;gap:12px}
.tut-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 22px;transition:border-color .15s,transform .15s}
.tut-row:hover{border-color:var(--g2);transform:translateY(-2px)}
.tut-row h3{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--heading);line-height:1.4}
.tut-row .tmeta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.45rem;font-size:.76rem;color:var(--muted-2)}
.tut-row .tcat{font-weight:700;color:var(--accent-text)}
.tut-row .tarrow{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--accent-text)}
.tut-row.hide{display:none}
.tut-none{display:none;color:var(--muted-2);font-style:italic;margin-top:24px}
.tut-none.show{display:block}
/* Artikel */
.art-wrap{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start}
.art-toc{position:sticky;top:84px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.art-toc h4{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.art-toc ol{list-style:none;margin-top:.7rem;display:grid;gap:.45rem;counter-reset:toc}
.art-toc a{display:flex;gap:.5rem;font-size:.86rem;color:var(--muted);counter-increment:toc;transition:color .15s}
.art-toc a::before{content:counter(toc);font-family:var(--display);font-weight:700;font-size:.72rem;color:var(--accent-text)}
.art-toc a:hover{color:var(--heading)}
.art-meta{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-top:1.1rem;font-size:.82rem;color:var(--muted-2)}
.art-meta .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(75deg,var(--g1),var(--g2));color:#fff;font-weight:700;font-size:.76rem}
.art-body{max-width:76ch}
.art-body h2{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--heading);margin-top:2.4rem;scroll-margin-top:90px}
.art-body p{margin-top:1rem;color:var(--muted);line-height:1.75;font-size:.98rem}
.art-body p b,.art-body li b{color:var(--text)}
.art-body ul{margin:1rem 0 0 1.2rem;color:var(--muted);line-height:1.75;font-size:.98rem}
.art-body li{margin-top:.35rem}
@media(max-width:960px){
  /* minmax(0,1fr) statt 1fr: Eine 1fr-Spalte ist implizit
     min-width:auto und wuchs mit dem Artikelinhalt auf 760px -
     Inhaltsverzeichnis und Text ragten aus dem Viewport
     (Messung 24.08.2026, iPhone 14). */
  .art-wrap{grid-template-columns:minmax(0,1fr)}
  .art-wrap > *{min-width:0}
  /* Das Inhaltsverzeichnis klebt sonst oben und frisst den Schirm */
  .art-toc{position:static}
  .art-body{max-width:none}
  /* Kopier-Knopf der Codebloecke mass 27x27px, die Eintraege im
     Inhaltsverzeichnis nur 19px hoch - beide werden auf dem Telefon
     angetippt. Trefferflaeche auf 44px, Optik bleibt (24.08.2026). */
  /* Optik bleibt kompakt - 44px liessen die Codeblock-Leiste auf
     59px anwachsen. Trefferflaeche unsichtbar per Pseudo-Element. */
  .tcode-copy{position:relative}
  .tcode-copy::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
  .art-toc a{min-height:44px;align-items:center}
}
.art-hint{margin-top:1.2rem;padding:.85rem 1rem;border-radius:10px;font-size:.9rem;line-height:1.6;background:linear-gradient(75deg,rgba(29,130,178,.12),rgba(63,178,220,.08));border:1px solid var(--g2);color:var(--text)}
.tcode{margin-top:1.2rem;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--term-bg,#0C1E2B)}
.tcode-bar{display:flex;justify-content:space-between;align-items:center;padding:.5rem .9rem;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.tcode-bar span{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:#8FB3CB}
.tcode-copy{appearance:none;cursor:pointer;font:inherit;font-size:.72rem;font-weight:700;color:#CFE9F7;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:.24rem .6rem;transition:background .15s}
.tcode-copy:hover{background:rgba(255,255,255,.14)}
.tcode pre{margin:0;padding:.9rem 1rem;overflow-x:auto}
.tcode code{font-family:var(--mono);font-size:.84rem;line-height:1.6;color:#DCEFFA;white-space:pre}
.tcode code .cm{color:#6FA5C4}
/* ---------- Nav: Zwischenstufe fuer schmale Desktops ---------- */
@media(max-width:1280px){
  .nav-item>a{font-size:.84rem;padding:.5rem .42rem;gap:.18rem}
  .nav-item>a svg{width:9px;height:9px}
}
@media(max-width:1120px){
  .nav-item>a{font-size:.8rem;padding:.45rem .34rem}
}
/* ---------- Sales-Kontakt: Formular & Stats ---------- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-md)}
.form-card h3{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--heading)}
.form-card .f-sub{font-size:.9rem;color:var(--muted);margin-top:.35rem}
.f-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:20px}
.f-field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.f-field.full{grid-column:1/-1}
.f-field label{font-size:.78rem;font-weight:600;color:var(--text)}
.f-field label small{color:var(--muted-2);font-weight:500}
.f-field input,.f-field select,.f-field textarea{appearance:none;font:inherit;font-size:.92rem;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:.62rem .75rem;transition:border-color .15s,box-shadow .15s;width:100%}
.f-field textarea{min-height:104px;resize:vertical}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--g2);box-shadow:0 0 0 3px rgba(63,178,220,.18)}
.f-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%238FA5B5' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.2rem}
.f-check{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;color:var(--muted);grid-column:1/-1}
.f-check input{width:16px;height:16px;margin-top:2px;accent-color:var(--g1);flex-shrink:0}
.f-submit{grid-column:1/-1;margin-top:4px}
.f-submit .btn{width:100%;justify-content:center}
.f-success{display:none;margin-top:18px;padding:14px 16px;border-radius:10px;background:linear-gradient(75deg,rgba(29,130,178,.14),rgba(63,178,220,.1));border:1px solid var(--g2);color:var(--text);font-size:.92rem}
.f-success.show{display:block}
.cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.cstat{border-left:1px solid var(--line);padding:4px 24px}
.cstat:first-child{border-left:0}
.cstat b{display:block;font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cstat span{display:block;margin-top:.4rem;font-size:.88rem;color:var(--muted);line-height:1.45}
@media(max-width:900px){.cstats{grid-template-columns:1fr 1fr;gap:20px 0}.cstat:nth-child(3){border-left:0}}
@media(max-width:640px){.f-grid{grid-template-columns:1fr}}
/* ---------- Responsive ---------- */
@media(max-width:960px){
  .nav-links{display:none}
  /* Der Burger behaelt seine kompakte Optik (22px Icon, enge Balken).
     Die 44px-Trefferflaeche kommt unsichtbar per Pseudo-Element -
     ein auf 44px aufgeblasener Knopf liess das Icon verloren wirken
     (Rueckmeldung DS, 24.08.2026). */
  .burger{display:block;position:relative;padding:.4rem}
  .burger::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px}
  /* Runder Knopf - 44px sind hier optisch unkritisch */
  .theme-toggle{width:44px;height:44px}
  /* minmax(0,1fr): Grid-Spalten sind implizit min-width:auto und wachsen
     mit nicht umbrechbarem Inhalt ueber den Viewport hinaus. Der
     !important schlaegt das inline gesetzte grid-template-columns:1fr
     der Hero-Templates (Messung 24.08.2026: 470px bei 390px Viewport). */
  .hero-inner{grid-template-columns:minmax(0,1fr) !important;gap:48px}
  .hero-inner > *{min-width:0}
  /* CTA-Buttons lagen mit 41-43px knapp unter der 44px-Empfehlung */
  /* min-height fuer die Touch-Flaeche; white-space:normal, weil lange
     Beschriftungen sonst aus dem Viewport ragen - der .btn-Basisstil
     setzt nowrap (EN-Texte sind laenger als die deutschen,
     Messung 24.08.2026: 387px Button in 350px Spalte). */
  .btn{min-height:44px;white-space:normal;max-width:100%}
  .dash{transform:none;animation:floatFlat 7s ease-in-out infinite}
  @keyframes floatFlat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  .split{grid-template-columns:1fr;gap:36px}
  .grid-3,.quotes,.blog{grid-template-columns:1fr}
  .grid-2,.grid-4,.stats-grid{grid-template-columns:1fr 1fr}
  .bb-grid{grid-template-columns:1fr 1fr;gap:28px 0}
  .bb-stat:nth-child(odd){border-left:0}
  .bb-canvas{height:340px}
  .foot-top{grid-template-columns:1fr 1fr}
  .toast{right:6px}
}
@media(max-width:560px){
  .stats-grid,.grid-2,.grid-4,.foot-top{grid-template-columns:1fr}
  .bb-grid{grid-template-columns:1fr}
  .bb-stat{border-left:0;padding:6px 0}
  .bb-canvas{height:280px}
  section{padding:68px 0}
  .cta-band{padding:46px 28px}
  .dash-kpis{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .chart svg .lineP{stroke-dashoffset:0}
}

/* Zertifizierungen als ruhige Zeile unter den Hero-Buttons:
   belegen die Aussage, ohne den Lead-Text zu ueberfrachten. */
.hero-trust{margin-top:1.1rem;font-size:.82rem;color:var(--muted-2);line-height:1.6}
.hero-trust a{color:var(--accent-text);font-weight:600;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s}
.hero-trust a:hover{border-bottom-color:var(--accent-text)}
/* ---------- Mega-Menue: Hover-Toleranz (26.08.2026) ----------
   Vorher schloss das Dropdown sofort, sobald die Maus den Menuepunkt
   verliess, und zwischen Menuepunkt und Panel lag eine 10-px-Luecke.
   Jetzt: unsichtbare Bruecke unter dem Menuepunkt, und das Panel bleibt
   beim Verlassen ~300 ms bedienbar (Schliessen verzoegert), damit man
   schraeg ins Menue fahren kann. Wird nach den Seiten-Stylesheets
   geladen und ueberschreibt deren .mega/.mega2-Regeln. */
@media (hover: hover) and (min-width: 961px) {
  .nav-item::after{content:"";position:absolute;left:-8px;right:-8px;top:100%;height:16px}
  .nav-item .mega,.nav-item .mega2{
    pointer-events:auto;visibility:hidden;
    transition:opacity .18s ease .28s,transform .18s ease .28s,visibility 0s linear .46s}
  .nav-item:hover .mega,.nav-item:focus-within .mega,.nav-item.pinned .mega,
  .nav-item:hover .mega2,.nav-item:focus-within .mega2,.nav-item.pinned .mega2{
    visibility:visible;transition-delay:.06s,.06s,0s}
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/user/themes/centron/fonts/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/user/themes/centron/fonts/dmsans-rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/user/themes/centron/fonts/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/user/themes/centron/fonts/dmsans-rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/user/themes/centron/fonts/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/user/themes/centron/fonts/dmsans-rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/user/themes/centron/fonts/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/user/themes/centron/fonts/dmsans-rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/user/themes/centron/fonts/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/user/themes/centron/fonts/dmsans-rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F63fjptAgt5VM-kVkqdyU8n1iIq129k.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F63fjptAgt5VM-kVkqdyU8n1isq129k.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F63fjptAgt5VM-kVkqdyU8n1iAq129k.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwl1FgtIU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwlRFgtIU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwl9FgtIU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgtIU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3vAOwl1FgtIU.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3vAOwlRFgtIU.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3vAOwl9FgtIU.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3vAOwl5FgtIU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/user/themes/centron/fonts/ibmplexmono--F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
   responsive.css — gemeinsame Mobile-Schicht für alle Seiten
   Wird in base.html.twig mit niedriger Priorität geladen und
   überschreibt damit die seitenspezifischen Stylesheets.
   ============================================================ */

/* ---------- Global: nichts darf horizontal überlaufen ---------- */
html, body{max-width:100%;overflow-x:hidden}
img, video, iframe, canvas{max-width:100%;height:auto}

/* CTA-Klone im Drawer: auf Desktop unsichtbar */
.nav-mobile-cta{display:none}

/* Icon-Kacheln (z.B. AGB-Karten) behalten ihre 46x46-Form:
   als Flex-Item neben langem Text sonst schmaler gequetscht (Pillenform) */
.card .ic{flex:0 0 auto}

/* ============================================================
   Mobile Navigation (Drawer + Akkordeon) — ersetzt den
   alert()-Platzhalter des Burger-Buttons
   ============================================================ */
@media (max-width:960px){

  /* Alle rem-basierten Schriften mobil verkleinern */
  html{font-size:15px}

  /* Theme-Toggle + Burger rechtsbündig (nav-links als Spacer entfällt) */
  .nav-cta{margin-left:auto}

  /* --- Drawer-Panel unterhalb des sticky Headers ---
     Wichtig: position:absolute statt fixed, denn der backdrop-filter
     des Headers macht ihn zum Containing Block für fixed-Kinder —
     ein fixed-Drawer kollabiert dadurch auf die Header-Höhe. */
  .nav-links{
    position:absolute;
    top:100%;
    left:0; right:0;
    height:calc(100vh - 66px);
    height:calc(100dvh - 66px);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:var(--surface, #0F1112);
    border-top:1px solid var(--line, rgba(255,255,255,.1));
    padding:10px 26px 44px;
    z-index:100;
  }
  header.nav.nav-open .nav-links{display:flex}
  body.nav-open{overflow:hidden}

  /* --- Menüpunkte als volle Zeilen --- */
  .nav-item{position:static;width:100%;border-bottom:1px solid var(--line, rgba(255,255,255,.08))}
  .nav-item > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:.95rem .2rem;
    font-size:1rem;
    font-weight:600;
  }
  .nav-item > a svg{display:inline-block;width:12px;height:12px;transition:transform .2s ease}
  .nav-item.open > a svg{transform:rotate(180deg)}

  /* --- Mega-Menüs: aus dem Overlay in den Fluss holen --- */
  .mega, .mega2{
    position:static;
    display:none;
    width:100%;
    min-width:0;
    transform:none;
    opacity:1;
    pointer-events:auto;
    box-shadow:none;
    border:0;
    border-radius:0;
    background:transparent;
    padding:0 0 14px;
  }
  /* Hover-Regeln des Desktop-CSS neutralisieren */
  .nav-item:hover .mega, .nav-item:focus-within .mega,
  .nav-item:hover .mega2, .nav-item:focus-within .mega2{
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
  .nav-item.open > .mega{display:grid;grid-template-columns:1fr;gap:2px}
  .nav-item.open > .mega2{display:block}

  /* --- mega2: Tab-Seitenleiste ausblenden, Gruppen stapeln --- */
  .mega2 .m2-side{display:none}
  .mega2 .m2-main{min-height:0;padding:0}
  .mega2 .m2-group{display:block;padding:10px 0 4px}
  .mega2 .m2-group h5,.m2-group .m2-h{margin:0 0 2px}
  .m2-items, .m2-cols{grid-template-columns:1fr;gap:2px}
  .m2-items a, .m2-cols a{padding:.55rem .2rem;min-height:44px;display:flex;align-items:center}
  .m2-items a{gap:.7rem}
  .mega > a{padding:.55rem .2rem;min-height:44px}
  .m2-foot{padding:.55rem .2rem;display:inline-flex;align-items:center;gap:.4rem}

  /* --- Login/Sales im Drawer (per JS geklont) --- */
  .nav-mobile-cta{
    display:flex;
    flex-direction:column;
    gap:.7rem;
    padding:18px .2rem 0;
  }
  .nav-mobile-cta a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    min-height:46px;
  }

  /* --- Burger-Animation zu X --- */
  .burger span{display:block;width:20px;height:2px;background:currentColor;margin:4px 0;transition:transform .22s ease,opacity .18s ease}
  header.nav.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  header.nav.nav-open .burger span:nth-child(2){opacity:0}
  header.nav.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* ============================================================
   Header-Verdichtung auf kleinen Screens
   ============================================================ */
@media (max-width:700px){
  .nav-cta .login{display:none}
}
@media (max-width:560px){
  .nav-inner{gap:1rem}
  .nav-cta{gap:.4rem}
  .nav-cta .btn-primary{padding:.5rem .8rem;font-size:.82rem}
  .nav-cta .btn-primary svg{display:none}
}
@media (max-width:400px){
  .nav-cta .btn-primary{display:none}
}

/* ============================================================
   Inhalte: Tabellen, Code, Typografie, Abstände
   ============================================================ */
@media (max-width:960px){
  /* Tabellen horizontal scrollbar statt Layout-Sprengung */
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl{min-width:0}

  /* Lange Wörter/URLs/Inline-Code umbrechen */
  p, li, td, th{overflow-wrap:break-word}
  p code, li code{overflow-wrap:anywhere}
}

@media (max-width:560px){
  html{font-size:14px}
  .wrap{padding:0 20px}
  .nav-links{padding:10px 22px 44px}
  section{padding:56px 0}
  section.hero{padding-top:40px}
  .hero h1{font-size:clamp(2rem,9vw,2.6rem)}
  .hero p{font-size:.95rem}
  .hero-actions{flex-wrap:wrap;gap:.6rem}
  .hero-actions .btn{width:100%;justify-content:center}
  .cta-band{padding:38px 20px}
  .cta-band h2{font-size:1.5rem}

  /* Tutorials: Artikel-Layout */
  .art-body h2{font-size:1.22rem}
  .tcode pre{padding:.75rem .8rem}
  .tcode code{font-size:.78rem}
  .anchor-nav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}
  .anchor-nav a{white-space:nowrap}
}

/* Feinere Touch-Targets für Fuß-Navigation */
@media (max-width:960px){
  .foot-top a, .foot-bottom a{padding:.3rem 0;display:inline-block}
}

/* ---------- Footer-Akkordeon (mobil) ---------- */
@media(max-width:960px){
  .foot-col h4,.foot-col .foot-h{cursor:pointer;display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem;padding:.5rem 0;-webkit-user-select:none;user-select:none}
  .foot-col h4::after{content:"";width:8px;height:8px;border-right:1.6px solid var(--muted-2);border-bottom:1.6px solid var(--muted-2);transform:rotate(45deg);transition:transform .2s;margin-right:4px}
  .foot-col.open h4::after{transform:rotate(-135deg)}
  .foot-col a{display:none}
  .foot-col.open a{display:block}
}

/* ---------- Layout-Korrektur Produktseiten (26.08.2026) ----------
   Hero unter 100vh, Bullets als Zeile unter dem Hero, Bilder als
   Text-Bild-Modul statt Full-Width-Block, einheitliche Abstaende.
   Global hier, damit alle 25 Seiten-Stylesheets dieselbe Regel sehen. */
section.hero{padding-top:56px;padding-bottom:64px}
.hero-inner{padding-top:0;gap:48px}
.hero h1{font-size:clamp(2.5rem,3.4vw,3rem);line-height:1.12;max-width:18ch}
.hero p.lead{font-size:1.08rem;line-height:1.5;max-width:52ch;margin-top:1rem}
.hero-badge{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:1.1rem}
.hero-actions{margin-top:1.5rem}
.hero-visual{max-height:420px}
.hero-visual .dash{max-height:420px;overflow:hidden;transform-origin:top center}
.hero-visual .toast{bottom:18px}
.hero-bullets{padding:0 0 8px;background:var(--bg)}
.hero-bullets__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem 1.6rem;margin:0;padding:22px 0 0;border-top:1px solid var(--line-soft)}
.hero-bullets__list li{font-size:.92rem;line-height:1.4;padding:.15rem 0 .15rem 1.6rem}
.hero-bullets__list li::before{top:.3rem}
.hero-bullets__list li::after{top:.55rem}
section{padding:80px 0}
.section-head{max-width:760px}
.kopf-mit-bild{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.kopf-mit-bild .section-head{max-width:none}
.bild-modul{margin:0;max-width:760px}
.bild-modul picture,.bild-modul img{display:block;width:100%;height:auto}
.bild-modul--foto img{aspect-ratio:3/2;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.bild-modul--illu img{max-height:360px;width:auto;max-width:100%;margin:0 auto;object-fit:contain}
.bild-modul--illu .illu-ci{display:block;width:100%;max-width:420px;height:auto;margin:0 auto;color:var(--muted)}
.bild-modul figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--muted-2);text-align:left}
.split .bild-modul{margin-top:32px}
.answer-block{max-width:760px;padding:14px 18px;margin:.8rem 0 1rem}
@media(max-width:960px){
  .kopf-mit-bild{grid-template-columns:1fr;gap:28px}
  .hero-bullets__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
  .hero-visual{max-height:260px;overflow:hidden}
}
@media(max-width:560px){
  section.hero{padding-top:40px;padding-bottom:40px}
  .hero h1{font-size:clamp(1.75rem,7vw,2rem);line-height:1.15}
  section{padding:48px 0}
  .hero-bullets__list{grid-template-columns:1fr;padding-top:16px}
}
/* ============ Gestyltes Dropdown (dropdown.js) ============
   Ersetzt das native <select> durch ein Panel im centron-Design.
   Vorbild: Bildschirmaufnahme DS 24.08.2026 - helle Auswahlflaeche,
   hervorgehobene Zeile, weiche Kanten. Farben kommen aus den
   Design-Tokens, damit Light und Dark ohne Duplikate funktionieren.
   Ohne JS bleibt .dd-nativ sichtbar (Progressive Enhancement). */
.dd{position:relative;width:100%}
.dd .dd-nativ{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dd-knopf{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  width:100%;font:inherit;font-size:.92rem;color:var(--text);background:var(--surface-2);
  border:1px solid var(--line);border-radius:8px;padding:.62rem .75rem;cursor:pointer;
  text-align:left;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.dd-knopf:hover{border-color:var(--chip-line)}
.dd-knopf:focus-visible{outline:none;border-color:var(--g2);box-shadow:0 0 0 3px rgba(63,178,220,.18)}
.dd-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-text.dd-platzhalter{color:var(--muted)}
.dd-pfeil{flex-shrink:0;color:var(--muted);transition:transform .18s ease}
.dd.auf .dd-knopf{border-color:var(--g2);box-shadow:0 0 0 3px rgba(63,178,220,.18)}
.dd.auf .dd-pfeil{transform:rotate(180deg)}

.dd-liste{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;
  max-height:290px;overflow-y:auto;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow-md);
  animation:dd-auf .16s cubic-bezier(.32,.72,.4,1) both}
@keyframes dd-auf{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dd-liste{animation:none}.dd-pfeil{transition:none}}

.dd-eintrag{padding:.5rem .7rem;border-radius:7px;font-size:.92rem;color:var(--text);
  cursor:pointer;transition:background .12s ease,color .12s ease;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-eintrag:hover{background:var(--hover-bg)}
.dd-eintrag.gewaehlt{background:var(--dd-aktiv);color:var(--dd-aktiv-fg);font-weight:600}
.dd-eintrag[aria-disabled="true"]{color:var(--muted-2);cursor:default;background:none}

/* Auswahlfarben. Standard ist Dark (wie <html data-theme="dark">),
   der Light-Block setzt die Toene aus der Vorlage. Eigenstaendig
   definiert, weil diese Datei auch auf Seiten ohne home.css laeuft. */
:root{--dd-aktiv:rgba(63,178,220,.16);--dd-aktiv-fg:#A9E6F8}
html[data-theme="light"]{--dd-aktiv:#D4E7F1;--dd-aktiv-fg:#0B5C80}

/* Touch-Mindestgroesse: Auf schmalen Viewports muss der Ausloeser die
   44px-Trefferflaeche erreichen - auf echten Touch-Geraeten bleibt zwar
   das native <select> aktiv (siehe dropdown.js), auf schmalen Fenstern
   mit Maus wird aber dieses Panel gerendert (24.08.2026). */
@media(max-width:640px){
  .dd-knopf{min-height:44px}
  .dd-eintrag{min-height:44px;display:flex;align-items:center}
}