@charset "UTF-8";
/* ============================================================
   Anicom Redesign — Stylesheet (Phase 2)
   Wird von index_new.jsp geladen. Wächst pro Sektion.
   Nur additiv — greift NICHT in w3pro/w3theme ein.
   ============================================================ */

:root{
  --ani-red:#d30e45;
  --ani-red-soft:#fce8ec;
  --ani-red-ink:#a3102f;
  --ani-red-deep:#8b0d28;
  --ink:#0f0e0c;
  --ink-2:#3a342c;
  --ink-3:#6a6458;
  --ink-4:#9a9490;
  --paper:#ffffff;
  --cream:#fbf9f3;
  --border:#ece5d2;
  --r-card:14px;
  --r-pill:100px;
  --r-sm:8px;
  --r-md:10px;
  --shadow-card:0 1px 2px rgba(40,30,10,.03), 0 6px 14px -8px rgba(40,30,10,.06);
}

/* Scope: alle Redesign-Bausteine leben unter .anc-new,
   damit nichts mit den bestehenden w3-* Styles kollidiert. */
.anc-new{
  margin:0;
  padding:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}
.anc-new *{box-sizing:border-box;}
.anc-wrap{max-width:1200px;margin:0 auto;padding:0 40px;}
.anc-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ani-red);display:flex;align-items:center;gap:10px;
}
.anc-ix{
  display:inline-block;font-size:10px;font-weight:600;letter-spacing:.1em;
  color:var(--ink-4);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:3px 9px;background:var(--paper);text-transform:uppercase;
}
.anc-h2{
  font-size:clamp(28px,3.4vw,46px);font-weight:800;letter-spacing:-.02em;
  line-height:1.05;margin:14px 0 0;
}
.anc-lead{color:var(--ink-3);font-size:16px;max-width:56ch;margin-top:14px;}

/* ============================================================
   AGENDA  (Variante A — eigene Sektion nach Hero)
   Datenquelle: command.wbKontextAgenda{Messe,Tagung,Event}Objekte
   ============================================================ */
/* Layout: Dense Info-Cards (V3) — 3 Spalten, Karte gefüllt:
   Icon + Kategorie / Datum / Titel / Teaser(newsText) / Footer-Link.
   Footer sitzt via margin-top:auto immer bündig unten, auch bei leerem Teaser. */
.ag-sec{padding:74px 0;background:var(--paper);border-bottom:1px solid var(--border);}
.ag-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;}
.ag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;}

.ag-card{
  display:flex;flex-direction:column;gap:12px;
  background:var(--cream);border:1px solid var(--border);border-radius:var(--r-card);
  padding:20px;text-decoration:none;color:inherit;transition:.18s;cursor:pointer;
}
.ag-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:#dcd3bd;}

.ag-top{display:flex;align-items:center;justify-content:space-between;}
.ag-ico{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--paper);border:1px solid var(--border);color:var(--ani-red);font-size:14px;
}
.ag-cat{
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);
}
.ag-cat.messe{background:var(--ani-red-soft);color:var(--ani-red-ink);}
.ag-cat.tagung{background:#eef1ec;color:#425137;}
.ag-cat.event{background:var(--ink);color:#fff;}

.ag-date{font-size:12px;font-weight:700;color:var(--ani-red);letter-spacing:.02em;}
.ag-title{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.18;}
.ag-text{font-size:13px;color:var(--ink-3);}
.ag-more{
  display:flex;align-items:center;gap:6px;margin-top:auto;
  font-size:12px;font-weight:600;color:var(--ani-red);
  padding-top:12px;border-top:1px solid var(--border);
}
.ag-card:hover .ag-more{gap:9px;}

@media(max-width:900px){.ag-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:820px){
  .anc-wrap{padding:0 22px;}
  .ag-grid{grid-template-columns:1fr;}
}

/* ============================================================
   JOBS  (Variante A — Kultur-Split + Accordion)
   Inhalt/Beschriebe stammen 1:1 aus home_detail.jsp.
   ============================================================ */
.jb-sec{padding:74px 0;background:var(--cream);border-bottom:1px solid var(--border);}
.jb-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:44px;align-items:start;}
.jb-intro .anc-h2{margin-top:12px;}
.jb-lead{color:var(--ink-3);font-size:15px;line-height:1.65;margin-top:16px;}
.jb-img{width:100%;height:auto;border-radius:var(--r-card);margin-top:22px;box-shadow:var(--shadow-card);display:block;}
.jb-cc{margin-top:44px;}
.jb-cc-frame{border:none;width:100%;height:820px;display:block;border-radius:var(--r-card);background:var(--paper);}
@media(max-width:700px){.jb-cc-frame{height:1050px;}}
.jb-acc{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--paper);}
.jb-row{border-bottom:1px solid var(--border);}
.jb-row:last-child{border-bottom:0;}
.jb-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:transparent;border:0;font-family:inherit;cursor:pointer;
  padding:16px 20px;font-size:15px;font-weight:600;color:var(--ink);text-align:left;}
.jb-head:hover{background:var(--cream);}
.jb-name{display:flex;align-items:baseline;gap:12px;}
.jb-num{font-size:12px;font-weight:700;color:var(--ink-4);}
.jb-chev{flex:0 0 auto;width:18px;height:18px;color:var(--ink-4);transition:transform .2s,color .2s;}
.jb-body{display:none;padding:2px 20px 18px 52px;font-size:13.5px;color:var(--ink-3);line-height:1.62;}
.jb-body p{margin:0;}
.jb-row.is-open .jb-head{color:var(--ani-red);}
.jb-row.is-open .jb-chev{transform:rotate(180deg);color:var(--ani-red);}
.jb-row.is-open .jb-body{display:block;}
@media(max-width:820px){
  .jb-wrap{grid-template-columns:1fr;gap:26px;}
  .jb-body{padding-left:20px;}
}

/* ============================================================
   KONTAKT  (Variante A — Split · Info-Panel + Formular)
   Formular bindet an OnlineFormularDTO (KontaktantragController).
   ============================================================ */
.kf-sec{padding:74px 0;background:var(--paper);border-bottom:1px solid var(--border);}
.kf-split{display:grid;grid-template-columns:.8fr 1.2fr;background:var(--paper);
  border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card);}
