/* Open Sans, lokal ausgeliefert (variable Schrift, Achse wght 300-800).
   Keine Verbindung zu Google-Servern - kein Zusatz in der Datenschutzerklaerung noetig. */
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:300 800;
  font-stretch:100%;
  font-display:swap;
  src:url("fonts/open-sans-latin.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:300 800;
  font-stretch:100%;
  font-display:swap;
  src:url("fonts/open-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ------------------------------------------------------------------
   coa-kentrup.de — Layout nach dem Vorbild von medplus-kompetenz.de
   Farben und Typografie aus der Live-Seite ausgelesen, nicht geschaetzt.
------------------------------------------------------------------ */

:root{
  --red:#B22435;          /* Hauptrot: H1, Socket, Buttons */
  --red-dark:#AB1B27;     /* Abschnittsueberschriften, Hover */
  --red-link:#B12234;     /* Navigation */
  --text:#444444;
  --text-soft:#666666;
  --grey:#808080;
  --topbar:#F8F8F8;
  --topbar-text:#424242;
  --band:#E0E0E0;
  --footer:#F2F2F2;
  --line:#E1E1E1;
  --wrap:1310px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1.75;
  color:var(--text);
  background:#fff;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-dark);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 50px}

h1,h2,h3,h4{font-weight:600;line-height:1.3;color:var(--red);margin:0 0 .6em}
h1{font-size:34px;text-transform:uppercase;letter-spacing:.02em}
h2{font-size:26px}
h3{font-size:20px;font-weight:500;color:var(--red-dark)}
h4{font-size:16px;font-weight:600;color:var(--text)}
p{margin:0 0 1.1em}
.lead{font-size:17px;line-height:1.7;color:var(--text-soft)}
.kicker{
  display:block;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);margin-bottom:.6em;
}

/* --- Ankuendigungsstreifen Publikation ------------------------- */
.announce{background:var(--red);color:#fff;font-size:13px}
.announce .wrap{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  justify-content:center;padding-top:9px;padding-bottom:9px;text-align:center}
.announce strong{font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.announce a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* --- Topbar ---------------------------------------------------- */
.topbar{background:var(--topbar);color:var(--topbar-text);font-size:12px;
  border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:6px 24px;
  justify-content:space-between;align-items:center;padding-top:10px;padding-bottom:10px}
.topbar a{color:var(--topbar-text)}
.topbar a:hover{color:var(--red)}
.topbar nav{display:flex;flex-wrap:wrap;gap:18px}

/* --- Header / Navigation --------------------------------------- */
.site-header{background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:30px;padding-top:18px;padding-bottom:18px}
.logo img{height:62px;width:auto}
.mainnav>ul{display:flex;flex-wrap:wrap;gap:26px;list-style:none;margin:0;padding:0}
.mainnav li{position:relative}
.mainnav a{display:block;font-size:13px;font-weight:600;color:var(--red-link);
  padding:6px 0;border-bottom:2px solid transparent}
.mainnav a:hover,.mainnav a[aria-current="page"]{border-bottom-color:var(--red);
  text-decoration:none}
.mainnav ul ul{
  position:absolute;left:-16px;top:100%;min-width:290px;background:#fff;
  border:1px solid var(--line);border-top:2px solid var(--red);
  list-style:none;margin:0;padding:8px 0;display:none;z-index:60;
}
.mainnav li:hover>ul,.mainnav li:focus-within>ul{display:block}
.mainnav ul ul a{padding:8px 16px;border-bottom:0;font-weight:500;color:var(--text)}
.mainnav ul ul a:hover{color:var(--red);background:#F8F8F8}

/* --- Hero ------------------------------------------------------ */
.hero{position:relative;background:#2b2b2b}
.hero img{width:100%;height:clamp(280px,42vw,520px);object-fit:cover;opacity:.72}
.hero-copy{position:absolute;inset:0;display:flex;align-items:center}
.hero-copy .wrap{width:100%}
.hero-copy h1{color:#fff;max-width:20ch;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero-copy p{color:#fff;font-size:18px;max-width:46ch;margin:0;
  text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero-inner{background:var(--topbar);border-bottom:1px solid var(--line)}
.hero-inner .wrap{padding-top:46px;padding-bottom:46px}
.hero-inner h1{margin-bottom:.35em}
.hero-inner p{margin:0;color:var(--text-soft);max-width:70ch}

/* --- Abschnitte ------------------------------------------------ */
section{padding:64px 0}
section.tight{padding:44px 0}
.band-grey{background:var(--band)}
.band-soft{background:var(--topbar)}
.band-red{background:var(--red);color:#fff}
.band-red h2,.band-red h3{color:#fff}
.band-red a{color:#fff;text-decoration:underline}

/* --- Kachelreihe mit Kreis-Icons ------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:34px;
  text-align:center}
.tile .circle{
  width:86px;height:86px;margin:0 auto 18px;border:2px solid var(--red);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:background .18s ease-out;
}
.tile:hover .circle{background:var(--red)}
.tile:hover .circle svg{stroke:#fff}
.tile .circle svg{width:36px;height:36px;stroke:var(--red);fill:none;
  stroke-width:1.6;transition:stroke .18s ease-out}
.tile h3{font-size:14px;font-weight:600;color:var(--grey);margin:0}
.tile a{display:block;color:inherit}
.tile a:hover{text-decoration:none}
.tile a:hover h3{color:var(--red)}

/* --- Publikation ----------------------------------------------- */
.pub{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:48px;
  align-items:start}
.pub-cover{border:1px solid var(--line);background:#fff}
.pub-meta{list-style:none;margin:0 0 24px;padding:0;font-size:14px;color:var(--text-soft)}
.pub-meta li{padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:14px}
.pub-meta li span:first-child{flex:0 0 132px;color:var(--grey)}
.pub-meta li span:last-child{min-width:0}
@media (max-width:520px){
  .pub-meta li{flex-direction:column;gap:0}
  .pub-meta li span:first-child{flex:none}
}
.plus-list{list-style:none;margin:0 0 24px;padding:0}
.plus-list li{position:relative;padding-left:28px;margin-bottom:10px}
.plus-list li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;
  background:url("bullet-plus-rot.png") center/contain no-repeat}

/* --- Buttons --------------------------------------------------- */
.btn{display:inline-block;padding:13px 26px;font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;border:2px solid var(--red);
  background:var(--red);color:#fff;transition:background .18s ease-out}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark);text-decoration:none;
  color:#fff}
.btn.ghost{background:transparent;color:var(--red)}
.btn.ghost:hover{background:var(--red);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.btn-note{font-size:12px;color:var(--grey);margin-top:14px}

/* --- Spalten --------------------------------------------------- */
.cols-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:48px}
.cols-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:44px}
.card h3{margin-bottom:.5em}
.card p:last-child{margin-bottom:0}
.rule{width:5px;background:var(--red);align-self:stretch;flex:none}
.headline{display:flex;gap:20px;align-items:stretch;margin-bottom:34px}
.headline h2{margin:0;align-self:center}

/* --- Fliesstext-Seiten ----------------------------------------- */
.prose{max-width:76ch}
.prose h2{font-size:24px;margin-top:1.6em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.5em}
.prose ul{padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:28px;margin-bottom:9px}
.prose ul li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;
  background:url("bullet-plus-rot.png") center/contain no-repeat}
.prose .result{border-left:5px solid var(--red);padding:2px 0 2px 18px;
  color:var(--text-soft);margin:0 0 1.4em}

/* --- Portrait -------------------------------------------------- */
.portrait{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:48px;
  align-items:start}
.portrait img{border:1px solid var(--line)}

/* --- Footer ---------------------------------------------------- */
.site-footer{background:var(--footer);color:var(--text-soft);font-size:14px;
  padding:56px 0 44px}
.site-footer h4{font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red-dark);margin-bottom:1.1em}
.site-footer a{color:var(--text-soft)}
.site-footer a:hover{color:var(--red)}
.socket{background:var(--red);color:#EEEEEE;font-size:12px}
.socket .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  padding-top:16px;padding-bottom:16px}
.socket a{color:#fff}
.socket nav{display:flex;flex-wrap:wrap;gap:22px}

/* --- Responsiv ------------------------------------------------- */
@media (max-width:900px){
  .wrap{padding:0 24px}
  .site-header .wrap{flex-wrap:wrap;gap:14px}
  .mainnav>ul{gap:16px}
  .mainnav ul ul{position:static;display:block;border:0;border-left:2px solid var(--red);
    min-width:0;padding:2px 0 6px 14px;margin-top:4px}
  .mainnav ul ul a{padding:4px 0;font-size:12px}
  .pub,.portrait{grid-template-columns:1fr}
  .pub-cover{max-width:230px}
  h1{font-size:26px}
  section{padding:46px 0}
}

/* Buttons auf rotem Grund */
.btn.on-red{background:transparent;border-color:#fff;color:#fff}
.btn.on-red:hover{background:#fff;border-color:#fff;color:var(--red)}

/* Lange URLs und Komposita brechen lassen (Mobilansicht) */
p,li,h1,h2,h3,h4,td{overflow-wrap:break-word}
a{overflow-wrap:anywhere}

/* --- Abbildungen ------------------------------------------------ */
/* Bildunterschrift rot, wie in der Marke festgelegt */
:root{ --red-caption:#B22334 }

figure{margin:0 0 2.4em}
.fig{max-width:900px}
.fig img{width:100%;border:1px solid var(--line)}
.fig figcaption,.fig-row figcaption{
  font-size:13px;font-weight:600;line-height:1.45;color:var(--red-caption);
  margin-top:10px;max-width:70ch;
}
.fig-note{font-size:12px;font-weight:400;color:var(--grey);display:block;margin-top:3px}

/* Bildreihe, gleiche Zuschnitte */
.fig-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:24px;margin:0 0 2.4em}
.fig-row figure{margin:0}
.fig-row img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line)}

/* Schmales Querformat als Abschnittstrenner */
.fig-banner{max-width:none}
.fig-banner img{width:100%;aspect-ratio:1024/173;object-fit:cover}

/* Partnerlogos */
.logo-row{display:flex;flex-wrap:wrap;gap:16px 48px;align-items:center;margin:0 0 2.4em}
.logo-row img{max-height:64px;max-width:250px;width:auto;border:0}

@media (max-width:600px){
  .fig-row{gap:18px}
  .logo-row{gap:24px}
  .logo-row img{max-height:48px}
}

/* --- Pressestimmen ---------------------------------------------- */
.presse{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:48px;
  align-items:start}
.presse-meta p{font-size:14px;color:var(--grey);margin:0 0 18px}
.presse + .presse{margin-top:56px;padding-top:56px;border-top:1px solid var(--line)}

blockquote.zitat{margin:0 0 1.6em;padding:2px 0 2px 20px;border-left:5px solid var(--red)}
blockquote.zitat p{font-size:19px;line-height:1.55;color:var(--red-dark);margin:0 0 .5em;
  text-wrap:pretty}
blockquote.zitat cite{font-style:normal;font-size:13px;color:var(--grey)}

/* --- Termine ----------------------------------------------------- */
.termin{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:48px;
  align-items:start}
.termin + .termin{margin-top:56px;padding-top:56px;border-top:1px solid var(--line)}
.termin-datum{border:2px solid var(--red);padding:18px 10px;text-align:center;
  display:flex;flex-direction:column;gap:2px}
.termin-datum .tag{font-size:46px;font-weight:700;line-height:1;color:var(--red)}
.termin-datum .monat{font-size:14px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red)}
.termin-datum .zeit{font-size:13px;color:var(--grey);margin-top:6px}

@media (max-width:760px){
  .presse,.termin{grid-template-columns:1fr;gap:26px}
  .termin-datum{flex-direction:row;justify-content:center;align-items:baseline;gap:12px;
    padding:12px}
  .termin-datum .tag{font-size:30px}
  .termin-datum .zeit{margin-top:0}
}

.cols-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px}

/* Angabenlisten tragen keine Plus-Aufzählungszeichen, auch nicht im Fliesstext */
.prose ul.pub-meta li{padding-left:0}
.prose ul.pub-meta li::before{content:none}

/* ==================================================================
   Kopfleiste: Klappmenue und Schrumpfen beim Scrollen
   Die Regeln greifen nur mit JavaScript (Klasse has-js am <html>).
   Ohne JavaScript bleibt die Navigation vollstaendig sichtbar.
================================================================== */

/* Ankersprünge nicht unter die klebende Kopfleiste laufen lassen */
html{scroll-padding-top:110px}

/* --- Schaltflaeche Menue ---------------------------------------- */
.navtoggle{display:none}

.has-js .navtoggle{
  align-items:center;gap:10px;
  background:transparent;border:2px solid var(--red);
  color:var(--red);font:inherit;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:9px 14px;min-height:44px;cursor:pointer;
}
.has-js .navtoggle:hover{background:var(--red);color:#fff}
.has-js .navtoggle:hover .navtoggle-balken,
.has-js .navtoggle:hover .navtoggle-balken::before,
.has-js .navtoggle:hover .navtoggle-balken::after{background:#fff}
.navtoggle:focus-visible{outline:2px solid var(--red-dark);outline-offset:3px}

.navtoggle-balken,
.navtoggle-balken::before,
.navtoggle-balken::after{
  display:block;width:20px;height:2px;background:var(--red);
  transition:transform .18s ease-out,opacity .18s ease-out;
}
.navtoggle-balken{position:relative}
.navtoggle-balken::before,.navtoggle-balken::after{content:"";position:absolute;left:0}
.navtoggle-balken::before{top:-6px}
.navtoggle-balken::after{top:6px}

/* Geoeffnet: Balken werden zum Kreuz */
.nav-offen .navtoggle-balken{background:transparent}
.nav-offen .navtoggle-balken::before{transform:translateY(6px) rotate(45deg)}
.nav-offen .navtoggle-balken::after{transform:translateY(-6px) rotate(-45deg)}

/* --- Kompakte Kopfleiste beim Scrollen -------------------------- */
.has-js .site-header .wrap{transition:padding .18s ease-out}
.has-js .logo img{transition:height .18s ease-out}

.has-js.is-kompakt .site-header .wrap{padding-top:8px;padding-bottom:8px}
.has-js.is-kompakt .logo img{height:40px}
.has-js.is-kompakt .site-header{box-shadow:0 1px 0 var(--line)}

/* Auf breiten Bildschirmen ruecken die Menuepunkte mit zusammen */
@media (min-width:901px){
  .has-js.is-kompakt .mainnav>ul{gap:20px}
  .has-js.is-kompakt .mainnav a{font-size:12.5px}
}

/* ==================================================================
   Schmale Bildschirme
================================================================== */
@media (max-width:900px){

  /* Ankuendigung und Topbar gedraengter setzen */
  .announce{font-size:12px}
  .announce .wrap{padding-top:7px;padding-bottom:7px;gap:4px 10px}
  .topbar{font-size:11px}
  .topbar .wrap{padding-top:7px;padding-bottom:7px;gap:4px 14px}
  .topbar nav{gap:12px}

  /* Menue hinter der Schaltflaeche */
  .has-js .site-header .wrap{flex-wrap:nowrap;gap:14px;
    padding-top:10px;padding-bottom:10px}
  .has-js .logo img{height:46px}
  .has-js .navtoggle{display:inline-flex;flex:none}

  .has-js .mainnav{
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-top:2px solid var(--red);
    border-bottom:1px solid var(--line);
    max-height:calc(100vh - 68px);overflow-y:auto;
    display:none;
  }
  .has-js.nav-offen .mainnav{display:block}
  .has-js .mainnav>ul{display:block;padding:6px 24px 18px}
  .has-js .mainnav>ul>li>a{
    font-size:15px;padding:12px 0;border-bottom:1px solid var(--line);
  }
  .has-js .mainnav>ul>li:last-child>a{border-bottom:0}
  .has-js .mainnav a:hover,
  .has-js .mainnav a[aria-current="page"]{border-bottom-color:var(--line)}
  .has-js .mainnav>ul>li>a[aria-current="page"]{color:var(--red);font-weight:700}
  .has-js .mainnav ul ul{
    position:static;display:block;border:0;border-left:3px solid var(--red);
    min-width:0;margin:2px 0 10px;padding:0 0 0 16px;
  }
  .has-js .mainnav ul ul a{font-size:14px;padding:9px 0;border-bottom:0}

  /* Bei geschlossenem Menue schrumpft die Leiste auf Logo und Schaltflaeche */
  .has-js.is-kompakt .logo img{height:34px}
  .has-js.is-kompakt .navtoggle{padding:7px 12px;min-height:38px}
  .has-js.is-kompakt .navtoggle-text{display:none}
}

@media (max-width:600px){
  .announce .nur-breit{display:none}
}

@media (prefers-reduced-motion:reduce){
  .has-js .site-header .wrap,
  .has-js .logo img,
  .navtoggle-balken,
  .navtoggle-balken::before,
  .navtoggle-balken::after{transition:none}
}

/* --- Sprunglink zum Inhalt -------------------------------------- */
.skiplink{position:absolute;left:-9999px}
.skiplink:focus{
  position:fixed;left:16px;top:16px;z-index:100;
  background:#fff;color:var(--red);border:2px solid var(--red);
  padding:12px 18px;font-size:14px;font-weight:700;text-decoration:none;
}

/* --- Stand der Seite -------------------------------------------- */
.stand{font-size:12px;color:var(--grey);margin:34px 0 0;
  padding-top:18px;border-top:1px solid #DADADA}

/* --- Lebenslauf -------------------------------------------------- */
.vita-eintrag{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);
  gap:28px;padding:22px 0;border-top:1px solid var(--line)}
.vita-eintrag:first-child{border-top:0;padding-top:0}
.vita-zeit{font-size:14px;font-weight:700;color:var(--red);margin:0;
  font-variant-numeric:tabular-nums}
.vita-eintrag h3{margin:0 0 .5em;font-size:17px;font-weight:600;color:var(--text)}
.vita-eintrag ul{margin:0}
.vita-eintrag ul li{margin-bottom:6px}
.vita-quelle{font-size:13px;color:var(--grey);margin:10px 0 0}

/* Zweiter Tag eines Termins im Datumsblock */
.termin-datum .bis{font-weight:400;opacity:.65;margin:0 1px}

@media (max-width:760px){
  .vita-eintrag{grid-template-columns:1fr;gap:8px}
}