/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/* =========================================================================
   Kopfbereich — Leiste genau so hoch wie das Logo, ohne Polsterung
   Theme-Standard: Navbar 72 px, Logo 28 px. Hier: 64 px / 64 px.
   Die 64 px sind aus einem iPhone-Screenshot der Fassung zurueckgemessen,
   die das Theme-Update vom 17. August ueberschrieben hat: Leiste 64 px
   ungescrollt, 48 px gescrollt, Logo unveraendert 64 / 48 px.
   ========================================================================= */

/* Das Theme deklariert den Token auf `:root, :root[data-theme="light"]`.
   Das Umschalt-Script setzt data-theme immer explizit, damit gewinnt dort die
   hoehere Spezifitaet gegen ein blosses :root — ein Override nur auf :root
   kam nie an, der Kopf blieb ungescrollt beim Theme-Wert und wuchs beim
   Scrollen auf den Wert der eigenen .scrolled-Regel. Deshalb hier dieselbe
   Selektorliste. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] { --q2-header-height: 64px; }

.navbar-brand img {
  height: 64px;
  transition: height 0.2s ease;
}

/* Beim Scrollen faehrt der Header zusammen — Logo skaliert mit.
   Die 44 px sind nur eine Untergrenze: das Logo mit 48 px bestimmt die
   tatsaechliche Hoehe, jeder Wert bis 48 px rendert identisch. */
.header-animated.scrolled #header .navbar { min-height: 44px; }
.header-animated.scrolled .navbar-brand img { height: 48px; }

/* Das Logo ist eine schwarze Zeichnung auf transparentem Grund und waere im
   Dunkelmodus fast unsichtbar. Umkehren macht daraus eine helle Zeichnung.
   Der Umschalter setzt data-theme immer explizit, auch bei "auto" — eine
   prefers-color-scheme-Abfrage ist daher nicht noetig. */
:root[data-theme="dark"] .navbar-brand img { filter: invert(1); }

/* =========================================================================
   Fusszeile — flach, ohne die duenne Trennlinie darueber
   Theme-Standard: padding-block 2.5rem + 1 px border-top. Der Innenabstand
   ist ganz raus, die Hoehe ergibt sich jetzt allein aus der Textzeile.
   Gilt fuer alle Seiten, nicht nur die Startseite.
   ========================================================================= */

#footer {
  border-top: 0;
  padding-block: 0;
}

/* Pico gibt jedem <section> ein `margin-bottom: 1rem`. Das trifft hier zwei
   Elemente, und das entscheidende ist das aeussere:

   1. `#body-wrapper` ist selbst ein <section> und ein direktes Flex-Item von
      `body`. Sein Rand kollabiert deshalb nirgendwohin, sondern steht als
      weisser Streifen zwischen Inhalt und Fusszeile. Das ist die Luecke.
   2. Der klassenlose <section>-Wrapper, den Grav um den Seiteninhalt legt.
      Sein Rand faellt durch die randlosen Eltern bis nach aussen durch.

   Ein erster Versuch hat nur (2) stillgelegt und war wirkungslos — im
   Screenshot blieb der Streifen auf den Bildpunkt gleich. */
#body-wrapper,
.content-item section { margin-bottom: 0; }

/* =========================================================================
   Startseite (body_classes: mmp-home)
   Nachbau der frueheren WordPress/Elementor-Vorlage.
   Farben:  #90B88F Salbei · #fbe8a6 Creme · #2b2a28 Dunkel · #D2E9C3 Karte
   Schrift: Georgia 600 (Ueberschriften) · Tahoma (Fliesstext)
   ========================================================================= */

/* --- Theme-Rahmen aufheben: die Sections laufen randlos ------------------
   Standardmaessig sitzt der Inhalt in einer 960-px-Karte mit Polsterung.
   `:root` im Selektor hebt die Spezifitaet ueber die Dark-Mode-Regel des
   Themes, die sonst den Karten-Schatten zurueckholt. */
body.mmp-home #body-wrapper {
  padding-block: 0;
  background: #ffffff;
}
body.mmp-home #body-wrapper > .container {
  max-width: none;
  padding-inline: 0;
}
:root body.mmp-home #body-wrapper > .container > .content-item {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* --- Grundgeruest -------------------------------------------------------- */
.mmp-page {
  --mmp-dark: #2c2927;
  --mmp-body: #534a45;
}

