/* Glashandel & Baubeschläge Igor Nagel. Charakter: Glaskante. Weiß, Anthrazit, Mattschwarz. Keine Rundung, kein Schatten. */
@font-face{font-family:"Schibsted Grotesk";src:url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("/fonts/schibsted-grotesk-latin-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
:root{--text:#1d1f21;--muted:#5b5f63;--linie:#1d1f21;--akzent:#1a1a1a;--weiss:#fff;--grau:#f3f3f1;--raum:clamp(1.25rem,4vw,3rem);--mass:38rem}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--weiss);line-height:1.55;font-size:1.0625rem}
h1,h2,h3{line-height:1.12;letter-spacing:-.015em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(1.9rem,4.5vw,3.4rem)}
h2{font-size:clamp(1.45rem,2.8vw,2.1rem);margin:0 0 .9rem}
h3{font-size:1.15rem;margin:0 0 .4rem}
p{margin:0 0 1rem;max-width:var(--mass);text-wrap:pretty}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
ul{padding-left:1.1rem}
.sprung{position:absolute;left:-999px;top:0;background:var(--weiss);padding:.5rem 1rem}
.sprung:focus{left:1rem;z-index:20}

/* Kopf */
/* Auf dem Handy NICHT klebend: durch den Umbruch der Navigation ist der Kopf
   dort 143 px hoch, das waere ein Fuenftel des Schirms, das dauerhaft
   verdeckt. Die beiden Wege, die unterwegs zaehlen - anrufen und anfragen -
   stehen ohnehin fest in der Leiste am unteren Rand. Ab 60em klebt er wieder,
   dort ist er nur 70 px hoch. */
.kopf{display:grid;grid-template-columns:1fr;align-items:center;gap:.5rem 1.5rem;padding:1rem var(--raum);border-bottom:1px solid var(--linie);background:var(--weiss);z-index:10}
.marke{font-weight:700;text-decoration:none;font-size:1.05rem;letter-spacing:-.01em}
.marke span{font-weight:400;color:var(--muted)}
/* Die Navigation lief frueher waagerecht ueber: gemessen 681 px Inhalt bei
   445 px sichtbarer Breite, also rund ein Drittel der Punkte ohne jeden
   Hinweis verborgen. Ein weicher Auslauf am Rand war als Hinweis zu leise.
   Jetzt bricht die Leiste um - alle sieben Punkte sind ohne Wischen
   erreichbar, der Kopf waechst dafuer auf dem Handy um eine Zeile. */
.kopf nav{grid-column:1/-1;min-width:0}
.kopf nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.15rem 1.15rem}
.kopf nav a{text-decoration:none;font-size:.95rem;padding:.35rem 0;display:inline-block;border-bottom:2px solid transparent}
.kopf nav a[aria-current]{border-bottom-color:var(--akzent)}
.kopf nav a:hover{border-bottom-color:var(--linie)}
.kopf-tel{text-decoration:none;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;display:none}
/* Einzeiliger Kopf erst ab 78em. Bei 60em war er es schon, obwohl er nicht
   hineinpasste: gemessen auf main ueberlappten Navigation und Telefonnummer
   zwischen 960 und 1200 px - bei 965 px um 117 px, bei 1135 px noch um 39 px.
   Genau der Bereich von iPad quer und kleinen Notebooks. Marke (307) plus
   Navigation (681) plus Telefon (133) plus Abstaende und Rand brauchen rund
   1265 px, also 79em. Darunter bleibt der Kopf zweizeilig, das traegt.
   flex-wrap bleibt auch hier erlaubt: sollte die Leiste je laenger werden,
   bricht sie um, statt sich zu ueberlagern. */
@media (min-width:78em){.kopf{grid-template-columns:auto 1fr auto;position:sticky;top:0}.kopf nav{grid-column:auto;justify-self:center}.kopf-tel{display:inline}}

/* Hero: randloses Foto, eine Zeile darüber */
.hero{position:relative}
.hero img{width:100%;height:min(56vh,52rem);object-fit:cover;object-position:22% 50%}
/* 48rem statt 52rem: die Ueberschrift bricht weiterhin auf vier Zeilen, der
   weisse Block ist aber 64 px schmaler und gibt mehr vom Foto frei. Gemessen:
   das Feld ist bei jeder Breite exakt so breit wie der Textblock, es gab hier
   also nie tote Flaeche - nur unterschiedlich lange Schlusszeilen. */
.hero-text{background:var(--weiss);padding:1.25rem var(--raum) 1.5rem;margin:-2.75rem var(--raum) 0 0;position:relative;max-width:min(48rem,92%)}
.hero-text h1{margin:0 0 .6rem}
.hero-tel{font-size:1.25rem;font-weight:700;text-decoration:none;border-bottom:2px solid var(--akzent);font-variant-numeric:tabular-nums}
@media (min-width:60em){.hero img{height:min(78vh,52rem)}.hero-text{margin-top:-6rem;padding-right:3rem}}

/* Textspalte */
.spalte{padding:calc(var(--raum)*1.2) var(--raum);max-width:calc(var(--mass) + 2*var(--raum))}
.spalte + .spalte{padding-top:0}
.einleitung{font-size:1.2rem;line-height:1.45}
.krumen{padding:1rem var(--raum) 0;font-size:.9rem;color:var(--muted)}
.krumen a{color:var(--muted)}

/* Fakten als Zweispalter mit Linien */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));border-top:1px solid var(--linie);margin:1.5rem 0 2rem}
/* Frueher stand hier max-width: calc(var(--mass) + 12rem). Der Wert war
   wirkungslos: die Elternspalte .spalte deckelt bereits bei 38rem, gemessen
   608 px statt der gemeinten 800 px. Die Breite regelt jetzt der Zusammenhang. */
