/* dummynerd.de: Aufgabenskizze. Werte zum Verschieben stehen als Variablen auf :root. */

@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");font-weight:100 800;font-display:swap}

:root{
  --paper:#FAF8F5;
  --card:#F3F0E7;
  --ink:#25281F;
  --muted:#585E50;
  --green:#456D3B;
  --green-deep:#365A2E;
  --green-light:#9DBB8F;
  --terra:#B34B0F;
  --line:#CBC3B9;

  --font-head:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --gutter:clamp(16px,4vw,48px);
  --wrap:1240px;
  --section-y:clamp(72px,10vw,136px);
  --hero-title-w:560px;
  --map-w:720px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--font-body);text-rendering:optimizeLegibility}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1.5px}
::selection{background:var(--green);color:var(--paper)}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--font-head);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:0;text-wrap:balance}
p{margin:0 0 1em}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--font-mono);letter-spacing:.04em}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:20}
.skip:focus{left:8px}

/* ---------- Kopf ---------- */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:68px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.125rem var(--font-mono);letter-spacing:-.02em}
.brand img{width:40px;height:40px}
.brand b{font-weight:700}.brand span{font-weight:400;color:var(--green)}
.nav{margin-left:auto;display:flex;gap:clamp(14px,2.2vw,28px);flex-wrap:wrap}
.nav a{font:600 .75rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--terra)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border:2px solid var(--ink);background:transparent;color:var(--ink);
  font:700 .8125rem var(--font-mono);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:transform .25s var(--ease),background .2s,color .2s}
.btn:hover{transform:translateY(-2px);background:var(--ink);color:var(--paper)}
.btn-primary{background:var(--green);border-color:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Blätter: gemeinsame Sprache der Zeichnung ---------- */
.blaetter{--gap:clamp(56px,7vw,88px);display:grid;gap:var(--gap);padding-top:clamp(20px,3vw,40px);padding-bottom:var(--gap)}
.blatt{position:relative}
.blatt + .blatt::before{content:"";position:absolute;left:50%;top:calc(-1 * var(--gap) - 2px);height:calc(var(--gap) + 4px);width:4px;margin-left:-2px;
  background-image:radial-gradient(circle,var(--terra) 2px,transparent 2.4px);background-size:4px 12px;background-repeat:repeat-y}
.sheet{position:relative;border:2px solid var(--ink);padding:6px;background:var(--paper)}
.blatt-in,.sheet-in{position:relative;border:1px solid var(--ink);padding:clamp(20px,3.4vw,48px);
  background-color:var(--paper);background-image:linear-gradient(#25281F10 1px,transparent 1px),linear-gradient(90deg,#25281F10 1px,transparent 1px);background-size:40px 40px}
.blatt:not(.hero) .blatt-in{padding:var(--blatt-pad,clamp(20px,3.4vw,48px))}
.blatt-card .blatt-in{background-color:var(--card)}
.blatt-in h2{font-size:var(--h2-size,clamp(2rem,4.2vw,3.25rem));margin-bottom:.6em}
.schriftfeld{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);background:var(--paper);font:.75rem/1.4 var(--font-mono);color:var(--ink);
  width:min(340px,100%);margin:clamp(32px,4vw,56px) 0 0 auto}
.schriftfeld div{padding:9px 12px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.schriftfeld div:nth-child(2n){border-right:0}.schriftfeld div:nth-last-child(-n+2){border-bottom:0}

/* ---------- Blatt 1: Einstieg ---------- */
.hero .sheet-in{padding:clamp(16px,2.4vw,32px);
  display:grid;grid-template-columns:minmax(0,var(--hero-title-w)) minmax(0,1fr);grid-template-rows:auto 1fr;gap:clamp(16px,2.4vw,28px) clamp(20px,4vw,56px)}
.title-block{grid-column:1;grid-row:1;background:var(--paper);border:2px solid var(--ink);padding:clamp(18px,2.6vw,30px);position:relative;z-index:2}
.title-block h1{font-size:var(--h1-size,clamp(2.1rem,3.7vw,3.1rem));margin-bottom:.45em}
.title-block p{color:var(--muted);font-size:var(--lead-size,1.0625rem);max-width:34em}
.karte{grid-column:2;grid-row:1/span 2;position:relative;align-self:stretch;min-height:0}
.karte svg{width:100%;height:auto;overflow:visible}
.karte text{font-family:var(--font-mono);fill:var(--ink)}
.karte .plan{fill:var(--muted)}
.map-mob{display:none}
.hero-foot{grid-column:1;grid-row:2;display:flex;gap:clamp(14px,2vw,22px);align-items:flex-end;flex-wrap:wrap;position:relative;z-index:2}
.abb{margin:0;width:var(--foto-w,clamp(160px,14vw,196px));border:2px solid var(--ink);background:var(--paper);padding:8px}
.abb img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 58%}
.abb figcaption{margin-top:7px;font:600 .75rem/1.4 var(--font-mono);letter-spacing:.02em;text-transform:uppercase;color:var(--muted);text-wrap:balance}
.legende{border:2px solid var(--ink);background:var(--paper);padding:12px 14px;font:600 .75rem/1.4 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);min-width:178px}
.legende b{display:block;color:var(--ink);border-bottom:1px solid var(--ink);margin-bottom:6px;padding-bottom:4px;letter-spacing:.1em}
.legende ul{list-style:none;margin:0;padding:0}
.legende li{display:flex;align-items:center;gap:8px;min-height:24px}
.legende svg{width:28px;height:20px;flex:none}
.hero .schriftfeld{position:absolute;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);margin:0;width:min(320px,48%)}