/* Ein Gutter am Container statt horizontaler Polsterung je Bereich.
   Gilt bei jeder Breite, damit der Inhalt nie die Viewport-Kante beruehrt
   — das passierte zwischen 1025 und 1200 px, wo keine Media Query griff.
   1300 minus zweimal 50 ergibt auf breiten Schirmen wieder die 1200 px
   des Entwurfs; darunter schrumpft der Abstand mit. */
.mmp-page .mmp-container {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  padding-inline: clamp(25px, 4vw, 50px);
}

.mmp-page .mmp-row { display: flex; flex-wrap: wrap; }
.mmp-page .mmp-mid { align-items: center; }

.mmp-page img { max-width: 100%; height: auto; }

/* Ueberschriften — Georgia, ohne den Deko-Balken des Themes */
.mmp-page h2.mmp-h,
.mmp-page h3.mmp-h {
  font-family: Georgia, serif;
  font-weight: 600;
  line-height: 1.3em;
  letter-spacing: normal;
  color: var(--mmp-dark);
  margin: 0;
  padding: 0;
}
.mmp-page h2.mmp-h { font-size: 52px; }
.mmp-page h3.mmp-h { font-size: 36px; }
.mmp-page h2.mmp-h::before,
.mmp-page h3.mmp-h::before { content: none; display: none; }

/* Fliesstext */
.mmp-page .mmp-text {
  font-family: Tahoma, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--mmp-body);
}
.mmp-page .mmp-text p { margin: 0 0 1.6em; }
.mmp-page .mmp-text p:last-child { margin-bottom: 0; }

/* Button — transparent mit 2-px-Unterstrich, Pfeil rechts */
.mmp-page .mmp-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-family: Tahoma, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 12px 24px;
  color: var(--mmp-body);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--mmp-body);
  border-radius: 0;
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s;
}
.mmp-page .mmp-btn:hover,
.mmp-page .mmp-btn:focus {
  color: var(--mmp-dark);
  border-bottom-color: var(--mmp-dark);
  text-decoration: none;
}
.mmp-page .mmp-btnwrap { text-align: center; margin-top: 20px; }

