/*
Theme Name:   WiserAI
Theme URI:    https://wiserai.de
Description:  Child-Theme von Extendable mit dem WiserAI-Design-System für die Webseite: warmes Papier, Pine und Teal, Anton für Überschriften, Libre Franklin für Text, keine abgerundeten Ecken.
Author:       Christian Beeck
Template:     extendable
Version:      1.0.3
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  wiserai
*/

/* =========================================================
   Grundlagen
   Farben, Schriften, Größen kommen aus theme.json und stehen
   als --wp--preset--… zur Verfügung. Hier steht nur, was
   theme.json nicht kann: Layout, Hover, Sonderfälle.
   ========================================================= */

:root {
  --wiserai-bahn-w: clamp(15rem, 32vw, 560px);
  --wiserai-gx: clamp(16px, 4vw, 40px);
  --wiserai-scrim-photo: linear-gradient(to top, rgba(10, 10, 10, .7), rgba(10, 10, 10, 0));
  --wiserai-hover-lift: translateY(-2px);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Buttons: eckig, fett, Hover hebt an statt umzufärben */
.wp-block-button__link,
.wp-element-button,
.wpcf7-submit {
  border-radius: 0 !important;
  transition: transform .15s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.wpcf7-submit:hover {
  transform: var(--wiserai-hover-lift);
}
/* Sekundär-Button: transparent mit 2px-Pine-Rahmen (Blockstil „Umriss“) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--wp--preset--color--primary);
  border: 2px solid var(--wp--preset--color--primary);
}

/* Fokus sichtbar, in Teal */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--wp--preset--color--secondary);
  outline-offset: 3px;
}

/* Versalien-Label mit Teal-Punkt als Trenner (Kicker) */
.wiserai-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}
.wiserai-kicker .wiserai-dot {
  color: var(--wp--preset--color--secondary);
}
.wiserai-micro {
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Navigation: 600, Teal-Unterstrich bei Hover, keine Hamburger-Umfärbung */
.wp-block-navigation a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
}
.wp-block-navigation a:hover,
.wp-block-navigation .current-menu-item > a {
  border-bottom-color: var(--wp--preset--color--secondary);
}

/* =========================================================
   Kopfzeile (Logo + Navigation) – im Hero und auf Unterseiten
   ========================================================= */
.wiserai-header {
  display: flex;
  align-items: center;
  gap: 40px;
}
.wiserai-logo { margin: 0; }
.wiserai-header .wiserai-logo img {
  height: 40px;
  width: auto;
}
.wiserai-header .wp-block-navigation {
  margin-left: auto;
}
@media (max-width: 700px) {
  .wiserai-header {
    flex-wrap: wrap;
    gap: 16px 24px;
  }
  .wiserai-header .wp-block-navigation {
    margin-left: 0;
    width: 100%;
  }
  .wiserai-header .wp-block-navigation .wp-block-navigation__container {
    justify-content: flex-start;
    gap: 12px 20px;
  }
  .wiserai-header .wp-block-navigation a {
    font-size: var(--wp--preset--font-size--x-small);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
}

/* =========================================================
   Hero: Textspalte links, Porträtbahn rechts angepinnt
   (Entwurf 6a „beruhigt“)
   ========================================================= */
.wiserai-hero {
  position: relative;
  /* volle Fensterbreite: Porträt am rechten Rand, Text in der 1200px-Spalte */
  max-width: none;
  margin-inline: 0;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
}
.wiserai-hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px var(--wiserai-gx) 48px;
  /* linke Kante bündig mit den Abschnitten darunter (Inhaltsbreite 75rem) */
  padding-left: max(var(--wiserai-gx), env(safe-area-inset-left, 0px), calc((100% - 75rem) / 2));
}
.wiserai-hero .wiserai-header,
.wiserai-hero__main {
  margin-right: calc(var(--wiserai-bahn-w) + 40px);
}
.wiserai-hero__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 680px;
  padding-top: 48px;
}
.wiserai-hero__main > * {
  margin-top: 0;
  margin-bottom: 0;
}
.wiserai-hero__main > h1 { margin-bottom: 26px; }
.wiserai-hero__main > .wiserai-lead { margin-bottom: 14px; }
.wiserai-hero__main > .wiserai-text { margin-bottom: 30px; }
.wiserai-hero__main > .wp-block-buttons { margin-bottom: 38px; }