.kf-info{background:var(--ani-red);color:#fff;padding:34px;}
.kf-eyebrow{color:#fff;}
.kf-title{color:#fff;margin-top:12px;font-size:28px;}
.kf-info-lead{color:rgba(255,255,255,.88);font-size:14px;line-height:1.55;margin-top:14px;}
.kf-locs{margin-top:26px;display:flex;flex-direction:column;gap:0;}
.kf-loc{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1px solid rgba(255,255,255,.22);padding:13px 0;}
.kf-loc .c{font-weight:700;font-size:14px;}
.kf-loc .p{font-size:13px;color:#fff;text-decoration:none;opacity:.92;}
.kf-loc .p:hover{text-decoration:underline;}

.kf-form{padding:34px;}
.kf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.kf-form .field{display:flex;flex-direction:column;gap:6px;}
.kf-form .kf-full{margin-top:14px;}
.kf-form label{font-size:12px;font-weight:600;color:var(--ink-2);}
.kf-form input,.kf-form select,.kf-form textarea{
  font-family:inherit;font-size:14px;color:var(--ink);background:var(--paper);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;width:100%;}
.kf-form input:focus,.kf-form select:focus,.kf-form textarea:focus{
  outline:2px solid var(--ani-red-soft);border-color:var(--ani-red);}
.kf-form textarea{resize:vertical;}
.kf-plzort{display:grid;grid-template-columns:90px 1fr;gap:8px;}
.kf-err{display:block;color:var(--ani-red-ink);font-size:12px;font-weight:600;}
.kf-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:20px;}
.kf-btn-submit{font-family:inherit;font-size:14px;font-weight:700;color:#fff;background:var(--ani-red);
  border:0;border-radius:var(--r-pill);padding:13px 26px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
.kf-btn-submit:hover{background:var(--ani-red-ink);}
.kf-arr{width:15px;height:15px;}
.kf-btn-reset{font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-2);background:transparent;
  border:1px solid var(--border);border-radius:var(--r-pill);padding:12px 22px;cursor:pointer;}
.kf-btn-reset:hover{background:var(--cream);}
@media(max-width:820px){
  .kf-split{grid-template-columns:1fr;}
  .kf-grid{grid-template-columns:1fr;}
}

/* ============================================================
   HEADER  (Floating Pill — 4 Coves: Logo/Nav/Login/Sprache)
   Markup: header_new.jsp. Login -> Spring Security.
   CSS 1:1 aus Desktop-Vorlage uebernommen.
   ============================================================ */
.fh-b{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;
  padding:0;border-radius:var(--r-pill);
  background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:none;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.20);
  display:flex;align-items:stretch;white-space:nowrap;overflow:hidden;
  transition:box-shadow .25s ease;}
.fh-b.stuck{box-shadow:0 6px 20px -8px rgba(15,12,8,.25),0 14px 40px -12px rgba(15,12,8,.18);}
.fh-b .fh-logo-cove{background:#fff;display:flex;align-items:center;padding:8px 22px;flex-shrink:0}
.fh-b .fh-logo-b{height:22px;width:auto;display:block;flex-shrink:0}
.fh-b .fh-dark{display:flex;align-items:center;gap:18px;padding:8px 22px;
  background:rgba(15,12,8,.40);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:background .25s ease;}
.fh-b.stuck .fh-dark{background:rgba(15,12,8,.65)}
.fh-b .fh-nav{position:relative}
.fh-b .fh-nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
.fh-b .fh-nav li{font-size:13px;color:rgba(255,255,255,.92);cursor:pointer;font-weight:500;letter-spacing:-.005em;display:inline-flex;align-items:center;gap:4px;position:relative;transition:color .15s ease}
.fh-b .fh-nav li:hover{color:#fff}
.fh-b .fh-nav li.has-sub{padding-right:2px}
.fh-b .fh-nav li .cv{font-size:9px;opacity:.7;transition:transform .2s ease}
.fh-b .fh-nav li.open .cv{transform:rotate(180deg);opacity:1}
.fh-b .fh-nav li.act{color:#fff}
.fh-b .fh-nav li.act::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--ani-red);margin-right:6px}
.fh-b .fh-dark .kontakt{font-size:13px;color:rgba(255,255,255,.92);font-weight:500;
  text-decoration:none;cursor:pointer;letter-spacing:-.005em;
  transition:color .15s ease;}
.fh-b .fh-dark .kontakt:hover{color:#fff}
.fh-b .fh-login-cove{background:#fff;
  display:flex;align-items:center;
  padding:8px 12px;
  flex-shrink:0;}
.fh-b .fh-login-cove .login-inline{display:flex;align-items:center;}
.fh-b .fh-login-cove .login-fields{display:flex;align-items:center;gap:5px;
  max-width:0;overflow:hidden;opacity:0;
  margin-right:0;
  transition:max-width .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease,margin-right .35s ease;}
.fh-b .fh-login-cove.expanded .login-fields{max-width:280px;opacity:1;margin-right:6px;}
.fh-b .fh-login-cove input{height:28px;padding:0 11px;
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:6px;
  font-family:inherit;font-size:12px;font-weight:500;color:var(--ink);letter-spacing:-.005em;
  width:118px;outline:none;
  transition:background .2s ease,border-color .2s ease;}
.fh-b .fh-login-cove input::placeholder{color:var(--ink-4)}
.fh-b .fh-login-cove input:focus{background:#fff;
  border-color:var(--ani-red);}
.fh-b .fh-login-cove .login-trigger{width:30px;height:30px;border-radius:50%;
  background:var(--ani-red);color:#fff;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px -4px rgba(211,14,69,.5);
  flex-shrink:0;position:relative;
  transition:transform .15s ease,box-shadow .15s ease;}
.fh-b .fh-login-cove .login-trigger:hover{transform:translateY(-1px);
  box-shadow:0 6px 16px -4px rgba(211,14,69,.6);}
.fh-b .fh-login-cove .login-trigger svg{width:15px;height:15px;stroke-width:2;
  position:absolute;
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1);}
.fh-b .fh-login-cove .login-trigger .ic-user{opacity:1;transform:scale(1) rotate(0deg)}
.fh-b .fh-login-cove .login-trigger .ic-arrow{opacity:0;transform:scale(.6) rotate(-90deg)}
.fh-b .fh-login-cove.expanded .login-trigger .ic-user{opacity:0;transform:scale(.6) rotate(90deg)}
.fh-b .fh-login-cove.expanded .login-trigger .ic-arrow{opacity:1;transform:scale(1) rotate(0deg)}
.fh-b .fh-red{background:var(--ani-red);
  display:flex;align-items:center;
  padding:8px 18px;flex-shrink:0;}
.fh-b .fh-red .lang{font-size:11.5px;color:rgba(255,255,255,.75);font-weight:500;letter-spacing:.5px;font-feature-settings:"tnum"}
.fh-b .fh-red .lang a{color:rgba(255,255,255,.65);text-decoration:none;cursor:pointer;transition:color .15s ease;padding:0 2px}
.fh-b .fh-red .lang a:hover{color:#fff}
.fh-b .fh-red .lang a.on{color:#fff;font-weight:700}
.fh-b .fh-red .lang .div{color:rgba(255,255,255,.35);margin:0 2px}
.fh-sub{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:240px;
  background:rgba(15,12,8,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  box-shadow:0 12px 40px -10px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.20);
  padding:10px;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  list-style:none;
  z-index:200;}
.fh-nav li.open .fh-sub{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
/* Unsichtbare Bruecke ueber die 14px-Luecke zwischen Menuepunkt und Dropdown:
   verhindert, dass das Menu beim Runterfahren mit der Maus zuklappt. */
.fh-sub::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.fh-nav li.has-sub{padding-bottom:2px}
.fh-sub li{display:flex !important;align-items:center;
  padding:9px 14px;color:rgba(255,255,255,.85) !important;font-size:13px;font-weight:500;
  border-radius:8px;cursor:pointer;letter-spacing:-.005em;
  transition:background .15s ease,color .15s ease;
  white-space:nowrap;}
.fh-sub li:hover{background:rgba(211,14,69,.18);color:#fff !important}
.fh-sub li::before{display:none !important}
.fh-sub li::after{content:"\2192";margin-left:auto;padding-left:18px;
  color:rgba(255,255,255,.35);font-size:13px;
  transition:transform .15s ease,color .15s ease;}
.fh-sub li:hover::after{color:#ffd4df;transform:translateX(3px)}

/* Header-Override: Dropdown darf aus der Pill herausragen.
   Statt overflow:hidden auf .fh-b runden wir die beiden End-Coves. */
.fh-b{overflow:visible;}
.fh-b .fh-logo-cove{border-radius:var(--r-pill) 0 0 var(--r-pill);}
.fh-b .fh-red{border-radius:0 var(--r-pill) var(--r-pill) 0;}
/* Submenu vertikal (die generische .fh-nav ul{display:flex} greift sonst auch hier) */
.fh-b .fh-nav ul.fh-sub{display:block;}

/* ============================================================
   HERO  (hero-b) — statisch, App-Card-Overlay + Phone-Mock
   CSS 1:1 aus Desktop-Vorlage (alles unter .hero-b gescopt).
   ============================================================ */
.hero-b{position:relative;overflow:hidden;height:780px}
.hero-b .bg{position:absolute;inset:0;background-image:url('../img/bgimage-mastjager.jpg');background-size:cover;background-position:center}
.hero-b .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,8,.55) 0%,rgba(15,12,8,0) 30%,rgba(15,12,8,0) 50%,rgba(15,12,8,.65) 100%)}
.hero-b .content{position:absolute;left:64px;right:64px;bottom:56px;z-index:3;display:grid;grid-template-columns:1.3fr auto;gap:40px;align-items:end;color:#fff}
.hero-b .content .ly .eye{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.15);backdrop-filter:blur(12px);font-size:11px;font-weight:600;letter-spacing:.5px;color:#fff;margin-bottom:22px;border:1px solid rgba(255,255,255,.3)}
.hero-b .content .ly .eye .dt{width:6px;height:6px;border-radius:50%;background:var(--ani-red);position:relative}
.hero-b .content .ly .eye .dt::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--ani-red);opacity:.5;animation:ping 2s ease-in-out infinite}
.hero-b .content h1{font-size:72px;font-weight:500;letter-spacing:-.035em;line-height:1;color:#fff;margin-bottom:18px;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero-b .content h1 em{font-style:italic;color:#ffd4df;font-weight:500}
.hero-b .content .lead{font-size:15.5px;color:rgba(255,255,255,.92);line-height:1.6;max-width:520px;margin-bottom:26px;text-shadow:0 1px 20px rgba(0,0,0,.3)}
.hero-b .content .ctas{display:flex;gap:10px}
.hero-b .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;letter-spacing:-.005em;text-decoration:none}
.hero-b .btn-p{background:var(--ani-red);color:#fff;box-shadow:0 8px 24px -8px rgba(211,14,69,.7)}
.hero-b .btn-p .ar{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:11px}
.hero-b .btn-g{background:rgba(255,255,255,.15);color:#fff;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3)}
.hero-b .app-card{width:520px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);border-left:3px solid var(--ani-red);
  border-radius:18px;
  box-shadow:0 24px 60px -16px rgba(30,20,10,.40);
  color:var(--ink);
  display:grid;grid-template-columns:1fr 160px;gap:0;
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;}
.hero-b .app-card:hover{transform:translateY(-3px);box-shadow:0 28px 70px -18px rgba(30,20,10,.48)}
.hero-b .app-card .app-text{padding:24px 24px 22px}
.hero-b .app-card .app-text .kw{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--ani-red);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.hero-b .app-card .app-text .kw::before{content:"\2192";font-size:11px}
.hero-b .app-card .app-text h4{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
.hero-b .app-card .app-text h4 em{font-style:italic;color:var(--ani-red);font-weight:600}
.hero-b .app-card .app-text p{font-size:12px;line-height:1.55;color:var(--ink-2);margin-bottom:14px}
.hero-b .app-card .app-text p b{color:var(--ink);font-weight:600}
.hero-b .app-card .stores{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.hero-b .app-card .store{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:8px;background:var(--ink);color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.06);transition:transform .15s ease,background .15s ease}
.hero-b .app-card .store:hover{transform:translateY(-1px);background:#0a0908}
.hero-b .app-card .store .si{font-size:14px;line-height:1;flex-shrink:0}
.hero-b .app-card .store small{display:block;font-size:8px;color:rgba(255,255,255,.65);letter-spacing:.3px;line-height:1;font-weight:500;text-transform:uppercase}
.hero-b .app-card .store strong{display:block;font-size:11.5px;font-weight:600;line-height:1.2;margin-top:1px}
.hero-b .app-card .more-link{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--ani-red);text-decoration:none;padding-bottom:1px;border-bottom:1px solid var(--ani-red);transition:gap .15s ease}
.hero-b .app-card .more-link:hover{gap:9px}
.hero-b .app-card .phone-side{background:var(--ani-red);
  display:flex;align-items:center;justify-content:center;
  padding:18px;position:relative;overflow:hidden;}
.hero-b .app-card .phone-side::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.18) 0%,transparent 55%),
             radial-gradient(circle at 20% 90%,rgba(0,0,0,.15) 0%,transparent 50%);}
/* .side-col ist die Mobile-Kopie der Store-Buttons im roten Band -> Desktop/Tablet aus */
.hero-b .app-card .side-col{display:none}
/* Steuerelemente der kompakten Mobile-Ansicht existieren nur unterhalb 960px */
.acc-head,.anc-showall{display:none}
.hero-b .app-card .side-col .kw-band{display:none}
.hero-b .app-card .phone-mock{width:134px;aspect-ratio:375/780;
  background:#000;border-radius:18px;padding:4px;
  position:relative;z-index:1;
  box-shadow:0 18px 40px -10px rgba(0,0,0,.45),
             0 4px 14px rgba(0,0,0,.25);
  transform:rotate(2deg);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.hero-b .app-card:hover .phone-mock{transform:rotate(0deg) translateY(-2px)}
.hero-b .app-card .phone-screen{background:#fff;height:100%;border-radius:14px;
  overflow:hidden;position:relative;}
.hero-b .app-card .phone-screen .phone-shot{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.hero-b .app-card .phone-screen .lst{padding:8px;display:flex;flex-direction:column;gap:5px;margin-top:6px}
.hero-b .app-card .phone-screen .lst-item{background:#fff;border-radius:6px;padding:5px 7px;
  display:flex;align-items:center;gap:5px;border:1px solid var(--border);}
.hero-b .app-card .phone-screen .lst-item .ic-sm{width:14px;height:14px;border-radius:4px;
  background:var(--ani-red-soft);
  display:flex;align-items:center;justify-content:center;font-size:7px;}
.hero-b .app-card .phone-screen .lst-item .nm-sm{font-size:6.5px;font-weight:600;color:var(--ink);line-height:1.2;}
.hero-b .app-card .phone-screen .lst-item .v-sm{font-size:6px;font-weight:700;color:var(--ani-red);margin-left:auto;}

/* ============================================================
   UEBER UNS (ab-wrap) + geteilte Sektions-Chrome (.sec-head/.eye/.ix/.all)
   Statische Editorial-Copy aus Desktop-Vorlage.
   ============================================================ */
.sec-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:32px}
.sec-head .num{display:none}
.sec-head .l .eye{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:700;color:var(--ani-red);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:10px}
.sec-head .l .eye .ix{padding:3px 9px;border-radius:var(--r-pill);background:var(--ani-red-soft);color:var(--ani-red-ink);font-weight:700}
.sec-head h2{font-size:44px;font-weight:500;letter-spacing:-.035em;line-height:1}
.sec-head h2 em{font-style:italic;color:var(--ani-red);font-weight:500}
.sec-head .l p{font-size:14px;color:var(--ink-2);max-width:640px;margin-top:14px;line-height:1.6}
.sec-head .l p b{color:var(--ink);font-weight:600}
.sec-head .all{display:inline-flex;align-items:center;gap:10px;padding:10px 14px 10px 18px;border-radius:var(--r-pill);background:var(--cream);border:1px solid var(--border);font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-.005em}
.sec-head .all .ar{width:22px;height:22px;border-radius:50%;background:var(--ani-red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}
.dl-foot a .ar{color:var(--ani-red);font-weight:700}
.ab-wrap{background:var(--cream);padding:72px 48px 80px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ab-inner{max-width:1500px;margin:0 auto}
.ab-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:start}
.ab-story{background:var(--paper);border:1px solid var(--border);border-left:3px solid var(--ani-red);border-radius:var(--r-card);padding:32px 36px}
.ab-story .kw{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;color:var(--ani-red);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:16px;font-feature-settings:"tnum"}
.ab-story .kw .ix{padding:3px 9px;border-radius:var(--r-pill);background:var(--ani-red-soft);color:var(--ani-red-ink)}
.ab-story h3{font-size:28px;font-weight:500;letter-spacing:-.025em;line-height:1.1;margin-bottom:16px}
.ab-story h3 em{font-style:italic;color:var(--ani-red);font-weight:500}
.ab-story p{font-size:14.5px;color:var(--ink-2);line-height:1.7;margin-bottom:12px}
.ab-story p:last-of-type{margin-bottom:0}
.ab-story p b{color:var(--ink);font-weight:600}
.ab-story p em{font-style:italic;color:var(--ani-red);font-weight:500}
.ab-story .locations-mini{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.ab-story .locations-mini .city{padding:6px 12px 6px 10px;border-radius:var(--r-pill);background:var(--cream);border:1px solid var(--border);font-size:11.5px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:7px;letter-spacing:-.005em}
.ab-story .locations-mini .city .dt{width:5px;height:5px;border-radius:50%;background:var(--ani-red)}
.ab-story .locations-mini .city b{font-weight:700}
.ab-stats{display:flex;flex-direction:column;gap:10px}
.ab-stats .stat{background:var(--paper);border:1px solid var(--border);border-left:3px solid var(--ani-red);border-radius:var(--r-card);padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.ab-stats .stat .v{font-size:44px;font-weight:500;letter-spacing:-.035em;line-height:1;font-feature-settings:"tnum";min-width:110px}
.ab-stats .stat .v em{font-style:italic;color:var(--ani-red);font-weight:500}
.ab-stats .stat .x .l{font-size:10.5px;color:var(--ani-red);font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:4px;font-feature-settings:"tnum"}
.ab-stats .stat .x .d{font-size:13px;color:var(--ink-2);line-height:1.5}
.ab-stats .stat .x .d b{color:var(--ink);font-weight:600}
.ab-stats .quote{background:var(--paper);border:1px solid var(--border);border-right:3px solid var(--ani-red);border-radius:var(--r-card);padding:24px 26px}
.ab-stats .quote .kw{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;color:var(--ani-red);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:12px}
.ab-stats .quote .kw::before{content:"\201C";font-size:18px;line-height:0;color:var(--ani-red);opacity:.6}
.ab-stats .quote p{font-size:15.5px;line-height:1.5;color:var(--ink);font-weight:400;letter-spacing:-.008em;margin-bottom:14px}
.ab-stats .quote p em{font-style:italic;color:var(--ani-red);font-weight:500}
.ab-stats .quote .a{padding-top:12px;border-top:1px solid var(--border);font-size:11px;color:var(--ink-3);font-weight:500;letter-spacing:.3px}
.ab-stats .quote .a b{color:var(--ink);font-weight:600}
.ab-foot{margin-top:40px;padding:20px 24px;border-radius:var(--r-card);background:var(--paper);border:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:20px}
.ab-foot .l{font-size:13px;color:var(--ink-3);line-height:1.5}
.ab-foot .l b{color:var(--ink);font-weight:600}
.ab-foot .l em{font-style:italic;color:var(--ani-red);font-weight:500}
.ab-foot .actions{display:flex;gap:8px}
.ab-foot a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:500;text-decoration:none;letter-spacing:-.005em}
.ab-foot a.p{background:var(--ani-red);color:#fff}
.ab-foot a.p .ar{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:10px}
.ab-foot a.g{background:var(--cream);border:1px solid var(--border);color:var(--ink)}
.ab-foot a.g .ar{color:var(--ani-red);font-weight:700}
.lb-block{margin-top:48px;padding-top:48px;border-top:1px solid var(--border)}
.lb-head{display:flex;align-items:baseline;gap:18px;margin-bottom:28px}
.lb-head .ix{font-size:10px;font-weight:700;color:var(--ani-red-ink);letter-spacing:1.2px;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill);background:var(--ani-red-soft)}
.lb-head h3{font-size:30px;font-weight:500;letter-spacing:-.025em;line-height:1.1}
.lb-head h3 em{font-style:italic;color:var(--ani-red);font-weight:500}
.lb-head .ln{flex:1;height:1px;background:var(--border)}
.lb-split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.lb-left{position:sticky;top:32px;
  border-radius:var(--r-card);overflow:hidden;
  background:var(--paper);
  border:1px solid var(--border);
  box-shadow:0 14px 40px -16px rgba(15,12,8,.18);}
.lb-left img{display:block;width:100%;height:auto;
  border-radius:var(--r-card) var(--r-card) 0 0;}
.lb-left .lb-caption{padding:14px 20px;
  background:var(--paper);
  border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px;}
.lb-left .lb-caption .lb-tag{display:inline-flex;align-items:center;gap:7px;
  font-size:9.5px;font-weight:700;color:var(--ani-red);
  letter-spacing:1.2px;text-transform:uppercase;}
.lb-left .lb-caption .lb-tag::before{content:"";width:14px;height:1px;background:var(--ani-red)}
.lb-left .lb-caption .lb-meta{font-size:11.5px;color:var(--ink-3);font-weight:500;
  letter-spacing:-.005em;margin-left:auto;}
.lb-left .lb-caption .lb-meta b{color:var(--ink);font-weight:600}
.lb-right{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.lb-card{background:var(--paper);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px 20px;
  cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease;
  display:flex;flex-direction:column;gap:10px;}
.lb-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px -10px rgba(15,12,8,.18);border-color:var(--ani-red)}
.lb-card-head{display:flex;align-items:center;gap:12px}
.lb-card-ic{width:36px;height:36px;border-radius:10px;
  background:var(--ani-red-soft);color:var(--ani-red);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:600;flex-shrink:0;}
.lb-card-meta{display:flex;flex-direction:column}
.lb-card-nr{font-size:9.5px;font-weight:700;color:var(--ani-red);letter-spacing:1.2px;text-transform:uppercase}
.lb-card h4{font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.2;color:var(--ink);margin-top:1px}
.lb-card p{font-size:12px;color:var(--ink-2);line-height:1.55}
.lb-card p b{color:var(--ink);font-weight:600}
.hi-card .meta .ix{color:var(--ani-red);font-weight:700}
.hi-foot a.p .ar{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:10px}
.hi-foot a.g .ar{color:var(--ani-red);font-weight:700}
.tm-active-head .ix{font-size:10px;font-weight:700;color:var(--ani-red-ink);letter-spacing:1.2px;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill);background:var(--ani-red-soft)}
.tm-foot a.p .ar{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:10px}
.tm-foot a.g .ar{color:var(--ani-red);font-weight:700}
.pf-news .form button .ar{font-weight:700}
.vr-wrap .sec-head{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:36px;align-items:end;padding-bottom:28px;border-bottom:1px solid var(--border)}
.vr-wrap .sec-head .num{display:none}
.vr-wrap .sec-head .l{display:flex;flex-direction:column;gap:14px}
.vr-wrap .sec-head .eye{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;color:var(--ani-red);letter-spacing:1.5px;text-transform:uppercase}
.vr-wrap .sec-head .eye .ix{padding:3px 11px;border-radius:var(--r-pill);background:var(--ani-red-soft);font-feature-settings:"tnum"}
.vr-wrap .sec-head h2{font-size:54px;font-weight:500;letter-spacing:-.035em;line-height:1.05;color:var(--ink)}
.vr-wrap .sec-head h2 em{font-style:italic;color:var(--ani-red);font-weight:500}
.vr-wrap .sec-head p{font-size:14.5px;color:var(--ink-2);line-height:1.6;font-weight:400;max-width:640px;margin-top:10px}

/* ============================================================
   KERNBEREICHE (dl-wrap) — dynamisch (Variante B, ohne Chips)
   Datenquelle: command.wbKontextDL{Schweine,Rindvieh,Schafe,Logistik,Kommunikation}Objekte
   ============================================================ */
.dl-wrap{background:var(--paper);padding:72px 48px 80px}
.dl-inner{max-width:1500px;margin:0 auto}
.dl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dl-card{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .25s ease,box-shadow .25s ease;cursor:pointer}
.dl-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px)}
.dl-card:hover .img-bg{transform:scale(1.05)}
.dl-card .img-wrap{position:relative;overflow:hidden;height:340px}
.dl-card .img-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s ease}
.dl-card .img-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.45) 100%)}
.dl-card .img-tag{position:absolute;top:14px;left:14px;padding:4px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);font-size:11px;font-weight:700;color:var(--ani-red);letter-spacing:.5px;z-index:2}
.dl-card .img-num{position:absolute;bottom:14px;left:18px;font-size:64px;font-weight:300;color:#fff;line-height:.9;letter-spacing:-.04em;z-index:2;text-shadow:0 2px 8px rgba(0,0,0,.4);font-feature-settings:"tnum"}
.dl-card .body{padding:24px 28px;flex:1;display:flex;flex-direction:column;border-top:1px solid var(--border)}
.dl-card .body h3{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.dl-card .body h3 em{font-style:italic;color:var(--ani-red);font-weight:600}
.dl-card .body p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-bottom:14px}
.dl-card .body p b{color:var(--ink);font-weight:600}
.dl-card .more{font-size:12.5px;font-weight:600;color:var(--ani-red);text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-top:auto;border-bottom:1px solid var(--ani-red);padding-bottom:1px;align-self:flex-start;transition:gap .15s ease}
.dl-card:hover .more{gap:10px}
.dl-card.big{grid-column:span 2}
.dl-card.full{grid-column:span 4;flex-direction:row}
.dl-card.full .img-wrap{height:auto;width:42%;flex-shrink:0;border-top:none}
.dl-card.full .img-num{font-size:84px}
.dl-card.full .body{border-top:none;border-left:1px solid var(--border);padding:36px 40px;justify-content:center}
.dl-card.full .body h3{font-size:32px;margin-bottom:12px}
.dl-card.full .body p{font-size:14.5px;margin-bottom:18px;max-width:520px}
.dl-foot{margin-top:40px;padding:18px 22px;border-radius:var(--r-card);background:var(--cream);border:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:20px}
.dl-foot .l{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.dl-foot .l b{color:var(--ink);font-weight:600}
.dl-foot .l em{font-style:italic;color:var(--ani-red);font-weight:500}
.dl-foot a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--border);font-size:12.5px;font-weight:500;color:var(--ink);text-decoration:none;letter-spacing:-.005em}

/* ============================================================
   GESCHICHTE (hi-wrap) — statischer Timeline-Scroll
   ============================================================ */
