/* Selbstwertfabrik – Coming soon 0.4.0
   Palette festgelegt (Nadine, 09.10.2026): Fläche Eukalyptus, hell 2d Leinen, Signal 4a Rotwein, Kicker/Strich 3a Petroltürkis. */
:root{
  --swf-flaeche:#5B7B73;     /* Eukalyptus: große Fläche */
  --swf-glow:rgba(91,123,115,.55);
  --swf-petrol:#2F6B6A;      /* 3a Petroltürkis: Kicker, Strich, Fokus */
  --swf-leinen:#EFE5D6;      /* 2d Leinen: heller Grund, Schrift auf der Fläche */
  --swf-tinte:#1E2926;       /* Text */
  --swf-rotwein:#6E1423;     /* 4a Rotwein: 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;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--swf-leinen);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), ohne Rahmen: senkrechter Strich von der Oberlänge von „Selbstwert“ bis zur Grundlinie von „FABRIK“ */
.swf-cs__wortmarke{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.36em;color:var(--swf-leinen);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__trenner{width:2px;align-self:stretch;margin:.041em 0 .076em;background:currentColor}
.swf-cs__unter{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}

/* 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-rotwein);color:var(--swf-leinen);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:#561019}
.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-leinen)}

/* 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}}