/* ============================================================
   SWSolutions · swsol.de · „Light Premium"
   Gemeinsames Stylesheet für alle Seiten
   Farben: Navy #2b2946 · Weinrot #922833 (nur homöopathisch)
   Schriften: Newsreader (Headlines) · IBM Plex Sans (Text/UI)
   ============================================================ */

:root{
  --paper:      #ffffff;
  --paper-2:    #f7f6f3;   /* sehr helles Grau für Abschnitts-Rhythmus */
  --ink:        #23212e;   /* dunkle Schrift, nahe Navy */
  --ink-soft:   #5b5964;
  --line:       #e7e5df;
  --navy:       #2b2946;
  --red:        #922833;
  --dark:       #16151c;   /* Kontakt-Block & Footer */
  --dark-ink:   #f2efe9;
  --dark-soft:  #a9a7b0;
  --red-light:  #b53848;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --w-page: 1120px;
  --w-text: 34em;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  font-family:var(--sans);
  font-size:1.0625rem;              /* 17px – gut lesbar für die Zielgruppe */
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }
p a, .textlink{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--line);
  transition:text-decoration-color .15s ease, color .15s ease;
}
p a:hover, .textlink:hover{ color:var(--red); text-decoration-color:var(--red); }

:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{
  max-width:var(--w-page);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 5vw, 3rem);
}

/* ---------- Typografie ---------- */

h1, h2{
  font-family:var(--serif);
  font-weight:500;
  color:var(--navy);
  letter-spacing:-0.01em;
  text-wrap:balance;
}
h1{
  font-size:clamp(2.5rem, 6vw, 4.25rem);
  line-height:1.08;
}
h2{
  font-size:clamp(1.9rem, 3.6vw, 2.75rem);
  line-height:1.15;
}
h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.0625rem;
  color:var(--ink);
}

.kicker{
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:1.25rem;
}

.lead{
  font-size:clamp(1.125rem, 1.8vw, 1.3125rem);
  line-height:1.6;
  max-width:var(--w-text);
}

.muted{ color:var(--ink-soft); }

/* ---------- Buttons ---------- */

