/* Nahweb · «Ihre heutige Website, neu gezeichnet» (Runde 13). Nur neu-gezeichnet.html lädt diese Datei, nach style.css und
   seite.css (Skizze .handy/.mini, Pinsel-Keyframes g-pinsel-*, Farbroller .nw-roller-* kommen von dort). Klassen «sk-».
   Erklärungen: README «Website neu zeichnen», konzept.md Teil D. */

/* === Held: Text links, Werkzeug-Karte rechts (Handy: darunter) === */
.sk-held { padding-bottom: clamp(30px, 4.5vw, 64px); }
@media (min-width: 1000px) {
  .sk-held .sv-held-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: clamp(48px, 5vw, 96px); align-items: end; }
}
.sk-karte-platz { min-width: 0; }
.sk-karte {
  position: relative; padding: 20px;
  border-radius: 26px; background: var(--weiss); border: 1px solid var(--linie);
  box-shadow: 0 2px 4px rgba(21, 19, 15, .04), 0 34px 60px -34px rgba(21, 19, 15, .42);
}
@media (min-width: 600px) { .sk-karte { padding: 26px 28px 24px; } }
.sk-label { display: block; font: 700 18px/1.3 var(--text); color: var(--tinte); }
.sk-eingabe {
  display: block; width: 100%; min-height: 60px; margin-top: 10px; padding: 14px 16px;
  border: 1.5px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--papier);
  font-size: 18px; line-height: 1.3; color: var(--tinte);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dauer-hover) var(--ease-aus), box-shadow var(--dauer-hover) var(--ease-aus), background-color var(--dauer-hover) var(--ease-aus);
}
.sk-eingabe::placeholder { color: #8C8579; opacity: 1; }
@media (hover: hover) { .sk-eingabe:hover { border-color: rgba(21, 19, 15, .38); } }
.sk-eingabe:focus { outline: none; border-color: var(--tinte); background: var(--weiss); box-shadow: 0 0 0 4px rgba(236, 90, 58, .22); }
.sk-eingabe[aria-invalid="true"] { border-color: var(--fehler); }
.sk-feldfehler { margin-top: 8px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--fehler); }
.sk-knopf { --h: 58px; width: 100%; margin-top: 12px; font-size: 17px; }
.sk-knopf[aria-disabled="true"] { cursor: progress; background: var(--orange-hell); }
.sk-knopf[aria-disabled="true"] .knopf-pfeil { display: none; }
.sk-status { margin-top: 10px; font-size: 15px; font-weight: 550; line-height: 1.45; color: var(--tinte-2); text-align: center; }
.sk-status:empty { display: none; }
.sk-hinweis { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--stein); text-wrap: pretty; }
.sk-hinweis a, .sk-ohne a, .sk-ohne-skript a { color: var(--tinte); font-weight: 650; }
.sk-ohne { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 15.5px; line-height: 1.5; color: var(--tinte-2); }

/* Ohne Skript, Notfall-Modus (app.js fehlt) oder ohne assets/skizze-v1.js: der Weg über das Formular (T10.8) */
.sk-ohne-skript { display: none; }
.sk-ohne-skript p { font-size: 17px; line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
html:not(.js) .sk-ohne-skript, .js-fehlt .sk-ohne-skript, .sk-fehlt .sk-ohne-skript { display: block; }
html:not(.js) :is(.sk-werkzeug, .sk), :is(.js-fehlt, .sk-fehlt) :is(.sk-werkzeug, .sk) { display: none; }

/* === Bühne === */
.sk { position: relative; padding-bottom: calc(var(--abstand) * .7); scroll-margin-top: calc(var(--kopf-h) + 14px); }
.sk-raster { display: grid; gap: 30px; }
.sk-buehne-spalte { display: grid; justify-items: center; min-width: 0; }
.sk-text { min-width: 0; max-width: 40rem; }
@media (min-width: 1000px) {
  .sk-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: clamp(48px, 5vw, 96px); align-items: start; }
  .sk-buehne-spalte { grid-column: 2; grid-row: 1; }
  .sk-text { grid-column: 1; grid-row: 1; }
  /* Leer und beim Lesen: der Umriss steht mittig unter Text und Karte, nicht rechts neben einer leeren linken Spalte */
  .sk:is([data-zustand="leer"], [data-zustand="laedt"]) .sk-buehne-spalte { grid-column: 1 / -1; }
}
@media (min-width: 1000px) and (min-height: 860px) {
  .sk[data-zustand="fertig"] .sk-buehne-spalte { position: sticky; top: calc(var(--kopf-h) + 20px); }
}

