/*
  Döring Werbung – Stylesheet
  Optik der bisherigen Seite (Layout "doering"), responsiv umgesetzt.
  Ab 1020 px: festes 990-px-Layout wie bisher. Darunter: einspaltig mit Menü-Schalter.
  Farben und Maße stammen aus dem Design System der bestehenden Seite.
*/

:root{
  --ink:#556575;          /* Fließtext, Links, H1 */
  --accent:#319a69;       /* Markengrün der bisherigen Seite (nur Flächen, Grafik) */
  --accent-text:#277b53;  /* dunkleres Grün für Text, 5,19:1 auf Weiß */
  --surface:#ffffff;
  --tint:#eef6fc;
  --rule:#dddddd;
  --frame:#e0e0e0;
  --hairline:#d6dce1;     /* feine Begrenzung der Seite links, nur Desktop */
  --bar-1:#0ab8b7;
  --bar-2:#2ec2a0;
  --bar-3:#4cca76;
  --bar-4:#78d853;
  --font:Arial,Helvetica,sans-serif;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface);color:var(--ink);font:1rem/1.55 var(--font)}
img{max-width:100%;height:auto;border:0}
a{color:var(--ink);text-decoration:underline;text-underline-offset:.15em}
a:hover{color:var(--accent-text)}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:10px 14px;background:var(--surface);color:var(--ink);border:2px solid var(--accent-text)}
.skip:focus{left:var(--gutter)}

/* ---------- Typografie ---------- */
h1{margin:0 0 8px;font:400 1.625rem/1.2 var(--font);color:var(--ink);text-wrap:balance}
h2{margin:0 0 24px;font:400 1.125rem/1.35 var(--font);color:var(--accent-text);text-wrap:balance}
h3{margin:0 0 4px;font:700 1rem/1.3 var(--font);color:var(--accent-text)}
p{margin:0 0 1.125rem}
hr{height:1px;margin:0 0 1.125rem;background:var(--rule);border:0}
.content ul{margin:0 0 1.125rem;padding:0 0 0 36px}
.content ul.arrow li{line-height:1.6;list-style-image:url(../img/layout/icon_liste.gif)}
.content li{padding-left:2px}
.content ul.logos,.content ul.topics,.content ul.cities,.content ol.timeline{margin:0;padding:0}
.content ul.logos{margin:0 0 28px}
.content ol.timeline li,.content ul.cities li,.content ul.topics li,.content ul.logos li{padding-left:0}
h2.subhead{margin:0 0 12px;font-size:1.0625rem}
strong{font-weight:700}

/* ---------- Seitenrahmen (kleine Breiten zuerst) ---------- */
.page{position:relative;display:flow-root;max-width:990px;margin:0 auto}
.topbar{height:22px;background:linear-gradient(90deg,var(--bar-1) 0%,var(--bar-2) 30%,var(--bar-3) 60%,var(--bar-4) 100%)}
.site-head{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--gutter-r) 16px var(--gutter);min-height:88px;border-bottom:1px solid var(--rule)}
.logo{display:block;flex:none;line-height:0}
.logo img{width:220px;height:auto}
@media (max-width:359px){.logo img{width:180px}}
.nav-toggle{display:none;flex:none;align-items:center;gap:10px;min-height:44px;padding:0 6px;background:none;border:0;color:var(--ink);font:inherit;cursor:pointer}
.nav-toggle .bars{position:relative;width:22px;height:2px;background:currentColor}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor}
.nav-toggle .bars::before{top:-7px}
.nav-toggle .bars::after{top:7px}

.main-nav{position:static;flex:1 0 100%}
.main-nav ul{margin:0;padding:0;list-style:none}
.main-nav a{display:block;padding:12px 4px;color:var(--ink);text-decoration:none;line-height:1.3}
.main-nav a:hover{text-decoration:underline;color:var(--ink)}
.main-nav .sub a{padding-left:22px;font-size:.9375rem}
.main-nav .sub a::before{content:"\2022";display:inline-block;width:1em;margin-left:-1em}
.main-nav a[aria-current="page"],.main-nav a.current-section{color:var(--accent-text);font-weight:700}
@media (max-width:1019.98px) and (scripting:enabled){
  .nav-toggle{display:inline-flex}
  .main-nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:100;background:var(--surface);border-bottom:1px solid var(--rule);padding:4px var(--gutter-r) 12px var(--gutter)}
  .main-nav.open{display:block}
}
.main-nav>ul>li+li>a{border-top:1px solid var(--rule)}
.main-nav .sub li a{border-top:0}

