/* =========================
   Local CSS bundle (no CDN)
   Minimal utility set used in index.html
   Font: system sans-serif stack
   ========================= */
:root{
  --yellow-50:#fefce8; --amber-50:#fffbeb;
  --yellow-100:#fef9c3; --yellow-400:#facc15; --yellow-500:#eab308; --yellow-600:#ca8a04;
  --gray-700:#374151; --gray-800:#1f2937; --gray-200:#e5e7eb; --black:#000; --white:#fff;
  --yellow-400-30: rgba(250, 204, 21, .3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,sans-serif;color:#000;background:#fff;line-height:1.5}
img{max-width:100%;display:block}

/* Layout helpers */
.container{max-width:1200px}
.mx-auto{margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem;padding-right:1rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.section{padding:5rem 0}
.p-6{padding:1.5rem}.p-4{padding:1rem}.pt-6{padding-top:1.5rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem;margin-top:0}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}
.mt-3{margin-top:.75rem}

/* Grid & Flex */
.grid{display:grid}.items-center{align-items:center}.items-start{align-items:flex-start}
.flex{display:flex}.inline-flex{display:inline-flex}.flex-wrap{flex-wrap:wrap}
.justify-center{justify-content:center}
.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-12{gap:3rem}
/* Columns on breakpoints */
@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .md\:text-5xl{font-size:3rem;line-height:1.1} .md\:text-7xl{font-size:4.5rem;line-height:1.05} .md\:text-3xl{font-size:1.875rem}}
@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Sizing */
.w-full{width:100%}.h-auto{height:auto}.h-12{height:3rem}.w-12{width:3rem}.h-5{height:1.25rem}.w-5{width:1.25rem}
.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}
/* Typography */
.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}
.font-bold{font-weight:800}.font-semibold{font-weight:700}.font-light{font-weight:300}
.leading-tight{line-height:1.15}.leading-relaxed{line-height:1.7}.italic{font-style:italic}
.text-center{text-align:center}
/* Colors */
.text-black{color:#000}.text-gray-700{color:var(--gray-700)}.text-gray-800{color:var(--gray-800)}
.text-yellow-100{color:var(--yellow-100)}.text-yellow-400{color:var(--yellow-400)}.text-yellow-500{color:var(--yellow-500)}
.bg-white{background:#fff}.bg-black{background:#000}.bg-yellow-50{background:var(--yellow-50)}
.bg-yellow-400\/10{background-color:rgba(250,204,21,.1)}
/* Gradient helper */
.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--from-color), var(--to-color));background-repeat:no-repeat;background-size:cover}
.from-yellow-50{--from-color:var(--yellow-50)}.to-amber-50{--to-color:var(--amber-50)}

/* Borders & radius */
.border{border-width:1px;border-style:solid;border-color:var(--gray-200)}
.border-t{border-top:1px solid var(--gray-200)}
.border-2{border-width:2px}.border-4{border-width:4px}
.border-gray-200{border-color:var(--gray-200)}
.border-yellow-400{border-color:var(--yellow-400)} .border-yellow-400-30{border-color:var(--yellow-400-30)}
.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}

/* Cards, tiles */
.card{border:2px solid var(--gray-200);border-radius:.75rem;box-shadow:0 10px 25px rgba(0,0,0,.04);transition:box-shadow .25s, border-color .25s}
.card:hover{box-shadow:0 14px 30px rgba(0,0,0,.08);border-color:var(--yellow-400)}
.tile{transition:background .25s,border-color .25s}
.tile:hover{background:rgba(250,204,21,.15);border-color:var(--yellow-400)}