.hi-wrap{background:var(--paper);padding:72px 48px 80px}
.hi-inner{max-width:1500px;margin:0 auto}
.hi-master{margin-bottom:24px;padding:18px 24px;background:var(--cream);border:1px solid var(--border);border-radius:var(--r-card);display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.hi-master .st{font-size:10px;font-weight:700;color:var(--ani-red);letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap}
.hi-master .st b{color:var(--ink)}
.hi-master .ruler{position:relative;height:56px}
.hi-master .ruler::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:2px;background:var(--ani-red);opacity:.25}
.hi-master .tick{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;cursor:pointer}
.hi-master .tick .dot{width:9px;height:9px;border-radius:50%;background:var(--ani-red);box-shadow:0 0 0 3px var(--cream),0 0 0 4px var(--ani-red);transition:transform .2s ease}
.hi-master .tick:hover .dot{transform:scale(1.3)}
.hi-master .tick .yr{position:absolute;top:24px;font-size:10px;font-weight:700;color:var(--ink-3);font-feature-settings:"tnum";letter-spacing:.5px;white-space:nowrap}
.hi-master .tick{padding:6px}
.hi-master .tick.active .dot{transform:scale(1.5);box-shadow:0 0 0 3px var(--cream),0 0 0 5px var(--ani-red)}
.hi-master .tick.active .yr{color:var(--ani-red)}
.hi-card.hl{border-color:var(--ani-red);box-shadow:0 0 0 2px rgba(211,14,69,.14)}
.hi-master .span{font-size:11px;color:var(--ink-2);font-weight:600;white-space:nowrap}
.hi-master .span b{color:var(--ani-red);font-weight:700;font-feature-settings:"tnum"}
.hi-scroll-wrap{position:relative;margin:0 -48px;padding:0 48px}
.hi-scroll-wrap::before,.hi-scroll-wrap::after{content:"";position:absolute;top:0;bottom:8px;width:48px;z-index:2;pointer-events:none}
.hi-scroll-wrap::before{left:0;background:linear-gradient(90deg,var(--paper) 0%,transparent 100%)}
.hi-scroll-wrap::after{right:0;background:linear-gradient(270deg,var(--paper) 0%,transparent 100%)}
.hi-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:8px;scroll-snap-type:x mandatory}
.hi-scroll::-webkit-scrollbar{height:6px}
.hi-scroll::-webkit-scrollbar-track{background:var(--cream);border-radius:3px}
.hi-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.hi-scroll::-webkit-scrollbar-thumb:hover{background:var(--ani-red)}
.hi-card{background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;cursor:pointer;scroll-snap-align:start;transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease;position:relative}
.hi-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--ani-red)}
.hi-card .top{display:flex;justify-content:space-between;align-items:center}
.hi-card .year{font-size:36px;font-weight:300;letter-spacing:-.04em;line-height:.9;color:var(--ani-red);font-feature-settings:"tnum"}
.hi-card .hi-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-pill);font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.hi-card .hi-badge .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.hi-card .hi-bg-r{background:var(--ani-red-soft);color:var(--ani-red-ink)}
.hi-card .hi-bg-o{background:#fff1e0;color:#c45c11}
.hi-card .hi-bg-s{background:#eaf3da;color:#587b27}
.hi-card .hi-bg-v{background:#e2eef1;color:#2a6e8e}
.hi-card .hi-bg-n{background:#ece9f7;color:#5e4ca8}
.hi-card h3{font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.2;margin-top:2px}
.hi-card h3 em{font-style:italic;color:var(--ani-red);font-weight:600}
.hi-card p{font-size:12px;color:var(--ink-2);line-height:1.55;flex:1}
.hi-card p b{color:var(--ink);font-weight:600}
.hi-card .meta{padding-top:10px;border-top:1px solid var(--border);font-size:9.5px;font-weight:600;color:var(--ink-4);letter-spacing:.4px;text-transform:uppercase;display:flex;justify-content:space-between;font-feature-settings:"tnum"}
.hi-arrows{margin-top:14px;display:flex;justify-content:flex-end;gap:8px}
.hi-arrows button{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--paper);font-size:16px;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;font-family:inherit;font-weight:600}
.hi-arrows button:hover{background:var(--ani-red);color:#fff;border-color:var(--ani-red);transform:translateY(-1px)}
.hi-arrows button:disabled{opacity:.4;cursor:not-allowed}
.hi-arrows button:disabled:hover{background:var(--paper);color:var(--ink-2);border-color:var(--border);transform:none}
.hi-foot{margin-top:36px;padding:20px 24px;border-radius:var(--r-card);background:var(--cream);border:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:20px}
.hi-foot .l{font-size:13px;color:var(--ink-3);line-height:1.5}
.hi-foot .l b{color:var(--ink);font-weight:600}
.hi-foot .l em{font-style:italic;color:var(--ani-red);font-weight:500}
.hi-foot .actions{display:flex;gap:8px}
.hi-foot a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:500;text-decoration:none;letter-spacing:-.005em;cursor:pointer}
.hi-foot a.p{background:var(--ani-red);color:#fff}
.hi-foot a.g{background:var(--paper);border:1px solid var(--border);color:var(--ink)}
.tm-foot .actions{display:flex;gap:8px}
.tm-foot a.p{background:var(--ani-red);color:#fff}
.tm-foot a.g{background:var(--paper);border:1px solid var(--border);color:var(--ink)}

/* ============================================================
   ZERTIFIKATE (cr-wrap) — statische Cert-Cards
   ============================================================ */
.cr-wrap{background:var(--cream);padding:72px 48px 80px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cr-inner{max-width:1500px;margin:0 auto}
.cr-wrap .cert-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:8px}
.cr-wrap .cert-card{background:var(--paper);border:1px solid var(--border);border-radius:18px;
  padding:32px 26px 28px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:14px;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.cr-wrap .cert-card:hover{transform:translateY(-4px);
  box-shadow:0 18px 38px -12px rgba(15,12,8,.18);
  border-color:var(--ani-red-soft);}
.cr-wrap .cert-logo{display:flex;align-items:center;justify-content:center;
  font-weight:700;letter-spacing:-.005em;color:var(--ani-red);
  background:var(--paper);border:2px solid var(--ani-red-soft);
  text-align:center;line-height:1.05;padding:8px;
  width:96px;height:96px;border-radius:50%;
  font-size:14px;font-family:inherit;
  margin-top:4px;}
.cr-wrap .cert-card .pre{font-size:10px;font-weight:700;color:var(--ani-red);
  letter-spacing:1.4px;text-transform:uppercase;}
.cr-wrap .cert-card h3{font-size:18px;font-weight:600;color:var(--ink);
  letter-spacing:-.012em;line-height:1.18;}
.cr-wrap .cert-card h3 em{font-style:italic;color:var(--ani-red);font-weight:600}
.cr-wrap .cert-card p{font-size:13px;color:var(--ink-2);line-height:1.55;margin-top:-2px;}
.cr-wrap .cert-card p b{color:var(--ink);font-weight:600}

/* ============================================================
   VERWALTUNGSRAT (vr-wrap) — statisch, 10 Mitglieder
   ============================================================ */
.vr-wrap{background:var(--paper);padding:80px 48px}
.vr-inner{max-width:1500px;margin:0 auto}
.vr-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:start}
.vr-info{background:var(--paper);border:1px solid var(--border);border-radius:14px;
  padding:36px 40px;display:flex;flex-direction:column;gap:18px;}
.vr-info .lead{font-size:15px;color:var(--ink-2);line-height:1.65;font-weight:400}
.vr-info .lead b{color:var(--ink);font-weight:600}
.vr-list{background:var(--paper);border:1px solid var(--border);border-radius:14px;
  padding:24px 32px;}
.vr-list .lh{display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;color:var(--ani-red);letter-spacing:1.2px;text-transform:uppercase;
  margin-bottom:14px;}
.vr-list .lh::before{content:"";width:18px;height:1px;background:var(--ani-red)}
.vr-list .vr-mb{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--border);}
.vr-list .vr-mb:last-child{border-bottom:none}
.vr-list .vr-mb .nm{font-size:14.5px;font-weight:500;color:var(--ink);letter-spacing:-.005em}
.vr-list .vr-mb .ro{font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.5px}

/* ============================================================
   STANDORTE (lc-wrap) — statisch, 4 Standorte + Maps
   ============================================================ */
.lc-wrap{background:var(--cream);padding:72px 48px 80px;border-top:1px solid var(--border)}
.lc-inner{max-width:1500px;margin:0 auto}
.lc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lc-card{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);
  padding:24px;display:flex;flex-direction:column;gap:14px;cursor:pointer;
  text-decoration:none;color:inherit;
  transition:all .25s ease;position:relative;overflow:hidden;}
.lc-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px -10px rgba(15,12,8,.18);border-color:var(--ani-red)}
.lc-card .lc-top{display:flex;align-items:center;justify-content:space-between}
.lc-card .lc-num{font-size:42px;font-weight:300;color:var(--ani-red);
  line-height:.85;letter-spacing:-.04em;font-feature-settings:"tnum";}
.lc-card .lc-tag{display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--r-pill);
  background:var(--ani-red-soft);color:var(--ani-red-ink);
  font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.lc-card .lc-tag.hs{background:var(--ani-red);color:#fff}
.lc-card .lc-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.lc-card h3{font-size:24px;font-weight:500;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
.lc-card h3 em{font-style:italic;color:var(--ani-red);font-weight:500}
.lc-card h3 .lc-kt{color:var(--ink-3);font-weight:400;font-size:18px;font-style:normal}
.lc-card .lc-region{font-size:11px;font-weight:700;color:var(--ani-red);letter-spacing:.8px;text-transform:uppercase;margin-top:-8px}
.lc-card .lc-addr{font-size:13px;color:var(--ink-2);line-height:1.5;padding-top:8px;border-top:1px solid var(--border)}
.lc-card .lc-addr b{color:var(--ink);font-weight:600}
.lc-card .lc-contact{display:flex;flex-direction:column;gap:4px;padding-top:10px;border-top:1px solid var(--border)}
.lc-card .lc-contact .row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-2);font-weight:500;letter-spacing:-.005em}
.lc-card .lc-contact .row svg{flex-shrink:0;color:var(--ani-red);width:13px;height:13px;stroke-width:2}
.lc-card .lc-contact .row.tel{font-feature-settings:"tnum"}
.lc-card .lc-maps{margin-top:auto;display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border-radius:8px;
  background:var(--cream);border:1px solid var(--border);
  font-size:11.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em;
  text-decoration:none;align-self:flex-start;
  transition:all .15s ease;}
.lc-card:hover .lc-maps{background:var(--ani-red);color:#fff;border-color:var(--ani-red)}
.lc-card .lc-maps svg{color:var(--ani-red);transition:color .15s ease;width:11px;height:11px;stroke-width:2}
.lc-card:hover .lc-maps svg{color:#fff}
.foot-brand .hs-contact .tel{font-size:14px;color:#fff;font-weight:600;letter-spacing:-.005em;font-feature-settings:"tnum";margin-top:4px;display:inline-flex;align-items:center;gap:7px;justify-content:flex-end;text-decoration:none}
.foot-brand .hs-contact .tel svg{width:13px;height:13px;color:#ffd4df;stroke-width:2}
.foot-col.brand-col .loc.hs .dt{box-shadow:0 0 0 3px rgba(255,255,255,.3)}

/* VR (Redesign, real): Gruppenfoto + Namen nach Reihen (Live-Stand) */
.vr-grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start;margin-top:8px}
.vr-photo{border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--paper);box-shadow:var(--shadow-card)}
.vr-photo img{width:100%;height:auto;display:block}
.vr-photo .cap{padding:12px 18px;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--border)}
.vr-desc .lead{color:var(--ink-2);font-size:16px;line-height:1.6}
.vr-count{margin-top:20px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);display:flex;align-items:center;gap:8px}
.vr-count b{color:var(--ani-red);font-size:15px}
.vr-rows{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.vr-row-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ani-red);margin-bottom:2px}
/* Die Namen sind eine Bildlegende, kein Verzeichnis: "hintere Reihe v.l." ergibt
   nur als durchgehender Satz Sinn. Pillenform signalisierte ausserdem eine
   Interaktion (Filter/Link), die es hier nicht gibt. Kommas aus CSS, damit im
   Markup pro Person ein eigenes Element bleibt. */
.vr-chips{display:block}
.vr-chip{font-size:14px;font-weight:500;color:var(--ink-2);line-height:1.7}
.vr-chip:not(:last-child)::after{content:", ";color:var(--ink-3)}
@media(max-width:820px){.vr-grid2{grid-template-columns:1fr}}

/* ============================================================
   TEAM (Redesign) — Kachel-Grid (Bereiche), kein Bereich vorausgewaehlt.
   1:1 aus Vorlage (team-tiles). Klick auf Kachel zeigt Personen-Karten.
   Daten: command.<bereich>FotoMapperTOs (leftFoto/middleFoto/rightFoto).
   Person: d_arFilName, benamung, portr_rolle/_f, portr_telNr, portr_eMailAdr.
   ============================================================ */
.tm-wrap{padding:74px 0;background:var(--cream);border-bottom:1px solid var(--border)}
.tm-inner{max-width:1200px;margin:0 auto;padding:0 40px}
/* --- Bereichs-Kacheln --- */
/* minmax(0,1fr) statt 1fr: "1fr" bedeutet in einem Raster "mindestens so breit
   wie der Inhalt". Vier Leisten mit Fotostapel, Bezeichnung und Pfeil brauchen
   zusammen mehr als der Container zwischen 1025 und 1130 px hergibt - die
   Spalten wurden auseinandergeschoben und die Seite lief waagrecht ueber. */
.tm-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:30px}
/* Darum wechseln die Leisten schon hier auf zwei Spalten, nicht erst bei 1024.
   Ohne diesen Schritt bleiben die Bezeichnungen ("Regionale Ansprechpartner")
   breiter als die Spalte. Die Personen-Karten haben eigene Stufen, siehe unten. */
@media(max-width:1160px){.tm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tm-tile{background:var(--paper);border:1px solid var(--border);border-radius:14px;
  padding:18px 20px;cursor:pointer;font-family:inherit;text-align:left;
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease,background .2s ease;position:relative}
.tm-tile:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(15,12,8,.16);border-color:var(--ani-red)}
.tm-tile.active{background:var(--ani-red);border-color:var(--ani-red);color:#fff}
.tm-tile.active:hover{background:var(--ani-red-deep)}
.tm-ph-stack{position:relative;width:60px;height:38px;flex-shrink:0}
/* Seit dem Umbau auf <img> (team_tile.jsp) gilt object-fit statt background-size.
   Wirkung identisch, dafuer greifen loading="lazy" und feste Abmessungen. */
.tm-ph-stack-img{position:absolute;top:0;width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid var(--paper);box-shadow:0 2px 6px rgba(0,0,0,.12);background-color:var(--cream)}
.tm-ph-stack-img:nth-child(1){left:0;z-index:3}
.tm-ph-stack-img:nth-child(2){left:11px;z-index:2}
.tm-ph-stack-img:nth-child(3){left:22px;z-index:1}
.tm-tile.active .tm-ph-stack-img{border-color:var(--ani-red)}
.tm-tile-info{display:flex;flex-direction:column;gap:1px}
.tm-tile-ix{font-size:9.5px;font-weight:700;color:var(--ani-red);letter-spacing:1px;font-feature-settings:"tnum"}
.tm-tile.active .tm-tile-ix{color:rgba(255,255,255,.65)}
.tm-tile-name{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--ink);margin-top:2px}
.tm-tile.active .tm-tile-name{color:#fff}
.tm-tile-meta{font-size:10.5px;color:var(--ink-3);font-weight:500;margin-top:2px}
.tm-tile.active .tm-tile-meta{color:rgba(255,255,255,.78)}
.tm-tile-ct{font-weight:700;color:var(--ani-red);font-feature-settings:"tnum"}
.tm-tile.active .tm-tile-ct{color:#fff}
.tm-tile-arrow{font-size:14px;color:var(--ink-4);transition:transform .15s ease,color .15s ease}
.tm-tile.active .tm-tile-arrow{color:#fff;transform:rotate(90deg)}
/* --- Aktiver Bereich: Kopf --- */
.tm-active-head{display:flex;align-items:baseline;gap:14px;margin:0;padding-bottom:10px;border-bottom:1px solid var(--border);opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease,max-height .3s ease,margin-top .3s ease,padding-bottom .3s ease}
.tm-active-head.show{opacity:1;max-height:80px;margin-top:36px;padding-bottom:14px}
.tm-active-head .ix{font-size:10px;font-weight:700;color:var(--ani-red-ink);letter-spacing:1.2px;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill);background:var(--ani-red-soft)}
.tm-active-head h3{font-size:24px;font-weight:500;letter-spacing:-.025em;line-height:1.1}
.tm-active-head h3 em{font-style:italic;color:var(--ani-red);font-weight:500}
.tm-active-head .clear{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:500;background:none;border:1px solid var(--border);padding:5px 11px;border-radius:var(--r-pill);cursor:pointer;font-family:inherit;transition:all .15s ease;display:inline-flex;align-items:center;gap:5px}
.tm-active-head .clear:hover{color:var(--ani-red);border-color:var(--ani-red)}
/* --- Personen-Karten (bei Klick) --- */
.tm-sub{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ani-red);margin:22px 0 12px}
.tm-panel{display:none}
.tm-panel.show{display:block;animation:tmFadeIn .3s ease}
.tm-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
@keyframes tmFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* Personen-Karte: Foto + Name unten (immer). Funktion/Tel/Mail nur bei Hover
   (Desktop) bzw. Klick/.open (Mobile) — Verhalten wie Live-Seite (darken). */
.tm-card{position:relative;aspect-ratio:4/5;border:1px solid var(--border);border-radius:var(--r-card);
  overflow:hidden;cursor:pointer;background:var(--cream)}
.tm-card .tm-photo{position:absolute;inset:0;z-index:1;
  background-size:cover;background-position:center top;background-color:var(--cream)}
/* Die Abdunklung liegt auf der Karte statt auf dem Foto - zwischen Foto
   (z-index 1) und Name (3) bzw. Funktion/Tel/Mail (4). pointer-events:none,
   damit sie Klicks auf Telefon- und Mailverweise nicht abfaengt. */
.tm-card::after{content:"";position:absolute;inset:0;z-index:2;
  background:rgba(15,12,8,0);transition:background .3s ease;pointer-events:none}
.tm-card:hover::after,.tm-card.open::after{background:rgba(15,12,8,.64)}
/* Name unten - immer sichtbar */
.tm-card .tm-name{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 18px;
  color:#fff;font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.25;
  background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 100%)}