.spalte .fakten{max-width:var(--mass)}
.fakten div{border-bottom:1px solid var(--linie);padding:.8rem .8rem .8rem 0}
.fakten dt{font-size:.85rem;color:var(--muted)}
.fakten dd{font-weight:700;font-size:1.1rem}

/* Auftakt: Text und Fakten nebeneinander, sobald Platz ist */
.auftakt{padding:calc(var(--raum)*1.2) var(--raum);display:grid;gap:0 calc(var(--raum)*1.8);align-items:start}
.auftakt>*{min-width:0}
.auftakt-text{max-width:var(--mass)}
.auftakt .fakten{margin-top:1.5rem}
@media (min-width:62em){
  .auftakt{grid-template-columns:minmax(0,var(--mass)) minmax(17rem,26rem);max-width:84rem}
  /* In der zweiten Spalte stehen die Fakten untereinander: ein Zweispalter
     im Zweispalter wuerde die Werte auf drei Zeilen brechen. */
  .auftakt .fakten{grid-template-columns:1fr;margin-top:.35rem}
}

/* Preise */
.preise{padding:calc(var(--raum)*1.2) var(--raum);background:var(--grau)}
.preise table{border-collapse:collapse;width:100%;max-width:44rem}
.preise th{text-align:left;font-weight:400;padding:.8rem .5rem .8rem 0;border-bottom:1px solid var(--linie);vertical-align:top}
.preise th span{display:block;font-size:.85rem;color:var(--muted)}
.preise td{text-align:right;font-weight:700;padding:.8rem 0;border-bottom:1px solid var(--linie);white-space:nowrap;vertical-align:top;font-variant-numeric:tabular-nums}
.preis-folgt{font-weight:400;color:var(--muted);font-style:italic}
.preise-hinweis{font-size:.9rem;color:var(--muted);margin-top:1rem}

/* Bilder und Projekte */
.figur{margin:0}
.figur img{width:100%;aspect-ratio:9/8;object-fit:cover}
.figur figcaption{font-size:.85rem;color:var(--muted);padding:.5rem 0 0;border-top:1px solid var(--linie);margin-top:.5rem}
.projekte-streifen{padding:calc(var(--raum)*1.2) var(--raum)}
.streifen{display:grid;gap:var(--raum);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.streifen-mehr{margin-top:1.5rem}
.vollbild{margin:0}
.vollbild img{width:100%;height:min(70vh,46rem);object-fit:cover}
.vollbild figcaption{padding:.5rem var(--raum);font-size:.85rem;color:var(--muted)}
.projektliste{display:grid;gap:calc(var(--raum)*1.5) var(--raum);grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));padding:0 var(--raum) var(--raum)}
.projektliste article h3{margin-top:.6rem}
.projektliste article p{font-size:.95rem}
.zwei{display:grid;gap:var(--raum);grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));padding:0 var(--raum) var(--raum);align-items:start}
.zwei .figur img{aspect-ratio:4/3}

