/* =========================================================================
   Dogplorer Paper Look 1.0.0
   Visuelle Ebene über den Theme-Styles. Ändert nur Optik, kein Markup nötig.

   Aufbau
   01 Tokens        02 Basis/Papier   03 Header        04 Buttons & Felder
   05 Bausteine     06 Hero           07 Kategorien    08 Sektionen
   09 Spot-Karten   10 Karte          11 Vor Ort       12 Mosaik/Trust
   13 Detailseite   14 Galerie        15 Footer        16 Responsive
   ========================================================================= */

/* -- 00 Schrift ---------------------------------------------------------- */
/* Outfit, variabel, lokal im Theme. Bewusst KEIN Google-Fonts-Aufruf: sonst
   gingen IP-Adressen der Besucher an Google (DSGVO). Lizenz: OFL 1.1,
   siehe assets/fonts/OFL-Outfit.txt */
@font-face{
  font-family:"Outfit";
  src:url('../fonts/outfit-variable.woff2') format('woff2-variations'),
      url('../fonts/outfit-variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* -- 01 Tokens ----------------------------------------------------------- */
:root{
  --dpp-cream:#f7f3ea;          /* Papierton der Seite      */
  --dpp-cream-2:#f2ece0;        /* zweite Papierstufe       */
  --dpp-white:#fffdf9;
  --dpp-ink:#0b2a48;
  --dpp-ink-soft:#3d5f78;
  --dpp-sun:#f9ba18;
  --dpp-sun-2:#ffd463;
  --dpp-sun-deep:#e0a300;

  /* Pastelltöne der Kategoriekreise */
  --dpp-green:#dde9d1;
  --dpp-sand:#fbeccd;
  --dpp-blue:#dbe6ea;
  --dpp-pink:#f7dde2;
  --dpp-peach:#f6e5d2;

  --dpp-tape:rgba(11,42,72,.88);
  --dpp-shadow:0 22px 48px rgba(11,42,72,.13);
  --dpp-shadow-soft:0 12px 28px rgba(11,42,72,.09);
  --dpp-max:1320px;

  /* Display-Schrift. Zum Tauschen hier und im @font-face oben anpassen. */
  --dpp-display:"Outfit",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --dpp-caps:uppercase;   /* auf "none" setzen, wenn Versalien zu laut sind */

  --dpp-doodles:url('../doodles/');
}

/* -- 02 Basis & Papier --------------------------------------------------- */
body{
  background-color:var(--dpp-cream);
  background-image:url('../doodles/paper-grain.png');
  background-repeat:repeat;
  background-size:220px 220px;
  color:var(--dpp-ink);
}
.dp-home-fun,.dp-about-fun,.dp-detail,.dp-directory,.dp-discover,.dp-search-page,.dp-events{
  background:transparent!important;
}
/* Outfit fuer Ueberschriften und UI. Fliesstext bleibt beim System-Stack:
   schneller und in langen deutschen Absaetzen ruhiger zu lesen. */
h1,h2,h3,h4,h5,h6{font-family:var(--dpp-display)!important;color:var(--dpp-ink)}
.dp-fun-kicker,.dp-kicker,.dp-eyebrow,
.dp-fun-nav strong,.dp-fun-mosaic strong,.dp-fun-mosaic small,.dp-fun-nav small,
.dp-place-card__meta,.dp-fun-textlink,
/* 3066 erzwingt hier Inter mit zwei Klassen - deshalb gleich mitschreiben. */
.dp-detail-hero h1,.dp-detail-hero.has-image h1,
.dp-directory-head h1,.dp-discover-head h1,.dp-search-head h1,.dp-events-hero h1,
.dp-place-card h3,
button,input[type="submit"],.wp-block-button__link,.gb-button,.dp-button,
.dp-directory-actions a,.dp-route-links a,.dp-event-snapshot a,
.main-navigation .main-nav ul li>a,
.dpp-footer__tagline,.dpp-footer__col h2{
  font-family:var(--dpp-display)!important;
}

/* Wiederverwendbare Papier-Kante. Wird per ::before/::after gesetzt. */
.dpp-tear{position:relative}
.dpp-tear::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(22px,3vw,42px);
  background:url('../doodles/torn-white-bottom.svg') center bottom/100% 100% no-repeat;
  pointer-events:none;z-index:5;
}

/* -- 03 Header ----------------------------------------------------------- */
.site-header{
  background:var(--dpp-cream)!important;
  border-bottom:0!important;
  box-shadow:none!important;
}
/* Bewusst KEINE Risskante unter dem Header: der Inhaltsbereich ist je nach
   Seite creme oder weiss, dadurch entstand ein unsauberer Doppelstreifen. */
.site-header{position:sticky}
.inside-header{min-height:78px!important}
.main-navigation .main-nav ul li>a{
  font-size:.9rem!important;font-weight:800!important;letter-spacing:-.005em!important;
}
.main-navigation .main-nav ul li>a::after{height:3px;bottom:12px;border-radius:3px}

/* Pfoten-Icon + runder gelber Menü-Button rechts (GP menu-bar-items) */
.main-navigation .menu-bar-items .menu-bar-item>a{
  display:grid;place-items:center;width:44px;height:44px;
}
.main-navigation .menu-bar-items .search-item>a{
  background:transparent;
  color:transparent!important;
  background-image:url('../doodles/paw-single.svg');
  background-size:26px 26px;background-position:center;background-repeat:no-repeat;
}
.menu-toggle{
  background:var(--dpp-sun)!important;border-radius:50%!important;
  width:46px;height:46px;padding:0!important;margin-left:6px;
}

/* -- 04 Buttons & Formularfelder ---------------------------------------- */
button,input[type="submit"],.wp-block-button__link,.gb-button,.dp-button,
.dp-directory-actions a,.dp-route-links a,.dp-event-snapshot a{
  border-radius:999px!important;
  letter-spacing:.01em!important;
  padding-inline:1.25rem!important;
  box-shadow:0 3px 0 rgba(11,42,72,.16)!important;
  transition:transform .16s ease,box-shadow .16s ease;
}
button:hover,input[type="submit"]:hover,.wp-block-button__link:hover,.gb-button:hover,.dp-button:hover{
  transform:translateY(-2px);box-shadow:0 6px 0 rgba(11,42,72,.18)!important;
}
input[type="text"],input[type="email"],input[type="url"],input[type="tel"],
input[type="search"],textarea,select{
  border-radius:999px!important;
  border:2px solid rgba(11,42,72,.14)!important;
  background:var(--dpp-white)!important;
}
textarea{border-radius:22px!important}

/* Kicker als handgeschriebenes Etikett statt gelbem Kasten */
.dp-fun-kicker{
  background:transparent!important;padding:0!important;border-radius:0!important;
  color:var(--dpp-ink-soft)!important;font-size:.7rem!important;letter-spacing:.16em!important;
}
.dp-fun-kicker::before{
  width:16px;height:16px;border-radius:0;background:url('../doodles/paw-single.svg') center/contain no-repeat!important;
}

/* -- 05 Wiederkehrende Bausteine ---------------------------------------- */

/* Polaroid: weißer Rand unten breiter, leicht gekippt, mit Klebestreifen. */
.dpp-polaroid{
  position:relative;background:var(--dpp-white);
  padding:14px 14px 52px;border-radius:3px;
  box-shadow:var(--dpp-shadow);
  transform:rotate(-1.6deg);
}
.dpp-polaroid::before{  /* Klebestreifen oben links */
  content:"";position:absolute;left:-16px;top:14px;width:84px;height:26px;
  background:var(--dpp-tape);transform:rotate(-24deg);z-index:3;
  box-shadow:0 2px 6px rgba(11,42,72,.25);
}

/* Gelber Marker hinter Text */
.dpp-mark{
  position:relative;display:inline;
  background:url('../doodles/marker-yellow.svg') 0 center/100% .78em no-repeat;
  background-position:0 .58em;
  padding-inline:.1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* -- 06 Hero ------------------------------------------------------------- */
/* Live-Markup:
   .dp-hero > .dp-hero__media > picture.dp-hero__picture
                             > .dp-hero__content > .dp-hero__copy-panel
                                                 > .dp-search-panel
   Aus dem Overlay-Hero wird ein zweispaltiger Papier-Hero: Text links auf
   Creme, Foto rechts randabfallend mit gerissener Kante. */
.dp-hero{
  position:relative;background:var(--dpp-cream)!important;
  padding:0!important;margin:0!important;border-radius:0!important;
  overflow:visible!important;
}
.dp-hero__media::after{display:none!important}  /* dunkler Verlauf des Themes */
.dp-hero__media{
  position:relative!important;display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center;
  min-height:0!important;height:auto!important;
  border-radius:0!important;overflow:visible!important;box-shadow:none!important;
}
/* Foto rechts */
.dp-hero__picture{
  position:relative!important;grid-area:1/2;
  display:block;height:clamp(430px,64vh,690px)!important;
  margin:0!important;border-radius:0!important;overflow:visible!important;
}
.dp-hero__picture img{
  width:100%!important;height:100%!important;object-fit:cover!important;
  border-radius:0!important;display:block;
}
.dp-hero__picture::before{  /* gerissene Kante zur Textspalte */
  content:"";position:absolute;z-index:4;left:-2px;top:0;bottom:0;
  width:clamp(22px,2.6vw,46px);
  background:url('../doodles/torn-cream-left.svg') left center/100% 100% no-repeat;
}
.dp-hero__picture::after{  /* runder Marken-Button auf der Risskante */
  content:"SNIFF.\A EXPLORE.\A REPEAT.\A ♥";
  white-space:pre-line;text-align:center;
  position:absolute;z-index:6;
  inset:auto auto clamp(24px,5vw,64px) clamp(-30px,-1.4vw,-12px);
  display:grid;place-content:center;
  width:clamp(104px,11vw,150px);height:clamp(104px,11vw,150px);border-radius:50%;
  background:var(--dpp-ink);color:#fff;font-family:var(--dpp-display);
  font-size:clamp(.62rem,.85vw,.82rem);font-weight:900;line-height:1.5;letter-spacing:.03em;
  box-shadow:var(--dpp-shadow);
}
/* Textspalte links, nicht mehr als Overlay */
.dp-hero__content{
  position:static!important;grid-area:1/1;
  display:block!important;transform:none!important;
  width:auto!important;max-width:none!important;
  background:transparent!important;padding:clamp(2.4rem,6vw,5rem) clamp(1.4rem,3vw,3rem) clamp(2.4rem,6vw,5rem) max(clamp(1.2rem,4vw,2.4rem),calc((100vw - var(--dpp-max))/2 + 24px))!important;
}
.dp-hero__copy-panel{
  position:relative;
  background:transparent!important;backdrop-filter:none!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  padding:0!important;max-width:none!important;
}
.dp-hero__copy-panel::before{  /* Krone über der Headline */
  content:"";position:absolute;left:0;top:clamp(-58px,-4vw,-34px);
  width:clamp(46px,5vw,74px);aspect-ratio:120/92;
  background:url('../doodles/crown.svg') center/contain no-repeat;
  transform:rotate(-6deg);
}
.dp-hero__copy-panel h1{
  text-transform:var(--dpp-caps);
  font-size:clamp(2.8rem,5.6vw,5.4rem)!important;
  line-height:.94!important;letter-spacing:-.045em!important;
  max-width:12ch;margin:.2rem 0 1rem!important;color:var(--dpp-ink)!important;
}
.dp-hero__copy-panel p{color:var(--dpp-ink-soft)!important;max-width:36ch}
.dp-marker-word{
  color:var(--dpp-sun-deep)!important;position:relative;
  background:none!important;
}
.dp-marker-word::after{
  content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.16em;
  background:url('../doodles/marker-yellow.svg') center/100% 100% no-repeat;
  transform:rotate(-.8deg);
}
/* Suche als Hero-Aktion, kein eigener Kasten mehr */
.dp-search-panel{
  position:relative;
  background:transparent!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;
  padding:0!important;margin:1.6rem 0 0!important;max-width:min(560px,100%)!important;
}
.dp-search-panel::before{
  content:"";position:absolute;
  inset:auto clamp(-46px,-2.4vw,-10px) -14px auto;
  width:clamp(120px,14vw,190px);aspect-ratio:200/76;
  background:url('../doodles/paw-trail.svg') right center/contain no-repeat;
  opacity:.42;pointer-events:none;
}
.dp-search-panel__head{display:none!important}
.dp-search-row input[type="search"]{
  border:2px solid rgba(11,42,72,.16)!important;border-radius:999px!important;
  background:var(--dpp-white)!important;padding-inline:1.15rem!important;
}
.dp-search-row button[type="submit"]{
  background:var(--dpp-sun)!important;color:var(--dpp-ink)!important;
  border:0!important;padding-inline:1.5rem!important;
}
.dp-nearby-button{
  background:transparent!important;border:2px solid var(--dpp-ink)!important;
  color:var(--dpp-ink)!important;box-shadow:none!important;
}
.dp-nearby-button:hover{background:var(--dpp-ink)!important;color:#fff!important}
.dp-nearby-dot{background:currentColor!important}
/* Risskante zum nächsten Abschnitt */
.dp-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(24px,2.4vw,50px);
  background:url('../doodles/torn-white-bottom.svg') center bottom/100% 100% no-repeat;
  z-index:7;pointer-events:none;
}
/* Beitragsbild doppelt sich mit dem Hero-Foto */
.home .featured-image.page-header-image{display:none!important}

/* -- 07 Kategoriekreise (.dp-browse) ------------------------------------- */
/* Aus der schlichten Linkzeile werden die fünf Pastellkreise aus dem Entwurf. */
.dp-browse{
  position:relative;background:var(--dpp-white)!important;
  border:0!important;padding:clamp(2.6rem,5vw,4.6rem) 0 clamp(2rem,4vw,3.4rem)!important;
  margin:0!important;
}
.dp-browse__inner{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,2vw,26px)!important;
  justify-content:stretch!important;overflow:visible!important;
  border:0!important;background:transparent!important;padding:0!important;
}
.dp-browse__inner a{
  display:flex!important;flex-direction:column;align-items:center;text-align:center;
  gap:0;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;color:var(--dpp-ink)!important;
  text-decoration:none!important;overflow:visible;
  font-family:var(--dpp-display);font-size:clamp(.78rem,1vw,.92rem);
  font-weight:900;letter-spacing:.06em;text-transform:uppercase;
}
.dp-browse__inner a::after{content:none!important;display:none!important}
/* style.css hebt den ersten Link als "aktiv" hervor (Unterstrich + Rostton)
   und setzt Rahmen sowie Polster mit !important. In der Kreis-Darstellung
   passt das nicht mehr, deshalb hier gleichziehen. */
.dp-browse__inner a,
.dp-browse__inner a:first-child,
.dp-browse__inner a:hover,
.dp-browse__inner a:focus{
  border:0!important;border-bottom:0!important;
  padding:0!important;color:var(--dpp-ink)!important;
}
.dp-browse__inner a::before{
  content:""!important;display:block!important;
  width:clamp(84px,9vw,132px);aspect-ratio:1;
  margin:0 auto .95rem;border-radius:50%;
  background-color:var(--dpp-blue);
  background-image:url('../doodles/icon-map.svg');
  background-size:46% 46%;background-position:center;background-repeat:no-repeat;
  transition:transform .18s ease;
}
.dp-browse__inner a:hover::before{transform:translateY(-5px) rotate(-3deg)}
/* Reihenfolge: Hundewiesen · Karte · Events · Sport & Kurse · Gute Adressen */
.dp-browse__inner a:nth-child(1)::before{background-color:var(--dpp-green);background-image:url('../doodles/icon-walk.svg')}
.dp-browse__inner a:nth-child(2)::before{background-color:var(--dpp-blue);background-image:url('../doodles/icon-map.svg')}
.dp-browse__inner a:nth-child(3)::before{background-color:var(--dpp-sand);background-image:url('../doodles/icon-event.svg')}
.dp-browse__inner a:nth-child(4)::before{background-color:var(--dpp-pink);background-image:url('../doodles/icon-bone.svg')}
.dp-browse__inner a:nth-child(5)::before{background-color:var(--dpp-peach);background-image:url('../doodles/icon-heart.svg')}

/* -- 08 Abschnitte & Überschriften --------------------------------------- */
.dp-section{position:relative;background:var(--dpp-white)}
.dp-section--map,.dp-home-events{background:var(--dpp-cream)!important}
.dp-section--compact{background:var(--dpp-white)!important}
/* Risskanten an jedem Farbwechsel */
.dp-section--map::after,.dp-home-events::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(22px,2.2vw,46px);
  background:url('../doodles/torn-white-bottom.svg') center bottom/100% 100% no-repeat;
  z-index:4;pointer-events:none;
}
#spots::after,#finden::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(22px,2.2vw,46px);
  background:url('../doodles/torn-cream-bottom.svg') center bottom/100% 100% no-repeat;
  z-index:4;pointer-events:none;
}
.dp-section-head h2{
  text-transform:var(--dpp-caps);letter-spacing:-.035em!important;
  font-size:clamp(1.9rem,3.1vw,3.1rem)!important;line-height:1.04!important;
  max-width:20ch;text-wrap:balance;overflow-wrap:break-word;hyphens:auto;
  color:var(--dpp-ink)!important;
}
.dp-section-head h2::after{
  content:"";display:block;width:clamp(120px,14vw,210px);height:11px;
  margin-top:.28em;border-radius:0;transform:rotate(-.9deg);
  background:url('../doodles/marker-yellow.svg') center/100% 100% no-repeat;
}
.dp-eyebrow{
  background:transparent!important;padding:0!important;border-radius:0!important;
  color:var(--dpp-ink-soft)!important;font-size:.7rem!important;letter-spacing:.16em!important;
  display:inline-flex;align-items:center;gap:.5rem;
}
.dp-eyebrow::before{
  content:"";width:16px;height:16px;flex:none;border-radius:0!important;
  background:url('../doodles/paw-single.svg') center/contain no-repeat!important;
}
.dp-eyebrow::after{display:none!important}
.dp-muted,.dp-lead,.dp-trust__intro{color:var(--dpp-ink-soft)!important}
.dp-text-link,.dp-about-cta .dp-link{
  border-bottom:0!important;text-decoration:none!important;
  /* Marker als Hintergrund am Element selbst. Als Pseudo mit z-index:-1
     verschwaende er hinter dem Hintergrund des Elternelements. */
  background:url('../doodles/marker-yellow.svg') 0 100%/100% 9px no-repeat!important;
  padding-bottom:3px;
}

