.elementor-kit-4{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-5ece1b0:#001D75;--e-global-color-adac2ce:#6C779C;--e-global-color-ababbd7:#001D75;--e-global-color-e87bc3c:#4C5A8B;--e-global-color-c05ce98:#F7F7F3;--e-global-color-15e3d53:#EEF1F8;--e-global-color-c01d520:#F1F4FB;--e-global-color-9dbac19:#001048;--e-global-color-e248787:#2F1A6A;--e-global-color-0d1f94f:#FF0000;--e-global-color-7817bfc:#305EFE;--e-global-color-a7703c2:#8D5B22;--e-global-color-b3f8166:#001D75;--e-global-color-a5f4f9a:#BDC3D8;--e-global-color-3f5d88c:#E9E3D8;--e-global-color-6f579e4:#FFFFFF;--e-global-color-951a23c:#F5F1EA;--e-global-color-6695d20:#111213;--e-global-color-107093c:#3A3B3D;--e-global-color-e0bae0b:#F0ECE6;--e-global-color-dd4342c:#0F052A;--e-global-color-a86804f:#F1EEE6;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-0f86bcf-font-family:"Work Sans lokal";--e-global-typography-0f86bcf-font-size:0.9rem;--e-global-typography-0f86bcf-font-weight:600;--e-global-typography-0f86bcf-font-style:normal;--e-global-typography-0f86bcf-line-height:1.2rem;--e-global-typography-31f2689-font-family:"Work Sans lokal";--e-global-typography-31f2689-font-size:0.8rem;--e-global-typography-31f2689-font-weight:400;--e-global-typography-31f2689-font-style:normal;--e-global-typography-31f2689-text-transform:none;--e-global-typography-31f2689-text-decoration:underline;--e-global-typography-31f2689-line-height:1rem;--e-global-typography-020068d-font-family:"Work Sans lokal";--e-global-typography-020068d-font-size:1.3rem;--e-global-typography-020068d-font-weight:600;--e-global-typography-020068d-line-height:1.4rem;--e-global-typography-020068d-letter-spacing:-0.2px;--e-global-typography-eed924b-font-family:"Work Sans lokal";--e-global-typography-eed924b-font-size:1rem;--e-global-typography-eed924b-font-weight:400;--e-global-typography-eed924b-line-height:1.3rem;--e-global-typography-710aeeb-font-family:"Satoshi Variable lokal";--e-global-typography-710aeeb-font-size:1.4rem;font-weight:400;--e-global-typography-710aeeb-line-height:2rem;--e-global-typography-710aeeb-letter-spacing:0px;--e-global-typography-4563800-font-family:"Work Sans lokal";--e-global-typography-4563800-font-size:1rem;--e-global-typography-4563800-font-weight:500;--e-global-typography-4563800-font-style:normal;--e-global-typography-4563800-text-transform:none;--e-global-typography-4563800-text-decoration:none;--e-global-typography-4563800-line-height:1.1rem;--e-global-typography-4686a4d-font-family:"Satoshi Variable lokal";--e-global-typography-4686a4d-font-size:5rem;--e-global-typography-4686a4d-font-style:normal;--e-global-typography-4686a4d-line-height:4.9rem;--e-global-typography-4686a4d-letter-spacing:-1.4px;--e-global-typography-3d6552f-font-family:"Satoshi Variable lokal";--e-global-typography-3d6552f-font-size:2.4rem;--e-global-typography-3d6552f-line-height:2.8rem;--e-global-typography-3d6552f-letter-spacing:-0.36px;--e-global-typography-3a55413-font-family:"Work Sans lokal";--e-global-typography-3a55413-font-size:1.4rem;--e-global-typography-3a55413-font-weight:500;--e-global-typography-3a55413-line-height:2rem;--e-global-typography-3a55413-letter-spacing:-0.6px;--e-global-typography-9d61232-font-family:"Satoshi Variable lokal";--e-global-typography-9d61232-font-size:3rem;--e-global-typography-9d61232-font-style:normal;--e-global-typography-9d61232-line-height:3.7rem;--e-global-typography-9d61232-letter-spacing:-1.4px;--e-global-typography-dde52fa-font-family:"Satoshi Variable lokal";--e-global-typography-dde52fa-font-size:1.5rem;--e-global-typography-dde52fa-font-style:normal;--e-global-typography-dde52fa-line-height:2rem;--e-global-typography-dde52fa-letter-spacing:-0.5px;font-family:"Work Sans lokal", Sans-serif;font-size:1rem;line-height:1.5rem;}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:var( --e-global-color-15e3d53 );font-family:"Work Sans lokal", Sans-serif;font-size:0.9rem;font-weight:600;font-style:normal;text-transform:none;text-decoration:none;line-height:1.2rem;color:var( --e-global-color-5ece1b0 );border-radius:4px 4px 4px 4px;padding:8px 20px 8px 20px;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 h1{font-family:"Satoshi variable lokal", Sans-serif;font-size:4.3rem;font-style:normal;line-height:4.6rem;letter-spacing:-1.4px;}.elementor-kit-4 h2{font-size:2.2rem;font-weight:700;line-height:2.6rem;letter-spacing:-0.4px;}.elementor-kit-4 input:not([type="button"]):not([type="submit"]),.elementor-kit-4 textarea,.elementor-kit-4 .elementor-field-textual{color:var( --e-global-color-ababbd7 );accent-color:var( --e-global-color-7817bfc );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}@media(max-width:1366px){.elementor-kit-4{--e-global-typography-710aeeb-font-size:1.2rem;--e-global-typography-710aeeb-line-height:1.7rem;--e-global-typography-4563800-font-size:0.94rem;--e-global-typography-4686a4d-font-size:3.8rem;--e-global-typography-4686a4d-line-height:4.1rem;--e-global-typography-3a55413-font-size:1.2rem;--e-global-typography-3a55413-line-height:1.7rem;--e-global-typography-9d61232-font-size:3.8rem;--e-global-typography-9d61232-line-height:4.1rem;--e-global-typography-dde52fa-font-size:3.8rem;--e-global-typography-dde52fa-line-height:4.1rem;}}@media(max-width:1200px){.elementor-kit-4{--e-global-typography-710aeeb-font-size:1.2rem;--e-global-typography-4686a4d-font-size:3.8rem;--e-global-typography-4686a4d-line-height:4.1rem;--e-global-typography-3a55413-font-size:1.2rem;--e-global-typography-9d61232-font-size:3.8rem;--e-global-typography-9d61232-line-height:4.1rem;--e-global-typography-dde52fa-font-size:3.8rem;--e-global-typography-dde52fa-line-height:4.1rem;}}@media(max-width:1024px){.elementor-kit-4{--e-global-typography-4686a4d-font-size:3.3rem;--e-global-typography-4686a4d-line-height:3.6rem;--e-global-typography-9d61232-font-size:3.3rem;--e-global-typography-9d61232-line-height:3.6rem;--e-global-typography-dde52fa-font-size:3.3rem;--e-global-typography-dde52fa-line-height:3.6rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:880px){.elementor-kit-4{--e-global-typography-4686a4d-font-size:3.4rem;--e-global-typography-4686a4d-line-height:3.6rem;--e-global-typography-9d61232-font-size:3.4rem;--e-global-typography-9d61232-line-height:3.6rem;--e-global-typography-dde52fa-font-size:3.4rem;--e-global-typography-dde52fa-line-height:3.6rem;}}@media(max-width:620px){.elementor-kit-4{--e-global-typography-710aeeb-font-size:1.25rem;font-weight:500;--e-global-typography-710aeeb-line-height:1.75rem;--e-global-typography-4686a4d-font-size:2.8rem;--e-global-typography-4686a4d-line-height:3rem;--e-global-typography-3d6552f-font-size:1.9rem;--e-global-typography-3d6552f-line-height:2.2rem;--e-global-typography-3a55413-font-size:1.2rem;--e-global-typography-3a55413-line-height:1.7rem;--e-global-typography-9d61232-font-size:2.8rem;--e-global-typography-9d61232-line-height:3rem;--e-global-typography-dde52fa-font-size:2.8rem;--e-global-typography-dde52fa-line-height:3rem;}.elementor-kit-4 h1{font-size:2.7rem;line-height:3rem;letter-spacing:-1.3px;}.elementor-kit-4 h2{font-size:2rem;line-height:2.4rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */html, body{overflow-x:hidden;}
::selection {
  background: #ffffff00;
  color: #FF0000;
}

/* ============================================================
   Dachbau Püllmann – Main-Card-Sektion „Leistungen"
   Digital Candy (Marc), 2026-09-15.

   Gehört zum Container .pm-grid in dieser Seite. Karten sind
   Elementor-Container mit Link, Optik komplett hier – die
   Style-Tabs der Widgets bleiben leer, damit es eine Quelle gibt.
   Beim Umzug auf die finale Startseite in ein Elementor-Custom-
   Code-Snippet überführen.

   Doppelte Klassen (.pm-card.pm-card) heben die Spezifität über
   Elementors eigene Regeln, ohne !important.
   ============================================================ */
.pm-grid{
  --pm-blue:#001D75; --pm-blue-900:#001048; --pm-red:#FF0000;
  --pm-ease:cubic-bezier(.22,.61,.36,1); --pm-dur:.42s; --pm-dur-soft:.55s;
}
.pm-grid.pm-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,1.6vw,1.5rem); align-items:stretch;
}

