/* ============================================================
   PROVINZIAL GRÜN – Linkstack Theme
   Provinzial Poll, Stein & Longerich OHG · Hagen
   Version: 1.6 · Mai 2026
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --psl-900:  #004733;
  --psl-800:  #005940;
  --psl-700:  #337A66;
  --psl-500:  #669B8C;
  --psl-300:  #99BDB3;
  --psl-100:  #CCDED9;
  --psl-50:   #E5EEEC;

  --psl-gray-800: #878787;
  --psl-gray-500: #B7B7B7;
  --psl-gray-100: #E7E7E7;
  --psl-gray-50:  #F3F3F3;

  --psl-text:   #3D3D3D;
  --psl-white:  #FFFFFF;

  --psl-shadow:       0 1px 4px rgba(0,71,51,.10);
  --psl-shadow-hover: 0 6px 20px rgba(0,71,51,.18);

  --psl-radius: 4px;
  --psl-font:   'Source Sans 3', 'Calibri', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   BASE
   ============================================================ */
html { font-size: 100%; }

body {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  font-family: var(--psl-font);
  color: var(--psl-text);
  background: linear-gradient(170deg, var(--psl-50) 0%, var(--psl-gray-50) 60%);
  background-attachment: fixed;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  border-top: 5px solid var(--psl-800);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ============================================================
   GRID
   ============================================================ */
.container {
  position: relative;
  width: 100%;
  max-width: 540px;
  text-align: center;
  margin: 28px auto 32px;
  box-sizing: border-box;
  background: var(--psl-white);
  border-radius: 0 0 var(--psl-radius) var(--psl-radius);
  box-shadow: 0 4px 32px rgba(0,71,51,.13);
  overflow: hidden;
  flex-shrink: 0;
}

.column {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 32px;
}

@media (min-width: 400px) { .container { width: 90%; padding: 0; } }

@media (min-width: 550px) {
  .container { width: 80%; }
  .column, .columns { margin-left: 0; }
  .column:first-child, .columns:first-child { margin-left: 0; }
}

/* Footer-Container zurücksetzen */
.container:has(> .footer) {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.container:has(> .footer)::before {
  display: none !important;
}

/* ============================================================
   GRÜNES HEADER-BAND – einfarbig (kein Verlauf)
   ============================================================ */
.container::before {
  content: '';
  display: block;
  height: 100px;
  background: var(--psl-800);
  flex-shrink: 0;
}

/* ============================================================
   PROFILBILD
   ============================================================ */
.rounded-avatar,
.column > img:first-child {
  display: block;
  position: relative;
  margin: -52px auto 12px;
  z-index: 1;
  border: 4px solid var(--psl-white) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(0,71,51,.22);
  background: var(--psl-white);
  width: 110px !important;
  height: 110px !important;
  object-fit: cover;
}

/* ============================================================
   TYPOGRAFIE
   ============================================================ */
h1 {
  margin: 14px 0 6px;
  font-weight: 900;
  color: var(--psl-800);
  letter-spacing: -.025em;
  line-height: 1.3;
  font-size: 24px;
}

@media (min-width: 550px) { h1 { font-size: 28px; } }

p {
  margin: 0 0 1.25rem;
  color: var(--psl-text);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--psl-800); text-decoration: none; transition: color .2s; }
a:hover { color: var(--psl-900); }
.spacing { padding: 0 10px; }

/* ============================================================
   BUTTON-ENTRANCE WRAPPER
   brands.css [class*="button-"]:hover trifft auch .button-entrance-Divs
   (kein border-radius) → grüne Quadrat-Ecken sichtbar hinter gerundeten Buttons.
   Dieser Block neutralisiert den Wrapper vollständig.
   ============================================================ */
.button-entrance {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.button-entrance:hover,
.button-entrance:focus,
.button-entrance:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* ============================================================
   BUTTONS – PSL OUTLINED
   ============================================================ */
button, .button { margin-bottom: .625rem; }

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  border: 2px solid var(--psl-800) !important;
  border-radius: var(--psl-radius) !important;
  background: var(--psl-white);
  color: var(--psl-800) !important;
  font-family: var(--psl-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition:
    background .22s ease,
    color      .22s ease,
    box-shadow .22s ease,
    transform  .15s ease;
  box-shadow: var(--psl-shadow);
  text-decoration: none !important;
  box-sizing: border-box;
}

.button:hover,
.button:focus {
  background: var(--psl-800) !important;
  color: var(--psl-white) !important;
  border-color: var(--psl-800) !important;
  border-top-left-radius:     var(--psl-radius) !important;
  border-top-right-radius:    var(--psl-radius) !important;
  border-bottom-left-radius:  var(--psl-radius) !important;
  border-bottom-right-radius: var(--psl-radius) !important;
  box-shadow: var(--psl-shadow-hover);
  transform: translateY(-2px);
  text-decoration: none !important;
  outline: none;
}

.button:active {
  background: var(--psl-900) !important;
  color: var(--psl-white) !important;
  border-color: var(--psl-900) !important;
  border-radius: var(--psl-radius) !important;
  transform: translateY(0);
}

/* ============================================================
   ANIMATIONS.CSS OVERRIDE
   animations.css: .button-hover:hover { transform: scale(1.1) }
   Das sorgt für eckige Ecken (Skalierung + overflow:hidden).
   Wir killen scale() komplett und ersetzen mit translateY.
   ============================================================ */
.button.button-hover {
  -webkit-transform: none;
  transform: none;
}
.button.button-hover:hover,
.button.button-hover:focus {
  -webkit-transform: translateY(-2px) !important;
  transform: translateY(-2px) !important;
  border-top-left-radius:     var(--psl-radius) !important;
  border-top-right-radius:    var(--psl-radius) !important;
  border-bottom-left-radius:  var(--psl-radius) !important;
  border-bottom-right-radius: var(--psl-radius) !important;
}
.button.button-hover:active {
  -webkit-transform: translateY(0) !important;
  transform: translateY(0) !important;
  border-radius: var(--psl-radius) !important;
}

/* ============================================================
   BUTTON-ICONS
   Alle Icons: brightness(0) → grauer Ton normal, weiß auf Hover.
   Einheitliches Verhalten für alle Button-Typen inkl. custom_website.
   ============================================================ */
.button:not(.button-heading):not(.button-space):not(.button-custom_website) .icon,
.button:not(.button-heading):not(.button-space):not(.button-custom_website) img.icon,
.button:not(.button-heading):not(.button-space):not(.button-custom_website) .hvr-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  object-fit: contain;
  margin-right: 10px;
  line-height: 1;
  transition: filter .22s ease, opacity .22s ease;
  filter: brightness(0) opacity(.60);
}

.button:not(.button-heading):not(.button-space):not(.button-custom_website):hover .icon,
.button:not(.button-heading):not(.button-space):not(.button-custom_website):hover img.icon,
.button:not(.button-heading):not(.button-space):not(.button-custom_website):hover .hvr-icon,
.button:not(.button-heading):not(.button-space):not(.button-custom_website):focus .icon,
.button:not(.button-heading):not(.button-space):not(.button-custom_website):focus img.icon,
.button:not(.button-heading):not(.button-space):not(.button-custom_website):focus .hvr-icon {
  filter: brightness(0) invert(1);
}

/* Website-Icons (Favicons) in Originalfarben anzeigen */
.button-custom_website .icon,
.button-custom_website img.icon,
.button-custom_website .hvr-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  object-fit: contain;
  margin-right: 10px;
  line-height: 1;
  filter: none;
  opacity: 0.85;
  transition: opacity .22s ease;
}