.btn{
  display:inline-block;
  font-weight:600;
  font-size:.9375rem;
  padding:.85rem 1.6rem;
  border:1px solid var(--navy);
  border-radius:3px;
  cursor:pointer;
  font-family:var(--sans);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-solid{ background:var(--navy); color:#fff; }
.btn-solid:hover{ background:var(--red); border-color:var(--red); }
.btn-ghost{ color:var(--navy); background:transparent; }
.btn-ghost:hover{ border-color:var(--red); color:var(--red); }
.btn-light{ border-color:var(--dark-ink); color:var(--dark); background:var(--dark-ink); }
.btn-light:hover{ background:var(--red-light); border-color:var(--red-light); color:#fff; }

/* ---------- Header ---------- */

header{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding-block:1.1rem;
}

/* Marke: Bildmarke (SW) + fein gesperrtes SOLUTIONS – wie im Original-Logo */
.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.brand svg, .brand img{ height:30px; width:auto; }
.brand-word{
  font-size:.8125rem;
  font-weight:400;
  letter-spacing:.34em;
  color:var(--navy);
  translate:0 1px;               /* optisch auf die Bildmarke ausrichten */
}

nav ul{
  display:flex;
  gap:2rem;
  list-style:none;
}
nav a{
  font-size:.9375rem;
  font-weight:500;
  color:var(--ink-soft);
  transition:color .15s ease;
}
nav a:hover{ color:var(--red); }
nav a[aria-current="page"]{
  color:var(--navy);
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-underline-offset:6px;
  text-decoration-thickness:2px;
}

@media (max-width: 560px){
  .nav{ flex-direction:column; align-items:flex-start; gap:.9rem; }
  nav ul{ flex-wrap:wrap; row-gap:.6rem; column-gap:1.5rem; }
}

/* ---------- Abschnitte ---------- */

section{ padding-block:clamp(4.5rem, 10vw, 7.5rem); }
.bg-soft{ background:var(--paper-2); }

/* Kleinerer Seitenkopf für Unterseiten */
.page-hero{ padding-block:clamp(3.5rem, 8vw, 5.5rem); }
.page-hero h1{ font-size:clamp(2.2rem, 5vw, 3.5rem); max-width:16em; }
.page-hero .lead{ margin-top:1.5rem; }

/* ---------- Hero (Startseite) ---------- */

.hero h1{ max-width:15em; }
.hero .lead{ margin-top:1.75rem; }

/* Abgrenzung: drei ruhige Verneinungen, dann der Satz, der zählt */
.notlist{
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
  max-width:40em;
}
.notlist p{
  font-family:var(--serif);
  font-size:clamp(1.25rem, 2.2vw, 1.5rem);
  line-height:1.5;
}
.notlist p:first-child{ color:var(--ink-soft); }
.notlist p:last-child{ margin-top:.75rem; color:var(--navy); }

.hero-cta{
  margin-top:3rem;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

/* ---------- Troubleshooting (Signatur-Block) ---------- */

.symptoms{
  list-style:none;
  margin-top:3rem;
  border-top:1px solid var(--line);
  max-width:44em;
}
.symptoms li{
  font-family:var(--serif);
  font-size:clamp(1.3rem, 2.6vw, 1.75rem);
  line-height:1.35;
  color:var(--navy);
  padding:1.1rem 0 1.1rem 1.4rem;
  border-bottom:1px solid var(--line);
  position:relative;
}
.symptoms li::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(1.1rem + 0.675em);        /* padding-top + halbe line-height (1.35 * 0.5) */
  transform:translateY(-50%);         /* Strich um eigene Höhe zurück, sitzt exakt auf Zeilenmitte */
  width:.55rem; height:2px;
  background:var(--red);
}
.after-symptoms{
  margin-top:2.5rem;
  max-width:var(--w-text);
}
.section-cta{ margin-top:2.5rem; }

/* ---------- Haltung (Startseite) ---------- */

.why h2{ max-width:16em; }
.stance{
  margin-top:1.75rem;
  max-width:var(--w-text);
  color:var(--ink-soft);
}

/* ---------- Leistungs-Teaser (Startseite) ---------- */

.tiers{ margin-top:3rem; border-top:1px solid var(--line); }
.tier{
  display:grid;
  grid-template-columns:5rem 1fr 1.4fr;
  gap:clamp(1.25rem, 3vw, 2.5rem);
  padding-block:2.25rem;
  border-bottom:1px solid var(--line);
}
.tier-no{
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--ink-soft);
}
.tier h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.35rem, 2.2vw, 1.65rem);
  color:var(--navy);
  line-height:1.25;
}
.tier p{ color:var(--ink-soft); max-width:32em; }
@media (max-width: 760px){
  .tier{ grid-template-columns:3rem 1fr; }
  .tier p{ grid-column:2; }
}
.delivery{
  margin-top:2rem;
  max-width:var(--w-text);
  color:var(--ink-soft);
}

/* ---------- Beweise: Praxisfälle (Startseite) ---------- */

#beweis .cases{ margin-top:2.5rem; }
#beweis .case .situation{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.15rem, 2vw, 1.4rem);
  color:var(--navy);
  line-height:1.35;
  margin-bottom:.6rem;
  max-width:26em;
}

/* ---------- Leistungen (Detailseite) ---------- */

.items{
  margin-top:2.75rem;
  border-top:1px solid var(--line);
  max-width:46em;
}
.item{
  padding-block:1.9rem;
  border-bottom:1px solid var(--line);
}
.item h3{ font-size:1.125rem; }
.item p{
  margin-top:.45rem;
  color:var(--ink-soft);
  max-width:38em;
}
.facts{
  list-style:none;
  margin-top:2.75rem;
  max-width:40em;
}
.facts li{
  padding:.55rem 0 .55rem 1.4rem;
  position:relative;
  color:var(--ink-soft);
}
.facts li::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(.55rem + 0.825em);         /* padding-top + halbe line-height (1.65 * 0.5, vom body geerbt) */
  transform:translateY(-50%);
  width:.55rem; height:2px;
  background:var(--red);
}

/* Situations-Einstieg je Leistung: das Problem zuerst */
.item .situation{
  font-family:var(--serif);
  font-size:clamp(1.2rem, 2vw, 1.4rem);
  color:var(--navy);
  line-height:1.35;
  margin-bottom:.4rem;
}
.item h3{ color:var(--ink-soft); font-size:.9375rem; letter-spacing:.02em; }

/* Ablauf der Zusammenarbeit: nummeriert */
.flow{ counter-reset:f; }
.flow li{ counter-increment:f; padding-left:2rem; }
.flow li::before{
  content:counter(f);
  background:none; width:auto; height:auto; top:.5rem;
  transform:none;                    /* Zahlen sitzen über font-metrics, kein Vertikal-Mitteln */
  font-family:var(--serif); font-size:1.15rem; color:var(--red);
}

/* ---------- Über mich ---------- */

