/* =================================================================
   pfretschner-base — Grund-Stylesheet
   Uebernommen aus dem Mockup V4 (08/2026), ergaenzt um Satzfeinheiten.
   Schriften werden NICHT hier eingebunden, sondern dynamisch im
   <head> (siehe inc/schriften.php) — damit sie im Backend
   austauschbar bleiben.
   ================================================================= */

/* ==================================================================
   pfretschner — Website, Übersetzung der CI (Mockup V3, 08/2026)

   SCHRIFT  Hausschrift Brockmann, eingebunden nur per local() —
            siehe Block darüber. Figtree ist der Fallback für alle,
            die die Schrift nicht installiert haben.
   LOGO     Wortmarke und Claim liegen als Vektorpfade vor, direkt
            aus dem CI-PDF gezogen. Damit sitzen sie unabhängig von
            der Schriftlizenz exakt richtig.
   AUFBAU   One-Pager. Die Navigation springt zu Ankern, es gibt
            keine Unterseiten.
   BEWEGUNG Bewusst keine. Kein Scroll-Effekt, kein Reveal, kein
            Bildwechsel, auch kein Smooth-Scrolling. Einzige
            Zustandsänderung: Farbwechsel bei Links im Hover.
================================================================== */

:root{
  --ink:#1D1D1B;
  --paper:#FFFFFF;
  --mint:#ACE0B0;
  --wash:#F4FBF5;
  --rule:#E0E0DC;
  --muted:#6E6E68;
  --deep:#3F6B47;

  --max:1360px;
  --pad:clamp(20px,5vw,72px);

  --cur-ink:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACf0lEQVR4nO2WP2sUURTFz7lvzMoiakJIyO7OrmmChVhbCza2+QIWprBSiIiFlSCSINiInVrYiTa2+gEitoKVmmTYwT9soxAkO+9ei32TzC6zS4irFu6BLd7O3fM77907swP8Z5Lw+SdgV1i7YYXjFgFE+aJer5+N48bzVmvhdB7sTx1HDjYAWa1WW4rj+iMRvBXhcrdLywujoRaHBzsAGYBsfn7+VKXirprxsogcU1Woqi/+YFwBiF6ffQDPVSpHrpjZNVJOmilUtRt4ff0fRwAXwH5mZuZ4tXp0heQNknNmBu81I+Gw3xIdVwAXzDyAqUajsULaqogsmhlUNQPgyD2wJxmRgPd7I3CoAEUw4rh2ieQqyTNmyHsswdvMkIkwIhmZ6Qfv7U61Wt1Er23KYMoS0KDyGgWAZrO+bMbrIjxnZjAzj/1ZKOyYUNVtAPd3dn4+6nQ6P8pMD6w4XrgAuJsiPD8ErACciEBVv5J8mGX6IE3TTuEE9+4EAmCr1TphZqVhVJWqSgBLzsktEVzsfd8HRjDNwd9Je0x217a2vn0O16NQY0V/NpvNabPsDclZMzOz8lMhOR3MNZjkt5MHICJCVd0l7Qng17a3v3waBc4Vhd3NinC6ByorAwoDNgh2vam3p2ZcT5L2uwFwVu64XwSS3V47YRg+F/lTTtEj5+AXqnav3W5vhDoXdjsS3BdgBLQIVwBG0gGAmb4CbD1J0tcDYD/EY2SAHDI0CEkhAVVsAHo3SdKXvwMuC4BgxIF1GB57r2q3kyR9Fq5JqD0UOBcBuEajsRhF6nZ3y4umpoDNzfQjgC76/3j+usb+JpMf90FeTArtmGiiiSaaaHz6BT7aHia5//99AAAAAElFTkSuQmCC") 29 3, auto;
  --cur-paper:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABnElEQVR4nO2Vr08DMRSA37tbQEHYRggSDCAIGjxYDAkaNIaEPwCN4i8gJOhZDAl6QYMkI8ghIATFtrsPcW3WHet+3A4Q3Jc0d821/V5f26vIfwIIgOCvxKFTDwe1z1OsQMmpbwA1YM0G9lviFeAC+CRh9UcC6CNeAs6BD7p0cg/AiN01XgBOgTdH3ALi3DOQEs8CJ0DTEbeNOAai3DIAhICa9yngCGj0EWOebedb9gBcsakfAPepNfaJH4FDYNodw67hsNLzEwH2gHpKHHnEz8AxMJM55Y54B7gdIO4435okm7HqZjA9oAJzQNlTKkAV2AKuPWJbt7yTHL9Fx1PqSbtBgbKI3InIvIggIt8aGcrmGZt2diaRiASmX0tELkXkTFWfrFhEIlXFl9IK8MpodFLvsVO/AtaHzdgXQJPuOY09xRKlUl8DNp3xQsY5XiaAlyEBWLGbgRtgO7O4TwCjUgd2JxZ7AohTMpuVCHgA9p1+PXd8VuwlsizdXe2joaptko0VqGo0qXxs8phxGnuZjLKGeM9yQUFBQcEEfAEqmI2nCYnPXwAAAABJRU5ErkJggg==") 29 3, auto;
  --cur-ink-gross:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAADQklEQVR42u2Y7YsNYRjGf/Oye5a8f5CXXUTaJF+EbEJqv8nLilD+EeXPQYQvQiGLJK+FQktCQqsti0XH2TMzvtyPLrNnjxnnnD1n6zx1OtPMPPNcc93Xfd33M15Pz1Km0whbFJcPBHZcBpJWBewDnh2PtzrDDmhsjAb2AgkQOZb9FgAaAAX7xRL+Q8BRYKWc88Mmshnafxn4ZednA33AZmCvnbsoc7ywCUA9Y0w1Og9YAWwH9gNb7L4huc9rhoZ9+5Xl3CoDeRBYa5gi+0+akXSBWNS4gcHA7QH6gV5gicwpSdJ5UwU4kPCXJKzrTKdbDewicYdxmfOXOzQSsFtQM74AzAc2AoeBAaBLWI/FLdxcH+hsNMMu/InodCawzzS6AVhgQLD7QgEV2Twnm8609YZ1SiQX/kjC3w3ssND3mWa1OMQVCkNBmH4FnAWGZa04rFBp8oIlZT3dZvY7gV3AGmGzaHNCAeulGH8DPAWuAJeAT3ItCWsA65jypBCsBw4Au4HV0ry4NQopjTsXiIEfwEPgBHAeGLHrsQD+Iwk/Z5n2JPSJhX3Asn4ZMHeShia28HtAh0TnMnAGuAt8MPAI2AkajkToWccMK6HbrDJtEqDueY6ISBLMefIX4A5wA7gN3BdpBcJuVAnwctNdKYNm3cK9VqH65XpRkrBjkuT+DLwFbgKngXspyTgZTdpe+sAR4BgwmiEJY3vwHAGSSJarRWn/gGX+SQv/yxSjSBNUdceRAAvNyBf/R+IpMA1hhwB9YF3XLeB5yqp8TaqsW6Sf9nZeRsdI5L4g5Rid8swh4LHZ06BE0EnGFYo4z57Ok/Kp5dTP4BQK3pewjgLXLPSDwJis4QpFsZZNqJejgHgVnMWxOmJsnjMH+JoqKqU84a8G2JXUWIzdqwLWadTJ4b0xehV4BLyQl9GuLaLG4QDPEpbyjHdWRq8DF0yzDmSXtIwJdRoO8HdjOKkiDS2nZeAZcNx0OlyBzSINGM7WTgFPMoQsMSmMAa+Bj8C31PWknoxO0GQdPlW5HjiutENo1KcqP0fHlqSapShDSa874LysTAmb//pUlXfxKQdbC8NN/Vo4rUYbcBtwG3AbcBtwG3AbcEuN3zfP5S6kAj1kAAAAAElFTkSuQmCC") 40 4, auto;
  --cur-paper-gross:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAADN0lEQVR42u2Y7YsNURzHP2dm9oE8vxDaEGkT3gjZhNS+k4cVofwjyp+DEt4IhSySPBYvEBISWm1Zj9u6e2eON79TX9O9153de927dU9Nd+7MOc13vt/v7+GM894zk0bSprgiILbzMuDbFXAEODufbHeGA9DMGI3tBTyQBpajNgAaAz12ZCL/EeA4sEquRUkL2Uzstwz8tutzgQFgK7Dfrl2SNS5pAVBnjKlHFwArgZ3AQWCbzXsh81wrPBzZUZZrqw3kYWCdYUrt17ci6GJJUZMGBgO3DxgE+oFlsqYkQef+F+BY5C+JrBvMp9sN7BLJDpOy5q/s0EzA4YEa8T3AQmAzcBQYAnqF9UyyRVgbAd3NZjjI78Wns4ED5tFNwCIDgs1LBFRq64JtuvOpN2lQIAX5U5G/D9hl0g+YZ7U4ZBUKQ48w/Ro4B4zIs7KkQqUpCpZc6umzZL8b2AOsFTYnbE0iYF2O8bfAU+AqcBn4LPe8s27NNcCzCbAROATsBdZI8xLmRTmPh/8Z8At4BJwCLgCjdj+rZImoYJl2Ir032Ycs6pcD86s0NJnJ74AuUecKcBa4B3w08OTBArhp9MOzrITusMq0RYCmdkTCUj7AvgJ3gZvAHeCBWCuWdWklwCvMd6U6PBse3G8ValDuT0gQRlXi4wvwDrgFnAHuy5xusVFarb2MgGPACWCsjiDMLIrniaW8RLmmKO0fsMg/bfK/yjGKNEE1dxweWGyJfOkUrKHAVMIuAfrQuq7bwPNcqorkpeveIo3b27k6M4aXebEwr7KOW7f1xNLTsCgY2wuFQpEV2dM5KZ9aTqM6MoWCj0TWMeC6ST8M/JBnhEIxMZ1NqCtQQFwuEyCsjhqb5y0DfMsVlVIR+WsBDiU1k8TuaoANHg12+GCMXgMeAy/lZbRrSxu1zZ8jLBUZ762M3gAummcDyF5pGRv28SMA/mkM+xrW0HJaBp4BJ82nIxXYnKAJw3nvHbDempS0juzQZUH0BvgEfK+SonyzADeqB84q7RCaBTgq0LH5XLOUNiKYigJ2FG8xfbPZ/NenKj8FwC37ejljvrlGzLDRAdwB3AHcAdwB3AHcAdxW4w9FrfRBJvubkgAAAABJRU5ErkJggg==") 40 4, auto;

  --font:"PFR Hausschrift","Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.5;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}

/* Signatur: der Cursor ist der Querbalken des t aus der Wortmarke.
   Er ist von der ersten Sekunde an da und verändert sich nie. */
@media (hover:hover) and (pointer:fine){
  body,a,button{cursor:var(--cur-ink)}
  /* Auf Mint bleibt der Cursor schwarz — die Flaeche ist hell, der Text
     dort ist ebenfalls schwarz. Weiss war auf Mint praktisch unsichtbar,
     wodurch auch der Wechsel ueber Links nicht mehr wahrnehmbar war. */
  .on-ink,.on-ink *{cursor:var(--cur-paper)}

  /* Barrierefreiheit: ueber allem Anklickbaren waechst der Cursor von 32
     auf 44 Pixel. Ohne diesen Wechsel gaebe es keine Rueckmeldung mehr
     darueber, was ein Link ist — der Signatur-Cursor ersetzt ja die
     gewohnte Hand. Groesse wirkt unabhaengig vom Farbsehen. */
  a,button,summary,[role="button"]{cursor:var(--cur-ink-gross)}
  .on-ink a,.on-ink button{cursor:var(--cur-paper-gross)}
}
::selection{background:var(--mint);color:var(--ink)}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- Wortmarke ---------------------------------------- */
.mark{display:block;width:auto;overflow:visible;color:var(--ink)}
.claim,.mark{flex:none}
.mark--nav{height:clamp(32px,7vw,38px)}
.mark--hero{height:clamp(88px,10.5vw,148px);color:#fff;fill:currentColor}
.mark--foot{height:64px}
.claim{width:auto;height:clamp(56px,7vw,92px);color:#fff;display:block;fill:currentColor}

/* ---------- Kopf ---------------------------------------------- */
header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:16px 0 14px}
nav{display:flex;flex-wrap:wrap;gap:clamp(16px,2.2vw,34px);padding-bottom:2px}
/* WordPress gibt Menuepunkte als <li> aus. Ohne umgebendes <ul> zeigt
   der Browser trotzdem Aufzaehlungspunkte — im Entwurf gibt es keine. */
nav li{list-style:none;margin:0;padding:0}
nav a{color:var(--muted);text-decoration:none;font-size:clamp(14px,3.4vw,16px);padding-bottom:3px;border-bottom:1px solid transparent}
nav a:hover{color:var(--ink)}

/* Schmale Bildschirme: Die vier Menuepunkte brauchen zusammen mehr Platz,
   als zwischen Wortmarke und Innenrand uebrig ist. Ohne min-width:0 darf
   das Menue nicht unter seine Inhaltsbreite schrumpfen und laeuft
   stattdessen ueber den Rand hinaus — "kontakt" klebte am Bildschirmrand.
   Mit Schrumpferlaubnis bricht es sauber um und bleibt im Raster. */
@media (max-width:640px){
  .head{gap:16px}
  nav{min-width:0;flex:1 1 auto;justify-content:flex-end;gap:8px 14px}
  nav a{font-size:14px}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ---------- Linienraster (aus dem Logo-Konstruktionsblatt) ----- */
.band{padding:clamp(56px,8vw,116px) 0}
.band--tight{padding:clamp(40px,5vw,72px) 0}
.band--flush{padding-top:0}
.label{display:flex;align-items:baseline;gap:20px;font-size:14px;color:var(--muted);
  margin-bottom:clamp(24px,3vw,44px)}
.label::after{content:"";flex:1;height:1px;background:var(--rule);transform:translateY(-5px)}
.on-mint .label{color:rgba(35,31,32,.62)}
.on-mint .label::after{background:rgba(35,31,32,.22)}

/* ---------- Typo ---------------------------------------------- */
h1,h2,h3{font-weight:500;letter-spacing:-.03em;text-transform:lowercase}
.display{font-size:clamp(2.5rem,7.2vw,5.4rem);line-height:.93}
.display span{display:block}
.display--sub{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.02}
h3{font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.1}
.lead{font-size:clamp(1.12rem,1.55vw,1.42rem);line-height:1.42;max-width:46ch}
p{max-width:60ch}
p+p{margin-top:1em}
b,strong{font-weight:700}
.muted{color:var(--muted)}

/* ---------- Hero ---------------------------------------------- */
.split{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,64px);padding-top:clamp(44px,6vw,96px)}
#start{padding-bottom:clamp(48px,6vw,96px)}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;align-items:end;padding-bottom:clamp(48px,6vw,96px)}
  .split--top{align-items:start}}
.eyebrow{font-size:14px;color:var(--muted);margin-bottom:clamp(18px,2.4vw,32px)}
.split .lead{margin-top:clamp(22px,2.6vw,34px)}

.shot{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .mark--hero{position:absolute;top:clamp(14px,1.8vw,26px);right:clamp(14px,1.8vw,26px)}
.shot .claim{position:absolute;left:clamp(14px,1.8vw,26px);bottom:clamp(14px,1.8vw,26px)}

/* ---------- Flächen ------------------------------------------- */
.on-mint{background:var(--mint)}
.on-wash{background:var(--wash)}
.statement{font-size:clamp(1.55rem,3.3vw,2.6rem);line-height:1.18;letter-spacing:-.02em;max-width:23ch}

/* ---------- Zweispalter --------------------------------------- */
.duo{display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:820px){.duo{grid-template-columns:1fr 1fr}}
.duo h3{margin-bottom:12px}
.duo p{font-size:clamp(1.02rem,1.25vw,1.16rem);line-height:1.5;max-width:44ch}
.band.on-mint{padding:clamp(48px,6vw,88px) 0}

/* ---------- Teaser mit Kurzliste ------------------------------ */
.teaser{display:grid;gap:clamp(32px,4vw,64px)}
@media (min-width:900px){.teaser{grid-template-columns:1fr 1fr;align-items:start}}
.mini{list-style:none;border-top:1px solid var(--rule)}
.mini li{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--rule);text-transform:lowercase}
.mini span{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- Leistungsphasen ----------------------------------- */
.phases{border-top:1px solid var(--rule)}
.phase{display:grid;grid-template-columns:44px 1fr;gap:4px 20px;padding:18px 0;border-bottom:1px solid var(--rule)}
@media (min-width:820px){.phase{grid-template-columns:56px 16rem 1fr;align-items:baseline;padding:22px 0;
  /* Gleiches Mindestmass fuer jede Zeile, damit einzeilige Eintraege
     die Reihe nicht zusammenstauchen. Zwei Textzeilen plus Abstand. */
  min-height:calc(2 * 1.5em + 44px)}}
.phase .no{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.phase h3{grid-column:2/-1}
.phase p{grid-column:2/-1;color:var(--muted);max-width:54ch}
@media (min-width:820px){.phase h3,.phase p{grid-column:auto}}

/* ---------- Kontaktdaten -------------------------------------- */
/* Der Abstand nach oben stand im Mockup als Inline-Angabe an der <dl>.
   Da die Liste jetzt aus [pfr_kontakt] kommt, gehoert er hierher. */
.facts{display:grid;gap:clamp(24px,3vw,40px);margin-top:clamp(36px,4.5vw,64px)}
@media (min-width:720px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact dt{font-size:14px;color:var(--muted);margin-bottom:8px}
.fact dd{font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.45}
.fact a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.fact a:hover{border-bottom-color:var(--ink)}

/* ---------- Links --------------------------------------------- */
.go{display:inline-block;margin-top:clamp(22px,2.6vw,34px);font-size:1.05rem;color:var(--ink);
  text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:3px}
.go:hover{color:var(--deep);border-bottom-color:var(--deep)}
.on-mint .go:hover{color:#fff;border-bottom-color:#fff}

/* ---------- Porträtplatz -------------------------------------- */
.portrait{aspect-ratio:4/5;background:var(--wash);border:1px solid var(--rule);
  display:flex;align-items:flex-end;padding:20px;color:var(--muted);font-size:14px}
.todo{color:var(--deep)}

/* ---------- Fuß ------------------------------------------------ */
footer{border-top:1px solid var(--rule);padding:clamp(48px,6vw,84px) 0 36px}
.foot{display:grid;gap:clamp(32px,4vw,56px)}
@media (min-width:820px){.foot{grid-template-columns:auto auto;justify-content:space-between}}
.foot-kontakt{text-align:right}
.foot h4{font-size:14px;font-weight:400;color:var(--muted);margin-bottom:12px}
.foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{border-bottom-color:var(--ink)}
.foot li{list-style:none;line-height:1.85}
.legal{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  margin-top:clamp(40px,5vw,72px);padding-top:20px;border-top:1px solid var(--rule);
  font-size:14px;color:var(--muted)}
.legal a{color:var(--muted)}

/* ---------- Anker --------------------------------------------- */
section[id],div[id]{scroll-margin-top:74px}
#start{scroll-margin-top:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Satzfeinheiten (Nachtrag zum Mockup) ---------------
   pretty verhindert einzelne Woerter am Absatzende, balance verteilt
   kurze Bloecke gleichmaessig auf ihre Zeilen. Browser ohne
   Unterstuetzung ignorieren beides ohne Nachteil. */
p, li, dd, .lead, .statement { text-wrap: pretty }
h1, h2, h3, h4, .display    { text-wrap: balance }

/* Deutsche Komposita in schmalen Spalten. Braucht lang="de" am <html>. */
p, li, dd { hyphens: auto; -webkit-hyphens: auto }
h1, h2, h3, h4, .display, .statement { hyphens: manual; -webkit-hyphens: manual }

/* ---------- Kleinigkeiten fuer den WordPress-Betrieb ------------ */
img, svg, video { max-width: 100%; height: auto }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 10px 16px;
  border: 1px solid var(--ink)
}
/* Elementor-Sektionen sollen dasselbe Innenmass haben wie .wrap */
.elementor-section.pfr-wrap > .elementor-container,
.pfr-wrap { max-width: var(--max); margin: 0 auto;
  padding-left: var(--pad); padding-right: var(--pad) }

/* ---------- Rechtsseiten (Impressum, Datenschutz) --------------- */
.pfr-fliesstext { margin-top: clamp(28px,3.5vw,48px); max-width: 68ch }
.pfr-fliesstext h2 { font-size: clamp(1.3rem,2vw,1.7rem); margin: 2.2em 0 .6em }
.pfr-fliesstext h3 { margin: 1.8em 0 .4em }
.pfr-fliesstext p,
.pfr-fliesstext li { max-width: 68ch }
.pfr-fliesstext ul { margin: .8em 0 .8em 1.2em }
.pfr-fliesstext li { margin-bottom: .3em }
.pfr-fliesstext a { color: var(--deep) }
.pfr-fliesstext table { border-collapse: collapse; margin: 1.2em 0; width: 100% }
.pfr-fliesstext th,
.pfr-fliesstext td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top }
.pfr-fliesstext th { font-weight: 500; color: var(--muted); font-size: 14px }

/* ================================================================
   Elementor-Bruecke

   Zwei Lehren aus zwei Fehlschlaegen:

   1. Klassen, die aussen auf Elementors Huelle sitzen, erreichen die
      Ueberschrift innen nicht. Deshalb steht das Markup aus dem Entwurf
      UNVERAENDERT im Text-Baustein, mit allen Klassen an ihrem Platz.

   2. Elementor uebernimmt beim Import keine CSS-Klassen auf
      Sektionsebene. Eine Regel, die daran haengt, greift nie. Deshalb
      haengen die Regeln hier an der Body-Klasse `pfr-startseite`, die
      das Theme selbst vergibt (siehe functions.php) — die ist immer da.

   Warum !important: Elementors eigene Regel
   `.elementor-section.elementor-section-boxed > .elementor-container
   { max-width: 1140px }` traegt zwei Klassen. Die Breite der Inhalte
   steckt im Entwurf in .wrap (--max: 1360px), nicht in Elementors
   Container — der soll hier gar nichts bestimmen.
   ================================================================ */

body.pfr-startseite .elementor-section > .elementor-container,
body.pfr-startseite .e-con > .e-con-inner {
  max-width: none !important; width: 100% !important;
  padding: 0 !important; display: block !important;
}
body.pfr-startseite .e-con { --container-max-width: 100%; padding: 0 !important }

body.pfr-startseite .elementor-column,
body.pfr-startseite .elementor-widget-wrap,
body.pfr-startseite .elementor-widget,
body.pfr-startseite .elementor-widget-container {
  padding: 0 !important; margin: 0; width: 100%;
}
/* Ausnahme, so eng wie moeglich: NUR die Zeilen, in denen Bild-Bausteine
   direkt nebeneinander liegen. Die aeussere verschachtelte Sektion, die
   Bilder und Text eines Projekts zusammenhaelt, bleibt ausdruecklich
   ausgenommen — sonst schrumpft auch der Text auf seine Inhaltsbreite.

   Angesprochen ueber Elementors eigene Klassen: eigene Klassen kommen
   beim Import auf Sektionsebene nicht an. */
body.pfr-startseite .elementor-inner-section:has(
  > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image
) > .elementor-container{
  display: flex !important; flex-wrap: nowrap;
  gap: var(--kachel-luft);
  justify-content: flex-start;
}
body.pfr-startseite .elementor-inner-section:has(
  > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image
) > .elementor-container > .elementor-column{
  /* Festes Drittel statt gleichmaessiger Aufteilung: sonst haengt die
     Bildgroesse davon ab, wie viele Aufnahmen ein Projekt hat — ein
     einzelnes Bild wuerde halb so breit wie die Zeile, bei einer leeren
     Kachel sogar ueber die ganze Breite. So ist jede Kachel gleich
     gross, egal ob ein Projekt eine, zwei oder drei Aufnahmen zeigt. */
  flex: 0 0 calc((100% - 2 * var(--kachel-luft)) / 3) !important;
  width: auto !important; min-width: 0;
  padding: 0 !important; margin: 0 !important;
}

/* Kein Versatz gegenueber den Ueberschriften darueber */
body.pfr-startseite .elementor-inner-section > .elementor-container{
  padding: 0 !important; margin: 0 !important;
}

body.pfr-startseite .elementor-widget:not(:last-child) { margin-bottom: 0 }
body.pfr-startseite .elementor-widget-text-editor { line-height: inherit; font-size: inherit }

/* ================================================================
   Cookie-Leiste
   Ruhig gehalten wie der Rest: keine Bewegung, keine Farbflaeche,
   nur eine Trennlinie nach oben. Beide Knoepfe sind gleich gewichtet
   — eine hervorgehobene Zustimmung waere eine unzulaessige Lenkung.
   ================================================================ */
.pfr-consent{
  position:fixed;inset:auto 0 0 0;z-index:60;
  background:var(--paper);border-top:1px solid var(--ink);
  padding:clamp(18px,2.4vw,26px) 0;
  box-shadow:0 -12px 32px rgba(29,29,27,.06);
}
.pfr-consent[hidden]{display:none}
.pfr-consent-inner{display:grid;gap:clamp(14px,2vw,28px)}
@media (min-width:900px){
  .pfr-consent-inner{grid-template-columns:1fr auto;align-items:center}
}
.pfr-consent h2{
  font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.pfr-consent p{font-size:15px;line-height:1.5;max-width:70ch;margin:0}
.pfr-consent a{color:var(--deep)}

.pfr-consent-wahl{display:grid;gap:8px;margin-top:14px}
.pfr-consent-wahl label{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45}
.pfr-consent-wahl input{margin-top:.28em;accent-color:var(--deep)}

.pfr-consent-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.pfr-consent-knoepfe button{
  font:inherit;font-size:15px;background:none;color:var(--ink);
  border:1px solid var(--ink);padding:11px 20px;
}
.pfr-consent-knoepfe button:hover{background:var(--ink);color:var(--paper)}

/* Der Link im Fuss sieht aus wie die Rechtslinks daneben */
.pfr-consent-oeffnen{
  font:inherit;background:none;border:0;padding:0;color:inherit;
  text-decoration:underline;text-underline-offset:3px;
}

/* ---------- Offene Stellen in Rechtstexten ----------------------
   Platzhalter, die noch befuellt werden muessen. Bewusst auffaellig:
   sie sollen stoeren, solange sie da sind. Vor dem Livegang darf
   keine <mark class="luecke"> mehr im Quelltext stehen. */
.luecke{
  background:#FFF3A3;color:var(--ink);
  padding:1px 6px;border:1px solid #E3CF4A;
  font-size:.86em;letter-spacing:.01em;
}
.luecke::before{content:"⟦ ";opacity:.55}
.luecke::after{content:" ⟧";opacity:.55}

/* ---------- Technische Bezeichner im Fliesstext ------------------
   Cookie-Namen und aehnliches. Bewusst KEINE Monospace-Schrift: Der
   Browser nimmt dafuer seine eigene, die neben der Hausschrift wie ein
   Fremdkoerper wirkt und zudem groesser wirkt als der Text drumherum.
   Stattdessen dieselbe Schrift, nur leicht abgesetzt. */
code, kbd, samp {
  font-family: inherit; font-size: .95em; letter-spacing: .01em;
  background: var(--wash); border: 1px solid var(--rule);
  border-radius: 2px; padding: 1px 6px;
}

/* Ohne Auflagen auf dem Kopfbild wandert der Claim neben das Foto */
.pfr-claim-neben{ margin-top:clamp(22px,2.6vw,34px) }
.pfr-claim-neben svg{ width:clamp(84px,9vw,118px); height:auto; fill:var(--ink) }

/* ---------- Projekte ------------------------------------------- */
/* Die Bilder sind echte Elementor-Bausteine, damit sie sich per Klick
   tauschen lassen. Angesprochen wird ueber Elementors eigene Klassen,
   nicht ueber eigene — siehe die Notiz weiter oben. Der Projektabschnitt
   ist der einzige Teil der Seite mit verschachtelten Sektionen. */
/* :not(.elementor-inner-section) ist entscheidend — sonst bekommt auch
   die Huelle jedes Projekts diesen Innenabstand, und er wird doppelt
   vergeben (gemessen: Label bei 222, Bildreihe bei 289). */
body.pfr-startseite .elementor-section:not(.elementor-inner-section):has(.elementor-inner-section) > .elementor-container{
  max-width: var(--max) !important;
  padding: clamp(56px,7vw,104px) clamp(20px,4vw,72px) !important;
  margin: 0 auto !important;
}
body.pfr-startseite .elementor-section:not(.elementor-inner-section):has(.elementor-inner-section){
  --kachel-luft: clamp(10px,1.2vw,16px);
}
/* Abstand zwischen den Projekten, und zwischen Ueberschrift und erstem
   Projekt — ohne den zweiten Wert klebt die Bildreihe an "gebaut und
   geplant". */
body.pfr-startseite .elementor-inner-section{
  margin-top: clamp(72px,8vw,120px);
}
/* die Bildzeile innerhalb eines Projekts bekommt keinen Abstand */
body.pfr-startseite .elementor-inner-section .elementor-inner-section{
  margin-top: 0 !important;
}
body.pfr-startseite .elementor-widget-image img{
  /* Feste Hoehe statt Seitenverhaeltnis: sonst wird ein einzelnes Bild
     auf halber Breite fast doppelt so hoch wie eines von dreien, und die
     Reihen wirken ungleich. Die Breite richtet sich nach der Spalte,
     der Ausschnitt bleibt mittig. */
  width:100%; display:block; object-fit:cover;
  height:clamp(210px,17vw,300px);
  background:var(--wash);
}
body.pfr-startseite .elementor-inner-section .elementor-widget-text-editor{
  margin-top: clamp(16px,2vw,26px);
}
.projekt__ort{font-size:14px;color:var(--muted);margin:0 0 10px}
body.pfr-startseite .elementor-inner-section h3{
  font-size:clamp(1.18rem,1.6vw,1.42rem);font-weight:600;margin:0 0 6px;
}
body.pfr-startseite .elementor-inner-section .elementor-widget-text-editor p:last-child{
  max-width:52ch;
}