/* Temple Marketing als Grundlage, mit einem eigenen Akzent.
 *
 * Schrift, Raster, Abschnittsfolge und die Stempelzeilen bleiben, damit es
 * erkennbar aus demselben Haus kommt. Getauscht ist nur die Akzentfarbe.
 *
 * Warum Palmgruen (#2F7A3E) und keine der beiden anderen Richtungen: gemessen
 * gegen Papierweiss und gegen die Bestandsfarben der Familie.
 *
 *   Sonnenuntergang-Orange #C2410C  4.88:1, aber nur 89 Abstand zu Kupfer (IT)
 *   Ozean-Tuerkis          #00838F  4.26:1, faellt unter AA, und 87 zu Petrol
 *   Palmgruen              #2F7A3E  4.98:1, 165 zu Kupfer, 72 zu Petrol
 *
 * Gruen ist ausserdem die einzige Farbfamilie, die im Bestand noch nicht
 * vergeben ist: Marketing traegt Gelb, Systems Petrol, IT Kupfer.
 *
 * Der Knopf traegt weisse statt tintenblauer Schrift. Auf Postgelb war
 * Tinte lesbar, auf Palmgruen ist sie es nicht.
 */
  :root{
    --tinte:#1B2A4A;
    --tinte-tief:#14203A;
    --papier:#FAF8F3;
    --papier-karte:#FFFFFF;
    --graphit:#3E4756;
    --linie:#DDD7CA;
    --postgelb:#2F7A3E;
    --postgelb-tief:#245F31;
    --stempel:#B3402A;
    --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(--postgelb);outline-offset:2px;}
  .shell{max-width:1080px;margin:0 auto;padding:0 24px;}

  /* ---------- Kopf ---------- */
  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;letter-spacing:.01em;}
  .marke b{font-weight:700;}
  .marke{display:inline-flex;align-items:center;gap:10px;}
  .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(--postgelb);
    padding:9px 14px;border-radius:4px;white-space:nowrap;font-weight:600;
  }
  .tel:hover{background:var(--postgelb-tief);}
  @media(max-width:760px){ nav.haupt a:not(.tel){display:none;} }

  /* ---------- Hero mit Brief ---------- */
  .hero{padding:72px 0 84px;overflow:hidden;}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
  @media(max-width:880px){ .hero-grid{grid-template-columns:1fr;gap:44px;} }
  .stempelzeile{
    font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--stempel);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%, var(--postgelb) 68%, var(--postgelb) 94%, transparent 94%);
  }
  .hero p.lead{font-size:1.15rem;max-width:34em;margin-bottom:30px;}
  .cta-reihe{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
  .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;}

  /* Der Brief – Signaturelement */
  .brief-buehne{position:relative;padding:10px 6px;}
  .brief{
    background:var(--papier-karte);
    border:1px solid var(--linie);
    border-radius:3px;
    box-shadow:0 18px 40px rgba(27,42,74,.14), 0 2px 6px rgba(27,42,74,.08);
    padding:34px 32px 30px;
    transform:rotate(-1.4deg);
    transition:transform .25s ease, box-shadow .25s ease;
    max-width:420px;margin:0 auto;
  }
  .brief:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 26px 52px rgba(27,42,74,.18);}
  .briefmarke{
    position:absolute;top:-6px;right:2px;width:74px;height:88px;
    background:var(--postgelb);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    color:var(--tinte);font-family:var(--mono);font-size:.6rem;text-align:center;line-height:1.25;
    transform:rotate(3deg);
    -webkit-mask:radial-gradient(circle 5px at 5px 5px,transparent 4.2px,#000 4.4px) -5px -5px/10px 10px;
            mask:radial-gradient(circle 5px at 5px 5px,transparent 4.2px,#000 4.4px) -5px -5px/10px 10px;
    box-shadow:0 4px 10px rgba(27,42,74,.18);
  }
  .briefmarke .wert{font-size:1.05rem;font-weight:700;}
  .brief .absender{font-family:var(--mono);font-size:.68rem;color:#8A8F9C;border-bottom:1px solid var(--linie);padding-bottom:10px;margin-bottom:16px;}
  .brief .anrede{font-family:var(--serif);color:var(--tinte);font-size:1.02rem;margin-bottom:10px;}
  .brief .zeile{height:9px;border-radius:4px;background:#ECE8DE;margin-bottom:9px;}
  .brief .zeile.k{width:72%;}
  .brief .zeile.m{width:88%;}
  .brief .qr-reihe{display:flex;align-items:center;gap:14px;margin-top:20px;}
  .qr{
    width:74px;height:74px;flex:none;border:2px solid var(--tinte);border-radius:4px;padding:5px;
    background:
      conic-gradient(var(--tinte) 0 25%, transparent 0 50%, var(--tinte) 0 75%, transparent 0) 0 0/14px 14px;
    background-clip:content-box;
  }
  .qr-text{font-size:.8rem;color:var(--graphit);line-height:1.45;}
  .qr-text b{color:var(--tinte);font-family:var(--mono);font-weight:600;font-size:.76rem;}

  /* ---------- Sektionen ---------- */
  section{padding:76px 0;}
  section.getoent{background:#F2EFE7;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);}
  .augenbraue{
    font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--stempel);margin-bottom:12px;
  }
  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:14px;
  }
  .sektions-intro{max-width:40em;margin-bottom:44px;}

  /* Rundum-Service: zweispaltige Liste mit Haekchen statt Strichen.
     Ein Strich als Aufzaehlungszeichen liest sich wie ein Gedankenstrich und
     bricht auf dem Handy schlecht um. */
  .service-liste{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 34px;margin:30px 0 0;max-width:56em;}
  .service-liste li{position:relative;padding-left:26px;font-size:.97rem;line-height:1.55;}
  .service-liste li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--stempel);font-weight:700;}
  .service-schluss{margin-top:30px;padding-top:20px;border-top:1px solid var(--linie);font-size:.97rem;max-width:56em;}
  .service-schluss strong{font-family:var(--mono);font-size:1.02rem;letter-spacing:-.01em;}
  @media(max-width:820px){ .service-liste{grid-template-columns:1fr;} }

  /* Ablauf – echte Sequenz, daher nummeriert */
  .ablauf{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:schritt;}
  @media(max-width:820px){ .ablauf{grid-template-columns:1fr;} }
  .schritt{
    background:var(--papier-karte);border:1px solid var(--linie);border-radius:4px;
    padding:28px 26px;position:relative;counter-increment:schritt;
  }
  .schritt::before{
    content:counter(schritt);
    position:absolute;top:-16px;left:22px;
    width:34px;height:34px;border-radius:50%;
    background:var(--tinte);color:var(--postgelb);
    font-family:var(--mono);font-weight:700;font-size:.95rem;
    display:flex;align-items:center;justify-content:center;
    border:3px solid var(--papier);
  }
  section.getoent .schritt::before{border-color:#F2EFE7;}
  .schritt h3{font-family:var(--serif);color:var(--tinte);font-size:1.15rem;margin:6px 0 10px;}
  .schritt p{font-size:.95rem;}
  .schritt .frei{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;background:var(--postgelb);color:var(--tinte);padding:4px 9px;border-radius:3px;font-weight:600;}

  /* Leistungen */
  .leistungen{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  @media(max-width:820px){ .leistungen{grid-template-columns:1fr;} }
  .leistung{border-top:3px solid var(--tinte);background:var(--papier-karte);border-left:1px solid var(--linie);border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);border-radius:0 0 4px 4px;padding:26px;}
  .leistung h3{font-family:var(--serif);color:var(--tinte);font-size:1.18rem;margin-bottom:10px;}
  .leistung p{font-size:.95rem;}
  .leistung ul{margin:12px 0 0 18px;font-size:.92rem;}
  .leistung li{margin-bottom:5px;}

  /* Preise */
  .pakete{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:40px;}
  @media(max-width:820px){ .pakete{grid-template-columns:1fr;} }
  .paket{
    background:var(--papier-karte);border:1px solid var(--linie);border-radius:5px;
    padding:34px 32px;position:relative;
  }
  .paket.markiert{border:2px solid var(--tinte);}
  .paket .band{
    position:absolute;top:-13px;left:28px;background:var(--postgelb);color:var(--tinte);
    font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    padding:4px 11px;border-radius:3px;
  }
  .paket h3{font-family:var(--serif);color:var(--tinte);font-size:1.3rem;margin-bottom:6px;}
  .paket .preis{font-family:var(--serif);color:var(--tinte);font-size:2.1rem;font-weight:600;margin:14px 0 2px;}
  .paket .preis small{font-size:1rem;font-family:var(--sans);color:var(--graphit);font-weight:400;}
  .paket .preiszusatz{font-size:.9rem;color:#71798A;margin-bottom:18px;}
  .paket ul{list-style:none;margin:18px 0 0;}
  .paket li{padding-left:26px;position:relative;margin-bottom:9px;font-size:.95rem;}
  .paket li::before{content:"✓";position:absolute;left:0;color:var(--tinte);font-weight:700;}
  .extras{background:var(--papier-karte);border:1px solid var(--linie);border-radius:5px;padding:28px 32px;}
  .extras h3{font-family:var(--serif);color:var(--tinte);font-size:1.1rem;margin-bottom:14px;}
  .extras table{width:100%;border-collapse:collapse;font-size:.95rem;}
  .extras td{padding:9px 0;border-bottom:1px solid #EEEAE0;}
  .extras tr:last-child td{border-bottom:none;}
  .extras td:last-child{text-align:right;font-family:var(--mono);color:var(--tinte);white-space:nowrap;}
  .steuerhinweis{font-size:.82rem;color:#8A8F9C;margin-top:18px;}

  /* Über */
  .ueber-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
  @media(max-width:820px){ .ueber-grid{grid-template-columns:1fr;} }
  .ueber-karte{
    background:var(--tinte);color:#E8EBF2;border-radius:5px;padding:36px 34px;
  }
  .ueber-karte .stempelzeile{color:var(--postgelb);}
  .ueber-karte h3{font-family:var(--serif);color:#fff;font-size:1.35rem;margin-bottom:6px;}
  .ueber-karte .rolle{font-family:var(--mono);font-size:.8rem;color:#9FB0D0;margin-bottom:18px;}
  .ueber-karte p{font-size:.95rem;color:#C9D2E4;}
  .ueber-text p{margin-bottom:16px;}

  /* Kontakt */
  .kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
  @media(max-width:820px){ .kontakt-grid{grid-template-columns:1fr;} }
  .kontakt-block{background:var(--papier-karte);border:1px solid var(--linie);border-radius:5px;padding:30px;}
  .kontakt-block h3{font-family:var(--serif);color:var(--tinte);font-size:1.1rem;margin-bottom:14px;}
  .kontakt-block .gross{font-family:var(--mono);font-size:1.25rem;color:var(--tinte);text-decoration:none;display:block;margin-bottom:6px;font-weight:600;}
  .kontakt-block .gross:hover{color:var(--stempel);}
  .kontakt-block p{font-size:.92rem;color:#71798A;}
  address{font-style:normal;font-size:.95rem;line-height:1.7;}

  /* Fuß */
  /* ---------- 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(--postgelb-tief);}
  .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;}

  /* Tippziele auf dem Handy: gemessen mit npm run mobil bei 375px lag der
     Telefon-Knopf bei 43px und die Fusszeilen-Links bei 23px. WCAG 2.5.8
     verlangt 24px, Apple empfiehlt 44px. Links im Fliesstext sind
     ausgenommen und bleiben unveraendert. */
  .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; }

  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);}
/* --- Ergaenzungen gegenueber der Vorlage --------------------------------
 *
 * Die drei Klassen gibt es bei temple-marketing.de nur auf den Rechtsseiten,
 * die dort ihr eigenes Stylesheet mitbringen. Hier teilen sich alle Seiten
 * eine Datei, also stehen sie mit dabei.
 */
.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.1rem;color:var(--tinte);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;margin-bottom:8px;overflow-wrap:anywhere;}
.kontakt-block h3{font-family:var(--serif);font-weight:600;color:var(--tinte);font-size:1.15rem;margin-bottom:8px;}

.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 h1{margin-bottom:18px;}
.rechtstext h2{font-family:var(--serif);font-weight:600;color:var(--tinte);font-size:1.25rem;margin:30px 0 10px;}
.rechtstext p{margin-bottom:12px;}

.zurueck{font-size:.9rem;color:var(--graphit);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;}

/* Tippziele auf dem Handy, dieselbe Lehre wie bei den deutschen Seiten. */
.fuss nav a,.fuss .marke{min-height:44px;display:inline-flex;align-items:center;}
.kopf .marke{min-height:44px;}