/*
Theme Name: Zumsande Meet
Theme URI: https://luarmedia.de/
Description: Erstgespräch anfragen — das Theme für meet.zumsande.com. Marke, Gestaltung, Kopf- und Fussbereich und die Rechtsseiten. Den Terminvorgang selbst bringt das Plugin "Zumsande Terminsystem" mit; ohne es zeigt die Seite an dessen Stelle einen ehrlichen Hinweis statt eines Fehlers. Ohne Page Builder, ohne externe Buchungsplattform. Betreut von LuarMedia.
Author: LuarMedia
Author URI: https://luarmedia.de/
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zumsande-meet
*/

/* =====================================================================
   SCHRIFT

   Dieselbe Familie wie Seite B und das Dachmarken-Portal, dieselbe Datei,
   selbst ausgeliefert. Keine Verbindung zu Google Fonts - das ist auf
   diesen Seiten kein Detail, sondern Teil dessen, was die
   Datenschutzerklaerung zusagt.

   Nur der aufrechte Schnitt. Kursiv kommt in dieser Anwendung nicht vor,
   und eine Datei, die nie gebraucht wird, gehoert nicht ins Paket.

   Lizenz: SIL Open Font License 1.1, siehe assets/fonts/OFL.txt.
   ================================================================== */
@font-face{
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/familjen-grotesk-latin.woff2") format("woff2");
}

/* =====================================================================
   TOKEN

   Jeder Farbwert stammt aus einer der drei bestehenden Websites. Diese
   Seite erfindet keine Palette - sie ist der vierte Raum derselben Marke,
   nicht ein neues Produkt.

     --papier, --papier-2, --gruen-nebel, --gruen-blass, --tinte*
                            Seite B (Zumsande Buchhaltung)
     --gruen, --gruen-tief  identisch auf Seite A, Seite B und im Portal
     --warn                 Seite B

   Was diese Seite gestalterisch von den anderen unterscheidet, ist
   deshalb nicht die Farbe, sondern die Form: eine einzige Spalte, links
   von einer durchgehenden Registerlinie gehalten. Die Seite sieht aus wie
   ein Aufnahmebogen, der Zeile fuer Zeile ausgefuellt wird - nicht wie
   ein Formular in einer weissen Karte.
   ================================================================== */
:root{
  --papier:      #FBFAF7;
  --papier-2:    #F2EFE7;
  --weiss:       #FFFFFF;
  --gruen-nebel: #EAF4EE;
  --gruen-blass: #E0EADF;

  --gruen:       #0C8F5C;
  --gruen-tief:  #0B4F38;
  --gruen-ink:   #F4FAF6;

  --tinte:       #171B15;
  --tinte-2:     rgba(23,27,21,0.80);
  --tinte-3:     rgba(23,27,21,0.62);

  --linie:       rgba(23,27,21,0.13);
  --linie-stark: rgba(23,27,21,0.26);
  --warn:        #A33418;
  --warn-feld:   #FBF0ED;

  --maxw:        1080px;
  /* Die Spalte, in der wirklich gelesen und ausgefuellt wird. Sie ist
     schmaler als der Container und liegt links darin - auf 1440 entsteht
     dadurch eine ehrliche Asymmetrie statt eines schmalen Bandes in der
     Mitte mit gleich viel Leere auf beiden Seiten. */
  --maxw-spalte: 780px;
  --rand:        clamp(20px, 5vw, 44px);
  --radius:      4px;
  --radius-sm:   3px;

  /* MOTION
     Zwei Kurven mit verschiedener Aufgabe, wie im Portal:
     --antwort  reagiert sofort, landet langsam. Alles, was auf einen Klick
                antwortet.
     --setzen   beginnt kontrolliert und rastet ein. Alles, was sich beim
                Wechsel des Schritts SETZT.
     Beide enden exakt auf dem Zielwert. Kein Federn, kein Ueberschwingen. */
  --antwort:  cubic-bezier(0.22, 1, 0.36, 1);
  --setzen:   cubic-bezier(0.33, 0, 0.12, 1);
  --t-schnell: 160ms;
  --t-mittel:  340ms;
  --t-lang:    620ms;

  --font: "Familjen Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body{
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Deutsche Komposita und lange Adressen sind der haeufigste Grund fuer
     horizontalen Ueberlauf auf 320px. Umbrechen lassen statt hinterher mit
     overflow:hidden zu kaschieren. */
  overflow-wrap: break-word;
}

img, svg{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; }
h1, h2, h3{ margin: 0; font-weight: 700; letter-spacing: -0.022em; line-height: 1.12; }
p{ margin: 0; }
button{ font: inherit; }

/* Ein Fokusring in der Hausfarbe. Tastaturbedienung soll sich nicht wie ein
   Fremdkoerper anfuehlen - und sichtbar bleiben muss sie ohnehin. */