/* --- 1 · About me -------------------------------------------------------- */
.mmp-page .mmp-about { background-color: #90B88F; padding: 0; }
.mmp-page .mmp-about-text { flex: 0 0 50%; padding: 96px 80px 96px 0; }
.mmp-page .mmp-about-img  { flex: 0 0 50%; padding: 0 0 0 80px; text-align: right; }
.mmp-page .mmp-about .mmp-h { color: #ffffff; margin-bottom: 20px; }
.mmp-page .mmp-about .mmp-text { color: #ffffff; text-align: justify; }
.mmp-page .mmp-about .mmp-text p { color: #ffffff; }
.mmp-page .mmp-about .mmp-text a { color: #ffffff; text-decoration: underline; }

/* --- 2 · Portfolio ------------------------------------------------------- */
.mmp-page .mmp-portfolio {
  position: relative;
  background-color: #ffffff;
  padding: 96px 0;
}
.mmp-page .mmp-portfolio::before {   /* Elementor-Overlay: #fbe8a6 @ 20 % */
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fbe8a6;
  opacity: 0.2;
  pointer-events: none;
}
.mmp-page .mmp-portfolio > .mmp-container { position: relative; }
.mmp-page .mmp-portfolio .mmp-h { text-align: center; margin-bottom: 20px; }
.mmp-page .mmp-grid { margin: 0 -10px; }
.mmp-page .mmp-grid figure { flex: 0 0 33.3333%; margin: 0; padding: 0 10px; }
.mmp-page .mmp-grid img { width: 100%; display: block; }

/* --- 3 · Call to action -------------------------------------------------- */
/* Dunkler Rahmen: oben und unten gleich breit um Karte und Bild herum.
   Die zwischenzeitliche Verschmaelerung unten (100 px) ist mit der
   Vereinheitlichung auf 96 px wieder aufgehoben. */
.mmp-page .mmp-cta { background-color: #2b2a28; padding: 96px 0; }
.mmp-page .mmp-cta-card {
  flex: 0 0 33.3333%;
  background-color: #D2E9C3;
  /* oben mehr Luft, damit die Ueberschrift tiefer in der Karte sitzt */
  padding: 140px 45px 45px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mmp-page .mmp-cta-card .mmp-h { margin-bottom: 35px; }
.mmp-page .mmp-cta-card .mmp-btnwrap { text-align: left; margin-top: 50px; }
.mmp-page .mmp-cta-img { flex: 0 0 66.6667%; font-size: 0; }
.mmp-page .mmp-cta-img img { width: 100%; display: block; }

/* --- Tablet (Elementor-Breakpoint 1024 px) ------------------------------- */
@media (max-width: 1024px) {
  .mmp-page .mmp-about { padding-block: 50px; }
  .mmp-page .mmp-about-text { padding: 0; }
  .mmp-page .mmp-about-img { padding: 0 0 0 40px; }
  .mmp-page .mmp-portfolio { padding-block: 96px 50px; }
  .mmp-page .mmp-cta { padding: 60px 0 40px; }
  .mmp-page .mmp-cta-card { padding: 110px 30px 30px; }
}

/* --- Ueberschriften-Staffelung (Astra-Breakpoints) ----------------------- */
@media (max-width: 921px) {
  .mmp-page h2.mmp-h { font-size: 32px; }
  .mmp-page h3.mmp-h { font-size: 26px; }
}

/* --- Mobil (Elementor-Breakpoint 767 px) --------------------------------- */
@media (max-width: 767px) {
  .mmp-page .mmp-about-text,
  .mmp-page .mmp-about-img,
  .mmp-page .mmp-cta-card,
  .mmp-page .mmp-cta-img,
  .mmp-page .mmp-grid figure { flex-basis: 100%; }

  .mmp-page .mmp-about { padding-block: 50px 0; }
  .mmp-page .mmp-about-img { margin: 25px 0 0; padding: 0; text-align: center; }
  .mmp-page .mmp-about-img img { width: 100%; }
  .mmp-page .mmp-portfolio { padding-block: 50px; }
  .mmp-page .mmp-grid figure { padding: 10px; }
  .mmp-page .mmp-cta { padding: 40px 0 20px; }
  /* Auf dem Handy richtet sich die Kartenhoehe nach dem Inhalt — die grosse
     Kopfpolsterung der Desktop-Ansicht waere hier nur eine leere Flaeche. */
  .mmp-page .mmp-cta-card { text-align: left; padding: 30px 30px 30px; }
}

@media (max-width: 544px) {
  .mmp-page h2.mmp-h { font-size: 28px; }
  .mmp-page h3.mmp-h { font-size: 22px; }
}

/* --- Erscheinungsbild: fest hell ----------------------------------------- */
/* Der Umschalter des Themes wird nicht benoetigt. Der Startwert steht in der
   Theme-Konfiguration auf "light", hier verschwindet nur noch der Knopf.
   `color-scheme` haengt zusaetzlich davon ab: das Theme setzt
   <meta name="color-scheme" content="light dark">, worauf der Browser auf
   Systemen im Dunkelmodus Formularfelder und Scrollbalken dunkel einfaerbt —
   auch wenn die Seite selbst hell bleibt. Das Kontaktformular braucht das
   nicht. */
:root { color-scheme: light; }

.theme-toggle,
[data-theme-toggle] { display: none !important; }

/* --- Footer-Symbole ohne Font Awesome ------------------------------------ */
/* Font Awesome ist abgeschaltet (es wurde nur vom Cloudflare-CDN geladen).
   Im Footer standen dadurch zwei leere <i>: das Code-Zeichen und das Herz.
   Beide kommen jetzt aus dem Systemzeichensatz, kein externer Abruf noetig.
   U+FE0E erzwingt beim Herz die Text- statt der Emoji-Darstellung.
   Die Pulsieranimation (.pulse) stammt aus theme.css und laeuft unveraendert.
   Die drei Icons des Umschalters brauchen keinen Ersatz — er ist ausgeblendet. */
#footer i.fa-solid { font-style: normal; }
#footer i.fa-code::before  { content: "</>"; letter-spacing: -0.06em; }
#footer i.fa-heart::before { content: "\2665\FE0E"; font-size: 1.35em; line-height: 1; vertical-align: -0.16em; }