/* Selbstwertfabrik – Coming soon 0.3.1
   Palette 3 · Creme und Beere: Fläche Eukalyptus (Standard) oder 3a Petroltürkis (Einstellung), Grund 4d Creme, Kicker/Strich 3a Petroltürkis. Beere nur als Signalfarbe (Knopf „Mehr über Nadine“). */
:root{
  --swf-flaeche:#5B7B73;     /* große Fläche: Eukalyptus */
  --swf-glow:rgba(91,123,115,.55);
  --swf-petrol:#2F6B6A;      /* 3a Petroltürkis: Kicker, Strich, Fokus */
  --swf-creme:#F1E6D4;       /* 4d Creme: heller Grund, Schrift auf Petrol */
  --swf-tinte:#1E2926;       /* Text */
  --swf-beere:#8E1F3A;       /* 2e Beere: nur Signal (Knöpfe) */
  --swf-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --swf-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
}
.swf-cs--petrol{--swf-flaeche:#2F6B6A;--swf-glow:rgba(47,107,106,.55)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--swf-creme);color:var(--swf-tinte);font-family:var(--swf-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
.swf-cs{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr 1fr} /* Raster: zwei gleich breite Hälften */

/* Linke Fläche: Eukalyptus mit eingearbeitetem Foto und Wortmarke */
.swf-cs__marke{position:relative;overflow:hidden;background:var(--swf-flaeche);display:flex;align-items:center;justify-content:center;padding:60px clamp(24px,4vw,60px)}
.swf-cs__foto{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:40% 26%}
.swf-cs__foto::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 30% at 50% 52%,var(--swf-glow) 0%,transparent 100%)}

/* Desktop: linke Fläche bleibt beim Scrollen stehen und füllt immer genau das Fenster – so bleibt die Wortmarke mittig */
@media (min-width:821px){.swf-cs__marke{position:sticky;top:0;align-self:start;height:100vh;height:100dvh}}

/* Wortmarke Form 2 (nebeneinander): Rahmen oben auf Oberlänge von „Selbstwert“, unten auf Grundlinie von „FABRIK“ */
.swf-cs__wortmarke{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.32em;color:var(--swf-creme);text-decoration:none;font-size:clamp(40px,5.6vw,72px)} /* wächst mit der Fensterbreite, damit sie nie aus der Fläche ragt */
.swf-cs__links{display:flex;flex-direction:column;align-items:flex-end}
.swf-cs__it{font-family:var(--swf-serif);font-style:italic;font-weight:400;font-size:1em;line-height:.9}
.swf-cs__ar{font-family:var(--swf-sans);font-weight:700;font-variation-settings:"wdth" 78;text-transform:uppercase;font-size:.625em;letter-spacing:.05em;line-height:1;margin-top:.06em}
.swf-cs__rahmen{font-family:var(--swf-sans);font-weight:700;font-variation-settings:"wdth" 78;text-transform:uppercase;font-size:.344em;letter-spacing:.07em;line-height:1.25;white-space:nowrap;
  align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:0 .7em;margin:.12em 0 .22em;border-radius:.45em;box-shadow:inset 0 0 0 1.5px currentColor}

/* Rechte Fläche mit Text */
.swf-cs__text{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:80px 90px;max-width:720px}
.swf-cs__kicker{margin:0;font-weight:600;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:var(--swf-petrol)}
/* Überschrift im Wechsel: fette schmale Versalien und Kursiv */
.swf-cs__h1{margin:0;font-family:var(--swf-serif);font-style:italic;font-weight:400;font-size:clamp(36px,3.9vw,54px);line-height:1.1;text-wrap:balance}
.swf-cs__v{font-family:var(--swf-sans);font-style:normal;font-weight:700;font-variation-settings:"wdth" 78;text-transform:uppercase;font-size:.8em;letter-spacing:.03em}
.swf-cs__k{font-family:var(--swf-serif);font-style:italic}
.swf-cs__h1--klein{font-size:clamp(34px,3.4vw,46px)}
.swf-cs__strich{display:block;width:64px;height:4px;background:var(--swf-petrol)}
.swf-cs__p{margin:0;font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;max-width:38ch}
.swf-cs__knopf-zeile{margin:6px 0 2px}
.swf-cs__knopf{display:inline-block;background:var(--swf-beere);color:var(--swf-creme);font-family:var(--swf-sans);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:15px 24px;border-radius:10px;transition:background-color .2s}
.swf-cs__knopf:hover{background:#731830}
.swf-cs__knopf:focus-visible{outline:3px solid var(--swf-petrol);outline-offset:3px}
.swf-cs__wer{margin:0;font-size:13.5px;line-height:1.5;opacity:.75;max-width:44ch}
.swf-cs__fuss{margin:22px 0 0;font-size:12.5px;letter-spacing:.3px;opacity:.75}
.swf-cs__inhalt{font-size:16px;line-height:1.6;max-width:62ch}
.swf-cs__inhalt h2,.swf-cs__inhalt h3{font-family:var(--swf-sans);font-weight:700;font-size:16px;margin:1.4em 0 .4em}
.swf-cs a:focus-visible{outline:3px solid var(--swf-petrol);outline-offset:3px}
.swf-cs__wortmarke:focus-visible{outline-color:var(--swf-creme)}

/* Handy: Fläche mit Foto oben, Text darunter */
@media (max-width:820px){
  .swf-cs{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .swf-cs__marke{padding:56px 22px;min-height:520px}
  .swf-cs__wortmarke{font-size:44px}
  .swf-cs__text{padding:40px 24px 48px;justify-content:flex-start}
}
@media (max-width:380px){.swf-cs__wortmarke{font-size:38px}}

/* Umschalter Eukalyptus/Petrol – nur für Admins in der Vorschau */
.swf-cs__umschalter{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 14px rgba(0,0,0,.14);font-family:var(--swf-sans);font-size:12.5px}
.swf-cs__umschalter span{padding:0 8px 0 10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:#55605c}
.swf-cs__umschalter a{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;text-decoration:none;color:var(--swf-tinte);font-weight:600}
.swf-cs__umschalter a:hover{background:rgba(0,0,0,.06)}
.swf-cs__umschalter a[aria-current]{background:var(--swf-tinte);color:#fff}
.swf-cs__umschalter i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.8)}