/*
Theme Name:     Atelier Seiffarth Child
Theme URI:      https://www.7einhalb.de
Description:    Child-Theme fuer Atelier Seiffarth
Author:         7einhalb - Maik Bernstein
Author URI:     https://www.7einhalb.de
Template:       generatepress
Version:        0.1.0
*/

/* ============================================================
   1  SCHRIFTEN — ausschliesslich vom eigenen Webspace
   Dateien liegen in themes/seiffarth-child/fonts/.
   Kein Request an fonts.googleapis.com oder fonts.gstatic.com.
   ============================================================ */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/jost-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: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 400;
  font-display: swap;
  src: url('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: 500;
  font-display: swap;
  src: url('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;
}

/* ============================================================
   2  FALLBACK-KETTEN
   Drei Rollen, drei Ketten. Nirgends sonst im Projekt wird ein
   font-family-Wert ausgeschrieben — immer diese Variablen.
   ============================================================ */

:root {
  --schrift-marke: 'Jost', 'Century Gothic', Futura, system-ui, sans-serif;
  --schrift-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --schrift-mass: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

body {
  font-family: var(--schrift-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6, .site-title {
  font-family: var(--schrift-marke);
  text-wrap: balance;
}

/* ============================================================
   3  SATZ — linksbuendig, keine Silbentrennung, kein Blocksatz
   ============================================================ */

body, h1, h2, h3, h4, h5, h6, p, li, dd, dt {
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}

/* ============================================================
   4  MARKIERUNG UND FOKUS
   Fokus ist sichtbar und traegt die Markenfarbe. Nie entfernen.
   ============================================================ */

::selection {
  background: var(--base-3);
  color: var(--contrast);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 3px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   5  BEWEGUNG — Designlinie 07
   Sektionen kommen einmalig herein: 16px aufwaerts, 0 -> 1,
   700 ms, cubic-bezier(.22,1,.36,1). Kein Rueckwaerts-Ausblenden.
   Die Klasse setzt interaktion.js; ohne JS bleibt alles sichtbar.
   ============================================================ */

.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms cubic-bezier(.22, 1, .36, 1),
              transform 700ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.js-reveal.is-sichtbar {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   6  FORMULARE — flach, rechtwinklig, kein Radius
   ============================================================ */

input:not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']),
textarea,
select {
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--contrast);
  background: var(--base);
  border: 1px solid var(--contrast-3);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 200ms ease;
}

input:not([type='submit']):not([type='button']):focus,
textarea:focus,
select:focus {
  border-color: var(--accent-dark);
}

input::placeholder,
textarea::placeholder {
  color: var(--contrast-2);
  opacity: .7;
}

label,
.wpforms-field-label {
  font-family: var(--schrift-mass);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--contrast-2);
}

button,
input[type='submit'],
.wpforms-submit {
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  border: 0;
  border-radius: 0;
  padding: 14px 28px;
  background: var(--contrast);
  color: var(--base);
  cursor: pointer;
  transition: background-color 200ms ease;
}

button:hover,
input[type='submit']:hover,
.wpforms-submit:hover {
  background: var(--accent-dark);
  color: var(--base);
}

/* ============================================================
   7  BILDREGIE — Designlinie 05
   Schwarz-Weiss ist Haltung, Farbe ist Beweis.
   ============================================================ */

.ist-sw img,
img.ist-sw {
  filter: grayscale(1) contrast(1.06);
}

/* ============================================================
   8  DRUCK
   ============================================================ */

@media print {
  .js-reveal {
    opacity: 1;
    transform: none;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 11px;
    color: #555;
  }
}

/* ============================================================
   9  KOPF — Wortmarke und Navigations-CTA
   Das Logo liegt als schwarze Wortmarke auf transparentem Grund
   vor. Auf dem dunklen Kopf wird daraus per CSS-Maske eine
   Messing-Marke: die Bilddatei gibt nur die Form vor, die Farbe
   kommt aus der Palette. Die Bilddatei selbst bleibt unberuehrt.
   Ohne mask-Unterstuetzung greift der invert-Zweig.
   ============================================================ */

.site-logo { display: flex; align-items: center; }

.site-logo img {
  display: block;
  height: 46px;
  width: auto;
  max-width: 100%;
}

@media (max-width: 767px) {
  .site-logo img { height: 38px; }
}

/* Fallback zuerst: sichtbares, invertiertes Bild. */
.site-header .site-logo img,
.mobile-header-navigation .site-logo img { filter: invert(1); }

@supports (mask-image: url(https://www.seiffarth.art/wp-content/uploads/2026/06/Atelier-Seiffarth-Logo-K.png)) or (-webkit-mask-image: url(https://www.seiffarth.art/wp-content/uploads/2026/06/Atelier-Seiffarth-Logo-K.png)) {
  .site-header .site-logo a,
  .mobile-header-navigation .site-logo a {
    display: inline-block;
    background-color: var(--accent);
    -webkit-mask: url(https://www.seiffarth.art/wp-content/uploads/2026/06/Atelier-Seiffarth-Logo-K.png) no-repeat left center / contain;
    mask: url(https://www.seiffarth.art/wp-content/uploads/2026/06/Atelier-Seiffarth-Logo-K.png) no-repeat left center / contain;
  }
  .site-header .site-logo img,
  .mobile-header-navigation .site-logo img { filter: none; opacity: 0; }
}

/* Der Erstberatungs-Punkt im Menue ist ein Button, kein Link.
   Klasse wird am Menueeintrag gesetzt. */
.main-navigation .menu-item.as-nav-cta > a {
  background-color: var(--accent);
  color: var(--base-4);
  font-family: var(--schrift-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  margin-left: 10px;
  padding: 13px 22px;
  text-transform: none;
  transition: background-color 200ms ease-out;
}

.main-navigation .menu-item.as-nav-cta > a:hover,
.main-navigation .menu-item.as-nav-cta.current-menu-item > a {
  background-color: var(--base);
  color: var(--base-4);
}

/* Der aktive Menuepunkt traegt eine Messingkante statt einer Flaeche. */
.main-navigation .main-nav .current-menu-item:not(.as-nav-cta) > a {
  box-shadow: inset 0 -1px 0 0 var(--accent);
}

/* GP rechnet die Kopfbreite border-box inklusive 40px Innenabstand, der
   Abschnitts-Inhalt nutzt die vollen 1180px. Ohne Ausgleich steht der Kopf
   40px versetzt zum Seiteninhalt. Beleg: gleicher Fall in Raum Liebelei. */
.site-header .inside-header,
#site-navigation .inside-navigation {
  max-width: calc(1180px + 80px);
}