/* Buttons */
.btn{border:2px solid #000;border-radius:.5rem;padding:.75rem 1rem;font-weight:700;text-decoration:none}
.btn-primary{background:#000;color:var(--yellow-100);border-color:var(--yellow-400)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-outline{background:transparent;color:#000}
.btn-outline:hover{background:var(--yellow-400);color:#000;border-color:var(--yellow-400)}
.link-underline{text-decoration:underline;text-underline-offset:2px}

/* Badges */
.badge{display:inline-block;padding:.4rem .75rem;border:1.5px solid #000;border-radius:.5rem;background:var(--yellow-400);color:#000;font-weight:700}

/* Icons (inline SVG via background-image) */
.icon{display:inline-block;vertical-align:middle}
.icon.huge{width:3rem;height:3rem}.icon.large{width:3rem;height:3rem}
.icon.mail{width:1.25rem;height:1.25rem;background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="2" viewBox="0 0 24 24"><path d="m4 6 8 6 8-6"/><rect width="20" height="14" x="2" y="5" rx="2"/></svg>')}
.icon.phone{width:1.25rem;height:1.25rem;background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="2" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.09 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.3 1.78.54 2.65a2 2 0 0 1-.45 2L8.09 9.91a16 16 0 0 0 6 6l1.54-1.54a2 2 0 0 1 2-.45c.87.24 1.75.42 2.65.54A2 2 0 0 1 22 16.92z"/></svg>')}
.icon.linkedin{width:1.25rem;height:1.25rem;background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M19 0h-14c-2.757 0-5 2.243-5 5v14c0 2.756 2.243 5 5 5h14c2.757 0 5-2.244 5-5v-14c0-2.757-2.243-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.784 1.764-1.75 1.764zm13.5 11.268h-3v-5.604c0-1.336-.024-3.056-1.863-3.056-1.865 0-2.151 1.457-2.151 2.962v5.698h-3v-10h2.879v1.367h.041c.401-.76 1.379-1.562 2.839-1.562 3.038 0 3.6 2.001 3.6 4.604v5.591z"/></svg>')}
.icon.users{width:1.25rem;height:1.25rem;background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="rgb(250,204,21)" stroke-width="2" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>')}
.icon.check{width:1.25rem;height:1.25rem;background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="rgb(250,204,21)" stroke-width="2" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>')}
.icon.quote{width:3rem;height:3rem;background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="rgb(250,204,21)" stroke-width="2" viewBox="0 0 24 24"><path d="M10 11H6a4 4 0 1 1 4-4v8a4 4 0 1 1-4 4"/><path d="M22 11h-4a4 4 0 1 1 4-4v8a4 4 0 1 1-4 4"/></svg>')}
.icon.arrow-right{width:1.25rem;height:1.25rem;background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>')}

/* Util */
.rounded-xl{border-radius:.75rem}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}
.shadow-xl{box-shadow:0 20px 40px rgba(0,0,0,.15)}
.object-cover{object-fit:cover}
.hover-yellow:hover{color:var(--yellow-400)}
.text-yellow-200\/80{color:rgba(254,240,138,.8)} .text-yellow-200\/60{color:rgba(254,240,138,.6)}
/* Project image ratio */
.project-card .project-image{aspect-ratio: 16 / 9; object-fit: cover; border-top-left-radius:.75rem; border-top-right-radius:.75rem}
.icon-tile{background:var(--yellow-400); padding:.75rem; border-radius:.5rem}

/* Utilities for responsive flex (just enough) */
.sm\:flex-row{flex-direction:column}
@media (min-width:640px){.sm\:flex-row{flex-direction:row}}

.logo-square {
  width: 100%;      /* passt sich Container an */
  max-width: 280px; /* maximal wie bisher */
  height: auto;     /* proportional */
  object-fit: contain;
}

.flex-col.sm\:flex-row {
  flex-direction: column; /* default mobil */
}
@media (min-width:640px){
  .flex-col.sm\:flex-row {
    flex-direction: row;  /* ab SM nebeneinander */
    align-items: flex-start; /* Text oben ausrichten */
  }
}

.flex-col > p, .flex-col > h1 {
  margin: 0; /* überschreibt evtl. mb-* von global */
}



.icon-png-100 {
  width: 100px;
  height: 100px;
  object-fit: contain;  /* skaliert das Icon, ohne es zu verzerren */
}

/* Kontakt-Karten flex und Größe */
.contact-cards {
  display: flex;
  justify-content: center; /* zentriert die Karten */
  flex-wrap: wrap; /* falls Bildschirm zu klein, stapeln sie sich */
  gap: 2rem; /* Abstand zwischen den Karten */
}

.card-small {
  flex: 0 1 250px; /* Karten max 250px breit, wachsen nicht zu viel */
}


.card .icon-tile img.icon-jpg {
  width: 3rem;       /* gleiche Höhe/Breite wie bisher */
  height: 3rem;
  object-fit: contain;
  border-radius: .5rem; /* wie vorher, optional */
  background: var(--yellow-400); /* falls du gelben Hintergrund behalten willst */
  padding: 0.75rem;   /* optional, falls du den bisherigen Padding-Effekt willst */
}


/* Projektkarten flex und Größe */
.project-cards {
  display: flex;
  justify-content: center; /* zentriert die Karten */
  flex-wrap: wrap;         /* stapelt bei kleinen Bildschirmen */
  gap: 2rem;               /* Abstand zwischen Karten */
}

.project-cards .card-small {
  flex: 0 1 300px;         /* Karten max 300px breit, flexibel */
}

/* Schrift im Textabschnitt angleichen */
.project-cards p {
  font-size: 1.125rem;     /* entspricht text-lg auf der Seite */
  color: var(--gray-700);  /* gleiche Farbe wie andere Absätze */
  line-height: 1.7;        /* konsistente Zeilenhöhe */
}

.vertical-project-cards {
  display: flex;
  flex-direction: column;
  align-items: center; /* Karten zentrieren */
  gap: 1.5rem;        /* Abstand zwischen Boxen */
}

.card .icon-png {
  width: 100px;          /* Originalgröße des PNGs */
  height: 100px;         /* Originalgröße */
  object-fit: contain;
}

.card .flex {
  align-items: flex-start; /* H3 startet an der Oberkante des Icons */
}

.card h3 {
  margin-top: 0;          /* überschreibt evtl. mt-3 oder mb-2 */
}

.list-custom {
  list-style: none;      /* entfernt Standard-Bullet */
  padding-left: 0;       /* kein Einzug */
}

.list-custom li {
  display: flex;
  align-items: center;
  gap: 0.5rem;           /* Abstand zwischen Icon und Text */
}

.list-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;    /* Icon unverzerrt */
}

.list-custom li {
  display: flex;
  align-items: center;
  gap: 0.5rem;          /* Abstand zwischen Icon und Text */
  margin-bottom: 0.5em; /* Abstand zwischen den Listenelementen (~halbe Zeilenhöhe) */
}

.list-custom li:last-child {
  margin-bottom: 0;     /* kein extra Abstand nach dem letzten Element */
}

.card .p-6.list-container {
  padding-top: 0.75rem;
  padding-bottom: 1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.card .list-custom-container {
  padding: 0 1.5rem 1.5rem 1.5rem; /* nur horizontal + unten padding */
}

.card .top-block {
  height: 200px; /* feste Höhe für Icon + H3 + P, nach Bedarf anpassen */
  display: flex;
  gap: 1rem;          /* Abstand zwischen Icon und Text */
  align-items: flex-start; /* H3 beginnt oben */
}

footer a {
  color: rgba(254,240,138,.6); /* gleiche Farbe wie Copyright-Zeile */
  text-decoration: underline;    /* Unterstrichen */
  text-underline-offset: 2px;   /* wie bei deinen anderen Links */
}

footer a:hover {
  color: var(--yellow-400); /* Hover bleibt gelb */
}

/* ====================
   STICKY HEADER FIX
   ==================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #ffffff;
  border-bottom: 1px solid #000000;
  padding: 0.7rem 0;
}

/* Layout Struktur */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Linker Bereich */
.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Logo korrekt links */
.header-logo {
  width: 62px;
  height: 62px;
  object-fit: contain;
}
/* Logo auf Mobile größer machen */
@media (max-width: 640px) {
  .header-logo {
    width: 87px;   /* vorher 62px */
    height: 87px;
  }
}

/* Text links untereinander */
.header-text {
  display: flex;
  flex-direction: column;
}

/* Name */
.header-name {
  font-size: 1.75rem;   /* vorher 1.25rem — jetzt harmonisch groß */
  font-weight: 700;
  color: #000;
  line-height: 1.25;
}

/* Claim */
.header-sub {
  font-size: 1.05rem;   /* vorher 0.9rem — jetzt deutlich besser lesbar */
  color: #374151;
  margin-top: 0.2rem;
}

/* Telefon rechts */
.header-phone {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;           /* Schwarzer Text */
  text-decoration: none;
}

.header-phone:hover {
  color: #facc00;        /* Gelb 400 wie dein Style */
}

/* Mobile */
@media (max-width: 640px) {
  .header-inner {
    flex-direction: column;
    gap: 0.5rem;
  }

  .header-phone {
    margin-top: 0.2rem;
  }
}

/* Scroll-Offset für Sticky Header */
#impressum,
#datenschutz {
  scroll-margin-top: 100px; /* Höhe des Sticky Headers + etwas Puffer */
}

/* Kompakte Card-Paddings für mobile Ansicht in #kompetenzen */
@media (max-width: 639px) {
  #kompetenzen .card .p-6 {
    padding-top: 0.75rem;   /* vorher 1.5rem */
    padding-bottom: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Mobile Version des Zitat-Icons */
@media (max-width: 639px) {
  .icon-png-100 {
    width: 50px;   /* halbiert */
    height: 50px;  /* halbiert */
  }
}