/* ---------- Karte ---------- */
.pm-card.pm-card{
  position:relative; isolation:isolate; overflow:hidden;
  /* Seitenverhältnis gibt die Form vor, min-height sichert den Inhalt:
     bei vier Spalten ist die Karte nur rund 246 px breit, der Subtext
     läuft dort über fünf Zeilen. Ohne Mindesthöhe schneidet die Karte
     ihn im aufgeklappten Zustand oben ab (gemessen: Körper 377 px in
     einer 344 px hohen Karte). */
  aspect-ratio:5/7; min-height:400px; padding:0; gap:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  border-radius:16px; color:#fff; text-decoration:none;
  transition:transform var(--pm-dur-soft) var(--pm-ease),
             box-shadow var(--pm-dur-soft) var(--pm-ease);
}
/* Die breite Karte nimmt die Höhe ihrer Zeile an – die geben die
   hochkanten Nachbarn vor. */
.pm-card--wide.pm-card--wide{ grid-column:span 2; aspect-ratio:auto; height:100%; }
.pm-card.pm-card:hover, .pm-card.pm-card:focus-visible{
  transform:translateY(-6px); box-shadow:0 26px 52px -26px rgba(0,0,0,.45);
}
.pm-card.pm-card:focus-visible{ outline:3px solid var(--pm-blue-900); outline-offset:3px; }

