/* ohkt — oswaldkoenig.ch · V1 "Quipu"
   Ein gemeinsames Stylesheet für index.html und strang.html.
   Keine externen Abhängigkeiten — Webfonts selbst gehostet (assets/fonts/). */

/* Webfonts: Newsreader (variabel, opsz+wght), Hanken Grotesk (variabel, wght),
   IBM Plex Mono (statisch). Latin + Latin-Extended, woff2. */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/hanken-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 500;font-display:swap;src:url('assets/fonts/newsreader-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 500;font-display:swap;src:url('assets/fonts/newsreader-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url('assets/fonts/newsreader-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url('assets/fonts/newsreader-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --papier:#EEEDF5;
  --tinte:#2A2430;
  --rot:#9E1B32;
  --magenta:#A32050;
  --erde:#8C4A2F;
  --nacht:#2B4570;

  --rand:clamp(26px,4vw,54px);

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --grotesk:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--grotesk);
  font-weight:400;
  text-wrap:pretty;
}

a{color:inherit}
a:hover{color:var(--rot)}

em{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.12em;color:var(--magenta)}

/* ---------- Seitengerüst ---------- */

.seite{position:relative;overflow:hidden;min-height:100vh}

/* Canvas-Ebenen des Quipu-Gewebes (nur index.html) */
.quipu{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.quipu-weave{z-index:0}
.quipu-trail{z-index:1}
.quipu-dots{z-index:6}

/* ---------- Kopf ---------- */

.kopf{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px var(--rand);
  border-bottom:1px solid rgba(42,36,48,.2);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  position:relative;z-index:2;
}
.marke{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.marke-video{width:36px;height:36px;object-fit:cover;border-radius:50%;display:block}
.marke-text{text-transform:none;letter-spacing:.04em}
.kopf-link{text-decoration:underline;text-underline-offset:3px}


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

.hero{
  position:relative;
  padding:clamp(44px,6vh,64px) var(--rand) clamp(36px,5vh,56px);
  min-height:52vh;
}
.hero > *{position:relative;z-index:2}

.hero-portraet{
  position:absolute;right:var(--rand);top:clamp(44px,7vh,80px);
  width:clamp(240px,24vw,360px);aspect-ratio:280/340;
  z-index:7;
}
.hero-portraet img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.osi-tag{
  position:absolute;left:12px;bottom:12px;
  font-family:var(--mono);font-size:13px;color:var(--papier);background:var(--rot);
  padding:4px 9px;pointer-events:none;
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;
}
.hero-portraet:hover .osi-tag{opacity:1;transform:translateY(0)}

/* Farbflächen hinter dem Porträt */
.hero-flaeche-magenta{
  position:absolute;right:clamp(180px,22vw,300px);top:14vh;
  width:clamp(100px,11vw,160px);height:clamp(160px,22vh,240px);
  background:#D4326E;mix-blend-mode:multiply;opacity:.7;z-index:1;
}
.hero-flaeche-blau{
  position:absolute;right:var(--rand);bottom:4vh;
  width:clamp(140px,15vw,220px);height:28px;background:var(--nacht);z-index:1;
}

.rolle{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--erde)}
.name{margin:14px 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(64px,8.5vw,120px);line-height:1;max-width:8em}
.garnband{margin-top:22px;width:clamp(132px,12vw,180px);height:5px;
  background:linear-gradient(90deg,#2E62B8 0 25%,#C24D2A 0 50%,#E5B420 0 75%,#59894C 0)}
.lead{margin:30px 0 0;font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.6;max-width:23em}

/* ---------- Abschnittslinie ---------- */

.linie{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--mono);font-size:11px;
  position:relative;z-index:2;
}
.linie-titel{letter-spacing:.22em;text-transform:uppercase}
.linie-strich{flex:1;border-top:1px dashed rgba(42,36,48,.35);transform:translateY(-3px)}
.linie--straenge{padding:0 var(--rand) 14px}

/* ---------- Strang-Kacheln ---------- */

.straenge{
  display:flex;align-items:stretch;gap:6px;
  height:clamp(300px,42vh,420px);
  padding:0 var(--rand) clamp(26px,4vw,44px);
  position:relative;z-index:2;
}
.strang{
  flex:1;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:16px;color:var(--papier);text-decoration:none;cursor:pointer;
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat;
  transition:flex .45s cubic-bezier(.22,1,.36,1);
}
.strang:hover,.strang:focus-visible{flex:2.6;color:var(--papier)}
.strang h2{margin:0;font-family:var(--grotesk);font-weight:700;font-size:clamp(16px,1.4vw,19px);line-height:1.25;position:relative}
.strang p{margin:8px 0 0;font-size:clamp(10.5px,.9vw,13px);line-height:1.55;opacity:.85;min-width:190px;position:relative}

.strang--facilitation{background-image:linear-gradient(rgba(158,27,50,.6),rgba(120,18,38,.9)),url('assets/strang-facilitation.webp')}
.strang--coaching{background-image:linear-gradient(rgba(212,50,110,.55),rgba(150,25,72,.9)),url('assets/strang-coaching.webp');background-position:center,30% center}
.strang--festivitas{background-image:linear-gradient(rgba(194,77,42,.55),rgba(138,48,22,.9)),url('assets/strang-festivitas.webp')}
.strang--space{background-image:linear-gradient(rgba(140,74,47,.55),rgba(94,47,28,.9)),url('assets/strang-space.webp')}
.strang--expressions{background-image:linear-gradient(rgba(168,201,41,.45),rgba(108,131,24,.92)),url('assets/strang-expressions.webp')}
.strang--engagements{background:linear-gradient(#2B4570,#182A4A)}
.strang--werden{background:linear-gradient(#E5B420,#A87F0D)}
.strang--werkzeuge{background:linear-gradient(#5B2D8E,#3E1D63);flex:.7}
.strang--werkzeuge:hover{flex:2.6}

/* Die drei nachgelagerten Fäden — erst nach Klick auf den Griff */
.strang--mehr{display:none}
.straenge.ist-offen .strang--mehr{display:flex}

.griff{
  width:44px;border:0;padding:0 0 12px;margin:0;
  background:linear-gradient(rgba(42,36,48,.92),rgba(42,36,48,.98));
  display:flex;align-items:flex-end;justify-content:center;
  cursor:pointer;transition:width .45s cubic-bezier(.22,1,.36,1);
  font-family:var(--mono);font-size:10px;color:var(--papier);
}
.griff:hover{width:76px}
.griff span{writing-mode:vertical-rl}

/* Wandernde Punkte auf den Kacheln */
.punkt{position:absolute;border-radius:50%;display:block}

@keyframes wandern1{0%,100%{transform:translate(0,0) scale(1)}13%{transform:translate(16px,-20px) scale(1.4)}31%{transform:translate(4px,-46px) scale(.7)}46%{transform:translate(-16px,-28px) scale(1.55)}70%{transform:translate(-24px,8px) scale(.85)}86%{transform:translate(-6px,18px) scale(1.2)}}
@keyframes wandern2{0%,100%{transform:translate(0,0) scale(1)}18%{transform:translate(-22px,14px) scale(1.3)}39%{transform:translate(10px,32px) scale(.65)}52%{transform:translate(26px,20px) scale(1.5)}77%{transform:translate(18px,-16px) scale(.9)}}
@keyframes wandern3{0%,100%{transform:translate(0,0) scale(.8)}9%{transform:translate(2px,-10px) scale(1.6)}27%{transform:translate(-6px,-34px) scale(1)}44%{transform:translate(8px,-52px) scale(.6)}63%{transform:translate(2px,-24px) scale(1.35)}84%{transform:translate(-4px,6px) scale(.95)}}
@keyframes wandern4{0%,100%{transform:translate(0,0) scale(1.1)}22%{transform:translate(-14px,-8px) scale(.7)}35%{transform:translate(-30px,10px) scale(1.45)}58%{transform:translate(-12px,26px) scale(.8)}71%{transform:translate(12px,12px) scale(1.25)}}
@keyframes einblenden{from{opacity:0}to{opacity:.5}}

/* ---------- Gerade ---------- */

.gerade{padding:clamp(28px,4vh,44px) var(--rand);border-top:1px solid rgba(42,36,48,.15);position:relative;z-index:2}
.gerade .linie{margin-bottom:18px}
.gerade-liste{display:flex;flex-wrap:wrap;gap:14px 44px}
.gerade-eintrag{display:inline-flex;align-items:baseline;gap:10px;font-size:15.5px}
.gerade-eintrag .punkt-statisch{width:11px;height:11px;border-radius:50%;flex:none;transform:translateY(1px)}
.nebensatz{color:rgba(42,36,48,.6)}

.band-fuss{display:block;width:100%;height:82px;object-fit:cover}

/* ---------- Colophon ---------- */

.colophon{
  padding:clamp(28px,4vh,44px) var(--rand) 22px;
  border-top:1px solid rgba(42,36,48,.2);
  position:relative;z-index:2;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:26px;
}
.colophon-text{max-width:34em}
.colophon-text p:first-child{margin:0;font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.55;color:rgba(42,36,48,.85)}
.colophon-text a{color:#6E1223}
.colophon-klein{margin:10px 0 0;font-family:var(--mono);font-size:11px;color:rgba(42,36,48,.55)}
.colophon-kontakt{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.kontakt-zeile{display:inline-flex;align-items:baseline;gap:14px}
.kontakt-zeile .sig{font-family:var(--mono);font-size:12px;color:#6E1223}
.kontakt-mail{font-family:var(--serif);font-weight:500;font-size:19px;text-decoration:none;color:var(--tinte);border-bottom:2px solid var(--magenta)}

/* ---------- Strangseite ---------- */

.strang-kopfbereich{
  position:relative;overflow:hidden;
  padding:clamp(44px,7vh,72px) var(--rand) clamp(40px,6vh,60px);
}
.strang-kopfbereich > p,.strang-kopfbereich > h1{position:relative}
.strang-meta{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.strang-name{margin:14px 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(44px,6.5vw,92px);line-height:1.02;max-width:11em}
.strang-claim{margin:16px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,27px);line-height:1.3;opacity:.95}
.strang-sub{margin:14px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,21px);opacity:.9}
.strang-oneliner{margin:20px 0 0;font-size:clamp(15.5px,1.2vw,18px);line-height:1.6;max-width:34em}
.strang-extlink{margin:16px 0 0;font-family:var(--mono);font-size:12px}
.strang-extlink a{color:inherit}
.strang-alt{margin:20px 0 0;font-family:var(--mono);font-size:10.5px;opacity:.7}
.strang-punkt{position:absolute;border-radius:50%;background:currentColor;opacity:0}

.rubrik{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--erde)}

.abschnitt{padding:clamp(36px,5vh,56px) var(--rand);max-width:820px}
.abschnitt--eng{padding:0 var(--rand) clamp(36px,5vh,56px);max-width:820px}
.abschnitt-text{margin:14px 0 0;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.65}

.bloecke{
  padding:0 var(--rand) clamp(36px,5vh,56px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;max-width:1100px;
}
.block{border:1px solid rgba(42,36,48,.2);padding:22px}
.block h3{margin:0;font-weight:700;font-size:17px}
.block p{margin:10px 0 0;font-size:15px;line-height:1.6;color:rgba(42,36,48,.85)}

.linien{
  padding:0 var(--rand) clamp(36px,5vh,56px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;max-width:1100px;
}
.linien h3{margin:0 0 14px;font-family:var(--serif);font-weight:500;font-size:24px;padding-bottom:8px;border-bottom:2px solid var(--strang-farbe,var(--rot))}
.linien-eintrag{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid rgba(42,36,48,.1)}
.linien-eintrag .t{font-weight:500;font-size:15.5px;line-height:1.4}
.linien-eintrag .m{font-family:var(--mono);font-size:11px;color:rgba(42,36,48,.6)}

.knoten-liste{border-left:2px solid var(--strang-farbe,var(--rot));display:flex;flex-direction:column}
.knoten{position:relative;padding:0 0 26px 28px}
.knoten-punkt{position:absolute;left:0;top:5px;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--strang-farbe,var(--rot));box-shadow:0 0 0 3px var(--papier)}
.knoten--gross .knoten-punkt{width:18px;height:18px}
.knoten h3{margin:0;font-weight:700;font-size:16.5px;line-height:1.3}
.knoten--gross h3{font-size:20px}
.knoten .m{margin:4px 0 0;font-family:var(--mono);font-size:11px;color:rgba(42,36,48,.6)}
.knoten .d{margin:6px 0 0;font-size:15px;line-height:1.55;color:rgba(42,36,48,.85);max-width:34em}

.fussnote{margin:0;font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.6;color:rgba(42,36,48,.7)}

/* Buchung (sp_ce) — Cal.com-Embed in einer Karte im Kachelstil */
.block-link{margin:12px 0 0;font-family:var(--mono);font-size:12px}
.block-link a{color:var(--erde)}
.buchen-titel{margin:14px 0 0;font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,36px)}
.buchen-zeile{margin:12px 0 18px;font-size:15.5px;line-height:1.6;color:rgba(42,36,48,.85);max-width:38em}
.dauer-wahl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.dauer-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--erde);margin-right:6px}
.dauer-knopf{font-family:var(--mono);font-size:12.5px;padding:10px 16px;border:1px solid var(--erde);background:transparent;color:var(--erde);cursor:pointer}
.dauer-knopf:hover{background:rgba(140,74,47,.12)}
.dauer-knopf.ist-aktiv{background:var(--erde);color:var(--papier)}
.buchen-karte{background:#fff;border:1px solid rgba(42,36,48,.2);padding:clamp(8px,1.2vw,14px)}
#spce-booking{width:100%;min-height:640px;overflow:auto}
.buchen-fallback{margin:14px 0 0;font-family:var(--mono);font-size:12px}
.buchen-fallback a{color:var(--tinte)}
.buchen-kurzfristig{margin:8px 0 0;font-family:var(--mono);font-size:12px;color:var(--erde)}
.buchen-kurzfristig a{color:var(--erde);font-weight:500}

.faden{color:var(--papier);padding:clamp(40px,6vh,64px) var(--rand);background:var(--strang-dunkel,#6E1223)}
.faden h2{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,36px)}
.faden p{margin:12px 0 0;font-size:15.5px;line-height:1.6;max-width:30em;opacity:.85}
.faden-knopf{display:inline-block;margin-top:22px;background:var(--papier);color:var(--tinte);font-weight:700;font-size:15px;padding:12px 22px;text-decoration:none}
.faden-knopf:hover{color:var(--tinte)}

.andere{padding:clamp(28px,4vh,40px) var(--rand);border-top:1px solid rgba(42,36,48,.15)}
.andere .rubrik{margin-bottom:12px;color:rgba(42,36,48,.55)}
.andere-liste{display:flex;flex-wrap:wrap;gap:10px 22px}
.andere-liste a{display:inline-flex;align-items:center;gap:8px;font-size:14px;text-decoration:none;font-weight:500}
.andere-liste .punkt-statisch{width:10px;height:10px;border-radius:50%;flex:none}
.andere-fuss{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:16px;border-top:1px solid rgba(42,36,48,.1);font-family:var(--mono);font-size:10.5px;color:rgba(42,36,48,.55)}

/* ---------- Klein & rücksichtsvoll ---------- */

@media (max-width:760px){
  .straenge{flex-direction:column;height:auto}
  .strang{min-height:120px}
  .strang:hover{flex:1}
  .griff{width:auto;height:44px;padding:0 12px;align-items:center}
  .griff span{writing-mode:horizontal-tb}
  .hero-portraet{position:relative;right:auto;top:auto;width:62%;margin:26px 0 0}
  .hero-flaeche-magenta,.hero-flaeche-blau{display:none}
  .colophon-kontakt{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}