/* Weg im Einstieg: wächst beim Laden */
.weg-sicht{stroke:var(--terra);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:2 10;fill:none}
.weg-maske{stroke:#fff;stroke-width:12;stroke-linecap:round;fill:none}
.station{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.station-x{stroke:var(--ink);stroke-width:2}
.ziel{fill:var(--green)}.start{fill:var(--ink)}
.js .weg-maske{stroke-dasharray:1;stroke-dashoffset:1;animation:wachsen 3.4s .3s var(--ease) forwards}
.js .st{opacity:0;animation:einblenden .6s var(--ease) forwards}
.js .st-1{animation-delay:.2s}.js .st-2{animation-delay:1.35s}.js .st-3{animation-delay:2.2s}.js .st-4{animation-delay:3.1s}
@keyframes wachsen{to{stroke-dashoffset:0}}
@keyframes einblenden{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Abschnitte ---------- */
.lead{font-size:1.1875rem;max-width:36em}
.section{padding:clamp(40px,6vw,88px) 0}
.section h2{font-size:clamp(2rem,4.2vw,3.25rem);margin-bottom:.6em}

/* Geschichte: Weg wächst beim Scrollen */
.geschichte-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:start}
.geschichte-grid > .intro{position:sticky;top:110px}
.route{position:relative;padding-left:clamp(44px,6vw,72px);--p:1}
.js .route{--p:0}
.route-spur,.route-line{position:absolute;left:14px;top:14px;width:4px;border-radius:4px}
.route-spur{bottom:8px;background-image:radial-gradient(circle,var(--line) 1.5px,transparent 2px);background-size:4px 12px;background-repeat:repeat-y;width:4px}
.route-line{height:calc((100% - 22px) * var(--p));background-image:radial-gradient(circle,var(--terra) 2px,transparent 2.4px);background-size:4px 12px;background-repeat:repeat-y;transition:height .15s linear}
.route-stop{position:relative;padding-bottom:var(--stop-gap,clamp(40px,5vw,64px))}
.route-stop:last-child{padding-bottom:0}
.route-stop::before{content:"";position:absolute;left:calc(-1 * clamp(44px,6vw,72px) + 4px);top:0;width:24px;height:24px;border-radius:50%;background-color:var(--paper);
  border:2px solid var(--line);box-sizing:border-box;
  background-image:linear-gradient(45deg,transparent 44%,var(--line) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--line) 44% 56%,transparent 56%);
  background-size:12px 12px;background-position:center;background-repeat:no-repeat;transition:border-color .3s,background-color .3s,transform .4s var(--ease)}
.route-stop.reached::before{border-color:var(--ink);background-color:var(--card);transform:scale(1.12);
  background-image:linear-gradient(45deg,transparent 44%,var(--ink) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--ink) 44% 56%,transparent 56%)}
.route-stop.reached .stamp{color:var(--terra)}
.stamp{font:700 .8125rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.35em;transition:color .3s}
.route-stop p{max-width:34em}
.route-stop h3{font-size:1.5rem;margin-bottom:.4em}
.randnotiz{margin-top:clamp(40px,6vw,72px);border:2px solid var(--ink);background:var(--paper);padding:clamp(20px,3vw,32px);max-width:42em}
.randnotiz h3{font-size:1.5rem;margin-bottom:.5em}
.randnotiz p:last-child{margin-bottom:0}