/* ---------- Bild ---------- */
.pm-card__media.pm-card__media{ position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; }
/* Elementor 4.x rendert Widgets OHNE .elementor-widget-container –
   der Inhalt haengt direkt im Widget-Div. Deshalb "> *". */
.pm-card__media > *{ height:100%; }
.pm-card__media img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:0;
  transition:transform 1.1s var(--pm-ease);
}
.pm-card:hover .pm-card__media img,
.pm-card:focus-within .pm-card__media img{ transform:scale(1.045); }

/* ---------- Schleier in #0F052A (Kit-Farbe). Die Deckung liegt bei 85 % der
   urspruenglichen Werte – abgeschwaecht wurde ueber die Opazitaet, nicht
   ueber den Farbton. Radial aus der unteren linken Ecke. Der blaue Schleier kommt erst auf :hover dazu.
   ---------- */
.pm-card.pm-card::before, .pm-card.pm-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
}
.pm-card.pm-card::before{
  z-index:2;
  background:radial-gradient(150% 118% at 0% 100%,
    rgba(15,5,42,.53) 0%, rgba(15,5,42,.42) 20%, rgba(15,5,42,.31) 36%,
    rgba(15,5,42,.2) 50%, rgba(15,5,42,.12) 63%, rgba(15,5,42,.06) 75%,
    rgba(15,5,42,.03) 86%, rgba(15,5,42,0) 100%);
}
.pm-card.pm-card::after{
  z-index:3; opacity:0;
  background:radial-gradient(155% 125% at 0% 100%,
    rgba(0,12,47,.36) 0%, rgba(0,12,47,.30) 22%, rgba(0,12,47,.22) 40%,
    rgba(0,12,47,.15) 56%, rgba(0,12,47,.085) 70%, rgba(0,12,47,.04) 83%,
    rgba(0,12,47,.012) 92%, rgba(0,12,47,0) 100%);
  transition:opacity var(--pm-dur-soft) var(--pm-ease);
}
.pm-card:hover::after, .pm-card:focus-within::after{ opacity:1; }