/* Funktion / Tel / Mail - erst bei Hover/Klick */
.tm-card .tm-hover{position:absolute;left:0;right:0;top:0;z-index:4;padding:20px 18px 0;
  color:#fff;opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease}
.tm-card:hover .tm-hover,.tm-card.open .tm-hover{opacity:1;transform:translateY(0);pointer-events:auto}
.tm-card .tm-hover .tm-role{font-size:15px;font-weight:500;line-height:1.4;margin-bottom:16px}
.tm-card .tm-hover a{display:block;color:#fff;text-decoration:none;font-size:15px;line-height:1.55;letter-spacing:-.005em}
.tm-card .tm-hover a:hover{text-decoration:underline}
/* ---- Ausgeklappte Personen-Karte auf kleinen Karten ----
   Funktion, Telefon und Mail lagen als absolut gesetzter Block oben in der
   Karte, der Name unten. Auf dem Handy ist die Karte nur 135 bis 195px breit;
   eine lange Funktionsbezeichnung samt Mailadresse brauchte dort mehr Hoehe,
   als die Karte hat - der Text lief ueber den Namen und unten aus der Karte
   heraus (gemessen bis 64px). Darum wird die Karte im ausgeklappten Zustand
   zu einer Spalte: Name oben als normaler Block, darunter der Rest mit dem
   verbleibenden Platz. So kann sich nichts mehr ueberlagern, unabhaengig
   davon, wie lang Name und Funktion sind; im aeussersten Fall wird der Block
   scrollbar. Das Foto bleibt absolut und fuellt die Karte weiterhin ganz.
   Gilt auch fuer :hover, weil in einem sehr schmalen Fenster mit Maus
   dieselbe Enge herrscht. */
@media(max-width:620px){
  .tm-card .tm-name{padding:10px 10px;font-size:13.5px;line-height:1.2}
  .tm-card:hover,.tm-card.open{display:flex;flex-direction:column}
  .tm-card:hover .tm-name,.tm-card.open .tm-name{
    position:relative;order:1;flex:0 0 auto;background:none;padding:9px 10px 3px;z-index:5}
  .tm-card:hover .tm-hover,.tm-card.open .tm-hover{
    position:relative;inset:auto;order:2;flex:1 1 auto;min-height:0;
    overflow:auto;-webkit-overflow-scrolling:touch;padding:0 10px 9px;z-index:4;
    display:flex;flex-direction:column;gap:3px}
  .tm-card:hover .tm-hover .tm-role,.tm-card.open .tm-hover .tm-role{
    font-size:11.5px;line-height:1.35;margin-bottom:3px}
  .tm-card:hover .tm-hover a,.tm-card.open .tm-hover a{
    font-size:11.5px;line-height:1.35;overflow-wrap:anywhere}
}
@media(max-width:900px){.tm-tiles{grid-template-columns:repeat(2,1fr)}}
/* .tm-cards ist hier bewusst nicht aufgefuehrt - die Spaltenzahl der
   Personen-Karten steht weiter unten in den beiden Tablet-/Mobile-Bloecken.
   Die fruehere Regel .tm-cards{grid-template-columns:1fr} bei 560px wurde
   ohnehin spaeter ueberschrieben und ist darum entfallen. */
@media(max-width:560px){.tm-tiles{grid-template-columns:1fr}}

/* ============================================================
   PRE-FOOTER (Newsletter) + FOOTER (main-foot)
   ============================================================ */
.pre-foot{background:var(--paper);padding:72px 48px;position:relative;overflow:hidden}
.pre-foot::before{content:"";position:absolute;top:-50%;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(211,14,69,.06) 0%,transparent 60%);pointer-events:none}
.pre-foot-inner{max-width:1500px;margin:0 auto;position:relative;z-index:1}
.pre-foot-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:stretch}
.pf-app{background:var(--cream);border:1px solid var(--border);border-left:3px solid var(--ani-red);border-radius:var(--r-card);padding:32px 36px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.02),0 14px 30px -16px rgba(30,20,10,.12)}
.pf-mini-phone{width:80px;height:140px;
  background:#1a1612;border-radius:14px;padding:5px;
  flex-shrink:0;position:relative;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.25);
  transform:rotate(-4deg);
  transition:transform .3s ease;}
