/* Anmeldung scopeletter.daily – UI-Stand 23.10.2026 (Farbvariante B, keine Rahmen) */
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-var.woff2") format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
:root{--flaeche:#f5f3f0;--karte:#fff;--text:#1f1c19;--sek:#5f5a54;--leicht:#68645c;--petrol:#3d6b7a;--petrol-fill:#e3ebed;--petrol-text:#2c5866;--fehler:#a8402c;--feld:#f5f3f0;--hover:#f2f0ed;--hair:#ebe7e1}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--flaeche);color:var(--text);font:400 16px/1.55 "DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--petrol-text);text-underline-offset:2px}
a:hover{color:var(--petrol)}
:focus-visible{outline:2px solid var(--petrol);outline-offset:2px;border-radius:6px}
.ti{width:24px;height:24px;flex:none;stroke-width:1.25}
.seite{max-width:560px;margin:0 auto;padding:48px 20px 40px}
.marke{display:inline-flex;align-items:center;min-height:44px;gap:10px;margin:0 0 28px;font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--text);text-decoration:none}
.marke span{font-weight:450;color:#5f5a54;font-size:13.5px}
h1{font-weight:600;font-size:34px;line-height:1.25;letter-spacing:-.015em;margin:0 0 .45em}
.unterzeile{color:var(--sek);font-size:17px;margin:0 0 28px}
.karte{background:var(--karte);border-radius:14px;padding:24px}
.thema{display:flex;gap:14px;align-items:flex-start;background:var(--petrol-fill);border-radius:10px;padding:14px 16px;margin:0 0 24px;min-height:56px}
.thema .ti{color:var(--petrol);margin-top:1px}
.thema b{display:block;font-weight:600;font-size:16px;line-height:1.3}
.thema span{display:block;color:var(--sek);font-size:14.5px;line-height:1.45;margin-top:2px}
.themen[hidden]{display:none}
.namen{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.sib-form-block{margin:0 0 18px}
.form__label-row{display:block}
.entry__label{display:block;font-weight:600;font-size:15px;line-height:1.3;margin:0 0 7px}
.entry__label .optional{font-weight:400;color:var(--sek)}
.entry__field{display:block}
.input{display:block;width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:16px;color:var(--text);background:var(--feld);border:0;border-radius:10px;-webkit-appearance:none;appearance:none}
.input:hover{background:var(--hover)}
.input:focus-visible{outline:2px solid var(--petrol);outline-offset:2px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair)}
.input--hidden{display:none!important}
.fehler{display:none;align-items:flex-start;gap:6px;color:var(--fehler);font-size:14.5px;line-height:1.4;margin:8px 0 0}
.fehler .ti{width:20px;height:20px;margin-top:-1px}
.entry__error{display:inline!important;font:inherit;color:inherit}
.entry__error:empty{display:none!important}
.form__entry.entry_errored .fehler{display:flex}
.form__entry.entry_errored .input{background:#fbf0ed}
.sib-form-message-panel{display:none}
#error-message.sib-form-message-panel--active{display:flex;align-items:flex-start;gap:8px;color:var(--fehler);font-size:15px;line-height:1.45;margin:0 0 16px}
#error-message .ti{width:20px;height:20px;margin-top:1px}
#success-message{display:none!important}
.sib-form-block__button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:180px;min-height:48px;padding:12px 24px;border:0;border-radius:10px;background:var(--petrol);color:#fff;font:inherit;font-weight:600;font-size:16px;cursor:pointer}
.sib-form-block__button:hover{background:#355e6b}
.sib-form-block__button .laden{display:none}
.sib-form-block__button-disabled,.sib-form-block__button[disabled]{cursor:progress;background:#567f8c}
.sib-form-block__button-disabled .normal{display:none}
.sib-form-block__button-disabled .laden{display:inline}
.progress-indicator__icon{width:20px;height:20px;animation:dreh 1s linear infinite}
.progress-indicator__icon.sib-hide-loader-icon{display:none}
@keyframes dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.progress-indicator__icon{animation:none}}
.einwilligung{font-size:14px;line-height:1.5;color:var(--sek);margin:16px 0 0}
.einwilligung a{color:var(--sek)}
.platzhalter{display:inline-block;font-size:11.5px;line-height:1.3;font-weight:600;color:#7a4a00;background:#f7f5f0;border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:1px;text-decoration:none}
.fuss{margin:32px 0 0;font-size:14px;color:var(--sek);display:flex;gap:8px;flex-wrap:wrap}
.fuss a{color:var(--sek)}
.status-icon{display:block;width:40px;height:40px;color:var(--petrol);margin:0 0 18px}
.status p{margin:0 0 14px;font-size:17px}
.status .klein{font-size:15px;color:var(--sek)}
.knopf{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:10px;background:var(--petrol);color:#fff;text-decoration:none;font-weight:600;margin-top:10px}
.knopf:hover{background:#355e6b;color:#fff}
.knopf .ti{width:20px;height:20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.landing{max-width:1120px;margin:0 auto;padding:28px 32px 40px}
.kopf{margin:0 0 28px}
.hero{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:56px;align-items:center}
.hero-bild{display:flex;justify-content:center}
.hl{width:100%;max-width:440px;aspect-ratio:1/1;--hairline-plate:#ffffff;--hairline-hi:#3d6b7a;--hairline-edge:#7f9ea8;--hairline-mid:#c4d3d8;--hairline-lo:#e3ebed;--hairline-stroke:1}
.trenner{max-width:560px;margin:64px auto;color:#5f5a54}
.trenner svg{display:block}
h2{font-weight:600;font-size:26px;line-height:1.25;letter-spacing:-.015em;margin:0 0 .9em}
h3{font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-.015em;margin:0 0 6px}
sup.c{font-size:.55em;vertical-align:super;line-height:0;margin-left:1px}
.abschnitt-text{color:var(--sek);font-size:16.5px;max-width:640px;margin:0 0 28px}
.beispiele{text-align:left}
.schilder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.schild{display:flex;flex-direction:column;align-items:center}
.faden{display:block;margin:0 0 -6px;position:relative;z-index:1}
.schild-koerper{position:relative;width:100%;background:#fff;padding:30px 18px 20px;flex:1;
 clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%,0 22px);border-radius:0 0 12px 12px}
.loch{position:absolute;top:10px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--flaeche)}
.schild-bild{display:flex;align-items:center;justify-content:center;height:88px;background:#f4f7fa;border-radius:10px;margin:0 0 16px;color:var(--petrol)}
.schild-bild .ti{width:32px;height:32px}
.schild-art{display:block;font-size:13px;font-weight:450;color:var(--leicht);margin:0 0 6px}
.schild-text p{margin:0;color:var(--sek);font-size:14.5px;line-height:1.5}
.cta{max-width:560px}
.landing .fuss{margin-top:56px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:1020px){.schilder{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{grid-template-columns:1fr;gap:8px}.hero-bild{order:-1}.hl{max-width:260px}}
#vorschau-hinweis{position:fixed;right:8px;bottom:8px;z-index:50;background:#f2f2f2;color:#5c5c5c;font:11.5px/1.3 system-ui,sans-serif;padding:4px 8px;border-radius:8px;opacity:.95}
#vorschau-hinweis a{color:#5c5c5c}
@media (max-width:520px){
 .seite{padding:28px 20px 56px}
 .marke{margin-bottom:16px}
 h1{font-size:28px}
 .unterzeile{font-size:16px}
 .karte{padding:20px 16px}
 .namen{grid-template-columns:1fr}
 .landing{padding:20px 20px 40px}
 .kopf{margin-bottom:4px}
 .hl{max-width:200px}
 .schilder{grid-template-columns:1fr;gap:20px}
 .trenner{margin:44px auto}
 h2{font-size:23px}
 #vorschau-hinweis{position:static;display:block;margin:0 20px 20px;opacity:1}
 .sib-form-block__button,.knopf{width:100%;justify-content:center}
}