.button-custom_website:hover .icon,
.button-custom_website:hover img.icon,
.button-custom_website:focus .icon,
.button-custom_website:focus img.icon {
  filter: none;
  opacity: 1;
}

/* ============================================================
   ZWISCHENÜBERSCHRIFTEN – Kategorie-Divider
   ============================================================ */
.button-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;

  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-transform: none !important;

  padding: 24px 0 10px !important;
  margin-bottom: 4px !important;

  color: var(--psl-700) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: center !important;

  cursor: default;
  pointer-events: none;
  transition: none !important;
}

/* Dekorative Linien links/rechts */
.button-heading::before,
.button-heading::after {
  content: '' !important;
  display: block !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--psl-100) !important;
  min-width: 20px !important;
}

/* Kein Hover für Überschriften – alle Zustände gesperrt */
.button-heading:hover,
.button-heading:focus,
.button-heading:active,
.button-heading.button-hover,
.button-heading.button-hover:hover,
.button-heading.button-hover:focus,
.button-heading.button-hover:active {
  background: transparent !important;
  color: var(--psl-700) !important;
  transform: none !important;
  -webkit-transform: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  transition: none !important;
}

.button-heading .icon,
.button-heading img,
.button-heading img.icon,
.button-heading img.hvr-icon,
.button-heading .hvr-icon {
  display: none !important;
}

