/* mejorando.es -- Verzeichnis (Firmen nach Gewerk und Ort).
   NW-ZDS 13.11.2026, #1674. Baut auf estilos.css der bestehenden Seite auf
   und fuehrt KEINE neuen Farben ein: warmes Grau als Grund, Gelb nur als
   Kante oder Siegel, Blaugrau fuer Zweitflaechen. Das Sechseck kommt aus
   dem Logo und markiert ueberall den amtlichen Eintrag. */

/* --- Hinweisleiste Prototyp ------------------------------------- */
.prototipo{background:var(--zweit); color:#cdd7dc; font-size:.8rem; text-align:center; padding:7px 16px}
.prototipo b{color:#fff}

/* --- Sechseck-Siegel (aus dem Logo) ----------------------------- */
.hex{
  --g:30px; width:var(--g); height:calc(var(--g)*1.1547); flex:none;
  background:var(--akzent); color:var(--tief); display:inline-grid; place-items:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.hex svg{width:55%; height:55%}
.hex--grande{--g:46px}
.oficial{display:inline-flex; align-items:center; gap:10px; font-size:.78rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--zweit)}

/* --- Suche im Hero ---------------------------------------------- */
.buscador{
  margin-top:30px; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius); box-shadow:var(--schatten);
  display:grid; grid-template-columns:1.1fr 1fr auto; gap:0; overflow:hidden;
}
.buscador label{display:block; padding:12px 18px 13px; border-right:1px solid var(--linie)}
.buscador label span{display:block; font-size:.72rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--leise); margin-bottom:3px}
.buscador select,.buscador input{
  width:100%; border:0; padding:0; font:inherit; font-size:1.02rem; font-weight:600;
  color:var(--tief); background:transparent; outline:none;
}
.buscador .boton{border-radius:0; margin:0; padding-inline:30px}
.buscador label:focus-within{box-shadow:inset 0 -3px 0 var(--akzent)}
@media(max-width:700px){
  .buscador{grid-template-columns:1fr}
  .buscador label{border-right:0; border-bottom:1px solid var(--linie)}
}
.frecuentes{margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:.86rem; color:var(--leise)}
.frecuentes a{
  border:1px solid var(--linie); background:var(--flaeche); border-radius:999px;
  padding:5px 13px; text-decoration:none; color:var(--tief); font-weight:600;
}
.frecuentes a:hover{border-color:var(--tief)}

/* --- Beispielkarte im Hero (statt Foto auf dem Handy oben) ------- */
.muestra{position:relative}
.muestra__foto{border-radius:var(--radius); box-shadow:var(--schatten); width:100%;
  aspect-ratio:4/3; object-fit:cover}
.muestra__ficha{
  position:absolute; left:-22px; bottom:-26px; width:min(360px,88%);
  background:var(--flaeche); border:1px solid var(--linie); border-top:3px solid var(--akzent);
  border-radius:var(--radius); box-shadow:var(--schatten); padding:18px 20px 16px;
}
.muestra__ficha .oficial{margin-bottom:10px}
.muestra__ficha h3{font-size:1rem; margin-bottom:10px}
.dato{display:grid; grid-template-columns:118px 1fr; gap:10px; padding:6px 0;
  border-top:1px solid var(--linie); font-size:.86rem}
.dato dt{color:var(--leise); margin:0}
.dato dd{margin:0; color:var(--tief); font-weight:600; overflow-wrap:anywhere}
@media(max-width:900px){
  .muestra{order:-1; margin-bottom:58px}
  .muestra__ficha{left:12px; bottom:-48px}
}