/* Headline zweizeilig: zweite Zeile eingerückt und in Pine */
.wiserai-hero h1 mark.has-inline-color {
  display: block;
  margin-left: clamp(24px, 6vw, 72px);
  background: transparent;
  color: var(--wp--preset--color--primary) !important;
}
.wiserai-lead {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.5;
  max-width: 44ch;
}
.wiserai-text {
  max-width: 48ch;
}
.wiserai-hero .wp-block-button__link {
  min-height: 54px;
  font-size: 1.125rem;
  padding: 10px 30px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Zitat im Hero */
.wiserai-hero .wp-block-quote {
  max-width: 56ch;
  margin: 0;
}
.wiserai-hero .wp-block-quote p {
  margin: 0 0 8px;
}
.wiserai-hero .wp-block-quote cite {
  font-style: normal;
  display: block;
}

/* Porträtbahn: Bild füllt die Bahn, schwarzweiß, Namensschild mit Abdunklung unten */
.wiserai-bahn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0 !important;
  width: var(--wiserai-bahn-w);
  background: var(--wp--preset--color--photo);
  overflow: hidden;
}
.wiserai-bahn__img {
  margin: 0;
  position: absolute;
  inset: 0;
}
.wiserai-bahn .wiserai-bahn__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(1) contrast(1.08);
  display: block;
}
.wiserai-bahn__plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 64px 20px 18px;
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  background: var(--wiserai-scrim-photo);
}
.wiserai-bahn .wiserai-name {
  font-family: var(--wp--preset--font-family--anton);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.625rem;
  line-height: 1.05;
  color: var(--wp--preset--color--background);
  margin: 0;
}
.wiserai-bahn .wiserai-title {
  margin: 5px 0 0;
  color: rgba(250, 250, 247, .85);
}

@media (max-width: 899px) {
  .wiserai-hero { min-height: 0; }
  .wiserai-hero .wiserai-header,
  .wiserai-hero__main {
    margin-right: 0;
  }
  .wiserai-hero__main {
    max-width: none;
    padding-top: 36px;
  }
  .wiserai-hero__main > .wp-block-quote { margin-bottom: 8px; }
  /* Bahn wird zum Querband unter dem Text */
  .wiserai-bahn {
    position: relative;
    inset: auto;
    width: auto;
    height: 44vh;
    min-height: 300px;
    margin-top: 8px !important;
  }
}

/* Zitat-Quelle im Hero als Versalien-Label */
.wiserai-hero .wp-block-quote cite {
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}

/* Kopfzeile auf Unterseiten (ohne Hero) */
.wiserai-header-bar {
  max-width: 1280px;
  margin-inline: auto;
  padding: 28px var(--wiserai-gx);
}
.wiserai-page {
  padding-top: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(48px, 8vw, 96px);
}

/* =========================================================
   Bestehende Abschnitte der Startseite
   Angepasst an den echten Seitenaufbau von wiserai.de (Stand 26.10.2026).
   Anker: #workshops (Ich zeige Ihnen), #Workshops (Antworten),
   #kundenstimmen, #kontakt, #uebermich, #datenschutz, #impressum
   ========================================================= */

/* Der alte Hero („KI-Kompetenz für echten Mehrwert“) wurde am 26.10.2026 aus der Startseite entfernt. */

/* Keine Rundungen – auch nicht dort, wo sie im Editor eingestellt sind */
.wp-block-post-content [style*="border-radius"],
.wp-block-post-content .is-style-rounded img,
.wp-block-post-content .has-custom-border img {
  border-radius: 0 !important;
}

/* Abschnitte: 2px-Tintenlinie oben, großzügige Höhe */
#workshops, #Workshops, #kundenstimmen, #kontakt, #uebermich, #datenschutz, #impressum {
  padding-top: clamp(48px, 8vw, 96px) !important;
  padding-bottom: clamp(48px, 8vw, 96px) !important;
  padding-left: max(var(--wiserai-gx), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(var(--wiserai-gx), env(safe-area-inset-right, 0px)) !important;
}
#workshops, #kundenstimmen, #uebermich, #datenschutz, #impressum {
  border-top: 2px solid var(--wp--preset--color--foreground);
}

