/* 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}