/* Reconstructed Popsy theme for contentcreation.school (colors sampled from live-site screenshots) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Nunito+Sans:wght@400;600;700&display=swap');

:root, body {
  --notion-page-width: min(1140px, 100%);
  --notion-max-width: 1140px;
  --notion-header-height: 64px;

  --heading-font: 'Poppins', -apple-system, sans-serif;
  --body-font: 'Nunito Sans', -apple-system, sans-serif;

  --notion-text-font-family: var(--body-font);
  --notion-text-font-size: 1.06rem;
  --notion-text-font-weight: 400;
  --notion-text-font-bold-weight: 700;
  --notion-text-color: #404040;
  --notion-text-color-60: rgba(38,38,38,.6);
  --notion-text-color-70: rgba(38,38,38,.7);

  --notion-title-font-family: var(--heading-font);
  --notion-title-font-size: 3.3rem;
  --notion-title-mobile-font-size: 2.2rem;
  --notion-title-font-weight: 600;
  --notion-title-font-bold-weight: 700;
  --notion-title-color: #262626;

  --notion-h-color: #262626;
  --notion-h-font-family: var(--heading-font);
  --notion-h-font-weight: 600;
  --notion-h1-font-family: var(--heading-font);
  --notion-h1-font-size: 2.3rem;
  --notion-h1-mobile-font-size: 1.8rem;
  --notion-h1-font-weight: 600;
  --notion-h1-font-bold-weight: 700;
  --notion-h2-font-family: var(--heading-font);
  --notion-h2-font-size: 2.3rem;
  --notion-h2-mobile-font-size: 1.8rem;
  --notion-h2-font-weight: 600;
  --notion-h2-font-bold-weight: 700;
  --notion-h3-font-family: var(--heading-font);
  --notion-h3-font-size: 1.25rem;
  --notion-h3-mobile-font-size: 1.15rem;
  --notion-h3-font-weight: 600;
  --notion-h3-font-bold-weight: 700;

  --notion-logo-font-family: var(--heading-font);
  --notion-logo-font-weight: 700;
  --notion-logo-font-size: 1rem;
  --notion-logo-image-icon-size: 34px;
  --notion-logo-image-size: 34px;
  --notion-logo-text-visible: inline;
  --notion-logo-text-size: 1rem;

  --notion-navigation-font-family: var(--body-font);
  --notion-navigation-font-size: 0.98rem;
  --notion-navigation-font-weight: 600;
  --notion-navigation-font-bold-weight: 700;
  --notion-navigation-font-color: #262626;
  --notion-navigation-home-visible: inline;

  --notion-button-text-font-family: var(--heading-font);
  --notion-button-font-size: 0.95rem;
  --notion-button-font-weight: 600;
  --notion-button-font-bold-weight: 700;
  --notion-button-padding: 12px 24px;
  --notion-button-border-radius: 9999px;
  --notion-button-letter-spacing: 0;
  --notion-button-text-transform: none;
  --fg-button-text-color: #262626;
  --bg-button-color: #2dd4bf;
  --bg-button-hover-color: #5eead4;

  --notion-image-radius: 10px;
  --notion-card-radius: 10px;
  --notion-badge-border: rgba(38,38,38,.15);
  --popsy-helper-buttons: #262626;
  --notion-section-break: none;
  --bg-color-secondary: #fafafa;
}

/* ---- Section palettes (sampled from live site) ---- */
.palette-0, .palette-2, .palette-7 { --bg-color:#ffffff; }
.palette-1 { --bg-color:#fafafa; }
.palette-3 { --bg-color:#fafafa; }
.palette-4 { --bg-color:#fafafa; }
.palette-6 {
  --bg-color:#fafafa;
  --bg-button-color:#f472b6;
  --bg-button-hover-color:#f9a8d4;
}
.palette-5 {
  --bg-color:#262626;
  --notion-text-color:#e8e7e5;
  --notion-text-color-60:rgba(255,255,255,.6);
  --notion-text-color-70:rgba(255,255,255,.7);
  --notion-title-color:#ffffff;
  --notion-h-color:#ffffff;
  --notion-navigation-font-color:#ffffff;
  color:#e8e7e5;
}
.palette-5 a { color:#ffffff; }

/* ---- Base ---- */
html, body { margin:0; padding:0; }
body {
  font-family: var(--body-font);
  color: var(--notion-text-color);
  background:#fff;
  -webkit-font-smoothing: antialiased;
}
section.section { padding-top: 56px; padding-bottom: 56px; }
section.section-navbar { padding-top: 0; padding-bottom: 0; }
.notion-page { margin: 0 auto; width: 100%; max-width: 1140px; }
.notion-page-content-inner { width: 100%; }
.notion-page-content-inner > * { width: 100%; }

/* ---- Typography ---- */
.notion-title, .notion-h, .notion-text, .notion-quote { white-space: pre-wrap; word-break: break-word; }
.notion-text { line-height: 1.65; font-size: var(--notion-text-font-size); font-family: var(--notion-text-font-family); color: var(--notion-text-color); margin: 0.4em 0; }
.notion-h { color: var(--notion-h-color); line-height: 1.3; margin: 0.6em 0 0.3em; }
.notion-h1 { font-size: var(--notion-h1-font-size); font-weight: var(--notion-h1-font-weight); }
.notion-h2 { font-size: var(--notion-h2-font-size); font-weight: var(--notion-h2-font-weight); }
.notion-h3 { font-size: var(--notion-h3-font-size); font-weight: var(--notion-h3-font-weight); }
.notion-title { color: var(--notion-title-color); line-height: 1.15; }
.notion-title-wrapper { padding-top: 40px; }
.notion-quote { border-left: 3px solid rgba(150,150,150,.6); font-size: var(--notion-text-font-size); line-height: 1.65; padding-left: 1.2em; }
.palette-5 .notion-quote { color:#e8e7e5; }

/* ---- Links & buttons ---- */
a.n-link, a.n-not-button { color: inherit; }
a.n-button {
  border-radius: var(--notion-button-border-radius);
  text-decoration: none;
  transition: background-color .15s ease;
}
a.n-button:hover { background-color: var(--bg-button-hover-color); }
a.n-button .n-link-icon { display: inline; margin-left: 8px; }

/* ---- Header ---- */
.p-header-logo-link { gap: 10px; }
.notion-page-icon-image img.p-header-logo { width: 34px; height: 34px; object-fit: contain; border-radius: 0; }
.p-header-logo-link .notion-page-icon-text { font-family: var(--heading-font); font-weight: 700; font-size: var(--notion-logo-font-size); letter-spacing: .03em; }
.p-header-nav .notion-page-title-text { font-size: var(--notion-navigation-font-size); font-weight: var(--notion-navigation-font-weight); font-family: var(--notion-navigation-font-family); }
.p-header-nav .notion-text, .p-header-nav .notion-page-title, .p-header-nav .notion-page-title-text { white-space: nowrap !important; overflow: visible !important; max-width: none !important; text-overflow: clip !important; }
.p-header-nav a { text-decoration: none; color: var(--notion-navigation-font-color); }
.p-header-nav a:hover { opacity:.7; }

/* ---- Columns ---- */
.notion-row { align-items: center; margin: 1rem 0; }
.notion-column { min-width: 0; flex-shrink: 1; }
@media only screen and (max-width: 639px) { .notion-row { margin: 0; } }

/* ---- Images (runtime sized them; the mirror has width:0 inline) ---- */
.slate-ImageElement-resizable { width: 100% !important; }
.slate-ImageElement-resizable img,
.notion-media-wrapper img { width: 100%; height: auto; display: block; border-radius: var(--notion-image-radius); }
figure.notion-media-wrapper { margin: 0; width: 100%; display:flex; justify-content:center; }
.notion-page-icon-inline img { border-radius: 0; }

/* standalone (non-column) images: cap width, center */
article.notion-page-content-inner > .slate-img .slate-ImageElement-resizable { width: min(100%, 460px) !important; }
/* hand-drawn popsy illustrations: keep small like the live site */
.notion-column .slate-ImageElement-resizable:has(img[src*="illustrations.popsy.co"]) { width: auto !important; }
.notion-column img[src*="illustrations.popsy.co"] { width: auto; height: 170px; }
.notion-column .slate-img figure:has(img[src*="illustrations.popsy.co"]) { justify-content: flex-start; }
article.notion-page-content-inner > .slate-img img[src*="illustrations.popsy.co"] { width: auto; height: 240px; margin: 0 auto; }
/* customer-logo collages (kunden page): match live-site scale */
.slate-ImageElement-resizable:has(img[src*="Kunden"]) { width: min(100%, 300px) !important; margin: 0 auto; }
.slate-img figure:has(img[src*="Kunden"]) { justify-content: center; }
img[src*="Kunden0"], img[src*="CCS_Kunden"] { border-radius: 0; }
.section-center .slate-ImageElement-resizable { width: min(100%, 360px) !important; }

/* circular portraits in dark sections */
.palette-5 .slate-ImageElement-resizable { width: min(100%, 260px) !important; }
.palette-5 .slate-ImageElement-resizable img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }
/* small avatars in testimonial cards (image followed by name h3) */
.palette-5 .slate-ColumnItemElement-content:has(h3) .slate-ImageElement-resizable { width: 84px !important; }
/* uniform testimonial card typography */
.palette-5 .slate-ColumnItemElement-content h3.notion-h3 { font-size: 1.15rem; margin: 0.8em 0 0.2em; }
.palette-5 .slate-ColumnItemElement-content .notion-text { font-size: var(--notion-text-font-size); line-height: 1.65; }
.palette-5 .slate-ColumnItemElement-content:has(h3) figure { justify-content: flex-start; }

/* ---- Testimonials (dark palette-5 sections with columns) ---- */
.palette-5 .notion-row { align-items: flex-start; }
/* equal-height columns across each row, no card chrome */
.palette-5 .ColumnsElement___StyledDiv-sc-p431ju-0 { align-items: stretch; }
.palette-5 .slate-ColumnItemElement-content { display: flex; flex-direction: column; height: 100%; }
/* avatar-only column (featured testimonial): center the portrait */
.palette-5 .slate-ColumnItemElement-content:not(:has(h3)) { justify-content: center; align-items: center; }
/* ---- Featured single testimonial (blockquote incl. name) ---- */
/* vertically center the quote against the large portrait */
.palette-5 .ColumnsElement___StyledDiv-sc-p431ju-0:has(blockquote) { align-items: center; }
/* enlarge the quote so it stands out */
.palette-5 blockquote.notion-quote:has(.slate-bold) {
  font-size: 1.6rem;
  line-height: 1.5;
  padding-left: 1.4rem;
}
/* keep name + role at a calmer size below the quote */
.palette-5 blockquote.notion-quote:has(.slate-bold) > span:nth-last-child(2) { font-size: 1.15rem; font-weight: 700; }
.palette-5 blockquote.notion-quote:has(.slate-bold) > span:last-child { font-size: 1.05rem; opacity: 0.72; }
/* trim empty spacer paragraphs above/below the card row */
.palette-5 article.notion-page-content-inner > p.notion-text:not(:has([data-slate-string])) { display: none; }

/* embeds (contact form) */
.slate-MediaEmbedElement-resizable { width: 100% !important; }
.slate-MediaEmbedElement-iframeWrapper { width: 100%; }

/* ---- Compact footer ---- */
/* index hero illustration: larger */
section[id^="section-333f2a90"] figure.slate-ImageElement-figure { height: 340px !important; }
section[id^="section-333f2a90"] .slate-ImageElement-resizable { width: 340px !important; }
section[id^="section-333f2a90"] .slate-ImageElement-resizable img { width: 100% !important; height: 100% !important; object-fit: contain; }
section[id^="section-ea1ea350"], section[id^="section-5e0d7bc2"] { padding-top: 24px !important; padding-bottom: 24px !important; }
/* hide empty spacer paragraphs (only zero-width chars / <br>) in the footer */
section[id^="section-ea1ea350"] p:not(:has([data-slate-string])), section[id^="section-5e0d7bc2"] p:not(:has([data-slate-string])) { display: none; }
section[id^="section-5e0d7bc2"] h3 { margin-top: 0; margin-bottom: 12px; }
section[id^="section-5e0d7bc2"] .notion-text { margin-top: 4px; margin-bottom: 4px; }
section[id^="section-5e0d7bc2"] .notion-row { margin: 0.5rem 0; }
section[id^="section-ea1ea350"] h3 { margin-top: 0; margin-bottom: 12px; }
section[id^="section-ea1ea350"] .notion-text { margin-top: 4px; margin-bottom: 4px; }
/* logo + address block (kontakt): small logo, tight spacing */
section[id^="section-ea1ea350"] .slate-ImageElement-resizable,
section[id^="section-ea1ea350"] article.notion-page-content-inner > .slate-img .slate-ImageElement-resizable { width: min(100%, 160px) !important; }
section[id^="section-ea1ea350"] figure.notion-media-wrapper { margin: 0; }
section[id^="section-ea1ea350"] .notion-row { margin: 0.5rem 0; }
/* kontakt: logo + address side by side */
section[id^="section-ea1ea350"] article.notion-page-content-inner:has(.slate-img) { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 48px; }
section[id^="section-ea1ea350"] article.notion-page-content-inner:has(.slate-img) > .slate-img { grid-column: 1; grid-row: 1 / span 4; width: 160px; }
section[id^="section-ea1ea350"] article.notion-page-content-inner:has(.slate-img) > .notion-text { grid-column: 2; width: auto; text-align: left; }

/* ---- Misc ---- */
.p-x-wrapper { display: none; }

/* ---- Mobile guards for custom overrides (<640px) ---- */
@media only screen and (max-width: 640px) {
  /* hero illustration must not overflow narrow screens */
  section[id^="section-333f2a90"] figure.slate-ImageElement-figure { height: auto !important; }
  section[id^="section-333f2a90"] .slate-ImageElement-resizable { width: min(300px, 80%) !important; margin: 0 auto; }
  section[id^="section-333f2a90"] .slate-ImageElement-resizable img { height: auto !important; }
  /* kontakt: stack logo above address instead of side-by-side */
  section[id^="section-ea1ea350"] article.notion-page-content-inner:has(.slate-img) { display: block; text-align: center; }
  section[id^="section-ea1ea350"] article.notion-page-content-inner:has(.slate-img) > .slate-img { margin: 0 auto 12px; }
  section[id^="section-ea1ea350"] article.notion-page-content-inner:has(.slate-img) > .notion-text { text-align: center; }
  /* calmer featured-quote size on small screens */
  .palette-5 blockquote.notion-quote:has(.slate-bold) { font-size: 1.25rem; }
}