/* =========================================================
   TFT BAUKASTEN · Projektseite · Entwurf 1
   Vorlage für alle Referenzen. Farben, Schrift und
   Schriftfeld wie Startseite und Referenzübersicht.
   ========================================================= */
:root{
  --tft-rot:#C8102E;
  --tft-rot-dunkel:#A30D25;
  --tft-anthrazit:#2D2D2F;
  --tft-nacht:#29292C;
  --tft-text:#2D2D2F;
  --tft-grau:#5E5E62;
  --tft-linie:#E1E1E4;
  --tft-planpapier:#F4F4F5;
  --tft-weiss:#FFFFFF;

  /* CD: Open Sans für alles */
  --f-display:"Open Sans","Segoe UI",Arial,sans-serif;
  --f-text:"Open Sans","Segoe UI",Arial,sans-serif;
  --f-entwurf:Consolas,"Courier New",monospace;

  --max:1180px;
  --lesebreite:66ch;
  --gutter:clamp(18px,4vw,40px);
  --abstand:clamp(26px,2.6vw,36px);
  --schatten:0 18px 40px rgba(41,41,44,.10),0 2px 6px rgba(41,41,44,.05);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--tft-weiss);color:var(--tft-text);font-family:var(--f-text);font-size:16px;line-height:1.55;letter-spacing:.01em}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--tft-rot);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--tft-anthrazit);line-height:1.2;margin:0;text-wrap:balance;font-weight:700}
h1{font-size:clamp(1.5rem,2.1vw,1.9rem);letter-spacing:-.022em}
h2{font-size:clamp(1.08rem,1.45vw,1.28rem);letter-spacing:-.015em}
h3{font-size:.97rem;letter-spacing:-.01em}
h4{font-size:.98rem}
p{margin:0}
.tft-wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.tft-section{padding-block:var(--abstand)}
.tft-band{background:var(--tft-planpapier)}
.tft-kicker{font-family:var(--f-display);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tft-rot)}
.tft-lead{font-size:clamp(.97rem,1.1vw,1.04rem);font-weight:400;line-height:1.6}
.tft-unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Entwurfshinweis: vor Livegang entfernen */
.tft-entwurf{background:var(--tft-nacht);color:#EDEDEB;font-family:var(--f-entwurf);font-size:.74rem}
.tft-entwurf .tft-wrap{padding-block:7px;display:flex;flex-wrap:wrap;gap:4px 18px}

/* Buttons und Links */
.tft-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:.92rem;text-decoration:none;padding:12px 20px;border:2px solid var(--tft-rot);background:var(--tft-rot);color:var(--tft-weiss);cursor:pointer;transition:background-color .15s,color .15s}
.tft-btn:hover{background:var(--tft-rot-dunkel);border-color:var(--tft-rot-dunkel)}
.tft-btn--hell{background:var(--tft-weiss);color:var(--tft-rot);border-color:var(--tft-weiss)}
.tft-btn--hell:hover{background:transparent;color:var(--tft-weiss);border-color:var(--tft-weiss)}
.tft-btn--leise{background:transparent;color:var(--tft-rot);border-color:var(--tft-linie)}
.tft-btn--leise:hover{background:transparent;color:var(--tft-rot-dunkel);border-color:var(--tft-rot)}
.tft-link{font-family:var(--f-display);font-weight:600;font-size:.9rem;color:var(--tft-rot);text-decoration:none;border-bottom:2px solid transparent;justify-self:start}
.tft-link:hover{border-bottom-color:var(--tft-rot)}
.tft-link::after{content:" →"}

/* ---------- Kopfbereich ---------- */
.tft-header{background:var(--tft-weiss);border-bottom:1px solid var(--tft-linie);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.tft-header .tft-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:68px}
.tft-wortmarke{display:grid;gap:2px;text-decoration:none;flex-shrink:0}
.tft-wortmarke b{font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:.04em;color:var(--tft-anthrazit);line-height:1.1}
.tft-wortmarke b i{font-style:normal;color:var(--tft-rot)}
.tft-wortmarke span{font-family:var(--f-display);font-weight:600;font-size:.76rem;letter-spacing:.04em;color:var(--tft-grau)}
.tft-nav{display:flex;align-items:center;gap:24px}
.tft-nav a:not(.tft-btn){font-family:var(--f-display);font-weight:600;font-size:.9rem;text-decoration:none;color:var(--tft-anthrazit)}
.tft-nav a:not(.tft-btn):hover{color:var(--tft-rot)}
.tft-nav a[aria-current="page"]{color:var(--tft-rot)}
.tft-nav .tft-btn{padding:10px 16px;font-size:.86rem}
@media (max-width:900px){.tft-nav a:not(.tft-btn){display:none}}
@media (max-width:560px){.tft-header .tft-wrap{min-height:70px}.tft-nav .tft-btn{display:none}}

/* ---------- Ticker Fachgebiete: identisch mit der Startseite ---------- */
.tft-ticker{background:var(--tft-planpapier);border-bottom:1px solid var(--tft-linie);overflow:hidden}
.tft-ticker-spur{display:flex;width:max-content}
.tft-ticker.laeuft .tft-ticker-spur{animation:tft-ticker 140s linear infinite}
.tft-ticker:hover .tft-ticker-spur,.tft-ticker:focus-within .tft-ticker-spur{animation-play-state:paused}
.tft-ticker-liste{display:flex;list-style:none;margin:0;padding:0}
.tft-ticker-liste li{display:flex;align-items:center}
.tft-ticker-liste li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--tft-rot);margin-inline:14px}
.tft-ticker-liste a{display:block;padding:8px 0;font-family:var(--f-display);font-weight:400;font-size:.8rem;color:var(--tft-grau);text-decoration:none;white-space:nowrap}
.tft-ticker-liste a:hover{color:var(--tft-rot)}
@keyframes tft-ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tft-ticker{overflow-x:auto}.tft-ticker-spur{animation:none}}

/* ---------- Projektkopf ---------- */
.tft-projektkopf{padding-block:clamp(16px,1.8vw,22px) 0}
.tft-projektkopf .tft-wrap{display:grid;gap:7px}
.tft-brotkrumen{font-size:.82rem;color:var(--tft-grau);display:flex;flex-wrap:wrap;gap:8px}
.tft-brotkrumen a{text-decoration:none;color:var(--tft-grau)}
.tft-brotkrumen a:hover{color:var(--tft-rot)}
.tft-brotkrumen a + a::before,.tft-brotkrumen span::before{content:"› ";color:var(--tft-linie)}
.tft-projektkopf h1{max-width:26ch;margin-top:1px}
.tft-untertitel{font-family:var(--f-display);font-weight:600;font-size:clamp(.95rem,1.1vw,1.05rem);color:var(--tft-grau)}
.tft-projektkopf .tft-lead{max-width:var(--lesebreite)}

