/*
Theme Name:   IVTM
Theme URI:    https://www.ivtm.de
Description:  Classic-Theme der IVTM GmbH (Institut für Verhaltens-, Team- und Managementtraining, Herne). Gebaut aus dem freigegebenen HTML-Prototyp der Designphase. Kein FSE. Die Sektionen liegen im Block-Plugin ivtm-blocks, die Mehrsprachigkeit im Plugin eingenetzt-multilang (hier einsprachig und ungenutzt).
Author:       Dennis Redder (eingenetzt.net)
Author URI:   https://eingenetzt.net
Version:      0.2.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License:      Proprietary
Text Domain:  ivtm
*/

/* NICHT VON HAND BEARBEITEN.
   Diese Datei schreibt tools/css-teilen.py im Projektordner aus design/base.css,
   design/ivtm.css und tools/theme-zusatz.css. Aenderungen dort machen und das
   Skript neu laufen lassen. */

/* IVTM Design-Tokens und Grundlagen.
   Aus design/base.css. Farben und Schriften kommen 1:1 aus
   briefing/CORPORATE-IDENTITY.md. Hier wird nichts approximiert. */

:root{
  /* Markenfarben, unveraendert aus der Markenstrategie */
  --page:            #EFE8E0;
  --surface:         #E5DDD2;   /* Warm Off-White */
  --sand:            #DDCDBE;
  --taupe:           #B8A692;   /* nur Flaeche, kein Texttraeger */
  --brand:           #6A7763;   /* IVTM Green */
  --brand-deep:      #5A6653;   /* kleine Schrift, Links */
  --ink:             #40403E;   /* Warm Charcoal */
  --ink-soft:        #4A5149;   /* Forest Grey */
  --line:            #D3C9BC;
  --white:           #FFFFFF;

  /* Leistungswelten */
  --w1: #3F4B72; --w1-deep: #39446B; --w1-tint: #E8EDF9;   /* Strategie & Zukunft */
  --w2: #555C63; --w2-deep: #40474D; --w2-tint: #EBEDEF;   /* Management */
  --w3: #1F5757; --w3-deep: #134E4E; --w3-tint: #E2F0F0;   /* Zusammenarbeit & Wissensarbeit */
  --w4: #72577E; --w4-deep: #573C62; --w4-tint: #F1E9F5;   /* Kultur & Veraenderung */
  --w5: #82583E; --w5-deep: #643C23; --w5-tint: #F7EAE2;   /* Garten der Balance & Energie */

  /* Typografie */
  --serif: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --text:  'Lato', 'Helvetica Neue', Arial, sans-serif;

  /* Raster */
  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --sect: clamp(64px, 9vw, 128px);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Die fluide Groesse gehoert auf html, nicht auf body: rem bezieht sich immer auf
   die Wurzel. Vorher stand der clamp auf body, dadurch blieb jedes rem-Mass bei
   16 px haengen und die ganze Auszeichnungstypografie war rund 12 Prozent zu klein
   (die Navigation landete bei 12,5 px). Jetzt skaliert alles mit. */
html{
  -webkit-text-size-adjust:100%;
  font-size:clamp(16px, 0.35vw + 14.6px, 18px);
  scroll-behavior:smooth;
}
/* Sprungziele muessen unter dem klebenden Kopf landen. Beim Ankommen ist der
   Kopf bereits kompakt, deshalb wird gegen die kompakte Hoehe gerechnet. */
:root{ --kopf-kompakt:73px; }
main [id]{ scroll-margin-top:calc(var(--kopf-kompakt) + 24px); }
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--text);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.14; margin:0; letter-spacing:-0.005em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
img{ max-width:100%; height:auto; display:block; }

a{ color:var(--brand-deep); }
a:focus-visible,button:focus-visible{ outline:3px solid var(--brand-deep); outline-offset:3px; border-radius:2px; }

.wrap{ width:min(100% - var(--gut)*2, var(--wrap)); margin-inline:auto; }
.section{ padding-block:var(--sect); }

/* Gesperrte Versalien, das wiederkehrende Auszeichnungsmuster der Marke */
.eyebrow{
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  margin:0 0 1.1em;
}

/* Logo. Seit dem 21.09.2026 die gelieferte Vektordatei, nicht mehr die
   Nachzeichnung. Sie traegt jetzt auch das "GmbH" hinter der Wortmarke.
   Ein Pfad, zwei Ausschnitte: #lockup mit Unterzeile, #logo ohne.
   Seitenverhaeltnis Lockup 2,62 zu 1, Wortmarke 2,92 zu 1. */