:focus-visible{
  outline: 2px solid var(--gruen-tief);
  outline-offset: 3px;
  border-radius: 2px;
}

.sprung{
  position: absolute; left: -9999px; top: 0;
  background: var(--gruen-tief); color: var(--gruen-ink);
  padding: 12px 18px; z-index: 100; text-decoration: none;
}
.sprung:focus{ left: 8px; top: 8px; }

.nur-sr{
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.bahn{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--rand); }

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

/* =====================================================================
   KOPF

   Maximal reduziert: die Dachmarke, eine Haarlinie, sonst nichts. Es gibt
   auf dieser Seite nichts zu navigieren - jede Navigation waere hier eine
   Einladung, die Aufgabe nicht zu erledigen.
   ================================================================== */
.kopf{
  border-bottom: 1px solid var(--linie);
  background: var(--papier);
}
.kopf-innen{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 18px; padding-bottom: 18px;
}
/* Trefferflaeche mindestens 44px hoch. Die Wortmarke selbst ist bei
   128px Breite nur 19px hoch - als Verweis auf die Dachmarke waere das
   auf dem Telefon ein Ziel, das man dreimal antippen muss (und es
   unterschreitet die 24px aus WCAG 2.2). Das Bild bleibt unveraendert,
   nur der Verweis darum herum bekommt Hoehe. */
.marke{ display: inline-flex; align-items: center; min-height: 44px; }
.marke img{ width: 128px; height: auto; }
.kopf-zurueck{
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; color: var(--tinte-3); text-decoration: none;
  letter-spacing: 0.02em; white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color var(--t-schnell) var(--antwort), border-color var(--t-schnell) var(--antwort);
}
.kopf-zurueck:hover{ color: var(--gruen-tief); border-bottom-color: var(--linie-stark); }

/* =====================================================================
   EINTRITT

   Keine Bildbuehne, kein Video, keine Kachel. Der erste Bildschirm sagt in
   zwei Zeilen, was hier passiert - und die zweite Zeile sagt sofort, dass
   es eine Anfrage ist und keine Buchung. Wer das erst im vierten Schritt
   erfaehrt, ist zu Recht enttaeuscht.
   ================================================================== */
.eintritt{ padding: clamp(46px, 11vw, 86px) 0 clamp(30px, 6vw, 46px); }

.eintritt-innen{ display: grid; gap: clamp(30px, 5vw, 56px); }
@media (min-width: 1000px){
  .eintritt-innen{ grid-template-columns: minmax(0, 1fr) 292px; align-items: end; }
}

.eintritt-etikett{
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gruen-tief); font-weight: 700; margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.eintritt-etikett::after{
  content: ""; flex: 1; height: 1px; background: var(--linie);
}

.eintritt h1{
  font-size: clamp(38px, 10.5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.eintritt-lead{
  margin-top: 22px;
  max-width: 40ch;
  font-size: clamp(17px, 4.4vw, 20px);
  line-height: 1.55;
  color: var(--tinte-2);
}
.eintritt-lead strong{ color: var(--tinte); font-weight: 700; }

/* ---------------------------------------------------------------------
   WAS DANACH PASSIERT

   Kein Schmuck und kein Fuellsel fuer die freie Flaeche rechts: es ist die
   Antwort auf die Frage, die jeder stellt, der gerade merkt, dass er hier
   nicht verbindlich bucht - "und dann?". Drei Zeilen, keine Nummern (die
   gehoeren dem Register unten), keine Versprechen ueber Fristen, die
   niemand einhalten kann.
   ------------------------------------------------------------------ */
.ablauf{
  border-top: 1px solid var(--linie-stark);
  max-width: 40ch;
}
.ablauf-titel{
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinte-3); font-weight: 700; padding: 14px 0 4px;
}
.ablauf-zeile{
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 15px; line-height: 1.5; color: var(--tinte-2);
}
.ablauf-zeile:last-child{ border-bottom: 0; }
.ablauf-zeile strong{ color: var(--tinte); font-weight: 700; }

/* =====================================================================
   ANFRAGE EINGEGANGEN — der Rahmen

   Ueberschrift, Linie und Beleg bringt das Plugin mit. Das Theme gibt der
   Ansicht nur ihren Platz auf der Seite und haengt die beiden Verweise in
   die Schwesterwelten an - die kennt das Plugin nicht und soll es nicht.
   ================================================================== */
.eingegangen{ padding: clamp(46px, 10vw, 84px) 0 clamp(50px, 10vw, 92px); }
.eingegangen .bahn > *{ max-width: var(--maxw-spalte); }

.eingegangen-weiter{
  margin-top: clamp(30px, 6vw, 42px);
  border-top: 1px solid var(--linie); padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 12px 26px;
}
.eingegangen-weiter a{ color: var(--gruen-tief); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--linie-stark); }
.eingegangen-weiter a:hover{ border-bottom-color: var(--gruen-tief); }