/* -- 09 Spot-Karten als Polaroids ---------------------------------------- */
.dp-card{
  border-radius:4px!important;border:0!important;
  background:var(--dpp-white)!important;
  padding:12px 12px 0!important;
  box-shadow:var(--dpp-shadow-soft)!important;
  overflow:visible!important;
  transition:transform .18s ease,box-shadow .18s ease;
}
.dp-card-grid .dp-card:nth-child(odd){transform:rotate(-.9deg)}
.dp-card-grid .dp-card:nth-child(even){transform:rotate(.7deg)}
.dp-card-grid .dp-card:hover{transform:translateY(-6px) rotate(0deg)!important;box-shadow:var(--dpp-shadow)!important}
.dp-card__media{border-radius:2px!important;overflow:hidden!important}
.dp-card__media--placeholder{
  background:var(--dpp-cream-2)!important;border:0!important;
}
.dp-card__badge{
  border-radius:999px!important;box-shadow:none!important;
  background:var(--dpp-ink)!important;color:#fff!important;
}
.dp-card__badge-mark{background:var(--dpp-sun)!important;color:var(--dpp-ink)!important;border-radius:50%!important}
.dp-card__meta{
  padding-inline:.35rem!important;
  font-family:var(--dpp-display)!important;letter-spacing:.02em;
}
.dp-card h3{
  padding-inline:.35rem!important;letter-spacing:-.03em!important;
  color:var(--dpp-ink)!important;
}
.dp-card>p{padding-inline:.35rem!important;padding-bottom:1.1rem!important;color:var(--dpp-ink-soft)!important}