/* Die Unterzeile ist im Original nur ein Zehntel so hoch wie die Wortmarke
   (20 gegen 231 Einheiten). Unter etwa 240 px Lockup-Breite ist sie nicht mehr
   lesbar. Statt sie zu verkleinern, wechselt der Kopf beim Scrollen auf die
   Wortmarke allein. Auf dem Handy steht ohnehin nur die Marke. */
.logo{ position:relative; display:block; text-decoration:none; color:var(--brand);
  line-height:0; width:210px; height:80px;
  transition:width .26s ease, height .26s ease; }
.logo__mark{ position:absolute; left:0; top:50%; translate:0 -50%;
  height:auto; fill:currentColor; transition:opacity .2s ease, width .26s ease; }
.logo__mark--lock{ width:210px; opacity:1; }
.logo__mark--word{ width:124px; opacity:0; }

.hdr.is-kompakt .logo{ width:124px; height:44px; }
.hdr.is-kompakt .logo__mark--lock{ opacity:0; }
.hdr.is-kompakt .logo__mark--word{ opacity:1; }

@media (max-width:860px){
  .logo,.hdr.is-kompakt .logo{ width:124px; height:44px; }
  .logo__mark--lock{ opacity:0; }
  .logo__mark--word{ opacity:1; }
}

.ftr .logo{ width:280px; height:107px; }
.ftr .logo__mark--lock{ width:280px; opacity:1; }
.ftr .logo__mark--word{ opacity:0; }

/* Buttons */
.btn{
  display:inline-block; font-family:var(--sans); font-size:.85rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  padding:.95em 1.9em; border:1px solid transparent; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--solid{ background:var(--brand); color:var(--white); }
.btn--solid:hover{ background:var(--brand-deep); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink-soft); }
.btn--ghost:hover{ background:var(--ink); color:var(--page); border-color:var(--ink); }

/* Skip-Link */
.skip{ position:absolute; left:-9999px; }
.skip:focus{
  left:12px; top:12px; z-index:99; background:var(--ink); color:var(--page);
  padding:.7em 1.2em; font-family:var(--sans); font-size:.8rem;
}

/* Ruhige Flaeche, wo noch kein Foto vorliegt. Bewusst ohne Beschriftung und
   ohne Verlauf: eine stille Flaeche in der Sandfarbe liest sich als gestaltetes
   Element, ein beschrifteter Kasten liest sich als unfertig. */
.ph{ position:relative; overflow:hidden; background:var(--sand);
  box-shadow:inset 0 0 0 1px rgba(64,64,62,.10); }
.ph--portrait{ aspect-ratio:1/1; border-radius:50%; }

/* ---------- Bilder ----------
   Die Bestandsfotos sind kuehl und blaustichig. Die Marke ist warm.
   .foto legt eine leichte Waermekorrektur darueber, wie im Kickoff besprochen.
   Alles nur CSS, die Originaldateien bleiben unangetastet und der Effekt ist
   ueber --waerme abschaltbar. */
/* Waermekorrektur. Sie war fuer die kuehlen Bestandsfotos gedacht. Seit die
   eigenen Fotos da sind, will Kathrin sie nicht mehr ("das einzupflegende Foto
   dann bitte nicht so sepia einfaerben", 29.09.). Deshalb stehen beide Regler
   auf null. Die Stufen bleiben erhalten, falls ein Bild sie doch braucht. */
.foto{ position:relative; overflow:hidden; background:var(--sand);
  --waerme:0;        /* Staerke der Sepia-Verschiebung */
  --deckung:0;       /* Staerke der Farbflaeche darueber */
}
/* --fokus ist der Bildschwerpunkt. Er entscheidet, welcher Teil stehen bleibt, wenn
   ein Feld das Bild beschneidet. Im Block wird daraus der Fokuspunkt-Regler. */
.foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--fokus,50% 50%); display:block;
  filter:saturate(.88) contrast(1.02) sepia(var(--waerme)); }