.motif{display:block;width:300px;max-width:100%;height:210px;margin:0 0 28px;object-fit:cover;object-position:0 -105px}

.content{padding:32px var(--gutter-r) 0 var(--gutter);max-width:44rem}
.content>h1,.content>h2{max-width:36.25rem}

/* ---------- Inhalte ---------- */
.measure{max-width:36.25rem}
.lead{margin:8px 0 28px;font-size:1.0625rem;color:var(--accent-text)}
.next{margin:8px 0 1.125rem}

.timeline{margin:0;padding:0;list-style:none}
.timeline li{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:4px 20px;padding:16px 0;border-top:1px solid var(--rule)}
.timeline li:first-child{border-top:0;padding-top:0}
.timeline .year{margin:0;font:700 1.375rem/1.2 var(--font);color:var(--accent-text);font-variant-numeric:tabular-nums}
.timeline p:last-child{margin-bottom:0}
@media (max-width:479px){.timeline li{grid-template-columns:minmax(0,1fr)}}

.services>div{padding-top:14px;margin-bottom:22px;border-top:1px solid var(--rule)}
.services p:last-child{margin-bottom:0}
.services .tag{display:block;margin:14px 0 2px;font-weight:700;color:var(--accent-text)}

.mapfig{margin:0 0 24px;max-width:350px}
.mapfig figcaption{margin-top:6px;font-size:.875rem}
.map{position:relative;width:100%;max-width:350px;aspect-ratio:350/460;background:url(../img/layout/karte.gif) no-repeat 0 0/100% 100%}
.pin{position:absolute;display:block;min-height:24px;padding:2px 6px;background:var(--surface);color:var(--ink);font-size:.8125rem;line-height:1.35;text-decoration:none;white-space:nowrap}
.pin:hover,.pin:focus-visible{color:var(--accent-text);text-decoration:underline}
.pin-hamburg{left:41.4%;top:18.5%}
.pin-berlin{left:67.1%;top:26.1%}
.pin-essen{left:21.4%;top:46.7%}
.pin-rastatt{left:28.6%;top:73.5%}
.pin-baden-baden{left:28.6%;top:79%}
.pin-offenburg{left:25.7%;top:84.5%}
.pin-muenchen{left:45.7%;top:91%}
.citylinks{margin:0 0 1.5rem;line-height:1.9}
.citylinks span{margin-right:6px}
.citylinks a{display:inline-block;margin:0 10px 0 0;padding:4px 0}
@media (max-width:459px){
  .map .pin{display:none}   /* Orte stehen darunter als Linkliste */
}
.cities{margin:0;padding:0;list-style:none}
.cities li{margin:0 0 8px;padding:12px 12px 4px;border:1px solid transparent}
.cities li:target{border-color:var(--accent-text);background:var(--tint)}
.cities h3{margin:0 0 4px;letter-spacing:.04em;text-transform:uppercase;font-size:.9375rem}
.cities p{margin:0 0 .75rem;font-size:.9375rem}

.logos{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 28px;padding:0;list-style:none}
.logos li{border:1px solid var(--frame);background:var(--surface);line-height:0}
.logos img{display:block;width:118px;height:118px}

.partner{padding:0 0 8px;margin-bottom:28px;border-bottom:1px solid var(--rule)}
.partner:last-of-type{border-bottom:0}
.partner h2{margin:0 0 10px;font-size:1.0625rem}
.partner img{margin:0 0 14px}
.partner p:last-child{margin-bottom:0}

.topics{margin:0;padding:0;list-style:none}
.content .topics li{padding:12px 0;border-top:1px solid var(--rule)}
.content .topics li{font:700 1rem/1.35 var(--font);color:var(--accent-text)}
.content ul.topics{margin:0 0 28px;border-bottom:1px solid var(--rule)}
.topics p{margin:0}
.note{margin:0 0 28px;padding:14px 16px;border-left:4px solid var(--accent-text);background:var(--tint)}
.note p:last-child{margin-bottom:0}

