/*
TT5 AfD Brand Manual Child Theme — UI/Card System
Scope: Frontend shortcode [afd_design_system] + optional block styles.
*/
:root{
  --afd-blue:#00508a;
  --afd-blue-700:#003b66;
  --afd-blue-800:#003052;
  --afd-sky:#009ee0;
  --afd-sky-100:#eaf8ff;
  --afd-red:#e30613;
  --afd-dark:#0e172a;
  --afd-ink:#45546d;
  --afd-muted:#8190a7;
  --afd-line:#d8e4ef;
  --afd-line-strong:#bfd1e2;
  --afd-bg:#f4f7fb;
  --afd-card:#fff;
  --afd-soft:#eef8ff;
  --afd-focus:rgba(0,158,224,.22);
  --afd-radius-xs:8px;
  --afd-radius-sm:12px;
  --afd-radius-md:16px;
  --afd-radius-lg:22px;
  --afd-radius-xl:28px;
  --afd-display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --afd-serif:"Bitter",Georgia,serif;
  --afd-shadow-xs:0 1px 2px rgba(0,49,84,.06);
  --afd-shadow-sm:0 2px 7px rgba(0,49,84,.08),0 1px 2px rgba(0,49,84,.06);
  --afd-shadow-md:0 10px 25px rgba(0,49,84,.09),0 2px 7px rgba(0,49,84,.08);
  --afd-shadow-lg:0 20px 55px rgba(0,49,84,.12),0 6px 18px rgba(0,49,84,.08);
  --afd-shadow-inset:inset 0 1px 0 rgba(255,255,255,.86),inset 0 -1px 0 rgba(0,49,84,.04);
  --afd-card-gradient:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

.afd-shell,.afd-shell *{box-sizing:border-box}
.afd-shell{min-height:100vh;background:radial-gradient(circle at 75% 0,rgba(0,158,224,.08),transparent 32rem),var(--afd-bg);color:var(--afd-ink);font-family:var(--afd-serif);display:grid;grid-template-columns:300px minmax(0,1fr);margin:0 calc(50% - 50vw);width:100vw;scroll-behavior:smooth}
.afd-shell a{transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease,border-color .16s ease}
.afd-shell button,.afd-shell input,.afd-shell select,.afd-shell textarea{font:inherit}
.afd-shell :focus-visible{outline:3px solid var(--afd-focus);outline-offset:3px}

/* Card primitives */
.afd-card,
.afd-metric,
.afd-validation>div,
.afd-type-demo>div,
.afd-social article,
.afd-swatches button,
.is-style-afd-card{
  position:relative;
  background:var(--afd-card-gradient);
  border:1px solid var(--afd-line);
  border-radius:var(--afd-radius-lg);
  box-shadow:var(--afd-shadow-sm),var(--afd-shadow-inset);
  overflow:hidden;
}
.afd-card:before,
.afd-metric:before,
.afd-validation>div:before,
.afd-type-demo>div:before,
.afd-social article:before,
.is-style-afd-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,0) 34%);
}
.afd-card:hover,
.afd-metric:hover,
.afd-validation>div:hover,
.afd-type-demo>div:hover,
.afd-social article:hover,
.afd-swatches button:hover{
  border-color:#c4d6e7;
  box-shadow:var(--afd-shadow-md),var(--afd-shadow-inset);
  transform:translateY(-1px);
}
.afd-card--flat{box-shadow:var(--afd-shadow-xs);background:#fff}
.afd-card--raised{box-shadow:var(--afd-shadow-lg),var(--afd-shadow-inset)}
.afd-card--blue{background:linear-gradient(135deg,var(--afd-blue),var(--afd-sky));border-color:rgba(255,255,255,.25);color:#fff}
.afd-card--dark{background:linear-gradient(135deg,#071225,var(--afd-dark));border-color:#22314a;color:#fff}
.afd-card--soft{background:linear-gradient(180deg,#f8fcff,#fff);border-color:#e3edf6}
.afd-card__header,.afd-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #edf3f8}
.afd-card__title{font:900 30px/1 var(--afd-display);text-transform:uppercase;color:var(--afd-blue-700);margin:0}
.afd-card__meta{font:800 12px/1 var(--afd-display);text-transform:uppercase;color:var(--afd-muted);letter-spacing:.03em}
.afd-card__footer{margin-top:18px;padding-top:14px;border-top:1px solid #edf3f8;color:var(--afd-muted)}

/* Layout shell */
.afd-sidebar{position:sticky;top:0;height:100vh;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-right:1px solid var(--afd-line);padding:26px 22px;overflow:auto;box-shadow:6px 0 22px rgba(0,49,84,.04)}
.afd-logo-card{display:flex;align-items:center;justify-content:center;height:150px;background:linear-gradient(135deg,#fff,#f5f9fd);border:1px solid #edf3f8;border-radius:var(--afd-radius-lg);margin-bottom:24px;box-shadow:var(--afd-shadow-sm),var(--afd-shadow-inset);text-decoration:none}
.afd-logo-card:hover{transform:translateY(-1px);box-shadow:var(--afd-shadow-md),var(--afd-shadow-inset)}
.afd-logo-card img{width:215px;max-width:88%;height:auto}
.afd-mini-tabs{display:flex;gap:3px;background:#f5f8fc;border:1px solid #e1ebf4;border-radius:999px;padding:3px;margin-bottom:22px;box-shadow:inset 0 1px 3px rgba(0,49,84,.05)}
.afd-mini-tabs button{border:0;background:transparent;border-radius:999px;padding:8px 11px;font:800 11px/1 var(--afd-display);color:#536479;text-transform:uppercase;cursor:pointer;transition:all .16s ease}
.afd-mini-tabs button.is-active,.afd-mini-tabs button:hover{background:#fff;color:var(--afd-blue);box-shadow:var(--afd-shadow-sm)}
.afd-side-title,.afd-eyebrow{font:900 14px/1 var(--afd-display);text-transform:uppercase;color:var(--afd-blue);letter-spacing:.02em}
.afd-search{height:42px;border:1px solid var(--afd-line);border-radius:var(--afd-radius-sm);background:#fff;display:flex;align-items:center;gap:8px;padding:0 12px;margin:14px 0 22px;box-shadow:var(--afd-shadow-xs);transition:all .16s ease}
.afd-search:focus-within{border-color:var(--afd-sky);box-shadow:0 0 0 4px var(--afd-focus),var(--afd-shadow-sm)}
.afd-search input{border:0!important;outline:0!important;width:100%;height:auto!important;background:transparent!important;box-shadow:none!important;color:var(--afd-ink);font-family:var(--afd-serif)}
.afd-search span{color:#86a0ba}
.afd-steps{display:flex;flex-direction:column;position:relative}
.afd-steps:before{content:"";position:absolute;left:20px;top:10px;bottom:10px;width:2px;background:#d9e8f5}
.afd-steps a{position:relative;display:flex;align-items:center;gap:12px;text-decoration:none;color:#68768d;border-radius:13px;padding:11px 10px;font-weight:700;font-size:14px}
.afd-steps a span{z-index:1;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:2px solid #bdd0e3;border-radius:50%;color:var(--afd-blue);font-family:var(--afd-display);background:#fff;box-shadow:0 0 0 4px #fff}
.afd-steps a.is-active,.afd-steps a:hover{background:#eaf6fe;color:var(--afd-blue);box-shadow:inset 0 0 0 1px rgba(0,158,224,.08)}
.afd-steps a.is-active span{border-color:var(--afd-sky);box-shadow:inset 0 0 0 4px #fff,0 0 0 4px #fff;background:var(--afd-sky);color:#fff}
.afd-main{min-width:0;padding:0 32px 70px}
.afd-topbar{position:sticky;top:0;z-index:20;background:linear-gradient(90deg,var(--afd-blue),var(--afd-sky));height:78px;margin:0 -32px 36px;padding-left:32px;display:flex;align-items:end;gap:12px;box-shadow:0 8px 22px rgba(0,80,138,.12)}
.afd-topbar a{font:900 15px/1 var(--afd-display);text-transform:uppercase;text-decoration:none;color:#fff;background:rgba(0,80,138,.68);border:1px solid rgba(255,255,255,.12);border-bottom:0;border-radius:16px 16px 0 0;padding:22px 34px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.afd-topbar a.is-active,.afd-topbar a:hover{background:#fff;color:#0c2a44;box-shadow:0 -1px 12px rgba(0,49,84,.12)}

/* Hero + KPI cards */
.afd-hero{max-width:1280px;margin:0 auto 28px;padding:42px 34px;display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:40px;align-items:center;border-radius:var(--afd-radius-xl)}
.afd-hero h1{font:900 clamp(46px,6vw,78px)/.95 var(--afd-display);text-transform:uppercase;letter-spacing:-.02em;color:var(--afd-blue-700);margin:.2em 0 .25em}
.afd-hero p{max-width:650px;font-size:18px;line-height:1.55}
.afd-redline{display:block;width:64px;height:5px;background:var(--afd-red);margin:22px 0;border-radius:999px;box-shadow:0 2px 4px rgba(227,6,19,.18)}
.afd-logo-stage{height:170px;border-radius:var(--afd-radius-lg);border:1px solid #edf5fb;background:linear-gradient(135deg,#f4fbff,#fff);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 #fff,0 10px 28px rgba(0,80,138,.06)}
.afd-logo-stage img{width:250px;max-width:80%;height:auto}
.afd-pills{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.afd-pills span{background:#eef3f8;border:1px solid #e2ebf4;border-radius:999px;padding:7px 14px;font:900 12px/1 var(--afd-display);color:var(--afd-blue);box-shadow:var(--afd-shadow-xs)}
.afd-kpis{max-width:1280px;margin:0 auto 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.afd-metric{padding:20px 22px;border-bottom:5px solid var(--afd-sky);border-radius:var(--afd-radius-md)}
.afd-metric-red{border-bottom-color:var(--afd-red)}
.afd-metric small{text-transform:uppercase;font-weight:800;color:#738199;letter-spacing:.02em}
.afd-metric strong{display:block;font:900 34px/1 var(--afd-display);text-transform:uppercase;color:var(--afd-blue);margin-top:6px}
.afd-metric span{display:block;color:#67748a}

/* Content sections */
.afd-grid-two{max-width:1280px;margin:0 auto 24px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.afd-section{padding:28px}
.afd-section h2{font:900 38px/1 var(--afd-display);text-transform:uppercase;color:var(--afd-blue-700);margin:0 0 22px;display:flex;align-items:center;gap:14px}
.afd-section h2 span{font:700 18px/1 sans-serif;display:inline-flex;width:38px;height:38px;border-radius:13px;align-items:center;justify-content:center;background:var(--afd-sky-100);color:var(--afd-sky);box-shadow:inset 0 0 0 1px rgba(0,158,224,.08)}
.afd-section p{font-size:16px;line-height:1.55}
.afd-safezone{position:relative;min-height:210px;margin-top:20px;border:2px dashed #7bd7ff;border-radius:var(--afd-radius-md);background:linear-gradient(135deg,#f8fbfe,#fff);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.afd-safezone:before{content:"";position:absolute;inset:40px;border:1px dashed #009ee0;border-radius:8px}
.afd-safezone img{width:230px;max-width:58%}
.afd-safezone span{position:absolute;background:#eaf8ff;color:var(--afd-blue);font:900 12px var(--afd-display);padding:5px 8px;border-radius:8px;border:1px solid #cfefff;box-shadow:var(--afd-shadow-xs)}
.afd-safezone .top{top:30px}.afd-safezone .right{right:20px}.afd-safezone .bottom{bottom:30px}.afd-safezone .left{left:20px}
.afd-logo-grid{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:var(--afd-radius-md);border:1px solid var(--afd-line);box-shadow:var(--afd-shadow-sm)}
.afd-logo-grid div{min-height:150px;padding:18px;background:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.afd-logo-grid b{display:block;color:#536479;font:900 13px var(--afd-serif);margin-bottom:20px}
.afd-logo-grid img{width:190px;max-width:88%;height:auto}
.afd-logo-grid .blue{background:linear-gradient(135deg,var(--afd-sky),#0084bd)}
.afd-logo-grid .dark{background:linear-gradient(135deg,#071225,var(--afd-dark))}
.afd-logo-grid .pale{background:#eaf7fd}
.afd-logo-grid .blue b,.afd-logo-grid .dark b{color:#fff}.afd-logo-grid .dark img{filter:brightness(0) invert(1)}

/* Buttons and chips */
.afd-btn,.wp-block-button.is-style-afd-primary .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border:0;border-radius:var(--afd-radius-sm);background:linear-gradient(180deg,var(--afd-blue),var(--afd-blue-700));color:#fff!important;font:900 16px/1 var(--afd-display);text-transform:uppercase;text-decoration:none;padding:13px 18px;box-shadow:0 8px 18px rgba(0,80,138,.18),inset 0 1px 0 rgba(255,255,255,.18);cursor:pointer;transition:all .16s ease}
.afd-btn:hover,.wp-block-button.is-style-afd-primary .wp-block-button__link:hover{background:linear-gradient(180deg,var(--afd-sky),#0087c1);transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,80,138,.22),inset 0 1px 0 rgba(255,255,255,.2)}
.afd-btn--ghost{background:#fff;color:var(--afd-blue)!important;border:1px solid var(--afd-line);box-shadow:var(--afd-shadow-sm)}
.afd-chip{display:inline-flex;align-items:center;border-radius:999px;background:#eef3f8;border:1px solid #e2ebf4;color:var(--afd-blue);font:900 12px/1 var(--afd-display);text-transform:uppercase;padding:7px 12px;box-shadow:var(--afd-shadow-xs)}

/* Swatches */
.afd-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.afd-swatches button{cursor:pointer;text-align:left;border-radius:var(--afd-radius-md);background:#fff;padding:95px 18px 18px;font-family:var(--afd-serif);color:var(--afd-ink)}
.afd-swatches button:before{content:"";position:absolute;inset:0 0 auto;height:78px;border-radius:var(--afd-radius-md) var(--afd-radius-md) 0 0;background:var(--sw);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.afd-swatches button:after{content:"Kopieren";position:absolute;top:18px;right:14px;background:rgba(255,255,255,.9);color:var(--afd-blue);border-radius:999px;padding:5px 9px;font:900 11px/1 var(--afd-display);text-transform:uppercase;opacity:0;transform:translateY(-4px);transition:all .16s ease;box-shadow:var(--afd-shadow-xs)}
.afd-swatches button:hover:after{opacity:1;transform:translateY(0)}
.afd-swatches b,.afd-swatches span,.afd-swatches small{display:block}.afd-swatches b{font-weight:900}.afd-swatches span{font:900 28px var(--afd-display);color:var(--afd-blue-700);margin-top:5px}

/* Forms */
.afd-form{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.afd-form label{display:flex;flex-direction:column;gap:8px;text-transform:uppercase;font:900 13px var(--afd-display);color:#526177}
.afd-form input,.afd-form select,.afd-form textarea,.afd-validation input{width:100%;border:1px solid var(--afd-line-strong);border-radius:var(--afd-radius-sm);padding:14px 16px;background:#fff;color:#526177;font:15px var(--afd-serif);box-shadow:inset 0 1px 2px rgba(0,49,84,.03);transition:all .16s ease}
.afd-form input:hover,.afd-form select:hover,.afd-form textarea:hover,.afd-validation input:hover{border-color:#9fb8cf}
.afd-form input:focus,.afd-form select:focus,.afd-form textarea:focus,.afd-validation input:focus{outline:0;border-color:var(--afd-sky);box-shadow:0 0 0 4px var(--afd-focus),inset 0 1px 2px rgba(0,49,84,.03)}
.afd-form input:disabled{background:#eef3f8;color:#9baabd;cursor:not-allowed}
.afd-form textarea{min-height:130px;resize:vertical}.afd-form .wide{grid-column:1/-1}
.afd-form fieldset{border:1px solid var(--afd-line);border-radius:var(--afd-radius-md);padding:22px;margin:0;background:#fff;box-shadow:var(--afd-shadow-xs)}
.afd-form legend{font:900 13px var(--afd-display);text-transform:uppercase;color:#526177;padding:0 10px}
.afd-form fieldset label{text-transform:none;font:16px var(--afd-serif);display:block;margin:12px 0;color:#526177}.afd-form input[type=checkbox],.afd-form input[type=radio]{width:auto;accent-color:var(--afd-sky);margin-right:10px;transform:translateY(1px)}
.afd-validation{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}.afd-validation>div{padding:20px;border-radius:var(--afd-radius-md)}
.afd-validation h3{font:900 30px/1 var(--afd-display);text-transform:uppercase;color:var(--afd-blue-700);margin:0 0 12px}.afd-validation p{font-size:14px;font-weight:900}.afd-validation .ok{color:#008037}.afd-validation .err{color:var(--afd-red)}
.afd-rule{background:#f5f8fb;border:1px solid #eaf0f6;border-radius:var(--afd-radius-md);padding:20px;margin-top:28px;box-shadow:inset 0 1px 0 #fff}

/* Typography + social */
.afd-type-demo,.afd-social{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.afd-type-demo>div,.afd-social article{padding:22px;border-radius:var(--afd-radius-md)}
.afd-type-demo small{text-transform:uppercase;font-weight:900;color:#8190a7}.afd-type-demo strong{display:block;font:900 34px/1 var(--afd-display);text-transform:uppercase;color:var(--afd-blue-700)}
.afd-social{grid-template-columns:repeat(3,1fr)}.afd-social article{min-height:220px}.afd-social img{width:190px;max-width:80%;height:auto}.afd-social h3{font:900 32px/1 var(--afd-display);text-transform:uppercase;color:var(--afd-blue-700)}
.afd-social .blue{background:linear-gradient(135deg,var(--afd-sky),#0087c1);color:#fff;border-color:rgba(255,255,255,.22)}.afd-social .blue h3,.afd-social .dark h3{color:#fff}.afd-social .dark{background:linear-gradient(135deg,#071225,var(--afd-dark));color:#fff;border-color:#25334b}

/* Block editor style hook */
.is-style-afd-card{padding:clamp(1.25rem,2vw,2rem)!important;border-radius:var(--afd-radius-lg)!important}

@media(max-width:1100px){.afd-shell{grid-template-columns:1fr}.afd-sidebar{position:relative;height:auto}.afd-steps:before{display:none}.afd-topbar{overflow:auto}.afd-hero,.afd-grid-two,.afd-kpis,.afd-swatches,.afd-validation,.afd-social{grid-template-columns:1fr}.afd-hero{padding:28px}.afd-logo-stage{height:140px}}
@media(max-width:620px){.afd-main{padding:0 16px 40px}.afd-topbar{margin:0 -16px 24px;padding-left:16px}.afd-topbar a{padding:18px 20px}.afd-section{padding:20px}.afd-section h2{font-size:30px}.afd-form{grid-template-columns:1fr}.afd-hero h1{font-size:42px}.afd-card,.afd-metric,.afd-validation>div,.afd-type-demo>div,.afd-social article,.afd-swatches button{border-radius:var(--afd-radius-md)}}
@media(prefers-reduced-motion:reduce){.afd-shell *{transition:none!important;scroll-behavior:auto!important}.afd-card:hover,.afd-metric:hover,.afd-validation>div:hover,.afd-type-demo>div:hover,.afd-social article:hover,.afd-swatches button:hover,.afd-logo-card:hover,.afd-btn:hover{transform:none!important}}