/* -- 10 Kartenbereich ---------------------------------------------------- */
.dp-map-block{background:transparent!important;border:0!important;padding:0!important}
.dp-map-filters button{
  border-radius:999px!important;border:2px solid rgba(11,42,72,.14)!important;
  background:var(--dpp-white)!important;box-shadow:none!important;
  font-family:var(--dpp-display)!important;
}
.dp-map-filters button.is-active{background:var(--dpp-sun)!important;border-color:var(--dpp-sun)!important}
.dp-map-legend{color:var(--dpp-ink-soft)!important}
.dp-map-frame{
  background:var(--dpp-white)!important;border:0!important;border-radius:6px!important;
  padding:14px 14px 44px!important;box-shadow:var(--dpp-shadow)!important;
  transform:rotate(-.5deg);
}
.dp-map-frame .dp-osm-map,.dp-map-frame .dp-map-loader{border-radius:3px!important}

/* -- 11 Vor-Ort-Abschnitt (.dp-editorial) -------------------------------- */
.dp-editorial{background:transparent!important;border:0!important;box-shadow:none!important}
.dp-editorial__image{
  position:relative;
  background:var(--dpp-white)!important;
  padding:16px 16px 62px!important;border-radius:3px!important;
  box-shadow:var(--dpp-shadow)!important;transform:rotate(-2deg);
  overflow:visible!important;border:0!important;
}
/* style.css legt das Bild absolut mit negativem inset an, dadurch wuerde es
   den Polaroid-Rand rechts und unten ueberdecken. */