/* ---------- Textkörper: trägt den Lesbarkeitsverlauf, wächst mit
   dem aufklappenden Subtext mit. ---------- */
/* position:static, damit die Klickflaeche des CTA (::before) sich auf
   die ganze Karte bezieht und nicht nur auf den Textkoerper. z-index
   wirkt hier trotzdem: der Koerper ist ein Flex-Element der Karte. */
.pm-card__body.pm-card__body{
  position:static; z-index:4; width:100%; gap:0;
  padding:clamp(1.4rem,2vw,1.85rem);
  padding-top:clamp(3rem,6vw,4.5rem);
  background:linear-gradient(to top,
    rgba(15,5,42,.7) 0%, rgba(15,5,42,.68) 45%, rgba(15,5,42,.63) 60%,
    rgba(15,5,42,.54) 70%, rgba(15,5,42,.44) 78%, rgba(15,5,42,.32) 85%,
    rgba(15,5,42,.21) 90%, rgba(15,5,42,.12) 94%, rgba(15,5,42,.05) 97%,
    rgba(15,5,42,0) 100%);
}
.pm-card__title.pm-card__title{ margin:0; }
.pm-card__title .elementor-heading-title{
  font-family:'Satoshi variable lokal',system-ui,sans-serif; font-weight:700; color:#fff;
  font-size:clamp(1.45rem,1.1rem + .9vw,1.8rem);
  line-height:1.12; letter-spacing:-.36px; text-wrap:balance; margin:0;
}
.pm-card--wide .pm-card__title .elementor-heading-title{
  font-size:clamp(1.7rem,1.1rem + 1.3vw,2.2rem);
}

/* Subtext erst auf :hover – Höhe über grid-template-rows 0fr -> 1fr */
.pm-card__reveal.pm-card__reveal{
  display:grid; grid-template-rows:0fr; opacity:0; margin:0;
  transition:grid-template-rows var(--pm-dur-soft) var(--pm-ease),
             opacity .4s var(--pm-ease) .06s,
             margin-top var(--pm-dur-soft) var(--pm-ease);
}
/* Ohne overflow:hidden am Grid-Kind faellt die 0fr-Spur nicht auf 0,
   sondern auf min-content – der Subtext braeuchte dann Platz, obwohl
   er unsichtbar ist. */
.pm-card__reveal > *{ overflow:hidden; }
.pm-card__reveal p{
  margin:0; font-size:.95rem; line-height:1.45;
  color:rgba(255,255,255,.88); max-width:32ch;
}
.pm-card:hover .pm-card__reveal.pm-card__reveal,
.pm-card:focus-within .pm-card__reveal.pm-card__reveal{
  grid-template-rows:1fr; opacity:1; margin-top:.7rem;
}

/* Sekundärer CTA – Bauart wie auf der Seite: Work Sans 600, 0,9 rem,
   1 px rote Kante, Pfeil läuft auf :hover mit. */
/* Der CTA erscheint zusammen mit dem Subtext – gleiche Mechanik
   (grid-template-rows 0fr -> 1fr), damit die Karte im Ruhezustand nur
   Bild und Titel zeigt. Der Versatz von .1s laesst ihn dem Text folgen,
   statt mit ihm zu springen.
   Bewusst kein display:none: der Link muss fokussierbar bleiben – beim
   Tabben klappt die Karte ueber :focus-within auf, bevor er dran ist.
   position:static ist Pflicht: Elementor gibt jedem Widget
   position:relative, damit waere das Widget der Bezugsrahmen fuer
   a::before und die Klickflaeche laege nur ueber dem CTA statt ueber der
   ganzen Karte. */