.pf-app:hover .pf-mini-phone{transform:rotate(-2deg) scale(1.03)}
.pf-mini-phone-screen{width:100%;height:100%;background:linear-gradient(180deg,var(--ani-red) 0%,var(--ani-red) 35%,#fff 35%);
  border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;padding:12px 7px 7px;}
.pf-mini-phone-screen .ph-logo{font-size:11px;font-weight:700;color:#fff;letter-spacing:-.015em;font-style:italic}
.pf-mini-phone-screen .ph-tag{font-size:6px;color:rgba(255,255,255,.85);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-top:2px}
.pf-mini-phone-screen .ph-cards{display:flex;flex-direction:column;gap:3px;margin-top:auto}
.pf-mini-phone-screen .ph-card{background:var(--cream);border-radius:3px;padding:3px 4px}
.pf-mini-phone-screen .ph-card-line{height:2px;background:var(--ink-4);border-radius:1px;width:80%}
.pf-mini-phone-screen .ph-card-line.short{width:50%;margin-top:2px;background:var(--ani-red)}
.pf-app .tx .kw{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;color:var(--ani-red);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:8px}
.pf-app .tx .kw::before{content:"\2192";font-size:11px}
.pf-app .tx h3{font-size:26px;font-weight:500;letter-spacing:-.025em;line-height:1.05;margin-bottom:6px}
.pf-app .tx h3 em{font-style:italic;color:var(--ani-red);font-weight:500}
.pf-app .tx p{font-size:13px;color:var(--ink-2);line-height:1.5}
.pf-app .tx p b{color:var(--ink);font-weight:600}
.pf-app .stores{display:flex;flex-direction:column;gap:8px}
.pf-app .store-btn{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 11px;border-radius:var(--r-pill);background:var(--ink);color:#fff;text-decoration:none;font-size:12px;font-weight:500;min-width:150px;transition:all .2s}
.pf-app .store-btn:hover{background:var(--ani-red)}
.pf-app .store-btn .ico{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.pf-app .store-btn .ico svg{width:18px;height:18px}
.pf-app .store-btn .lbl{display:flex;flex-direction:column;line-height:1.1}
.pf-app .store-btn .lbl small{font-size:9px;color:rgba(255,255,255,.6);font-weight:500}
.pf-app .store-btn .lbl b{font-weight:600;font-size:13px}
.pf-news{background:var(--ink);color:#fff;border-radius:var(--r-card);padding:32px 36px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.pf-news::before{content:"";position:absolute;bottom:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(211,14,69,.18) 0%,transparent 70%);pointer-events:none}
.pf-news .kw{font-size:10.5px;font-weight:700;color:var(--ani-red);letter-spacing:1.5px;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;position:relative;z-index:2}
.pf-news .kw::before{content:"";width:14px;height:1px;background:var(--ani-red)}
.pf-news h3{font-size:24px;font-weight:500;letter-spacing:-.025em;line-height:1.1;position:relative;z-index:2}
.pf-news h3 em{font-style:italic;color:#ffd4df;font-weight:500}
.pf-news p{font-size:13px;color:rgba(255,255,255,.78);line-height:1.5;position:relative;z-index:2}
.pf-news .form{display:flex;gap:8px;margin-top:6px;position:relative;z-index:2}
.pf-news .form input{flex:1;padding:11px 14px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:13px;letter-spacing:-.005em;outline:none;transition:all .2s}
.pf-news .form input::placeholder{color:rgba(255,255,255,.4)}
.pf-news .form input:focus{border-color:var(--ani-red);background:rgba(255,255,255,.12)}
.pf-news .form button{padding:11px 18px 11px 16px;border-radius:var(--r-pill);background:var(--ani-red);color:#fff;border:none;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.005em;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.pf-news .form button:hover{background:#fff;color:var(--ink)}
.pf-news .legal{font-size:10.5px;color:rgba(255,255,255,.5);line-height:1.4;letter-spacing:.2px;margin-top:auto;position:relative;z-index:2}
.pf-news .legal a{color:#ffd4df;text-decoration:underline}
.main-foot{background:var(--ani-red);color:rgba(255,255,255,.9);
  padding:64px 48px 28px;position:relative;overflow:hidden;}
.main-foot::before{content:"";position:absolute;top:0;right:0;width:500px;height:500px;
  background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 60%);
  pointer-events:none;}
.main-foot::after{content:"";position:absolute;bottom:0;left:0;width:400px;height:400px;
  background:radial-gradient(circle,rgba(0,0,0,.15) 0%,transparent 60%);
  pointer-events:none;}
.main-foot-inner{max-width:1500px;margin:0 auto;position:relative;z-index:1}
.foot-brand{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:36px;}
.foot-brand .logo-cove{background:#fff;padding:14px 22px;border-radius:var(--r-card);
  display:flex;align-items:center;}
.foot-brand .logo-cove img{height:28px;width:auto;display:block}
.foot-brand .claim{display:flex;flex-direction:column;gap:3px}
.foot-brand .claim .slug{font-size:10px;font-weight:700;color:#ffd4df;letter-spacing:1.5px;text-transform:uppercase}
.foot-brand .claim h4{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.1;color:#fff}
.foot-brand .claim h4 em{font-style:italic;color:#ffd4df;font-weight:500}
.foot-brand .hs-contact{display:flex;flex-direction:column;gap:4px;text-align:right}
.foot-brand .hs-contact .hs-lbl{font-size:9.5px;font-weight:700;color:#ffd4df;letter-spacing:1.2px;text-transform:uppercase}
.foot-brand .hs-contact .addr{font-size:12.5px;color:rgba(255,255,255,.85);font-weight:500;line-height:1.45}
.foot-brand .hs-contact .addr b{color:#fff;font-weight:600}
.foot-cols{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr 1fr;gap:32px;
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:24px;}
.foot-col h5{font-size:11px;font-weight:700;color:#fff;letter-spacing:1.2px;text-transform:uppercase;
  margin-bottom:16px;display:inline-flex;align-items:center;gap:8px;}
.foot-col h5::before{content:"";width:16px;height:1px;background:#ffd4df}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-col ul a{font-size:13px;color:rgba(255,255,255,.82);font-weight:400;letter-spacing:-.005em;
  text-decoration:none;transition:color .15s;display:inline-flex;align-items:center;gap:8px;}
.foot-col ul a:hover{color:#fff}
.foot-col ul a .new{font-size:8.5px;font-weight:700;color:#fff;letter-spacing:.8px;
  padding:2px 6px;border-radius:var(--r-pill);background:rgba(255,255,255,.2);
  text-transform:uppercase;}
.foot-col.brand-col p{font-size:12px;color:rgba(255,255,255,.7);line-height:1.55;margin-top:4px;max-width:260px}
.foot-col.brand-col p em{font-style:italic;color:#ffd4df;font-weight:500}
.foot-col.brand-col .locs{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.foot-col.brand-col .loc{display:flex;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,.78);font-weight:500;text-decoration:none;transition:color .15s ease}
.foot-col.brand-col a.loc:hover{color:#fff}
.foot-col.brand-col .loc .dt{width:5px;height:5px;border-radius:50%;background:#fff;flex-shrink:0}
.foot-col.brand-col .loc b{color:#fff;font-weight:600}

/* Footer Social-Icons (fehlte im Extrakt) */
.sub-foot .social{display:flex;gap:6px}
.sub-foot .social a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);transition:all .2s;text-decoration:none}
.sub-foot .social a:hover{background:#fff;border-color:#fff;color:var(--ani-red);transform:translateY(-2px)}
.sub-foot .social a svg{width:14px;height:14px;stroke-width:2}

/* Footer Sub-Bar (.sub-foot) — fehlte im Extrakt */
.sub-foot{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;padding-top:20px}
.sub-foot .copy{font-size:11px;color:rgba(255,255,255,.65);font-weight:500;letter-spacing:.2px}
.sub-foot .copy b{color:rgba(255,255,255,.9);font-weight:600}
.sub-foot .copy em{color:#ffd4df;font-style:italic;font-weight:500}
.sub-foot .center{display:flex;align-items:center;gap:18px;justify-content:center}
.sub-foot .sep{width:1px;height:22px;background:rgba(255,255,255,.2)}
.sub-foot .lang{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:rgba(255,255,255,.85);letter-spacing:.3px;padding:4px;background:rgba(255,255,255,.1);border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.15)}
.sub-foot .lang a{padding:4px 10px;border-radius:var(--r-pill);color:inherit;text-decoration:none;font-weight:500;transition:all .15s;font-size:10.5px;letter-spacing:.5px}
.sub-foot .lang a.act{background:#fff;color:var(--ani-red);font-weight:700}
.sub-foot .lang a:not(.act):hover{color:#fff}
.sub-foot .legal-links{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap}
.sub-foot .legal-links a{font-size:11px;color:rgba(255,255,255,.7);font-weight:500;letter-spacing:.2px;text-decoration:none;transition:color .15s}
.sub-foot .legal-links a:hover{color:#fff}

/* Zertifikate: echte Zertifikatsbilder + PDF-Link (Live-Inhalt 1:1) */
.cert-card.real{padding:0;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);transition:.18s}
.cert-card.real:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:#dcd3bd}
.cert-card.real .cert-img{width:100%;height:180px;object-fit:contain;background:var(--cream);padding:14px;display:block}
.cert-card.real .cert-lbl{padding:14px 16px;font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px}
.cert-card.real .cert-lbl .pdf{font-size:11px;font-weight:700;color:var(--ani-red);white-space:nowrap}

/* =========================================================================
   DETAILSEITEN (Redesign) - Dienstleistungs-Detail (Schweine/Rindvieh/Logistik/Kommunikation)
   Hero mit Bild + Titel, Intro-Prosa, dynamisches Karten-Grid (detail_cards_new.jsp).
   ========================================================================= */
.anc-new .det-hero{position:relative;min-height:52vh;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden}
.anc-new .det-hero-ov{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,14,12,.15) 0%,rgba(15,14,12,.35) 55%,rgba(15,14,12,.78) 100%);pointer-events:none}
.anc-new .det-hero-inner{position:relative;z-index:1;max-width:1200px;width:100%;margin:0 auto;padding:0 40px 46px}
.anc-new .det-hero .eye{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:700;
  color:#fff;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:14px}
.anc-new .det-hero .eye .ix{padding:3px 9px;border-radius:var(--r-pill);background:var(--ani-red);color:#fff;font-weight:700}
.anc-new .det-hero h1{color:#fff;font-size:52px;font-weight:500;letter-spacing:-.035em;line-height:1;margin:0;
  text-shadow:0 2px 30px rgba(0,0,0,.35)}

.anc-new .det-body{padding:64px 0 84px;background:var(--paper)}
.anc-new .det-inner{max-width:1200px;margin:0 auto;padding:0 40px}
.anc-new .det-intro{max-width:820px;margin:0 0 44px}
.anc-new .det-intro p{font-size:17px;line-height:1.72;color:var(--ink-2)}

.anc-new .det-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.anc-new .det-card{display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--border);
  border-radius:var(--r-card);overflow:hidden;transition:.18s}
.anc-new .det-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:#dcd3bd}
.anc-new .det-card-img{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#eee}
.anc-new .det-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.anc-new .det-card-body h3{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:0 0 10px}
.anc-new .det-card-txt{font-size:14px;line-height:1.62;color:var(--ink-2)}
.anc-new .det-card-txt p{margin:0 0 8px}
.anc-new .det-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;
  font-size:13px;font-weight:700;color:var(--ani-red);text-decoration:none}
.anc-new .det-more .ar{transition:transform .18s}
.anc-new .det-card:hover .det-more .ar{transform:translateX(3px)}

@media(max-width:900px){.anc-new .det-grid{grid-template-columns:repeat(2,1fr)}
  .anc-new .det-hero h1{font-size:40px}}
@media(max-width:640px){.anc-new .det-grid{grid-template-columns:1fr}
  .anc-new .det-hero{min-height:42vh}.anc-new .det-hero h1{font-size:32px}
  .anc-new .det-inner,.anc-new .det-hero-inner{padding-left:22px;padding-right:22px}
  .anc-new .det-intro p{font-size:15.5px}}

/* =========================================================================
   STANDALONE-SEITEN (Redesign) - Kontaktformular-Seite + Agenda-Seite
   ========================================================================= */
/* Abstand unter der schwebenden Pille, wenn kein Bild-Hero folgt (Kontaktseite) */
.anc-new .page-top-pad{height:96px}
/* Solid-Hero-Band ohne Bild (Agenda-Seite) */
.anc-new .det-hero.det-hero-solid{min-height:auto;padding:120px 0 40px;
  background:linear-gradient(120deg,#1a1712 0%,#2a2118 60%,var(--ani-red-deep) 140%)}
.anc-new .det-hero.det-hero-solid .det-hero-inner{padding-bottom:6px}
.anc-new .det-hero.det-hero-solid h1{font-size:44px}
/* Agenda-Seite: Sektions-Abstand */
.anc-new .page-agenda-wrap{padding:20px 0 40px;background:var(--paper)}
.anc-new .page-agenda-wrap .ag-sec{padding-top:44px}
/* Kontakt-Bestaetigung nach Submit */
.anc-new .kf-confirm{margin-bottom:20px;padding:14px 16px;border-radius:10px;
  background:#eaf7ee;border:1px solid #bfe3c8;color:#1c6b34;font-size:14px;line-height:1.5;font-weight:600}

/* =========================================================================
   RESPONSIVE-EBENE (Redesign)
   Desktop/Tablet-Landscape >=1024 : Floating Pill (Vorlage Desktop/Tablet)
   Mobile <=960 : Top-Bar + Burger + Slide-out-Menue (1:1 aus anicom-mobile-komplett.html)
   ========================================================================= */

/* ---- Mobile-Header-Elemente auf Desktop ausblenden ---- */
.fh-tools{display:none}
.fh-menu{display:none}
.fh-backdrop{display:none}

/* =======================  TABLET  (<=1023px)  ======================= */
@media(max-width:1024px){
  .ab-wrap,.dl-wrap,.hi-wrap,.cr-wrap,.vr-wrap,.lc-wrap{padding-left:32px;padding-right:32px}
  .hi-scroll-wrap{margin:0 -32px;padding:0 32px}
  .sec-head h2{font-size:36px}
  .vr-wrap .sec-head h2{font-size:42px}
  .ab-grid,.lb-split,.vr-grid,.pre-foot-grid{grid-template-columns:1fr}
  .lb-left{position:static}
  .dl-grid{grid-template-columns:repeat(2,1fr)}
  .cr-wrap .cert-grid{grid-template-columns:repeat(3,1fr)}
  .tm-tiles{grid-template-columns:repeat(2,1fr)}
  /* Personen-Karten dreispaltig statt zweispaltig: zweispaltig ergab hier
     465px breite Karten - breiter als auf dem Desktop - und verlangte damit
     930px Bildvorlage. Dreispaltig sind es 305px und 610px. */
  .tm-cards{grid-template-columns:repeat(3,1fr)}
  .anc-new .det-grid{grid-template-columns:repeat(2,1fr)}
  .pf-app{grid-template-columns:1fr;gap:18px}
  .foot-brand{grid-template-columns:1fr;gap:18px}
  .foot-brand .hs-contact{text-align:left}
  .foot-cols{grid-template-columns:repeat(3,1fr);gap:26px}
  .sub-foot{grid-template-columns:1fr;gap:16px;justify-items:center;text-align:center}
  .sub-foot .legal-links{justify-content:center}
  /* Hero statisch stapeln, damit App-Card nicht ueberlappt */
  .hero-b{height:auto;min-height:auto}
  .hero-b .content{position:static;grid-template-columns:1fr;gap:26px;left:auto;right:auto;bottom:auto;padding:130px 40px 56px}
  .hero-b .content h1{font-size:56px}
  .hero-b .app-card{width:520px;max-width:100%}
}


/* =======================  KOMPAKTE ERSTANSICHT MOBILE (<=960px)  =======================
   Leitbild  -> V4: erste 2 Werte offen, Rest hinter einem Button
   Kernbereiche -> V1: Akkordeon mit Vorschaubild
   Geschichte -> V4 + umgekehrte Reihenfolge (neuestes zuoberst)
   Alles greift nur, wenn compact_new.jsp die Klasse js-compact gesetzt hat.
   Ohne JavaScript bleibt die Seite vollstaendig lesbar. */
@media(max-width:960px){

  /* ---- gemeinsamer "Alle anzeigen"-Button ---- */
  .js-compact .anc-showall{display:block;width:100%;margin-top:14px;padding:13px 18px;
    border-radius:var(--r-pill);border:1px solid var(--ani-red);background:var(--paper);
    color:var(--ani-red);font-family:inherit;font-size:13.5px;font-weight:600;
    letter-spacing:-.005em;cursor:pointer;transition:background .15s ease,color .15s ease}
  .js-compact .anc-showall:hover{background:var(--ani-red);color:#fff}

  /* ---- Leitbild: V4 ---- */
  .js-compact .lb-right .lb-card.hidden-init{display:none}
  .js-compact .lb-right.all-open .lb-card.hidden-init{display:block}

  /* ---- Kernbereiche: V1, Akkordeon mit Vorschaubild ---- */
  /* Die unsichtbare Vollflaechen-Verlinkung wuerde jeden Tipp auf den Kopf abfangen */
  .js-compact .dl-card .dl-stretch{display:none}
  .js-compact .dl-card{padding:0}
  .js-compact .dl-card > .img-wrap,
  .js-compact .dl-card > .body{display:none}
  .js-compact .dl-card.is-open > .img-wrap,
  .js-compact .dl-card.is-open > .body{display:block}
  .js-compact .dl-card .acc-head{display:flex;align-items:center;gap:11px;width:100%;
    padding:13px 15px;text-align:left;background:none;border:none;cursor:pointer;
    font-family:inherit;color:inherit}
  .js-compact .dl-card .acc-head .th{width:42px;height:42px;border-radius:9px;flex-shrink:0;
    background-size:cover;background-position:center;border:1px solid var(--border)}
  .js-compact .dl-card .acc-head .n{font-size:10px;font-weight:700;color:var(--ani-red);
    letter-spacing:.6px;flex-shrink:0;font-feature-settings:"tnum"}
  .js-compact .dl-card .acc-head .t{flex:1;min-width:0;font-size:15px;font-weight:600;
    letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .js-compact .dl-card .acc-head .cv{margin-left:auto;font-size:11px;color:var(--ink-3);
    transition:transform .2s ease;flex-shrink:0}
  .js-compact .dl-card.is-open .acc-head .cv{transform:rotate(180deg)}
  .js-compact .dl-card.is-open .acc-head{border-bottom:1px solid var(--border)}

  /* ---- Geschichte: V4, neuestes zuoberst ---- */
  /* column-reverse dreht nur die Darstellung; die Reihenfolge im Quelltext bleibt
     chronologisch, damit die Timeline auf Desktop weiterhin 1966 -> heute laeuft. */
  .js-compact .hi-scroll{display:flex;flex-direction:column-reverse;gap:14px}
  .js-compact .hi-scroll .hi-card.hidden-init{display:none}
  .js-compact .hi-scroll.all-open .hi-card.hidden-init{display:flex}
  .js-compact .hi-scroll .anc-showall{margin-top:0}
}

/* Breitere Mobile-Viewports (Tablet hochkant): mehr Luft, groesseres Phone */
@media(min-width:600px) and (max-width:960px){
  .hero-b .app-card .app-text{padding:36px 40px 24px}
  .hero-b .app-card .app-text h4{font-size:28px}
  .hero-b .app-card .app-text p{font-size:15px}
  .hero-b .app-card .phone-side{min-height:270px;padding:34px 230px 34px 40px}
  .hero-b .app-card .side-col{max-width:260px}
  .hero-b .app-card .phone-mock{width:180px;right:40px;top:36px}
  .hero-b .app-card .phone-side{min-height:300px}
}

/* =======================  MOBILE  (<=960px) — Vorlage anicom-mobile  ======================= */
@media(max-width:960px){
  /* ===== Header: Pille -> transparente Top-Bar (Logo | Tools) ===== */
  .fh-b{position:fixed;top:0;left:0;right:0;transform:none;margin:10px 12px 0;height:44px;
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:0 4px;
    background:transparent;box-shadow:none;border-radius:var(--r-pill);z-index:100;overflow:visible}
  /* KEIN env(safe-area-inset-top) hier. Das Viewport-Meta ist ohne viewport-fit=cover,
     die Seite reicht also nie unter Statusbar/Notch - der Inset waere immer sinnlos.
     Diverse Android-Browser liefern ihn trotzdem als Statusbar-Hoehe zurueck; das ergab
     einen leeren Streifen oben und Logo+Icons in einer zweiten Zeile darunter. */
  .fh-b.stuck{margin:0;border-radius:0;height:44px;padding-top:0;
    /* Weisse Leiste statt abgedunkelt. Die Trennung zum Inhalt kommt aus Hairline
       und Schatten, weil die meisten Sektionen darunter selbst weiss/creme sind. */
    background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    box-shadow:0 4px 14px -8px rgba(15,12,8,.18)}
  /* Die weisse Logo-Kachel wuerde auf weisser Leiste als Kasten sichtbar bleiben */
  .fh-b.stuck .fh-logo-cove{background:transparent;box-shadow:none}
  .fh-b .fh-logo-cove{height:32px;width:auto;min-width:64px;background:#fff;border:none;border-radius:8px;
    padding:0 9px;display:flex;align-items:center;justify-content:center;justify-self:start}
  .fh-b .fh-logo-cove .fh-logo-b{height:18px}
  /* Desktop-Coves aus */
  .fh-b .fh-dark,.fh-b .fh-login-cove,.fh-b .fh-red{display:none}
  /* Mobile-Tools an (Login-Icon + Burger) */
  .fh-tools{display:flex;grid-column:3;align-items:center;gap:5px;justify-self:end}
  .fh-btn{width:32px;height:32px;border-radius:8px;border:none;display:flex;align-items:center;
    justify-content:center;cursor:pointer;color:#fff;padding:0;transition:background .2s;text-decoration:none;position:relative}
  .fh-btn.action{background:var(--ani-red);box-shadow:0 4px 10px -3px rgba(211,14,69,.5)}
  .fh-btn.action svg{width:15px;height:15px;stroke-width:2}
  .fh-btn.action .icon-x{display:none}
  .fh-btn.action.is-open .icon-burger{display:none}
  .fh-btn.action.is-open .icon-x{display:block}

  /* ===== Backdrop + Slide-out-Menue ===== */
  .fh-backdrop{display:block;position:fixed;inset:0;z-index:60;background:rgba(15,12,8,.45);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;visibility:hidden;
    transition:opacity .3s ease,visibility .3s ease}
  .fh-backdrop.is-open{opacity:1;visibility:visible}
  /* max-height + overflow-y sind hier keine Feinheit, sondern noetig:
     solange das Menue offen ist, traegt der body die Klasse fh-menu-lock mit
     overflow:hidden. Ist das Menue hoeher als der sichtbare Bereich - im
     Navigationsmodus 605px, dazu bei geoeffneter Bildschirmtastatur nur noch
     ein Bruchteil der Fensterhoehe -, war der untere Teil ohne jede
     Scrollmoeglichkeit unerreichbar. dvh statt vh, damit die ein- und
     ausfahrende Adressleiste und die Tastatur mitgerechnet werden; die
     vh-Zeile davor bleibt als Rueckfall fuer aeltere Browser stehen. */
  .fh-menu{display:block;position:fixed;top:0;right:0;left:0;z-index:70;background:#fff;
    padding:72px 20px 20px;transform:translateY(-100%);
    max-height:100vh;max-height:100dvh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    transition:transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 14px 40px -10px rgba(0,0,0,.25)}
  .fh-menu.is-open{transform:translateY(0)}
  .fh-menu ul{list-style:none;padding:0;margin:0}
  .fh-menu > ul > li{border-bottom:1px solid rgba(0,0,0,.08)}
  .fh-menu > ul > li:last-child{border-bottom:none}
  /* Beschriftung links, Aufklapp-Pfeil rechts am Rand. Vorher stand die
     Beschriftung rechts und der Pfeil ganz links - rund 250px voneinander
     entfernt, obwohl der Pfeil zur Beschriftung gehoert. */
  .fh-menu .row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
    padding:15px 6px;cursor:pointer;font-size:17px;font-weight:500;letter-spacing:-.015em;
    color:var(--ink);text-decoration:none;transition:background .2s ease}
  .fh-menu .row:hover{background:rgba(0,0,0,.03)}
  .fh-menu .row .chev{width:14px;height:14px;display:flex;align-items:center;justify-content:center;
    color:var(--ink-3);transition:transform .25s ease,color .2s ease}
  .fh-menu .row .chev svg{width:10px;height:10px;stroke-width:2.5}
  .fh-menu .row .nm{text-align:left;justify-self:start;order:1}
  .fh-menu .row .chev{order:2;justify-self:end}
  /* Aktuelle Seite: Balken am Rand und roter Text. Die Klasse act setzt das
     Skript im Kopfbereich anhand der aufgerufenen Adresse. */
  .fh-menu li.act > .row{color:var(--ani-red);font-weight:700;position:relative}
  .fh-menu li.act > .row::before{content:"";position:absolute;left:-6px;top:9px;bottom:9px;
    width:3px;border-radius:2px;background:var(--ani-red)}
  .fh-menu .sub li.act > .row{background:var(--ani-red-soft);color:var(--ani-red-ink);font-weight:700}
  .fh-menu .row.simple{grid-template-columns:1fr}
  .fh-menu .row.simple .nm{justify-self:start;text-align:left}
  .fh-menu li.has-sub.is-open > .row{background:var(--ani-red);color:#fff;
    margin-left:-20px;margin-right:-20px;padding-left:26px;padding-right:26px}
  .fh-menu li.has-sub.is-open > .row .chev{color:#fff;transform:rotate(90deg)}
  .fh-menu li.has-sub > .row .chev{transform:rotate(0deg)}
  .fh-menu .sub{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.2,.8,.2,1);
    background:var(--cream);margin:0 -20px;padding:0 20px}
  .fh-menu li.has-sub.is-open > .sub{max-height:760px}
  .fh-menu .sub li{border-bottom:1px solid rgba(0,0,0,.06)}
  .fh-menu .sub li:last-child{border-bottom:none}
  /* Unterpunkte haben statt eines Pfeils ein leeres erstes span - ohne eigene
     Regel landet die Beschriftung sonst weiterhin in der rechten Spalte. */
  .fh-menu .sub .row{font-size:14px;font-weight:500;color:var(--ink-2);padding:12px 6px 12px 20px;
    grid-template-columns:1fr}
  .fh-menu .sub .row > span:first-child:empty{display:none}
  .fh-menu .sub .row .nm{justify-self:start;text-align:left}
  .fh-menu .sub .row:hover{background:rgba(0,0,0,.04)}
  .fh-menu .foot{margin-top:18px;padding-top:18px;border-top:1px solid rgba(0,0,0,.10);
    display:flex;justify-content:space-between;align-items:center;
    font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3)}
  .fh-menu .foot .lang{display:inline-flex;gap:8px}
  .fh-menu .foot .lang .chip{padding:4px 10px;border-radius:100px;background:var(--cream);
    color:var(--ink-3);cursor:pointer;letter-spacing:.5px;text-decoration:none}
  .fh-menu .foot .lang .chip.on{background:var(--ani-red);color:#fff}
  body.fh-menu-lock{overflow:hidden}

  /* ===== Sektionen: einspaltig (Mobile-Vorlage) ===== */
  .ab-wrap,.dl-wrap,.hi-wrap,.cr-wrap,.vr-wrap,.lc-wrap{padding-left:18px;padding-right:18px;padding-top:52px;padding-bottom:56px}
  .hi-scroll-wrap{margin:0 -18px;padding:0 18px}
  .ag-sec,.jb-sec,.kf-sec{padding:52px 0}
  .anc-new .det-body{padding:48px 0 60px}
  .anc-new .det-inner,.anc-new .det-hero-inner{padding-left:18px;padding-right:18px}
  .sec-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .sec-head h2{font-size:29px}
  .vr-wrap .sec-head h2{font-size:32px}
  .sec-head .all{justify-self:start}
  .anc-new .det-hero h1{font-size:31px}
  .anc-new .det-hero{min-height:44vh}
  .anc-new .det-intro p{font-size:15.5px}
  .ab-grid,.lb-split,.lb-right,.vr-grid,.vr-grid2,.pre-foot-grid,.ag-grid,.jb-wrap,
  .dl-grid,.lc-grid,.tm-tiles,.cr-wrap .cert-grid,.anc-new .det-grid{grid-template-columns:1fr}
  /* Personenfotos mehrspaltig: bei bis zu 37 Personen pro Bereich verkuerzt das
     die Scrollstrecke erheblich. Dreispaltig bis hinunter zu 761px, weil zwei
     Spalten dort 405 bis 435px breite Karten ergaben - die groessten der ganzen
     Seite und damit der hoechste Anspruch an die Bildaufloesung ueberhaupt. */
  .tm-cards{grid-template-columns:repeat(3,1fr);gap:10px}
  @media(max-width:760px){.tm-cards{grid-template-columns:repeat(2,1fr)}}
  /* Kopf + Fotoraster werden per JS in .tm-tiles unter die aktive Leiste geschoben */
  .tm-tiles > .tm-active-head,.tm-tiles > .tm-panel{grid-column:1/-1}
  .tm-tiles > .tm-active-head.show{margin-top:14px;padding-bottom:10px}
  .tm-tiles > .tm-panel.show{margin-bottom:6px}
  .tm-active-head{flex-wrap:wrap;gap:8px 10px}
  .tm-active-head h3{font-size:20px;flex:1;min-width:0}
  .tm-active-head.show{max-height:140px}
  .tm-active-head .clear{font-size:10.5px;padding:4px 9px}

  /* ---- Verwaltungsrat: Foto vor die Namen, Namen als Bildlegende ----
     Die Zusaetze "hintere/vordere Reihe v.l." lassen sich nur nachvollziehen,
     wenn das Gruppenfoto vorher gesehen wurde - auf Mobile stand es bisher darunter.
     Die Pillen weichen einer Aufzaehlung im Fliesstext; die Kommas kommen aus CSS,
     damit die Pillenform auf Desktop unveraendert bleibt. */
  /* Reihenfolge auf Mobile: Beschreibungstext -> Foto -> Namen.
     .vr-desc wird dafuer per display:contents aufgeloest, damit seine Kinder
     (Text, Anzahl, Namen) zu Flex-Items von .vr-grid2 werden und einzeln
     um das Foto herum sortiert werden koennen. */
  /* gap:40px stammt vom Desktop-Raster und wuerde als Flex-Gap zwischen JEDEM
     der vier Bloecke stehen -> Abstaende selbst setzen. */
  /* Die Kurzfassung im Sektionskopf sagt dasselbe wie der erste Satz des
     Anicom-Originaltexts direkt darunter. Auf Mobile kostet die Doppelung
     inkl. Trennlinie rund 145px - deshalb hier nur der Originaltext. */
  .vr-wrap .sec-head .l > p{display:none}
  .vr-wrap .sec-head{padding-bottom:0;border-bottom:none;margin-bottom:0}
  .vr-desc > .lead{margin-top:14px}
  .vr-grid2{display:flex;flex-direction:column;gap:0}
  .vr-desc{display:contents}
  .vr-desc > .lead{order:1}
  .vr-photo{order:2;margin:20px 0 0}
  .vr-count{order:3;margin-top:20px}
  .vr-rows{order:4;margin-top:12px}

  /* ---- Zertifizierungen: kompakte Listenzeilen statt gestapelter Bildkarten ----
     Ein Zertifikatsscan ist bei 390 px Breite ohnehin nicht lesbar; die Aussage
     steckt im Titel und im verlinkten PDF. Das Vorschaubild bleibt als Wiedererkennung. */
  .cr-wrap .cert-grid{gap:8px}
  .cert-card.real{flex-direction:row;align-items:center;gap:12px;padding:10px 14px 10px 10px}
  .cert-card.real .cert-img{width:54px;height:54px;flex:0 0 54px;padding:6px;border-radius:9px}
  .cert-card.real .cert-lbl{border-top:none;padding:0;flex:1;min-width:0;font-size:13.5px;
    text-align:left;gap:10px}
  /* min-width:auto (Flex-Standard) laesst den Titel nicht unter sein laengstes Wort
     schrumpfen -> bei 320px lief "Energieeffizienz" aus der Karte. Mit min-width:0
     bricht der Titel stattdessen um und der PDF-Marker bleibt rechts stehen. */
  .cert-card.real .cert-lbl > span:first-child{min-width:0;flex:1 1 auto}
  .cert-card.real:hover{transform:none}
  /* Kernbereiche: Karten-Spalten-Spannen zuruecksetzen, Voll-Karte vertikal stapeln */
  .dl-card .img-wrap{height:230px}
  .dl-card.big,.dl-card.full{grid-column:auto}
  .dl-card.full{flex-direction:column}
  .dl-card.full .img-wrap{width:100%;height:200px;border-top:none}
  .dl-card.full .body{border-left:none;border-top:1px solid var(--border);padding:24px 22px;justify-content:flex-start}
  .dl-card.full .body h3{font-size:26px}
  .foot-cols{grid-template-columns:1fr;gap:22px}
  .foot-brand{grid-template-columns:1fr;gap:16px;text-align:left}
  .foot-brand .hs-contact{text-align:left}
  .sub-foot{grid-template-columns:1fr;gap:14px;justify-items:center;text-align:center}
  .main-foot{padding-left:20px;padding-right:20px}
  .ab-stats .stat{grid-template-columns:auto 1fr;gap:14px}
  .ab-stats .stat .v{font-size:34px;min-width:78px}
  .ab-foot,.dl-foot,.hi-foot{flex-direction:column;align-items:flex-start;gap:16px}
  .ab-foot .actions,.dl-foot .actions,.hi-foot .actions{flex-wrap:wrap}
  /* Chronik: auf Mobile vertikal gestapelt statt horizontal scrollen */
  .hi-master{grid-template-columns:1fr;gap:8px;text-align:center;padding:14px 18px}
  .hi-master .ruler{display:none}
  .hi-scroll-wrap{margin:0;padding:0;overflow:visible}
  .hi-scroll-wrap::before,.hi-scroll-wrap::after{display:none}
  .hi-scroll{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;scroll-snap-type:none;padding-bottom:0}
  .hi-card{min-width:0;width:auto}
  .hi-arrows{display:none}

  /* ===== Hero (Mobile): Vollbild-Bild mit Overlay-Titel; App-Card als eigene Sektion darunter (Vorlage anicom-mobile) ===== */
  .hero-b{height:auto;min-height:auto}
  /* Bild deckt nur den Hero-Overlay-Bereich, nicht die App-Card */
  .hero-b .bg{top:0;bottom:auto;height:84vh;min-height:540px}
  .hero-b .bg::after{top:0;bottom:auto;height:84vh;min-height:540px}
  .hero-b .content{position:static;display:block;grid-template-columns:1fr;gap:0;left:auto;right:auto;bottom:auto;padding:0}
  /* Titel/Lead/CTAs unten ins Bild gelegt */
  .hero-b .content .ly{min-height:84vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;padding:0 22px 42px;position:relative;z-index:3}
  .hero-b .content h1{font-size:40px;line-height:1.03;margin-bottom:14px}
  .hero-b .content .lead{font-size:14px;max-width:none;margin-bottom:20px}
  .hero-b .content .ctas{flex-wrap:wrap}
  /* App-Card: eigene, weisse Sektion unter dem Bild, einspaltig */
  .hero-b .app-card{width:auto;margin:0;border-radius:0;border-left:none;border-top:3px solid var(--ani-red);box-shadow:none;background:#fff;grid-template-columns:1fr;position:relative;z-index:3}
  .hero-b .app-card:hover{transform:none;box-shadow:none}
  /* Kompakte Mobile-Fassung: Text oben, darunter rotes Band mit Store-Buttons links
     und angeschnittenem Phone rechts. Das Phone liegt absolut, damit seine volle Hoehe
     die Bandhoehe nicht diktiert - sonst schiebt es die Buttons aus dem Band heraus. */
  /* B10: Kicker wandert aus dem weissen Block ins rote Band */
  .hero-b .app-card .app-text{padding:26px 22px 16px}
  .hero-b .app-card .app-text .kw{display:none}
  .hero-b .app-card .side-col .kw-band{font-size:10px;font-weight:700;letter-spacing:1px;
    text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:1px}
  .hero-b .app-card .app-text h4{font-size:23px;line-height:1.12;margin-bottom:8px}
  .hero-b .app-card .app-text p{font-size:13.5px;line-height:1.55;margin-bottom:0}
  .hero-b .app-card .app-text .stores{display:none}
  .hero-b .app-card .app-text .more-link{display:none}
  .hero-b .app-card .phone-side{display:block;position:relative;overflow:hidden;border-radius:0;
    min-height:248px;padding:24px 160px 24px 22px}
  .hero-b .app-card .side-col{display:flex;flex-direction:column;gap:9px;position:relative;z-index:2;max-width:210px}
  .hero-b .app-card .side-col .stores{display:flex;flex-direction:column;gap:8px;margin-bottom:0}
  .hero-b .app-card .phone-side .store{background:#fff;color:var(--ink);border:none;padding:9px 12px;gap:10px;
    box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
  .hero-b .app-card .phone-side .store:hover{background:#fff;transform:translateY(-1px)}
  .hero-b .app-card .phone-side .store .si{color:var(--ink)}
  .hero-b .app-card .phone-side .store small{color:var(--ink-3);font-size:8.5px}
  .hero-b .app-card .phone-side .store strong{font-size:12.5px}
  /* PDF-Link als weisse Pille - er ist ein Download, kein Sprungziel, und soll sich
     deshalb von den beiden Store-Buttons unterscheiden ohne unterzugehen. */
  .hero-b .app-card .side-col .more-link{display:inline-flex;align-items:center;gap:7px;
    align-self:flex-start;margin-top:5px;padding:8px 14px;border-radius:var(--r-pill);
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);
    color:#fff;font-size:12px;font-weight:600;transition:background .15s ease}
  .hero-b .app-card .side-col .more-link:hover{background:rgba(255,255,255,.28);gap:7px}
  /* Verkuerzter Geraeterahmen: beschnitten wird der Screenshot im Rahmen, nicht das Geraet.
     Das Phone hat dadurch oben UND unten eine geschlossene Kante und wirkt nicht abgehackt. */
  .hero-b .app-card .phone-mock{position:absolute;z-index:1;width:132px;right:14px;top:26px;
    aspect-ratio:375/560;transform:rotate(3deg);
    box-shadow:0 22px 44px -14px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.25)}
  .hero-b .app-card .phone-screen .phone-shot{object-position:top center}
  .hero-b .app-card:hover .phone-mock{transform:rotate(3deg)}

  /* ===== Kontaktformular ===== */
  .kf-split{grid-template-columns:1fr}
  .kf-grid{grid-template-columns:1fr}
  .kf-info,.kf-form{padding:26px 22px}
  .jb-body{padding-left:20px}
}

/* =========================================================================
   TITEL-AKZENT reduziert: Kursiv/Rot nur noch im Hero-Headline.
   Sektions-Titel (h2/h3 <em>) werden neutral gesetzt (kein Kursiv, keine Farbe).
   Zum Reaktivieren einzelner Sektionen: hier gezielt ausnehmen.
   (Hero nutzt h1 / App-Card h4 und bleibt unberuehrt.)
   ========================================================================= */
.anc-new h2 em,.anc-new h3 em{font-style:normal !important;color:inherit !important}

/* =======================  RECHTSTEXTE (Impressum / Datenschutz)  ======================= */
.lg-wrap{background:var(--paper);padding:64px 48px 84px}
.lg-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.lg-doc{min-width:0}
.lg-sec{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--border)}
.lg-sec:last-child{border-bottom:none;margin-bottom:0}
.lg-sec h2{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin-bottom:12px;color:var(--ink)}
.lg-sec h2 em{font-style:italic;color:var(--ani-red);font-weight:600}
.lg-sec h3{font-size:15px;font-weight:600;margin:18px 0 8px;color:var(--ink)}
.lg-sec p{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin-bottom:12px}
.lg-sec p:last-child{margin-bottom:0}
.lg-sec p b,.lg-sec strong{color:var(--ink);font-weight:600}
.lg-sec ul,.lg-sec ol{margin:0 0 12px 20px;padding:0}
.lg-sec li{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin-bottom:6px}
.lg-sec a{color:var(--ani-red);text-decoration:none;border-bottom:1px solid var(--ani-red)}
.lg-sec a:hover{color:var(--ani-red-deep)}
.lg-sec .addr{font-size:14.5px;line-height:1.7;color:var(--ink-2)}
/* Platzhalter-Markierung - verschwindet sobald der Wortlaut eingesetzt ist */
.lg-todo{display:inline-block;font-size:12.5px;font-weight:600;color:var(--ani-red-ink);
  background:var(--ani-red-soft);border:1px dashed var(--ani-red);border-radius:8px;padding:8px 12px}
/* Inhaltsverzeichnis */
.lg-toc{background:var(--cream);border:1px solid var(--border);border-radius:var(--r-card);padding:20px 24px;margin-bottom:34px}
.lg-toc h3{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ani-red);margin-bottom:12px}
.lg-toc ol{margin:0;padding-left:18px;columns:2;column-gap:28px}
.lg-toc li{font-size:13px;line-height:1.9;color:var(--ink-2)}
.lg-toc a{color:var(--ink-2);text-decoration:none}
.lg-toc a:hover{color:var(--ani-red)}
/* Seitenspalte */
.lg-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.lg-card{background:var(--cream);border:1px solid var(--border);border-radius:var(--r-card);padding:20px 22px}
.lg-card h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px;color:var(--ink)}
.lg-card p{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin-bottom:14px}
.lg-dl{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:var(--r-pill);
  background:var(--ani-red);color:#fff;text-decoration:none;font-size:13px;font-weight:600;
  box-shadow:0 8px 20px -8px rgba(211,14,69,.6);transition:transform .15s ease}
.lg-dl:hover{transform:translateY(-1px)}
.lg-dl .ic{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;font-size:11px}
.lg-link{font-size:13px;font-weight:600;color:var(--ani-red);text-decoration:none;
  border-bottom:1px solid var(--ani-red);padding-bottom:1px}
@media(max-width:1024px){
  .lg-wrap{padding:52px 32px 64px}
  .lg-inner{grid-template-columns:1fr;gap:34px}
  .lg-aside{position:static;flex-direction:row;flex-wrap:wrap}
  .lg-card{flex:1 1 260px}
}
@media(max-width:960px){
  .lg-wrap{padding:40px 18px 52px}
  .lg-toc ol{columns:1}
  .lg-sec h2{font-size:18px}
  .lg-aside{flex-direction:column}
  .lg-card{flex:1 1 auto}
}

/* Ankerspruenge: Offset fuer den fixierten Header, damit der Sektionsanfang
   nicht darunter verschwindet (Menue -> #history, #team, #schafe usw.) */
.anc-new [id]{scroll-margin-top:86px}
@media(max-width:960px){.anc-new [id]{scroll-margin-top:70px}}

/* === Detailkarten: Formatierung fuer DB-Inhalte (newsContent enthaelt HTML) === */
.anc-new .det-card-txt a{color:var(--ani-red);text-decoration:none;font-weight:500;
  border-bottom:1px solid rgba(211,14,69,.4);transition:border-color .15s ease}
.anc-new .det-card-txt a:hover{border-bottom-color:var(--ani-red)}
/* PDF-Links aus der DB als erkennbare Download-Zeile */
.anc-new .det-card-txt a[href$=".pdf"],.anc-new .det-card-txt a[href$=".PDF"]{
  display:inline-flex;align-items:center;gap:7px;margin:4px 0;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--ani-red-soft);border:1px solid rgba(211,14,69,.25);border-bottom-color:rgba(211,14,69,.25);
  font-size:12.5px;font-weight:600;color:var(--ani-red-ink)}
.anc-new .det-card-txt a[href$=".pdf"]::before,.anc-new .det-card-txt a[href$=".PDF"]::before{content:"\2193";font-weight:700}
.anc-new .det-card-txt a[href$=".pdf"]:hover,.anc-new .det-card-txt a[href$=".PDF"]:hover{
  background:var(--ani-red);color:#fff;border-color:var(--ani-red)}
.anc-new .det-card-txt ul,.anc-new .det-card-txt ol{margin:8px 0 10px 18px;padding:0}
.anc-new .det-card-txt li{margin-bottom:4px;line-height:1.55}
.anc-new .det-card-txt b,.anc-new .det-card-txt strong{color:var(--ink);font-weight:600}
.anc-new .det-card-txt br+br{line-height:1.9}

/* =======================  KONTAKT-BLOCK Detailseiten (dk-*)  ======================= */
.dk-wrap{background:var(--cream);border-top:1px solid var(--border);padding:64px 48px 72px}
.dk-inner{max-width:1200px;margin:0 auto}
.dk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:30px;flex-wrap:wrap}
.dk-head .eye{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ani-red);margin-bottom:10px}
.dk-head h2{font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1.1;margin:0 0 8px;color:var(--ink)}
.dk-head h2 em{font-style:italic;color:var(--ani-red);font-weight:500}
.dk-head p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0;max-width:520px}
.dk-cta{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:var(--r-pill);
  background:var(--ani-red);color:#fff;text-decoration:none;font-size:13.5px;font-weight:600;flex-shrink:0;
  box-shadow:0 10px 24px -10px rgba(211,14,69,.65);transition:transform .15s ease,gap .15s ease}
.dk-cta:hover{transform:translateY(-1px);gap:14px}
.dk-cta .ar{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;font-size:11px}
.dk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dk-card{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);
  padding:20px 22px;display:flex;flex-direction:column;transition:border-color .2s ease,box-shadow .2s ease}
.dk-card:hover{border-color:var(--ani-red);box-shadow:0 10px 24px -12px rgba(15,12,8,.18)}
.dk-reg{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ani-red);margin-bottom:8px}
.dk-name{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:4px}
.dk-addr{font-size:13px;line-height:1.6;color:var(--ink-2);margin-bottom:12px}
.dk-l{display:block;font-size:13px;line-height:1.7;color:var(--ink-2);text-decoration:none}
.dk-l:hover{color:var(--ani-red)}
.dk-map{margin-top:auto;padding-top:12px;font-size:12px;font-weight:600;color:var(--ani-red);text-decoration:none}
.dk-map:hover{text-decoration:underline}
@media(max-width:1024px){
  .dk-wrap{padding:52px 32px 60px}
  .dk-grid{grid-template-columns:repeat(2,1fr)}
  .dk-head h2{font-size:28px}
}
@media(max-width:960px){
  .dk-wrap{padding:44px 18px 52px}
  .dk-grid{grid-template-columns:1fr}
  .dk-head{flex-direction:column;align-items:flex-start;gap:18px}
  .dk-head h2{font-size:26px}
  .dk-cta{width:100%;justify-content:center}
}

/* ==========================================================================
   KUNDENBEREICH (geschuetzte Seiten) - Farbschicht ueber W3.CSS
   Nur aktiv wenn <body class="anc-sec">. Markup, Formulare, displaytag und
   DWR bleiben unveraendert - hier wird ausschliesslich umgefaerbt/abgestimmt.
   ========================================================================== */
body.anc-sec{background:var(--cream);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;margin:0}
/* Platz fuer den schwebenden Header */
body.anc-sec .anc-sec-top{height:104px}
@media(max-width:960px){body.anc-sec .anc-sec-top{height:64px}}
/* Sprungziele nicht unter den schwebenden Kopfbereich rutschen lassen -
   betrifft die Trefferliste der Betriebsauswahl, die das Skript im
   Kopfbereich in den Blick holt. */
body.anc-sec [id]{scroll-margin-top:112px}
@media(max-width:960px){body.anc-sec [id]{scroll-margin-top:74px}}

/* Header-Icons rechts (Passwort / Logout) */
.fh-sec-tools{display:flex;align-items:center;gap:8px;padding:0 14px}
.fh-sec-tools .fh-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--cream);border:1px solid var(--border);color:var(--ink-2);text-decoration:none;transition:all .18s ease}
.fh-sec-tools .fh-ic svg{width:17px;height:17px}
.fh-sec-tools .fh-ic:hover{background:var(--ani-red-soft);border-color:var(--ani-red);color:var(--ani-red)}
.fh-sec-tools .fh-ic-out:hover{background:var(--ani-red);border-color:var(--ani-red);color:#fff}
@media(max-width:960px){.fh-sec-tools{display:none}}

/* --- W3-Farbklassen auf die Redesign-Palette bringen --- */
body.anc-sec .w3-theme{background-color:var(--ani-red) !important;color:#fff !important}
body.anc-sec .w3-theme-inverse{background-color:var(--paper) !important;color:var(--ink) !important;
  border-bottom:1px solid var(--border)}
body.anc-sec .w3-text-theme{color:var(--ani-red) !important}
body.anc-sec .w3-theme-l5{background-color:var(--ani-red-soft) !important}
body.anc-sec .w3-theme-l6{background-color:var(--cream) !important}
body.anc-sec .w3-hover-theme:hover{background-color:var(--ani-red) !important;color:#fff !important}

/* Karten / Container */
body.anc-sec .w3-card,body.anc-sec .w3-card-2,body.anc-sec .w3-card-4{
  background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:0 8px 24px -14px rgba(15,12,8,.18) !important;overflow:hidden}
body.anc-sec .w3-round,body.anc-sec .w3-round-small{border-radius:var(--r-card) !important}

/* Ueberschriftenleiste der Tabelle */
body.anc-sec h6.w3-theme{font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding:12px 16px;margin:0;border-radius:0 !important}
body.anc-sec h6.w3-theme .messages_small{font-weight:400;opacity:.85}

/* Tabellen */
body.anc-sec table.w3-table-all{border:none;font-size:14px}
body.anc-sec table.w3-table-all th{background:var(--paper);color:var(--ani-red);
  font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:2px solid var(--border);padding:12px 14px;text-align:left}
body.anc-sec table.w3-table-all th a{color:var(--ani-red);text-decoration:none}
body.anc-sec table.w3-table-all td{border-bottom:1px solid var(--border);padding:11px 14px;color:var(--ink-2)}
body.anc-sec table.w3-table-all tr:last-child td{border-bottom:none}
body.anc-sec table.w3-table-all tr:nth-child(even) td{background:var(--cream)}
body.anc-sec .w3-hoverable tbody tr:hover td{background:var(--ani-red-soft)}
body.anc-sec table.w3-table-all input[type="checkbox"]{width:17px;height:17px;accent-color:var(--ani-red);cursor:pointer}

/* Buttons */
body.anc-sec .w3-btn.w3-theme{background:var(--ani-red) !important;color:#fff !important;
  border:none !important;border-radius:var(--r-pill) !important;padding:11px 22px !important;
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  box-shadow:0 10px 22px -10px rgba(211,14,69,.6);transition:transform .15s ease}
body.anc-sec .w3-btn.w3-theme:hover{transform:translateY(-1px);background:var(--ani-red-deep) !important}
body.anc-sec .w3-btn img{display:none}   /* altes Icon-PNG raus, Text traegt den Button */

/* Kontextzeile (Betrieb) */
body.anc-sec .w3-theme-inverse{font-size:13.5px;font-weight:600;padding:12px 16px}

/* Hinweistexte */
body.anc-sec .w3-text-theme.w3-small{font-size:12.5px;color:var(--ink-3) !important;line-height:1.6}

/* Footerlight */
body.anc-sec .w3-margin a{color:var(--ani-red);text-decoration:none}
body.anc-sec .w3-margin a:hover{text-decoration:underline}

/* --- Sitzungswaechter (Markup und Zaehler in header_sec_new.jsp) ---
   Der Balken sitzt unten, damit er den Kopfbereich nicht verdeckt; die
   Ablaufmeldung legt sich ueber die Seite, weil danach nichts mehr
   funktioniert und ein uebersehbarer Hinweis genau das Problem waere. */
.anc-sess{position:fixed;left:12px;right:12px;bottom:12px;z-index:1400;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 14px;border-radius:var(--r-card);
  background:var(--ink);color:#fff;
  box-shadow:0 12px 30px -12px rgba(15,12,8,.55);
  font-size:13.5px;line-height:1.4}
.anc-sess[hidden]{display:none}
.anc-sess .txt{flex:1 1 200px;min-width:0}
.anc-sess .txt b{font-variant-numeric:tabular-nums}
.anc-sess .btn{flex:0 0 auto;border:none;cursor:pointer;
  padding:9px 16px;min-height:40px;border-radius:var(--r-pill);
  background:var(--ani-red);color:#fff;font-family:inherit;font-size:13.5px;font-weight:600}
.anc-sess .btn:hover{background:var(--ani-red-ink)}

.anc-sess-over{position:fixed;inset:0;z-index:1500;
  display:flex;align-items:center;justify-content:center;padding:22px;
  background:rgba(15,12,8,.55);backdrop-filter:blur(3px)}
.anc-sess-over[hidden]{display:none}
.anc-sess-over .box{max-width:380px;width:100%;
  background:var(--paper);border:1px solid var(--border);border-radius:var(--r-card);
  padding:22px 22px 20px;box-shadow:0 24px 60px -24px rgba(15,12,8,.6);text-align:left}
.anc-sess-over h4{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--ink)}
.anc-sess-over p{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.anc-sess-over .btn{display:inline-block;padding:11px 20px;min-height:44px;
  box-sizing:border-box;border-radius:var(--r-pill);
  background:var(--ani-red);color:#fff !important;text-decoration:none;
  font-size:14.5px;font-weight:600}
.anc-sess-over .btn:hover{background:var(--ani-red-ink);text-decoration:none}
body.anc-sess-lock{overflow:hidden}
@media(max-width:600px){
  .anc-sess{flex-direction:column;align-items:stretch;gap:10px;text-align:center}
  /* In der Spaltenrichtung waere flex-basis die HOEHE - der Balken wurde
     sonst 200px hoch. Hier zaehlt nur die eigene Texthoehe. */
  .anc-sess .txt{flex:0 0 auto}
  .anc-sess .btn{width:100%}
}

/* --- Betriebsauswahl: ganze Ergebniszeile anwaehlbar ---
   Den Klick verteilt das Skript im Kopfbereich (header_sec_new.jsp); hier steht
   nur die sichtbare Rueckmeldung. Rueckmeldung als Innenkontur statt als
   Hintergrund: alternateRowColor (AlternateRowColor.js) setzt nach jeder Suche
   das class-Attribut jeder Zeile neu auf "odd"/"even" - der Zeilenhintergrund
   gehoert also dem Altbestand, eine Konturregel kommt ihm nicht in die Quere. */
body.anc-sec #btrAuswahlBody tr{cursor:pointer}
body.anc-sec #btrAuswahlBody tr#pattern{cursor:auto}
body.anc-sec #btrAuswahlBody tr:hover{box-shadow:inset 0 0 0 2px var(--ani-red-soft)}
body.anc-sec #btrAuswahlBody tr:active{box-shadow:inset 0 0 0 2px var(--ani-red)}

/* --- Kundenbereich: Tabellen auf Mobile als Karten statt Querscrollen ---
   Die Spaltentitel werden per JS aus dem <thead> als data-label auf die
   Zellen gespiegelt (siehe header_sec_new.jsp). Markup bleibt unveraendert. */
@media(max-width:760px){
  body.anc-sec .w3-responsive{overflow-x:visible}
  body.anc-sec table.w3-table-all,
  body.anc-sec table.w3-table-all tbody,
  body.anc-sec table.w3-table-all tr,
  body.anc-sec table.w3-table-all td{display:block;width:auto}
  body.anc-sec table.w3-table-all thead{display:none}
  body.anc-sec table.w3-table-all tr{
    background:var(--paper) !important;border:1px solid var(--border);border-radius:var(--r-card);
    margin:0 0 6px;padding:9px 12px;box-shadow:0 3px 10px -8px rgba(15,12,8,.2)}
  body.anc-sec table.w3-table-all tr:nth-child(even) td,
  body.anc-sec table.w3-table-all tr:nth-child(even){background:var(--paper) !important}
  body.anc-sec .w3-hoverable tbody tr:hover td{background:transparent}
  body.anc-sec table.w3-table-all td{
    border:none !important;padding:2px 0 !important;
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    font-size:13px;line-height:1.3;color:var(--ink-2);text-align:left !important}
  body.anc-sec table.w3-table-all td::before{
    content:attr(data-label);flex:0 0 auto;
    font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink-3);white-space:nowrap}
  /* Erste Spalte = Titel der Karte */
  body.anc-sec table.w3-table-all td:first-child{
    display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3;
    padding:0 0 7px !important;margin-bottom:6px;border-bottom:1px solid var(--border) !important}
  body.anc-sec table.w3-table-all td:first-child::before{display:none}
  /* Leere Zellen ausblenden, damit keine Label ohne Wert stehen */
  body.anc-sec table.w3-table-all td.anc-empty{display:none}
  /* Vorlagenzeile der DWR-Betriebsauswahl - wird nur geklont, nie angezeigt.
     Die Klone bekommen von DWR eine eigene id, die Regel trifft sie nicht. */
  body.anc-sec table.w3-table-all tr#pattern{display:none}

  /* Betriebsauswahl auf dem Handy: die ganze Karte ist anwaehlbar. Ein Pfeil
     rechts oben zeigt das an, beim Tippen wird die Karte rot umrandet. */
  body.anc-sec #btrAuswahlBody tr{position:relative}
  body.anc-sec #btrAuswahlBody tr td:first-child{padding-right:24px !important}
  body.anc-sec #btrAuswahlBody tr td:first-child::after{
    content:"\203A";position:absolute;right:12px;top:6px;
    font-size:23px;line-height:1;color:var(--ink-3)}
  body.anc-sec #btrAuswahlBody tr:active{
    border-color:var(--ani-red);box-shadow:inset 0 0 0 2px var(--ani-red-soft)}
  /* doHover/doHout in BetriebAuswahl.js faerben die erste Zelle direkt am
     Element ein (Schrift weiss auf Rot, kursiv). In der Kartenansicht ist die
     ganze Karte anwaehlbar - eine einzeln eingefaerbte Zeile waere irrefuehrend. */
  body.anc-sec #btrAuswahlBody td:first-child{
    color:var(--ink) !important;background:transparent !important;font-style:normal !important}

  /* ---- Eingabeformulare in w3-table-all (Tieranmeldung, Tierbestellung,
     Passwort aendern/senden), Variante B ----
     Die Kartenansicht oben ist fuer Ergebnislisten gedacht. Auf diesen Seiten
     ist jede Zeile ein Formularfeld - daraus wurde je eine eigene Karte mit
     Titelzeile und Trennlinie, rund 99px pro Feld. Kennzeichen einer
     Formularzeile: die ZWEITE Zelle enthaelt das Bedienelement. */
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) :is(input,select,textarea)){
    display:block;background:transparent !important;border:none;border-radius:0;
    margin:0;padding:0 14px 9px;box-shadow:none}
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) :is(input,select,textarea)) > td:first-child{
    display:block;padding:0 0 3px !important;margin:0;border:none !important;
    font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink-3);line-height:1.3}
  /* WICHTIG: ::before ist in einem Raster ein eigenes Rasterfeld. Die
     Kartenansicht setzt content:attr(data-label) auf JEDE Zelle - in einer
     Formularzeile schoebe dieses leere Feld PLZ und Ort je eine Spalte weiter.
     Darum fuer alle Zellen der Formularzeile abschalten. */
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) :is(input,select,textarea)) > td::before{display:none}
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) :is(input,select,textarea)) > td:nth-child(2){
    display:block;padding:0 !important}
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) :is(input,select,textarea)) input[type="text"],
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) :is(input,select,textarea)) select,
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) :is(input,select,textarea)) textarea{
    display:block;width:100%;box-sizing:border-box;margin:0;font-size:16px}
  /* PLZ und Ort teilen sich eine Zeile */
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) input[type="text"] ~ input[type="text"]) > td:nth-child(2){
    display:grid;grid-template-columns:88px 1fr;gap:8px}
  /* Hinweis "(aktuell: KW)" unter das Auswahlfeld statt daneben */
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) select) .rosa{
    display:block;padding-top:3px;font-size:11px}
  /* Nur Formulartabellen bekommen den Innenabstand - sonst wuerde jede
     Ergebnisliste (Abos, Stammdaten, ...) 14px hoeher. */
  body.anc-sec table.w3-table-all:has(tr > td:nth-child(2) :is(input,select,textarea)){
    padding:10px 0 4px}
  /* Absende- und Ruecksetzknopf nebeneinander. row-reverse, weil beide im
     Markup w3-right tragen und der erste (Anmelden/Bestellen) rechts steht. */
  body.anc-sec .w3-margin-top-10:has(> .w3-btn + .w3-btn){display:flex;flex-direction:row-reverse;gap:8px}
  body.anc-sec .w3-margin-top-10:has(> .w3-btn + .w3-btn) .w3-btn{
    flex:1 1 0;width:auto;margin:0 !important;float:none !important}

  /* Schreibgeschuetzte Betriebsdaten (TVD, Name, Adresse, Telefon, E-Mail):
     kein Eingabefeld, sondern der Wert direkt neben der Bezeichnung. Diese
     Werte stammen aus den Stammdaten und sind hier nicht aenderbar. Die Regel
     greift auf das readonly-Attribut - ohne Anmeldung (Direktabfuellung) setzt
     die Seite es nicht, dort bleiben es normale Eingabefelder. */
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) input[readonly]){
    display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:0 12px;
    padding:2px 14px}
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) input[readonly]) > td:first-child{
    padding:0 !important;font-size:11px;white-space:nowrap}
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) input[readonly]) > td:nth-child(2){
    display:flex;justify-content:flex-end;gap:8px;min-width:0;text-align:right}
  /* Breite ausdruecklich setzen: sonst bestimmt das size-Attribut die Breite
     und laengere Werte werden am rechten Rand abgeschnitten. */
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) input[readonly]) input[readonly]{
    border:none !important;background:transparent !important;padding:0 !important;
    min-height:0 !important;height:auto;text-align:right;font-size:13.5px;font-weight:600;
    color:var(--ink);flex:1 1 auto;width:100%;min-width:0;box-sizing:border-box}
  /* PLZ schmal, Ort nimmt den Rest */
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) input[readonly]) input[readonly]:not(:last-child){
    flex:0 0 4.2em;width:4.2em}
  body.anc-sec table.w3-table-all tr:has(> td:nth-child(2) input[readonly]):first-child{padding-top:10px}

  /* ---- Stammdaten: freigegebener Wert nur bei Abweichung ----
     Jede Karte enthielt denselben Wert zweimal: einmal als "Freigegeben" in Rot,
     einmal im Eingabefeld. Unterschiedlich sind die beiden nur, wenn ein
     Aenderungswunsch offen ist - dann und nur dann wird der alte Wert gezeigt,
     als kleine Zeile UNTER dem Feld, damit das Eingabefeld in allen Karten an
     derselben Stelle steht. Die Klassen setzt das Skript im Kopfbereich. */
  body.anc-sec .anc-stamm table.w3-table-all tr{display:flex;flex-direction:column;padding:8px 12px}
  body.anc-sec .anc-stamm table.w3-table-all td:first-child{
    font-size:10px !important;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink-3) !important;border-bottom:none !important;
    padding:0 0 3px !important;margin-bottom:0 !important}
  body.anc-sec .anc-stamm table.w3-table-all td.st-wunsch{padding:0 !important;order:1}
  body.anc-sec .anc-stamm table.w3-table-all td.st-wunsch::before{display:none}
  /* Uebereinstimmender Wert: nicht anzeigen */
  body.anc-sec .anc-stamm table.w3-table-all td.st-frei.st-gleich{display:none}
  /* Abweichender Wert: kleine Zeile unter dem Feld, gedaempft statt rot */
  body.anc-sec .anc-stamm table.w3-table-all td.st-frei{
    order:3;font-size:11px;padding:5px 0 0 !important;color:var(--ink-3) !important}
  body.anc-sec .anc-stamm table.w3-table-all td.st-frei::before{display:block;font-size:10px}
  /* Offener Aenderungswunsch: hier ist Rot ein echtes Signal */
  body.anc-sec .anc-stamm table.w3-table-all tr.st-offen{
    border-color:var(--ani-red);box-shadow:0 0 0 2px var(--ani-red-soft)}

  /* ---- Abonnemente: eine Zeile je Eintrag ----
     Titel oben, darunter klein Kanal und Kontakt, rechts ein Schalter.
     Die Beschriftung "Abonnieren" entfaellt - der Schalter traegt den Zustand.
     Markup und Speicherlogik der displaytag-Tabelle bleiben unveraendert. */
  body.anc-sec .anc-abos table.w3-table-all tr{
    display:grid;grid-template-columns:1fr 46px;align-items:center;gap:0 12px;
    padding:9px 13px;margin:0 0 5px}
  body.anc-sec .anc-abos table.w3-table-all td:first-child{
    grid-column:1;grid-row:1;display:block;
    padding:0 !important;margin:0 !important;border:none !important;
    font-size:14px;font-weight:600;line-height:1.25;color:var(--ink)}
  body.anc-sec .anc-abos table.w3-table-all td.abo-kanal,
  body.anc-sec .anc-abos table.w3-table-all td.abo-kontakt{
    grid-column:1;display:block;padding:2px 0 0 !important;
    font-size:11.5px;font-weight:400;color:var(--ink-3);line-height:1.3}
  body.anc-sec .anc-abos table.w3-table-all td.abo-kanal{grid-row:2}
  body.anc-sec .anc-abos table.w3-table-all td.abo-kontakt{grid-row:3}
  body.anc-sec .anc-abos table.w3-table-all td.abo-kanal::before,
  body.anc-sec .anc-abos table.w3-table-all td.abo-kontakt::before{display:none}
  /* Leere Kontaktzelle darf keine Zeile beanspruchen */
  body.anc-sec .anc-abos table.w3-table-all td.abo-kontakt.anc-empty{display:none}
  /* Schaltzelle ueber alle drei Zeilen rechts */
  body.anc-sec .anc-abos table.w3-table-all td.anc-check{
    grid-column:2;grid-row:1/span 3;justify-content:flex-end;
    margin:0 !important;padding:0 !important;border:none !important}
  body.anc-sec .anc-abos table.w3-table-all td.anc-check::before{display:none}
  /* Kaestchen als Schalter: 46x27px statt 22x22px Tippflaeche */
  body.anc-sec .anc-abos table.w3-table-all td.anc-check input[type="checkbox"]{
    appearance:none;-webkit-appearance:none;flex:0 0 46px;width:46px;height:27px;margin:0;
    border-radius:100px;background:var(--border);position:relative;cursor:pointer;
    transition:background .2s ease}
  body.anc-sec .anc-abos table.w3-table-all td.anc-check input[type="checkbox"]::after{
    content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
    background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s ease}
  body.anc-sec .anc-abos table.w3-table-all td.anc-check input[type="checkbox"]:checked{
    background:var(--ani-red)}
  body.anc-sec .anc-abos table.w3-table-all td.anc-check input[type="checkbox"]:checked::after{
    transform:translateX(19px)}
  body.anc-sec .anc-abos table.w3-table-all td.anc-check input[type="checkbox"]:focus-visible{
    outline:3px solid var(--ani-red-soft);outline-offset:2px}
  /* Checkbox-Zelle als deutlich klickbare Zeile */
  body.anc-sec table.w3-table-all td.anc-check{
    margin-top:6px;padding-top:8px !important;border-top:1px solid var(--border) !important;
    align-items:center}
  body.anc-sec table.w3-table-all td.anc-check::before{
    color:var(--ani-red);font-size:11px}
  body.anc-sec table.w3-table-all td.anc-check input[type="checkbox"]{
    width:22px;height:22px;margin:0}
}