.foto::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(155deg,
    rgba(221,205,190, calc(.34 * var(--deckung))),
    rgba(106,119,99,  calc(.16 * var(--deckung))) 70%);
  mix-blend-mode:multiply;
}
/* Drei Stufen, damit die Staerke an einer Stelle umgestellt werden kann */
.foto--kalt{   --waerme:0;   --deckung:0; }
.foto--sanft{  --waerme:.12; --deckung:.65; }
.foto--stark{  --waerme:.28; --deckung:1.45; }
.foto--portrait{ aspect-ratio:1/1; border-radius:50%; }
.foto--band{ aspect-ratio:21/8; }
.foto--karte{ aspect-ratio:16/10; }

/* ============================================================
   Kopf, Navigation, Fuss, Seitenkopf, Rechtstext
   Aus design/ivtm.css, unveraendert.
   ============================================================ */

:root{ --r: 18px; --r-sm: 12px; }

/* ---------- Kopf ---------- */
.hdr{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--page) 92%, transparent);
  backdrop-filter:blur(10px);
  transition:padding .26s ease, box-shadow .26s ease, background-color .26s ease; }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-block:.85rem; }
.nav{ display:flex; gap:2.2rem; align-items:center; }
.nav a{
  font-family:var(--sans); font-size:.85rem; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; text-decoration:none; color:var(--ink); padding-block:.7em;
}
.nav a:hover{ color:var(--brand-deep); }
/* .nav a ist spezifischer als .btn--solid und hat dessen Weiss ueberschrieben.
   Ergebnis waren 2,19:1 auf Gruen. Deshalb hier explizit zuruecksetzen. */
.nav a.btn{ padding:.7em 1.4em; }
.nav a.btn--solid{ color:var(--white); }
.nav a.btn--solid:hover{ color:var(--white); background:var(--brand-deep); }
.burger{ display:none; background:none; border:0; padding:.5em; cursor:pointer; }
.burger span{ display:block; width:24px; height:1.5px; background:var(--ink); margin:5px 0; }


/* Kompakter Kopf beim Scrollen */
.hdr__in{ transition:padding-block .26s ease; }
.hdr.is-kompakt .hdr__in{ padding-block:.55rem; }
.hdr.is-kompakt{ box-shadow:0 1px 0 rgba(64,64,62,.10); }

/* Knoepfe sind in der Arbeitsfassung rund */
.btn{ border-radius:999px; }

/* ---------- Fuss ---------- */
.ftr{ background:var(--ink); color:var(--surface); padding-block:clamp(44px,6vw,72px) 1.6rem; }
.ftr a{ color:var(--surface); text-decoration:none; }
.ftr a:hover{ text-decoration:underline; }
.ftr__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:clamp(28px,4vw,56px); }
/* Drei Spalten brechen auf mittleren Breiten unschoen: Logo und eine Navigation
   oben, die zweite Navigation allein darunter. Deshalb ab 900 px zwei Spalten,
   bei denen die Markenspalte ueber beide laeuft. Dann stehen die zwei
   Navigationen immer nebeneinander, nie eine allein. */
@media (max-width:900px){
  .ftr__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,40px); }
  .ftr__marke{ grid-column:1 / -1; }
}
@media (max-width:520px){ .ftr__grid{ grid-template-columns:1fr; } }
.ftr .logo{ color:var(--surface); }
.ftr h2,.ftr h3{ font-family:var(--sans); font-size:.75rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(229,221,210,.66); margin-bottom:1rem; }
.ftr ul{ list-style:none; margin:0; padding:0; font-size:.95rem; }
.ftr li{ margin-bottom:.35em; }
.ftr li a{ display:inline-block; padding-block:4px; }   /* Zielflaeche >= 24 px, WCAG 2.5.8 */
.ftr__base{ margin-top:clamp(32px,4vw,56px); padding-top:1.4rem; border-top:1px solid rgba(229,221,210,.2);
  display:flex; justify-content:space-between; align-items:center; gap:.8rem 1.6rem;
  flex-wrap:wrap; font-size:.82rem; color:rgba(229,221,210,.7); }
.ftr__recht{ display:flex; gap:1.4rem; }
.ftr__recht a{ display:inline-block; padding-block:5px; }

/* ---------- Ueberschriftenmass ----------
   Vorher standen sieben verschiedene clamp-Formeln als style-Attribut im HTML.
   Im Build werden aus diesen Sektionen Gutenberg-Bloecke, und Inline-Stile
   ueberleben den Schritt nicht. Deshalb drei Klassen statt sieben Sonderfaelle. */