/* Foto und Eckdaten */
.tft-bild{position:relative;background:#E6E4E0;display:flex;align-items:flex-end;aspect-ratio:24/8;max-height:300px;max-width:100%;overflow:hidden;margin-top:clamp(12px,1.4vw,16px)}
.tft-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tft-bild span{position:relative;z-index:1;font-family:var(--f-display);font-weight:600;font-size:.74rem;line-height:1.4;color:var(--tft-grau);background:var(--tft-weiss);padding:5px 9px;margin:12px;max-width:calc(100% - 24px)}
/* Sobald das echte Foto geladen ist, verschwindet die Beschriftung */
.tft-bild.hat-foto span{display:none}
.tft-eckdaten-raum{margin-top:clamp(10px,1.2vw,14px);border-top:1px solid var(--tft-linie);border-bottom:1px solid var(--tft-linie);padding-block:clamp(9px,1.1vw,12px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 28px;align-items:center}
.tft-eckdaten-raum > .tft-kicker{align-self:center}
.tft-eckdaten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px 24px}
.tft-eckdaten li{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 9px}
.tft-eckdaten strong{font-family:var(--f-display);font-weight:700;font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.2;letter-spacing:-.02em;color:var(--tft-rot);font-variant-numeric:tabular-nums}
.tft-eckdaten span{font-size:.82rem;color:var(--tft-grau);line-height:1.3}
@media (max-width:900px){.tft-eckdaten-raum{grid-template-columns:1fr;gap:10px}}
@media (max-width:620px){.tft-eckdaten{grid-template-columns:repeat(2,1fr)}}

/* ---------- Textabschnitte ---------- */
.tft-abschnitt{display:grid;gap:7px;max-width:var(--lesebreite)}
.tft-abschnitt + .tft-abschnitt{margin-top:clamp(16px,1.8vw,24px)}
.tft-abschnitt p + p{margin-top:2px}
.tft-abschnitt ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.tft-abschnitt ul li{padding-left:17px;position:relative;font-size:.95rem}
.tft-abschnitt ul li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--tft-rot)}
.tft-abschnitt ul li b{font-weight:700;color:var(--tft-anthrazit)}

/* ---------- Nutzen: leichte Liste statt Karten ---------- */
.tft-nutzen{list-style:none;margin:clamp(12px,1.5vw,16px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,22px) clamp(24px,2.8vw,40px)}
.tft-nutzen li{display:grid;gap:4px;align-content:start;padding-left:13px;border-left:2px solid var(--tft-rot)}
.tft-nutzen h3{font-size:.95rem;color:var(--tft-rot)}
.tft-nutzen p{font-size:.875rem;line-height:1.48;color:var(--tft-text)}
@media (max-width:760px){.tft-nutzen{grid-template-columns:1fr}}

/* ---------- Projektsteckbrief ---------- */
.tft-steckbrief-raum{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,4vw,56px);align-items:start}
.tft-steckbrief{background:var(--tft-weiss);border:1px solid var(--tft-linie);padding:clamp(18px,2vw,24px)}
.tft-steckbrief h2{font-size:1rem;margin-bottom:9px}
.tft-steckbrief dl{margin:0;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);border-top:2px solid var(--tft-anthrazit)}
.tft-steckbrief dt,.tft-steckbrief dd{margin:0;padding:5px 0;border-bottom:1px solid var(--tft-linie);font-size:.85rem;line-height:1.38}
.tft-steckbrief dt{font-family:var(--f-display);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tft-grau);padding-right:20px}
.tft-neben{display:grid;gap:clamp(16px,2vw,22px);align-content:start}
.tft-neben-block{display:grid;gap:10px;justify-items:start}
.tft-neben-block h3{font-size:.98rem}
.tft-leistungsliste{list-style:none;margin:0;padding:0;display:grid;width:100%}
.tft-leistungsliste a{text-decoration:none;display:flex;justify-content:space-between;gap:12px;padding-block:9px;border-bottom:1px solid var(--tft-linie);font-size:.92rem;font-weight:600}
.tft-leistungsliste a:hover{color:var(--tft-rot)}
.tft-leistungsliste a::after{content:"→";color:var(--tft-rot)}
.tft-baustein{border:1px dashed var(--tft-linie);background:var(--tft-planpapier);padding:18px 20px;display:grid;gap:6px;font-size:.88rem;color:var(--tft-grau)}
.tft-baustein b{font-family:var(--f-display);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tft-grau)}
@media (max-width:900px){.tft-steckbrief-raum{grid-template-columns:1fr}}
/* Auf schmalen Geraeten passen Bezeichnung und Wert nicht nebeneinander.
   Lange Woerter wie REALISIERUNGSZEITRAUM haben den Kasten sonst ueber den
   Bildschirmrand geschoben (gefunden 25.09.2026 auf iPhone SE und Galaxy S8). */
.tft-steckbrief{min-width:0;max-width:100%}
.tft-steckbrief dt,.tft-steckbrief dd{min-width:0;overflow-wrap:anywhere;hyphens:auto}
@media (max-width:400px){
 .tft-steckbrief dl{grid-template-columns:1fr}
 .tft-steckbrief dt{padding:7px 0 0;border-bottom:0;letter-spacing:.06em}
 .tft-steckbrief dd{padding:1px 0 7px}
}

/* ---------- FAQ ---------- */
.tft-faq{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(24px,5vw,64px);align-items:start}
.tft-faq > div:first-child{display:grid;gap:10px;align-content:start}
.tft-faq-liste{border-top:2px solid var(--tft-anthrazit)}
.tft-faq details{border-bottom:1px solid var(--tft-linie)}
.tft-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:10px 0;font-family:var(--f-display);font-weight:600;font-size:.93rem;color:var(--tft-anthrazit)}
.tft-faq summary::-webkit-details-marker{display:none}
.tft-faq summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--tft-rot)}
.tft-faq details[open] summary::after{content:"−"}
.tft-faq details p{padding:0 0 12px;max-width:66ch;font-size:.89rem}
@media (max-width:860px){.tft-faq{grid-template-columns:1fr}}