.dp-editorial__image img{
  position:relative!important;inset:auto!important;
  width:100%!important;height:auto!important;
  border-radius:2px!important;display:block;object-fit:cover;
}
.dp-editorial__image::before{  /* Klebestreifen */
  content:"";position:absolute;left:-18px;top:16px;width:92px;height:28px;z-index:3;
  background:var(--dpp-tape);transform:rotate(-25deg);
  box-shadow:0 2px 7px rgba(11,42,72,.25);
}
.dp-editorial__aside h2{
  text-transform:none!important;letter-spacing:-.035em!important;
  color:var(--dpp-ink)!important;
}
.dp-proof-list>div{
  border-radius:16px!important;border:2px solid rgba(11,42,72,.10)!important;
  background:var(--dpp-white)!important;
  /* style.css setzt hier nur vertikales Polster, dadurch klebte die Zahl
     direkt an der Kastenkante. */
  padding:1rem 1.2rem!important;gap:1rem!important;align-items:center!important;
}
.dp-proof-list b{
  border-radius:50%!important;width:40px!important;height:40px!important;
  background:var(--dpp-sun)!important;color:var(--dpp-ink)!important;
  display:grid;place-items:center;flex:none;
}

/* -- 12 Themenkacheln (.dp-topic-card) ----------------------------------- */
.dp-topic-card{
  border:0!important;border-radius:20px!important;
  box-shadow:var(--dpp-shadow-soft)!important;
  overflow:visible!important;
  transition:transform .18s ease;
}
.dp-topic-card:hover{transform:translateY(-4px)}
.dp-topic-grid .dp-topic-card:nth-child(1){background:var(--dpp-sun)!important}
.dp-topic-grid .dp-topic-card:nth-child(2){background:var(--dpp-blue)!important}
.dp-topic-grid .dp-topic-card:nth-child(3){background:var(--dpp-white)!important}
.dp-topic-grid .dp-topic-card:nth-child(4){background:var(--dpp-green)!important}
.dp-topic-grid .dp-topic-card:nth-child(5){background:var(--dpp-peach)!important}
.dp-topic-no{
  border-radius:50%!important;width:42px!important;height:42px!important;
  display:grid!important;place-items:center;
  background:var(--dpp-ink)!important;color:#fff!important;
  font-family:var(--dpp-display)!important;font-weight:900;
}
.dp-topic-card h3{letter-spacing:-.03em!important;color:var(--dpp-ink)!important}
.dp-topic-card p{color:rgba(11,42,72,.72)!important}
.dp-topic-cta{
  position:relative;font-family:var(--dpp-display)!important;font-weight:900;
  color:var(--dpp-ink)!important;
}

