/* ==========================================================================
   PEKLITZ Partnerschaftsgesellschaft mbB
   Gestaltung: Kachelraster auf durchgehendem Cremegrund.
   Farben: Kanzleiblau RGB 45/80/123, Kanzleigrau RGB 90/90/90, Messing als Akzent.
   Schriften liegen lokal im Ordner "fonts" – es wird nichts von fremden Servern geladen.
   ========================================================================== */

/* ---- Schriften -------------------------------------------------------- */

@font-face{font-family:Lora;src:url(../fonts/lora-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Lora;src:url(../fonts/lora-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Lora;src:url(../fonts/lora-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Franklin;src:url(../fonts/libre-franklin-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Franklin;src:url(../fonts/libre-franklin-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Franklin;src:url(../fonts/libre-franklin-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

/* ---- Farben und Grundwerte -------------------------------------------- */

:root{
  --blau:#2d507b;
  --blau-tief:#1b3452;
  --messing:#9c7c3c;
  --creme:#faf7f2;
  --linie:#e7e0d4;
  --tinte:#221f1b;
  --grau:#5a5a5a;
  --weiss:#ffffff;

  --serif:Lora,Georgia,serif;
  --sans:Franklin,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --radius:3px;
  --schatten:0 1px 2px rgba(34,31,27,.04), 0 6px 20px rgba(34,31,27,.07);
  --schatten-hoch:0 2px 4px rgba(34,31,27,.06), 0 14px 34px rgba(34,31,27,.11);
  --abstand:1.5rem;
  --breit:1160px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.72;
  color:var(--tinte);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--blau)}
a:hover{color:var(--blau-tief)}
:focus-visible{outline:3px solid var(--blau);outline-offset:2px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.24;color:var(--blau-tief);margin:0 0 .55em}
h1{font-size:clamp(2rem, 1.35rem + 2.7vw, 3.2rem)}
h2{font-size:clamp(1.5rem, 1.25rem + 1.3vw, 2.05rem)}
h3{font-size:1.18rem;line-height:1.35}
h4{font-size:1.02rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{padding-left:1.2rem}
li{margin-bottom:.4em}
li:last-child{margin-bottom:0}

.container{width:100%;max-width:var(--breit);margin-inline:auto;padding-inline:24px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--blau-tief);color:#fff;padding:.7em 1.2em;border-radius:var(--radius);text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:12px;color:#fff}

.zier{display:block;width:46px;height:1px;background:var(--messing)}

.label{display:block;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--messing);margin-bottom:.8rem}

/* ---- Kopfbereich (scrollt mit, bleibt nicht stehen) -------------------- */

.kopf{background:var(--creme);border-bottom:1px solid var(--linie)}
.kopf__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:86px;padding-block:.6rem;position:relative}
.logo{display:block;flex-shrink:0}
.logo img{width:158px}
@media(min-width:560px){.logo img{width:185px}}

.nav-schalter{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:0 10px;border:1px solid var(--linie);border-radius:var(--radius);background:#fff;cursor:pointer}
.nav-schalter span{display:block;height:2px;background:var(--blau-tief);border-radius:2px;transition:transform .2s ease,opacity .15s ease}
.nav-schalter[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-schalter[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-schalter[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav ul{list-style:none;margin:0;padding:0}
.nav li{margin:0}
.nav a{display:block;text-decoration:none;color:var(--grau);font-size:.86rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.nav a:hover,.nav a[aria-current="page"]{color:var(--blau-tief)}
.nav__punkt{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--messing);margin-left:.3em;vertical-align:.55em}
.nav__portal a{display:flex;align-items:center;gap:.6em}
.nav__symbol{flex:none}

@media(max-width:999px){
  .nav{display:none;position:absolute;left:24px;right:24px;top:100%;background:#fff;border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten);z-index:30}
  .nav.offen{display:block}
  .nav ul{padding:.4rem 1.2rem 1.2rem}
  .nav li{border-top:1px solid var(--linie)}
  .nav li:first-child{border-top:0}
  .nav a{padding:.95rem .2rem}
  .nav .nav__cta a{margin-top:.9rem;background:var(--blau);color:#fff;text-align:center;border-radius:var(--radius);padding:.9rem 1rem}
}
@media(min-width:1000px){
  .nav-schalter{display:none}
  .nav{display:block !important}
  .nav ul{display:flex;align-items:center;gap:1.35rem}
  .nav .nav__cta a{border:1px solid var(--blau);color:var(--blau);padding:.62em 1.3em;border-radius:var(--radius)}
  .nav .nav__cta a:hover{background:var(--blau);color:#fff}
  .nav__portal-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav__portal a{color:var(--blau)}
}
@media(min-width:1000px) and (max-width:1149px){
  .nav ul{gap:.95rem}
  .nav a{font-size:.8rem;letter-spacing:.05em}
  .nav .nav__cta a{padding:.62em 1em}
}

/* ---- Laufschrift ------------------------------------------------------
   Das Laufen erledigt das HTML-Element <marquee> selbst. Hier wird nur
   das Aussehen festgelegt - keine Animation, keine Sonderregeln. So kann
   auch eine veraltete Fassung dieser Datei die Laufschrift nicht stoeren.
   ----------------------------------------------------------------------- */

.laufband{background:#fff;border-bottom:1px solid var(--linie)}
.laufband__in{display:flex;align-items:center;gap:1rem;padding-block:.65rem}
.laufband__titel{flex:none;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--messing)}
@media(max-width:559px){.laufband__titel{display:none}}

.laufband__spur{flex:1 1 auto;min-width:0;font-size:.97rem;color:var(--tinte);line-height:1.6}

.laufband__spur a{color:inherit;text-decoration:underline;text-decoration-color:var(--messing);text-underline-offset:.2em}
.laufband__spur a:hover{color:var(--blau)}
.laufband__trenner{color:var(--messing);margin-inline:1.2rem}

.laufband__knopf{flex:none;width:30px;height:30px;padding:0;border:1px solid var(--linie);border-radius:var(--radius);background:#fff;color:var(--blau-tief);cursor:pointer;line-height:1;font-size:.8rem}
.laufband__knopf:hover{border-color:var(--blau)}

/* ---- Startseite: Willkommensbereich -----------------------------------
   Das Logo traegt die Seite. Deshalb steht es dort gross und allein;
   in der Kopfzeile der Startseite wird es weggelassen (kopf__in--ohne-marke),
   damit es nicht zweimal erscheint.
   ----------------------------------------------------------------------- */

.kopf__in--ohne-marke{justify-content:center}
@media(max-width:999px){
  .kopf__in--ohne-marke{justify-content:flex-end}
}

.willkommen{text-align:center;padding-block:clamp(3rem, 2rem + 6vw, 6.5rem) clamp(2.5rem, 1.8rem + 3vw, 4rem)}

.willkommen__marke{
  width:min(440px, 78vw);
  height:auto;
  margin:0 auto;
}

.willkommen .zier{margin:clamp(2rem, 1.5rem + 2vw, 3rem) auto clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem)}

.willkommen__satz{
  font-family:var(--serif);
  font-size:clamp(1.15rem, 1rem + .9vw, 1.6rem);
  line-height:1.5;
  color:var(--blau-tief);
  max-width:34ch;
  margin:0 auto;
}

/* Knappe Kacheln fuer die Wegweiser auf der Startseite */
.raster.raster--4{grid-template-columns:1fr}
@media(min-width:620px){.raster.raster--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.raster.raster--4{grid-template-columns:repeat(4,1fr)}}

.kachel--knapp{padding:1.8rem 1.6rem;text-align:center}
.kachel--knapp h2{font-size:1.25rem;margin-bottom:.4em}
.kachel--knapp p{color:var(--grau);font-size:.98rem}
.kachel--knapp .kachel__fuss{padding-top:1.1rem}

/* Ruhige Kontaktzeile am Ende der Startseite */
.kontaktzeile{padding-block:clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem)}
.kontaktzeile__in{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.3rem .9rem;
  text-align:center;
  color:var(--grau);
  font-size:.98rem;
}
.kontaktzeile a{font-weight:600;text-decoration:none}
.kontaktzeile a:hover{text-decoration:underline}
.kontaktzeile__punkt{color:var(--messing)}
@media(max-width:559px){.kontaktzeile__punkt{display:none}
  .kontaktzeile__in{flex-direction:column;gap:.35rem}}

/* ---- Offener Einstieg / Seitenkopf ------------------------------------ */

.einstieg{padding-block:clamp(2.8rem, 2rem + 4.5vw, 5rem) clamp(2.2rem, 1.6rem + 2.5vw, 3.4rem);text-align:center}
.einstieg h1{max-width:20ch;margin-inline:auto}
.einstieg p{font-size:clamp(1.02rem, .98rem + .3vw, 1.18rem);color:var(--grau);max-width:56ch;margin:1.2rem auto 0}

.btn{display:inline-block;font-family:var(--sans);font-size:.88rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:1em 2.1em;border:1px solid var(--blau);border-radius:var(--radius);background:var(--blau);color:#fff;text-decoration:none;transition:background .15s ease,border-color .15s ease,color .15s ease}
.btn:hover{background:var(--blau-tief);border-color:var(--blau-tief);color:#fff}
.btn--linie{background:transparent;color:var(--blau)}
.btn--linie:hover{background:var(--blau);color:#fff}
.btn-gruppe{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2rem}
.btn-gruppe--links{justify-content:flex-start}
.portal-knoepfe{display:grid;gap:.8rem;margin-top:1.2rem}
.portal-knoepfe .btn{text-align:center}

/* ---- Abschnitte ------------------------------------------------------- */

.abschnitt{padding-block:0 clamp(2.2rem, 1.6rem + 2.5vw, 3.6rem)}
.abschnitt__kopf{max-width:48rem;margin-bottom:1.7rem}
.abschnitt__kopf p{color:var(--grau)}

/* ---- Kachelraster ----------------------------------------------------- */

.raster{display:grid;gap:var(--abstand);grid-template-columns:1fr;align-items:stretch}
@media(min-width:620px){.raster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.raster{grid-template-columns:repeat(3,1fr)}}
.raster--2{grid-template-columns:1fr}
@media(min-width:760px){.raster--2{grid-template-columns:repeat(2,1fr)}}

.kachel{display:flex;flex-direction:column;background:var(--weiss);border-radius:var(--radius);box-shadow:var(--schatten);padding:2rem 1.8rem;height:100%}
.kachel h3{margin-bottom:.45em}
.kachel p,.kachel li{color:var(--grau);font-size:1rem}
.kachel ul{margin:0;padding-left:1.1rem}

a.kachel{text-decoration:none;color:inherit;transition:box-shadow .18s ease,transform .18s ease}
a.kachel:hover{box-shadow:var(--schatten-hoch);transform:translateY(-2px)}
a.kachel h3{color:var(--blau-tief)}

.kachel__nr{display:block;font-family:var(--serif);font-size:1.35rem;color:var(--messing);line-height:1;margin-bottom:.9rem}
.kachel__fuss{margin-top:auto;padding-top:1.4rem;font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blau)}
.kachel__fuss a{text-decoration:none}
.kachel__fuss a:hover{text-decoration:underline}
.kachel__notiz{margin-top:auto;padding-top:1.4rem;font-size:.92rem;color:var(--grau)}

.kachel--blau{background:var(--blau-tief)}
.kachel--blau h3{color:#fff}
.kachel--blau p,.kachel--blau li{color:rgba(255,255,255,.84)}
.kachel--blau .kachel__nr{color:var(--messing)}
.kachel--blau a,.kachel--blau .kachel__fuss{color:#fff}

.kachel__zeile{display:flex;gap:.9rem;padding-block:.6rem;border-bottom:1px solid var(--linie);font-size:1rem}
.kachel__zeile:last-of-type{border-bottom:0}
.kachel__zeile dt{flex:0 0 5.6rem;font-weight:600;color:var(--blau-tief);margin:0}
.kachel__zeile dd{margin:0;color:var(--grau)}

/* Kachel über die volle Breite, etwa für Fließtext */
.kachel--breit{grid-column:1/-1}

/* ---- Personen --------------------------------------------------------- */

.person__bild{
  flex:none;
  width:84px;height:84px;
  border-radius:50%;
  overflow:hidden;
  background:var(--creme);
  color:var(--blau);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:1.45rem;letter-spacing:.03em;
  margin-bottom:1.15rem;
}
.person__bild img{width:100%;height:100%;object-fit:cover;border-radius:50%}

.person__rolle{
  display:block;
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--messing);
  margin-bottom:.9rem;
}

.person__rolle + .person__rolle{margin-top:-.55rem}
.kachel .person__zeiten{font-size:.92rem;color:var(--messing)}

.person__daten{margin:auto 0 0;padding-top:1rem;border-top:1px solid var(--linie)}
.person__daten .kachel__zeile{padding-block:.45rem;font-size:.95rem}
.person__daten dt{flex:0 0 5.2rem}

/* ---- Rechtstexte ------------------------------------------------------ */

.rechtstext{max-width:820px;margin-inline:auto;padding:clamp(1.8rem, 1.2rem + 2vw, 3rem)}
.rechtstext h2{font-size:clamp(1.25rem, 1.1rem + .7vw, 1.55rem);margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--linie)}
.rechtstext h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.rechtstext h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;color:var(--blau-tief);margin-top:1.7rem;margin-bottom:.45em}
.rechtstext p,.rechtstext li{color:var(--grau);font-size:1rem}
.rechtstext address{font-style:normal;color:var(--grau);margin-bottom:1.1em}
.rechtstext a{word-break:break-word}

/* ---- Hinweisfeld (Platzhalter, Warnungen) ----------------------------- */

.hinweis{background:#fdf7e9;border:1px solid #ecd9ab;border-left:4px solid var(--messing);border-radius:var(--radius);padding:1rem 1.2rem;font-size:.95rem;color:#5f4a1c;margin-bottom:var(--abstand)}
.hinweis strong{color:#4a3813}
.hinweis p{color:inherit}

/* ---- Zwei-Klick-Feld für Inhalte von fremden Servern ------------------ */

.extern{border:1px dashed var(--messing);border-radius:var(--radius);background:#fff;padding:2rem 1.8rem;text-align:center}
.extern h3{margin-bottom:.5em}
.extern p{color:var(--grau);font-size:.96rem;max-width:46ch;margin-inline:auto}
.extern .btn{margin-top:1.3rem}
.extern__rahmen{width:100%;min-height:520px;border:0;display:block}

/* Bereich, in den der Anbieter seine Inhalte schreibt */
.extern__inhalt{background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);padding:clamp(1.4rem, 1rem + 1.5vw, 2.2rem);min-height:280px;overflow-x:auto}
.extern__inhalt table{width:100%;border-collapse:collapse}
.extern__inhalt th,.extern__inhalt td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--linie);font-size:.98rem}
.extern__inhalt th{color:var(--blau-tief);font-weight:600}
.extern__inhalt h1,.extern__inhalt h2,.extern__inhalt h3{color:var(--blau-tief)}
.extern__inhalt input,.extern__inhalt select{font:inherit;padding:.45em .6em;border:1px solid var(--linie);border-radius:var(--radius);background:#fff}
.extern__inhalt input[type="submit"],.extern__inhalt button{font-family:var(--sans);font-weight:600;background:var(--blau);color:#fff;border:1px solid var(--blau);padding:.6em 1.4em;border-radius:var(--radius);cursor:pointer}

/* ---- Downloadliste ---------------------------------------------------- */

.datei{display:flex;gap:1rem;align-items:flex-start;padding-block:1rem;border-bottom:1px solid var(--linie)}
.datei:last-child{border-bottom:0}
.datei__symbol{flex:none;width:38px;height:46px;border:1px solid var(--linie);border-radius:2px;background:var(--creme);display:flex;align-items:flex-end;justify-content:center;font-size:.6rem;font-weight:700;letter-spacing:.04em;color:var(--blau);padding-bottom:.35rem}
.datei__text{min-width:0}
.datei__text a{font-weight:600;text-decoration:none}
.datei__text a:hover{text-decoration:underline}
.datei__meta{display:block;font-size:.85rem;color:var(--grau);margin-top:.15rem}
.datei__text p{font-size:.95rem;color:var(--grau);margin:.35rem 0 0}

/* ---- Fußbereich ------------------------------------------------------- */

.fuss{background:var(--blau-tief);color:rgba(255,255,255,.75);font-size:.95rem;padding-block:3.2rem 1.4rem;margin-top:clamp(2rem, 1.5rem + 2vw, 3rem)}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss h2{font-family:var(--sans);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1rem}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.55em}
.sozial a{display:inline-flex;align-items:center;gap:.5em}
.sozial__symbol{flex:none}
.fuss__raster{display:grid;gap:2.3rem}
@media(min-width:760px){.fuss__raster{grid-template-columns:1.6fr 1fr 1fr}}
.fuss__logo{width:175px;margin-bottom:1.1rem;opacity:.95}
.fuss__unten{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);font-size:.85rem;color:rgba(255,255,255,.58)}
.fuss__unten ul{display:flex;flex-wrap:wrap;gap:1.4rem}
.fuss__unten li{margin:0}

/* ---- Bewegung reduzieren / Druck -------------------------------------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

@media print{
  .kopf,.fuss,.laufband,.btn-gruppe,.skip-link{display:none !important}
  body{background:#fff;font-size:11pt;color:#000}
  .kachel{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  a{color:#000}
}