/* Kernbereich-Karten vollflaechig klickbar (Bild + Text), nicht nur "Weiterlesen" */
.dl-card{position:relative}
.dl-card .dl-stretch{position:absolute;inset:0;z-index:3;text-decoration:none;
  border-radius:var(--r-card);outline-offset:-3px}
.dl-card .dl-stretch:focus-visible{outline:3px solid var(--ani-red)}

/* --- Mobile-Login im Slide-out-Menue (<=960px) --- */
.fh-mlogin{display:none}
@media(max-width:960px){
  .fh-mlogin{display:block;padding:18px 20px 20px;border-bottom:1px solid var(--border);background:var(--cream)}
  .fh-mlogin .ttl{font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
    color:var(--ani-red);margin-bottom:10px}
  /* 16px ist Pflicht, nicht Geschmack: iOS zoomt beim Hineintippen in jedes
     Feld mit weniger als 16px die Seite heran. Zusammen mit dem gesperrten
     body (overflow:hidden) bleibt man dann auf einem vergroesserten
     Ausschnitt stehen, den man nicht mehr verschieben kann - das sieht aus,
     als haenge die Seite. Im Kundenbereich war das bereits korrigiert, im
     Anmeldeformular des Kopfbereichs stand es noch auf 14px. */
  .fh-mlogin input{width:100%;box-sizing:border-box;margin-bottom:8px;padding:11px 14px;
    border:1px solid var(--border);border-radius:10px;background:var(--paper);
    font-family:inherit;font-size:16px;color:var(--ink)}
  .fh-mlogin input:focus{outline:none;border-color:var(--ani-red);box-shadow:0 0 0 3px var(--ani-red-soft)}
  .fh-mlogin button{width:100%;padding:12px 16px;border:none;border-radius:var(--r-pill);
    background:var(--ani-red);color:#fff;font-family:inherit;font-size:14px;font-weight:600;
    cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .fh-mlogin .pw{display:inline-block;margin-top:10px;font-size:12px;color:var(--ink-3);text-decoration:none}
  .fh-mlogin .pw:hover{color:var(--ani-red)}
  .fh-mlogin.is-in .ttl{color:var(--ink);font-size:13px;letter-spacing:0;text-transform:none;font-weight:600}
  .fh-mlogin .lo{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
    color:var(--ani-red);text-decoration:none}
}

/* --- Kundenbereich: Legende darf nicht unter die naechste Tabellen-Leiste rutschen --- */
body.anc-sec .w3-left.w3-text-theme.w3-small{float:none !important;display:block;
  clear:both;overflow:hidden;line-height:1.5;margin-bottom:14px}
body.anc-sec h6.w3-theme{clear:both}
body.anc-sec .w3-card{clear:both}

/* =======================  GESCHUETZTER BEREICH - MOBILE-KORREKTUREN  =======================
   Die Filterleisten der Kundenbereich-Seiten sind einzeilige Tabellen mit drei Zellen
   (Auswahl | Datumsbereich | Suchen-Knopf). Auf 390px wird die Tabelle 480px breit;
   .w3-responsive schiebt sie in einen Seitwaerts-Scroll und der Suchen-Knopf liegt
   ausserhalb des Bildschirms. Deshalb: Zellen untereinander stapeln. */
@media(max-width:760px){
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse,
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tbody{display:block;width:100%}
  /* Bezeichnung links, Feld rechts - spart gegenueber dem Stapeln rund ein Fuenftel
     Hoehe und entspricht der gewohnten Anordnung vom Desktop. */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr{display:grid;
    grid-template-columns:104px 1fr;align-items:start;gap:0 10px;padding:2px 14px;width:100%}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse td{display:block;width:auto;
    text-align:left;padding:4px 0;white-space:normal}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr > td:first-child{padding-top:13px}
  /* Die Kopfzeile mit dem roten Titelbalken laeuft ueber beide Spalten */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse td[colspan]{grid-column:1/-1;padding:0}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(td[colspan]){padding:0;display:block}
  /* Zeilen mit drei oder mehr Zellen passen nicht in das zweispaltige Raster
     (umsatz.jsp) - dort wieder untereinander stapeln, sonst wird das
     Auswahlfeld auf die Breite der Bezeichnungsspalte gequetscht. */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(td:nth-child(3)){display:block;padding:2px 14px}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(td:nth-child(3)) > td{padding:2px 0}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(td:nth-child(3)) > td:first-child{padding-top:6px}
  /* Das zweispaltige Raster setzt voraus, dass in der ersten Zelle nur die
     Bezeichnung steht. Auf umsatz.jsp enthaelt sie bereits ein Bedienelement -
     dort wieder stapeln, sonst wird das Auswahlfeld auf 104px gequetscht. */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(td:first-child input),
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(td:first-child select),
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(td:first-child textarea){
    display:block;padding:2px 14px}

  /* ---- Suchformulare: Bezeichnung ueber dem Feld ----
     Bisher stand die Bezeichnung links in einer festen 104px-Spalte, die
     grossteils leer war, und die Felder blieben schmal. Jetzt steht sie klein
     ueber dem Feld, das Feld nutzt die volle Breite. Zellen mit zwei Feldern
     (Kunden-/TVD-Nummer, PLZ/Ort) teilen sich eine Zeile. */
  /* Bezeichnung-oben gilt nur fuer Tabellen der Bauart "Zelle 1 = Bezeichnung,
     Zelle 2 = Feld" (betriebAuswahlsuche, schlachtdaten, userReport).
     Auf umsatz.jsp enthaelt bereits die erste Zelle Bezeichnung UND Bedienelement -
     dort wuerde die Regel die Beschriftung in eine Mini-Versalzeile verwandeln
     und die Felder auseinanderreissen. */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr{display:block;padding:6px 14px 0}
  /* :not([colspan]) schliesst Titelbalken und Hinweiszeile aus - sie sind
     keine Feldbezeichnungen und wurden sonst ebenfalls klein und versal. */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse
    tr > td:first-child:not([colspan]):not(:has(input,select,textarea)){
    display:block;padding:0 0 3px !important;font-size:10px;font-weight:700;
    letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);white-space:normal}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr > td:nth-child(2){
    display:block;padding:0 0 6px !important}

  /* ---- Zellen, die Bezeichnung UND Bedienelement enthalten (umsatz.jsp) ----
     Jede Zelle wird ein eigener Block: Text bleibt Text, das Bedienelement
     darunter auf voller Breite. */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse
    tr:has(> td:first-child:is(:has(input,select,textarea))) > td{
    display:block;width:100%;padding:2px 0 6px !important;text-align:left;
    font-size:12px;font-weight:600;color:var(--ink-2)}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse
    tr:has(> td:first-child:is(:has(input,select,textarea))) select,
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse
    tr:has(> td:first-child:is(:has(input,select,textarea))) input[type="text"]{
    display:block;width:100%;margin-top:3px}
  /* Auswahlknoepfe bleiben in einer Reihe mit ihrer Beschriftung */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse input[type="radio"]{
    display:inline-block;vertical-align:middle;margin:0 4px 0 0}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse input[type="text"],
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse select{
    width:100%;min-height:40px;margin:0}
  /* Hinweiszeile und Titelbalken sind keine Feldbezeichnungen */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse td[colspan]{
    padding:0 !important;font-size:inherit;font-weight:inherit;letter-spacing:normal;
    text-transform:none;color:inherit}

  /* Paarzeilen: nur wenn die erste Zelle eine reine Bezeichnung ist. Auf
     umsatz.jsp stehen zwei Datumsfelder in EINER Zelle, deren Nachbarzelle
     bereits Bedienelemente enthaelt - dort darf das Paarraster nicht greifen.
     Die zweite Zelle wird aufgeloest (display:contents), damit ihre
     beiden Felder und die Zwischenbezeichnung direkt im Raster der Zeile liegen.
     Nur so kann "TVD Nr:" ueber dem zweiten Feld stehen statt daneben. */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(input[type="text"] ~ input[type="text"]):not(:has(> td:first-child :is(input,select,textarea))){
    display:grid;grid-template-columns:1fr 1fr;gap:0 10px;align-items:end}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(input[type="text"] ~ input[type="text"]):not(:has(> td:first-child :is(input,select,textarea))) > td:nth-child(2){
    display:contents;font-size:10px;font-weight:700;letter-spacing:.05em;
    text-transform:uppercase;color:var(--ink-3)}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(input[type="text"] ~ input[type="text"]):not(:has(> td:first-child :is(input,select,textarea))) > td:first-child{
    grid-column:1;grid-row:1}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(input[type="text"] ~ input[type="text"]):not(:has(> td:first-child :is(input,select,textarea))) input[type="text"]:nth-of-type(1){
    grid-column:1;grid-row:2}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(input[type="text"] ~ input[type="text"]):not(:has(> td:first-child :is(input,select,textarea))) input[type="text"]:nth-of-type(2){
    grid-column:2;grid-row:2}
  /* Etwas knappere Zeilen im ganzen Suchformular */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr{padding:1px 14px}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse td{padding:3px 0}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr > td:first-child{padding-top:11px}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(td:first-child input) > td,
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(td:first-child select) > td,
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse tr:has(td:first-child textarea) > td{
    padding:2px 0}
  /* Bedienelemente auf volle Breite und Fingergroesse */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse select,
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse input[type="text"]{
    display:block;width:100%;box-sizing:border-box;min-height:40px;margin:0 0 6px;
    padding:0 12px;border:1px solid var(--border);border-radius:9px;
    font-family:inherit;font-size:16px;background:var(--paper);color:var(--ink)}
  /* 16px verhindert, dass iOS beim Fokus in das Feld hineinzoomt */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse .w3-btn{display:block;width:100%;min-height:46px;
    margin-top:4px;font-size:15px}

  /* ---- Platzsparende Anordnung fuer Formulare der Bauart "Zelle enthaelt
     Bezeichnung UND Bedienelement" (umsatz.jsp), Variante U1 ----
     Steht bewusst nach den allgemeinen Regeln oben, damit die Breiten- und
     Abstandsvorgaben von dort hier gezielt ueberschrieben werden. */
  /* Zellen mit zwei Feldern (Datum von/bis, Tier Nr/Tierzeichen): je Feld eine
     eigene Spalte, die zugehoerige Bezeichnung darueber - statt vier Zeilen
     untereinander. grid-auto-flow:column fuellt Spalte 1 (Bezeichnung, Feld)
     vor Spalte 2, entspricht also der Reihenfolge im Markup. */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse
    tr:has(> td:first-child :is(input,select,textarea)) > td:has(input[type="text"] ~ input[type="text"]){
    display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;
    grid-auto-flow:column;gap:2px 10px;align-items:end}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse
    tr:has(> td:first-child :is(input,select,textarea)) > td:has(input[type="text"] ~ input[type="text"]) input[type="text"]{
    width:100%;margin-top:0}
  /* Bezeichnungen kleiner und versal, damit sie neben dem Feld nicht dominieren */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse
    tr:has(> td:first-child :is(input,select,textarea)) > td{
    font-size:11px !important;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-3) !important}
  /* Auswahlknoepfe: normale Schreibweise und etwas groesser, versal waere rund
     10% breiter und wuerde noch unguenstiger umbrechen. */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse
    tr:has(> td:first-child :is(input,select,textarea)) > td:has(input[type="radio"]){
    text-transform:none !important;font-size:11.5px !important;font-weight:600;
    color:var(--ink-2) !important;line-height:1.9}
  /* Zwei Schaltflaechen in einer Zelle (Suchen/Reset) nebeneinander statt
     untereinander - spart eine volle Knopfhoehe. */
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse td:has(.w3-btn + .w3-btn){
    display:flex;gap:8px}
  body.anc-sec .w3-card table.w3-table.w3-theme-inverse td:has(.w3-btn + .w3-btn) .w3-btn{
    flex:1 1 0;width:auto !important;margin:0 !important}

  /* Blaetterleiste von displaytag als eigene Zeile statt als Fliesstext */
  body.anc-sec .pagebanner,
  body.anc-sec .pagelinks{display:block;text-align:center;font-size:12px;
    color:var(--ink-3);padding:0}
  body.anc-sec .pagelinks{padding-bottom:8px}
  body.anc-sec .pagelinks a{color:var(--ani-red);font-weight:600;text-decoration:none;
    padding:0 3px}

  /* Legacy-Abstandshalter aus der Zeit des alten fixen Kopfbereichs. Sie stehen
     zusaetzlich zu .anc-sec-top und ergeben zusammen 134px Leerraum ueber der
     ersten Karte. w3theme.min.css setzt sie mit !important - deshalb hier ebenfalls. */
  body.anc-sec .w3-padding-top-32{padding-top:0 !important;padding-bottom:0 !important}
  body.anc-sec .w3-padding-top-64{padding-top:0 !important;padding-bottom:0 !important}
  body.anc-sec .w3-margin-top-50{margin-top:0 !important}
  body.anc-sec .w3-margin-top-60{margin-top:0 !important}
  body.anc-sec .w3-margin-top-70{margin-top:0 !important}
  body.anc-sec .anc-sec-top{height:62px}

  /* ---- Bedienbarkeit auf dem Handy, geltend fuer ALLE Kundenbereich-Seiten ----
     Die Formulare stammen aus der Desktop-Zeit: Felder sind rund 22px hoch und
     tragen 13px Schrift. Unter 16px zoomt iOS beim Antippen automatisch in die
     Seite hinein, danach steht die halbe Ansicht ausserhalb des Bildschirms. */
  body.anc-sec input[type="text"],
  body.anc-sec input[type="password"],
  body.anc-sec input[type="email"],
  body.anc-sec input[type="number"],
  body.anc-sec input[type="date"],
  body.anc-sec select,
  body.anc-sec textarea{
    font-family:inherit;font-size:16px;min-height:42px;box-sizing:border-box;max-width:100%;
    padding:0 12px;border:1px solid var(--border);border-radius:9px;
    background:var(--paper);color:var(--ink);margin:0}
  body.anc-sec textarea{min-height:92px;padding:10px 12px;line-height:1.5}
  body.anc-sec input:focus,body.anc-sec select:focus,body.anc-sec textarea:focus{
    outline:none;border-color:var(--ani-red);box-shadow:0 0 0 3px var(--ani-red-soft)}
  /* Ankreuzfelder brauchen keine Feldhoehe, aber eine Fingerflaeche */
  body.anc-sec input[type="checkbox"],body.anc-sec input[type="radio"]{
    width:22px;height:22px;min-height:0;padding:0;accent-color:var(--ani-red)}
  /* Schaltflaechen und Verweise in Tabellen als Tippziel */
  body.anc-sec .w3-btn,body.anc-sec button[type="submit"]{min-height:44px}
  /* w3-left und w3-right lassen den Knopf aus dem Container laufen, sobald die
     Beschriftung breiter ist als der verbleibende Platz - auf passwortAendern und
     passwortSenden stand der Absende-Knopf dadurch ausserhalb des Bildschirms. */
  body.anc-sec .w3-btn.w3-right,
  body.anc-sec .w3-btn.w3-left{float:none !important;display:block;width:100%;
    margin-left:0 !important;margin-right:0 !important;white-space:normal;line-height:1.3}
  body.anc-sec .w3-btn.w3-left + .w3-btn.w3-left{margin-top:8px}
  body.anc-sec table.w3-table-all td a{display:inline-block;padding:6px 0}
  /* In der Kartenansicht ist jede Zelle ein eigener Block - Felder duerfen
     die volle Breite nutzen, sonst sprengt size="30" die Karte. */
  body.anc-sec table.w3-table-all td input[type="text"],
  body.anc-sec table.w3-table-all td input[type="password"],
  body.anc-sec table.w3-table-all td select,
  body.anc-sec table.w3-table-all td textarea{width:100%}

  /* Blaetterlinks von displaytag sind 15px hoch - auf dem Handy nicht treffbar.
     Als Pillen mit 40px Hoehe nebeneinander. */
  body.anc-sec .pagelinks{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
    align-items:center;font-size:0;padding:5px 0 7px}
  body.anc-sec .pagelinks a,
  body.anc-sec .pagelinks strong{display:inline-flex;align-items:center;justify-content:center;
    min-width:40px;min-height:40px;padding:0 12px;border-radius:var(--r-pill);
    font-size:13.5px;font-weight:600;text-decoration:none}
  body.anc-sec .pagelinks a{color:var(--ani-red);background:var(--paper);
    border:1px solid var(--border)}
  body.anc-sec .pagelinks strong{color:#fff;background:var(--ani-red)}
}