/* --- Zahlenband --------------------------------------------------- */
.cifras{border-block:1px solid var(--linie); background:var(--grund)}
.cifras__int{max-width:var(--breit); margin:0 auto; padding-inline:clamp(20px,4vw,64px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cifra{padding:26px 0 26px clamp(0px,2vw,24px); border-left:1px solid var(--linie)}
.cifra:first-child{border-left:0; padding-left:0}
@media(max-width:860px){.cifra{border-left:0; padding-left:0; border-top:1px solid var(--linie)}
  .cifra:first-child{border-top:0}}
.cifra b{display:block; font-size:clamp(1.9rem,3.6vw,2.6rem); font-weight:800; color:var(--tief);
  letter-spacing:-.03em; line-height:1.05}
.cifra span{color:var(--leise); font-size:.92rem}
.cifra small{display:block; color:var(--leise); font-size:.76rem; margin-top:6px}

/* --- Gewerke ----------------------------------------------------- */
.oficios{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-top:36px}
.oficio{
  display:flex; gap:15px; align-items:center; padding:18px 20px; text-decoration:none;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  transition:border-color .14s ease, transform .14s ease;
}
a.oficio:hover{border-color:var(--tief); transform:translateY(-2px)}
.oficio b{display:block; color:var(--tief); font-size:1.02rem}
.oficio span{color:var(--leise); font-size:.87rem}
.oficio--pronto{background:transparent; border-style:dashed}
.oficio--pronto b{color:var(--leise)}
.oficio--pronto .hex{background:var(--linie); color:var(--leise)}

/* --- Orte --------------------------------------------------------- */
.municipios{margin-top:30px; columns:4 210px; column-gap:28px; list-style:none; padding:0}
.municipios li{break-inside:avoid; border-bottom:1px solid var(--linie)}
.municipios a{display:flex; justify-content:space-between; padding:11px 2px; text-decoration:none;
  color:var(--tief); font-weight:600}
.municipios a span{color:var(--leise); font-weight:400; font-variant-numeric:tabular-nums}
.municipios a:hover{color:var(--zweit); text-decoration:underline}

/* --- Liste Gewerk x Ort ----------------------------------------- */
.listado{display:grid; grid-template-columns:270px 1fr; gap:clamp(24px,3.4vw,44px); align-items:start}
@media(max-width:960px){.listado{grid-template-columns:1fr}}
.filtros{position:sticky; top:86px; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius); padding:20px}
@media(max-width:960px){.filtros{position:static}}
.filtros h2{font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--leise);
  font-weight:800; margin:0 0 10px}
.filtros fieldset{border:0; margin:0 0 20px; padding:0}
.filtros label{display:flex; gap:10px; align-items:center; padding:6px 0; font-size:.93rem; cursor:pointer}
.filtros input{accent-color:var(--tief); width:17px; height:17px}
.filtros select{width:100%; padding:10px 12px; border:1px solid var(--linie); border-radius:var(--radius);
  font:inherit; font-size:.93rem; background:var(--grund)}
.orden{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:.88rem; color:var(--leise); margin-bottom:14px}
.orden b{color:var(--tief)}