.person{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;align-items:start;margin:0 0 28px}
.person figure{margin:0}
.person img{display:block;width:160px;height:auto}
.person figcaption{margin-top:6px;font-size:.875rem}
.person h3{margin-bottom:6px}
.person p{margin:0 0 6px;overflow-wrap:anywhere}
@media (max-width:479px){.person{grid-template-columns:minmax(0,1fr)}.person img{width:120px}}
.address{padding-top:20px;border-top:1px solid var(--rule);font-style:normal}
.address p{overflow-wrap:anywhere}

.legal-body h2{margin:1.5rem 0 4px;font:700 1rem/1.3 var(--font);color:var(--accent-text)}
.legal-body h3{margin:1rem 0 4px;font:700 .9375rem/1.3 var(--font);color:var(--accent-text)}
.legal-body p,.legal-body li{font-size:.9375rem}
.legal-body ul{margin:0 0 1.125rem}
.legal-body a{overflow-wrap:anywhere}

/* ---------- Fußbereich ---------- */
.site-foot-wrap{max-width:44rem;padding:0 var(--gutter-r) 0 var(--gutter)}
.toplink{margin:40px 0 32px;display:flex;align-items:center;gap:8px}
.toplink img{flex:none}
.site-footer{padding:24px 0 48px;border-top:1px solid var(--rule)}
.site-footer p{margin:0}
.site-footer a{overflow-wrap:anywhere}

/* ---------- Tablet: etwas mehr Rand ab 760 px ---------- */
@media (min-width:760px) and (max-width:1019.98px){
  .logo img{width:260px}
  .site-head{padding-left:max(40px,var(--gutter));padding-right:max(40px,var(--gutter-r))}
  .content,.site-foot-wrap{padding-left:max(40px,var(--gutter));padding-right:max(40px,var(--gutter-r))}
}

/* ---------- Desktop: Original-Layout, 990 px fest ---------- */
@media (min-width:1020px){
  .page{width:990px;min-height:800px;background:var(--surface) url(../img/layout/body_background.jpg) no-repeat 0 0}
  .topbar{display:none}
  .page::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:1px;background:var(--hairline);pointer-events:none}
  .site-head{position:static;display:block;min-height:0;padding:0;border-bottom:0}
  .logo{position:absolute;left:60px;top:55px;z-index:5}
  .logo img{width:260px;height:55px}
  .nav-toggle{display:none}
  .motif{position:absolute;left:0;top:110px;width:300px;height:690px;max-width:none;margin:0;object-fit:fill;object-position:0 0;pointer-events:none}
  .main-nav{display:block;flex:none;position:absolute;right:0;top:165px;z-index:50;width:715px;height:80px;padding:14px 0 0;border:0;background:transparent url(../img/layout/navigation_background.jpg) no-repeat 50% 0}
  .main-nav>ul{display:flex;flex-wrap:nowrap;justify-content:flex-start}
  .main-nav>ul>li{position:relative;background:var(--surface)}
  .main-nav>ul>li+li>a{border-top:0}
  .main-nav a{padding:10px 7px 0;font-size:.84375rem;line-height:21px;white-space:nowrap}
  .main-nav a:focus-visible{outline-offset:-3px}
  .main-nav a[aria-current="page"],.main-nav a.current-section{background:url(../img/layout/menuactive_background.gif) no-repeat 50% 3px;font-weight:400}
  .main-nav a[aria-current="page"]:hover,.main-nav a.current-section:hover{text-decoration:none}
  .main-nav .sub a[aria-current="page"]{background:none;font-weight:700}
  .main-nav .sub{display:none;position:absolute;left:0;top:100%;min-width:12rem;background:var(--surface);border:1px solid var(--rule);padding:6px 0}
  .main-nav li:hover>.sub,.main-nav li:focus-within>.sub{display:block}
  .main-nav.esc .sub{display:none!important}
  .main-nav .sub a{padding:6px 14px 6px 24px;font-size:.875rem;line-height:1.3}
  .main-nav .sub a::before{margin-left:-.9em}
  .content{width:580px;max-width:none;margin:280px 0 0 370px;padding:0;background:var(--surface)}
  .content>h1,.content>h2{max-width:none}
  .site-foot-wrap{width:580px;max-width:none;margin-left:370px;padding:0}
  .site-footer{text-align:right}
}

