/*
  ZUSATZ FÜR DIE ERZEUGTEN SEITEN (Branchen, Regionen und ihre Kombinationen), geladen nach seiten.css.
  Hier steht nur, was die handgeschriebenen Unterseiten nicht brauchen: Verzeichnisse mit vielen Verweisen,
  der Hinweiskasten, das Urteil zum Büro-Assistenten, der Kopf der beiden Übersichtsseiten.
  Farben, Schriften und Abstände kommen aus den Variablen in seiten.css.
*/

/* Buchstabe statt Werkzeug im Logo der Muster-Website und auf dem Briefkopf */
.site-logo.mono,.sheet-logo.mono{font-family:'Geist',sans-serif;font-weight:700;color:#fff;line-height:1;letter-spacing:0}
.site-logo.mono{font-size:.8rem}
.handy-top .site-logo.mono{font-size:.62rem}
.sheet-logo.mono{font-size:.95rem}

/* ---- Verzeichnis: Spalten mit Verweisen, getrennt durch Linien ---- */
.idx{columns:3;column-gap:clamp(28px,4.5vw,64px);margin-top:40px}
.idx a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;break-inside:avoid;padding:14px 0;border-top:1px solid var(--line);font-weight:500;font-size:1.02rem;color:var(--ink);transition:color .18s}
.idx a::after{content:"";flex:none;width:16px;height:10px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' stroke='%231b74f3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");transition:transform .22s var(--ease)}
.idx a:hover{color:var(--accent-press)}
.idx a:hover::after{transform:translateX(4px)}
@media(max-width:900px){.idx{columns:2}}
@media(max-width:560px){.idx{columns:1;margin-top:28px}}

/* ---- Übersichtsseiten: eine Zeile je Branche oder Stadt, rechts die Seiten dazu ---- */
.hublist{border-top:1px solid var(--line)}
.hublist>div{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--line)}
.hublist b{font-family:'Geist',sans-serif;font-weight:600;font-size:1.16rem;letter-spacing:-.02em;color:var(--ink)}
.hublist b small{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:.88rem;letter-spacing:0;color:var(--muted);margin-top:2px}
.hublist span{display:flex;flex-wrap:wrap;gap:4px 20px;justify-content:flex-end}
.hublist a{font-size:.95rem;font-weight:600;color:var(--accent);transition:color .18s}
.hublist a:hover{color:var(--accent-press);text-decoration:underline;text-underline-offset:3px}
.hublist.two{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,5vw,72px);border-top:0}
.hublist.two>div{border-top:1px solid var(--line);border-bottom:0}
@media(max-width:1000px){.hublist.two{grid-template-columns:1fr}}
@media(max-width:480px){.hublist>div{grid-template-columns:1fr}.hublist span{justify-content:flex-start}}

/* Kopf der Übersichtsseiten: rechts das Maskottchen zwischen ein paar Marken */
.hub-art{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center}
.hub-art img{position:relative;z-index:2;width:min(52%,250px);height:auto;filter:drop-shadow(0 22px 34px rgba(126,55,248,.24));animation:floatY 5.5s ease-in-out infinite}
.hub-art span{position:absolute;z-index:1;font-size:.86rem;font-weight:600;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;box-shadow:0 14px 30px -18px rgba(13,40,90,.45);white-space:nowrap}
.hub-art span:nth-of-type(1){left:3%;top:12%;transform:rotate(-4deg)}
.hub-art span:nth-of-type(2){right:2%;top:5%;transform:rotate(3deg)}
.hub-art span:nth-of-type(3){left:0;top:52%;transform:rotate(3deg)}
.hub-art span:nth-of-type(4){right:0;top:44%;transform:rotate(-3deg)}
.hub-art span:nth-of-type(5){left:10%;bottom:3%;transform:rotate(-2deg)}
.hub-art span:nth-of-type(6){right:8%;bottom:0;transform:rotate(2deg)}
@media(max-width:900px){.hub-art{display:none}}

/* ---- Hinweiskasten (Werberecht, Urteil „nicht geeignet“) ---- */
.hinweis{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,34px) clamp(22px,3.2vw,38px)}
.hinweis h3{margin:14px 0 .5em;font-size:1.36rem}
.hinweis p{color:var(--ink-soft);font-size:1.04rem;max-width:66ch}
.hinweis p+p{margin-top:.9em}
.hinweis .ref-link{margin-top:14px}
.band .hinweis{background:#fff}

/* Urteil zum Büro-Assistenten: kleine Marke über dem Text */
.urteil{display:inline-flex;align-items:center;gap:9px;font-size:.84rem;font-weight:600;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px 7px 11px;box-shadow:0 8px 18px -12px rgba(13,40,90,.35)}
.urteil::before{content:"";width:16px;height:16px;border-radius:50%;background-repeat:no-repeat;background-position:center}
.urteil.ja::before{background-image:var(--check),linear-gradient(135deg,#22c55e,#15a34a);background-size:10px,cover}
.urteil.teils::before{background:linear-gradient(90deg,#e8a020 50%,#f6dfb4 50%)}
.urteil.nein::before{background:#c3cad6;box-shadow:inset 0 0 0 5px #c3cad6,inset 0 0 0 8px #fff}
.prose .urteil{margin-bottom:20px}

/* Beispiele in der dunklen Karte: oben, was man sagt, darunter, was zurückkommt */
.mega-side dl.sagt>div{display:block}
.mega-side dl.sagt dt{font-size:1.02rem;line-height:1.35}
.mega-side dl.sagt dt small{margin-top:5px}

/* Zeilen mit Nummer: auf erzeugten Seiten ohne Verweis unter der Überschrift, die Überschrift sitzt deshalb höher */
.rows.plain .row h3{padding-top:10px}
.rows.plain{margin-top:44px}

/* Listen in Fließtext (Recht, Orte) */
.prose ul{margin:1em 0 0;padding-left:1.15em;color:var(--ink-soft);font-size:1.05rem;max-width:62ch}
.prose li+li{margin-top:.45em}

/* Lange Wörter (Schädlingsbekämpfer, Versicherungsmakler) am Handy trennen, bevor sie aus der Zeile laufen */
@media(max-width:560px){
  h1,h2,h3,.hublist b,.sayrows dt{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .phero h1,.phero h1.long{max-width:none}
}

/* Lange Firmennamen im Muster-Handy enden mit drei Punkten statt mitten im Buchstaben */
.handy-top .site-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}