/* Leistungs-Übersicht auf der Startseite: nummeriert, weil Reihenfolge nach Bedeutung */
.leistungen{padding:calc(var(--raum)*1.2) var(--raum);border-top:1px solid var(--linie)}
.leistungen ol{list-style:none;padding:0;display:grid;gap:var(--raum);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.leistungen li{border-top:1px solid var(--linie);padding-top:.8rem}
.leistungen li a{text-decoration:none;display:block}
.leistungen li a:hover h3{text-decoration:underline}
.leistungen .nr{font-size:.85rem;color:var(--muted);display:block;margin-bottom:.4rem;font-variant-numeric:tabular-nums}
.leistungen img{aspect-ratio:4/3;object-fit:cover;width:100%;margin:.6rem 0}
.leistungen p{font-size:.95rem;margin:0}

/* FAQ */
.faq{padding:calc(var(--raum)*1.2) var(--raum);max-width:calc(var(--mass) + 2*var(--raum) + 6rem)}
.faq details{border-top:1px solid var(--linie)}
.faq details:last-of-type{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;padding:.9rem 2rem .9rem 0;font-weight:700;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.75rem;font-weight:400;font-size:1.3rem}
.faq details[open] summary::after{content:"–"}
.faq details div{padding:0 0 1rem}

/* CTA */
.cta{padding:calc(var(--raum)*1.4) var(--raum);border-top:1px solid var(--linie)}
.cta p:first-child{font-size:1.3rem;font-weight:700;max-width:34rem}
.cta-wege{display:flex;flex-wrap:wrap;gap:.75rem}
.knopf{display:inline-block;background:var(--akzent);color:var(--weiss);padding:.85rem 1.25rem;text-decoration:none;font-weight:700;border:1px solid var(--akzent)}
.knopf:hover{background:var(--weiss);color:var(--akzent)}
.knopf-hell{background:var(--weiss);color:var(--akzent)}
.knopf-hell:hover{background:var(--akzent);color:var(--weiss)}

/* Kontakt */
.kontakt{display:grid;gap:var(--raum);grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));padding:0 var(--raum) var(--raum)}
.formular label{display:block;font-weight:700;margin:.9rem 0 .3rem}
.formular input,.formular textarea{width:100%;border:1px solid var(--linie);padding:.7rem;font:inherit;background:var(--weiss)}
.formular input:focus,.formular textarea:focus{outline:2px solid var(--akzent);outline-offset:0}
.formular .hinweis{font-size:.85rem;color:var(--muted)}
.formular button{margin-top:1rem}
.karte-klick{border:1px solid var(--linie);padding:1rem;margin-top:1rem}
.karte-klick p{margin-bottom:.6rem}

/* Fuß */
.fuss{border-top:1px solid var(--linie);padding:var(--raum);margin-top:var(--raum);padding-bottom:5rem}
.fuss-spalten{display:grid;gap:var(--raum);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.fuss p{font-size:.95rem}
.fuss ul{list-style:none;padding:0}
.fuss li{padding:.15rem 0}
.fuss-marke,.fuss-titel{font-weight:700}
.fuss-recht{border-top:1px solid var(--linie);margin-top:var(--raum);padding-top:1rem;font-size:.9rem}

/* Klebende Kontaktleiste mobil, 48px Bedienpunkte */
.leiste{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;z-index:10}
.leiste a{display:flex;align-items:center;justify-content:center;min-height:3.25rem;text-decoration:none;font-weight:700;background:var(--akzent);color:var(--weiss);border-top:1px solid var(--weiss)}
.leiste a+a{background:var(--weiss);color:var(--akzent);border:1px solid var(--akzent)}
@media (min-width:60em){.leiste{display:none}.fuss{padding-bottom:var(--raum)}}
[id]{scroll-margin-top:1rem}
@media (min-width:60em){[id]{scroll-margin-top:7rem}}

/* 404 und Druck */
.leer{padding:calc(var(--raum)*2) var(--raum)}
@media print{.kopf,.leiste,.cta,.fuss-recht{display:none}body{font-size:11pt}.hero img,.vollbild img{height:auto;max-height:60vh}a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}}