/* Handwerkerservice Muschler – im Stil seiner Visitenkarte:
   Schriftzug und Zahnrad aus dem Original-Logo (CorelDRAW 2018), Blau #25378c, Rot #ed1c24, Schrift Carlito (= Calibri der Karte). */
@font-face { font-family: Carlito; src: url(fonts/carlito-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Carlito; src: url(fonts/carlito-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Carlito; src: url(fonts/carlito-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Carlito; src: url(fonts/carlito-bolditalic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@view-transition { navigation: auto; }

:root {
  --blau: #25378c;
  --navy: #25378c;       /* für die Verwaltung */
  --blau-tief: #1b2868;
  --blass: #eef0f8;
  --rot: #ed1c24;        /* Schilder, Striche, Deko */
  --rot-text: #d0141c;   /* Schrift und Knöpfe – kräftig genug für gute Lesbarkeit */
  --rot-hell: #ff8a82;   /* Symbole auf Blau */
  --text: #2b2a3a;
  --grau: #5a5970;
  --linie: #d4d7e8;
  --r: 6px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; font: 400 1.1875rem/1.55 Carlito, Calibri, "Segoe UI", system-ui, sans-serif; color: var(--text); background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); }
h1, h2, h3 { font-weight: 700; font-style: italic; line-height: 1.08; color: var(--blau); margin: 0 0 .4em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1em; text-wrap: pretty; }
.i { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
.block { padding-block: clamp(3rem, 7vw, 4.75rem); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 99; background: #fff; padding: .5rem 1rem; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }
.umbruch { overflow-wrap: anywhere; }
.unter { font-size: 1.25rem; color: var(--grau); margin-top: -.2em; margin-bottom: 1.8rem; }
.lead { font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: #4a4960; max-width: 34em; }
.mitte { justify-content: center; }
.zr { position: absolute; pointer-events: none; z-index: 0; }

/* Knöpfe und Links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .55em 1.15em; border-radius: var(--r); border: 2px solid transparent;
  font: 700 italic 1.25rem/1.2 Carlito, Calibri, sans-serif; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; }
.btn-rot { background: var(--rot-text); color: #fff; }
.btn-rot:hover { background: #b00f16; }
.btn-rand { border-color: var(--blau); color: var(--blau); background: #fff; }
.btn-rand:hover { background: var(--blau); color: #fff; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 0; }
.mehr { display: inline-flex; align-items: center; gap: .35em; font-weight: 700; font-style: italic; color: var(--rot-text); text-decoration: none; }
.mehr:hover { text-decoration: underline; }
.mehr .i { transition: translate .2s; }
.mehr:hover .i { translate: 3px 0; }

/* Oberleiste + Kopf */
.oberleiste { background: var(--blau); color: #fff; font: 700 italic 1.05rem Carlito, Calibri, sans-serif; }
.oberleiste-in { display: flex; justify-content: flex-end; gap: 2rem; padding-block: .4rem; }
.oberleiste a { display: inline-flex; align-items: center; gap: .4em; color: #fff; text-decoration: none; }
.oberleiste .i { color: var(--rot-hell); }
.kopf { background: #fff; border-bottom: 3px solid var(--blau); position: relative; z-index: 20; }
.kopf-in { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: .9rem; }
.logo img { width: clamp(200px, 25vw, 290px); }
#nav { display: flex; align-items: center; gap: 1.6rem; position: static; inset: auto; margin: 0; padding: 0; border: 0; background: none; overflow: visible; width: auto; height: auto; }
#nav a { font: 700 italic 1.3rem Carlito, Calibri, sans-serif; color: var(--blau); text-decoration: none; padding-block: .15rem; border-bottom: 3px solid transparent; }
#nav a:hover { border-bottom-color: var(--linie); }
#nav a[aria-current] { border-bottom-color: var(--rot); }
#nav .nav-kontakt { background: var(--rot-text); color: #fff; padding: .4rem 1rem; border-radius: var(--r); border: 0; }
#nav .nav-kontakt:hover { background: #b00f16; }
.menu-btn { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; color: var(--blau); }
.menu-btn .i { width: 30px; height: 30px; }
@media (max-width: 920px) {
  .menu-btn { display: block; }
  #nav { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; padding: 5rem 1.5rem 2rem;
    background: var(--blau); flex-direction: column; align-items: stretch; gap: 0; }
  #nav:not(:popover-open) { display: none; }
  #nav a { color: #fff; font-size: 1.8rem; padding: .7rem 0; border-bottom: 1px solid rgb(255 255 255 / .15); }
  #nav a[aria-current] { border-bottom-color: rgb(255 255 255 / .15); color: var(--rot-hell); }
  #nav .nav-kontakt { margin-top: 1.5rem; text-align: center; }
  .menu-zu { position: absolute; top: 1rem; right: 1rem; color: #fff; }
}
@media (min-width: 921px) { .menu-zu { display: none !important; } }
@media (max-width: 600px) { .oberleiste-in { justify-content: center; } .ol-mail { display: none !important; } }

/* Start: Kopfbereich */
.hero { position: relative; overflow: hidden; }
.hero .zr { left: 34%; top: 2rem; width: min(540px, 70vw); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 4rem); }
.hero h1 { max-width: 17ch; }
.schilder-reihe { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.6rem; }
.schilder-reihe a { display: flex; align-items: center; gap: .8rem; font-weight: 700; font-style: italic; font-size: 1.25rem; line-height: 1.2; color: var(--blau); text-decoration: none; }
.schilder-reihe a:hover span { text-decoration: underline; }
.schilder-reihe .schild { width: 60px; }
.rahmen { position: relative; margin: 0 16px 16px 0; }
.rahmen > img:first-child { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 6px solid #fff; outline: 3px solid var(--blau); box-shadow: 16px 16px 0 var(--blau); }
.rahmen-schild { position: absolute; width: 110px; left: -38px; bottom: -30px; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .3)); }
.rahmen.klein { margin-bottom: 2rem; }
.rahmen.klein > img:first-child { box-shadow: 10px 10px 0 var(--blau); }
@media (max-width: 860px) {
  .hero-in { grid-template-columns: 1fr; }
  .rahmen { order: -1; }
  .rahmen-schild { width: 80px; left: auto; right: -10px; bottom: -24px; }
}
@media (max-width: 480px) { .schilder-reihe { grid-template-columns: 1fr; } }

/* Blaue Leiste – wie unten auf der Visitenkarte */
.blauleiste { background: var(--blau); }
.blauleiste-in { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 3.5rem; padding-block: 1.1rem; }
.blauleiste a { display: inline-flex; align-items: center; gap: .5em; color: #fff; font: 700 italic clamp(1.25rem, 3vw, 1.85rem) Carlito, Calibri, sans-serif; text-decoration: none; }
.blauleiste .i { color: var(--rot-hell); }

/* Leistungen als gerahmte Karten */
.dienste { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.dienst { display: grid; grid-template-columns: 170px minmax(0, 1fr); border: 2px solid var(--blau); border-radius: var(--r); overflow: hidden; background: #fff; }
.dienst > img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.dienst > div { padding: 1.2rem 1.4rem 1.3rem; position: relative; }
.dienst-schild { position: absolute; right: 1rem; top: 1rem; width: 54px; }
.dienst h2, .dienst h3 { font-size: 1.7rem; padding-right: 64px; margin-bottom: .3em; }
.dienst h2 a, .dienst h3 a { color: var(--blau); text-decoration: none; }
.dienst h2 a:hover, .dienst h3 a:hover { text-decoration: underline; }
.dienst p { color: var(--grau); margin-bottom: .7rem; }
.dienst.breit { grid-column: 1 / -1; grid-template-columns: 340px minmax(0, 1fr); }
.punkte { columns: 2 14rem; column-gap: 2rem; padding-left: 1.1rem; margin: 0 0 .9rem; color: var(--grau); }
.punkte li { break-inside: avoid; margin-bottom: .15rem; }
.punkte li::marker { color: var(--rot); }
@media (max-width: 860px) {
  .dienste { grid-template-columns: 1fr; }
  .dienst, .dienst.breit { grid-template-columns: 1fr; }
  .dienst > img { aspect-ratio: 16 / 9; min-height: 0; }
}

/* Blasser Bereich mit Zahnrad */
.band { background: var(--blass); position: relative; overflow: hidden; }
.band .zr { right: -9rem; top: -5rem; width: 460px; }
.band > .wrap { position: relative; z-index: 1; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 4rem); align-items: start; }
@media (max-width: 860px) { .zwei { grid-template-columns: 1fr; } }
.dreiecke { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .8rem; }
.dreiecke li { display: flex; gap: .85rem; font-weight: 700; font-style: italic; font-size: 1.3rem; line-height: 1.3; color: var(--blau); }
.dreiecke li::before { content: ""; flex: none; width: 24px; height: 21px; margin-top: .2em; background: var(--rot); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.dreiecke.spalten { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 2rem; }
.dreiecke.spalten li { font-size: 1.2rem; font-weight: 400; font-style: normal; color: var(--text); }
.dreiecke.spalten li::before { width: 17px; height: 15px; margin-top: .3em; }

/* Preise wie ein Preiszettel */
.preiszettel { background: #fff; border-top: 6px solid var(--rot); padding: 1.3rem 1.6rem 1.4rem; box-shadow: 0 12px 28px -14px rgb(27 40 104 / .35); }
.preiszettel h2 { font-size: 1.7rem; }
.preiszettel h2 small { font-size: 1rem; font-style: normal; font-weight: 400; color: var(--grau); margin-left: .5rem; }
.preiszettel dl { margin: 0 0 1rem; }
.preiszettel dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; padding: .6rem 0; border-bottom: 1px dashed var(--linie); }
.preiszettel dd { margin: 0; font-weight: 700; font-style: italic; color: var(--blau); white-space: nowrap; font-variant-numeric: tabular-nums; }
.preiszettel.gross { padding: clamp(1.3rem, 4vw, 2.2rem); }
.preise { display: grid; gap: 2rem; }
.fussnote { font-size: 1rem; color: var(--grau); }
@media (max-width: 560px) { .preiszettel dl div { flex-direction: column; gap: 0; } }

/* Partner */
.namen { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem .7rem; }
.namen li > * , .namen li { font-weight: 700; font-style: italic; color: var(--blau); }
.namen li { border: 2px solid var(--blau); border-radius: var(--r); padding: .3rem .9rem; }
.namen.gross li { padding: 0; }
.namen.gross li > * { display: inline-flex; align-items: center; gap: .5em; padding: .6rem 1.1rem; text-decoration: none; }
.namen.gross a:hover { background: var(--blau); color: #fff; }

/* Fotos */
.kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; margin-bottom: 1.4rem; }
.kopfzeile h2 { margin: 0; }
.fotoraster { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.fotoraster a { display: block; border: 4px solid #fff; outline: 2px solid var(--blau); overflow: hidden; background: var(--blass); }
.fotoraster img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale .4s; }
.fotoraster a:hover img { scale: 1.05; }
@media (max-width: 860px) { .fotoraster { grid-template-columns: repeat(2, 1fr); } }
.fotos-block { padding-top: 0; }
.partner-block + .fotos-block { padding-top: 0; }

.lightbox { border: 0; padding: 0; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; background: rgb(12 16 40 / .95); }
.lightbox::backdrop { background: transparent; }
.lightbox img { width: 100%; height: 100%; object-fit: contain; padding: 3.5rem 1rem; }
.lightbox button { position: absolute; background: rgb(255 255 255 / .12); color: #fff; border: 0; border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; font-size: 1.5rem; }
.lightbox button:hover { background: rgb(255 255 255 / .25); }
.lb-zu { top: 1rem; right: 1rem; }
.lb-zurueck { left: 1rem; top: 50%; translate: 0 -50%; }
.lb-vor { right: 1rem; top: 50%; translate: 0 -50%; }

/* Kontaktkarte im Stil der Visitenkarte */
.kontakt-block { padding-top: 0; }
.karte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 3px solid var(--blau); border-radius: 8px; overflow: hidden; }
.karte-l { padding: clamp(1.5rem, 4vw, 2.6rem); }
.karte-wm { width: min(420px, 100%); }
.karte-name { font-weight: 700; font-style: italic; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--blau); margin: .5rem 0 1rem; }
.karte-l p:last-child { color: #4a4960; margin: 0; max-width: 26em; }
.karte-r { background: var(--blau); color: #fff; padding: clamp(1.5rem, 4vw, 2.6rem); display: grid; gap: 1.2rem; align-content: center; }
.karte-r > * { display: flex; gap: .9rem; align-items: flex-start; margin: 0; color: #fff; text-decoration: none; font-weight: 700; font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.2; }
.karte-r a:hover span { text-decoration: underline; }
.karte-r small { display: block; font-size: 1rem; font-weight: 400; font-style: normal; color: #c9cdea; margin-top: .2rem; }
.karte-r .i { color: var(--rot-hell); width: 1.3em; height: 1.3em; margin-top: .05em; }
@media (max-width: 860px) { .karte { grid-template-columns: 1fr; } }

/* Unterseiten: Seitenkopf */
.seitenkopf { position: relative; overflow: hidden; background: var(--blass); border-bottom: 1px solid var(--linie); }
.seitenkopf .zr { right: -6rem; top: -7rem; width: 420px; opacity: .9; }
.seitenkopf-in { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-block: clamp(2.2rem, 5vw, 3.4rem); }
.seitenkopf h1 { margin-bottom: .3em; }
.seitenkopf .lead { margin: 0; }
.krumen { font-size: 1rem; color: var(--grau); margin-bottom: .8rem; }
.krumen a { color: var(--grau); }
.kopf-schild { width: clamp(80px, 11vw, 130px); filter: drop-shadow(0 6px 10px rgb(0 0 0 / .2)); }
@media (max-width: 600px) { .seitenkopf-in { flex-direction: column-reverse; align-items: flex-start; } }

/* Einzelne Leistung */
.leistung { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.gross-text { font-size: 1.3rem; }
.hinweis { margin-top: 1.5rem; padding: 1.1rem 1.4rem; border-left: 5px solid var(--rot); background: var(--blass); border-radius: 0 var(--r) var(--r) 0; }
.weitere { border-top: 1px solid var(--linie); padding-block: 2.5rem 1rem; }
.weitere h2 { font-size: 1.6rem; text-align: center; }
.weitere ul { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; }
.weitere a { display: flex; flex-direction: column; align-items: center; gap: .5rem; font-weight: 700; font-style: italic; font-size: 1.2rem; color: var(--blau); text-decoration: none; text-align: center; }
.weitere a:hover span { text-decoration: underline; }
.weitere .schild { width: 58px; }
@media (max-width: 860px) { .leistung { grid-template-columns: 1fr; } }

/* Eigene Seiten (Über mich) und Texte */
.seite { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.seite .preiszettel .dreiecke li { font-size: 1.15rem; }
@media (max-width: 860px) { .seite { grid-template-columns: 1fr; } }
.text { max-width: 75ch; }
.text h2 { font-size: 1.5rem; margin-top: 2rem; }
.text h3 { font-size: 1.25rem; margin-top: 1.4rem; }
.inhalt-text h2 { font-size: 1.8rem; margin-top: 2rem; }
.inhalt-text h2:first-child { margin-top: 0; }
.inhalt-text ul, .inhalt-text ol { padding-left: 1.3rem; }
.inhalt-text img { margin: 1.5rem 0; }
.inhalt-text blockquote { margin: 1.5rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--rot); background: var(--blass); }

/* Fuß */
.fuss { background: var(--blau); color: #dfe2f5; }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: center; padding-block: 2.2rem; }
.fuss-logo { display: flex; align-items: center; gap: 1rem; }
.fuss-logo img:first-child { width: 64px; }
.fuss-logo img:last-child { width: 280px; }
.fuss-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.4rem; font-weight: 700; font-style: italic; }
.fuss-kontakt { display: grid; gap: .3rem; margin: 0; font-weight: 700; font-style: italic; }
.fuss-kontakt > * { display: inline-flex; align-items: center; gap: .5em; }
.fuss-kontakt .i { color: var(--rot-hell); }
.fuss-unten { background: var(--blau-tief); color: #c9cdea; font-size: 1rem; }
.fuss-unten-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; padding-block: .8rem; }
.fuss-unten nav { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.fuss-unten a { color: #dfe2f5; }
@media (max-width: 960px) { .fuss-in { grid-template-columns: 1fr; justify-items: start; } .fuss-nav { justify-content: flex-start; } }
@media (max-width: 700px) { .fuss-unten { padding-bottom: 5rem; } }

/* Telefon/WhatsApp unten am Handy */
.mobil-leiste { display: none; }
@media (max-width: 700px) {
  .mobil-leiste { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; position: fixed; z-index: 40; left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); }
  .mobil-leiste a { display: flex; justify-content: center; align-items: center; gap: .5em; padding: .8rem; border-radius: var(--r); background: var(--rot-text); color: #fff; font-weight: 700; font-style: italic; font-size: 1.2rem; text-decoration: none; box-shadow: 0 10px 30px -6px rgb(0 0 0 / .4); }
  .mobil-leiste a + a { background: var(--blau); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.leistung-preise { margin-top: 2rem; }
.leistung-seite { position: sticky; top: 1.5rem; }

/* 404: Absperrbake mit Warnschild */
.f404 { position: relative; overflow: hidden; }
.f404 .zr { right: -8rem; top: -4rem; width: 460px; }
.f404-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 4rem); align-items: center; padding-block: clamp(3rem, 8vw, 5.5rem); }
.f404-bild { display: grid; justify-items: center; }
.f404-schild { width: min(150px, 40vw); margin-bottom: -6px; position: relative; z-index: 1; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .2)); }
.bake { width: min(360px, 100%); height: 110px; border: 4px solid #1d1c24; border-radius: 6px; display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg, var(--rot) 0 34px, #fff 34px 68px); }
.bake span { background: #fff; color: var(--blau); font: 700 italic 4rem/1 Carlito, Calibri, sans-serif; padding: .1em .35em; border: 3px solid #1d1c24; border-radius: 4px; }
.bake-fuesse { width: min(300px, 85%); display: flex; justify-content: space-between; }
.bake-fuesse i { width: 14px; height: 70px; background: #1d1c24; position: relative; }
.bake-fuesse i::after { content: ""; position: absolute; left: -26px; bottom: 0; width: 66px; height: 12px; background: #1d1c24; border-radius: 3px; }
.f404-klein { font-weight: 700; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rot-text); margin-bottom: .6rem; }
.umleitung { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.umleitung a { display: inline-flex; align-items: center; gap: .5em; background: #f6c400; color: #1d1c24; border: 3px solid #1d1c24; border-radius: 4px; padding: .5rem 1rem;
  font: 700 italic 1.25rem Carlito, Calibri, sans-serif; text-decoration: none; }
.umleitung a:hover { background: #1d1c24; color: #f6c400; }
.f404-witz { margin-top: 1.6rem; color: var(--grau); font-style: italic; }
@media (max-width: 760px) { .f404-in { grid-template-columns: 1fr; } }