/* Icons, Stockfotos und Avatare entfallen im Design System */
#workshops .wp-block-image,
#Workshops .wp-block-image,
#Workshops .wp-block-cover,
#kundenstimmen .wp-block-image {
  display: none !important;
}
#workshops > .wp-block-columns > .wp-block-column:has(> .wp-block-image:only-child),
#Workshops > .wp-block-columns > .wp-block-column:has(> .wp-block-cover:only-child) {
  display: none !important;
}
/* Die verbleibende Spalte nimmt die volle Breite */
#workshops > .wp-block-columns > .wp-block-column,
#Workshops > .wp-block-columns > .wp-block-column {
  flex-basis: 100% !important;
  flex-grow: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#workshops > .wp-block-columns,
#Workshops > .wp-block-columns {
  max-width: var(--wp--style--global--wide-size) !important;
  margin-inline: auto !important;
}
#workshops .is-nowrap > .wp-block-group,
#Workshops .is-nowrap > .wp-block-group {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* --- „Ich zeige Ihnen…“: Papiergrund, drei Punkte nebeneinander --- */
#workshops.wp-block-group {
  background: var(--wp--preset--color--background) !important;
}
#workshops .wp-block-column.has-large-font-size {
  font-size: inherit !important;
}
#workshops h3.wp-block-heading {
  font-family: var(--wp--preset--font-family--libre-franklin);
  font-size: var(--wp--preset--font-size--medium) !important;
  font-weight: 400;
  line-height: 1.5 !important;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
#workshops .is-nowrap {
  border-top: 2px solid var(--wp--preset--color--foreground);
  padding-top: 18px;
}
@media (min-width: 782px) {
  #workshops > .wp-block-columns > .wp-block-column:first-child {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 40px);
    align-items: start;
  }
  #workshops > .wp-block-columns > .wp-block-column:first-child > :first-child {
    grid-column: 1 / -1;
  }
  #workshops > .wp-block-columns > .wp-block-column:first-child > .is-nowrap {
    margin-top: 0 !important;
  }
}

/* --- „Meine Workshops geben Antwort“: Pine-Block, drei Fragen nebeneinander --- */
#Workshops.wp-block-group {
  background: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--tertiary);
}
#Workshops .wp-block-heading,
#Workshops p {
  color: var(--wp--preset--color--tertiary);
}
#Workshops h3.wp-block-heading {
  color: var(--wp--preset--color--teal-light);
  font-size: 1.625rem !important;
  line-height: 1.05 !important;
  letter-spacing: .02em;
  margin: 0;
}
#Workshops p.has-small-font-size {
  font-size: 1.0625rem !important;
  line-height: 1.6;
  margin-top: 0 !important;
}
#Workshops p strong {
  font-weight: 400;
}
#Workshops .is-nowrap:has(h3) {
  border-top: 2px solid rgba(245, 240, 228, .5);
  padding-top: 18px;
  margin-top: 32px !important;
}
#Workshops .is-nowrap:not(:has(h3)) {
  margin-top: 10px !important;
}
@media (min-width: 782px) {
  #Workshops > .wp-block-columns > .wp-block-column:last-child {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 40px);
    align-items: start;
  }
  #Workshops > .wp-block-columns > .wp-block-column:last-child > :nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  #Workshops > .wp-block-columns > .wp-block-column:last-child > :nth-child(2) { grid-column: 1; grid-row: 2; }
  #Workshops > .wp-block-columns > .wp-block-column:last-child > :nth-child(3) { grid-column: 1; grid-row: 3; }
  #Workshops > .wp-block-columns > .wp-block-column:last-child > :nth-child(4) { grid-column: 2; grid-row: 2; }
  #Workshops > .wp-block-columns > .wp-block-column:last-child > :nth-child(5) { grid-column: 2; grid-row: 3; }
  #Workshops > .wp-block-columns > .wp-block-column:last-child > :nth-child(6) { grid-column: 3; grid-row: 2; }
  #Workshops > .wp-block-columns > .wp-block-column:last-child > :nth-child(7) { grid-column: 3; grid-row: 3; }
  #Workshops .is-nowrap:has(h3) {
    margin-top: 0 !important;
  }
}