/* Leer, lädt, Fehler: Bleistift-Umriss eines Handys */
.sk-umriss { position: relative; margin: 0; display: grid; justify-items: center; }
.sk-umriss-bild { display: block; width: min(190px, 50vw); height: auto; overflow: visible; }
.sk-umriss-striche { stroke: var(--graphit); stroke-width: calc(1.3 * 260 / 190); stroke-opacity: .9; }
.sk-umriss-hilfe { stroke-opacity: .35; }
.sk-umriss-notiz {
  margin-top: 14px; max-width: 13em; text-align: center;
  font-family: var(--notiz); font-weight: 560; font-size: 23px; line-height: 1.05; color: var(--rotstift);
}
.sk-umriss-laden { stroke-opacity: 0; }
@media (min-width: 1000px) {
  .sk-umriss-bild { width: 240px; }
  .sk-umriss-striche { stroke-width: calc(1.3 * 260 / 240); }
  .sk-umriss-notiz { position: absolute; right: calc(50% + 150px); top: 34%; width: 9em; margin: 0; text-align: right; font-size: 25px; }
  .sk-umriss-notiz::after {
    content: ""; position: absolute; right: -46px; top: 18px; width: 40px; height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22' fill='none' stroke='%23B23A1B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6C12 4 24 8 36 15M29.5 16.5L36 15L33 9'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
@media (max-width: 999px) {
  .sk[data-zustand="fehler"] .sk-buehne-spalte { order: 2; }
  .sk[data-zustand="fehler"] .sk-umriss-bild { width: min(130px, 36vw); }
}
.sk[data-zustand="fehler"] .sk-umriss-notiz { display: none; }
/* Lädt: drei Bleistiftlinien zeichnen sich einmal ruhig in den leeren Schirm und bleiben stehen (nur mit Bewegung, keine Schleife) */
@media (prefers-reduced-motion: no-preference) {
  .sk[data-zustand="laedt"] .sk-umriss-laden { stroke-opacity: .7; stroke-dasharray: 1 2; animation: sk-zeichnen 900ms var(--ease-inout) both; }
  .sk[data-zustand="laedt"] .sk-umriss-laden + .sk-umriss-laden { animation-delay: 260ms; }
  .sk[data-zustand="laedt"] .sk-umriss-laden + .sk-umriss-laden + .sk-umriss-laden { animation-delay: 520ms; }
}

/* Zustände */
.sk[data-zustand="fertig"] .sk-umriss { display: none; }
.sk:not([data-zustand="fertig"]) [data-sk-nur="fertig"] { display: none; }
.sk:is([data-zustand="leer"], [data-zustand="laedt"]) .sk-titel {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sk-wartet .sk-buehne, .sk-wartet .sk-ergebnis { opacity: .5; transition: opacity 240ms var(--ease-aus); }

/* Fehler: Meldungskarte neben dem Umriss */
.sk[data-zustand="fehler"] .sk-text {
  align-self: center; padding: 22px 22px 24px; border-radius: 24px; background: var(--weiss);
  border: 1px solid var(--linie); box-shadow: var(--schatten);
}
@media (min-width: 600px) { .sk[data-zustand="fehler"] .sk-text { padding: 30px 32px 30px; } }
.sk-meldung-text { margin-top: 12px; max-width: 34em; font-size: 17px; line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
.sk-wege { margin-top: 22px; display: grid; gap: 10px; }
@media (min-width: 600px) { .sk-wege { display: flex; flex-wrap: wrap; } }
.sk-weg[hidden] { display: none; }

/* Ergebnis-Text */
.sk-eyebrow { margin-bottom: 10px; }
.sk-titel {
  font-family: var(--titel); font-weight: 700; font-stretch: 96%; font-size: 30px; line-height: 1.06; letter-spacing: -.03em;
  text-wrap: balance; overflow-wrap: anywhere;
}
@media (min-width: 600px) { .sk-titel { font-size: clamp(32px, 3.4vw, 46px); } }
.sk[data-zustand="fehler"] .sk-titel { font-size: clamp(26px, 2.6vw, 34px); }
.sk-titel:focus { outline: none; }
.sk-unter { margin-top: 10px; max-width: 36em; font-size: 16px; line-height: 1.5; color: var(--stein); text-wrap: pretty; }
.sk-unter span { overflow-wrap: anywhere; }
.sk-gefunden { margin-top: 24px; border-top: 1px solid var(--linie); }
.sk-gefunden > div { display: grid; grid-template-columns: 9.6em minmax(0, 1fr); column-gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.sk-gefunden dt { font-size: 16px; line-height: 1.45; color: var(--stein); }
.sk-gefunden dd { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--tinte); overflow-wrap: anywhere; }
.sk-gefunden dd.sk-leer { font-weight: 400; color: var(--stein); }
@media (max-width: 359px) { .sk-gefunden > div { grid-template-columns: minmax(0, 1fr); } .sk-gefunden dt { font-size: 14px; } }
.sk-farbfeld { display: inline-block; width: 1em; height: 1em; margin-right: 8px; border-radius: 4px; vertical-align: -.15em; background: var(--sk-c, var(--tinte)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.sk-notizen-titel { margin-top: 34px; font: 700 22px/1.2 var(--titel); letter-spacing: -.015em; }
.sk-notizen { margin-top: 14px; display: grid; gap: 18px; counter-reset: sk-n; }
.sk-notiz { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; counter-increment: sk-n; }
.sk-notiz::before {
  content: counter(sk-n); content: counter(sk-n) / ""; grid-row: span 2;
  width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--rotstift);
  font: 650 13px/23px var(--text); text-align: center; color: var(--rotstift);
}
.sk-notiz-kurz { font-family: var(--text); font-weight: 650; font-size: 17.5px; line-height: 1.3; color: var(--tinte); }   /* Handschrift nur noch für «Ziehen Sie den Roller.» (eine Stelle je Bildschirm) */
.sk-notiz-lang { font-size: 16.5px; line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }
.sk-aktion { margin-top: 30px; padding: 22px 22px 14px; border-radius: var(--radius); background: var(--sand); }
@media (min-width: 600px) { .sk-aktion { padding: 26px 28px 16px; } }
.sk-aktion-titel { font: 700 22px/1.2 var(--titel); letter-spacing: -.015em; text-wrap: balance; }
.sk-aktion p { margin-top: 6px; font-size: 16.5px; line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }
.sk-aktion-knopf { margin-top: 16px; }
.sk-aktion .sk-aktion-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 26px; margin-top: 6px; }
.sk-textknopf {
  min-height: 44px; padding: 10px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--tinte);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
@media (hover: hover) { .sk-textknopf:hover { color: var(--orange-text); } }

/* === Das Handy: «heute» unten, darüber Pauspapier, Bauplan, Farbe und die Skizze («neu») === */
.sk-buehne { --sk-b: min(300px, 76vw); margin: 0; display: grid; justify-items: center; }
.sk-buehne[hidden] { display: none; }
.handy:is(.sk-handy, .sk-druck-handy) { --b: var(--sk-b); }
.sk-etiketten { display: flex; justify-content: space-between; width: var(--sk-b); margin: 0 0 10px; padding-inline: 4px; font: 650 12.5px/1 var(--text); letter-spacing: .07em; text-transform: uppercase; color: var(--stein); }
.sk-heute-etikett { max-width: calc(var(--sk-b) + 60px); margin-top: 14px; font-size: 14px; line-height: 1.45; text-align: center; color: var(--tinte-2); text-wrap: balance; }
.sk-roller-notiz { order: -1; align-self: end; justify-self: end; margin: 0 0 6px; font: 560 22px/1.05 var(--notiz); color: var(--rotstift); visibility: hidden; opacity: 0; }
.sk-buehne.hat-roller .sk-roller-notiz { visibility: visible; opacity: 1; transition: opacity 240ms var(--ease-aus); }
@media (min-width: 1000px) { .sk-roller-notiz { order: 0; justify-self: center; margin: 4px 0 0; } .sk-heute-etikett { order: -1; } .sk-handy, .sk-etiketten { order: -2; } }

.sk-schirm, .sk-druck-schirm { background: #fff; }
.sk-schirm::before, .sk-druck-schirm::before { display: none; }
.sk-heute, .sk-pauspapier, .sk-farbe, .sk-neu { position: absolute; inset: 0; display: block; }
.sk-heute::before, .sk-neu::before {
  content: "9:41"; content: "9:41" / ""; position: absolute; z-index: 3; inset: 0 0 auto 0; height: var(--status-h);
  padding: calc(var(--b) * .05) 0 0 calc(var(--b) * .1);
  font-family: var(--text); font-weight: 650; font-size: calc(var(--b) * .042); line-height: 1; letter-spacing: -.01em; color: #111;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 12'%3E%3Cg fill='%23111'%3E%3Crect x='0' y='7' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='5' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3' width='3' height='8' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='10' rx='.8'/%3E%3Cpath d='M28 3.2a9 9 0 0 1 11.6 0l-1.3 1.4a7 7 0 0 0-9 0zM30.4 5.8a5.3 5.3 0 0 1 6.8 0l-1.3 1.4a3.4 3.4 0 0 0-4.2 0zM33.8 10.6l-1.7-1.8a2.4 2.4 0 0 1 3.4 0z'/%3E%3Crect x='44' y='1.2' width='19' height='9.6' rx='2.6' fill='none' stroke='%23111' stroke-opacity='.4'/%3E%3Crect x='45.6' y='2.8' width='14.4' height='6.4' rx='1.4'/%3E%3Crect x='63.8' y='4.2' width='1.6' height='3.6' rx='.8' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E")
      right calc(var(--b) * .085) top calc(var(--b) * .05) / calc(var(--b) * .2) auto no-repeat,
    var(--sk-chrom, #F4F4F4);
}
.sk-neu::before { --sk-chrom: var(--sk-status, #F2EDE5); }
.sk-heute { z-index: 1; overflow: hidden; background: #E8E6E1; }
.sk-neu { z-index: 5; background: var(--sk-status, #F2EDE5); -webkit-clip-path: inset(0 calc((100 - var(--wert, 100)) * 1%) 0 0); clip-path: inset(0 calc((100 - var(--wert, 100)) * 1%) 0 0); }
.sk-neu .mini-tel { color: var(--sk-tel, var(--m-knopf)); }
.sk-neu .mini-status { padding-right: calc(1.25em + 10px); }   /* Roller bei 100: die Walze steht am rechten Rand, die Nummer bleibt frei */
.sk-neu .mini-titel.ist-lang { font-size: 1.75em; }
.sk-neu .mini-titel.ist-sehr-lang { font-size: 1.4em; }
.sk-neu .mini-titel { overflow-wrap: anywhere; }
.sk-pauspapier, .sk-bauplan, .sk-farbe { display: none; }
.sk-pauspapier {
  z-index: 2; top: var(--status-h); background-color: rgba(250, 248, 245, .86);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)' opacity='.18'/%3E%3C/svg%3E");
}
.sk-bauplan { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--graphit); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .88; }
.sk-farbe {
  z-index: 4; background-color: var(--pinsel);
  background-image:
    repeating-linear-gradient(0deg, rgba(150, 34, 8, .16) 0 1px, transparent 1px 5px, rgba(255, 214, 196, .10) 5px 6px, transparent 6px 11px),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(150, 34, 8, .09) 3px 4px, transparent 4px 13px),
    linear-gradient(180deg, #E4431C 0%, #EE5630 46%, #E94A24 100%);
}

/* «Heute»: schematisch, aus den gefundenen Angaben gezeichnet (kein Bildschirmfoto) */
.sk-adresse {
  position: absolute; z-index: 2; left: 4%; right: 4%; top: calc(var(--status-h) + var(--b) * .012); height: calc(var(--b) * .085);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--b) * .014); padding: 0 calc(var(--b) * .03);
  border-radius: 999px; background: #EDEDED; color: #202124;
  font: 500 calc(var(--b) * .037)/1 Arial, Helvetica, sans-serif; white-space: nowrap; overflow: hidden;
}
.sk-heute-chrom { position: absolute; z-index: 1; inset: 0 0 auto 0; height: calc(var(--status-h) + var(--b) * .11); background: #F4F4F4; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.sk-adresse-zeichen { flex: none; width: 1.1em; height: 1.1em; background: center / contain no-repeat; }
.sk-adresse.ist-sicher .sk-adresse-zeichen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6368' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8.5 10.5V7.5a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E"); }
.sk-adresse:not(.ist-sicher) .sk-adresse-zeichen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6368' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.6v.2'/%3E%3C/svg%3E"); }
.sk-adresse-warnung { flex: none; color: #5F6368; font-weight: 700; }
.sk-adresse-warnung::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: calc(var(--b) * .014); vertical-align: -.15em; background: #BDC1C6; }
.sk-adresse-domain { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sk-heute-flaeche { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; top: calc(var(--status-h) + var(--b) * .11); overflow: hidden; }
.sk-seite-heute { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; transform: scale(var(--sk-skala, .28)); color: #333; background: #fff; text-align: left; }
.sk-seite-heute span, .sk-seite-heute b, .sk-seite-heute i { display: block; font-style: normal; }
/* ohne Viewport: eine Seite für den Bildschirm im Büro, 980 px breit, aufs Handy verkleinert */
.sk-desktop { width: 980px; font: 14px/1.4 Arial, Helvetica, sans-serif; }
.sk-d-kopf { display: flex !important; align-items: center; gap: 22px; min-height: 120px; padding: 28px 40px; background: var(--sk-h, #6E7B8B); color: var(--sk-h-text, #fff); }
.sk-d-logo { flex: none; width: 64px; height: 64px; border-radius: 6px; background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.sk-d-name { font: bold 34px/1.1 Georgia, "Times New Roman", serif; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sk-d-nav { display: flex !important; gap: 6px; padding: 10px 40px; background: #DDD; }
.sk-d-nav i { width: 110px; height: 26px; background: #BBB; }
.sk-d-spalten { display: grid !important; grid-template-columns: 220px 1fr; gap: 30px; padding: 30px 40px 40px; }
.sk-d-spalten b { height: 12px; margin: 0 0 14px; background: #CCC; }
.sk-d-spalten b.sk-kurz { width: 62%; }
.sk-d-spalten b.sk-titel-zeile { height: 26px; width: 58%; margin-bottom: 22px; background: #9A9A9A; }
.sk-d-kasten { margin-bottom: 26px; padding: 12px; border: 1px solid #C9C9C9; background: #F6F6F6; }
.sk-d-bild { height: 260px; margin: 6px 0 24px; background: repeating-linear-gradient(45deg, #DDD 0 8px, #E8E8E8 8px 16px); }
.sk-d-fuss { padding: 22px 40px; background: #EEE; font-size: 13px; color: #555; }
/* mit Viewport: eine einfache Handy-Seite, 390 px breit */
.sk-mobil { width: 390px; font: 15px/1.45 Arial, Helvetica, sans-serif; }
.sk-m-kopf { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; min-height: 66px; padding: 12px 18px; background: var(--sk-h, #6E7B8B); color: var(--sk-h-text, #fff); }
.sk-m-name { font: bold 21px/1.15 Arial, Helvetica, sans-serif; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sk-m-menue { flex: none; width: 26px; height: 18px; border-block: 3px solid currentColor; position: relative; }
.sk-m-menue::after { content: ""; position: absolute; left: 0; right: 0; top: 4.5px; height: 3px; background: currentColor; }
.sk-m-bild { height: 210px; background: repeating-linear-gradient(45deg, #DDD 0 8px, #E8E8E8 8px 16px); }
.sk-m-inhalt { padding: 22px 18px 26px; }
.sk-m-inhalt b { height: 11px; margin: 0 0 13px; background: #CCC; }
.sk-m-inhalt b.sk-kurz { width: 64%; }
.sk-m-inhalt b.sk-titel-zeile { height: 22px; width: 82%; margin-bottom: 18px; background: #9A9A9A; }
.sk-m-knopf { width: 60%; height: 44px; margin-top: 22px; border-radius: 6px; background: #BDBDBD; }
.sk-m-fuss { padding: 18px; background: #EEE; font-size: 14px; color: #555; }

/* === Moment 1: «heute» erscheint, Pauspapier, Bleistift-Bauplan, dann malt der Pinsel die Skizze frei (einmal je Ergebnis) === */
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .sk-bereit .sk-neu { visibility: hidden; }   /* bis zum Start von Moment 1 steht nur «heute» da */
  .sk-malt :is(.sk-pauspapier, .sk-bauplan, .sk-farbe) { display: block; }
  .sk-malt .sk-pauspapier { animation: sk-ein 300ms var(--ease-aus) 300ms both; }
  .sk-malt .sk-bauplan path { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; animation: sk-zeichnen 520ms var(--ease-inout) both; }
  .sk-malt :is(.sk-farbe, .sk-neu) {
    -webkit-mask-image: url("img/pinsel-quer-a-v2.svg"), url("img/pinsel-quer-b-links-v2.svg"), url("img/pinsel-quer-c-v2.svg");
    mask-image: url("img/pinsel-quer-a-v2.svg"), url("img/pinsel-quer-b-links-v2.svg"), url("img/pinsel-quer-c-v2.svg");
    -webkit-mask-size: 200% 46%; mask-size: 200% 46%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 140% -5%, -40% 52%, 140% 105%; mask-position: 140% -5%, -40% 52%, 140% 105%;
    will-change: mask-position;
  }
  .sk-malt .sk-farbe { animation: g-pinsel-farbe 4000ms var(--ease-inout) -20ms both; }
  .sk-malt .sk-neu { animation: g-pinsel-neu 4000ms var(--ease-inout) -20ms both; }
  .sk-buehne.hat-roller .nw-roller { animation: sk-ein 240ms var(--ease-aus) both; }
  .sk-handy.hat-roller:not(.ist-zieht) .sk-neu { transition: clip-path 240ms var(--ease-aus), -webkit-clip-path 240ms var(--ease-aus); }
  .sk-handy.hat-roller:not(.ist-zieht) .nw-roller { transition: left 240ms var(--ease-aus); }
}
@keyframes sk-ein { from { opacity: 0; } }
@keyframes sk-zeichnen { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }

/* Moment 2: Farbroller (Regeln .nw-roller-* in seite.css); links die Skizze, rechts heute */
.sk-handy.hat-roller { touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: ew-resize; }

/* === Was wir nicht tun, für Website-Betreiber === */
.sk-nicht { margin-top: clamp(34px, 4vw, 52px); max-width: 44rem; }
.sk-nicht-titel { font-family: var(--titel); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -.015em; }
.sk-nicht .sv-liste { margin-top: 14px; display: grid; gap: 8px; }
.sk-betreiber { margin-top: clamp(30px, 3.5vw, 44px); max-width: 52rem; }
.sk-betreiber .frage { background: var(--weiss); }

/* === Druck: Ergebnis ohne Roller, beide Handys nebeneinander === */
.sk-druck { display: none; }
@media print {
  .sk-karte-platz, .sk-umriss, .sk-roller-notiz, .nw-roller, .sk-aktion, .sk-wege, .sk-status { display: none !important; }
  .sk { padding: 0; }
  .sk[data-zustand="leer"], .sk[data-zustand="laedt"] { display: none; }
  .sk-raster { display: block; }
  .sk-buehne { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10mm; --sk-b: 62mm; }
  .sk-etiketten { display: grid; flex-basis: 100%; grid-template-columns: var(--sk-b) var(--sk-b); justify-content: center; column-gap: 10mm; width: auto; margin-bottom: 3mm; text-align: center; color: #000; }
  .sk-pauspapier, .sk-bauplan, .sk-farbe { display: none !important; }
  .sk-neu { -webkit-clip-path: none !important; clip-path: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .sk-druck { display: block; }
  .sk-desktop { --sk-skala: .2248 !important; }   /* Druckbreite 62 mm: Schirm 220 px / 980 */
  .sk-mobil { --sk-skala: .5648 !important; }     /* 220 px / 390 */
  .sk-heute-etikett { flex-basis: 100%; }
  .sk-handy, .sk-druck-handy, .sk-farbfeld { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }   /* sonst druckt Chrome ohne «Hintergrundgrafiken» leere Handys */
  .sk-titel, .sk-notiz-kurz, .sk-notiz::before { color: #000 !important; border-color: #000 !important; }
  .sk-text { margin-top: 8mm; max-width: none; }
}

/* === Hoher Kontrast (forced-colors): Skizze in Systemfarben, Roller mit Rahmen === */
@media (forced-colors: active) {
  .sk-karte, .sk-aktion, .sk[data-zustand="fehler"] .sk-text { border: 1px solid CanvasText; }
  .sk-umriss-striche { stroke: CanvasText; }
  .sk-umriss-notiz, .sk-notiz-kurz, .sk-roller-notiz { color: CanvasText; }
  .sk-notiz::before { border-color: CanvasText; color: CanvasText; }
  .sk-heute::before, .sk-neu::before { forced-color-adjust: none; }
  .sk-farbfeld { forced-color-adjust: none; border: 1px solid CanvasText; }
  .sk-d-kopf, .sk-m-kopf, .sk-adresse { border: 1px solid CanvasText; }
  .sk-d-nav i, .sk-d-spalten b, .sk-m-inhalt b, .sk-m-knopf, .sk-d-bild, .sk-m-bild { forced-color-adjust: none; background: GrayText; }
}