/* -- 13 Eventkarten ------------------------------------------------------ */
/* Eventkarten sind <article>. style.css setzt .home article{background:
   transparent!important} mit zwei Selektorteilen - deshalb hier ebenfalls
   zweiteilig selektieren, sonst gewinnt die Themeregel. */
.dp-event-card,
.home .dp-event-card,
.dp-home-event-grid .dp-event-card,
.dp-event-grid .dp-event-card{
  border-radius:6px!important;border:0!important;
  background:var(--dpp-white)!important;
  padding:10px 10px 0!important;box-shadow:var(--dpp-shadow-soft)!important;
  overflow:visible!important;
}
.dp-home-event-grid .dp-event-card:nth-child(odd){transform:rotate(-.7deg)}
.dp-home-event-grid .dp-event-card:nth-child(even){transform:rotate(.6deg)}
.dp-home-event-grid .dp-event-card:hover{transform:rotate(0) translateY(-5px)}
.dp-event-card__visual{border-radius:3px!important;background:var(--dpp-sand)!important}
.dp-event-date{
  border-radius:14px!important;background:var(--dpp-sun)!important;
  color:var(--dpp-ink)!important;font-family:var(--dpp-display)!important;
  box-shadow:none!important;
}
.dp-event-card__meta span{
  font-family:var(--dpp-display)!important;color:var(--dpp-ink-soft)!important;
}
.dp-event-card h3{letter-spacing:-.03em!important;color:var(--dpp-ink)!important}
.dp-event-card__cta{position:relative;font-family:var(--dpp-display)!important;color:var(--dpp-ink)!important}

