erben sie sonst Unterstreichung und Linkfarbe. */
a.servicio{text-decoration:none; color:inherit; display:block}
a.servicio h3::after{content:" \203A"; color:var(--leise); font-weight:400}
a.servicio:hover h3::after{color:var(--tief)}
/* Leistungsseiten ohne eigenes Foto: eine Spalte statt zwei. Ohne diese
Regel bliebe rechts eine leere Rasterspalte stehen und der Text saesse
auf der halben Breite, als fehle dort etwas. */
/* ⚠ Die Begrenzung gehoert an den TEXT, nicht an den Rastercontainer.
Der Container hat margin:0 auto -- eine max-width darauf zentriert den
ganzen Block, waehrend die Brotkrumen darueber linksbuendig bleiben.
Gesehen wurde das nur im Screenshot: die Messung meldete 0 px Ueberhang,
weil nichts ueberlief. Es stand nur alles an der falschen Stelle. */
.encabezado-servicio__int--solo{grid-template-columns:1fr}
.encabezado-servicio__int--solo > div{max-width:76ch}
/* Gewerke-Kacheln, die auf eine eigene Seite zeigen. Fuenf von sieben haben
eine; die beiden ohne bleiben und sollen genauso aussehen. */
a.gremio{text-decoration:none; color:inherit}
a.gremio b::after{content:" \203A"; color:var(--leise); font-weight:400}
a.gremio:hover b::after{color:var(--tief)}
/* ===================================================================
Kopfzeile mit echtem Logo und Menue (21.08.2026)
⚠ ANLASS (Manuel, 08:31): "ist auf mobile kein Hero? Ich sehe kein
mobile menu und das Logo ist weg". Alle drei Punkte trafen zu:
- Das Logo war nur ein Schriftzug. Die Firma HAT ein Logo (gelbes
Sechseck mit Haus und Schraubenschluessel), es lag in einem
Upload-Ordner von 2020 und tauchte in der Mediathek-Liste nicht auf.
- Die Navigation war unter 860 px auf display:none gesetzt -- OHNE
Ersatz. Auf dem Handy stand im Kopf nur der Schriftzug, sonst nichts.
Das ist kein Aufraeumen, das ist eine fehlende Navigation.
- Der Hero zeigte auf dem Handy zuerst 500 px Text, das Bild kam erst
nach dem Scrollen. Technisch da, als Hero aber nicht wahrnehmbar.
=================================================================== */
.marca{display:flex; align-items:center; flex:none}
.marca img{width:150px; height:auto}
@media(max-width:420px){.marca img{width:132px}}
/* Menue-Knopf: drei Striche, die sich beim Oeffnen zum Kreuz drehen. */
.menu-boton{
display:none; margin-left:auto; width:44px; height:44px; padding:10px;
background:transparent; border:1px solid var(--linie); border-radius:var(--radius);
cursor:pointer; flex-direction:column; justify-content:space-between;
}
.menu-boton span{
display:block; height:2px; width:100%; background:var(--tief); border-radius:2px;
transition:transform .2s ease, opacity .2s ease;
}
.menu-boton[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-boton[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-boton[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.menu-boton:focus-visible{outline:2px solid var(--zweit); outline-offset:2px}
@media(max-width:860px){
.menu-boton{display:flex}
.cabecera__int{flex-wrap:wrap; gap:0}
/* Das Menue klappt als eigene Zeile unter den Kopf. Nicht als
Vollbild-Overlay: bei fuenf Eintraegen ist das ueberzogen, und ein
Overlay muss man erst wieder schliessen. */
.nav{
display:flex; flex-direction:column; width:100%; order:3;
max-height:0; overflow:hidden; gap:0;
transition:max-height .26s ease;
}
.nav[data-abierto="true"]{max-height:420px}
.nav a{
padding:14px 2px; border-top:1px solid var(--linie); font-size:1rem;
color:var(--tief);
}
/* Der Hauptknopf gehoert ins Menue, nicht daneben: im Kopf nahm er
ueber die halbe Breite und drueckte das Logo an den Rand. */
.cabecera .boton{
display:none; order:4; width:100%; margin:12px 0 14px;
}
.nav[data-abierto="true"] ~ .boton{display:inline-flex}
}
@media(prefers-reduced-motion:reduce){
.nav{transition:none}
}
/* --- Hero auf dem Handy: erst das Bild, dann der Text ---------------
Auf dem Handy stapelt das Raster untereinander, und der Textblock ist
rund 500 px hoch. Wer die Seite oeffnet, sah eine Textwand. Mit
order:-1 steht das Bild oben und der Hero ist als solcher erkennbar.
Am DOM aendert das nichts, die H1 bleibt das erste Element im Quelltext. */
@media(max-width:900px){
.hero__medio{order:-1; margin-bottom:26px}
.hero__medio img{aspect-ratio:16/10}
.hero__int{padding-top:26px}
.hero__sello{left:8px; right:auto; bottom:-12px}
}
/* Das Siegel war auf dem Handy zu gross: es verdeckte die halbe Kueche.
Auf schmalen Geraeten deshalb einzeilig und deutlich kleiner -- es soll
das Bild ergaenzen, nicht ersetzen. */
@media(max-width:560px){
.hero__sello{
max-width:none; width:auto; padding:8px 13px; font-size:.79rem;
line-height:1.25; display:flex; align-items:baseline; gap:7px;
left:8px; right:auto; bottom:-11px;
}
.hero__sello b{display:inline; font-size:1.18rem}
}
/* Das Logo ist der Weg zurueck zur Startseite und war als Tippflaeche nur
28 px hoch. Padding statt groesserem Bild: die Flaeche waechst, das Logo
bleibt gleich gross. */
.marca{padding:8px 0}
/* Rechtstexte: eine Spalte, ruhig, gut lesbar. Kein Schmuck -- die Seite
wird gelesen, weil jemand etwas nachschlagen will. */
.legal{max-width:72ch; display:grid; gap:clamp(24px,3vw,34px)}
.legal h2{font-size:clamp(1.2rem,2.2vw,1.55rem); margin-bottom:10px}
.legal p{color:var(--text)}
.legal a{color:var(--zweit); font-weight:600}
/* Die Fusszeile bekommt jetzt Verweise auf die Rechtsseiten. */
.pie h4 + ul a{text-decoration:none}
/* Der Fuss hat jetzt vier Spalten statt drei. */
.pie__int{grid-template-columns:1.35fr 1fr 1fr 1fr}
@media(max-width:900px){.pie__int{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pie__int{grid-template-columns:1fr}}
/* --- Leistungskarten mit Bild (21.08.2026) -------------------------
⚠ Sechs der neun Karten tragen ein Foto, drei nicht -- fuer Ladenlokale,
Geschaefte und Industriehallen gibt es kein einziges echtes Bild. Statt
ein fremdes Motiv einzusetzen, bekommen diese drei eine ruhige Flaeche
in der Grundfarbe. Gleiche Hoehe, gleiche Form: das Raster bleibt
gleichmaessig, ohne etwas zu behaupten. */
.servicio{padding:0; overflow:hidden; display:flex; flex-direction:column}
.servicio__img,
.servicio__sin{
width:100%; height:170px; object-fit:cover; display:block; flex:none;
border-bottom:1px solid var(--linie);
}
.servicio__sin{
background:
repeating-linear-gradient(135deg,
var(--grund) 0 14px, #efece6 14px 28px);
}
.servicio__txt{padding:22px 24px 25px}
.servicio__txt h3{margin-bottom:8px}
.servicio__txt p{color:var(--leise); font-size:.94rem}
/* Beim Ueberfahren zieht das Bild leicht an -- ein Hinweis, dass die Karte
ein Verweis ist, ohne zusaetzliche Beschriftung. */
.servicio__img{transition:transform .3s ease}
a.servicio:hover .servicio__img{transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){.servicio__img{transition:none}}
/* ⚠ DREI Spalten, nicht vier: Es sind genau NEUN Leistungen. Bei vier
Spalten ergibt das 4+4+1 und die letzte Karte steht allein am Ende --
bei drei Spalten sind es drei volle Reihen. Die Spaltenzahl folgt hier
der Anzahl der Inhalte, nicht der verfuegbaren Breite. */
.servicios{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
@media(min-width:1000px){.servicios{grid-template-columns:repeat(3,1fr)}}
/* --- Glossar (21.08.2026) --------------------------------------------
Der Definitionskasten steht direkt unter der Ueberschrift. Wer einen
Begriff nachschlaegt, hat seine Antwort nach zwei Saetzen; alles Weitere
ist fuer die, die mehr wollen. */
.definicion{
margin-top:20px; padding:20px 24px; background:var(--flaeche);
border:1px solid var(--linie); border-left:4px solid var(--akzent);
border-radius:var(--radius); font-size:1.1rem; line-height:1.6;
color:var(--tief); max-width:62ch;
}
/* Uebersicht: nach Anfangsbuchstaben gruppiert. Bei zwanzig Eintraegen ist
das noch keine Notwendigkeit, bei hundert schon -- und die Struktur jetzt
anzulegen kostet nichts. */
.glosario-grupo{margin-top:38px}
.glosario-grupo h2{
font-size:1.5rem; padding-bottom:8px; border-bottom:2px solid var(--akzent);
display:inline-block; margin-bottom:18px;
}
.glosario-lista{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px}
.glosario-item{
display:block; padding:18px 20px; background:var(--flaeche);
border:1px solid var(--linie); border-radius:var(--radius);
text-decoration:none; color:inherit;
transition:border-color .14s ease, transform .14s ease;
}
.glosario-item:hover{border-color:var(--zweit); transform:translateY(-2px)}
.glosario-item b{display:block; color:var(--tief); font-size:1.03rem; margin-bottom:5px}
.glosario-item b::after{content:" \203A"; color:var(--leise); font-weight:400}
.glosario-item span{color:var(--leise); font-size:.9rem; line-height:1.5}
/* Sprungleiste zu den Buchstaben */
.glosario-abc{display:flex; flex-wrap:wrap; gap:7px; margin-top:26px}
.glosario-abc a{
display:inline-flex; align-items:center; justify-content:center;
min-width:38px; height:38px; padding:0 9px; border:1px solid var(--linie);
border-radius:var(--radius); text-decoration:none; color:var(--tief);
font-weight:700; background:var(--flaeche);
}
.glosario-abc a:hover{border-color:var(--zweit)}
/* --- Glossar: Inhaltsverzeichnis, Listen, Quellen ---------------------
⚠ Inhaltsverzeichnis erst ab vier Abschnitten (so steht es im
zds-Prozess). Bei zwei Abschnitten ist es laenger als der Weg, den es
abkuerzt. Die Anker sind lesbar (#como-se-instala, nicht #s-3): Wer den
Link kopiert und weiterschickt, soll daran sehen, wohin er fuehrt. */
.indice{
background:var(--flaeche); border:1px solid var(--linie);
border-radius:var(--radius); padding:20px 24px; margin-bottom:34px;
max-width:64ch;
}
.indice p{font-size:.76rem; font-weight:800; letter-spacing:.12em;
text-transform:uppercase; color:var(--leise); margin-bottom:12px}
.indice ol{margin:0; padding-left:20px; display:grid; gap:7px}
.indice a{color:var(--zweit); text-decoration:none; font-weight:600}
.indice a:hover{text-decoration:underline}
.lista-bloque{margin-top:clamp(28px,3.4vw,40px); max-width:74ch}
.lista-bloque h2{font-size:clamp(1.3rem,2.4vw,1.72rem); margin-bottom:14px}
.lista-bloque ul{margin:0; padding:0; list-style:none; display:grid; gap:11px}
.lista-bloque li{
padding-left:26px; position:relative; color:var(--text);
}
.lista-bloque li::before{
content:""; position:absolute; left:0; top:9px;
width:9px; height:9px; border-radius:2px; background:var(--akzent);
}
/* Fehlerliste bekommt ein anderes Zeichen -- eine Liste, die vor etwas
warnt, soll nicht wie eine Empfehlungsliste aussehen. */
.lista-bloque--errores li::before{
background:none; border-left:2px solid var(--fehler);
border-bottom:2px solid var(--fehler); width:8px; height:8px;
transform:rotate(-45deg); top:8px; border-radius:0;
}
.fuentes{
margin-top:clamp(30px,4vw,46px); padding-top:22px;
border-top:1px solid var(--linie); max-width:74ch;
}
.fuentes p{font-size:.76rem; font-weight:800; letter-spacing:.12em;
text-transform:uppercase; color:var(--leise); margin-bottom:12px}
.fuentes ol{margin:0; padding-left:20px; display:grid; gap:10px;
font-size:.92rem; color:var(--leise)}
.fuentes a{color:var(--zweit); font-weight:600}
/* --- Schaubilder (21.08.2026) ----------------------------------------
⚠ HTML-Karten im Grid, KEIN SVG mit fester viewBox: Ein SVG wird auf
360 px gestaucht, bis die Beschriftung bei sechs Pixeln landet.
`auto-fit` mit `minmax` bricht dagegen von selbst um.
⚠ container-type auf dem aeusseren Element, damit die Umbrueche an der
verfuegbaren BREITE haengen und nicht am Fenster. Gemessen an anderen
Seiten: bei 1440 px Fenster ist der Inhaltsbereich 748 px breit, bei
1024 px Fenster 976 px -- eine @media-Regel haengt also an der falschen
Groesse. */
.schaubild{
margin:clamp(28px,3.6vw,42px) 0; padding:0; max-width:76ch;
container-type:inline-size;
}
.sc-rejilla{
/* ⚠ 200px, nicht 230: Der Inhaltsbereich der Glossarseiten ist 678 px
breit (gemessen, nicht geschaetzt). Bei minmax(230px) passen dort nur
ZWEI Spalten -- ein Dreiervergleich, der nach zwei Spalten umbricht,
verliert genau die Gegenueberstellung, wegen der es ihn gibt.
Bei 200px sind es drei zu je 225px. */
display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:1px; background:var(--linie);
border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden;
}
.sc-col{background:var(--flaeche); padding:20px 20px 22px}
/* Die Spalte, um die es eigentlich geht, wird hervorgehoben -- aber ueber
eine Kante, nicht ueber eine farbige Flaeche hinter Text. */
.sc-col--clave{box-shadow:inset 0 3px 0 var(--akzent)}
.sc-col h3{font-size:1.05rem; margin-bottom:14px; color:var(--tief)}
.sc-fila{padding:9px 0; border-top:1px solid var(--linie)}
.sc-fila:first-of-type{border-top:0; padding-top:0}
.sc-etq{
display:block; font-size:.7rem; font-weight:800; letter-spacing:.1em;
text-transform:uppercase; color:var(--leise); margin-bottom:3px;
}
.sc-val{display:block; font-size:.93rem; line-height:1.45; color:var(--text)}
/* ⚠ DIE TRENNLINIEN MUESSEN FLUCHTEN, und eine feste Mindesthoehe schafft
das nicht. Erster Versuch war `min-height:2.9em` (zwei Zeilen). Beim
zweiten Schaubild ist eine Zelle DREIzeilig -- gemessen 19 bis 20 px
Versatz, im Screenshot als schiefe Linien sichtbar, in keiner anderen
Zahl. Eine Mindesthoehe nagelt die Linien nur fest, solange man die
laengste Zelle vorher kennt.
`subgrid` loest es richtig: Die Spalten uebernehmen das Zeilenraster des
Elterngrids, also richtet sich jede Zeile an der hoechsten Zelle DIESER
Zeile aus -- unabhaengig davon, wie lang der Text spaeter wird.
⚠ Mit @supports, damit aeltere Browser nicht leer ausgehen: dort greift
der Rueckfall mit fester Mindesthoehe, der immerhin die haeufigen
zweizeiligen Faelle ausrichtet. */
.sc-val{min-height:2.9em}
@supports (grid-template-rows: subgrid) {
.sc-rejilla{grid-auto-rows:auto}
.sc-col{
display:grid;
grid-template-rows:subgrid;
/* ⚠ Ueberschrift plus Zeilen -- die Zahl kommt vom Schaubild selbst.
Vorher stand hier fest `span 5` (vier Zeilen), weil alle Figuren vier
hatten. Das erste mit DREI Zeilen haette lautlos gebrochen: subgrid
spannt dann ueber eine Zeile, die es nicht gibt, und die Spalten
verlieren die Ausrichtung, wegen der subgrid ueberhaupt da ist.
Ein Maß, das aus dem Inhalt kommt, gehoert nicht ins Stylesheet. */
grid-row:span var(--sc-filas, 5);
}
.sc-val{min-height:0}
}
@container (max-width: 520px){
/* Einspaltig gibt es nichts auszurichten -- dort waere die Mindesthoehe
nur ein Loch unter kurzen Werten, und subgrid haette keinen Nachbarn. */
.sc-val{min-height:0}
.sc-col{display:block}
}
.schaubild figcaption{
margin-top:12px; font-size:.87rem; color:var(--leise); font-style:normal;
}
@container (max-width: 520px){
.sc-rejilla{grid-template-columns:1fr}
}
/* ── Fassadenschnitt (Waermebruecken) ──────────────────────────────────
⚠ Warum hier eine ZEICHNUNG statt Spalten: Die vier Punkte stehen nicht
nebeneinander, sondern an bestimmten Stellen eines Hauses. Ein
Spaltenvergleich wuerde die Ortsangabe wegwerfen, die die ganze Aussage
traegt.
⚠ Und warum die Beschriftung NICHT im SVG steht: Ein SVG mit fester
viewBox wird auf 360 px gestaucht, bis die Schrift bei sechs Pixeln
landet. Im Bild stehen deshalb nur Ziffern, der Text daneben ist HTML
und skaliert normal. Auf schmalem Schirm rutscht er unter die Zeichnung,
statt in ihr zu schrumpfen. */
.pt-rejilla{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
gap:22px; align-items:center;
background:var(--flaeche); border:1px solid var(--linie);
border-radius:var(--radius); padding:20px;
}
.pt-dibujo{width:100%; height:auto; display:block}
.pt-marca circle{fill:var(--tief)}
.pt-marca text{
fill:#fff; font-size:15px; font-weight:800; text-anchor:middle;
font-family:inherit;
}
.pt-lista{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.pt-item{display:grid; grid-template-columns:26px 1fr; gap:11px; align-items:start}
.pt-num{
display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
background:var(--tief); color:#fff; font-size:.8rem; font-weight:800;
/* ⚠ Die Ziffer sitzt auf der Grundlinie der ersten Textzeile, nicht am
oberen Rand des Textblocks -- sonst steht sie bei zweizeiligen
Eintraegen sichtbar zu hoch. */
margin-top:1px;
}
.pt-txt{font-size:.9rem; line-height:1.5; color:var(--text)}
.pt-txt b{display:block; color:var(--tief); font-size:.94rem; margin-bottom:2px}
@container (max-width: 560px){
/* ⚠ 560 und nicht 520 wie oben: Die Zeichnung braucht mehr Platz als eine
Textspalte, bevor sie unbrauchbar schmal wird. Der Umbruchpunkt gehoert
zum Inhalt, nicht zu einer seitenweit einheitlichen Zahl. */
.pt-rejilla{grid-template-columns:1fr; gap:18px}
.pt-dibujo{max-width:320px; margin:0 auto}
}
/* Verweis vom Glossareintrag auf die passende Leistungsseite. Ruhig
gehalten: Wer einen Begriff nachschlaegt, sucht eine Erklaerung, keine
Werbung -- das Angebot steht am Ende, nicht dazwischen. */
.cta-servicio{background:var(--flaeche); border-top:1px solid var(--linie);
border-bottom:1px solid var(--linie)}
.cta-servicio h2{font-size:clamp(1.3rem,2.4vw,1.7rem); margin-bottom:10px}
.cta-servicio .entradilla{margin-bottom:20px}
/* Wandschnitt (tabique gegen muro de carga).
⚠ Der Hinweiskasten steht bewusst OHNE Ziffer in der Reihe: Er ist kein
dritter Fall, sondern die Folgerung aus den ersten beiden. Eine "3" haette
ihn zu einem weiteren Wandtyp gemacht. */
.tb-dibujo{max-width:340px}
.pt-frei{
fill:var(--leise); font-size:11px; text-anchor:middle; font-weight:700;
letter-spacing:.04em;
}
.pt-item--nota{margin-top:3px; padding-top:13px; border-top:1px solid var(--linie)}
.pt-item--nota .pt-num{background:var(--grund); color:var(--leise); font-size:.85rem}
/* ── Textbereich zweispaltig (Manuel, 23.08.) ─────────────────────────
Gemessen bei 2560 px: Container 1440, Textspalte 678, daneben 1258 px
leer. Die Lesespalte bleibt bei 74ch -- das Inhaltsverzeichnis fuellt
die zweite Spalte und bleibt beim Scrollen stehen.
⚠ Nur wo es ein Inhaltsverzeichnis GIBT: Seiten ohne `.indice` behalten
das einspaltige Layout, sonst entsteht eine leere zweite Spalte -- also
genau das Problem, das hier behoben wird, nur andersherum. */
@media(min-width:1100px){
.seccion--texto .envoltura:has(.indice){
display:grid;
grid-template-columns:minmax(0,74ch) minmax(230px,1fr);
gap:clamp(30px,3.6vw,64px);
align-items:start;
}
/* ⚠⚠ HIER STAND `grid-row:1 / span 40` -- das erzeugt VIERZIG
Rasterzeilen, auch wenn nur drei Inhalt haben. Die leeren Zeilen
bekommen trotzdem Hoehe: Die Seite war danach 10.700 px hoch statt
rund 6.000, der Rest war weisse Flaeche.
Ohne `span` reicht eine Zeile: Die Inhalte in Spalte 1 erzeugen ihre
eigenen impliziten Zeilen, das Verzeichnis steht in Zeile 1 der
zweiten Spalte und klebt beim Scrollen. */
.seccion--texto .envoltura:has(.indice) > .indice{
grid-column:2; grid-row:1;
position:sticky; top:96px; margin:0;
border-left:2px solid var(--linie); border-top:0;
padding:2px 0 2px 18px;
}
.seccion--texto .envoltura:has(.indice) > .bloques,
.seccion--texto .envoltura:has(.indice) > .lista-bloque,
.seccion--texto .envoltura:has(.indice) > .fuentes,
.seccion--texto .envoltura:has(.indice) > figure{
grid-column:1; max-width:none;
}
.seccion--texto .envoltura:has(.indice) > .bloques{margin-top:0}
.indice ol{margin:0; padding-left:1.1em}
.indice li{margin:.34em 0; font-size:.93rem}
}
/* Ohne Inhaltsverzeichnis: die Lesespalte wenigstens zentrieren, statt sie
links kleben zu lassen. */
@media(min-width:1100px){
.seccion--texto .envoltura:not(:has(.indice)) > .bloques,
.seccion--texto .envoltura:not(:has(.indice)) > .lista-bloque,
.seccion--texto .envoltura:not(:has(.indice)) > .faq{
margin-inline:auto;
}
}