/* Hunde */
.hunde-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
.hunde-foto{position:relative;margin:0}
.hunde-foto picture,.hunde-foto img{width:100%}
.hunde-foto img{height:auto;border:2px solid var(--ink);background:var(--card)}
.marker{position:absolute;top:calc(var(--y,60%) - 14px);left:calc(var(--x,20%) - 14px);width:28px;height:28px;border-radius:50%;background:var(--terra);color:#fff;font:700 .8125rem/28px var(--font-mono);text-align:center;border:2px solid var(--paper)}
.hunde-foto figcaption{margin-top:10px;font:600 .75rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hund{padding:clamp(18px,2.4vw,28px) 0;border-top:2px solid var(--ink)}
.hund:last-child{border-bottom:2px solid var(--ink)}
.hund h3{font-size:clamp(1.75rem,3vw,2.25rem);display:flex;align-items:center;gap:12px}
.hund .nr{flex:none;width:30px;height:30px;border-radius:50%;background:var(--terra);color:#fff;font:700 .875rem/30px var(--font-mono);text-align:center}
.hund dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:12px 0 14px;font:.8125rem/1.5 var(--font-mono);color:var(--muted)}
.hund dt{font-weight:600}.hund dd{margin:0;color:var(--ink)}
.hund p{max-width:34em;margin-bottom:0}

/* Projekte: Liste statt Karten */
.liste{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.liste > li{border-bottom:1px solid var(--line)}
.eintrag{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) 210px;gap:8px clamp(16px,4vw,48px);align-items:baseline;padding:clamp(22px,3vw,34px) 0;text-decoration:none;position:relative}
.eintrag h3{font-size:clamp(1.5rem,2.6vw,2.125rem)}
.eintrag .rolle{font:600 .8125rem var(--font-mono);letter-spacing:.04em;color:var(--terra);margin-top:6px}
.eintrag p{margin:0;color:var(--muted);max-width:36em}
.eintrag .pfeil{font:700 .8125rem var(--font-mono);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;text-align:right}
.eintrag .pfeil::after{content:"";display:inline-block;width:1.15em;height:.7em;margin-left:.6em;background:currentColor;vertical-align:baseline;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Cpath d='M0 5.5h16M11 1l5 4.5L11 10' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Cpath d='M0 5.5h16M11 1l5 4.5L11 10' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease)}
.eintrag:hover h3{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--terra);text-underline-offset:.15em}
.eintrag:hover .pfeil::after{transform:translateX(6px)}

/* Weiterbildung: Papier, gestrichelte Linien */
.fortbildung{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,72px);margin-top:clamp(8px,1vw,16px)}
.fortbildung > div{border-top:2px dashed var(--ink);padding-top:20px}
.fortbildung h3{font-size:1.5rem;margin-bottom:.5em}
.fortbildung p{margin:0;color:var(--muted);max-width:30em}
.fortbildung a{color:var(--green)}
.fuss{margin:clamp(24px,3vw,40px) 0 0;color:var(--muted)}

/* Blog-Vorschau und Blog-Seiten */
.posts{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.posts li{border-bottom:1px solid var(--line)}
.post-row{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,5fr);gap:8px clamp(16px,4vw,48px);padding:clamp(20px,2.6vw,30px) 0;text-decoration:none;align-items:baseline}
.post-row h3{font-size:clamp(1.375rem,2.2vw,1.75rem)}
.post-row p{margin:.35em 0 0;color:var(--muted)}
.post-row .meta{font:600 .75rem var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:right}
a.post-row:hover h3{text-decoration:underline;text-decoration-color:var(--terra);text-decoration-thickness:3px;text-underline-offset:.15em}
.post-row.folgt h3{color:var(--muted)}
.more{margin-top:28px}