/* -- 14 Trust-Block ------------------------------------------------------ */
.dp-trust{position:relative;background:var(--dpp-white)!important}
.dp-trust__grid{border-radius:26px!important}
/* .dp-trust .dp-wrap traegt einen navy Verlauf. Ueberschrift und Vorspann
   muessen deshalb hell bleiben - dunkel auf dunkel war unlesbar. */
.dp-trust h2{
  text-transform:var(--dpp-caps);letter-spacing:-.04em!important;
  color:#fff!important;
}
.dp-trust .dp-eyebrow{color:rgba(255,255,255,.72)!important}
.dp-trust .dp-eyebrow::before{filter:invert(1) brightness(3)}
.dp-trust .dp-trust__intro{color:rgba(255,255,255,.8)!important}
.dp-trust__item{
  border-radius:18px!important;border:0!important;
  background:var(--dpp-white)!important;
  /* ohne align-self werden die Kacheln auf Zeilenhoehe gestreckt und
     bekommen einen grossen leeren Fuss. */
  /* style.css setzt zusaetzlich min-height:100%, dadurch blieben die
     Kacheln trotz align-self auf voller Zeilenhoehe. */
  align-self:start!important;min-height:0!important;
  padding:1.2rem 1.3rem!important;
  box-shadow:var(--dpp-shadow-soft)!important;
}
.dp-trust__item strong{font-family:var(--dpp-display)!important;color:var(--dpp-ink)!important}
.dp-trust__item span{color:var(--dpp-ink-soft)!important}

/* -- 14b Unterseiten ----------------------------------------------------- */
/* Detail-, Verzeichnis- und Suchseiten teilen dieselben Bausteine. */
.dp-detail-hero,.dp-directory-head,.dp-discover-head,.dp-search-head,.dp-events-hero{
  background:var(--dpp-cream)!important;
}
.dp-detail-hero h1,.dp-directory-head h1,.dp-discover-head h1,
.dp-search-head h1,.dp-events-hero h1{
  color:var(--dpp-ink)!important;text-transform:none!important;
  letter-spacing:-.04em!important;
}
.dp-detail-hero__image,.dp-shot-trigger{
  position:relative;background:var(--dpp-white)!important;
  padding:12px 12px 40px!important;border-radius:3px!important;
  box-shadow:var(--dpp-shadow-soft)!important;overflow:visible!important;border:0!important;
}
.dp-shot-trigger::after{
  content:"";position:absolute;left:50%;top:-11px;width:74px;height:22px;z-index:3;
  background:var(--dpp-tape);transform:translateX(-50%) rotate(-4deg);
  box-shadow:0 2px 6px rgba(11,42,72,.2);
}
.dp-keyfacts__grid>div,.dp-detail-aside{
  border-radius:18px!important;border:2px solid rgba(11,42,72,.10)!important;
}
.dp-detail-aside{background:var(--dpp-sand)!important}


/* -- 14c Über Dogplorer -------------------------------------------------- */
/* Live-Markup: .dp-about-page > .dp-about-hero (div + aside)
                              > .dp-about-story (.dp-editorial)
                              > .dp-about-principles (3x div)
                              > .dp-about-local  > .dp-about-cta */
.dp-about-page{background:transparent}
.dp-about-hero{position:relative;background:transparent!important}
.dp-about-hero h1{
  position:relative;overflow:visible;color:var(--dpp-ink)!important;
  letter-spacing:-.045em!important;text-wrap:balance;
}
/* Krone über der Headline. Haengt bewusst an der H1 und nicht am Kicker:
   .dp-eyebrow::after wird weiter oben global ausgeblendet. */
.dp-about-hero h1::before{
  content:"";position:absolute;left:0;top:clamp(-104px,-7vw,-84px);
  width:clamp(42px,4.6vw,68px);aspect-ratio:120/92;
  background:url('../doodles/crown.svg') center/contain no-repeat;
  transform:rotate(-7deg);
}
.dp-page-intro{color:var(--dpp-ink-soft)!important}
.dp-button--quiet{
  background:var(--dpp-ink)!important;color:#fff!important;
  border:0!important;border-radius:999px!important;
  box-shadow:0 3px 0 rgba(11,42,72,.18)!important;
}
.dp-button--quiet:hover{background:var(--dpp-sun)!important;color:var(--dpp-ink)!important}