/* PDF-Verweise in Tabellen: das Font-Awesome-Zeichen erbt sonst die Textfarbe
   und steht als schwarzes Quadrat in der Zeile. */
body.anc-sec .fa-file-pdf{color:var(--ani-red)}
@media(max-width:760px){
  body.anc-sec table.w3-table-all td:first-child .fa-file-pdf{font-size:22px}
  body.anc-sec table.w3-table-all td:first-child a{display:inline-flex;align-items:center;
    justify-content:center;min-width:44px;min-height:44px}
}

/* --- Header-Schrift auf Desktop/Tablet etwas groesser (Mobile unveraendert) --- */
@media(min-width:961px){
  .fh-b .fh-nav li{font-size:14.5px}
  .fh-b .fh-nav li .cv{font-size:10px}
  .fh-b .fh-dark .kontakt{font-size:14.5px}
  .fh-sub li{font-size:14px}
  .fh-b .fh-red .lang{font-size:12.5px}
  .fh-b .fh-nav ul{gap:24px}
}

/* --- Mobile: Burger zeigt NUR Navigation, Login-Icon zeigt NUR das Login --- */
@media(max-width:960px){
  .fh-menu.mode-nav   .fh-mlogin{display:none}
  .fh-menu.mode-login > ul{display:none}
}