.titel--gross{ font-size:clamp(1.9rem,4vw,2.9rem); max-width:22ch; text-wrap:balance; }
.titel--mittel{ font-size:clamp(1.8rem,3.6vw,2.7rem); max-width:22ch; text-wrap:balance; }
.titel--klein{ font-size:clamp(1.6rem,3vw,2.2rem); max-width:26ch; text-wrap:balance; }
.lead{ max-width:66ch; color:var(--ink-soft); margin-top:1.2rem; }
.lead--eng{ max-width:60ch; }
.abschluss{ padding-bottom:var(--sect); }

/* ---------- Navigation: aktuelle Seite ----------
   Nicht nur Farbe, sondern auch eine Linie. Farbe allein waere der einzige
   Traeger der Information (WCAG 1.4.1). aria-current setzt partials.js. */
.nav a.is-hier{ color:var(--brand-deep); box-shadow:inset 0 -2px 0 var(--brand); }
.nav a.btn.is-hier{ box-shadow:none; }
/* .nav a.is-hier ist spezifischer als .btn--solid und hat dessen Weiss ueberschrieben.
   Auf der Kontaktseite stand dadurch Gruen auf Gruen, 1,28:1. */
.nav a.btn--solid.is-hier{ color:var(--white); }

/* ---------- Fussbereich, Ergaenzungen ---------- */
/* Anreisser im Fuss. Steht auf jeder Seite und traegt die Kurzbeschreibung.
   Vorlaeufig der Einfuehrungstext von der Startseite, bis IVTM eigene Saetze
   liefert. */
.ftr__teaser{ margin-top:1.4rem; font-size:.95rem; line-height:1.7;
  color:rgba(229,221,210,.82); max-width:46ch; }
.ftr__adr{ font-style:normal; margin-top:1.6rem; font-size:.9rem; line-height:1.8;
  color:rgba(229,221,210,.72); max-width:46ch; }
.ftr__adr b{ display:block; font-weight:400; color:rgba(229,221,210,.86); margin-bottom:.2em; }
.ftr__adr a{ display:inline-block; padding-block:3px; }

/* ---------- Seitenkopf der Unterseiten ----------
   Kein Bild, nur Typografie. Die Buehne mit Foto bleibt der Startseite
   vorbehalten, damit sie ihren Auftritt behaelt. */
.seitenkopf{ padding-block:clamp(40px,6vw,76px) clamp(28px,4vw,48px); }
.seitenkopf h1{ font-size:clamp(2rem,4.2vw,3.2rem); max-width:22ch; text-wrap:balance; }
/* Lange Ueberschrift in zwei Stufen: erster Satz gross, zweiter als Unterzeile.
   Beides bleibt eine h1. */
.seitenkopf h1.seitenkopf__zwei{ max-width:none; }
.seitenkopf__zwei span{ display:block; font-size:max(.52em, 1.25rem); line-height:1.3; letter-spacing:0;
  margin-top:.55em; max-width:40ch; color:var(--ink-soft); text-wrap:balance; }
.seitenkopf__lead{ margin-top:1.3rem; max-width:62ch; color:var(--ink-soft); font-size:1.05rem; }
.seitenkopf--welt h1{ color:var(--wc); }
.seitenkopf__claim{ font-family:var(--serif); font-size:clamp(1.25rem,2.4vw,1.6rem);
  color:var(--ink); margin-top:.6rem; }
.seitenkopf__ebene{ display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--wc); margin-bottom:1.1rem; }
.seitenkopf__ebene::before{ content:''; width:26px; height:2px; background:var(--wc); }

/* Brotkrumen. Zweiter Weg zurueck, wichtig auf den Weltseiten. */
.krume{ font-family:var(--sans); font-size:.76rem; letter-spacing:.06em;
  color:var(--ink-soft); padding-top:1.4rem; }
.krume ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.55em; margin:0; padding:0; }
.krume li+li::before{ content:'›'; margin-right:.55em; opacity:.6; }
.krume a{ color:var(--ink-soft); display:inline-block; padding-block:5px; }
.krume li{ display:flex; align-items:center; }

/* ---------- Rechtstextseite ----------
   Schlichte Textvorlage. Eine Spalte, begrenzte Zeilenlaenge, klare Abstaende. */