/* ---------- Weitere Projekte ---------- */
.tft-refs-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px;margin-bottom:20px}
.tft-refs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.tft-ref{background:var(--tft-weiss);display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;border:1px solid var(--tft-linie);transition:box-shadow .2s}
.tft-ref:hover{box-shadow:0 14px 30px rgba(38,38,38,.12)}
.tft-ref .tft-bild{aspect-ratio:3/2}
.tft-ref .tft-bild span{font-size:.72rem;margin:10px}
.tft-schriftfeld{display:grid;align-content:start}
.tft-schriftfeld h3{padding:14px 16px 10px;font-size:1rem}
.tft-schriftfeld dl{margin:0 16px 16px;display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--tft-anthrazit)}
.tft-schriftfeld dt,.tft-schriftfeld dd{margin:0;padding:6px 0;border-bottom:1px solid var(--tft-linie);font-size:.86rem;line-height:1.35}
.tft-schriftfeld dt{font-family:var(--f-display);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tft-grau);padding-right:16px}
@media (max-width:980px){.tft-refs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.tft-refs{grid-template-columns:1fr}}

/* ---------- Kontakt ---------- */
.tft-kontakt-band{background:var(--tft-rot);color:var(--tft-weiss)}
.tft-kontakt{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.tft-kontakt > div:first-child{display:grid;gap:10px;max-width:640px}
.tft-kontakt-band h2{color:var(--tft-weiss)}
.tft-kontakt-band .tft-kicker{color:#FFD9DF}
.tft-kontakt-band p:not(.tft-kicker){font-weight:400;font-size:.98rem}
.tft-kontakt-wege{display:grid;gap:12px;justify-items:start}
.tft-tel{font-size:.95rem;color:#FFE3E7}
.tft-tel a{color:var(--tft-weiss);font-weight:700}
@media (max-width:860px){.tft-kontakt{grid-template-columns:1fr}}

/* ---------- Fußbereich ---------- */
.tft-footer{background:var(--tft-nacht);color:#CFCFCC;font-size:.9rem}
.tft-footer .tft-wrap{padding-block:48px 24px;display:grid;gap:32px}
.tft-standorte{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.tft-standorte h3{color:var(--tft-weiss);font-size:.95rem;margin-bottom:8px}
.tft-standorte address{font-style:normal;line-height:1.6}
.tft-standorte a{text-decoration:none;color:#CFCFCC}
.tft-standorte a:hover{color:var(--tft-weiss)}
.tft-footer-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.14);padding-top:20px;font-size:.8rem}
.tft-footer-unten nav{display:flex;flex-wrap:wrap;gap:18px}
.tft-footer-unten a{color:#CFCFCC;text-decoration:none}
@media (max-width:980px){.tft-standorte{grid-template-columns:repeat(2,1fr)}}
/* Auf dem Handy standen die fuenf Standorte untereinander, das waren allein
   885 px Fussbereich. Zwei Spalten reichen, die Adressen sind kurz. */
@media (max-width:620px){
  .tft-footer .tft-wrap{padding-block:30px 18px;gap:20px}
  .tft-standorte{grid-template-columns:repeat(2,1fr);gap:16px 18px}
  .tft-standorte h3{font-size:.9rem;margin-bottom:4px}
  .tft-standorte address{line-height:1.5;font-size:.84rem;overflow-wrap:anywhere}
  .tft-standorte{min-width:0}
  .tft-standorte>div{min-width:0}
  .tft-footer-unten{padding-top:14px;gap:8px}
}
/* Auch auf 320 px noch zwei Spalten, einspaltig waren es 724 px
   Fussbereich statt 508. */
@media (max-width:300px){.tft-standorte{grid-template-columns:1fr}}

/* ---------- Fußbereich: Claim, Vernetzen, Siegel ----------
   Übernommen von Startseite und Leistungsseiten, damit alle Seiten
   denselben Fuß tragen. */
.tft-claim{font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.15rem,1.9vw,1.55rem);letter-spacing:.01em;color:var(--tft-weiss);
  padding-bottom:clamp(14px,1.8vw,20px);margin-bottom:clamp(12px,1.6vw,18px);
  border-bottom:1px solid rgba(255,255,255,.14)}
.tft-claim i{font-style:normal;color:var(--tft-rot);font-weight:700}
.tft-fuss-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,44px);align-items:start;
  padding-bottom:clamp(16px,2vw,22px);margin-bottom:clamp(14px,1.8vw,20px);
  border-bottom:1px solid rgba(255,255,255,.14)}
.tft-fuss-marke{display:grid;gap:clamp(14px,1.8vw,20px);align-content:start;min-width:0}
.tft-fuss-kopf .tft-claim{padding-bottom:0;margin-bottom:0;border-bottom:0}
.tft-vernetzen{display:grid;gap:9px;justify-items:start}
.tft-vernetzen-satz{font-size:.92rem;line-height:1.5;color:#CFCFCC;max-width:44ch}
.tft-vernetzen-satz b{color:var(--tft-weiss);font-weight:600}
.tft-vernetzen ul{list-style:none;margin:0;padding:0;display:flex;gap:11px}
.tft-footer .tft-vernetzen a{display:grid;place-items:center;width:40px;height:40px;
  border:1px solid rgba(255,255,255,.26);background:transparent}
.tft-footer .tft-vernetzen a:hover{border-color:var(--tft-rot);background:var(--tft-rot)}
.tft-vernetzen svg{width:18px;height:18px;fill:#CFCFCC;stroke:none}
.tft-footer .tft-vernetzen a:hover svg{fill:var(--tft-weiss)}
.tft-siegel{margin:0;align-self:start;width:150px;display:grid;gap:7px;justify-items:center}
.tft-siegel img{width:150px;height:auto}
.tft-siegel figcaption{font-size:.74rem;line-height:1.35;color:#9A9A97;
  text-align:center;border:1px dashed rgba(255,255,255,.26);padding:14px 10px;width:100%}
.tft-siegel.hat-bild figcaption{display:none}
@media (max-width:760px){.tft-fuss-kopf{grid-template-columns:1fr;gap:20px}}
@media (max-width:620px){
  .tft-claim{font-size:1.18rem}
  .tft-vernetzen-satz{font-size:.9rem}
  .tft-siegel,.tft-siegel img{width:130px}
}

/* Das rote Kontaktband bekommt mehr Luft zu den Nachbarn
   (Wunsch Daniela, 22.09.2026). */
.tft-kontakt-band{padding-block:clamp(38px,4.4vw,62px);margin-top:0}

/* ---------- Kopf der Seite: klarer Rhythmus statt gleicher Abstände ----------
   Die Brotkrumen ganz leise und mit Abstand, darunter Rubrik und Überschrift
   als eine zusammengehörige Einheit. */
.tft-projektkopf{padding-block:clamp(22px,2.6vw,32px) 0}
.tft-projektkopf .tft-wrap{display:block}
.tft-projektkopf .tft-brotkrumen{font-size:.76rem;color:#8E8E93;
  margin-bottom:clamp(18px,2.2vw,26px)}
.tft-projektkopf .tft-brotkrumen a{color:#8E8E93;text-decoration:none}
.tft-projektkopf .tft-brotkrumen a:hover{color:var(--tft-rot)}
/* Nur die Rubrik, nicht noch einmal der Projektname. Der kleine Pfeil
   zeigt, dass es hier zurueck zur Uebersicht geht. */
.tft-projektkopf .tft-brotkrumen a::before{content:"‹ "}
.tft-projektkopf .tft-kicker{display:block;margin-bottom:7px;
  font-size:.75rem;letter-spacing:.16em}
/* Die Titel sind zwischen 10 und 112 Zeichen lang. Eine feste Groesse
   ergibt beim laengsten Titel sechs Zeilen. Deshalb drei Stufen. */
.tft-projektkopf h1{line-height:1.09;letter-spacing:-.026em;font-weight:700;text-wrap:balance}
.tft-projektkopf h1.t-gross {font-size:clamp(2rem,3.4vw,2.9rem);max-width:18ch}
.tft-projektkopf h1.t-mittel{font-size:clamp(1.75rem,2.7vw,2.3rem);max-width:23ch}
.tft-projektkopf h1.t-klein {font-size:clamp(1.55rem,2.2vw,1.95rem);max-width:30ch;
  line-height:1.16;letter-spacing:-.02em}

/* Das Foto steht in der Textspalte und ist damit rund 640 statt 1100 px
   breit. In dieser Groesse traegt jede Vorlage, auch die schwaecheren,
   und der Text beginnt frueher. */
.tft-bild{aspect-ratio:16/9;max-height:none;margin:0 0 clamp(16px,2vw,22px)}
.tft-bild img{object-fit:cover;object-position:center 45%}
/* Plaene, Karten und Modellansichten werden nicht beschnitten,
   sonst sieht man nur einen Ausschnitt ohne Zusammenhang. */
.tft-bild img.ist-plan{object-fit:contain;background:#fff;padding:8px}
.tft-bild:has(img.ist-plan){background:#fff;border:1px solid var(--tft-linie);aspect-ratio:auto;max-height:300px}
.tft-bild:has(img.ist-plan) img{position:static;height:auto;max-height:284px;width:auto;margin-inline:auto}

/* ---------- Zweispalter: Text links, Fakten rechts ---------- */
.tft-hauptraster{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.9fr);
  gap:clamp(22px,3vw,44px);align-items:start;
  padding-block:clamp(20px,2.6vw,30px) clamp(26px,3.2vw,40px)}
.tft-seitenspalte{position:sticky;top:84px;display:grid;gap:12px}
.tft-karte{border:1px solid var(--tft-linie);border-top:3px solid var(--tft-rot);
  background:var(--tft-planpapier);padding:clamp(15px,1.8vw,20px);
  box-shadow:0 2px 8px rgba(41,41,44,.05)}
.tft-section .tft-kicker{font-size:.75rem;letter-spacing:.15em}
.tft-section h2{font-size:clamp(1.3rem,1.9vw,1.6rem);letter-spacing:.006em;line-height:1.24}
.tft-karte h2{font-size:1.02rem;margin-bottom:16px;letter-spacing:.012em}
.tft-nahe h3{letter-spacing:.006em}
/* Die Entwurfsleiste und der Logoplatzhalter verschwinden vor dem
   Livegang, bis dahin trotzdem lesbar halten. */
.tft-entwurf{font-size:.78rem}
.tft-wortmarke span{font-size:.72rem}
html{-webkit-text-size-adjust:100%}
.tft-karte h3{font-size:.85rem;margin-bottom:8px}
.tft-karte dl{margin:0;display:grid;border-top:1px solid rgba(45,45,47,.28)}
/* dl bekommt Luft, wenn eine Überschrift davor steht. */
.tft-karte h2 + dl,.tft-karte h3 + dl{margin-top:10px}
.tft-karte dt{font-family:var(--f-display);font-weight:600;font-size:.75rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tft-grau);padding:8px 0 1px}
.tft-karte dd{margin:0;padding:0 0 8px;border-bottom:1px solid rgba(45,45,47,.1);
  font-size:.81rem;line-height:1.4;color:var(--tft-grau)}
.tft-karte dd:last-of-type{border-bottom:0;padding-bottom:0}
/* Wenn die Zeile OHNE Label kommt (Layout-Konfig: „Label" aus),
   braucht sie oben etwas Luft, damit sie sich vom Vorgänger absetzt. */
.tft-karte dd.pd-dd-full{padding-top:8px}
.tft-karte dl > dd.pd-dd-full:first-child{padding-top:0}
/* Gewerke, Ingenieurleistungen und Besonderheit sagen, was TFT gemacht hat.
   Alle drei im selben, zurückhaltenden Stil. */
.tft-karte dd.tft-fett{font-family:var(--f-display);font-weight:600;
  color:var(--tft-anthrazit);font-size:.845rem;line-height:1.42}
.tft-karte ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tft-karte ul a{font-family:var(--f-display);font-weight:600;font-size:.85rem;
  color:var(--tft-rot);text-decoration:none;display:inline-flex;gap:6px;align-items:baseline}
.tft-karte ul a::after{content:"→"}
.tft-karte ul a:hover{text-decoration:underline}

/* Der Vorspann besteht aus zwei Teilen: die Leistung als Schlagzeile,
   darunter der Satz mit dem Firmennamen. Keine Linie, nur Typografie. */


.tft-abschnitt p{margin-bottom:12px;font-size:.95rem;line-height:1.56}
.tft-abschnitt p:last-child{margin-bottom:0}
.tft-auftakt{font-size:1.04rem;line-height:1.58;color:var(--tft-anthrazit);
  max-width:56ch;margin-bottom:14px}
.tft-punkte{list-style:none;margin:0 0 11px;padding:0;display:grid;gap:8px;max-width:58ch}
.tft-punkte li{padding-left:13px;border-left:3px solid var(--tft-rot);font-size:.88rem;line-height:1.5}
.tft-punkte b{display:block;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tft-rot);margin-bottom:2px}

@media (max-width:900px){
  .tft-hauptraster{grid-template-columns:1fr;gap:18px}
  .tft-seitenspalte{position:static;order:-1}
  /* Auf dem Handy zuerst das Bild, dann der Steckbrief, dann der Text */
  .tft-haupt{display:contents}
  .tft-haupt > .tft-bild{order:-2;margin-bottom:0}
  .tft-abschnitt{order:1}
}

/* Lange Fachwoerter wie Liegenschaftsenergiekonzept sprengen auf sehr
   schmalen Geraeten das Raster. Trennen statt ueberlaufen lassen. */
.tft-projektkopf h1,.tft-abschnitt p,.tft-karte dd,.tft-karte dt,
.tft-nahe h3,.tft-punkte li{overflow-wrap:break-word;hyphens:auto}

/* Auf schmalen Geraeten nichts unter 12 px. Gemessen waren Kicker,
   Steckbriefbeschriftungen und die Unterzeile der Wortmarke darunter. */
/* Sehr lange Einzelwoerter wie Liegenschaftsenergiekonzepte schieben Brotkrume,
   Kicker und H1 auf 320 Pixel ueber den Rand. Sie duerfen dort umbrechen
   (gefunden bei der Endpruefung am 25.09.2026). */
@media (max-width:400px){
  .tft-projektkopf .tft-brotkrumen,
  .tft-projektkopf .tft-kicker,
  .tft-projektkopf h1,
  .tft-projektkopf .tft-untertitel{overflow-wrap:anywhere;hyphens:auto}
  .tft-projektkopf .tft-brotkrumen{letter-spacing:0}
  .tft-projektkopf .tft-kicker{letter-spacing:.1em}
}
@media (max-width:480px){
  .tft-kicker,.tft-projektkopf .tft-kicker{font-size:.76rem}
  .tft-entwurf{font-size:.78rem}
  .tft-karte dt{font-size:.75rem}
  .tft-karte dd{font-size:.86rem}
  .tft-karte dd.tft-fett{font-size:.88rem}
  .tft-projektkopf .tft-brotkrumen{font-size:.82rem}
  .tft-wortmarke span{font-size:.75rem}
  .tft-bild span{font-size:.78rem}
  .tft-nahe .tft-ortzeile{font-size:.8rem}
  .tft-ticker-liste a{font-size:.82rem}
  .tft-abschnitt p{font-size:1rem;line-height:1.6}
  .tft-auftakt{font-size:1.06rem}
  .tft-punkte li{font-size:.94rem}
  .tft-punkte b{font-size:.78rem}
}

/* ---------- ähnliche Projekte ---------- */
/* minmax(0,1fr) statt 1fr: sonst sprengt ein langes Wort wie
   Liegenschaftsenergiekonzepte die Spalte. */
.tft-nahe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.3vw,16px);margin-top:14px}
@media (max-width:820px){.tft-nahe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tft-nahe .tft-ref{border:1px solid var(--tft-linie);text-decoration:none;color:inherit;transition:box-shadow .2s}
.tft-nahe .tft-ref:hover{box-shadow:0 10px 24px rgba(38,38,38,.12)}
.tft-nahe .tft-schriftfeld{padding:11px 13px 12px;display:grid;gap:5px}
.tft-nahe h3{font-size:.9rem;line-height:1.25}
.tft-nahe .tft-ortzeile{font-size:.78rem;color:var(--tft-grau);font-weight:600}
@media (max-width:560px){.tft-nahe{grid-template-columns:1fr}}

/* ---------- kompaktere Fassung fuer das Handy ----------
   Gemessen waren 3.594 px Seitenlaenge, davon 644 px Steckbrief und
   885 px Fussbereich. Beides geht deutlich enger, ohne dass die Seite
   gedraengt wirkt. */
@media (max-width:620px){
  .tft-projektkopf{padding-block:16px 0}
  .tft-projektkopf .tft-brotkrumen{margin-bottom:14px}
  .tft-hauptraster{padding-block:18px 22px;gap:16px}
  .tft-bild{margin-bottom:0}
  .tft-karte{padding:14px 15px}
  .tft-karte h2{margin-bottom:12px}
  .tft-karte dt{padding:6px 0 0}
  .tft-karte dd{padding-bottom:6px;line-height:1.38}
  .tft-abschnitt p{margin-bottom:10px}
  .tft-section{padding-block:22px}
  /* Die drei aehnlichen Projekte als knappe Zeilen statt als Karten,
     das spart auf dem Handy rund 130 px ohne Informationsverlust. */
  .tft-nahe{margin-top:10px;gap:0;border-top:1px solid var(--tft-linie)}
  .tft-nahe .tft-ref{border:0;border-bottom:1px solid var(--tft-linie)}
  .tft-nahe .tft-ref:hover{box-shadow:none}
  .tft-nahe .tft-schriftfeld{padding:11px 0;gap:2px}
  .tft-nahe h3{font-size:.95rem;line-height:1.3}
  .tft-nahe .tft-ortzeile{font-size:.82rem;font-weight:400}
}

/* =========================================================
   PD-OVERRIDES · Plugin-Anpassungen
   Am Ende platziert damit Source-Order zu unseren Gunsten
   arbeitet, ohne die Originalregeln vom Design zu verändern.
   ========================================================= */

/* Verhindert horizontales Scrollen auf Seiten-Ebene, falls
   Full-Bleed-Sections oder der Ticker breiter werden als der
   Viewport (z. B. Scrollbar-Breite auf Windows). overflow-x:clip
   ist neuer als hidden und beeinträchtigt position:sticky nicht.
   WICHTIG: das MUSS am body sein, NICHT am article — sonst würden
   die Full-Bleed-Sections vom article-Rand abgeschnitten. */
body.pd-referenz-design{
  overflow-x:clip;
}
@supports not (overflow-x:clip){
  body.pd-referenz-design{overflow-x:hidden}
}
.pd-referenz-article{
  width:100%;
  max-width:100%;
}

/* Ticker: full-width Streifen, Content darin animiert endlos
   von rechts nach links (translateX 0 → -50%). Da wir das
   <ul> zweimal rendern, wirkt der Übergang nahtlos.
   overflow:hidden clippt die überstehenden Elemente ab. */
.tft-ticker{
  width:100%;
  max-width:100%;
  overflow:hidden;
  position:relative;
}
.tft-ticker-spur{
  animation:tft-ticker 60s linear infinite;
  will-change:transform;
}
.tft-ticker:hover .tft-ticker-spur,
.tft-ticker:focus-within .tft-ticker-spur{
  animation-play-state:paused;
}
@media (prefers-reduced-motion:reduce){
  .tft-ticker-spur{animation:none;transform:translateX(0)}
}

/* =========================================================
   FULL-BLEED · Sections brechen aus dem Theme-Container aus.
   Der Theme-Wrap begrenzt normalerweise auf z.B. 1200px. Wir
   wollen den Ticker, die farbigen Bänder und den Footer aber
   in voller Viewport-Breite sehen. Trick: 100vw Breite + per
   calc negative Margins, sodass die Sektion links/rechts über
   den Container hinausragt. Content INNEN bleibt im tft-wrap
   auf --max (1180px) zentriert.
   ========================================================= */
.pd-referenz-article > .tft-ticker,
.pd-referenz-article > .tft-projektkopf,
.pd-referenz-article > .tft-section,
.pd-referenz-article > .tft-footer{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  position:relative; /* fixes stacking gegen sticky-Header */
}

/* Ticker-Items: keine Links, nur Text-Spans.
   Erbt die Optik der Original-<a>-Regel (Zeile 88). */
.pd-referenz-article .tft-ticker-liste span{
  display:block;
  padding:8px 0;
  font-family:var(--f-display);
  font-weight:400;
  font-size:.8rem;
  color:var(--tft-grau);
  white-space:nowrap;
  cursor:default;
}
@media (max-width:640px){
  .pd-referenz-article .tft-ticker-liste span{ font-size:.82rem; }
}

/* .tft-hauptraster ist gleichzeitig der .tft-wrap — bleibt in
   Container-Breite und wird zentriert. Kein Full-Bleed. */
.pd-referenz-article > .tft-hauptraster{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  width:auto;
}

/* Die 100vw-Regel kann auf Windows-Browsern mit sichtbarer
   Scrollbar 15-17px horizontales Scrollen verursachen, weil
   100vw die Scrollbar mit einschließt. Der overflow-x:clip
   oben auf .pd-referenz-article fängt das ab. */

/* =========================================================
   BILD IM HAUPTBEREICH · nicht strecken, natürliche
   Proportionen behalten. Original-Design forciert
   aspect-ratio + object-fit:cover → wir überschreiben. */
.pd-referenz-article .tft-haupt > .tft-bild{
  aspect-ratio:auto;         /* keine feste Form */
  max-height:none;
  background:transparent;    /* graue Box weg wenn Bild da ist */
  display:block;             /* kein flex → kein Absolute-Trick */
  overflow:visible;
  margin:0 0 clamp(16px,2vw,22px);
}
.pd-referenz-article .tft-haupt > .tft-bild img{
  position:static;           /* raus aus absolute */
  inset:auto;
  width:100%;                /* Container-Breite ausfüllen */
  height:auto;               /* natürliche Höhe */
  object-fit:contain;        /* falls doch mal aspect-ratio kommt: kein Crop */
  display:block;
}
/* Die Bild-Beschriftung <span> nur zeigen wenn KEIN Foto da ist */
.pd-referenz-article .tft-haupt > .tft-bild.hat-foto span{display:none}

/* Content-Abschnitte unter dem Bild: volle Breite der linken Spalte
   nutzen. Original-Design begrenzt auf --lesebreite (66ch) für
   Fließtext, hier soll aber die verfügbare Platzhälfte ausgeschöpft
   werden (steht ohnehin nur der Content der Referenz drin). */
.pd-referenz-article .tft-haupt .tft-abschnitt{
  max-width:none;
}

/* =========================================================
   FARB-RESET · Themes setzen oft article h1 / entry-title
   in ihrer Akzentfarbe (bei dir rot). Das Design will aber
   dunkelgrau (--tft-anthrazit). Wir überschreiben mit
   höherer Specificity über .pd-referenz-article.
   ========================================================= */
.pd-referenz-article h1,
.pd-referenz-article h2,
.pd-referenz-article h3,
.pd-referenz-article h4{
  color:var(--tft-anthrazit) !important;
  font-family:var(--f-display) !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
}
/* Projektkopf-H1 mit den Design-Größen (dynamische t-* Klassen) */
.pd-referenz-article .tft-projektkopf h1{
  line-height:1.09 !important;
  letter-spacing:-.026em !important;
}
/* Fließtext im Hauptbereich: Farbe zurücksetzen */
.pd-referenz-article .tft-abschnitt,
.pd-referenz-article .tft-abschnitt p{
  color:var(--tft-text) !important;
}
/* Kicker bleibt bewusst rot (Design-Akzent) */
.pd-referenz-article .tft-kicker{
  color:var(--tft-rot) !important;
  text-transform:uppercase !important;
  letter-spacing:.16em !important;
}
/* Breadcrumb: dezenter Grauton wie im Design */
.pd-referenz-article .tft-brotkrumen,
.pd-referenz-article .tft-brotkrumen a{
  color:#8E8E93 !important;
  text-decoration:none !important;
}
.pd-referenz-article .tft-brotkrumen a:hover{
  color:var(--tft-rot) !important;
}
/* Kontakt-Band: da IST der Kicker heller (Design-Ausnahme) */
.pd-referenz-article .tft-kontakt-band h2,
.pd-referenz-article .tft-kontakt-band p:not(.tft-kicker){
  color:var(--tft-weiss) !important;
}
.pd-referenz-article .tft-kontakt-band .tft-kicker{
  color:#FFD9DF !important;
}
/* Footer: helle Schrift auf dunklem Hintergrund */
.pd-referenz-article .tft-footer h3{
  color:var(--tft-weiss) !important;
}

/* =========================================================
   FOOTER · Zwischenräume verkleinern.
   Original hat gap:32px zwischen den drei Blöcken (fuss-kopf,
   standorte, footer-unten) plus 48/24px Wrap-Padding und
   ca. 40px am fuss-kopf. Wirkt insgesamt zu locker.
   ========================================================= */
.pd-referenz-article .tft-footer .tft-wrap{
  padding-block:34px 20px !important;
  gap:14px !important;
}
.pd-referenz-article .tft-fuss-kopf{
  padding-bottom:12px !important;
  margin-bottom:10px !important;
  gap:clamp(14px,2vw,24px) !important;
}
.pd-referenz-article .tft-standorte{
  gap:14px 20px !important;
}
.pd-referenz-article .tft-footer-unten{
  padding-top:12px !important;
}

/* Zusätzlich: article und Seiten-Bottom-Reset — damit das Theme
   nichts an den Article-Fuß hängt (extra padding-bottom auf
   main/site-content etc.). */
body.pd-referenz-design{
  padding-bottom:0 !important;
}
.pd-referenz-article{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}
.pd-referenz-article > *:last-child{
  margin-bottom:0 !important;
}
body.pd-referenz-design main,
body.pd-referenz-design #main,
body.pd-referenz-design #primary,
body.pd-referenz-design .site-main,
body.pd-referenz-design .site-content,
body.pd-referenz-design .content-area{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

/* =========================================================
   ÄHNLICHE REFERENZEN · Horizontaler Slider mit Snap-Scroll
   Original-Design zeigt 3 Karten im Grid. Wir überschreiben
   auf Flex+scroll-snap für bis zu N konfigurierbare Items.
   ========================================================= */
.pd-referenz-article .tft-refs-kopf{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-end;gap:12px;margin-bottom:20px;
}
.pd-referenz-article .pd-slider-nav{display:flex;gap:8px}
.pd-referenz-article .pd-slider-nav button{
  width:40px;height:40px;
  background:var(--tft-weiss);
  border:1px solid var(--tft-linie);
  color:var(--tft-anthrazit);
  cursor:pointer;
  font-size:1.4rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s,color .15s,border-color .15s;
  padding:0;
  font-family:var(--f-display);
}
.pd-referenz-article .pd-slider-nav button:hover{
  background:var(--tft-rot);color:var(--tft-weiss);border-color:var(--tft-rot);
}
.pd-referenz-article .pd-slider-nav button:disabled{
  opacity:.35;cursor:not-allowed;background:var(--tft-weiss);color:var(--tft-anthrazit);border-color:var(--tft-linie);
}

.pd-referenz-article .pd-slider-viewport{
  position:relative;
}
.pd-referenz-article .tft-nahe.pd-slider{
  display:flex;
  grid-template-columns:none;         /* Original-Grid ausschalten */
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  gap:clamp(16px,2vw,24px);
  padding-bottom:12px;
  scrollbar-width:thin;
}
.pd-referenz-article .tft-nahe.pd-slider .tft-ref{
  flex:0 0 calc(33.333% - clamp(11px,1.4vw,16px));
  min-width:260px;
  scroll-snap-align:start;
}
@media (max-width:980px){
  .pd-referenz-article .tft-nahe.pd-slider .tft-ref{
    flex-basis:calc(50% - 8px);
  }
}
@media (max-width:620px){
  .pd-referenz-article .tft-nahe.pd-slider .tft-ref{
    flex-basis:calc(85%);
    min-width:0;
  }
  .pd-referenz-article .pd-slider-nav{display:none} /* Touch-Swipe genügt */
}
.pd-referenz-article .tft-nahe.pd-slider::-webkit-scrollbar{height:6px}
.pd-referenz-article .tft-nahe.pd-slider::-webkit-scrollbar-thumb{
  background:var(--tft-linie);border-radius:3px;
}
.pd-referenz-article .tft-nahe.pd-slider::-webkit-scrollbar-thumb:hover{
  background:var(--tft-grau);
}

/* Card-Variante ohne Bild — nur Titel als große Klick-Fläche. */
.pd-referenz-article .tft-ref--nur-titel{
  display:flex !important;
  align-items:center !important;
  grid-template-rows:none !important;
  min-height:120px;
  padding:20px 22px;
  background:var(--tft-weiss);
  transition:background-color .15s,box-shadow .15s;
}
.pd-referenz-article .tft-ref--nur-titel:hover{
  background:var(--tft-planpapier);
  box-shadow:0 14px 30px rgba(38,38,38,.10);
}
.pd-referenz-article .tft-ref--nur-titel .tft-schriftfeld{
  padding:0 !important;
  margin:0 !important;
}
.pd-referenz-article .tft-ref--nur-titel .tft-schriftfeld h3{
  padding:0 !important;
  margin:0 !important;
  font-size:.98rem !important;
  line-height:1.35 !important;
  color:var(--tft-anthrazit) !important;
}
.pd-referenz-article .tft-ref--nur-titel:hover .tft-schriftfeld h3{
  color:var(--tft-rot) !important;
}

/* Slider-Item MIT Ortzeile: Titel vertikal zentriert, Ort absolut unten-links.
   Sorgt für gleichmäßiges Erscheinungsbild egal wie lang der Titel ist —
   die Ortzeile sitzt immer auf derselben vertikalen Höhe, der Titel sitzt
   immer in der Mitte des freien Raums oberhalb. */
.pd-referenz-article .tft-nahe.pd-slider .tft-ref:not(.tft-ref--nur-titel){
  position:relative;
  min-height:130px;
  background:var(--tft-weiss);
  transition:background-color .15s,box-shadow .15s;
  display:grid;
  grid-template-rows:1fr;  /* Schriftfeld füllt die Karte, damit Zentrieren greift. */
}
.pd-referenz-article .tft-nahe.pd-slider .tft-ref:not(.tft-ref--nur-titel):hover{
  background:var(--tft-planpapier);
  box-shadow:0 14px 30px rgba(38,38,38,.10);
}
.pd-referenz-article .tft-nahe.pd-slider .tft-ref:not(.tft-ref--nur-titel) .tft-schriftfeld{
  display:flex;
  flex-direction:column;
  justify-content:center;  /* h3 vertikal mittig im verfügbaren Raum */
  padding:14px 16px 40px;  /* unten Platz für die absolut positionierte Ortzeile */
}
.pd-referenz-article .tft-nahe.pd-slider .tft-ref:not(.tft-ref--nur-titel) .tft-ortzeile{
  position:absolute;
  left:16px;
  right:16px;
  bottom:12px;
  margin:0;
  font-size:.78rem;
  font-weight:600;
  color:var(--tft-grau);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pd-referenz-article .tft-nahe.pd-slider .tft-ref:not(.tft-ref--nur-titel):hover .tft-schriftfeld h3{
  color:var(--tft-rot);
}

/* Scrollbar am Slider verstecken — Navigation läuft über Pfeile + Auto-Slide */
.pd-referenz-article .tft-nahe.pd-slider{
  scrollbar-width:none !important;   /* Firefox */
  -ms-overflow-style:none !important;/* IE/Edge Legacy */
  padding-bottom:0 !important;
}
.pd-referenz-article .tft-nahe.pd-slider::-webkit-scrollbar{
  display:none !important;
  height:0 !important;
}

/* =========================================================
   READ-MORE · Steckbrief-Werte auf N Zeilen begrenzen.
   N wird per --pd-lines aus dem HTML-Attribut gesetzt (kommt
   aus der Setting im Template Setup).
   ========================================================= */
.pd-truncatable{
  display:-webkit-box;
  -webkit-line-clamp:var(--pd-lines,3);
  line-clamp:var(--pd-lines,3);
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.pd-truncatable.pd-expanded{
  display:block;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  overflow:visible;
}
/* Read-More Button — vollständiges Reset gegen Theme-CSS
   (viele Themes setzen background:rot o.ä. auf button:hover). */
.pd-readmore,
.pd-readmore:hover,
.pd-readmore:focus,
.pd-readmore:active,
.pd-readmore:focus-visible{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  padding:4px 0 0 !important;
  margin:0 !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  min-height:0 !important;
  width:auto !important;
  height:auto !important;
}
.pd-readmore{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--tft-rot) !important;
  font-family:var(--f-display) !important;
  font-weight:600 !important;
  font-size:.8rem !important;
  line-height:1.2 !important;
  cursor:pointer;
  text-decoration:none !important;
}
.pd-readmore:hover{color:var(--tft-rot-dunkel) !important}
.pd-readmore:hover .pd-readmore-text{text-decoration:underline}
.pd-readmore:focus-visible{outline:2px solid var(--tft-rot) !important;outline-offset:2px !important}
.pd-readmore::after{content:"▾";font-size:.65em;line-height:1;transition:transform .15s ease}
.pd-readmore[aria-expanded="true"]::after{transform:rotate(180deg)}
.pd-readmore[hidden]{display:none !important}


/* =========================================================
   OPEN SANS · lokal geladen (assets/fonts/open-sans/)
   Latin-Subset, 300/400/600/700, WOFF2. Kein Google-CDN.
   ========================================================= */
@font-face{
  font-family:"Open Sans";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("../fonts/open-sans/open-sans-300.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Open Sans";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/open-sans/open-sans-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Open Sans";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("../fonts/open-sans/open-sans-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Open Sans";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/open-sans/open-sans-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =========================================================
   TYPO-SPERRE · 1:1 zur Quelle (temp_tpl_source/single.html)
   Der WP-Theme-Container liegt außen und drueckt via `body`,
   `.entry-*`, `.single h1` uva. eigene Typografie rein. Diese
   Regeln nageln alle relevanten Werte im Referenz-Scope
   (`body.pd-referenz-single`, `.pd-referenz-article`) explizit
   auf die Werte aus dem Quell-HTML fest.
   ========================================================= */

/* Body-Basis: Font-Stack, Farbe, Zeilenhoehe, Letter-Spacing
   uebernehmen wir 1:1. `margin:0` sowie `background` werden
   bewusst nicht am body geaendert — das gehoert dem Theme. */
body.pd-referenz-single{
  font-family:var(--f-text) !important;
  font-size:16px !important;
  line-height:1.55 !important;
  letter-spacing:.01em !important;
  color:var(--tft-text);
}

/* Alles innerhalb des Artikels erbt korrekt, aber Theme-Regeln
   greifen mit hoeherer Spezifitaet — daher explizit setzen. */
.pd-referenz-article,
.pd-referenz-article p,
.pd-referenz-article li,
.pd-referenz-article dt,
.pd-referenz-article dd,
.pd-referenz-article span,
.pd-referenz-article a,
.pd-referenz-article button,
.pd-referenz-article input,
.pd-referenz-article select,
.pd-referenz-article textarea{
  font-family:var(--f-text);
}
.pd-referenz-article{
  color:var(--tft-text);
  line-height:1.55;
  letter-spacing:.01em;
}

/* p ohne Aussenabstand (Quelle: `p{margin:0}`).
   Nur innerhalb der Textabschnitte gilt weiter der
   projektspezifische Abstand aus tft-abschnitt/tft-auftakt. */
.pd-referenz-article p{margin:0}
.pd-referenz-article a{color:inherit}
.pd-referenz-article img{max-width:100%;display:block}

/* Buttons haben eigene Farbwelt (rot mit weißem Text, bzw. weiß mit rotem
   Text) — die generische a{color:inherit}-Regel oben würde sie sonst auf
   die Farbe des Eltern-Bandes (rot) drücken. Deshalb hier explizit. */
.pd-referenz-article .tft-btn{color:var(--tft-weiss)}
.pd-referenz-article .tft-btn--hell{color:var(--tft-rot)}
.pd-referenz-article .tft-btn--hell:hover{color:var(--tft-weiss)}
.pd-referenz-article .tft-btn--leise{color:var(--tft-rot)}
.pd-referenz-article .tft-btn--leise:hover{color:var(--tft-rot-dunkel)}

/* Ueberschriften: Font-Familie, Farbe, Line-Height, Balance
   und die base Font-Sizes 1:1. Die groesseren Sondergroessen
   (.tft-projektkopf h1.t-*) haben durch hoehere Spezifitaet
   Vorrang, das kollidiert also nicht. */
.pd-referenz-article h1,
.pd-referenz-article h2,
.pd-referenz-article h3,
.pd-referenz-article h4{
  font-family:var(--f-display);
  color:var(--tft-anthrazit);
  line-height:1.2;
  margin:0;
  text-wrap:balance;
  font-weight:700;
}
.pd-referenz-article h1{font-size:clamp(1.5rem,2.1vw,1.9rem);letter-spacing:-.022em}
.pd-referenz-article h2{font-size:clamp(1.08rem,1.45vw,1.28rem);letter-spacing:-.015em}
.pd-referenz-article h3{font-size:.97rem;letter-spacing:-.01em}
.pd-referenz-article h4{font-size:.98rem}

/* Focus-Ring aus der Quelle. */
.pd-referenz-article :focus-visible{outline:3px solid var(--tft-rot);outline-offset:3px}

/* Kontaktband und Footer sind eigene Farb-Kontexte — Theme
   soll dort keine dunkle Standardschrift reinlegen. */
.pd-referenz-article .tft-kontakt-band,
.pd-referenz-article .tft-kontakt-band h2,
.pd-referenz-article .tft-kontakt-band p{color:var(--tft-weiss)}
.pd-referenz-article .tft-footer,
.pd-referenz-article .tft-footer p,
.pd-referenz-article .tft-footer li,
.pd-referenz-article .tft-footer a{color:#CFCFCC}
.pd-referenz-article .tft-footer h3{color:var(--tft-weiss)}

/* Fließtext linke Spalte (Body-Content + Maßnahmen/Meta-Blöcke unter dem Bild):
   Keine automatische Silbentrennung. Grammatisch wäre "Re-chenzentrum" korrekt,
   aber der Kunde will Wörter nicht getrennt sehen. Steckbrief rechts (.tft-karte)
   und H1 bleiben von diesem Override unangetastet — dort ist die Trennung
   wegen enger Spalten / mobiler Titel weiter erlaubt. */
.pd-referenz-article .tft-abschnitt,
.pd-referenz-article .tft-abschnitt p,
.pd-referenz-article .tft-abschnitt li,
.pd-referenz-article .tft-abschnitt ul li,
.pd-referenz-article .tft-auftakt,
.pd-referenz-article .tft-punkte,
.pd-referenz-article .tft-punkte li{
  hyphens:manual;
  -webkit-hyphens:manual;
  -ms-hyphens:manual;
  overflow-wrap:normal;
  word-break:normal;
}

/* Rotes Kontakt-Band: CTA + Telefonzeile rechtsbündig ausrichten (Desktop),
   damit der Button an der rechten Kante der Content-Spalte sitzt und mit
   dem Text-Block links optisch bündig ist. Unter 860px greift das
   Ein-Spalten-Layout — dort bleibt Standard (links). */
@media (min-width:861px){
  .pd-referenz-article .tft-kontakt-wege{
    justify-items:end;
    text-align:right;
  }
}