.wl-wetter{
  /* CI: nutzt (falls vorhanden) Kadence/Theme-Paletten, sonst Fallback */
  --wl-primary: var(--global-palette1, #335381);
  --wl-accent: var(--global-palette4, #E94824);
  --wl-text: var(--global-palette3, #0b1f2a);
  --wl-muted: rgba(51, 83, 129, .85);
  --wl-line: rgba(51, 83, 129, .18);
  --wl-soft: rgba(51, 83, 129, .06);
  --wl-card: #fff;
  --wl-shadow: 0 12px 30px rgba(0, 0, 0, .08);
  --wl-r: 18px;

  width:100%;
  font-family: inherit;
  color: var(--wl-text);
}

/* ---- Shared Card (same CI for Wetter + Gezeiten) ---- */
.wl-card{
  background: var(--wl-card);
  border:1px solid var(--wl-line);
  border-radius: var(--wl-r);
  box-shadow: var(--wl-shadow);
  overflow:hidden;
}
.wl-card__head{
  padding: 14px 16px;
  border-bottom: 1px solid var(--wl-line);
  background: rgba(0,0,0,.02);
}
.wl-card__title{
  margin:0;
  font-size:20px;
  font-weight:950;
  letter-spacing:-.02em;
  color: var(--wl-accent);
}
.wl-card__sub{
  margin-top:4px;
  font-size:13px;
  font-weight:800;
  color: var(--wl-primary);
  opacity:.9;
}

.wl-wetter__card{
  background: var(--wl-card);
  border:1px solid var(--wl-line);
  border-radius: var(--wl-r);
  box-shadow: var(--wl-shadow);
  overflow:hidden;
}

.wl-wetter__head{
  padding: 16px 18px;
  border-bottom: 1px solid var(--wl-line);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  background: linear-gradient(90deg, rgba(51,83,129,.08), rgba(233,72,36,.06));
}

.wl-wetter__brand{display:flex;align-items:center;gap:10px}
.wl-wetter__mark{
  width:34px;height:34px;border-radius:10px;
  background: linear-gradient(135deg, var(--wl-primary), var(--wl-accent));
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  position:relative;
}
.wl-wetter__mark:after{
  content:"";
  position:absolute; left:7px; right:7px; bottom:10px; height:2px;
  background:rgba(255,255,255,.9);
  border-radius:999px;
  box-shadow: 0 -6px 0 rgba(255,255,255,.55);
  opacity:.9;
}

.wl-wetter__title{margin:0;font-size:18px;font-weight:900;letter-spacing:-.02em;color:var(--wl-primary)}
.wl-wetter__sub{color:var(--wl-muted);font-weight:700;font-size:13px}

.wl-wetter__pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--wl-line);
  background:rgba(255,255,255,.8);
  color:var(--wl-muted);
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
}
.wl-wetter__dot{width:6px;height:6px;border-radius:999px;background:var(--wl-accent);display:inline-block}

.wl-wetter__grid{
  padding:18px;
  display:grid;
  grid-template-columns: 340px minmax(0,1fr);
  gap:18px;
  align-items:stretch;
}

.wl-wetter__hero{
  height:100%;
  padding:16px;
  border:1px solid var(--wl-line);
  border-radius:16px;
  background: linear-gradient(180deg, #fff 0%, rgba(51,83,129,.05) 100%);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
}

.wl-wetter__heroMain{display:flex;align-items:center;gap:16px}
.wl-wetter__icon{
  width:108px;height:108px;border-radius:24px;
  border:1px solid var(--wl-line);
  background:linear-gradient(180deg,#fff 0%, rgba(51,83,129,.04) 100%);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  color: var(--wl-primary);
}
.wl-wetter__icon svg{width:70px;height:70px}

.wl-wetter__temp{font-size:84px;line-height:1;font-weight:950;letter-spacing:-.04em;color:var(--wl-primary)}
.wl-wetter__temp small{font-size:.55em;font-weight:850;opacity:.95}
.wl-wetter__phrase{margin-top:6px;color:var(--wl-muted);font-weight:800}
.wl-wetter__feels{margin-top:4px;color:var(--wl-muted);font-weight:750}

.wl-wetter__badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.wl-wetter__badge{
  font-size:12px;font-weight:900;
  border:1px solid var(--wl-line);
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  white-space:nowrap;
}

.wl-wetter__sectionTitle{margin:0 0 10px 0;font-size:16px;color:var(--wl-primary);font-weight:950}

.wl-wetter__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wl-wetter__kpi{
  background:var(--wl-soft);
  border:1px solid var(--wl-line);
  border-radius:16px;
  padding:12px;
  min-height:82px;
}
.wl-wetter__k{font-size:12px;color:var(--wl-muted);font-weight:900;text-transform:uppercase;letter-spacing:.03em}
.wl-wetter__v{margin-top:6px;font-size:16px;font-weight:950;color:var(--wl-primary)}
.wl-wetter__s{margin-top:2px;font-size:12px;color:var(--wl-muted);font-weight:750}

.wl-wetter__tips{
  padding: 16px 18px;
  border-top:1px solid var(--wl-line);
  background: linear-gradient(180deg, rgba(233,72,36,.05), rgba(255,255,255,0));
}
.wl-wetter__tipsGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wl-wetter__tipBox{border:1px solid var(--wl-line);border-radius:16px;padding:12px;background:#fff}
.wl-wetter__tipTitle{margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--wl-primary);font-weight:950}
.wl-wetter__tipText{margin-top:8px;font-size:16px;line-height:1.45;font-weight:750;color:var(--wl-text)}

.wl-wetter__meta{
  padding:12px 18px;
  border-top:1px solid var(--wl-line);
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:var(--wl-muted);
  font-weight:700;
  font-size:12px;
}

.wl-wetter__error{padding:16px 18px;color:var(--wl-muted);font-weight:700}

@media (max-width:980px){
  .wl-wetter__grid{grid-template-columns:1fr}
  .wl-wetter__temp{font-size:72px}
}
@media (max-width:780px){
  .wl-wetter__kpis{grid-template-columns:1fr 1fr}
  .wl-wetter__tipsGrid{grid-template-columns:1fr}
  .wl-wetter__temp{font-size:64px}
}
@media (max-width:520px){
  .wl-wetter__kpis{grid-template-columns:1fr}
  .wl-wetter__temp{font-size:58px}
  .wl-wetter__icon{width:86px;height:86px}
  .wl-wetter__icon svg{width:60px;height:60px}
}

/* Super-mini Shortcode: [wetter_wangerland_mini] (Gezeiten-CI) */
.wl-card--wettermini .wl-wetter__miniBody{
  padding: 14px 16px;
  display:grid;
  gap:10px;
}

.wl-wetter--supermini .wl-wetter__miniTop{
  display:flex;
  align-items:center;
  gap:12px;
}

.wl-wetter--supermini .wl-wetter__miniIcon{
  width:56px;height:56px;
  border-radius:16px;
  border:1px solid var(--wl-line);
  background: linear-gradient(180deg,#fff 0%, rgba(51,83,129,.04) 100%);
  display:flex;align-items:center;justify-content:center;
  color: var(--wl-primary);
  flex:0 0 auto;
}
.wl-wetter--supermini .wl-wetter__miniIcon svg{width:34px;height:34px}

.wl-wetter--supermini .wl-wetter__miniTemp{
  font-size:40px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.04em;
  color: var(--wl-primary);
}

/* ---- Gezeiten ---- */
.wl-tide{width:100%;font-family:inherit;color:var(--wl-text)}
.wl-tide__body{padding:14px 16px}
.wl-tide__table{display:grid;gap:10px}
.wl-tide__row{
  display:grid;
  grid-template-columns: 130px 1fr 1fr;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--wl-line);
  border-radius:16px;
  background: #fff;
}
.wl-tide__row--head{
  background: rgba(51,83,129,.06);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:12px;
  color: var(--wl-primary);
}
.wl-tide__date{font-weight:900;color:var(--wl-primary)}
.wl-tide__times{display:flex;flex-wrap:wrap;gap:10px}
.wl-tide__time{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--wl-line);
  background: rgba(51,83,129,.04);
  font-weight:900;
  color: var(--wl-primary);
  font-size:13px;
  white-space:nowrap;
}
.wl-tide__dash{color:var(--wl-muted);font-weight:800}
.wl-tide__svgi{width:16px;height:16px;display:inline-block;color:var(--wl-accent)}
.wl-tide__hint{color:var(--wl-muted);font-weight:800;margin-bottom:10px}
.wl-tide__next{display:grid;gap:10px}
.wl-tide__nextItem{display:flex;gap:10px;align-items:center;border:1px solid var(--wl-line);border-radius:16px;padding:12px;background:#fff}
.wl-tide__icon{width:38px;height:38px;border-radius:12px;border:1px solid var(--wl-line);background: rgba(51,83,129,.04);display:flex;align-items:center;justify-content:center;color:var(--wl-accent)}
.wl-tide__nextType{font-weight:950;color:var(--wl-primary)}
.wl-tide__nextTime{font-weight:800;color:var(--wl-muted);margin-top:2px}

@media (max-width:780px){
  .wl-tide__row{grid-template-columns: 1fr;}
  .wl-tide__row--head{display:none;}
}
.wl-wetter--supermini .wl-wetter__miniTemp span{
  font-size:.55em;
  font-weight:850;
  opacity:.95;
  margin-left:2px;
}

.wl-wetter--supermini .wl-wetter__miniLines{
  display:grid;
  gap:6px;
}
.wl-wetter--supermini .wl-wetter__miniLine{
  font-size:14px;
  font-weight:750;
  color: var(--wl-text);
}
.wl-wetter--supermini .wl-wetter__miniLine strong{
  color: var(--wl-primary);
  font-weight:950;
}

/* ---- Wetter Forecast ---- */
.wl-wf__body{padding:14px 16px}
.wl-wf__grid{display:grid;gap:10px}
.wl-wf__row{
  display:grid;
  grid-template-columns: 110px 56px minmax(0,1fr) 220px;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--wl-line);
  border-radius:16px;
  background:#fff;
}
.wl-wf__date{font-weight:950;color:var(--wl-primary);font-size:13px;white-space:nowrap}
.wl-wf__icon{
  width:56px;height:56px;border-radius:16px;
  border:1px solid var(--wl-line);
  background: linear-gradient(180deg,#fff 0%, rgba(51,83,129,.04) 100%);
  display:flex;align-items:center;justify-content:center;
  color: var(--wl-primary);
}
.wl-wf__icon svg{width:34px;height:34px}
.wl-wf__main{display:grid;gap:2px}
.wl-wf__temp{font-size:18px;font-weight:950;color:var(--wl-primary)}
.wl-wf__temp span{font-size:.85em;font-weight:850;opacity:.95}
.wl-wf__phrase{font-size:13px;font-weight:750;color:var(--wl-muted)}
.wl-wf__meta{display:grid;gap:4px;font-size:12px;color:var(--wl-muted);font-weight:750}
.wl-wf__meta strong{color:var(--wl-primary);font-weight:950}

@media (max-width:780px){
  .wl-wf__row{grid-template-columns: 1fr;align-items:start}
  .wl-wf__icon{width:52px;height:52px}
  .wl-wf__meta{grid-template-columns:1fr 1fr;gap:8px}
}
@media (max-width:520px){
  .wl-wf__meta{grid-template-columns:1fr}
}

/* ---- Gezeiten Countdown ---- */
.wl-tide__iconimg{width:18px;height:18px;display:block}
.wl-tide__icon .wl-tide__iconimg{width:22px;height:22px}
.wl-tide__countGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wl-tide__countItem{display:flex;align-items:center;gap:12px;border:1px solid var(--wl-line);border-radius:16px;padding:12px;background:#fff}
.wl-tide__countMain{display:grid;gap:2px}
.wl-tide__countLabel{font-weight:950;color:var(--wl-primary)}
.wl-tide__countTime{font-weight:800;color:var(--wl-muted);font-size:13px}
.wl-tide__countVal{margin-top:2px;font-size:18px;font-weight:950;color:var(--wl-accent);font-variant-numeric:tabular-nums}
@media (max-width:780px){
  .wl-tide__countGrid{grid-template-columns:1fr}
}