@media print{
  .topbar,.main-nav,.nav-toggle,.motif,.toplink,.skip{display:none!important}
  .page{max-width:none;margin:0;background:none!important;width:auto}
  .page::before{display:none}
  .content{margin:0;padding:0;width:auto}
  a{color:#000}
}

/* =====================================================================
   FULL-WIDTH-FASSUNG (Vorschau)
   Ab 1020 px: Foto und Kopfgrafik am linken Fensterrand verankert, Balken über
   die ganze Breite, Inhalt in der Restfläche rechts vom Foto (mittig, bis 72 rem)
   und je nach Breite mehrspaltig. Darunter unverändert einspaltig.
   ===================================================================== */
@media (min-width:1020px){
  :root{--aside:370px;--wrap:72rem;--pad:clamp(40px,4vw,72px)}

  /* Balken: die ersten 690 px wie in der Grafik (gleiche Stopps), danach durchgehend grün */
  .topbar{display:block;height:22px;background:
      linear-gradient(90deg,var(--bar-1) 0,var(--bar-2) 207px,var(--bar-3) 414px,var(--bar-4) 690px) no-repeat 0 0/690px 100%,
      var(--bar-4)}

  .page{display:grid;grid-template-columns:var(--aside) minmax(0,1fr);grid-template-rows:auto auto 1fr;
        width:auto;max-width:none;margin:0;min-height:calc(100vh - 22px);
        background:var(--surface) url(../img/layout/body_background.jpg) no-repeat 0 -22px}
  .page::before{display:none}

  .site-head{grid-column:1/-1;position:relative;height:238px}
  .logo{left:60px;top:33px}
  .motif{top:88px}

  /* Menü: bündig mit der rechten Kante des Inhaltsbereichs */
  .main-nav{left:var(--aside);right:0;top:143px;width:auto;height:80px;padding:14px 0 0;
            background:transparent url(../img/layout/navigation_background.jpg) no-repeat 0 0/100% 10px}
  .main-nav>ul{width:min(100%,var(--wrap));margin:0 auto;padding:0 var(--pad);justify-content:flex-end}
  .main-nav>ul>li{background:transparent}
  .main-nav .sub{right:0;left:auto}

  .content{grid-column:2;width:min(100%,var(--wrap));margin:20px auto 0;padding:0 var(--pad);background:transparent;align-self:start}
  .content>h1{margin-top:0}
  .site-foot-wrap{grid-column:2;width:min(100%,var(--wrap));margin:0 auto;padding:0 var(--pad);align-self:end}
  .toplink{margin:48px 0 0}
  .site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 32px;margin-top:20px;padding:20px 0 40px;text-align:left}
  .site-foot-wrap{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:32px}
  .site-foot-wrap .toplink{flex:0 0 100%}
  .site-footer{flex:1 1 100%}

  .measure,.content>p{max-width:none}
  .content>h1,.content>h2{max-width:none}
  .legal-body{max-width:48rem}
}

/* ---- ab ca. 1260 px: zwei Textspalten und Raster ---- */
@media (min-width:1260px){
  .cols{max-width:none}
  .lead{max-width:none;margin-top:12px}

  /* Medienmetropolen: Karte links, Orte in zwei Spalten daneben */
  .mm{display:grid;grid-template-columns:350px minmax(0,1fr);column-gap:clamp(40px,4vw,72px);align-items:start}
  .mm-side{position:sticky;top:24px}
  .mm .cities{columns:2;column-gap:32px}
  .mm .cities li{break-inside:avoid}

  /* Referenzen: Logos breiter getaktet */
  .logos{gap:18px}

  /* Partner: Logo links, Text rechts */
  .partner{display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-areas:"logo title" "logo text";column-gap:clamp(40px,4vw,72px);padding-bottom:12px}
  .partner>h2{grid-area:title;align-self:end}
  .partner>div:nth-of-type(1){grid-area:logo}
  .partner>div:nth-of-type(2){grid-area:text}
  .partner img{margin:4px 0 0}

  /* Presseinfo: Themen in zwei Spalten */
  .content ul.topics{columns:2;column-gap:clamp(40px,4vw,72px)}
  .content .topics li{break-inside:avoid}
  .content .topics li:first-child{border-top:1px solid var(--rule)}
  .note{max-width:48rem}

  /* Telefonnummern nicht mitten in der Nummer umbrechen */
  .note a[href^="tel:"],.site-footer a[href^="tel:"]{white-space:nowrap}
}

@media (min-width:1700px){
  :root{--wrap:74rem}
  .content{font-size:1.125rem}
  .content>h1{font-size:2rem}
  .content ul.topics{columns:3}
}