/* Der Kasten rechts wird zum gelben Klebezettel mit Klebestreifen. */
.dp-about-hero>aside{
  position:relative;
  background:var(--dpp-sun)!important;
  border:0!important;border-radius:4px!important;
  box-shadow:var(--dpp-shadow)!important;
  transform:rotate(1.4deg);overflow:visible!important;
}
.dp-about-hero>aside::before{
  content:"";position:absolute;left:50%;top:-13px;width:90px;height:26px;z-index:3;
  background:var(--dpp-tape);transform:translateX(-50%) rotate(-3deg);
  box-shadow:0 2px 7px rgba(11,42,72,.25);
}
.dp-about-hero>aside strong{
  color:var(--dpp-ink)!important;font-family:var(--dpp-display)!important;
  letter-spacing:-.03em;
}
.dp-about-hero>aside p{color:rgba(11,42,72,.78)!important}
.dp-about-number{
  color:var(--dpp-ink)!important;background:transparent!important;
  font-family:var(--dpp-display)!important;font-weight:900;opacity:.5;
}

/* Bildunterschrift am Polaroid */
.dp-editorial__image--brand .dp-editorial__caption{
  background:var(--dpp-white)!important;border:0!important;
  border-radius:3px!important;box-shadow:var(--dpp-shadow-soft)!important;
}
.dp-editorial__caption strong{font-family:var(--dpp-display)!important;color:var(--dpp-ink)!important}
.dp-editorial__caption span{color:var(--dpp-ink-soft)!important}

/* Prinzipien: aus den Spalten mit Trennlinien werden Papierkarten. */
.dp-about-principles{
  position:relative;background:transparent!important;
  gap:clamp(14px,1.8vw,26px)!important;   /* Kaesten standen auf Kante */
}
.dp-about-principles>div{
  border:0!important;border-left:0!important;border-right:0!important;
  border-radius:20px!important;
  padding:clamp(1.5rem,2.4vw,2.2rem)!important;
  box-shadow:var(--dpp-shadow-soft)!important;
}
.dp-about-principles>div:nth-child(1){background:var(--dpp-sun)!important}
.dp-about-principles>div:nth-child(2){background:var(--dpp-blue)!important}
.dp-about-principles>div:nth-child(3){background:var(--dpp-green)!important}
.dp-about-principles>div>span{
  display:grid!important;place-items:center;
  width:42px!important;height:42px!important;border-radius:50%!important;
  background:var(--dpp-ink)!important;color:#fff!important;
  font-family:var(--dpp-display)!important;font-weight:900;font-size:.82rem;
  margin-bottom:.9rem;
}
.dp-about-principles>div h2{
  color:var(--dpp-ink)!important;text-transform:none!important;
  letter-spacing:-.035em!important;
}
.dp-about-principles>div p{color:rgba(11,42,72,.74)!important}