.about-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.about-grid p + p{ margin-top:1.25rem; }
/* .about-photo entfernt – Portrait läuft jetzt über .editorial.portrait */
@media (max-width: 820px){
  .about-grid{ grid-template-columns:1fr; }
}

.stations{ margin-top:3rem; border-top:1px solid var(--line); max-width:52em; }
.station{
  display:grid;
  grid-template-columns:11rem 1fr;
  gap:clamp(1.25rem, 3vw, 2.5rem);
  padding-block:2rem;
  border-bottom:1px solid var(--line);
}
.station-time{
  font-family:var(--serif);
  font-size:1.125rem;
  color:var(--ink-soft);
}
.station h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.25rem, 2vw, 1.5rem);
  color:var(--navy);
  line-height:1.3;
}
.station p{ margin-top:.45rem; color:var(--ink-soft); max-width:36em; }
@media (max-width: 700px){
  .station{ grid-template-columns:1fr; gap:.35rem; }
}

/* Kapitelmarken der Über-mich-Geschichte */
.kap{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.35rem, 2.4vw, 1.75rem);
  color:var(--navy);
  line-height:1.3;
  margin:2.4rem 0 .55rem;
}
.kap:first-child{ margin-top:0; }
.story{ max-width:44em; }
.story p{ max-width:40em; }

/* Portrait-Band: eingefasst, Gesicht im oberen Drittel; bildet mit dem Leitsatz ein Paar */
.editorial.portrait{ padding-bottom:0; }
.editorial.portrait img{
  width:100%;
  height:auto;              /* Bild ist 2:1 – volle Breite, natürliche Höhe, kein Crop */
  aspect-ratio:2 / 1;       /* stabile Fläche vor dem Laden, verhindert Layout-Shift */
  object-fit:cover;         /* bei exakt 2:1 deckungsgleich, kein Beschnitt */
  border-radius:4px;
}

/* ---------- Aus der Praxis ---------- */

.cluster + .cluster{ margin-top:4.5rem; }
.cluster-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.5rem, 2.6vw, 1.9rem);
  color:var(--navy);
}
.cluster-sub{
  margin-top:.4rem;
  color:var(--ink-soft);
  font-size:1rem;
}
.cases{ margin-top:2.5rem; border-top:1px solid var(--line); max-width:44em; }
.case{ padding-block:2.5rem; border-bottom:1px solid var(--line); }
.case h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.25rem, 2.1vw, 1.5rem);
  color:var(--navy);
  line-height:1.3;
  margin-bottom:.9rem;
  max-width:24em;
}
.case p{ color:var(--ink-soft); max-width:40em; }
.case p + p{ margin-top:.8rem; }
.case .result{ color:var(--ink); font-weight:500; }

/* Leitsatz: die Zäsur */
.leitsatz{ padding-block:clamp(4rem, 9vw, 7rem); }
.leitsatz p{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.5rem, 3.2vw, 2.3rem);
  line-height:1.35;
  color:var(--navy);
  max-width:24em;
  text-wrap:balance;
}

/* Stationen: schlanker Beweis */
.stations.slim .station{ padding-block:1.05rem; grid-template-columns:9rem 1fr; }
.stations.slim .station h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.0625rem;
  color:var(--ink);
  line-height:1.45;
}
.stations.slim .station-time{ font-size:1rem; padding-top:.1rem; }

/* ---------- Kontakt-Seite: Formular ---------- */

.contact-page-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}
@media (max-width: 820px){
  .contact-page-grid{ grid-template-columns:1fr; }
}

form .field{ margin-bottom:1.4rem; }
label{
  display:block;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:.45rem;
}
input, textarea{
  width:100%;
  font:inherit;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  padding:.75rem .9rem;
  transition:border-color .15s ease;
}
input:hover, textarea:hover{ border-color:#cfccc4; }
input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:1px;
  border-color:var(--navy);
}
textarea{ min-height:10rem; resize:vertical; }
.form-note{
  margin-top:1rem;
  font-size:.9375rem;
  color:var(--ink-soft);
  max-width:32em;
}

