:root{--gold:#c8a96f;--dark:#101318;--panel:#181e25;--light:#f4f3ef;--ink:#17191d}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;line-height:1.55}.card-page{min-height:100vh;padding:36px 16px}.mode-dark{background:#0e1115;color:#eef1f4}.mode-light{background:#eceae4;color:var(--ink)}.profile-shell{max-width:920px;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.28)}.mode-dark .profile-shell{background:#171c22;border:1px solid #313946}.mode-light .profile-shell{background:white;border:1px solid #d8d4cb}.profile-header{display:flex;align-items:center;gap:20px;padding:34px}.profile-header h1{margin:0;font-size:clamp(28px,6vw,50px)}.profile-header p{margin:7px 0 0;opacity:.74}.profile-logo{width:92px;height:92px;object-fit:contain;border-radius:18px}.profile-logo.placeholder{display:flex;align-items:center;justify-content:center;background:var(--gold);color:#111;font-size:34px;font-weight:800}.profile-shell section{padding:26px 34px;border-top:1px solid rgba(128,128,128,.2)}.profile-shell h2{margin:0 0 14px;font-size:21px}.pill-list{display:flex;gap:8px;flex-wrap:wrap}.pill-list span{padding:8px 12px;border-radius:999px;border:1px solid rgba(200,169,111,.45);background:rgba(200,169,111,.08)}.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.contact-grid div{padding:14px;border-radius:12px;background:rgba(128,128,128,.08)}.contact-grid small{display:block;opacity:.62;margin-bottom:4px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}.profile-footer{padding:28px 34px;border-top:1px solid rgba(128,128,128,.2);display:flex;justify-content:space-between;gap:16px;align-items:center}.social-icons{display:flex;gap:9px;flex-wrap:wrap}.social-icons a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:11px;font-weight:800}.mode-dark .social-icons a{background:white;color:#111}.mode-light .social-icons a{background:#111;color:white}.powered{opacity:.66}.powered a{color:inherit}.previewbar{max-width:920px;margin:0 auto 12px;padding:10px 14px;border-radius:12px;background:#d8b77c;color:#111}.previewbar a{color:#111;font-weight:700;margin-left:16px}.items-grid,.menu-list,.event-list{display:grid;gap:10px}.items-grid{grid-template-columns:repeat(2,1fr)}.items-grid article,.menu-list>div,.event-list>div{padding:14px;border:1px solid rgba(128,128,128,.18);border-radius:12px}.menu-list>div{display:grid;grid-template-columns:1fr auto;gap:4px 14px}.menu-list p{grid-column:1/-1;margin:0;opacity:.72}
/* fünf klar unterschiedliche Layouts */.design-hero .profile-header{min-height:320px;align-items:flex-end;background:linear-gradient(180deg,rgba(200,169,111,.12),transparent)}.design-hero .profile-logo{width:120px;height:120px}.design-split .profile-shell{display:grid;grid-template-columns:320px 1fr}.design-split .profile-header{grid-row:1/20;display:block}.design-split .profile-header .profile-logo{margin-bottom:20px}.design-split .profile-footer{grid-column:1/-1}.design-compact .profile-shell{max-width:720px}.design-compact .profile-header{padding:24px}.design-compact .profile-shell section{padding:18px 24px}.design-editorial .profile-header{display:block;padding:44px}.design-editorial .profile-header h1{font-family:Georgia,serif;font-weight:500}.design-editorial .profile-shell h2{font-family:Georgia,serif;font-weight:500}
@media(max-width:700px){.card-page{padding:12px 8px}.profile-header{padding:24px 20px}.profile-logo{width:72px;height:72px}.profile-shell section{padding:20px}.contact-grid,.items-grid{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.profile-footer{padding:20px;display:grid}.design-split .profile-shell{display:block}.design-split .profile-header{display:flex}.design-hero .profile-header{min-height:240px}}
.social-icons a{overflow:hidden;padding:7px}.social-icons img{width:100%;height:100%;object-fit:contain}.mode-light .social-icons img{filter:invert(1)}


/* ESO Media: Social-Icons in hellen und dunklen Webvisitenkarten kontrastreich darstellen. */
.social-icons { gap: 12px; }
.social-icons a,
.mode-dark .social-icons a,
.mode-light .social-icons a {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    padding: 3px;
    border: 1px solid #c8a96f;
    border-radius: 50%;
    background: #101318;
    color: #f4f1e8;
    overflow: hidden;
    transition: background-color .15s ease, border-color .15s ease;
}
.social-icons img,
.mode-light .social-icons img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
    opacity: 1;
}
.social-icons a:hover { background: #28323b; border-color: #e3c78f; }
.social-icons a:focus-visible {
    outline: 2px solid #e3c78f;
    outline-offset: 3px;
}

/* ESO Media 17.09.2026: Green / Black / White color choices.
   Existing stored mode=dark is backwards-compatible with green. */
.mode-green,.mode-dark{background:#0d1815;color:#edf4ed}
.mode-green .profile-shell,.mode-dark .profile-shell{background:#17231f;border:1px solid #365045}
.mode-green .contact-grid div,.mode-dark .contact-grid div{background:rgba(187,216,190,.07)}
.mode-black{background:#070708;color:#f5f5f5}
.mode-black .profile-shell{background:#111113;border:1px solid #333337}
.mode-black .contact-grid div{background:rgba(255,255,255,.07)}
.mode-light{background:#efeee8;color:#17191d}
.mode-light .profile-shell{background:#fff;border:1px solid #d7d5cf}
.mode-black .social-icons a,.mode-green .social-icons a,.mode-dark .social-icons a{background:#101318;color:#f4f1e8}
/* Full-width header branding; preserve aspect ratio and do not stretch customer artwork. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.has-brand-logo .profile-shell{display:block}
.has-brand-logo .profile-header.brand-header,
.has-brand-logo.design-split .profile-header,
.has-brand-logo.design-editorial .profile-header,
.has-brand-logo.design-hero .profile-header{display:flex;box-sizing:border-box;grid-row:auto;min-height:0;align-items:center;justify-content:center;width:100%;padding:26px 30px 20px;margin:0;flex-direction:column;background:none}
.has-brand-logo .profile-logo.brand-logo,
.has-brand-logo.design-hero .profile-logo.brand-logo,
.has-brand-logo.design-split .profile-logo.brand-logo{display:block;width:100%;max-width:100%;height:auto;max-height:230px;object-fit:contain;object-position:center;margin:0;border-radius:0}
.has-brand-logo .brand-headline{padding:16px 34px;text-align:center}
.has-brand-logo .brand-headline p{margin:0;font-size:clamp(15px,2vw,21px);opacity:.9}
/* The video closes the content, just above the social / Powered-by footer. */
.profile-shell .youtube-section{padding:24px 34px 30px;min-width:0}
.youtube-frame{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;border:1px solid rgba(200,169,111,.4);border-radius:14px;background:#12171d}
.youtube-frame iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
@media(max-width:700px){
 .has-brand-logo .profile-header.brand-header,.has-brand-logo.design-split .profile-header{padding:20px 14px 16px}
 .has-brand-logo .profile-logo.brand-logo{max-height:165px}
 .profile-shell .youtube-section{padding:16px 16px 22px}
 .has-brand-logo .brand-headline{padding:14px 16px}
}

/* The selected theme applies to the VISITENKARTE (page AND actual card),
   for preview and published profile alike. Old DB value 'dark' maps to green. */
.card-page.mode-green,.card-page.mode-dark{
 --card-page-bg:#0c1b16; --card-bg:#192a22; --card-fg:#edf5ef;
 --card-border:#42604b; --card-field:rgba(187,216,190,.10);
 background:var(--card-page-bg);color:var(--card-fg);color-scheme:dark;
}
.card-page.mode-black{
 --card-page-bg:#050505; --card-bg:#111113; --card-fg:#f5f5f5;
 --card-border:#39393d; --card-field:rgba(255,255,255,.07);
 background:var(--card-page-bg);color:var(--card-fg);color-scheme:dark;
}
.card-page.mode-light{
 --card-page-bg:#f5f5f3; --card-bg:#fff; --card-fg:#1a1b1c;
 --card-border:#d8d9d3; --card-field:#f1f2f0;
 background:var(--card-page-bg);color:var(--card-fg);color-scheme:light;
}
.card-page.mode-green .profile-shell,
.card-page.mode-dark .profile-shell,
.card-page.mode-black .profile-shell,
.card-page.mode-light .profile-shell{
 background:var(--card-bg);color:var(--card-fg);border:1px solid var(--card-border);
}
.card-page .contact-grid div{background:var(--card-field)}
.card-page .profile-footer{color:var(--card-fg)}
.card-page .brand-headline{color:var(--card-fg)}
.card-page .profile-header.name-header{color:var(--card-fg)}


/* 18.09.2026 — SCHWARZ means pure black, including the card itself.
   Keep customer logo artwork unmodified: no filter, opacity or grey backdrop. */
body.card-page.mode-black {
    --card-page-bg:#000000; --card-bg:#000000; --card-fg:#f5f5f5;
    --card-border:#242424; --card-field:#000000;
    background:#000000; color:#f5f5f5;
}
body.card-page.mode-black .profile-shell {
    background:#000000; color:#f5f5f5; border:1px solid #242424;
    box-shadow:none;
}
body.card-page.mode-black .profile-header,
body.card-page.mode-black .profile-header.brand-header,
body.card-page.mode-black .profile-shell > section,
body.card-page.mode-black .brand-headline,
body.card-page.mode-black .profile-footer,
body.card-page.mode-black .youtube-frame {
    background:#000000; color:#f5f5f5;
}
body.card-page.mode-black .profile-header {background-image:none;}
body.card-page.mode-black .contact-grid > div,
body.card-page.mode-black .event-list > div,
body.card-page.mode-black .items-grid article,
body.card-page.mode-black .menu-list > div,
body.card-page.mode-black .pill-list span {
    background:#000000; border-color:#292929;
}
body.card-page.mode-black .profile-logo.brand-logo {background:transparent;filter:none;opacity:1;}
body.card-page.mode-black .profile-shell section,
body.card-page.mode-black .profile-footer {border-top-color:#242424;}


/* 18.09.2026: Weiss = weisse Webvisitenkarte auf schwarzer Umgebung.
   Only the outer page changes. Keep the card, its sections and text in light mode.
   Applies to preview, published card and product catalog. */
body.card-page.mode-light {
    --card-page-bg: #000000;
    --card-bg: #ffffff;
    --card-fg: #1a1b1c;
    background: #000000;
}
body.card-page.mode-light .profile-shell {
    background: #ffffff;
    color: #1a1b1c;
    border: 1px solid #d8d9d3;
}

/* 18.09.2026: Skalierbare Headergrafik nur nach aktiver Auswahl; bisherige Logos bleiben unverändert. */
.has-brand-logo.logo-banner .profile-logo.brand-logo,
.has-brand-logo.logo-banner.design-hero .profile-logo.brand-logo,
.has-brand-logo.logo-banner.design-split .profile-logo.brand-logo,
.has-brand-logo.logo-banner.design-editorial .profile-logo.brand-logo {
    width: var(--header-logo-width,100%);
    max-width:100%;height:auto;max-height:360px;object-fit:contain;object-position:center;
}
.profile-shell .profile-actions {padding:18px 34px 22px;}
.profile-action-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
.profile-action-button{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-width:170px;padding:12px 20px;border:0;border-radius:9px;background:#d4b77d;color:#16191c!important;text-decoration:none!important;font:inherit;font-weight:700;line-height:1.35;cursor:pointer;}
.profile-action-button:hover{background:#e5ca94;}
.profile-action-button:focus-visible{outline:3px solid #d4b77d;outline-offset:3px;}
.profile-contact-form{display:none;padding:20px 0 0;max-width:590px;margin:18px auto 0;}
.profile-contact-form:target,.profile-contact-form.is-open{display:block;}
.profile-contact-form h2{margin:0 0 12px;}
.profile-contact-form form{display:grid;gap:14px;}
.profile-contact-form form>label:not(.profile-honeypot){display:grid;gap:5px;font-weight:600;}
.profile-contact-form input:not([type=checkbox]),.profile-contact-form textarea{display:block;width:100%;padding:11px 12px;background:var(--card-bg,#fff);color:var(--card-fg,inherit);border:1px solid var(--card-border,#777);border-radius:7px;font:inherit;}
.profile-contact-form textarea{resize:vertical;min-height:110px;}
.profile-contact-form .profile-contact-ack{display:flex!important;align-items:flex-start;gap:9px;font-size:14px;font-weight:400!important;}
.profile-contact-ack input{width:18px;height:18px;flex:0 0 18px;margin:2px 0 0;accent-color:#c8a96f;}
.profile-contact-note{font-size:13px;line-height:1.5;margin:0;opacity:.85;}
.profile-contact-note a{color:inherit;text-decoration:underline;}
.profile-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;}
.profile-contact-flash{padding:10px 12px;border:1px solid #c8a96f;border-radius:8px;margin:18px auto 12px;max-width:590px;}
.profile-contact-flash.error{border-color:#cb7373;}
@media(max-width:700px){
 .has-brand-logo.logo-banner .profile-logo.brand-logo{max-height:260px;}
 .profile-shell .profile-actions{padding:16px;}
 .profile-action-row{gap:9px;}
 .profile-action-button{min-width:135px;padding:10px 14px;}
 .profile-contact-form{max-width:100%;}
}

/* ESO Media: three independent button palettes, selected by the card's color_mode.
   Applies to Home, Kontakt, optional Produktkatalog and Kontakt > Nachricht senden.
   Kept after all basic button styles so palette rules override the gold default. */
body.card-page.mode-light .profile-shell .profile-action-button {
    background: #303030;
    color: #ffffff !important;
    border: 1px solid #484848;
}
body.card-page.mode-light .profile-shell .profile-action-button:hover { background: #181818; }
body.card-page.mode-light .profile-shell .profile-action-button:focus-visible {
    outline: 3px solid #777777;
    outline-offset: 3px;
}

body.card-page.mode-black .profile-shell .profile-action-button {
    background: #3b3b3b;
    color: #f7f7f7 !important;
    border: 1px solid #666666;
}
body.card-page.mode-black .profile-shell .profile-action-button:hover { background: #555555; }
body.card-page.mode-black .profile-shell .profile-action-button:focus-visible {
    outline: 3px solid #b9b9b9;
    outline-offset: 3px;
}

body.card-page.mode-green .profile-shell .profile-action-button,
body.card-page.mode-dark .profile-shell .profile-action-button {
    background: #d4b77d;
    color: #16191c !important;
    border: 1px solid #d4b77d;
}
body.card-page.mode-green .profile-shell .profile-action-button:hover,
body.card-page.mode-dark .profile-shell .profile-action-button:hover { background: #e5ca94; }
body.card-page.mode-green .profile-shell .profile-action-button:focus-visible,
body.card-page.mode-dark .profile-shell .profile-action-button:focus-visible {
    outline: 3px solid #f0d7a4;
    outline-offset: 3px;
}

/* 27.09.2026 – Webseitenmodus / Shop */
.website-package .profile-shell{max-width:1180px}.website-package .profile-actions{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.website-package .profile-action-row{flex-wrap:wrap}.website-section-head{margin-bottom:18px}.website-section-head small{letter-spacing:.16em;opacity:.72}.website-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.website-product-card{border:1px solid rgba(255,255,255,.16);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.025)}.website-product-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.website-product-body{padding:16px}.website-product-body h3{margin:0 0 7px}.website-product-price{display:block;margin-bottom:10px}.website-add-cart,.website-paypal-button{border:0;border-radius:8px;padding:11px 15px;font-weight:700;cursor:pointer;background:#e5c17a;color:#111}.website-paypal-button:disabled{opacity:.45}.website-cart{margin-top:28px}.website-cart-line{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;border-bottom:1px solid rgba(255,255,255,.12);padding:12px 0}.website-cart-line span:first-child{display:grid}.website-cart-line small{opacity:.72}.website-cart-qty{display:flex;align-items:center;gap:8px}.website-cart-qty button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:inherit}.website-cart-total{text-align:right;padding:16px 0;font-size:1.15rem}.website-shop-note{font-size:.86rem;opacity:.78}@media(max-width:850px){.website-products{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.website-products{grid-template-columns:1fr}.website-cart-line{grid-template-columns:1fr auto}.website-cart-line>strong{grid-column:1/-1;text-align:right}}


/* 28.09.2026 – Webseiten-Navigation kompakt */
.website-package .profile-shell .profile-actions{padding:14px 24px 16px}
.website-package .profile-action-row{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:8px}
.website-package .profile-action-button{min-width:0;width:auto;padding:9px 15px;border-radius:8px;font-size:.94rem;line-height:1.15;white-space:nowrap}
.website-package .profile-cart-button{position:relative;width:42px;min-width:42px;height:38px;padding:0}
.website-package .profile-cart-button svg{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.website-package .profile-cart-count{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#d4b77d;color:#111;font-size:11px;font-weight:800;line-height:19px}
@media(max-width:760px){.website-package .profile-action-row{flex-wrap:wrap}.website-package .profile-action-button{padding:8px 12px;font-size:.9rem}.website-package .profile-cart-button{width:40px;min-width:40px;height:36px;padding:0}}

/* YouTube erst nach Klick laden */
.youtube-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;min-height:260px;padding:24px}
.youtube-load-button{border:0;border-radius:8px;padding:12px 18px;background:#d4b77d;color:#111;font-weight:700;cursor:pointer}
.youtube-placeholder small{opacity:.75}
.youtube-placeholder.is-loaded{padding:0;min-height:0}
.youtube-placeholder.is-loaded iframe{position:absolute;inset:0;width:100%;height:100%;border:0}


/* 01.10.2026 – Öffentliche Shopkarten wirklich kompakt: 5 pro Reihe */
.website-package .website-products{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:10px !important;
  width:100%;
}
.website-package .website-product-card{
  min-width:0 !important;
  width:auto !important;
  border-radius:9px !important;
}
.website-package .website-product-card img{
  width:100% !important;
  height:130px !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
}
.website-package .website-product-body{
  padding:10px !important;
}
.website-package .website-product-body h3{
  font-size:.95rem !important;
  line-height:1.25;
  margin:0 0 4px !important;
}
.website-package .website-product-price{
  font-size:.9rem !important;
  margin-bottom:5px !important;
}
.website-package .website-product-body p{
  font-size:.8rem !important;
  line-height:1.35 !important;
  margin:6px 0 8px !important;
}
.website-package .website-add-cart{
  width:100%;
  padding:8px 7px !important;
  font-size:.8rem !important;
}
@media(max-width:1050px){
  .website-package .website-products{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
}
@media(max-width:850px){
  .website-package .website-products{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media(max-width:650px){
  .website-package .website-products{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:430px){
  .website-package .website-products{grid-template-columns:1fr !important}
}


/* ==========================================================================
   ESO ONE – 08.10.2026
   Fünf Designvorlagen optisch klar voneinander trennen.
   Ausschließlich Darstellung der Kunden-Webvisitenkarten / Webseiten.
   Keine Hauptseite, keine Preise, kein Routing, keine Shoplogik.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KLASSISCH
   Bewusst ruhig und symmetrisch. Dient als unveränderter Referenzstil.
   -------------------------------------------------------------------------- */
body.card-page.design-classic .profile-shell{
    max-width:920px;
}
body.card-page.design-classic .profile-header{
    text-align:left;
}
body.card-page.design-classic .profile-shell > section{
    padding-left:34px;
    padding-right:34px;
}

/* --------------------------------------------------------------------------
   2. GROSSES KOPFDESIGN / HERO
   Deutlich breiter, großer Kopfbereich, großzügige Abstände.
   -------------------------------------------------------------------------- */
body.card-page.design-hero .profile-shell{
    max-width:1160px;
    border-radius:18px;
}
body.card-page.design-hero .profile-header{
    min-height:390px;
    padding:52px 58px 44px;
    align-items:flex-end;
    justify-content:flex-start;
    background:
      linear-gradient(180deg,rgba(200,169,111,.06),rgba(0,0,0,.08));
}
body.card-page.design-hero .profile-header.name-header{
    text-align:left;
}
body.card-page.design-hero .profile-header.name-header .profile-logo{
    width:118px;
    height:118px;
}
body.card-page.design-hero .profile-header.name-header h1{
    font-size:clamp(42px,7vw,72px);
    line-height:1.02;
}
body.card-page.design-hero .profile-header.name-header p{
    font-size:clamp(17px,2vw,23px);
    max-width:760px;
}
body.card-page.design-hero .profile-shell > section{
    padding:38px 58px;
}
body.card-page.design-hero .profile-shell h2{
    font-size:27px;
}
body.card-page.design-hero .gallery{
    gap:14px;
}

/* Hero mit hochgeladener Headergrafik: wieder sichtbar groß statt Standardkopf. */
body.card-page.design-hero.has-brand-logo .profile-header.brand-header{
    min-height:330px;
    padding:24px 30px;
    justify-content:center;
}
body.card-page.design-hero.has-brand-logo .profile-logo.brand-logo{
    width:100%;
    max-width:100%;
    max-height:300px;
}
body.card-page.design-hero.has-brand-logo.logo-banner .profile-header.brand-header{
    min-height:360px;
    padding:16px 20px;
}
body.card-page.design-hero.has-brand-logo.logo-banner .profile-logo.brand-logo{
    width:var(--header-logo-width,100%);
    max-height:330px;
}

/* --------------------------------------------------------------------------
   3. GETEILT / SPLIT
   Desktop: markante linke Marken-/Kopfspalte, Inhalte rechts.
   -------------------------------------------------------------------------- */
body.card-page.design-split .profile-shell{
    max-width:1120px;
    display:grid;
    grid-template-columns:minmax(250px,34%) minmax(0,1fr);
    align-items:start;
    overflow:hidden;
}
body.card-page.design-split .profile-shell > .profile-header{
    grid-column:1;
    grid-row:1 / span 30;
    min-height:620px;
    height:100%;
    padding:44px 30px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    text-align:left;
    border-right:1px solid rgba(128,128,128,.2);
    background:rgba(128,128,128,.045);
}
body.card-page.design-split .profile-header.name-header .profile-logo{
    width:108px;
    height:108px;
    margin:0 0 28px;
}
body.card-page.design-split .profile-header.name-header > div:last-child{
    width:100%;
}
body.card-page.design-split .profile-header.name-header h1{
    font-size:clamp(32px,4vw,48px);
    line-height:1.06;
}
body.card-page.design-split .profile-shell > :not(.profile-header):not(.profile-footer){
    grid-column:2;
    min-width:0;
}
body.card-page.design-split .profile-shell > section{
    padding:28px 34px;
}
body.card-page.design-split .profile-footer{
    grid-column:1 / -1;
}

/* Split mit Logo/Headergrafik darf nicht wieder in den Standardkopf zurückfallen. */
body.card-page.design-split.has-brand-logo .profile-header.brand-header{
    grid-column:1;
    grid-row:1 / span 30;
    min-height:620px;
    height:100%;
    width:100%;
    padding:34px 24px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-direction:column;
    border-right:1px solid rgba(128,128,128,.2);
    background:rgba(128,128,128,.045);
}
body.card-page.design-split.has-brand-logo .profile-logo.brand-logo{
    width:100%;
    max-width:100%;
    max-height:250px;
    margin:0;
}
body.card-page.design-split.has-brand-logo.logo-banner .profile-logo.brand-logo{
    width:100%;
    max-height:280px;
}

/* --------------------------------------------------------------------------
   4. KOMPAKT
   Deutlich schmaler, enger und visuell wie eine echte digitale Visitenkarte.
   -------------------------------------------------------------------------- */
body.card-page.design-compact{
    padding-top:22px;
    padding-bottom:22px;
}
body.card-page.design-compact .profile-shell{
    max-width:660px;
    border-radius:16px;
}
body.card-page.design-compact .profile-header{
    padding:20px 22px;
    gap:15px;
}
body.card-page.design-compact .profile-header.name-header .profile-logo{
    width:68px;
    height:68px;
    border-radius:12px;
}
body.card-page.design-compact .profile-header.name-header h1{
    font-size:clamp(25px,5vw,36px);
}
body.card-page.design-compact .profile-header.name-header p{
    font-size:14px;
}
body.card-page.design-compact .profile-shell > section{
    padding:16px 22px;
}
body.card-page.design-compact .profile-shell h2{
    margin-bottom:9px;
    font-size:18px;
}
body.card-page.design-compact .profile-shell p{
    margin-top:6px;
    margin-bottom:8px;
}
body.card-page.design-compact .profile-actions{
    padding:12px 20px 14px;
}
body.card-page.design-compact .profile-action-row{
    gap:7px;
}
body.card-page.design-compact .profile-action-button{
    min-width:118px;
    padding:8px 12px;
    font-size:14px;
}
body.card-page.design-compact .contact-grid{
    gap:8px;
}
body.card-page.design-compact .contact-grid div{
    padding:10px 12px;
}
body.card-page.design-compact .gallery{
    gap:6px;
}
body.card-page.design-compact .gallery img{
    border-radius:8px;
}
body.card-page.design-compact .profile-footer{
    padding:18px 22px;
}
body.card-page.design-compact.has-brand-logo .profile-header.brand-header{
    padding:16px 20px 12px;
}
body.card-page.design-compact.has-brand-logo .profile-logo.brand-logo{
    max-height:155px;
}

/* --------------------------------------------------------------------------
   5. EDITORIAL
   Magazinartig: großzügiger Weißraum, Serifentypografie, asymmetrische Breiten.
   -------------------------------------------------------------------------- */
body.card-page.design-editorial .profile-shell{
    max-width:1080px;
    border-radius:4px;
}
body.card-page.design-editorial .profile-header{
    display:block;
    padding:64px 70px 46px;
    text-align:left;
}
body.card-page.design-editorial .profile-header.name-header .profile-logo{
    width:76px;
    height:76px;
    margin-bottom:30px;
    border-radius:2px;
}
body.card-page.design-editorial .profile-header h1,
body.card-page.design-editorial .profile-shell h2{
    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
}
body.card-page.design-editorial .profile-header h1{
    max-width:800px;
    font-size:clamp(44px,7vw,76px);
    line-height:1.02;
    letter-spacing:-.025em;
}
body.card-page.design-editorial .profile-header p{
    max-width:680px;
    font-size:19px;
}
body.card-page.design-editorial .profile-shell > section{
    padding:42px 70px;
}
body.card-page.design-editorial .profile-shell > section:nth-of-type(even){
    width:82%;
    margin-left:auto;
}
body.card-page.design-editorial .profile-shell > section:nth-of-type(odd){
    width:88%;
}
body.card-page.design-editorial .profile-shell h2{
    font-size:30px;
}
body.card-page.design-editorial .profile-about p{
    font-size:18px;
    line-height:1.78;
}
body.card-page.design-editorial .gallery{
    grid-template-columns:2fr 1fr 1fr;
    gap:14px;
}
body.card-page.design-editorial .gallery img:first-child{
    grid-row:span 2;
    height:100%;
    aspect-ratio:auto;
}
body.card-page.design-editorial .profile-footer{
    padding:34px 70px;
}
body.card-page.design-editorial.has-brand-logo .profile-header.brand-header{
    display:block;
    min-height:0;
    padding:44px 70px 28px;
    text-align:left;
}
body.card-page.design-editorial.has-brand-logo .profile-logo.brand-logo{
    width:min(78%,var(--header-logo-width,100%));
    max-width:820px;
    max-height:270px;
    margin:0;
    object-position:left center;
}
body.card-page.design-editorial.has-brand-logo .brand-headline{
    text-align:left;
    padding:22px 70px 30px;
}
body.card-page.design-editorial.has-brand-logo .brand-headline p{
    max-width:720px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:22px;
    line-height:1.5;
}

/* Webseiten-/Shopmodus darf die gewählte Designvorlage behalten. */
body.card-page.website-package.design-hero .profile-shell,
body.card-page.website-package.design-split .profile-shell,
body.card-page.website-package.design-editorial .profile-shell{
    max-width:1180px;
}

/* Mobil: klare Unterschiede behalten, Split aber wieder einspaltig. */
@media(max-width:760px){
    body.card-page.design-hero .profile-shell,
    body.card-page.design-split .profile-shell,
    body.card-page.design-editorial .profile-shell{
        max-width:100%;
    }

    body.card-page.design-hero .profile-header{
        min-height:285px;
        padding:34px 22px 28px;
    }
    body.card-page.design-hero .profile-shell > section{
        padding:25px 22px;
    }
    body.card-page.design-hero.has-brand-logo .profile-header.brand-header,
    body.card-page.design-hero.has-brand-logo.logo-banner .profile-header.brand-header{
        min-height:235px;
        padding:14px;
    }

    body.card-page.design-split .profile-shell{
        display:block;
    }
    body.card-page.design-split .profile-shell > .profile-header,
    body.card-page.design-split.has-brand-logo .profile-header.brand-header{
        min-height:0;
        height:auto;
        display:flex;
        padding:28px 20px;
        border-right:0;
        border-bottom:1px solid rgba(128,128,128,.2);
    }
    body.card-page.design-split .profile-shell > :not(.profile-header):not(.profile-footer){
        grid-column:auto;
    }

    body.card-page.design-compact .profile-shell{
        max-width:620px;
    }

    body.card-page.design-editorial .profile-header,
    body.card-page.design-editorial.has-brand-logo .profile-header.brand-header{
        padding:36px 24px 24px;
    }
    body.card-page.design-editorial .profile-shell > section,
    body.card-page.design-editorial .profile-shell > section:nth-of-type(even),
    body.card-page.design-editorial .profile-shell > section:nth-of-type(odd){
        width:100%;
        margin-left:0;
        padding:28px 24px;
    }
    body.card-page.design-editorial .gallery{
        grid-template-columns:1fr 1fr;
    }
    body.card-page.design-editorial .gallery img:first-child{
        grid-row:auto;
        height:auto;
        aspect-ratio:4/3;
    }
    body.card-page.design-editorial .profile-footer,
    body.card-page.design-editorial.has-brand-logo .brand-headline{
        padding-left:24px;
        padding-right:24px;
    }
    body.card-page.design-editorial.has-brand-logo .profile-logo.brand-logo{
        width:100%;
        max-width:100%;
        object-position:center;
    }
}


/* ==========================================================================
   ESO ONE – Designsystem V2 – 08.10.2026
   Die fünf Vorlagen unterscheiden sich jetzt strukturell, nicht nur über Abstände.
   ========================================================================== */

/* Dritte neutrale Kundenfarbe: ESO ONE */
body.card-page.mode-green{
  background:#07140f !important;
  color:#edf3ef !important;
}
body.card-page.mode-green .profile-shell{
  background:#10231a !important;
  border-color:#355044 !important;
}
body.card-page.mode-green .profile-header,
body.card-page.mode-green .brand-headline,
body.card-page.mode-green .profile-shell > section,
body.card-page.mode-green .profile-core-layout,
body.card-page.mode-green .profile-footer{
  border-color:#2d4539 !important;
}
body.card-page.mode-green .contact-grid > div,
body.card-page.mode-green .items-grid article,
body.card-page.mode-green .menu-list > div,
body.card-page.mode-green .event-list > div{
  background:#142a20 !important;
}

/* gemeinsame neue Kernstruktur */
body.card-page .profile-core-layout{
  border-top:1px solid rgba(128,128,128,.2);
}
body.card-page .profile-core-layout > .profile-about,
body.card-page .profile-core-details > section{
  border-top:0;
}
body.card-page .profile-core-details{
  min-width:0;
}

/* 1. KLASSISCH
   Traditioneller Aufbau, alles sauber untereinander. */
body.card-page.design-classic .profile-shell{
  max-width:920px !important;
  display:block !important;
}
body.card-page.design-classic .profile-header{
  min-height:0 !important;
  padding:34px !important;
  display:flex !important;
  align-items:center !important;
  text-align:left !important;
}
body.card-page.design-classic .profile-core-layout{
  display:block !important;
}
body.card-page.design-classic .profile-core-layout > .profile-about,
body.card-page.design-classic .profile-core-details > section{
  padding:26px 34px !important;
}
body.card-page.design-classic .profile-core-details > section + section{
  border-top:1px solid rgba(128,128,128,.2) !important;
}

/* 2. HERO / GROSSES KOPFDESIGN
   Kopf dominiert die Seite; Inhalt wird breiter und großzügiger. */
body.card-page.design-hero .profile-shell{
  max-width:1180px !important;
  display:block !important;
  border-radius:20px !important;
}
body.card-page.design-hero .profile-header{
  min-height:430px !important;
  padding:56px 64px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  text-align:left !important;
  background:
    radial-gradient(circle at 85% 20%,rgba(209,176,115,.18),transparent 28%),
    linear-gradient(160deg,rgba(209,176,115,.08),transparent 55%) !important;
}
body.card-page.design-hero .profile-header.name-header .profile-logo{
  width:126px !important;
  height:126px !important;
}
body.card-page.design-hero .profile-header.name-header h1{
  font-size:clamp(46px,7vw,76px) !important;
  line-height:1 !important;
}
body.card-page.design-hero.has-brand-logo .profile-header.brand-header{
  min-height:410px !important;
  padding:26px !important;
  align-items:center !important;
  justify-content:center !important;
}
body.card-page.design-hero.has-brand-logo .profile-logo.brand-logo{
  width:var(--header-logo-width,100%) !important;
  max-width:100% !important;
  max-height:360px !important;
  object-fit:contain !important;
}
body.card-page.design-hero .profile-actions{
  padding:18px 56px 22px !important;
}
body.card-page.design-hero .profile-core-layout{
  display:grid !important;
  grid-template-columns:1.25fr .75fr !important;
  gap:0 !important;
}
body.card-page.design-hero .profile-core-layout > .profile-about{
  padding:46px 56px !important;
}
body.card-page.design-hero .profile-core-details{
  padding:28px 24px !important;
  background:rgba(128,128,128,.055) !important;
}
body.card-page.design-hero .profile-core-details > section{
  padding:18px 22px !important;
}
body.card-page.design-hero .profile-shell > section{
  padding:38px 56px !important;
}

/* 3. GETEILT
   Oben Header über volle Breite; darunter links Text, rechts Schwerpunkte/Leistungen. */
body.card-page.design-split .profile-shell{
  max-width:1120px !important;
  display:block !important;
  border-radius:14px !important;
}
body.card-page.design-split .profile-header,
body.card-page.design-split.has-brand-logo .profile-header.brand-header{
  width:100% !important;
  min-height:260px !important;
  height:auto !important;
  padding:34px 42px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:28px !important;
  border-right:0 !important;
  background:rgba(128,128,128,.045) !important;
}
body.card-page.design-split.has-brand-logo .profile-logo.brand-logo{
  width:var(--header-logo-width,100%) !important;
  max-width:100% !important;
  max-height:235px !important;
  object-fit:contain !important;
}
body.card-page.design-split .profile-actions{
  padding:16px 38px !important;
}
body.card-page.design-split .profile-core-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  align-items:stretch !important;
}
body.card-page.design-split .profile-core-layout > .profile-about{
  padding:42px 42px !important;
  border-right:1px solid rgba(128,128,128,.2) !important;
}
body.card-page.design-split .profile-core-layout > .profile-about h2{
  font-size:30px !important;
}
body.card-page.design-split .profile-core-layout > .profile-about p{
  font-size:17px !important;
  line-height:1.75 !important;
}
body.card-page.design-split .profile-core-details{
  padding:24px 28px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
body.card-page.design-split .profile-core-details > section{
  padding:17px 14px !important;
}
body.card-page.design-split .profile-core-details > section + section{
  border-top:1px solid rgba(128,128,128,.16) !important;
}
body.card-page.design-split .profile-shell > section:not(.profile-actions){
  padding:30px 42px !important;
}

/* 4. KOMPAKT
   Bewusst wie eine schlanke digitale Visitenkarte. */
body.card-page.design-compact{
  padding-top:20px !important;
  padding-bottom:20px !important;
}
body.card-page.design-compact .profile-shell{
  max-width:650px !important;
  display:block !important;
  border-radius:14px !important;
}
body.card-page.design-compact .profile-header{
  min-height:0 !important;
  padding:20px 22px !important;
}
body.card-page.design-compact .profile-header.name-header .profile-logo{
  width:64px !important;
  height:64px !important;
}
body.card-page.design-compact .profile-header.name-header h1{
  font-size:30px !important;
}
body.card-page.design-compact.has-brand-logo .profile-header.brand-header{
  min-height:0 !important;
  padding:14px 18px !important;
}
body.card-page.design-compact.has-brand-logo .profile-logo.brand-logo{
  max-height:145px !important;
}
body.card-page.design-compact .profile-actions{
  padding:10px 18px !important;
}
body.card-page.design-compact .profile-action-button{
  min-width:105px !important;
  padding:7px 10px !important;
  font-size:13px !important;
}
body.card-page.design-compact .profile-core-layout{
  display:block !important;
}
body.card-page.design-compact .profile-core-layout > .profile-about,
body.card-page.design-compact .profile-core-details > section,
body.card-page.design-compact .profile-shell > section{
  padding:15px 20px !important;
}
body.card-page.design-compact .profile-shell h2{
  font-size:18px !important;
  margin-bottom:8px !important;
}
body.card-page.design-compact .pill-list span{
  padding:5px 9px !important;
  font-size:13px !important;
}
body.card-page.design-compact .contact-grid{
  gap:7px !important;
}

/* 5. EDITORIAL
   Magazinstil, starke Typografie, asymmetrische Inhaltsführung. */
body.card-page.design-editorial .profile-shell{
  max-width:1080px !important;
  display:block !important;
  border-radius:3px !important;
}
body.card-page.design-editorial .profile-header{
  min-height:0 !important;
  padding:68px 74px 52px !important;
  display:block !important;
  text-align:left !important;
}
body.card-page.design-editorial .profile-header h1,
body.card-page.design-editorial .profile-shell h2{
  font-family:Georgia,"Times New Roman",serif !important;
  font-weight:400 !important;
}
body.card-page.design-editorial .profile-header h1{
  font-size:clamp(48px,7vw,78px) !important;
  line-height:1 !important;
  max-width:800px !important;
}
body.card-page.design-editorial.has-brand-logo .profile-header.brand-header{
  padding:52px 74px 34px !important;
  align-items:flex-start !important;
}
body.card-page.design-editorial.has-brand-logo .profile-logo.brand-logo{
  width:min(var(--header-logo-width,100%),82%) !important;
  max-width:800px !important;
  max-height:290px !important;
  object-position:left center !important;
}
body.card-page.design-editorial .brand-headline{
  padding:12px 74px 42px !important;
  text-align:left !important;
}
body.card-page.design-editorial .brand-headline p{
  max-width:690px !important;
  font:400 23px/1.55 Georgia,"Times New Roman",serif !important;
}
body.card-page.design-editorial .profile-actions{
  justify-content:flex-start !important;
  padding:18px 74px !important;
}
body.card-page.design-editorial .profile-action-row{
  justify-content:flex-start !important;
}
body.card-page.design-editorial .profile-core-layout{
  display:grid !important;
  grid-template-columns:1.35fr .65fr !important;
  gap:0 !important;
}
body.card-page.design-editorial .profile-core-layout > .profile-about{
  padding:54px 74px !important;
}
body.card-page.design-editorial .profile-core-layout > .profile-about p{
  font-size:18px !important;
  line-height:1.85 !important;
}
body.card-page.design-editorial .profile-core-details{
  padding:40px 34px !important;
  background:rgba(128,128,128,.045) !important;
}
body.card-page.design-editorial .profile-core-details > section{
  padding:18px 8px !important;
}
body.card-page.design-editorial .profile-shell > section{
  width:86% !important;
  margin-left:auto !important;
  padding:42px 74px !important;
}
body.card-page.design-editorial .gallery{
  grid-template-columns:2fr 1fr 1fr !important;
  gap:15px !important;
}

/* Mobile: Split wird sauber einspaltig, die anderen Charaktere bleiben erhalten. */
@media(max-width:760px){
  body.card-page.design-hero .profile-header{
    min-height:300px !important;
    padding:34px 24px !important;
  }
  body.card-page.design-hero .profile-core-layout,
  body.card-page.design-split .profile-core-layout,
  body.card-page.design-editorial .profile-core-layout{
    grid-template-columns:1fr !important;
  }
  body.card-page.design-hero .profile-core-layout > .profile-about,
  body.card-page.design-split .profile-core-layout > .profile-about,
  body.card-page.design-editorial .profile-core-layout > .profile-about{
    border-right:0 !important;
  }
  body.card-page.design-split .profile-header,
  body.card-page.design-split.has-brand-logo .profile-header.brand-header{
    min-height:0 !important;
    padding:26px 20px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  body.card-page.design-editorial .profile-header,
  body.card-page.design-editorial.has-brand-logo .profile-header.brand-header{
    padding:38px 24px 28px !important;
  }
  body.card-page.design-editorial .brand-headline,
  body.card-page.design-editorial .profile-actions,
  body.card-page.design-editorial .profile-core-layout > .profile-about,
  body.card-page.design-editorial .profile-shell > section{
    width:100% !important;
    margin-left:0 !important;
    padding-left:24px !important;
    padding-right:24px !important;
  }
  body.card-page.design-editorial .gallery{
    grid-template-columns:1fr 1fr !important;
  }
}


/* ==========================================================================
   ESO ONE – Korrektur 08.10.2026
   - ESO-ONE-Farbe exakt #0C161B
   - Schwerpunkte / Leistungen / Rechtsgebiete konsequent linksbündig
   ========================================================================== */

/* Exakte dritte neutrale ESO-ONE-Farbe */
body.card-page.mode-green{
  background:#0C161B !important;
  color:#edf3ef !important;
}
body.card-page.mode-green .profile-shell{
  background:#0C161B !important;
  border-color:#31434b !important;
}
body.card-page.mode-green .profile-header,
body.card-page.mode-green .brand-headline,
body.card-page.mode-green .profile-shell > section,
body.card-page.mode-green .profile-core-layout,
body.card-page.mode-green .profile-footer{
  background:#0C161B !important;
  border-color:#2a3b43 !important;
}

/* Inhalte der Schwerpunkte immer links */
body.card-page .profile-core-details,
body.card-page .profile-core-details > section,
body.card-page .profile-core-details h2,
body.card-page .profile-core-details .pill-list{
  text-align:left !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
}
body.card-page .profile-core-details .pill-list{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
body.card-page .profile-core-details .pill-list span{
  text-align:left !important;
}

/* Auch außerhalb der Kernstruktur Schwerpunkte/Leistungen linksbündig halten */
body.card-page section .pill-list{
  justify-content:flex-start !important;
  text-align:left !important;
}
body.card-page section > h2{
  text-align:left !important;
}


/* ==========================================================================
   ESO ONE – Korrektur 08.10.2026
   Gewünschter sichtbarer ESO-ONE-Ton + Schwerpunkte im Split LINKS.
   ========================================================================== */

/* ESO-ONE-Farbwelt exakt auf den im Screenshot sichtbaren dunklen Blau-Grün-Ton abgestimmt */
body.card-page.mode-green{
  background:#07140F !important;
  color:#edf3ef !important;
}
body.card-page.mode-green .profile-shell{
  background:#15271E !important;
  border-color:#355044 !important;
}
body.card-page.mode-green .profile-header,
body.card-page.mode-green .brand-headline{
  background:#15271E !important;
}
body.card-page.mode-green .profile-core-layout,
body.card-page.mode-green .profile-shell > section,
body.card-page.mode-green .profile-footer{
  background:#10231A !important;
  border-color:#2c4337 !important;
}
body.card-page.mode-green .profile-core-details{
  background:#10231A !important;
}
body.card-page.mode-green .contact-grid > div,
body.card-page.mode-green .items-grid article,
body.card-page.mode-green .menu-list > div,
body.card-page.mode-green .event-list > div{
  background:#15271E !important;
}

/* GETEILT: links Schwerpunkte/Leistungen/Rechtsgebiete, rechts Über uns */
body.card-page.design-split .profile-core-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
}
body.card-page.design-split .profile-core-details{
  grid-column:1 !important;
  grid-row:1 !important;
  padding:30px 36px !important;
  border-right:1px solid rgba(128,128,128,.20) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  text-align:left !important;
}
body.card-page.design-split .profile-core-layout > .profile-about{
  grid-column:2 !important;
  grid-row:1 !important;
  padding:42px 42px !important;
  border-right:0 !important;
  text-align:left !important;
}
body.card-page.design-split .profile-core-details > section,
body.card-page.design-split .profile-core-details h2,
body.card-page.design-split .profile-core-details .pill-list{
  text-align:left !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
}
body.card-page.design-split .profile-core-details .pill-list{
  width:100% !important;
}

/* Mobil wieder normal untereinander: Schwerpunkte zuerst, Über uns danach */
@media(max-width:760px){
  body.card-page.design-split .profile-core-layout{
    display:flex !important;
    flex-direction:column !important;
  }
  body.card-page.design-split .profile-core-details{
    order:1 !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(128,128,128,.20) !important;
    padding:24px 20px !important;
  }
  body.card-page.design-split .profile-core-layout > .profile-about{
    order:2 !important;
    padding:26px 20px !important;
  }
}


/* ==========================================================================
   ESO ONE – einheitliche ESO-ONE-Fläche – 08.10.2026
   Seitenhintergrund, Hauptfläche und Inhaltsflächen erhalten denselben Ton.
   Abgrenzungen bleiben ausschließlich über feine Linien sichtbar.
   ========================================================================== */

body.card-page.mode-green,
body.card-page.mode-green .profile-shell,
body.card-page.mode-green .profile-header,
body.card-page.mode-green .brand-headline,
body.card-page.mode-green .profile-core-layout,
body.card-page.mode-green .profile-core-layout > .profile-about,
body.card-page.mode-green .profile-core-details,
body.card-page.mode-green .profile-core-details > section,
body.card-page.mode-green .profile-shell > section,
body.card-page.mode-green .profile-footer,
body.card-page.mode-green .contact-grid > div,
body.card-page.mode-green .items-grid article,
body.card-page.mode-green .menu-list > div,
body.card-page.mode-green .event-list > div{
  background:#0C161B !important;
}

/* Feine sichtbare Abgrenzungen statt unterschiedlicher Flächenfarben */
body.card-page.mode-green .profile-shell,
body.card-page.mode-green .profile-header,
body.card-page.mode-green .brand-headline,
body.card-page.mode-green .profile-core-layout,
body.card-page.mode-green .profile-core-layout > .profile-about,
body.card-page.mode-green .profile-core-details,
body.card-page.mode-green .profile-core-details > section,
body.card-page.mode-green .profile-shell > section,
body.card-page.mode-green .profile-footer,
body.card-page.mode-green .contact-grid > div,
body.card-page.mode-green .items-grid article,
body.card-page.mode-green .menu-list > div,
body.card-page.mode-green .event-list > div{
  border-color:#2B3D45 !important;
}

/* Split-Trennlinie etwas deutlicher */
body.card-page.mode-green.design-split .profile-core-details{
  border-right:1px solid #32464F !important;
}
body.card-page.mode-green.design-split .profile-core-layout > .profile-about{
  border-left:0 !important;
}

/* Tabellen / Listen weiterhin klar erkennbar */
body.card-page.mode-green table,
body.card-page.mode-green th,
body.card-page.mode-green td{
  background:#0C161B !important;
  border-color:#32464F !important;
}
body.card-page.mode-green th{
  color:#E7C17A !important;
}

/* Kartenabgrenzungen sichtbar, ohne andere Hintergrundfarbe */
body.card-page.mode-green .items-grid article,
body.card-page.mode-green .contact-grid > div,
body.card-page.mode-green .menu-list > div,
body.card-page.mode-green .event-list > div{
  border:1px solid #2B3D45 !important;
}


/* ==========================================================================
   ESO ONE – FINALKORREKTUR 08.10.2026
   1) ESO-ONE-Farbe = dunkles Blau-Grün der Plattform, nicht das bisherige Grün
   2) GETEILT: Schwerpunkte/Leistungen LINKS, Beschreibung/Über uns RECHTS
   ========================================================================== */

/* Exakter ESO-ONE-Grundton */
html body.card-page.mode-green,
html body.card-page.mode-green .profile-shell,
html body.card-page.mode-green .profile-header,
html body.card-page.mode-green .brand-headline,
html body.card-page.mode-green .profile-actions,
html body.card-page.mode-green .profile-core-layout,
html body.card-page.mode-green .profile-core-layout > .profile-about,
html body.card-page.mode-green .profile-core-details,
html body.card-page.mode-green .profile-core-details > section,
html body.card-page.mode-green .profile-shell > section,
html body.card-page.mode-green .profile-footer,
html body.card-page.mode-green .contact-grid > div,
html body.card-page.mode-green .items-grid article,
html body.card-page.mode-green .menu-list > div,
html body.card-page.mode-green .event-list > div{
    background:#071015 !important;
    background-color:#071015 !important;
}

/* Nur Linien geben die Bereiche vor */
html body.card-page.mode-green .profile-shell,
html body.card-page.mode-green .profile-header,
html body.card-page.mode-green .brand-headline,
html body.card-page.mode-green .profile-actions,
html body.card-page.mode-green .profile-core-layout,
html body.card-page.mode-green .profile-core-layout > .profile-about,
html body.card-page.mode-green .profile-core-details,
html body.card-page.mode-green .profile-core-details > section,
html body.card-page.mode-green .profile-shell > section,
html body.card-page.mode-green .profile-footer,
html body.card-page.mode-green .contact-grid > div,
html body.card-page.mode-green .items-grid article,
html body.card-page.mode-green .menu-list > div,
html body.card-page.mode-green .event-list > div{
    border-color:#273940 !important;
}

/* GETEILT – physisch über Grid-Areas festgelegt */
html body.card-page.design-split .profile-core-layout{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:"details about" !important;
    align-items:stretch !important;
}

html body.card-page.design-split .profile-core-details{
    grid-area:details !important;
    grid-column:1 !important;
    grid-row:1 !important;
    order:1 !important;
    padding:34px 40px !important;
    border-right:1px solid #273940 !important;
    border-left:0 !important;
    text-align:left !important;
}

html body.card-page.design-split .profile-core-layout > .profile-about{
    grid-area:about !important;
    grid-column:2 !important;
    grid-row:1 !important;
    order:2 !important;
    padding:42px 42px !important;
    border-right:0 !important;
    border-left:0 !important;
    text-align:left !important;
}

/* Schwerpunkte / Leistungen / Rechtsgebiete innerhalb der linken Spalte */
html body.card-page.design-split .profile-core-details,
html body.card-page.design-split .profile-core-details > section,
html body.card-page.design-split .profile-core-details h2,
html body.card-page.design-split .profile-core-details .pill-list{
    text-align:left !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
}

html body.card-page.design-split .profile-core-details .pill-list{
    display:flex !important;
    flex-wrap:wrap !important;
    width:100% !important;
    gap:8px !important;
}

/* Mobil: Schwerpunkte zuerst, Beschreibung danach */
@media(max-width:760px){
    html body.card-page.design-split .profile-core-layout{
        display:flex !important;
        flex-direction:column !important;
    }
    html body.card-page.design-split .profile-core-details{
        order:1 !important;
        width:100% !important;
        border-right:0 !important;
        border-bottom:1px solid #273940 !important;
        padding:24px 20px !important;
    }
    html body.card-page.design-split .profile-core-layout > .profile-about{
        order:2 !important;
        width:100% !important;
        padding:26px 20px !important;
    }
}