.rechtstext{ max-width:72ch; padding-bottom:var(--sect); }
.rechtstext h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin-top:clamp(28px,3.4vw,44px); }
.rechtstext h3{ font-size:1.1rem; margin-top:1.8rem; }
.rechtstext p,.rechtstext ul{ margin-top:.8em; color:var(--ink-soft); }
/* max-width und overflow-wrap: lange Adressen im Rechtstext brechen sonst nicht um,
   weil der Verweis als inline-block ein unteilbarer Kasten ist (WebKit, 360 bis 390 px). */
.rechtstext a{ display:inline-block; max-width:100%; overflow-wrap:anywhere; padding-block:4px; }
.rechtstext ul{ padding-left:1.2em; }
.rechtstext li{ margin-bottom:.4em; }
.rechtstext .platzhalter{ background:var(--surface); border-left:3px solid var(--taupe);
  padding:1rem 1.2rem; font-size:.92rem; }

/* ---------- Mobil: Kopf und Fuss ---------- */
@media (max-width:860px){
  .ftr__grid{ grid-template-columns:1fr 1fr; }
  .nav{ display:none; }
  .burger{ display:block; }
  .nav.is-open{ display:flex; flex-direction:column; gap:1.3rem; align-items:flex-start;
    position:absolute; inset:100% 0 auto; background:var(--page);
    border-bottom:1px solid var(--line); padding:1.6rem var(--gut) 2rem; }
}
@media (max-width:560px){
  .ftr__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   Theme-Zusaetze, die der Entwurf nicht kennt
   ------------------------------------------------------------
   Aus tools/theme-zusatz.css. Hier steht nur, was erst WordPress
   noetig macht: Bitmap-Logo, Standardseite, Suche, Beitragsraster
   und die Core-Bloecke im Markenbild.
   ============================================================ */

/* Falls im Customizer doch ein Bitmap-Logo gesetzt wird, tritt es an die Stelle
   des Lockups. Es kann den Wechsel Lockup/Wortmarke nicht mitmachen, deshalb
   ist das ausdruecklich die Ausnahme und nicht der Normalfall. */
.custom-logo-link{ display:block; line-height:0; }
.custom-logo-link img{ width:auto; max-height:80px; }
.hdr.is-kompakt .custom-logo-link img{ max-height:44px; }

/* Der Vorspann im Seitenkopf der Theme-Vorlagen (404, Suche) */
.seitenkopf .lead{ margin-top:1.4rem; }

/* Inhaltsbereich einer normalen Seite ohne Sektionsbloecke */
.inhalt{ padding-bottom:var(--sect); max-width:72ch; }
.inhalt > *:last-child{ margin-bottom:0; }

/* Suche */
.suchform{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-block:1.6rem; }
.suchform__feld{ font-family:var(--text); font-size:1rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line); padding:.85em 1em; min-width:min(100%,22rem); }
.suchform__feld:focus-visible{ outline:3px solid var(--brand-deep); outline-offset:2px; }

/* Beitragsraster (Blog/Archiv). Ohne Redaktionsteil im Angebot nur Fallback. */
.raster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:clamp(24px,3vw,40px); padding-bottom:var(--sect); }
.karte h2{ font-size:1.3rem; margin-bottom:.4em; }
.karte a{ text-decoration:none; }
.karte a:hover{ text-decoration:underline; }
.karte time{ display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:.6em; }

/* Core-Bloecke. Tabelle, Zitat und Trenner kommen sonst im WordPress-Default
   daher und fallen im Markenbild auf. */
.wp-block-table table{ border-collapse:collapse; width:100%; }
.wp-block-table td,.wp-block-table th{ border:1px solid var(--line); padding:.7em .9em; }
.wp-block-table th{ font-family:var(--sans); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; text-align:left; background:var(--surface); }

.wp-block-quote{ border-left:2px solid var(--brand); padding-left:1.4em;
  font-family:var(--serif); font-size:1.25rem; line-height:1.4; font-style:normal; margin-inline:0; }
.wp-block-quote cite{ display:block; font-family:var(--sans); font-size:.78rem; font-style:normal;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:1em; }

.wp-block-separator{ border:0; border-top:1px solid var(--line); margin-block:var(--sect); }

.wp-block-button__link{ font-family:var(--sans); font-size:.85rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; padding:.95em 1.9em; border-radius:999px; }

/* Paginierung der Beitragsliste */
.wp-block-post-terms,.nav-links{ font-family:var(--sans); font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; display:flex; gap:1rem; flex-wrap:wrap; padding-bottom:var(--sect); }

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