/* ============================================================
   SPACER – keine visuelle Reaktion
   ============================================================ */
.button-space {
  height: 10px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none !important;
  font-size: 0 !important;
  color: transparent !important;
  cursor: default;
  transition: none !important;
}

.button-space *,
.button-space img,
.button-space img.icon,
.button-space img.hvr-icon,
.button-space::before,
.button-space::after { display: none !important; }

.button.button-space,
.button.button-space:hover,
.button.button-space:focus,
.button.button-space:active,
.button.button-space.button-hover,
.button.button-space.button-hover:hover,
.button.button-space.button-hover:focus,
.button.button-space.button-hover:active {
  background: transparent !important;
  color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  pointer-events: none !important;
  height: 10px !important;
}

/* ============================================================
   ABSCHLUSS-ELEMENT – Ende der Link-Liste
   ============================================================ */
.column::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  background: var(--psl-300);
  border-radius: 2px;
  margin: 12px auto 0;
}

/* ============================================================
   SOCIAL ICONS (unter den Buttons – FA-Symbole, kein Text)
   ============================================================ */
.social-icon-div {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin: 8px 0 16px !important;
}

.social-icon {
  font-size: 26px !important;
  color: var(--psl-gray-800) !important;
  transition: color .2s, transform .2s;
  display: inline-block !important;
}

/* Kein scale(1.1) durch animations.css auf social-hover */
.social-hover {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-transform: none !important;
  transform: none !important;
}
.social-hover:hover,
.social-hover:focus {
  -webkit-transform: translateY(-3px) !important;
  transform: translateY(-3px) !important;
}
.social-hover:hover .social-icon,
a:hover .social-icon {
  color: var(--psl-800) !important;
}

/* ============================================================
   MISC / UTILS
   ============================================================ */
input, textarea, select, fieldset { margin-bottom: 1.5rem; }
pre, blockquote, dl, figure, p, ol { margin-bottom: 1.5rem; }

.u-full-width     { width: 100%; box-sizing: border-box; }
.u-max-full-width { max-width: 100%; box-sizing: border-box; }
.u-pull-right     { float: right; }
.u-pull-left      { float: left; }

hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid var(--psl-gray-100);
}

code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: var(--psl-gray-50);
  border: 1px solid var(--psl-gray-100);
  border-radius: var(--psl-radius);
}

pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--psl-300) var(--psl-50);
}
*::-webkit-scrollbar       { width: 6px; }
*::-webkit-scrollbar-track { background: var(--psl-50); }
*::-webkit-scrollbar-thumb { background-color: var(--psl-300); border-radius: 30px; }

/* ============================================================
   FOOTER
   ============================================================ */
.credit-txt {
  font-family: var(--psl-font);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}

.credit-txt-clr { color: var(--psl-gray-800) !important; }

footer {
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
  max-width: 540px;
}

.credit-footer {
  display: block;
  padding: 10px 0 22px;
  text-align: center;
  margin-top: auto;
}

.credit-footer:hover .credit-txt-clr { color: var(--psl-800) !important; }