/* Schriften lokal eingebunden (keine Verbindung zu Google) – SIL Open Font License */
@font-face{font-family:"Source Serif 4";font-weight:400;font-display:swap;src:url(../fonts/source-serif-4-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:600;font-display:swap;src:url(../fonts/source-serif-4-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url(../fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url(../fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}
:root{
  --bg:#ECEAE6;          /* warmes Hellgrau */
  --surface:#F8F6F3;
  --line:#D9D4CC;
  --text:#5C3A21;        /* Nussbraun – Fließtext */
  --heading:#7B3F22;     /* Kastanienbraun – Überschriften */
  --text-soft:#7A4E2D;   /* Mittelbraun – Nebentexte */
  --accent:#8A4B34;      /* Rostbraun der Icons */
  --accent-dark:#6E3A27;
  --wood-a:#8B5A36; --wood-b:#6F4428;
  --radius:14px;
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Source Sans 3",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.6 var(--sans)}
img{max-width:100%;display:block}
a{color:var(--accent)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* Holz nur als Akzent: Kopfband + schmale Leiste */
.wood{
  background-color:var(--wood-a);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.28  0 0 0 0 0.17  0 0 0 0 0.09  0 0 0 1.1 -0.35'/%3E%3C/filter%3E%3Crect width='600' height='300' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,var(--wood-a),var(--wood-b));
  background-size:600px 300px,cover;
}
header.site{color:#F6EFE6}
.top{display:flex;align-items:center;gap:16px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.brand img{width:64px;height:64px;background:#F8F6F3;border-radius:50%;padding:6px}
.brand b{display:block;font:600 24px/1.1 var(--serif);letter-spacing:.01em}
.brand span{font-size:14px;opacity:.85;letter-spacing:.08em}
nav.main{margin-left:auto}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
nav.main a{color:#F6EFE6;text-decoration:none;font-size:16px;padding:6px 10px;border-radius:8px}
nav.main a:hover,nav.main a[aria-current]{background:rgba(255,255,255,.15)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:8px;padding:6px 12px;font:inherit;font-size:16px}
@media (max-width:860px){
  .menu-btn{display:block}
  nav.main{display:none;width:100%;margin:0}
  nav.main.open{display:block}
  .top{flex-wrap:wrap}
  nav.main ul{flex-direction:column;padding-bottom:12px}
}

.hero{padding:56px 0 40px}
.hero h1{font:600 clamp(30px,5vw,46px)/1.15 var(--serif);margin:0 0 14px;max-width:18ch}
.hero p{font-size:20px;color:var(--text-soft);max-width:58ch;margin:0 0 24px}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:12px 20px;border-radius:10px;font-weight:600}
.btn:hover{background:var(--accent-dark)}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent);margin-left:8px}

/* Leistungs-Kacheln mit den Icons */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:8px 0 56px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 12px 16px;text-align:center;text-decoration:none;color:var(--text);transition:transform .15s,box-shadow .15s,border-color .15s}
@media (max-width:900px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile img{width:72px;height:72px;margin:0 auto 10px}
.tile b{font:600 18px/1.2 var(--serif)}
.tile:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 6px 18px rgba(62,42,30,.12)}

.split{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;margin-bottom:56px}
@media (max-width:760px){.split{grid-template-columns:1fr}}
h2{font:600 30px/1.2 var(--serif);margin:0 0 12px}
.split ul{padding-left:20px;color:var(--text-soft)}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px}

.strip{height:10px}
.contact{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-bottom:56px}
.contact h3{font:600 18px/1.3 var(--serif);margin:0 0 6px}
.contact p{margin:0;color:var(--text-soft)}
.contact a{text-decoration:none;font-weight:600}

footer{color:#F6EFE6;font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding:22px 16px}
footer a{color:#F6EFE6}

.note{background:#FFF7D6;border:1px dashed #C9A94B;color:#5A4A1A;font-size:14px;border-radius:10px;padding:10px 14px;margin:16px 0 0}

/* Textseiten (Impressum, Datenschutz) */
.legal{max-width:760px;padding:48px 0 56px}
.legal h1{font:600 clamp(30px,5vw,40px)/1.15 var(--serif);margin:0 0 24px}
.legal h2{font-size:24px;margin:36px 0 8px}
.legal h3{font:600 19px/1.3 var(--serif);margin:24px 0 6px}
.legal p,.legal li{color:var(--text-soft)}
.legal address{font-style:normal;color:var(--text-soft)}
.todo{background:#FFF7D6;border-bottom:2px dashed #C9A94B;color:#5A4A1A;padding:0 3px;border-radius:3px}

/* Variante: Symbole in der Navigationsleiste */
.ni{display:none}
.nav-icons .ni{display:block;width:30px;height:30px;margin:0 auto 4px;background:currentColor;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.nav-icons nav.main a{display:block;text-align:center;font-size:14px;padding:8px 8px 6px;min-width:76px}
@media (max-width:860px){
  .nav-icons nav.main a{display:flex;align-items:center;gap:12px;text-align:left;font-size:17px}
  .nav-icons .ni{margin:0;width:26px;height:26px}
}
.nav-icons .hero{padding-bottom:56px}

/* Variante: Medaillons, die zu einem Drittel unter der Holzleiste herausragen */
.nav-badges header.site{position:fixed;top:0;left:0;right:0;z-index:20}
.nav-badges .top{padding-top:24px;padding-bottom:0;align-items:stretch}
.nav-badges .brand{align-self:center;padding-bottom:14px}
.nav-badges nav.main ul{gap:4px;align-items:flex-end;height:100%}
.nav-badges nav.main a{display:flex;flex-direction:column-reverse;align-items:center;gap:6px;font-size:14px;padding:0 3px;margin-bottom:-20px;background:none}
.nav-badges nav.main a:hover,.nav-badges nav.main a[aria-current]{background:none}
.nav-badges .ni{display:block;width:60px;height:60px;border-radius:50%;background:#F8F6F3 center/34px no-repeat;
  border:2px solid #E3D9CC;box-shadow:0 3px 8px rgba(62,42,30,.28);transition:transform .15s,border-color .15s}
.nav-badges nav.main a:hover .ni{transform:translateY(-2px);border-color:var(--accent)}
.nav-badges nav.main a[aria-current] .ni{border-color:var(--accent);border-width:3px}
.nav-badges .hero{padding-top:72px}
@media (max-width:860px){
  .nav-badges .top{padding-top:14px;padding-bottom:14px;align-items:center}
  .nav-badges .brand{padding-bottom:0}
  .nav-badges nav.main ul{align-items:stretch}
  .nav-badges nav.main a{flex-direction:row;justify-content:flex-start;gap:12px;margin:0;font-size:17px;padding:4px 0}
  .nav-badges .ni{width:38px;height:38px;background-size:24px;box-shadow:none}
  .nav-badges .hero{padding-top:48px}
}
@media (min-width:861px){
  .nav-badges nav.main ul{flex-wrap:nowrap}
  .nav-badges .brand{min-width:0}
}
@media (min-width:861px) and (max-width:1100px){
  .nav-badges nav.main a{font-size:13px;margin-bottom:-17px;padding:0 1px}
  .nav-badges .ni{width:50px;height:50px;background-size:28px}
  .nav-badges .brand b{font-size:20px}
  .nav-badges .brand img{width:52px;height:52px}
}
.nav-badges .legal{padding-top:76px}
@media (max-width:860px){.nav-badges .legal{padding-top:40px}}

/* ---------- Rubrik-Seiten ---------- */
.rubrik{padding-top:76px;padding-bottom:56px}
@media (max-width:860px){.rubrik{padding-top:40px}}
.r-head{display:flex;gap:20px;align-items:center;margin-bottom:20px}
.r-icon{width:84px;height:84px;flex:none;border-radius:50%;background:#F8F6F3 center/48px no-repeat;border:2px solid #E3D9CC;box-shadow:0 3px 8px rgba(62,42,30,.18)}
.r-head h1{font:600 clamp(30px,5vw,44px)/1.1 var(--serif);margin:0}
.lead{font-size:20px;color:var(--text-soft);margin:6px 0 0}
.r-body{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin:28px 0 48px;align-items:start}
@media (max-width:760px){.r-body{grid-template-columns:1fr;gap:24px}.r-head{gap:14px}.r-icon{width:64px;height:64px;background-size:36px}}
.r-text p{margin:0 0 14px}
.r-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.r-list h2{font-size:22px}
.r-list ul{margin:0;padding-left:20px;color:var(--text-soft)}
.r-list li{margin-bottom:6px}

.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin:16px 0 56px}
.galerie figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.galerie button{display:block;width:100%;padding:0;border:0;background:#ddd;cursor:zoom-in}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .25s}
.galerie button:hover img{transform:scale(1.03)}
.galerie figcaption{padding:12px 14px 14px;font-size:15px;color:var(--text-soft);line-height:1.45}
.galerie figcaption b{display:block;color:var(--text);font:600 17px/1.3 var(--serif);margin-bottom:2px}

.cta{color:#F6EFE6;border-radius:var(--radius);padding:28px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.cta h2{color:#fff;margin:0 0 4px}
.cta p{margin:0;opacity:.92}
.btn.light{background:#F8F6F3;color:var(--accent-dark)}
.btn.light:hover{background:#fff}
.btn.ghost.light{background:transparent;color:#fff;border-color:#F6EFE6}

.lightbox{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh;overflow:visible}
.lightbox::backdrop{background:rgba(30,20,14,.88)}
.lightbox figure{margin:0;text-align:center}
.lightbox img{max-height:80vh;width:auto;margin:0 auto;border-radius:8px}
.lightbox figcaption{color:#F6EFE6;margin:12px auto 0;max-width:60ch;font-size:16px}
.lightbox figcaption b{display:block;font:600 19px var(--serif);color:#fff}
.lb-btn{position:fixed;background:rgba(0,0,0,.45);color:#fff;border:0;border-radius:50%;width:48px;height:48px;font-size:30px;line-height:1;cursor:pointer}
.lb-btn:hover{background:rgba(0,0,0,.7)}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
@media (max-width:760px){.r-head{align-items:flex-start}}
h1,h2,h3,.r-head h1,.hero h1,.galerie figcaption b,.tile b{color:var(--heading)}
.lightbox figcaption b{color:#fff}

/* Aufruf am Seitenende: hell, nur eine schmale Holzleiste als Akzent */
.cta{position:relative;overflow:hidden;background:var(--surface);color:var(--text);border:1px solid var(--line);padding:24px 28px 24px 40px}
.cta-leiste{position:absolute;left:0;top:0;bottom:0;width:10px}
.cta h2{color:var(--heading);font-size:26px}
.cta p{color:var(--text-soft);opacity:1}
.cta-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.cta-knoepfe .btn.ghost{margin-left:0}

/* Anfahrtsskizze im Kontaktbereich */
.anfahrt{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.anfahrt img{width:100%;height:auto}
.anfahrt figcaption{padding:12px 18px;font-size:16px;border-top:1px solid var(--line)}
.anfahrt a{font-weight:600;text-decoration:none}

/* Kontaktdaten links, Anfahrtsskizze rechts daneben */
.kontakt-reihe{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;margin-bottom:56px}
.kontakt-reihe .contact{margin:0;grid-template-columns:1fr 1fr;align-content:center}
.kontakt-reihe .anfahrt{display:flex;flex-direction:column;justify-content:center}
@media (max-width:860px){.kontakt-reihe{grid-template-columns:1fr}}
@media (max-width:480px){.kontakt-reihe .contact{grid-template-columns:1fr}}

/* Mauerwerk-Galerie: jedes Foto behält sein Format (hoch oder quer), nichts wird abgeschnitten */
.galerie{display:block;columns:4 230px;column-gap:18px}
.galerie figure{display:flex;break-inside:avoid;margin:0 0 18px}
.galerie img{aspect-ratio:auto;height:auto;object-fit:contain}

/* Startseite: hervorgehobener Kasten (z. B. Rührfässer) */
.besonders{position:relative;display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:28px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-left:8px solid var(--accent);border-radius:var(--radius);
  padding:22px 28px 22px 22px;margin:0 0 56px}
.besonders img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.besonders h2{margin-top:0}
.besonders p{color:var(--text-soft)}
.besonders .btn{margin-top:4px}

/* Startseite: Über mich */
.ueber{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:center;margin:0 0 56px}
.ueber figure{margin:0}
.ueber img{width:100%;border-radius:var(--radius);box-shadow:0 6px 18px rgba(62,42,30,.15)}
.ueber figcaption{font-size:14px;color:var(--text-soft);margin-top:8px;text-align:center}
.ueber h2{margin-top:0}
@media (max-width:760px){
  .besonders,.ueber{grid-template-columns:1fr;gap:18px}
  .ueber figure{max-width:320px}
}

/* Hinweis unter „Einblicke“ (hellbraun, Kontrast 4,6:1) */
.galerie-hinweis{color:#8A5F3F;font-size:16px;margin:-6px 0 14px}

/* ---------- Navigationsleiste bleibt beim Scrollen oben stehen ---------- */
/* Leiste schwebt über dem Inhalt; der Platzhalter oben hat ihre volle Höhe (misst js/site.js),
   damit beim Verkleinern nichts auf der Seite springt */
body.nav-badges{padding-top:var(--kopf-h,102px)}

[id]{scroll-margin-top:130px}

/* Handy: Menü-Knopf neben dem Namen, aufgeklapptes Menü scrollbar */
@media (max-width:860px){
  .top{flex-wrap:wrap}
  .brand{flex:1;min-width:0}
  .brand img{width:48px;height:48px;padding:4px}
  .brand b{font-size:19px}
  .brand span{font-size:12px}
  .menu-btn{flex:none}
  .nav-badges .top{padding-top:10px;padding-bottom:10px}
  nav.main.open{max-height:calc(100vh - 90px);overflow-y:auto}
  [id]{scroll-margin-top:90px}
}

/* Leiste schrumpft stufenlos mit dem Scrollen: --k läuft von 0 (oben) bis 1 (kompakt), gesetzt von js/site.js */
@media (min-width:861px){
  :root{--ni:60px;--logo:64px;--logo-schrift:24px;--nav-schrift:14px;--ueberhang:-20px}
  .nav-badges .top{padding-top:calc(24px - 16px * var(--k,0))}
  .nav-badges .brand{padding-bottom:calc(14px - 6px * var(--k,0))}
  .nav-badges .brand img{width:calc(var(--logo) - (var(--logo) - 44px) * var(--k,0));height:calc(var(--logo) - (var(--logo) - 44px) * var(--k,0));padding:calc(6px - 2px * var(--k,0))}
  .nav-badges .brand b{font-size:calc(var(--logo-schrift) - (var(--logo-schrift) - 19px) * var(--k,0))}
  .nav-badges .brand span{font-size:calc(14px - 2px * var(--k,0))}
  .nav-badges nav.main a{font-size:calc(var(--nav-schrift) - 2px * var(--k,0));gap:calc(6px - 3px * var(--k,0));
    margin-bottom:calc(var(--ueberhang) + (var(--ueberhang) * -1 - 12px) * var(--k,0))}
  .nav-badges .ni{width:calc(var(--ni) - (var(--ni) - 40px) * var(--k,0));height:calc(var(--ni) - (var(--ni) - 40px) * var(--k,0));background-size:56%}
  .nav-badges header.site{box-shadow:0 2px 12px rgba(62,42,30,calc(.25 * var(--k,0)))}
}
@media (min-width:861px) and (max-width:1100px){
  :root{--ni:50px;--logo:52px;--logo-schrift:20px;--nav-schrift:13px;--ueberhang:-17px}
}

/* Über mich: Foto und Meisterbrief übereinander */
.ueber-bilder{display:grid;gap:18px;align-content:start}
.ueber .beleg img{box-shadow:none;border:1px solid var(--line)}
.ueber .beleg{max-width:320px}
.ueber a{display:block}
.ueber .portrait img{max-height:440px;width:auto;max-width:100%;margin:0 auto;object-fit:contain}

/* Großansicht: zoombar (Mausrad, + / −, Ziehen, Doppelklick, Pinch) */
.lb-zoom{display:block;overflow:hidden;border-radius:8px;width:fit-content;max-width:100%;margin:0 auto;touch-action:none;
  cursor:zoom-in;user-select:none;-webkit-user-select:none}
.lb-zoom.vergroessert{cursor:grab}
.lb-zoom.vergroessert:active{cursor:grabbing}
.lb-zoom img{display:block;transform-origin:0 0;will-change:transform;-webkit-user-drag:none;border-radius:0;margin:0}
.lb-werkzeuge{position:fixed;top:16px;left:16px;display:flex;gap:8px;z-index:2}
.lb-werkzeuge .lb-btn{position:static;font-size:26px}
.lb-hinweis{color:rgba(246,239,230,.7);font-size:13px;margin:8px auto 0;max-width:60ch}
@media (max-width:600px){.lb-hinweis{display:none}}

/* Hinweis unter „Einblicke“: am Computer Maus, auf dem Handy Finger */
.galerie-hinweis .nur-touch{display:none}
@media (hover:none),(pointer:coarse){
  .galerie-hinweis .nur-maus{display:none}
  .galerie-hinweis .nur-touch{display:inline}
}

/* Großansicht: Beschreibung links neben dem Foto, Zoom-Hinweis rechts (nur auf breiten Bildschirmen) */
.lb-hinweis .nur-touch{display:none}
@media (hover:none),(pointer:coarse){
  .lb-hinweis .nur-maus{display:none}
  .lb-hinweis .nur-touch{display:inline}
}
@media (min-width:1200px){
  .lightbox{max-width:100vw}
  /* Foto links, Beschreibung rechts daneben; der Zoom-Hinweis steht als Zeile unter dem Foto.
     Seitlich bleibt Platz für die Blätterpfeile am Rand. */
  .lightbox figure{display:grid;grid-template-columns:auto minmax(0,30ch);column-gap:36px;row-gap:10px;justify-content:center;
    align-items:center;text-align:left;padding:0 80px}
  .lb-zoom{grid-column:1;grid-row:1}
  .lightbox img{max-height:84vh}
  .lightbox figcaption{grid-column:2;grid-row:1;justify-self:start;text-align:left;margin:0;max-height:84vh;overflow:auto;font-size:17px;line-height:1.5}
  .lb-hinweis{display:block;grid-column:1;grid-row:2;justify-self:center;text-align:center;max-width:none;margin:0;font-size:14px}
  .lb-hinweis br{display:none}
}
@media (max-width:1199px){
  .lightbox img{max-height:64vh}
  .lightbox figcaption{max-height:20vh;overflow:auto}
  .lb-hinweis{display:none}
}

/* Logo statt Firmenname im Kontaktbereich: die zwei Textzeilen des Logos entsprechen etwa der Überschriftgröße */
.contact h3.kontakt-logo{margin:0 0 8px;line-height:0}
.contact h3.kontakt-logo img{display:block;height:5em;width:auto;max-width:100%;margin-left:-4px}

/* Kontaktblöcke: Überschrift (bzw. Logo) und Adresse liegen in gemeinsamen Zeilen, damit die Adressen nebeneinander
   auf gleicher Höhe stehen. Die Überschrift sitzt unten in ihrer Zeile, direkt über der Adresse. */
@supports (grid-template-rows: subgrid) {
  .contact{row-gap:0;column-gap:24px}
  .contact > div{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
  .contact > div > h3{align-self:end;margin:0 0 8px}
  .contact > div > h3.kontakt-logo{align-self:end;margin:0 0 8px}
  .contact > div:nth-child(n+3) > h3{margin-top:24px}
}
@media (max-width:480px){
  @supports (grid-template-rows: subgrid) {
    .contact > div:nth-child(n+2) > h3{margin-top:24px}
  }
}

/* Barrierefreiheit: Sprunglink, sichtbarer Fokus, ruhige Bewegung, größere Tippziele */
.skip{position:absolute;left:8px;top:-80px;z-index:300;background:#7B3F22;color:#fff;padding:10px 16px;border-radius:0 0 8px 8px;font-weight:600;text-decoration:none}
.skip:focus{top:0}
:focus-visible{outline:3px solid #7B3F22;outline-offset:2px}
header :focus-visible,footer :focus-visible,.skip:focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (pointer:coarse){
  .contact a,.anfahrt figcaption a,footer a{display:inline-block;max-width:100%;padding:11px 4px;min-height:44px;box-sizing:border-box;overflow-wrap:anywhere}
}