/* Gemeinsame Gestaltung der Temple-Seiten.
 *
 * Als eigene Datei und nicht inline wie bei temple-marketing.de: Drei Seiten je
 * Auftritt teilen sich denselben Stil, und drei Kopien waeren drei
 * Gelegenheiten, dass eine davon abweicht. Kein Build-Schritt, keine fremde
 * Quelle, dieselbe Herkunft wie die Seite selbst.
 */
:root{
  --tinte:#1B2A4A; --tinte-tief:#14203A; --papier:#FAF8F3; --papier-karte:#FFFFFF;
  --graphit:#3E4756; --linie:#DDD7CA; --postgelb:#FFC93C; --postgelb-tief:#E5AF1E;
  --stempel:#B3402A;
  /* Eigene Akzentfarbe fuer Temple Systems.
   *
   * Marketing traegt Postgelb, das zur Brief- und Briefmarken-Sprache gehoert.
   * Fuer Systems waere Gelb geliehen: Hier wird nichts verschickt, hier wird
   * gebaut. Petrol steht daneben, ohne zu streiten - es teilt die Kuehle der
   * Tinte, bleibt aber unterscheidbar, und auf Papierweiss liest es sich
   * ruhig statt technisch-grell.
   *
   * Kontrast gegen Papier (#FAF8F3) gemessen: 5.58:1, reicht fuer WCAG AA. */
  --petrol:#1F6F6B;
  --petrol-tief:#175754;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation:none!important;transition:none!important;}}
body{font-family:var(--sans);color:var(--graphit);background:var(--papier);line-height:1.65;font-size:17px;}
a{color:var(--tinte);}
a:focus-visible,button:focus-visible{outline:3px solid var(--petrol);outline-offset:2px;}
.shell{max-width:1080px;margin:0 auto;padding:0 24px;}

header{background:var(--papier);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:50;}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;}
.marke{font-family:var(--serif);font-size:1.35rem;color:var(--tinte);text-decoration:none;display:inline-flex;align-items:center;gap:10px;}
.marke b{font-weight:700;}
.marke-logo{height:32px;width:auto;display:block;}
nav.haupt{display:flex;gap:26px;align-items:center;}
nav.haupt a{text-decoration:none;font-size:.95rem;color:var(--graphit);}
nav.haupt a:hover{color:var(--tinte);}
.tel{font-family:var(--mono);font-size:.9rem;text-decoration:none;color:#fff;background:var(--petrol);padding:9px 14px;border-radius:4px;white-space:nowrap;font-weight:600;}
.tel:hover{background:var(--petrol-tief);}
.zurueck{font-size:.9rem;color:var(--graphit);text-decoration:none;}
@media(max-width:760px){nav.haupt a:not(.tel){display:none;}}

section{padding:76px 0;}
section.getoent{background:#F2EFE7;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);}
.stempelzeile{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--petrol);margin-bottom:18px;}
h1{font-family:var(--serif);font-weight:600;color:var(--tinte);font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.13;letter-spacing:-.01em;margin-bottom:22px;}
h1 .unterstrichen{background:linear-gradient(transparent 68%, rgba(31,111,107,.22) 68%, rgba(31,111,107,.22) 94%, transparent 94%);}
h2{font-family:var(--serif);font-weight:600;color:var(--tinte);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.2;margin-bottom:18px;}
h3{font-family:var(--serif);font-weight:600;color:var(--tinte);font-size:1.15rem;margin-bottom:8px;}
p{margin-bottom:14px;}
.lead{font-size:1.15rem;max-width:36em;}
.hero{padding:72px 0 60px;}
.cta-reihe{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px;}
.knopf{display:inline-block;text-decoration:none;font-weight:600;font-size:1rem;padding:14px 26px;border-radius:4px;border:1.5px solid var(--tinte);transition:transform .15s ease, box-shadow .15s ease;}
.knopf.voll{background:var(--tinte);color:#fff;}
.knopf.voll:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(27,42,74,.25);}
.knopf.leer{background:transparent;color:var(--tinte);}
.knopf.leer:hover{background:#fff;}
.cta-hinweis{font-size:.85rem;color:#71798A;margin-top:14px;}

.leistungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:34px;}
.leistung{background:var(--papier-karte);border:1px solid var(--linie);border-radius:4px;padding:26px 24px;}
.leistung p{font-size:.97rem;margin-bottom:0;}
.leistung .zeichen{font-size:1.5rem;line-height:1;margin-bottom:12px;display:block;}

.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;margin-top:34px;counter-reset:schritt;}
.schritt{position:relative;padding-top:8px;}
.schritt::before{counter-increment:schritt;content:counter(schritt);font-family:var(--serif);font-size:2.6rem;color:var(--petrol);display:block;line-height:1;margin-bottom:10px;}
.schritt p{font-size:.97rem;margin-bottom:0;}

.kontakt-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px;margin-top:30px;}
.kontakt-block .gross{font-family:var(--mono);font-size:1.15rem;color:var(--tinte);text-decoration:none;display:block;margin-bottom:8px;}
address{font-style:normal;font-size:.95rem;}