/* --- Kundenstimmen: keine Kästen, 2px-Linie oben, Name als Versalien-Label --- */
#kundenstimmen .has-tertiary-background-color {
  background: transparent !important;
  border-top: 2px solid var(--wp--preset--color--foreground);
  padding: 18px 0 0 !important;
}
#kundenstimmen .has-tertiary-background-color > p {
  font-size: 1.0625rem;
  line-height: 1.55;
}
#kundenstimmen .has-tertiary-background-color > p:first-child {
  margin-top: 0 !important;
}
#kundenstimmen .is-nowrap {
  justify-content: flex-start !important;
  margin-top: 20px;
}
#kundenstimmen .is-nowrap > .wp-block-group {
  padding: 0 !important;
}
#kundenstimmen h4.wp-block-heading {
  font-family: var(--wp--preset--font-family--libre-franklin);
  font-size: var(--wp--preset--font-size--x-small) !important;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--wp--preset--color--primary);
  margin: 0;
}
#kundenstimmen p.has-small-font-size {
  font-size: var(--wp--preset--font-size--x-small) !important;
  line-height: 1.4;
  color: var(--wp--preset--color--primary);
}

/* --- Kontakt: Überschrift linksbündig wie alle anderen --- */
#kontakt .has-text-align-center {
  text-align: left;
}
#kontakt .wpcf7 {
  max-width: 760px;
}

/* --- Über mich: Foto schwarzweiß und eckig, Text in normaler Größe --- */
#uebermich .wp-block-image img {
  filter: grayscale(1) contrast(1.08) !important;
  border-radius: 0 !important;
}
#uebermich h4.wp-block-heading {
  font-family: var(--wp--preset--font-family--libre-franklin);
  font-size: 1.25rem !important;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}
#uebermich p.has-small-font-size {
  font-size: 1.0625rem !important;
  line-height: 1.6;
}

/* --- Datenschutz & Impressum: oben ausrichten statt mittig --- */
#datenschutz .wp-block-column,
#impressum .wp-block-column {
  align-self: flex-start !important;
}

/* Kontakt: Creme-Fläche, Formular eckig mit 2px-Rahmen (Contact Form 7) */
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  max-width: 100%;
  font-family: var(--wp--preset--font-family--libre-franklin);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--wp--preset--color--foreground);
  background: var(--wp--preset--color--background);
  border: 2px solid var(--wp--preset--color--foreground);
  border-radius: 0;
  padding: 12px 14px;
  box-sizing: border-box;
}
.wpcf7 textarea { min-height: 140px; }
.wpcf7 label {
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}
.wpcf7-submit {
  background: var(--wp--preset--gradient--brand);
  color: var(--wp--preset--color--tertiary);
  border: 0;
  font-family: var(--wp--preset--font-family--libre-franklin);
  font-weight: 700;
  font-size: 1.0625rem;
  min-height: 50px;
  padding: 14px 28px;
  cursor: pointer;
}
.wpcf7-not-valid-tip { color: var(--wp--preset--color--primary); font-weight: 600; }
.wpcf7-response-output { border: 2px solid var(--wp--preset--color--foreground) !important; border-radius: 0; }

/* Rechtstexte: kleiner und ruhiger */
#datenschutz, #impressum {
  font-size: var(--wp--preset--font-size--small);
}
#datenschutz h3.wp-block-heading, #impressum h3.wp-block-heading,
#datenschutz h4.wp-block-heading, #impressum h4.wp-block-heading {
  font-family: var(--wp--preset--font-family--libre-franklin);
  font-size: var(--wp--preset--font-size--x-small) !important;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--wp--preset--color--primary);
  line-height: 1.4;
}

/* =========================================================
   Fußzeile
   ========================================================= */
.wiserai-footer {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--tertiary);
}
.wiserai-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  padding: 36px var(--wiserai-gx);
  max-width: 1280px;
  margin-inline: auto;
}
.wiserai-footer .wiserai-logo img {
  height: 32px;
  width: auto;
}
.wiserai-footer .wp-block-navigation {
  margin-left: auto;
}
.wiserai-footer .wp-block-navigation a {
  color: var(--wp--preset--color--tertiary);
}
.wiserai-footer .wiserai-copyright {
  width: 100%;
  font-size: var(--wp--preset--font-size--x-small);
  color: rgba(245, 240, 228, .7);
  margin: 0;
}

/* Bewegung nur, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link, .wp-element-button, .wpcf7-submit { transition: none; }
  .wp-block-button__link:hover, .wp-element-button:hover, .wpcf7-submit:hover { transform: none; }
}

/* Contact Form 7: versteckte Felder nie anzeigen */
.wpcf7 .hidden-fields-container { display: none; }