.pm-card__cta.pm-card__cta{
  --pm-cta-abstand:1.1rem;
  position:static;
  display:grid; grid-template-rows:0fr; opacity:0; margin:0;
  transition:grid-template-rows var(--pm-dur-soft) var(--pm-ease),
             opacity .4s var(--pm-ease) .1s,
             margin-top var(--pm-dur-soft) var(--pm-ease);
}
/* Wie beim Subtext: ohne overflow:hidden am Grid-Kind faellt die 0fr-Spur
   nicht auf 0, sondern auf min-content. */
.pm-card__cta > *{ overflow:hidden; }
.pm-card:hover .pm-card__cta.pm-card__cta,
.pm-card:focus-within .pm-card__cta.pm-card__cta{
  grid-template-rows:1fr; opacity:1; margin-top:var(--pm-cta-abstand);
}
.pm-card__cta p{ margin:0; }
.pm-card__cta a{
  display:inline-flex; align-items:center; gap:.5rem; padding:0 0 4px;
  font-size:.9rem; font-weight:600; color:#fff; text-decoration:none;
  border-bottom:1px solid var(--pm-red);
}
/* Der CTA-Link deckt die ganze Karte ab: eine Klickfläche wie bei einer
   verlinkten Kachel, aber genau ein Link je Karte – mit aria-label, weil
   „Mehr erfahren" sieben Mal vorkommt. */
.pm-card__cta a::before{ content:""; position:absolute; inset:0; z-index:5; }
.pm-card__cta a::after{
  content:""; width:16px; height:16px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--pm-dur) var(--pm-ease);
}
.pm-card__cta a:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
.pm-card:hover .pm-card__cta a::after,
.pm-card:focus-within .pm-card__cta a::after{ transform:translateX(5px); }

/* ---------- Breiten ----------
   Vier Spalten (1+1+2+3 / 4+5+6+7), ab Tablet quer drei, ab Telefon
   quer zwei, hochkant eine. Sieben Karten gehen in drei Spalten nur
   auf, wenn die breite Karte die ganze Zeile nimmt: 1 / 3 / 3. */
@media (max-width:1200px){
  .pm-grid.pm-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pm-card--wide.pm-card--wide{ grid-column:span 3; aspect-ratio:21/9; height:auto; }
}
/* Telefon quer: der Bildschirm ist breit, aber flach – hohe Karten
   fuellen ihn komplett. Die Karte geht deshalb von 550 auf rund 260 px.
   Weiter runter geht nur ohne Subtext: der Textkoerper braucht mit ihm
   rund 200 px, der Rest ist Bild. */
