/* Seite „Ihre Seite skizzieren“ (/skizze/) – die Werkbank. Baut auf basis.css und a.css auf.
   Die Werkbank ist eine dunkle Arbeitsfläche; Gloock wird nur für den Stil „Klassisch“ der Skizze gebraucht. */
@font-face { font-family: "Gloock"; src: url("../fonts/gloock-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root { --nacht: #10302A; --nacht-2: #0B231E; --nacht-3: #163B33; --font-serif: "Gloock", Georgia, serif; }
.dunkel { background: var(--nacht); color: var(--kalk); --text: var(--kalk); --muted: #B9D6D1; --accent: var(--tuerkis-hell); --line: rgba(116, 211, 204, .25); --focus: var(--abend-hell); --bg-alt: var(--nacht-3); }
[data-nur-js][hidden] { display: none !important; }
.l-schirm:focus-visible { outline: 3px solid var(--abend-hell); outline-offset: 3px; }

/* Die Werkbank steht direkt unter der Kopfzeile (wie das Kopfbild auf den anderen Seiten) */
.seite-skizze .l-werkbank { margin-top: -5rem; padding-top: clamp(7.5rem, 12vw, 9.5rem); }
.l-werkbank h1 { margin-top: 1rem; font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -.03em; color: var(--kalk); }
.l-werkbank .eyebrow { color: rgba(255, 255, 255, .9); }

/* Werkbank */
.l-werkbank { padding-block: clamp(3.5rem, 7vw, 5.5rem); background:
  linear-gradient(rgba(116, 211, 204, .05) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(90deg, rgba(116, 211, 204, .05) 1px, transparent 1px) 0 0 / 28px 28px, var(--nacht-2); }
.l-bank { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 64rem) { .l-bank { grid-template-columns: minmax(20rem, 26rem) 1fr; gap: 3.5rem; } }
.l-schritt { padding-block: 1.1rem; border-top: 1px solid var(--line); }
.l-schritt:first-child { border-top: 0; padding-top: 0; }
.l-frage { display: block; font-weight: 700; margin-bottom: .7rem; }
.l-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.l-chip { font: 600 .9063rem var(--font-body); min-height: 2.5rem; padding: .45rem .9rem; border-radius: 999px; border: 1.5px solid rgba(245, 243, 238, .3); background: transparent; color: var(--kalk); cursor: pointer; transition: background-color .15s, border-color .15s; }
.l-chip:hover { border-color: var(--tuerkis-hell); }
.l-chip[aria-pressed="true"] { background: var(--tuerkis-hell); border-color: var(--tuerkis-hell); color: var(--nacht); }
.l-farben { display: flex; flex-wrap: wrap; gap: 1rem 1.1rem; }
.l-farben button { display: grid; justify-items: center; gap: .3rem; padding: 0; border: 0; background: none; color: var(--muted); font: 600 .75rem var(--font-body); cursor: pointer; }
.l-farben i { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 3px solid transparent; outline: 1px solid rgba(245, 243, 238, .25); }
.l-farben button[aria-pressed="true"] i { border-color: var(--kalk); }
.l-farben button[aria-pressed="true"] { color: var(--kalk); }
.l-nutzen { margin-top: 1.25rem; padding: 1.1rem 1.25rem; border-radius: 12px; background: rgba(116, 211, 204, .08); border: 1px solid rgba(116, 211, 204, .22); }
.l-nutzen h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 750; margin-bottom: .6rem; }
.l-nutzen ul { list-style: none; padding: 0; display: grid; gap: .4rem; font-size: .9375rem; }
.l-nutzen li { position: relative; padding-left: 1.4rem; }
.l-nutzen li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .8rem; height: .45rem; border-left: 2px solid var(--tuerkis-hell); border-bottom: 2px solid var(--tuerkis-hell); transform: rotate(-45deg); }
.l-nutzen a { color: var(--tuerkis-hell); font-weight: 650; }
.l-abschluss { margin-top: 1.5rem; padding: 1.25rem; border-radius: 12px; background: var(--abend); color: #1B1A16; }
.l-abschluss p { font-weight: 700; margin-bottom: .9rem; }
.l-abschluss .actions { margin-top: 0; }
.l-abschluss .btn { min-height: 2.9rem; font-size: 1rem; }
.l-abschluss .btn-primary { background: var(--nacht); color: var(--kalk); }
.l-abschluss .btn-primary:hover { background: var(--tanne); }
.l-abschluss .btn-secondary { border-color: #1B1A16; color: #1B1A16; }
.l-abschluss .btn-secondary:hover { background: #1B1A16; color: var(--abend); }

/* Bühne mit Laptop und Handy */
.l-buehne { position: relative; padding-bottom: 2.5rem; }
@media (min-width: 64rem) { .l-buehne { position: sticky; top: 1.5rem; } }
.l-laptop { position: relative; margin-right: 4.5rem; background: #1f2326; border-radius: 14px 14px 4px 4px; padding: 12px 12px 18px; box-shadow: 0 0 0 1px rgba(116, 211, 204, .18), 0 40px 80px -30px rgba(0, 0, 0, .7); }
.l-laptop .l-schirm { height: clamp(18rem, 44vh, 30rem); }
.l-sockel { height: 14px; margin: 0 2.5rem 0 -1.5rem; background: linear-gradient(#d9dcde, #a8adb1); border-radius: 0 0 14px 14px; }
.l-handy { position: absolute; right: 0; bottom: 0; width: clamp(8.5rem, 22%, 11.5rem); background: #1f2326; border-radius: 26px; padding: 9px; box-shadow: 0 24px 46px -18px rgba(0, 0, 0, .7); }
.l-handy .l-schirm { aspect-ratio: 9 / 18.5; border-radius: 18px; }
.l-schirm { overflow: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: 4px; background: #fff; container-type: inline-size; }
.l-schirm::-webkit-scrollbar { display: none; }
.l-schirm > img { width: 100%; }
.l-protokoll { list-style: none; padding: 0; margin-top: 1.5rem; min-height: 6.5em; font-size: .875rem; color: var(--muted); }
.l-protokoll li { display: flex; gap: .6rem; padding: .15rem 0; }
.l-protokoll li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .5em; border-radius: 50%; background: var(--tuerkis-hell); }
.l-protokoll li:first-child { color: var(--kalk); font-weight: 600; }
.l-protokoll li:first-child::before { background: var(--abend); box-shadow: 0 0 0 4px rgba(235, 169, 79, .25); }
.l-notiz { margin-top: .75rem; font-size: .8125rem; color: var(--muted); }
@media (max-width: 40rem) { .l-laptop { margin-right: 2.5rem; } .l-laptop .l-schirm { height: 17rem; } .l-handy { width: 8.25rem; } }

/* Hinweis: alles nur Vorschläge */
.l-vorschlag { position: relative; display: grid; gap: .4rem; margin: -.75rem 0 clamp(2rem, 4vw, 2.75rem); padding: 1.1rem 1.25rem 1.15rem 3.6rem; max-width: 52rem; border: 1.5px dashed var(--abend); border-radius: 14px; background: rgba(235, 169, 79, .1); }
.l-vorschlag::before { content: "!"; position: absolute; left: 1.15rem; top: 1.05rem; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--abend); color: #1B1A16; font-weight: 800; font-size: 1rem; line-height: 1; }
.l-vorschlag-titel { font-weight: 750; font-size: 1.0625rem; color: var(--abend-hell); }
.l-vorschlag p + p { color: var(--kalk); font-size: .9688rem; }
.l-stempel { position: absolute; z-index: 2; left: 1.1rem; top: -.95rem; padding: .3rem .8rem; border-radius: 6px; background: var(--abend); color: #1B1A16; font-weight: 750; font-size: .8125rem; letter-spacing: .02em; transform: rotate(-2.5deg); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.l-frage small { font-weight: 500; color: var(--muted); }
.l-wunsch { all: unset; display: inline-block; margin-top: .7rem; cursor: pointer; font-weight: 650; font-size: .9375rem; color: var(--abend-hell); text-decoration: underline dashed; text-underline-offset: .25em; }
.l-wunsch:hover { color: var(--kalk); }
.l-wunsch:focus-visible, .l-stile button:focus-visible { outline: 3px solid var(--abend-hell); outline-offset: 2px; }

/* Stil-Auswahl mit kleinen Mustern */
.l-stile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.l-stile button { display: grid; align-content: start; gap: .1rem; padding: .5rem .55rem .65rem; border: 1.5px solid rgba(245, 243, 238, .3); border-radius: 12px; background: transparent; color: var(--kalk); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, border-color .15s; }
.l-stile button:hover { border-color: var(--tuerkis-hell); }
.l-stile button[aria-pressed="true"] { border-color: var(--tuerkis-hell); background: rgba(116, 211, 204, .14); box-shadow: inset 0 0 0 1px var(--tuerkis-hell); }
.l-stile strong { margin-top: .4rem; font-size: .9375rem; line-height: 1.3; }
.l-stile small { font-size: .78rem; line-height: 1.35; color: var(--muted); }
.l-mini { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .3rem; height: 3.6rem; padding: .45rem .6rem; border-radius: 7px; background: #FCFBF8; color: #1C2427; overflow: hidden; }
.l-mini b { font-size: 1.15rem; line-height: 1; }
.l-mini i { display: block; height: .4rem; width: 2rem; border-radius: 2px; background: var(--tuerkis); }
.l-mini-klassisch { align-items: center; background: #F6F0E2; box-shadow: inset 0 0 0 3px #F6F0E2, inset 0 0 0 4px #B9A47E; }
.l-mini-klassisch b { font-family: var(--font-serif); font-weight: 400; }
.l-mini-klassisch i { width: 1.8rem; height: 1px; background: #1C2427; box-shadow: 0 3px 0 #1C2427; }
.l-mini-modern { background: linear-gradient(135deg, #1D5C58, #2E8C86); color: #fff; border-radius: 10px; }
.l-mini-modern b { font-weight: 800; letter-spacing: -.05em; }
.l-mini-modern i { width: 2.1rem; border-radius: 999px; background: var(--abend); }
.l-mini-serioes { padding-top: .95rem; }
.l-mini-serioes::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .5rem; background: #1C2427; }
.l-mini-serioes b { font-weight: 750; font-size: 1rem; padding-left: .4rem; border-left: 3px solid var(--tuerkis); }
.l-mini-serioes i { width: 1.6rem; border-radius: 0; background: #1C2427; }
.l-mini-minimal { padding-left: .9rem; }
.l-mini-minimal b { font-weight: 300; font-size: 1rem; letter-spacing: -.03em; }
.l-mini-minimal i { width: 1.4rem; height: 1px; background: #1C2427; }

/* eigene Texte */
.l-texte { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem .8rem; }
.l-texte label { font-size: .9375rem; font-weight: 650; }
.l-texte input { min-width: 0; min-height: 2.75rem; padding: .5rem .75rem; border: 1.5px solid rgba(245, 243, 238, .5); border-radius: 8px; background: var(--nacht); color: var(--kalk); font: 500 1rem var(--font-body); }
.l-texte input::placeholder { color: #8FB0AA; }

/* Abschluss mit „Skizze schicken“ */
.l-senden { width: 100%; margin-bottom: .75rem; font: inherit; font-weight: 650; cursor: pointer; }
.l-abschluss .actions .btn { flex: 1 1 8rem; }

/* Fenster „Skizze per E-Mail schicken“ */
.l-fenster-offen { overflow: hidden; }
.l-dialog { width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: 16px; background: var(--kalk); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
  --text: var(--ink); --muted: #4A575D; --focus: var(--tuerkis); }
.l-dialog::backdrop { background: rgba(6, 22, 19, .75); }
.l-dialog-innen { padding: clamp(1.25rem, 4vw, 2rem); }
.l-dialog-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.l-dialog h2 { font-family: var(--font-head); font-size: clamp(1.5rem, 4vw, 1.9rem); line-height: 1.1; }
.l-zu { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -.4rem -.4rem 0 0; border: 0; border-radius: 50%; background: var(--kalk-2); color: var(--ink); cursor: pointer; }
.l-zu svg { width: 1.25rem; height: 1.25rem; }
.l-zu:hover { background: var(--kalk-3); }
.l-dialog label { display: block; margin: 1rem 0 .35rem; font-weight: 700; }
.l-dialog label small { font-weight: 500; color: var(--muted); }
.l-dialog input, .l-dialog textarea { display: block; width: 100%; padding: .7rem .85rem; border: 1.5px solid #7D8784; border-radius: 8px; background: #fff; color: var(--ink); font: 500 1rem/1.5 var(--font-body); }
.l-dialog textarea { min-height: 6.5rem; resize: vertical; }
.l-dialog .actions { margin-top: 1.25rem; }
.l-dialog .btn { font: inherit; font-weight: 650; cursor: pointer; }
.l-dialog .btn-primary { background: var(--nacht); color: var(--kalk); }
.l-dialog .btn-primary:hover { background: var(--tanne); }
.l-dialog .btn-secondary:hover { background: var(--ink); color: var(--kalk); }
.l-dialog-klein { margin-top: 1rem; font-size: .875rem; color: var(--muted); }
.l-dialog-status:empty { display: none; }
.l-dialog-status { margin-top: .75rem; padding: .7rem .9rem; border-radius: 8px; background: #E1F0EE; font-weight: 600; font-size: .9375rem; }
.l-brief { margin: 1rem 0 0; max-height: 15rem; overflow: auto; padding: .9rem 1rem; border-radius: 10px; background: #fff; border: 1px solid var(--kalk-3); font: 500 .875rem/1.55 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.l-link { all: unset; cursor: pointer; color: var(--tuerkis); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.l-link:focus-visible { outline: 3px solid var(--tuerkis); outline-offset: 2px; }
.l-dialog a:not(.btn) { color: var(--tuerkis); font-weight: 650; }

/* die Skizze in den Bildschirmen. Stimmung = --b/--a/--d (Hintergrund, Akzent, Text);
   das Foto bekommt nur einen neutralen Schatten, damit es seine eigenen Farben behält. */
.sk { --b: #EEF3F2; --a: #1E6E6A; --d: #183B39; font-family: var(--font-body); color: var(--d); background: var(--b); min-height: 100%; font-size: 13px; line-height: 1.45; }
.sk .sk-h4, .sk .sk-h5 { display: block; margin: 0; }
.sk-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; font-size: 14px; }
.sk-nav b { min-width: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-nav span { min-width: 0; font-weight: 500; font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-burger { display: none; flex: none; position: relative; width: 16px; height: 11px; border-block: 2px solid currentColor; }
.sk-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 2.5px; height: 2px; background: currentColor; }
.sk-hero { position: relative; isolation: isolate; padding: 48px 16px 26px; color: #fff; background: #2B2F31; overflow: hidden; }
.sk-hero img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sk-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .1) 90%); }
.sk-hero .sk-h4 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(16px, 7.5cqi, 40px); line-height: 1.05; margin-bottom: 6px; overflow-wrap: break-word; hyphens: auto; }
.sk-hero p { font-size: 12.5px; opacity: .92; max-width: 40ch; }
.sk-cta { display: inline-block; margin-top: 12px; padding: 7px 12px; border-radius: 6px; background: var(--a); color: #fff; font-weight: 700; font-size: 12px; }
.sk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px 16px 20px; }
@container (max-width: 420px) { .sk-grid { grid-template-columns: 1fr; } .sk-nav span { display: none; } .sk-burger { display: block; } }
.sk-blk { position: relative; overflow: hidden; padding: 11px 13px; border-radius: 10px; background: #fff; font-size: 12px; }
.sk-blk .sk-h5 { font-size: 13.5px; margin-bottom: 6px; color: var(--a); }
.sk-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed rgba(0, 0, 0, .12); }
.sk-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 4px; }
.sk-kacheln i { aspect-ratio: 1; border-radius: 5px; background: var(--a); opacity: .25; }
.sk-kacheln i:nth-child(2n) { opacity: .45; }
.sk-btn { display: inline-block; margin-top: 6px; padding: 5px 9px; border-radius: 5px; background: var(--a); color: #fff; font-weight: 700; font-size: 11.5px; }
.sk-fuss { padding: 10px 16px 14px; font-size: 10.5px; opacity: .85; }

/* Stil Klassisch: Serifen, mittig, feine Linien */
.sk-klassisch { font-family: Georgia, "Times New Roman", serif; }
.sk-klassisch .sk-nav { flex-direction: column; gap: 3px; padding: 12px 16px 9px; text-align: center; border-bottom: 3px double color-mix(in srgb, var(--d) 30%, transparent); }
.sk-klassisch .sk-nav b { max-width: 100%; font-family: var(--font-serif); font-weight: 400; font-size: 18px; }
.sk-klassisch .sk-nav span { max-width: 100%; font-style: italic; font-size: 11.5px; }
.sk-klassisch .sk-hero { padding: 54px 20px 30px; text-align: center; }
.sk-klassisch .sk-hero p { margin-inline: auto; font-style: italic; }
.sk-klassisch .sk-cta { padding: 6px 14px; border: 1px solid #fff; border-radius: 1px; background: transparent; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.sk-klassisch .sk-blk { border-radius: 1px; border: 1px solid color-mix(in srgb, var(--a) 28%, transparent); text-align: center; }
.sk-klassisch .sk-blk .sk-h5 { font-family: var(--font-serif); font-weight: 400; font-size: 15.5px; padding-bottom: 5px; margin-bottom: 7px; border-bottom: 1px solid color-mix(in srgb, var(--a) 25%, transparent); }
.sk-klassisch .sk-row { text-align: left; }
.sk-klassisch .sk-btn { border-radius: 1px; }
.sk-klassisch .sk-fuss { text-align: center; font-style: italic; }

/* Stil Modern: große Bildkarte, runde Formen, kräftige Schrift */
.sk-modern .sk-nav b { letter-spacing: -.02em; }
.sk-modern .sk-hero { margin: 0 10px; padding: 70px 18px 22px; border-radius: 18px; }
.sk-modern .sk-hero .sk-h4 { font-family: var(--font-body); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.sk-modern .sk-cta { padding: 8px 15px; border-radius: 999px; }
.sk-modern .sk-grid { gap: 12px; }
.sk-modern .sk-blk { border-radius: 18px; box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .35); }
.sk-modern .sk-blk .sk-h5 { font-weight: 800; letter-spacing: -.01em; }
.sk-modern .sk-kacheln i { border-radius: 10px; }
.sk-modern .sk-btn { border-radius: 999px; padding: 5px 11px; }

/* Stil Seriös: feste Leiste, Text und Bild nebeneinander, gerade Kanten */
.sk-serioes .sk-nav { background: var(--d); color: #fff; padding: 11px 16px; }
.sk-serioes .sk-nav b { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.sk-serioes .sk-hero { display: grid; grid-template-columns: 1fr 1fr; padding: 0; color: var(--d); background: color-mix(in srgb, var(--b) 60%, #fff); border-bottom: 1px solid color-mix(in srgb, var(--d) 15%, transparent); }
.sk-serioes .sk-hero::before { display: none; }
.sk-serioes .sk-hero img { position: relative; inset: auto; z-index: 0; order: 2; min-height: 160px; }
.sk-serioes .sk-text { align-self: center; padding: 24px 16px; }
.sk-serioes .sk-hero .sk-h4 { font-family: var(--font-body); font-weight: 750; letter-spacing: -.015em; font-size: clamp(16px, 5.2cqi, 30px); }
.sk-serioes .sk-hero p { opacity: 1; }
.sk-serioes .sk-cta { border-radius: 2px; }
.sk-serioes .sk-grid { gap: 8px; }
.sk-serioes .sk-blk { border-radius: 2px; border-left: 3px solid var(--a); }
.sk-serioes .sk-blk .sk-h5 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.sk-serioes .sk-kacheln i, .sk-serioes .sk-btn { border-radius: 1px; }
.sk-serioes .sk-fuss { background: var(--d); color: #fff; opacity: 1; }
@container (max-width: 420px) { .sk-serioes .sk-hero { grid-template-columns: 1fr; } .sk-serioes .sk-hero img { order: 0; min-height: 0; aspect-ratio: 16 / 10; } }

/* Stil Minimalistisch: viel Weißraum, Bild als schmales Band, kaum Flächen */
.sk-minimal .sk-nav { padding: 16px 18px; }
.sk-minimal .sk-nav b { font-weight: 600; }
.sk-minimal .sk-hero { display: flex; flex-direction: column; padding: 30px 18px 6px; color: var(--d); background: transparent; }
.sk-minimal .sk-hero::before { display: none; }
.sk-minimal .sk-hero img { position: relative; inset: auto; z-index: 0; order: 2; height: auto; aspect-ratio: 21 / 9; margin-top: 20px; border-radius: 2px; }
.sk-minimal .sk-hero .sk-h4 { font-family: var(--font-body); font-weight: 300; letter-spacing: -.035em; font-size: clamp(18px, 8cqi, 44px); }
.sk-minimal .sk-hero p { margin-bottom: 12px; opacity: 1; }
.sk-minimal .sk-cta { display: inline; margin: 0; padding: 0 0 1px; border-radius: 0; background: none; color: var(--a); border-bottom: 1.5px solid currentColor; }
.sk-minimal .sk-cta::after { content: " →"; }
.sk-minimal .sk-grid { gap: 0 24px; padding: 14px 18px 18px; }
.sk-minimal .sk-blk { padding: 12px 0; border-radius: 0; background: none; border-top: 1px solid color-mix(in srgb, var(--d) 18%, transparent); }
.sk-minimal .sk-blk .sk-h5 { color: var(--d); font-weight: 600; }
.sk-minimal .sk-kacheln i { background: var(--d); opacity: .1; border-radius: 0; }
.sk-minimal .sk-kacheln i:nth-child(2n) { opacity: .18; }
.sk-minimal .sk-btn { padding: 0 0 1px; border-radius: 0; background: none; color: var(--a); border-bottom: 1.5px solid currentColor; }
.sk-minimal .sk-fuss { padding-top: 18px; }

/* sehr schmaler Bildschirm (Handy-Rahmen): alles kleiner, Überschrift so groß, dass ein langes Wort noch passt */
@container (max-width: 200px) {
  .sk { font-size: 9.5px; }
  .sk .sk-nav { gap: 6px; padding: 7px 9px; font-size: 10.5px; }
  .sk-klassisch .sk-nav b { font-size: 12px; }
  .sk .sk-hero .sk-h4 { font-size: min(20px, calc((100cqi - 26px) / 7.8)); letter-spacing: -.01em; }
  .sk .sk-hero p { font-size: 9.5px; }
  .sk .sk-cta { margin-top: 8px; padding: 4px 8px; font-size: 9px; }
  .sk-minimal .sk-cta { margin: 0; padding: 0 0 1px; }
  .sk-minimal .sk-hero p { margin-bottom: 8px; }
  .sk-klassisch .sk-hero, .sk-modern .sk-hero { padding: 34px 8px 14px; }
  .sk-modern .sk-hero { margin: 0 5px; border-radius: 12px; }
  .sk-serioes .sk-text { padding: 12px 9px 14px; }
  .sk-minimal .sk-hero { padding: 18px 9px 4px; }
  .sk-minimal .sk-hero img { margin-top: 12px; }
  .sk .sk-grid { gap: 7px; padding: 9px; }
  .sk .sk-blk { padding: 8px 9px; font-size: 9.5px; }
  .sk-minimal .sk-blk { padding: 8px 0; }
  .sk .sk-blk .sk-h5 { margin-bottom: 4px; font-size: 10.5px; }
  .sk .sk-btn { font-size: 9px; }
  .sk .sk-fuss { padding: 8px 9px 10px; font-size: 9px; }
}
.sk-hero p { overflow-wrap: break-word; hyphens: auto; }

@media (prefers-reduced-motion: no-preference) {
  .sk-neu { animation: sk-wisch .9s cubic-bezier(.3, .7, .2, 1) both; }
  .sk-neu::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(90deg, transparent, rgba(244, 195, 126, .6), transparent); animation: sk-scan .9s ease both; }
  .sk-hero.sk-neu::after { z-index: 1; }
}
@keyframes sk-wisch { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sk-scan { from { left: -30%; } to { left: 110%; } }