/* Familien-Verweise: dezent ueber der Fusszeile. Keine grellen Kacheln, es
 * soll nach Familie aussehen und nicht nach Werbebanner. */
.familie{background:#F2EFE7;border-top:1px solid var(--linie);padding:44px 0 40px;}
.familie .augenbraue{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#8A8F9C;margin-bottom:20px;}
.geschwister{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;}
.geschwister a.karte{display:block;text-decoration:none;color:var(--graphit);border-left:2px solid var(--linie);padding:2px 0 2px 18px;transition:border-color .15s ease;}
.geschwister a.karte:hover{border-left-color:var(--petrol);}
.geschwister .satz{font-size:.95rem;margin-bottom:6px;}
.geschwister .ziel{font-family:var(--serif);font-size:1.05rem;color:var(--tinte);}
.geschwister .ziel .pfeil{font-family:var(--mono);font-size:.85rem;color:#8A8F9C;margin-left:6px;}

footer{background:var(--tinte-tief);color:#9FB0D0;padding:40px 0;}
.fuss{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.fuss .marke{color:#fff;}
.fuss nav{display:flex;gap:22px;flex-wrap:wrap;}
.fuss a{color:#9FB0D0;text-decoration:none;font-size:.88rem;}
.fuss a:hover{color:#fff;}
.fuss .mini{font-size:.8rem;font-family:var(--mono);}

.rechtstext{max-width:44em;padding:56px 0 70px;}
.rechtstext .augenbraue{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#8A8F9C;margin-bottom:10px;}
.rechtstext h2{font-size:1.25rem;margin-top:30px;margin-bottom:10px;}
.rechtstext ul{margin:0 0 14px 20px;}
.rechtstext li{margin-bottom:6px;}

/* Der Ueber-Abschnitt: schmaler Satzspiegel, damit der Text lesbar bleibt. */
.ueber-text{max-width:38em;}
.ueber-text p{font-size:1.02rem;}

/* --- Tippziele auf dem Handy ---------------------------------------------
 *
 * Gemessen mit npm run mobil bei 375px: Der Telefon-Knopf lag bei 43px, die
 * Fusszeilen-Links bei 23px, die grossen Kontaktangaben bei 30px. WCAG 2.5.8
 * verlangt 24px als Mindestmass, Apple empfiehlt 44px; Links im Fliesstext
 * sind ausdruecklich ausgenommen und bleiben deshalb, wie sie sind.
 *
 * Betroffen ist nur, was sich wie ein Knopf verhaelt. */
.tel { min-height: 44px; display: inline-flex; align-items: center; }
.kontakt-block .gross { min-height: 44px; display: inline-flex; align-items: center; }
.fuss nav a, .fuss .marke { min-height: 44px; display: inline-flex; align-items: center; }
.kopf .marke { min-height: 44px; }