@media (max-width:880px){
  .pm-grid.pm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pm-card.pm-card{ aspect-ratio:3/2; min-height:0; }
  .pm-card--wide.pm-card--wide{ grid-column:span 2; aspect-ratio:3/1; }
  /* Flache Karte: der Textkoerper nimmt hier drei Viertel der Kartenhoehe
     ein, der lange weiche Auslauf von oben haette gar keinen Platz mehr und
     liesse die Headline ueber dem hellen Bildteil stehen (gemessen 2,5:1).
     Gleiche Deckung unten, nur kuerzerer Weg nach oben. */
  .pm-card__body.pm-card__body{
    padding:1.1rem; padding-top:2.2rem;
    background:linear-gradient(to top,
      rgba(15,5,42,.7) 0%, rgba(15,5,42,.69) 60%, rgba(15,5,42,.64) 74%,
      rgba(15,5,42,.52) 84%, rgba(15,5,42,.33) 92%, rgba(15,5,42,.14) 97%,
      rgba(15,5,42,0) 100%);
  }
  /* 1,2 rem = 19,2 px: ab 18,66 px gilt fetter Text als Grosstext, dort
     reichen 3:1 statt 4,5:1. Darunter waere der Titel ueber hellen
     Bildstellen nicht mehr konform. */
  .pm-card__title .elementor-heading-title{ font-size:1.2rem; }
  .pm-card__cta.pm-card__cta{ --pm-cta-abstand:.8rem; }
}
/* Hochkant ist wieder Hoehe da: Subtext zurueck, Groessen wie oben. */
@media (max-width:640px){
  .pm-grid.pm-grid{ grid-template-columns:1fr; }
  .pm-card.pm-card{ aspect-ratio:3/4; }
  .pm-card--wide.pm-card--wide{ grid-column:auto; aspect-ratio:3/4; height:auto; }
  .pm-card__reveal.pm-card__reveal{ display:grid; }
  .pm-card__body.pm-card__body{ padding:clamp(1.4rem,2vw,1.85rem); padding-top:clamp(3rem,6vw,4.5rem); }
  .pm-card__title .elementor-heading-title{ font-size:clamp(1.45rem,1.1rem + .9vw,1.8rem); }
  .pm-card__cta.pm-card__cta{ --pm-cta-abstand:1.1rem; }
}
/* Ohne :hover steht der Subtext dauerhaft, der blaue Schleier entfällt. */
@media (hover:none){
  .pm-card__reveal.pm-card__reveal{ grid-template-rows:1fr; opacity:1; margin-top:.7rem; }
  .pm-card__cta.pm-card__cta{ grid-template-rows:1fr; opacity:1; margin-top:var(--pm-cta-abstand); }
  .pm-card.pm-card::after{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .pm-card.pm-card, .pm-card__media img, .pm-card__reveal.pm-card__reveal,
  .pm-card__cta.pm-card__cta, .pm-card.pm-card::after,
  .pm-card__cta a::after{ transition:none; }
  .pm-card.pm-card:hover, .pm-card.pm-card:focus-visible{ transform:none; }
  .pm-card:hover .pm-card__media img,
  .pm-card:focus-within .pm-card__media img{ transform:none; }
}
/* ---------- Kontaktkarte (HTML-Widget) ----------
   Nachbau des frueheren Elementor-Kastens als EIN html-Widget, damit die
   Karte beim Hover wachsen kann. Der alte Aufbau hatte min-height:588px und
   verteilte den Rest ueber justify-content:space-between – die Luft zwischen
   Headline und Foto lag dadurch bei rund 94 px.

   Hier gibt es genau ein Abstandsmass (--pmk-luft): oben, Text->Foto,
   Foto->Fuss und unten. Keine feste Hoehe mehr; die Karte waechst um den
   Subtext (gemessen 480 -> 582 px). Sie waechst dabei nur nach unten – der
   Zeiger kann also nie aus der Karte fallen, es gibt kein Flackern.

   Die Spalte drumherum heisst .pm-kontaktspalte und traegt nur noch Breite
   und Abstaende je Breakpoint. ---------- */
.pm-kontaktkarte{
  --pmk-luft:48px; --pmk-seite:32px; --pmk-titel-abstand:12px;
  --pmk-ease:cubic-bezier(.22,.61,.36,1); --pmk-dauer:.42s;
  display:flex; flex-direction:column;
  /* schneidet das Foto auf die Rundung zu und haelt die auffahrende Zeile drin */
  overflow:hidden; border-radius:8px;
  background:linear-gradient(180deg,#122C7A 0%,#001D75 100%);
  color:#fff;
}
/* Flex, nicht Grid: der negative Rand am Reveal verrechnet den Gap nur in
   einem Flex-Container mit der Aussenhoehe. Im Grid blieben 12 px Loch
   unter der Headline stehen (gemessen). */
.pm-kontaktkarte__kopf{
  display:flex; flex-direction:column; gap:var(--pmk-titel-abstand);
  padding:var(--pmk-luft) var(--pmk-seite);
}
.pm-kontaktkarte__titel{
  margin:0; font-family:'Satoshi Variable lokal',system-ui,sans-serif;
  font-size:1.3rem; font-weight:600; line-height:1.4615; letter-spacing:-.4px;
  color:#fff; text-wrap:balance;
}
/* Subtext ueber die 0fr-Spur – kein geratener Zielwert, stimmt also auch,
   wenn der Text laenger wird. */
.pm-kontaktkarte__reveal{
  display:grid; grid-template-rows:0fr; opacity:0;
  margin-top:calc(var(--pmk-titel-abstand) * -1);
  transition:grid-template-rows var(--pmk-dauer) var(--pmk-ease),
             opacity calc(var(--pmk-dauer) * .7) var(--pmk-ease) .06s,
             margin-top var(--pmk-dauer) var(--pmk-ease);
}
/* overflow am echten Element-Kind – sonst faellt die 0fr-Spur auf min-content. */
.pm-kontaktkarte__reveal > *{ overflow:hidden; }
.pm-kontaktkarte__reveal p{
  margin:0; font-size:1rem; font-weight:500; line-height:1.4;
  letter-spacing:-.4px; color:#BDC3D8;
}
.pm-kontaktkarte:hover .pm-kontaktkarte__reveal,
.pm-kontaktkarte:focus-within .pm-kontaktkarte__reveal{
  grid-template-rows:1fr; opacity:1; margin-top:0;
}
/* Das Foto laeuft randlos ueber die volle Kartenbreite und liegt im Fluss –
   nicht mehr als Hintergrund-Overlay. Damit kann es den Text auf schmalen
   Breiten nicht mehr unterlaufen. */
.pm-kontaktkarte__foto{ display:block; width:100%; height:auto; }
.pm-kontaktkarte__fuss{ padding:var(--pmk-luft) var(--pmk-seite); }
.pm-kontaktkarte__name{ margin:0; font-size:1rem; font-weight:600; line-height:1.4; color:#fff; }
.pm-kontaktkarte__rolle{ margin:0; font-size:.8rem; font-weight:400; line-height:1.25; color:#fff; }
.pm-kontaktkarte__tel{
  display:inline-block; margin-top:1rem; padding:0 0 4px;
  font-size:.9rem; font-weight:600; line-height:1.3333;
  color:#EEF1F8; text-decoration:none; border-bottom:1px solid #FF0000;
  transition:color var(--pmk-dauer) var(--pmk-ease);
}
.pm-kontaktkarte__tel:hover{ color:#fff; }
.pm-kontaktkarte__tel:focus-visible{ outline:3px solid #fff; outline-offset:4px; border-radius:2px; }
/* Ohne Zeiger kein Verstecken: auf Touch steht der Subtext dauerhaft. */
@media (hover:none){
  .pm-kontaktkarte__reveal{ grid-template-rows:1fr; opacity:1; margin-top:0; }
}
@media (prefers-reduced-motion:reduce){
  .pm-kontaktkarte__reveal, .pm-kontaktkarte__tel{ transition:none; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Work Sans lokal';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://puellmann-dach.de/wp-content/uploads/2026/06/WorkSans-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Work Sans lokal';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://puellmann-dach.de/wp-content/uploads/2026/06/WorkSans-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Work Sans lokal';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://puellmann-dach.de/wp-content/uploads/2026/06/WorkSans-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Work Sans lokal';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://puellmann-dach.de/wp-content/uploads/2026/06/WorkSans-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Work Sans lokal';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://puellmann-dach.de/wp-content/uploads/2026/06/WorkSans-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Work Sans lokal';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://puellmann-dach.de/wp-content/uploads/2026/06/WorkSans-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Work Sans lokal';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://puellmann-dach.de/wp-content/uploads/2026/06/WorkSans-Black.ttf') format('truetype');
}
@font-face {
	font-family: 'Work Sans lokal';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://puellmann-dach.de/wp-content/uploads/2026/06/WorkSans-Bold.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Satoshi Variable lokal';
	font-display: auto;
	src: url('https://puellmann-dach.de/wp-content/uploads/2026/06/Satoshi-Variable.ttf') format('truetype');
}
/* End Custom Fonts CSS */