/* custom.css */
.is-sun {
  color: #f59905;
}

.is-moon {
  color: #3832a6;
}

.grid.is-col-min-16 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  grid-auto-rows: 1fr; /* Alle Zeilen gleich hoch */
}

.grid.is-col-min-18 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-auto-rows: 1fr; /* Alle Zeilen gleich hoch */
}

.grid.is-gap-4 {
  gap: 1rem;
}

.card {
  display: flex;
  flex-direction: column; /* Damit der Inhalt sich strecken kann */
  height: 100%; /* Jede Karte füllt ihre Grid-Zelle aus */
}

.card {
  transition: transform 0.3s ease-in-out;
}

.card:hover {
  transform: scale(1.03);
}

:root {
  --bulma-navbar-height: 3.5rem;
}

/* Light Mode (Standard) */
:root {
  --link-color: rgb(255, 0, 0);  /* Rot */
  --link-hover-color: rgb(200, 0, 0);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --link-hover-color: #FFC400;
    --link-color: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 1);
    --warning-base: hsla(var(--warning-h), var(--warning-s), var(--warning-l), 1);
    --warning-rgb: 255, 183, 15;
    --warning-h: 42deg;
    --warning-s: 100%;
    --warning-l: 53%;
    }
}

a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover-color);
}

.darklight {
  color: var(--link-color);
  background-color: transparent;
  border-color: var(--link-color);
}

.darklight:hover {
  color: var(--link-hover-color);
  background-color: transparent;
  border-color: var(--link-hover-color);
}


html,
body {
  height: 100%;         /* Damit das Flex-Layout 100% Höhe bekommt */
  margin: 0;            /* Standard-Browser-Margins entfernen */
}

body {
  display: flex;
  flex-direction: column;
}

/* Haupt-Content soll den verfügbaren Platz einnehmen */
.main-content {
  flex: 1 0 auto;
}

/* Footer darf nicht hochrutschen */
footer {
  flex-shrink: 0;
}

.footer {
  --bulma-footer-padding: 3rem 1.5rem 3rem;
  padding: var(--bulma-footer-padding);
}

.footer-badges {
  display: inline-flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.footer-badges img {
  height: 28px;   /* bei Bedarf 28–40px */
  vertical-align: middle;
}

.navbar {
  --bulma-footer-background-color: var(--bulma-scheme-main-bis);
  --bulma-footer-color: false;
  background-color: var(--bulma-footer-background-color);
}

.image.is-256x256 {
  height: 256px;
  width: 256px;
}

.navbar-link.has-text-warning::after {
  border-top-color: currentColor !important;
}

.my-shadow {
    border-radius: 50%;
    overflow: hidden; /* damit nichts übersteht */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@font-face {
  font-family: 'mario';
  src: url("../fonts/mario.0a40ba5cd532.eot?22922671");
  src: url("../fonts/mario.0a40ba5cd532.eot?22922671#iefix") format('embedded-opentype'),
       url("../fonts/mario.06fec56f6714.woff2?22922671") format('woff2'),
       url("../fonts/mario.e8e50c1d4c70.woff?22922671") format('woff'),
       url("../fonts/mario.aa75e21baf7c.ttf?22922671") format('truetype'),
       url("../fonts/mario.1dc1b5ca38ed.svg?22922671#mario") format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "mario";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-makerworld:before { content: '\e800'; } /* 'î €' */
.icon-emo-coffee:before { content: '\e801'; } /* 'î ' */
.icon-github:before { content: '\e802'; } /* 'î ‚' */
.icon-sun:before { content: '\e803'; } /* 'î ƒ' */
.icon-cup:before { content: '\e804'; } /* 'î „' */
.icon-blog:before { content: '\e805'; } /* 'î …' */
.icon-right-circled:before { content: '\e806'; } /* 'î †' */
.icon-moon:before { content: '\e807'; } /* 'î ‡' */
.icon-mastodon:before { content: '\e808'; } /* 'î ˆ' */
.icon-monitor:before { content: '\e809'; } /* 'î ‰' */
.icon-megaphone:before { content: '\e80a'; } /* 'î Š' */
.icon-code:before { content: '\f121'; } /* 'ï„¡' */
.icon-brush:before { content: '\f1fc'; } /* '' */
.icon-chart:before { content: '\f1fe'; } /* '' */
.icon-secret:before { content: '\f21b'; } /* '' */

:root {
  --mastodon: #8c8dff;        /* Brand-Basis (zu hell für Weiß) */
  --mastodon-strong: #6d6dc6; /* dunkler = WCAG 4.5:1 gg. Weiß */
  --mastodon-strong-2: #5b5ba5; /* noch dunkler fürs Hover */
}

/* Bulma Button-Variante */
.button.is-mastodon {
  background-color: var(--mastodon-strong);
  color: #fff;
  border-color: transparent;
}
.button.is-mastodon:hover,
.button.is-mastodon:focus {
  background-color: var(--mastodon-strong-2);
  color: #fff;
}

/* Optional: Tag-Variante (kleiner Chip) */
.tag.is-mastodon {
  background-color: var(--mastodon-strong);
  color: #fff;
  border: 0;
}
.tag.is-mastodon.is-light {
  background-color: transparent;
  color: var(--mastodon-strong);
  border: 1px solid var(--mastodon-strong);
}

/* === HERO =============================================================== */
.post-hero {
  position: relative;
  max-height: clamp(250px, 100vw, 500px);
  border-radius: 1rem;
  overflow: hidden;
  margin: 1rem 0 1.5rem;
  background: var(--bulma-scheme-main-bis, #111); /* Fallback beim Laden */
}
.post-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* sanfte Abdunkelung unten, damit Text immer lesbar ist */
.post-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.3) 30%,
    rgba(0,0,0,0.5) 80%
  );
  pointer-events: none;
}

/* Textblock unten links */
.post-hero__meta {
  position: absolute;
  left: 1.5rem;
  right: 1.25rem;
  bottom: 0.5rem;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.post-hero__meta a { pointer-events: auto; }

.post-hero__title {
  margin: 0 0 .25rem 0;
  color: #fff;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(1.5rem, 2.6vw + 1rem, 3rem);
}

.post-hero .is-title,
.post-hero__title {
  color: #fff !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.9);
}

@media (max-width: 480px) {
  .post-hero__meta { left: .9rem; right: .9rem; bottom: .8rem; }
}

/* === MODAL (Bild-Zoom) ================================================ */
#image-modal.is-active {
  display: flex;             /* zentrieren */
  align-items: center;
  justify-content: center;
}

#image-modal .modal-content {
  margin: 0;                 /* keine Standard-Margins */
  max-height: none;          /* Scrollen verhindern */
  overflow: visible;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#image-modal figure.image { margin: 0; }

#image-modal .modal-content img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;       /* keine Verzerrung */
}