/* COM-Portal 2026: klarer Einstieg zu den Schweizer Webseiten und Social Media. */
.portal-header {
  border-bottom:4px solid var(--red);
}

.portal-main {
  padding-top:0;
}

.portal-language-switch {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  min-height:52px;
  color:var(--muted);
  font-size:.78rem;
}

.portal-language-switch>span {
  margin-right:4px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.portal-language-switch a,
.portal-language-switch strong {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:30px;
  padding:5px 10px;
  border:1px solid #d7dadd;
  border-radius:999px;
  text-decoration:none;
  line-height:1;
}

.portal-language-switch strong {
  border-color:var(--red);
  background:var(--red);
  color:#fff;
}

.portal-language-switch a:hover {
  border-color:var(--red);
  background:#fff3f3;
}

.portal-intro {
  padding:38px 0 42px;
}

.portal-intro h1 {
  max-width:920px;
}

.portal-intro .hero-lead {
  max-width:830px;
}

.portal-choice-section {
  padding-top:39px;
}

.portal-choice-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.portal-panel {
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:30px;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 14px 34px rgb(45 10 14 / 8%);
}

.portal-panel::before {
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:var(--red);
}

.portal-panel-website {
  background:linear-gradient(145deg,#fff 0%,#f7f7f7 100%);
}

.portal-panel-social {
  border-color:#2d3032;
  background:
    radial-gradient(circle at 90% 4%,rgb(227 6 19 / 34%),transparent 18rem),
    linear-gradient(145deg,#35383a 0%,#222426 100%);
  color:#fff;
}

.portal-panel .eyebrow {
  margin-bottom:11px;
}

.portal-panel-social .eyebrow {
  color:#ffb7bc;
}

.portal-panel h2 {
  max-width:470px;
}

.portal-panel>p:not(.eyebrow) {
  min-height:78px;
  margin-top:15px;
  color:#5a5e60;
  font-size:.94rem;
  line-height:1.7;
}

.portal-panel-social>p:not(.eyebrow) {
  color:#d7d9da;
}

.portal-link-list {
  display:grid;
  gap:11px;
  margin-top:24px;
}

.portal-link-card {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 22px;
  gap:14px;
  align-items:center;
  min-height:82px;
  padding:14px;
  border:1px solid #d9dcdd;
  border-radius:6px;
  background:#fff;
  color:var(--ink);
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.portal-link-card:hover {
  transform:translateY(-2px);
  border-color:#c78a8e;
  box-shadow:0 9px 20px rgb(50 8 12 / 11%);
}

.portal-panel-social .portal-link-card {
  border-color:rgb(255 255 255 / 18%);
  background:rgb(255 255 255 / 8%);
  color:#fff;
}

.portal-panel-social .portal-link-card:hover {
  border-color:#9e3943;
  background:#64111a;
  box-shadow:0 9px 20px rgb(0 0 0 / 24%);
}

.portal-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff0f1;
  color:var(--red);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:-.02em;
}

.portal-panel-social .portal-icon {
  border-radius:0;
  background:transparent;
  color:var(--red);
}

.portal-social-icon {
  display:block;
  width:30px;
  height:30px;
}

.portal-social-link:hover .portal-social-mark,
.portal-social-link:focus-visible .portal-social-mark {
  color:#fff;
}

.portal-social-link:hover .portal-link-copy small,
.portal-social-link:focus-visible .portal-link-copy small {
  color:#fff;
}

.portal-link-copy {
  display:block;
  min-width:0;
}

.portal-link-copy small,
.portal-link-copy strong,
.portal-link-copy span {
  display:block;
}

.portal-link-copy small {
  margin-bottom:3px;
  color:var(--dark-red);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.1em;
  line-height:1.35;
  text-transform:uppercase;
}

.portal-panel-social .portal-link-copy small {
  color:#ffb7bc;
}

.portal-link-copy strong {
  font-size:.96rem;
  line-height:1.35;
}

.portal-link-copy span {
  margin-top:3px;
  color:#666a6c;
  font-size:.76rem;
  line-height:1.45;
}

.portal-panel-social .portal-link-copy span {
  color:#cfd1d2;
}

.portal-arrow {
  color:var(--red);
  font-size:1.1rem;
  font-weight:700;
}

.portal-panel-social .portal-arrow {
  color:#fff;
}

.advice-teaser-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.advice-teaser {
  display:flex;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  box-shadow:0 12px 28px rgb(45 10 14 / 7%);
  flex-direction:column;
}

.advice-teaser figure {
  margin:0;
}

.advice-teaser figure img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

.advice-teaser figcaption {
  padding:7px 10px;
  background:#f2f3f1;
  color:var(--muted);
  font-size:.7rem;
}

.advice-teaser-copy {
  display:flex;
  padding:23px;
  flex:1;
  flex-direction:column;
  align-items:flex-start;
}

.advice-teaser-copy h3 {
  margin-bottom:12px;
}

.advice-teaser-copy>p:not(.eyebrow) {
  color:#555b5e;
  font-size:.9rem;
  line-height:1.65;
}

.advice-teaser-copy .text-link {
  margin-top:auto;
  padding-top:18px;
}

.advice-overview-link {
  margin-top:22px;
}

@media (max-width:780px) {
  .portal-choice-grid {
    grid-template-columns:1fr;
  }

  .advice-teaser-grid {
    grid-template-columns:1fr;
  }

  .portal-panel>p:not(.eyebrow) {
    min-height:0;
  }
}

@media (max-width:500px) {
  .portal-language-switch {
    min-height:44px;
  }

  .portal-intro {
    padding:28px 0 31px;
  }

  .portal-choice-section {
    padding-top:29px;
  }

  .portal-panel {
    padding:23px 18px;
  }

  .portal-link-card {
    grid-template-columns:40px minmax(0,1fr) 16px;
    gap:11px;
    padding:12px;
  }

  .portal-icon {
    width:40px;
    height:40px;
  }
}