/* Kontakt: hier endet der Weg */
.blatt-ziel .sheet{background:var(--ink);border-color:var(--ink)}
.blatt-ziel .blatt-in{background-color:var(--ink);border-color:var(--paper);color:var(--paper);
  background-image:linear-gradient(#FAF8F514 1px,transparent 1px),linear-gradient(90deg,#FAF8F514 1px,transparent 1px)}
.blatt-ziel::after{content:"";position:absolute;left:50%;top:-14px;width:24px;height:24px;margin-left:-12px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px var(--paper),0 0 0 6px var(--green);z-index:3}
.blatt-ziel h2{color:var(--paper)}
.ziel-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,6vw,96px);align-items:center}
.kontakt-liste{list-style:none;margin:0;padding:0;border-top:2px solid var(--paper)}
.kontakt-liste a{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid #FAF8F55c;text-decoration:none;font:700 clamp(1.125rem,2.2vw,1.5rem) var(--font-head)}
.kontakt-liste a span{font:600 .75rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--green-light)}
.kontakt-liste a:hover{color:#F3B98D}
.blatt-ziel .schriftfeld{background:var(--ink);border-color:var(--paper);color:var(--paper)}
.blatt-ziel .schriftfeld div{border-color:var(--paper)}

/* Fuß */
.footer{background:var(--paper);border-top:2px solid var(--ink);padding:28px 0 36px;font:.8125rem/1.7 var(--font-mono);color:var(--muted)}
.footer .wrap{display:flex;gap:16px 40px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.footer nav{display:flex;gap:20px;flex-wrap:wrap}
.footer a{text-decoration:none}.footer a:hover{text-decoration:underline;text-decoration-color:var(--terra)}

/* Blog-Seite und Beitrag */
.page-head{padding:clamp(48px,7vw,96px) 0 clamp(24px,3vw,40px);background-image:linear-gradient(#25281F10 1px,transparent 1px),linear-gradient(90deg,#25281F10 1px,transparent 1px);background-size:40px 40px;border-bottom:2px solid var(--ink)}
.page-head h1{font-size:clamp(2.6rem,6vw,4.5rem)}
.page-head p{max-width:36em;color:var(--muted);font-size:1.1875rem;margin:.8em 0 0}
.prose{max-width:68ch}
.prose h2{font-size:1.75rem;margin:1.8em 0 .5em}
.prose p{margin:0 0 1.2em}
.prose a{color:var(--green)}
.prose ul{margin:0 0 1.2em;padding-left:1.2em}
.prose figure{margin:2em 0}
.prose img{width:100%;height:auto;border:2px solid var(--ink);background:var(--card)}
.beitrag-meta{font:600 .8125rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--terra);margin-top:1.2em}
.zurueck{display:inline-block;margin-bottom:24px;font:700 .8125rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.zurueck:hover{text-decoration:underline;text-decoration-color:var(--terra)}
.rechtstext{max-width:68ch}.rechtstext h2{font-size:1.5rem;margin:1.8em 0 .5em}

/* ---------- schmale Fenster ---------- */
@media (max-width:1020px){
  .hero .sheet-in{grid-template-columns:1fr;grid-template-rows:auto}
  .title-block,.hero-foot,.karte,.hero .schriftfeld{grid-column:1;grid-row:auto}
  .karte{order:2;max-width:560px;margin:0 auto;width:100%}
  .hero-foot{order:3}
  .hero .schriftfeld{order:4;position:static;margin:0 0 0 auto;width:min(340px,100%)}
  .geschichte-grid,.hunde-grid,.ziel-grid{grid-template-columns:1fr}
  .geschichte-grid > .intro{position:static}
  .eintrag{grid-template-columns:1fr;gap:6px}
  .eintrag .pfeil{margin-top:6px}
  .fortbildung{grid-template-columns:1fr}
  .post-row{grid-template-columns:1fr}
  .post-row .meta{text-align:left}
}
@media (max-width:720px){
  .blatt-in,.hero .sheet-in{padding:14px}
  .title-block{padding:16px}
  .map-desk{display:none}
  .map-mob{display:block}
  .karte{max-width:420px}
  .nav a{font-size:.6875rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .weg-maske{animation:none;stroke-dashoffset:0}
  .js .st{animation:none;opacity:1}
  .js .route{--p:1}
  .route-line{transition:none}
  .route-stop::before{transition:none}
  .btn{transition:none}
}

/* Feinjustierung ab 1021 Pixel Breite (aus dem Regler-Panel übernommen, 11.10.2026) */
@media (min-width:1021px){
  .blaetter{
    --hero-title-w:498px;
    --h1-size:50px;
    --lead-size:19px;
    --foto-w:288px;
    --h2-size:58px;
    --blatt-pad:56px;
    --gap:72px;
    --stop-gap:52px;
  }
}