/* Honeypot: für Menschen unsichtbar, Bots füllen es aus → Web3Forms verwirft */
.honeypot{
  position:absolute !important;
  left:-9999px !important;
  top:auto;
  width:1px; height:1px;
  overflow:hidden;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Status-Zeile unter dem Absende-Button */
.form-status{
  margin-top:1rem;
  min-height:1.4em;
  font-size:.9375rem;
}
.form-status.ok{  color:var(--navy); font-weight:500; }
.form-status.err{ color:var(--red);  font-weight:500; }

.contact-aside h3{ margin-bottom:.6rem; }
.contact-aside .block + .block{ margin-top:2.25rem; }
.contact-aside ol{
  list-style:none;
  counter-reset:step;
}
.contact-aside ol li{
  counter-increment:step;
  padding:.65rem 0 .65rem 2.2rem;
  position:relative;
  color:var(--ink-soft);
}
.contact-aside ol li::before{
  content:counter(step);
  position:absolute;
  left:0; top:.65rem;
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--red);
}

/* ---------- Editorial-Bild: volle Breite, ruhig ---------- */

.editorial{ padding-block:clamp(3.5rem, 7vw, 5.5rem); }
.editorial img{
  width:100%;
  height:clamp(260px, 42vh, 440px);
  object-fit:cover;
  border-radius:4px;
}
.editorial figcaption{
  margin-top:1rem;
  font-size:.8125rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------- Kontakt-Block (dunkel) ---------- */

.contact{
  background:var(--dark);
  color:var(--dark-ink);
}
.contact .kicker{ color:var(--dark-soft); }
.contact h2{ color:var(--dark-ink); max-width:14em; }
.contact-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;    /* Portrait bekommt breiten Anteil */
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:center;
}
.contact .lead{ color:var(--dark-soft); margin-top:1.5rem; }
.contact-ways{
  margin-top:2.5rem;
  display:grid;
  gap:.4rem;
  font-size:1.125rem;
}
.contact-ways a{
  color:var(--dark-ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:#3c3a46;
  transition:text-decoration-color .15s ease, color .15s ease;
}
.contact-ways a:hover{ color:#fff; text-decoration-color:var(--red-light); }
.contact-ways .label{
  color:var(--dark-soft);
  font-size:.8125rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-top:1rem;
}
.contact .section-cta{ margin-top:3rem; }

/* Portrait: figure-Container trägt die Ratio, img füllt zuverlässig – umgeht Grid-Quirks */
.contact .portrait{
  width:100%;
  max-width:520px;
  aspect-ratio:3 / 2;                 /* Container ist Querformat */
  border-radius:4px;
  overflow:hidden;                    /* border-radius greift auch aufs img */
  margin:0;
  justify-self:center;
}
.contact .portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 20%;            /* Kopf mit Luft nach oben */
  display:block;
}
@media (max-width: 860px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact .portrait{ justify-self:start; max-width:340px; }
}
.contact :focus-visible{ outline-color:var(--dark-ink); }

/* ---------- Thai-Haarlinie & Footer ---------- */

/* Dezentes Detail: Logo-Farben = Nationalfarben Thailands (rot/weiß/navy/weiß/rot) */
.thai-line{
  height:1px;
  background:#2a2933;
}

footer{
  background:var(--dark);
  color:var(--dark-soft);
  padding-block:clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  font-size:.9375rem;
}
/* Das volle Logo, groß und ruhig */
.foot-logo{
  display:block;
  width:clamp(150px, 18vw, 210px);
  height:auto;
  margin-bottom:3rem;
}
.foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  border-top:1px solid #2a2933;
  padding-top:2rem;
}
.foot nav ul{ gap:1.5rem; }
.foot nav a{ color:var(--dark-soft); }
.foot a:hover{ color:var(--dark-ink); }
footer :focus-visible{ outline-color:var(--dark-ink); }

/* ---------- Transparenz (FAQ) ---------- */

.faq{ max-width:44em; }
.faq-cat{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.4rem, 2.4vw, 1.75rem);
  color:var(--navy);
  margin-top:3.5rem;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--line);
}
.faq-cat:first-of-type{ margin-top:0; }
.faq-item{ margin-top:2.25rem; }
.faq-item h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.15rem, 1.9vw, 1.35rem);
  color:var(--navy);
  line-height:1.35;
  margin-bottom:.6rem;
}
.faq-item p{ color:var(--ink-soft); max-width:40em; }
.faq-item p + p{ margin-top:.7rem; }

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */

.prose{ max-width:42em; }
.prose h2{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.1875rem;
  color:var(--ink);
  margin-top:2.5rem;
  margin-bottom:.6rem;
  letter-spacing:0;
}
.prose p + p{ margin-top:.9rem; }
.prose ul{
  margin:.75rem 0 .75rem 1.25rem;
  color:var(--ink-soft);
}
.prose li + li{ margin-top:.25rem; }
.prose address{ font-style:normal; }

/* ---------- Sanftes Einblenden (sehr sparsam) ---------- */

.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}