/* 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 IT.
   *
   * Postgelb gehoert zur Brief- und Briefmarken-Sprache von Marketing, Petrol
   * traegt Systems. Kupfer steht warm gegen das kuehle Petrol, ist von beiden
   * klar unterscheidbar und passt zur Werkstattnaehe der Arbeit: Hier wird
   * angeschlossen, verlegt und montiert.
   *
   * Bewusst NICHT der Stempelrot-Ton #B3402A: Der ist fuer Warnhinweise
   * vergeben, und zwei aehnliche Rottoene nebeneinander heben die Warnung auf.
   *
   * Kontrast gegen Papier (#FAF8F3) gemessen: 4.74:1, reicht fuer WCAG AA. */
  --kupfer:#A85A32;
  --kupfer-tief:#8A4726;
  --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(--kupfer);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(--kupfer);padding:9px 14px;border-radius:4px;white-space:nowrap;font-weight:600;}
.tel:hover{background:var(--kupfer-tief);}

/* DIE FARBE DES TELEFON-KNOPFES STAND NIE, WO SIE STEHEN SOLLTE.
   `.tel` setzt color:#fff, aber die Zeile darueber, `nav.haupt a`, ist
   spezifischer (ein Element, eine Klasse, ein Element gegen eine blosse
   Klasse) und gewinnt. Der Knopf trug deshalb Graphit auf der Akzentfarbe:

   temple-it.de       #3E4756 auf Kupfer #A85A32   1,86 zu 1
   temple-systems.de  #3E4756 auf Petrol #1F6F6B   1,58 zu 1

   Das ist nicht knapp daneben, das ist unlesbar, und es stand seit dem
   Livegang so da. Aufgefallen ist es erst durch Lighthouse am 23.09.2026,
   weil der Knopf mit Graphit auf Postgelb bei temple-marketing.de gut
   aussieht und niemand die anderen beiden daneben gehalten hat.

   Gemessen mit Weiss: 5,03 auf Kupfer, 5,92 auf Petrol, 5,28 auf
   Palmgruen. Die Regel steht jetzt spezifisch genug, um zu gelten. */
nav.haupt a.tel{color:#fff;}
.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(--kupfer);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(168,90,50,.22) 68%, rgba(168,90,50,.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:#63697A;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(--kupfer);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:#63697A;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(--kupfer);}
.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:#63697A;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:#63697A;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; }

.fuss .mini a{min-height:24px;display:inline-flex;align-items:center;}

/* ---- KONTAKTFORMULAR. Ergaenzt am 04.10.2026. --------------------------
   ALLE WERTE GEMESSEN, nicht geschaetzt. Label #3E4756 auf #F2EFE7 = 8,2 zu 1; Eingabetext #1B2A4A auf Weiss = 14,2; Rahmen #6E7685 auf #F2EFE7 = 4,0; Knopf Weiss auf #8A4726 = 7,0.

   DER RAHMEN IST EIGENS DUNKLER als die Linien der Seite. Ein Eingabefeld ist
   ein Bedienelement und braucht nach WCAG 1.4.11 ein Verhaeltnis von 3 zu 1
   zum Grund; die Hauslinie erreicht auf diesem Grund nur 1,25 zu 1 und
   waere als Feldrahmen ein kaum sichtbarer Kasten.

   TIPPZIELE: Felder 46 px hoch, Knopf 50 px. Die Norm verlangt 24, empfohlen
   sind 44; ein Formular bedient man mit dem Daumen.

   DIE FALLE wird AUS DEM BILD GESCHOBEN und nicht mit display:none versteckt.
   Ein Fuellprogramm, das auf display achtet, uebersieht ein verstecktes Feld;
   eins, das nach Eingabefeldern sucht, fuellt dieses hier. Fuer Hilfsmittel
   ist es ueber aria-hidden und tabindex -1 ohnehin aus dem Weg. ---- */

.anfrage{margin-top:2.5rem;max-width:46rem;}
.anfrage .feld{margin-bottom:1rem}
.anfrage .feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.anfrage label{display:block;margin-bottom:.35rem;font-size:.92rem;
  font-weight:600;color:var(--graphit)}
.anfrage .pflicht{color:var(--stempel);font-weight:700}
.anfrage input,.anfrage textarea{
  width:100%;min-height:46px;padding:.6rem .75rem;
  background:var(--papier-karte);color:var(--tinte);
  border:1px solid #6E7685;border-radius:3px;
  font-family:inherit;font-size:1rem;line-height:1.5}
.anfrage textarea{min-height:7.5rem;resize:vertical}
.anfrage input::placeholder,.anfrage textarea::placeholder{color:#6E7685;opacity:1}
.anfrage input:focus-visible,.anfrage textarea:focus-visible{
  outline:2px solid var(--kupfer-tief);outline-offset:1px;border-color:var(--kupfer-tief)}
.anfrage .falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.knopf-senden{
  display:inline-block;min-height:50px;margin-top:.35rem;
  padding:.8rem 1.9rem;border:0;border-radius:3px;cursor:pointer;
  background:var(--kupfer-tief);color:#FFFFFF;
  font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.01em}
.knopf-senden:hover{background:#73391D}
.knopf-senden:focus-visible{outline:2px solid var(--kupfer-tief);outline-offset:3px}
.anfrage .formhinweis{margin-top:.9rem;font-size:.86rem;line-height:1.6;
  color:var(--graphit);max-width:52ch}
.anfrage .formhinweis a{color:var(--kupfer-tief)}
@media(max-width:560px){
  .anfrage .feld-paar{grid-template-columns:1fr;gap:0}
  .knopf-senden{width:100%}
}

/* Der Ruecklink am Ende der Danke-Seite ist ein Tippziel und war als bloss
   unterstrichener Satz nur 20 px hoch, also unter den 24 px, die WCAG 2.5.8
   fordert. Gemessen am 04.10.2026. */
.danke-zurueck{display:inline-block;min-height:44px;padding:.7rem 0;
  line-height:1.6;font-weight:600}
.danke-wege{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--linie)}