/* Navy-Block */
.dp-about-local{
  position:relative;border-radius:26px!important;background:var(--dpp-ink)!important;
  overflow:hidden;
}
.dp-about-local::after{
  content:"";position:absolute;right:-10px;bottom:-6px;
  width:clamp(140px,16vw,230px);aspect-ratio:200/76;
  background:url('../doodles/paw-trail.svg') right center/contain no-repeat;
  filter:invert(1) brightness(3);opacity:.13;pointer-events:none;
}
.dp-about-local h2{color:#fff!important;text-transform:var(--dpp-caps);letter-spacing:-.04em!important}
.dp-about-local .dp-eyebrow{color:rgba(255,255,255,.7)!important}
.dp-about-local .dp-eyebrow::before{filter:invert(1) brightness(3)}
.dp-about-local p{color:rgba(255,255,255,.86)!important}
.dp-about-cta .dp-link{
  font-family:var(--dpp-display)!important;font-weight:900;color:var(--dpp-ink)!important;
}

/* -- 15 Footer ----------------------------------------------------------- */
.site-footer{position:relative;background:var(--dpp-ink);color:#fff;--dpp-tear:clamp(26px,2.8vw,54px)}
/* Die Risskante liegt OBERHALB des Footers und ist navy eingefaerbt, die
   Zacken ragen also nach oben in den Abschnitt darueber.
   Zwei Gruende gegen die umgekehrte Variante (helle Zacken im Footer):
   - sie musste die Farbe des Abschnitts darueber erraten, und die ist je
     nach Seite creme oder weiss;
   - sie ragte in den Footer hinein und schnitt bei knappem Platz Logo und
     Spaltentitel an.
   Ausserhalb gezeichnet kann beides nicht mehr passieren. */
.site-footer::before{
  content:"";position:absolute;left:0;right:0;
  top:calc(-1 * var(--dpp-tear));height:var(--dpp-tear);
  background:url('../doodles/torn-ink-bottom.svg') center bottom/100% 100% no-repeat;
  z-index:2;pointer-events:none;
}
.site-info{
  background:transparent!important;border-top:0!important;
  padding:clamp(2.8rem,4.5vw,4.2rem) 0 clamp(1.6rem,3vw,2.4rem)!important;color:#fff;
}
.site-info .inside-site-info{max-width:var(--dpp-max);margin-inline:auto;padding-inline:clamp(16px,3vw,30px)}
.site-info .copyright-bar{width:100%}

.dpp-footer{
  display:grid;gap:clamp(1.8rem,4vw,3.4rem);
  grid-template-columns:minmax(230px,1.05fr) repeat(3,minmax(0,.72fr)) minmax(120px,.6fr);
  align-items:start;text-align:left;
}
.dpp-footer a{color:#fff;text-decoration:none}
.dpp-footer a:hover{color:var(--dpp-sun)}
.dpp-footer__logo{display:block;width:clamp(180px,15vw,230px);height:auto;margin-bottom:1.1rem}
.dpp-footer__tagline{
  margin:0;font-family:var(--dpp-display);font-size:.86rem;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
}
.dpp-footer__tagline span{color:var(--dpp-sun)}
.dpp-footer__col h2{
  margin:0 0 .85rem;color:var(--dpp-sun);font-size:.72rem;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;
}
.dpp-footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.dpp-footer__col li{font-size:.88rem;line-height:1.45}
.dpp-footer__col p{margin:0 0 .8rem;font-size:.88rem;color:rgba(255,255,255,.82)}
.dpp-footer__social{display:flex;gap:.6rem;margin-top:.2rem}
.dpp-footer__social a{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.10);
}
.dpp-footer__social a:hover{background:var(--dpp-sun);color:var(--dpp-ink)}
.dpp-footer__social svg{width:17px;height:17px;fill:currentColor}
.dpp-footer__intro{margin:.9rem 0 0!important;font-size:.86rem;color:rgba(255,255,255,.72);max-width:34ch}
.dpp-footer__stamp{justify-self:end;align-self:center}
.dpp-footer__stamp img{width:clamp(96px,10vw,150px);height:auto;opacity:.95}
.dpp-footer__legal{
  grid-column:1/-1;margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.76rem;color:rgba(255,255,255,.6);
}
.dpp-footer__legal a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:.2em}

/* Mobile-Dock über dem Footer nicht doppelt abtrennen */
.dp-mobile-dock{border-top-width:1px!important}

/* -- 16 Responsive ------------------------------------------------------ */
@media(max-width:1100px){
  .dpp-footer{grid-template-columns:minmax(200px,1fr) repeat(2,minmax(0,.8fr))}
  .dpp-footer__stamp{display:none}
}
@media(max-width:900px){
  .dp-hero__media{grid-template-columns:1fr}
  .dp-hero__picture{grid-area:1/1;height:clamp(300px,44vh,420px)!important}
  .dp-hero__picture::before{
    left:0;right:0;top:auto;bottom:-2px;width:auto;height:26px;
    background:url('../doodles/torn-cream-bottom.svg') center bottom/100% 100% no-repeat;
  }
  .dp-hero__picture::after{left:auto;right:clamp(14px,4vw,32px);bottom:auto;top:16px;width:96px;height:96px}
  .dp-hero__content{grid-area:2/1;padding:clamp(1.6rem,4vw,2.4rem) clamp(1.1rem,5vw,2rem)!important}
  .dp-hero__copy-panel::before{display:none}
  .dp-editorial__image{max-width:520px;margin-inline:auto}
}
@media(max-width:768px){
  .dp-about-hero h1::before{display:none}  /* oben zu wenig Platz */
  .dp-about-hero>aside{transform:none}
  .dp-about-principles>div{padding:1.3rem!important}
  .dp-browse{padding-block:2.4rem 1.6rem!important}
  .dp-browse__inner{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1.4rem .6rem!important}
  .dp-browse__inner a{font-size:.7rem}
  .dp-browse__inner a::before{width:clamp(64px,20vw,92px);margin-bottom:.6rem}
  .dp-hero__copy-panel h1{font-size:clamp(2.4rem,10vw,3.6rem)!important;max-width:12ch}
  .dp-search-panel{max-width:100%!important}
  .dp-search-panel::before{display:none}
  .dp-editorial__image{padding:11px 11px 46px!important;transform:rotate(-1.2deg)}
  .dp-map-frame{padding:10px 10px 30px!important;transform:none}
  .dpp-footer{grid-template-columns:1fr 1fr;gap:1.8rem}
  .dpp-footer__brand{grid-column:1/-1}
}
@media(max-width:480px){
  .dp-browse__inner{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dpp-footer{grid-template-columns:1fr}
  .dp-hero__picture::after{width:84px;height:84px;font-size:.58rem}
}
@media(prefers-reduced-motion:reduce){
  .dp-browse__inner a::before,.dp-card,.dp-topic-card,.dp-event-card{transition:none!important}
}