/* Das Theme ohne das Plugin. Kein weisser Fleck und kein Absturz, sondern
   ein Satz, der sagt, was fehlt - und fuer Besucher ein Weg, der trotzdem
   funktioniert. */
.ohne-plugin{
  border: 1px solid var(--linie-stark); border-radius: var(--radius);
  background: var(--papier-2);
  padding: 26px 24px;
  max-width: var(--maxw-spalte);
}
.ohne-plugin h2{ font-size: clamp(19px, 4.8vw, 22px); }
.ohne-plugin p{ margin-top: 10px; color: var(--tinte-2); max-width: 48ch; }
.ohne-plugin-kontakt{ margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ohne-plugin-kontakt a{ font-weight: 700; color: var(--gruen-tief); }

/* =====================================================================
   LESESEITEN (Impressum, Datenschutz, 404)
   ================================================================== */
.doku{ padding: clamp(40px, 8vw, 72px) 0 clamp(50px, 9vw, 84px); }
.doku h1{ font-size: clamp(30px, 7.5vw, 46px); letter-spacing: -0.03em; }
.doku-lead{ margin-top: 14px; color: var(--tinte-3); max-width: 52ch; }
.doku h2{ font-size: clamp(19px, 4.6vw, 23px); margin: clamp(30px, 5vw, 42px) 0 10px; }
.doku h3{ font-size: 17px; margin: 22px 0 6px; }
.doku p{ margin-bottom: 12px; max-width: 66ch; color: var(--tinte-2); }
.doku ul{ max-width: 66ch; color: var(--tinte-2); padding-left: 20px; }
.doku li{ margin-bottom: 6px; }
.doku a{ color: var(--gruen-tief); font-weight: 700; }
.doku address{ font-style: normal; color: var(--tinte-2); }
.doku-zurueck{ display: inline-block; margin-top: 34px; font-weight: 700; color: var(--gruen-tief); }

/* =====================================================================
   FUSS

   Die einzige Markenflaeche der Seite. Der Dachmarken-Claim steht hier -
   genau einmal auf dieser Website, wie es die Markenarchitektur verlangt,
   und an der Stelle, an der man geht.
   ================================================================== */
.fuss{
  background: var(--gruen-tief); color: var(--gruen-ink);
  padding: clamp(38px, 7vw, 60px) 0 clamp(28px, 5vw, 40px);
  margin-top: auto;
}
.fuss-marke{ display: inline-flex; align-items: center; min-height: 44px; }
.fuss-marke img{ width: 150px; height: auto; }
.fuss-claim{ margin-top: 12px; font-size: 15px; color: rgba(244,250,246,0.82); }

.fuss-bereiche{
  margin-top: clamp(30px, 6vw, 44px);
  display: grid; gap: 2px;
  border-top: 1px solid rgba(244,250,246,0.18);
}
.fuss-bereich{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(244,250,246,0.18);
  text-decoration: none;
  transition: padding-left var(--t-mittel) var(--antwort), color var(--t-schnell) var(--antwort);
}
.fuss-bereich:hover{ padding-left: 8px; }
.fuss-bereich-name{ font-size: clamp(17px, 4.4vw, 20px); font-weight: 700; letter-spacing: -0.02em; }
.fuss-bereich-rolle{ font-size: 13px; color: rgba(244,250,246,0.78); text-align: right; }

.fuss-unten{ margin-top: clamp(26px, 5vw, 36px); font-size: 14px; color: rgba(244,250,246,0.82); }
/* Auch hier: Hoehe fuer die Trefferflaeche. Der Unterstrich bleibt am
   Text, nicht am Kasten - deshalb padding oben, nicht unten. */
.fuss-recht{ display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss-recht a{
  display: inline-block; padding: 7px 0 3px;
  color: rgba(244,250,246,0.86); text-decoration: none;
  border-bottom: 1px solid rgba(244,250,246,0.28);
}
.fuss-recht a:hover{ color: #fff; border-bottom-color: #fff; }
.fuss-umfang{ margin-top: 14px; font-size: 13px; color: rgba(244,250,246,0.78); max-width: 62ch; }
.fuss-credit{ margin-top: 18px; font-size: 13px; color: rgba(244,250,246,0.78); }
.fuss-credit a{ display: inline-block; padding: 5px 0; color: rgba(244,250,246,0.86); }

.fuss :focus-visible{ outline: 2px solid var(--gruen-ink); outline-offset: 3px; }

/* Seitengeruest: der Fuss soll auch auf kurzen Seiten unten sitzen. */
body{ min-height: 100vh; display: flex; flex-direction: column; }
main{ flex: 1 0 auto; }

/* =====================================================================
   SEHR SCHMAL (320px)
   ================================================================== */
@media (max-width: 359px){
  .marke img{ width: 112px; }
}