.empresas{display:grid; gap:12px; list-style:none; margin:0; padding:0}
.empresa{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:20px 22px; display:grid; grid-template-columns:auto 1fr auto; gap:16px 18px; align-items:start}
.empresa:hover{border-color:#cfcac0}
.empresa h3{font-size:1.06rem}
.empresa h3 a{text-decoration:none}
.empresa h3 a:hover{text-decoration:underline}
.empresa__meta{color:var(--leise); font-size:.86rem; margin-top:4px}
.empresa__meta code{font-family:inherit; font-size:.82rem; color:var(--zweit); font-weight:600}
.empresa__acciones{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.empresa__acciones .boton{padding:9px 16px; font-size:.9rem}
.etiquetas{grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none}
.etiquetas li{font-size:.8rem; padding:4px 10px; border-radius:999px; background:var(--grund);
  border:1px solid var(--linie); color:var(--text)}
.etiquetas li.mas{background:transparent; color:var(--leise)}
@media(max-width:640px){
  .empresa{grid-template-columns:auto 1fr}
  .empresa__acciones{grid-column:1 / -1; flex-direction:row}
  .empresa__acciones .boton{flex:1}
  .etiquetas{grid-column:1 / -1}
}
.paginas{display:flex; gap:6px; margin-top:24px; flex-wrap:wrap}
.paginas a,.paginas span{min-width:42px; height:42px; display:grid; place-items:center; padding:0 12px;
  border:1px solid var(--linie); border-radius:var(--radius); text-decoration:none; font-weight:600;
  background:var(--flaeche); font-size:.92rem}
.paginas [aria-current]{background:var(--tief); color:#fff; border-color:var(--tief);
  box-shadow:inset 0 -3px 0 var(--akzent)}

/* Schloss fuer gesperrte Kontaktdaten */
.candado{width:15px; height:15px; flex:none}

/* --- Firmenprofil ------------------------------------------------- */
.perfil{display:grid; grid-template-columns:1fr 360px; gap:clamp(26px,4vw,52px); align-items:start}
@media(max-width:960px){.perfil{grid-template-columns:1fr}}
.perfil__bloque{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:clamp(20px,2.6vw,30px); margin-bottom:18px}
.perfil__bloque h2{font-size:clamp(1.15rem,2vw,1.4rem); margin-bottom:14px}
.habilitaciones{list-style:none; margin:0; padding:0; display:grid; gap:0}
.habilitaciones li{display:flex; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--linie)}
.habilitaciones li:first-child{border-top:0}
.habilitaciones .hex{--g:22px}
.vacio{border:1px dashed var(--linie); border-radius:var(--radius); padding:22px; text-align:center;
  color:var(--leise); background:var(--grund)}
.vacio a{color:var(--zweit); font-weight:700}
.registro{margin:0}
.registro .dato{grid-template-columns:150px 1fr; font-size:.93rem; padding:10px 0}
.registro .dato:first-child{border-top:0}
.fuente{margin-top:16px; padding:14px 16px; background:var(--grund); border-left:3px solid var(--akzent);
  font-size:.86rem; color:var(--leise); border-radius:0 var(--radius) var(--radius) 0}
.fuente b{color:var(--tief)}
.acciones-ficha{margin-top:14px; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.88rem}
.acciones-ficha a{color:var(--zweit); font-weight:700}

.contacto-ficha{position:sticky; top:86px; background:var(--flaeche); border:1px solid var(--linie);
  border-top:3px solid var(--akzent); border-radius:var(--radius); box-shadow:var(--schatten); padding:24px}
@media(max-width:960px){.contacto-ficha{position:static}}
.contacto-ficha h2{font-size:1.2rem}
.contacto-ficha > p{color:var(--leise); font-size:.92rem; margin-top:6px}
.oculto{margin:18px 0; display:grid; gap:0}
.oculto div{display:grid; grid-template-columns:92px 1fr; gap:10px; align-items:center;
  padding:11px 0; border-top:1px solid var(--linie); font-size:.9rem}
.oculto dt{color:var(--leise); margin:0}
.oculto dd{margin:0; display:flex; align-items:center; gap:8px; color:var(--leise)}
/* Platzhalter statt echter Daten: Balken, kein unscharfer Text. Unscharfer
   Text steht trotzdem im Quelltext und waere auslesbar. */
.oculto dd i{display:block; height:10px; border-radius:5px; background:var(--linie); flex:1; max-width:150px}
.contacto-ficha .boton{width:100%}
.contacto-ficha .boton + .boton{margin-top:10px}
.contacto-ficha small{display:block; margin-top:12px; color:var(--leise); font-size:.8rem; text-align:center}

.parecidas{display:grid; gap:10px; margin-top:4px; list-style:none; padding:0}
.parecidas a{display:block; padding:12px 14px; border:1px solid var(--linie); border-radius:var(--radius);
  text-decoration:none; background:var(--flaeche)}
.parecidas a:hover{border-color:var(--tief)}
.parecidas b{display:block; color:var(--tief); font-size:.93rem}
.parecidas span{color:var(--leise); font-size:.84rem}

/* --- Profis ------------------------------------------------------- */
.hero--oscuro{background:var(--zweit); border-bottom:0; color:#e8ecee}
.hero--oscuro h1{color:#fff}
.hero--oscuro .rotulo{color:#a9b8c0}
.hero--oscuro .hero__sub{color:#cdd7dc}
.hero--oscuro .boton--secundario{color:#fff; border-color:#4a5b64}
.hero--oscuro .boton--secundario:hover{border-color:#fff}
.hero--oscuro .boton--principal{background:var(--akzent); color:var(--tief); border-bottom-color:#d9b31a}
.hero--oscuro .boton--principal:hover{background:#ffe066}
.contador{background:#fff; color:var(--tief); border-radius:var(--radius); padding:26px 28px;
  box-shadow:var(--schatten); max-width:420px; border-top:3px solid var(--akzent); margin-top:24px}
.contador b{display:block; font-size:clamp(2.4rem,5vw,3.4rem); font-weight:800; letter-spacing:-.03em; line-height:1}
.contador p{color:var(--leise); margin-top:10px; font-size:.95rem}

.planes{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:34px}
.plan{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:26px 24px; display:flex; flex-direction:column}
.plan--clave{border-top:3px solid var(--akzent); box-shadow:var(--schatten)}
.plan h3{font-size:1rem; text-transform:uppercase; letter-spacing:.1em; color:var(--leise)}
.plan__precio{margin:12px 0 4px; font-size:2.4rem; font-weight:800; color:var(--tief); letter-spacing:-.03em}
.plan__precio small{font-size:.9rem; font-weight:600; color:var(--leise); letter-spacing:0}
.plan ul{list-style:none; margin:16px 0 22px; padding:0; display:grid; gap:9px; flex:1}
.plan li{padding-left:24px; position:relative; font-size:.94rem}
.plan li::before{content:""; position:absolute; left:0; top:.55em; width:12px; height:3px; background:var(--akzent); border-radius:2px}
.aviso-precios{display:inline-block; margin-top:12px; font-size:.84rem; color:var(--leise);
  border:1px dashed var(--linie); padding:5px 12px; border-radius:var(--radius)}

.reclamar{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,58px); align-items:start}
@media(max-width:860px){.reclamar{grid-template-columns:1fr}}
.opciones{display:flex; gap:10px; flex-wrap:wrap}
.opciones label{flex:1; min-width:150px; border:1px solid var(--linie); border-radius:var(--radius);
  padding:12px 14px; display:flex; gap:10px; align-items:center; cursor:pointer; font-weight:600; font-size:.94rem}
.opciones label:has(input:checked){border-color:var(--tief); box-shadow:inset 0 -3px 0 var(--akzent)}
.opciones input{accent-color:var(--tief)}

/* --- Anmeldedialog ------------------------------------------------- */
dialog.acceso{border:0; border-radius:var(--radius); padding:0; width:min(440px,calc(100% - 32px));
  box-shadow:0 20px 60px rgba(26,25,23,.3); color:var(--text)}
dialog.acceso::backdrop{background:rgba(26,25,23,.55)}
.acceso__int{padding:28px 28px 24px; border-top:3px solid var(--akzent)}
.acceso h2{font-size:1.35rem; margin:14px 0 8px}
.acceso p{color:var(--leise); font-size:.94rem}
.acceso form{margin-top:18px}
.acceso .boton{width:100%}
.acceso__cerrar{position:absolute; right:10px; top:10px; width:40px; height:40px; border:0; background:transparent;
  font-size:1.5rem; line-height:1; cursor:pointer; color:var(--leise); border-radius:var(--radius)}
.acceso__cerrar:hover{color:var(--tief); background:var(--grund)}
.acceso small{display:block; margin-top:12px; color:var(--leise); font-size:.8rem}

/* --- Kleinkram ----------------------------------------------------- */
.cabecera .entrar{color:var(--tief); font-weight:700; text-decoration:none; font-size:.93rem; margin-left:6px}
@media(max-width:860px){.cabecera .entrar{display:none}}
.titulo-lista{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap}
.enlace-flecha{color:var(--zweit); font-weight:700; text-decoration:none}
.enlace-flecha:hover{text-decoration:underline}
.pie__datos{margin-top:14px; font-size:.82rem; line-height:1.5; max-width:46ch}

/* --- Handy-Korrekturen nach Sichtpruefung (390 px, 13.11.) ----------
   1. Startseite: Die Beispielkarte deckte das Foto fast ganz zu. Unter
      900 px sitzt sie deshalb unter dem Foto und ueberlappt nur den Rand.
   2. Profil: Der Kontaktblock ist der Zweck der Seite, stand auf dem Handy
      aber nach drei langen Bloecken. Er rueckt nach oben, die aehnlichen
      Firmen bleiben unten.
   3. Liste: Die Filter nahmen vor dem ersten Treffer 330 px ein. Unter
      960 px werden sie zu einer waagerecht wischbaren Chipreihe.
   4. Registernummern brachen am Bindestrich um. */
@media(max-width:900px){
  .muestra{margin-bottom:0}
  .muestra__ficha{position:relative; left:auto; bottom:auto; width:auto; margin:-36px 12px 0}
}
@media(max-width:960px){
  .perfil > aside{display:contents}
  .contacto-ficha{order:-1}
  .filtros{padding:14px 0; background:transparent; border:0}
  .filtros h2{display:none}
  .filtros fieldset{display:flex; gap:8px; overflow-x:auto; margin-bottom:12px; padding-bottom:4px; scrollbar-width:none}
  .filtros fieldset label{flex:none; border:1px solid var(--linie); background:var(--flaeche);
    border-radius:999px; padding:7px 14px; font-size:.86rem; font-weight:600}
  .filtros fieldset label:has(input:checked){border-color:var(--tief); box-shadow:inset 0 -2px 0 var(--akzent)}
  .filtros fieldset label{position:relative}
  .filtros fieldset input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none}
}
.empresa__meta code,.registro dd,.muestra__ficha dd{word-break:keep-all}
.empresa__meta code{white-space:nowrap}
/* Ein fieldset hat von Haus aus min-inline-size:min-content. Die wischbare
   Chipreihe drueckte dadurch die ganze Spalte auf ihre volle Laenge, und die
   Liste lief 160 px ueber den Rand. */
.listado > *,.filtros fieldset{min-width:0}
/* Profil: die nicht umbrechende Registernummer schob die Spalte 2 px ueber
   den Rand. Spalte darf schrumpfen, Beschriftung wird auf dem Handy schmaler. */
.perfil > *{min-width:0}
@media(max-width:480px){.registro .dato{grid-template-columns:112px 1fr}}