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)}