This commit is contained in:
GuidoSchenone
2025-12-12 10:16:48 -03:00
parent ef3172f7d8
commit e2c4630e89
3 changed files with 211 additions and 171 deletions

BIN
DataPrivacy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

View File

@@ -47,23 +47,22 @@
.neo-card:hover .glow-border::before {
opacity: .6;
}
.gradient-text {
background: linear-gradient(135deg, var(--cyp-blue) 0%, var(--cyp-purple) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* ---- accordion ---- */
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height .5s ease, padding .5s ease;
}
/* -------- same fade-card mechanics -------- */
.fade-card { cursor: pointer; }
.fade-card-inner { position: relative; }
.fade-card-explanation {
position: absolute; inset: 0; opacity: 0;
transition: opacity .5s ease; pointer-events: none;
.accordion-open .accordion-content {
max-height: 2000px;
padding-top: 1rem;
padding-bottom: 1rem;
}
.fade-card.active .fade-card-explanation { opacity: 1; }
.group:hover .fade-card-front {
border-color: #0ea5e9;
box-shadow: 0 0 24px -4px rgba(14, 165, 233, .5);
transform: translateY(-4px);
.accordion-icon {
transition: transform .3s ease;
}
.accordion-open .accordion-icon {
transform: rotate(180deg);
}
/* binary rain */
.binary-rain {
@@ -103,7 +102,6 @@
<span class="inline-block w-1 h-1 bg-blue-500 rounded-full"></span>
</div>
</div>
<div class="absolute inset-0 -z-10 opacity-20 pointer-events-none">
<div class="bg-gradient-to-r from-purple-500 to-blue-600 rounded-full w-96 h-96 blur-3xl mx-auto"></div>
</div>
@@ -112,7 +110,7 @@
<!-- --------------- MAIN CONTENT --------------- -->
<main class="max-w-5xl mx-auto px-6 pb-20">
<div class="text-lg text-gray-300 leading-relaxed space-y-6">
<div class="text-lg text-gray-300 leading-relaxed space-y-6 mb-10">
<p>
The protection of your personal data is a core component of cyber-sovereignty.
The following declaration explains what information we collect when you interact with our web presence,
@@ -120,151 +118,206 @@
</p>
</div>
<!-- 1. General -->
<section class="mt-12">
<h2 id="general" class="text-2xl font-bold mb-4 text-white flex items-center">
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
1. General Information
</h2>
<div class="neo-card rounded-xl p-6 glow-border text-gray-300 space-y-3">
<p>“Personal data” means any information that can identify you personally (e.g. name, e-mail, IP address).
Detailed legal references can be found in the respective sub-sections below.</p>
<!-- --------------------------------------------------
ACCORDION each heading unfolds your ORIGINAL text
--------------------------------------------------- -->
<!-- 1 -->
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
<span>1. General information</span>
<i class="fas fa-chevron-down accordion-icon text-blue-400"></i>
</button>
<div class="accordion-content px-6 text-gray-300 text-sm">
<p>The following notes provide a simple overview of what happens to your personal data when you visit this website. Personal data is all data with which you can be personally identified. Detailed information on the subject of data protection can be found in our data protection declaration listed under this text.</p>
</div>
</section>
</div>
<!-- 2. Collection -->
<section class="mt-10">
<h2 class="text-2xl font-bold mb-4 text-white flex items-center">
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
2. Data Collection on this Website
</h2>
<!-- 2 -->
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
<span>2. Data collection on this website</span>
<i class="fas fa-chevron-down accordion-icon text-blue-400"></i>
</button>
<div class="accordion-content px-6 text-gray-300 text-sm space-y-4">
<div>
<p class="font-semibold text-white">2.1. Who is responsible for data collection on this website?</p>
<p>The data processing on this website is carried out by the website operator. You can find their contact details in the section "Notice on the responsible body" in this data protection declaration.</p>
</div>
<div>
<p class="font-semibold text-white">2.2. How do we collect your data?</p>
<p>On the one hand, your data is collected when you communicate it to us. This can be z. B. be data that you enter in a contact form. Other data is collected automatically or with your consent by our IT systems when you visit the website. This is primarily technical data (e.g. internet browser, operating system or time of the page view). This data is collected automatically as soon as you enter this website.</p>
</div>
<div>
<p class="font-semibold text-white">2.3. What do we use your data for?</p>
<p>Part of the data is collected to ensure that the website is provided without errors. Other data can be used to analyze your user behavior.</p>
</div>
<div>
<p class="font-semibold text-white">2.4. What rights do you have regarding your data?</p>
<p>You have the right to receive information about the origin, recipient and purpose of your stored personal data free of charge at any time. You also have the right to request the correction or deletion of this data. If you have given your consent to data processing, you can revoke this consent at any time for the future. You also have the right, under certain circumstances, to request that the processing of your personal data be restricted. Furthermore, you have the right to lodge a complaint with the competent supervisory authority. You can contact us at any time if you have any further questions on the subject of data protection.</p>
</div>
</div>
</div>
<div class="grid md:grid-cols-3 gap-5">
<!-- card 1 -->
<div class="fade-card group" data-index="0">
<div class="fade-card-inner rounded-2xl overflow-hidden relative h-full">
<div class="fade-card-front neo-card rounded-xl p-5 h-full flex flex-col justify-center items-center text-center">
<i class="fas fa-user-shield text-blue-400 text-3xl mb-3"></i>
<h4 class="text-white font-semibold">Responsible Body</h4>
</div>
<div class="fade-card-explanation neo-card rounded-xl p-5 flex items-center justify-center text-center">
<p class="text-sm text-gray-300">CypSec contact details in §4 decides the purposes and means of all processing.</p>
</div>
</div>
<!-- 3 -->
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
<span>3. Data Protection</span>
<i class="fas fa-chevron-down accordion-icon text-blue-400"></i>
</button>
<div class="accordion-content px-6 text-gray-300 text-sm">
<p>The operators of these pages take the protection of your personal data very seriously. We treat your personal data confidentially and in accordance with the statutory data protection regulations and this data protection declaration.</p>
<p class="mt-2">If you use this website, various personal data will be collected. Personal data is data with which you can be personally identified. This data protection declaration explains what data we collect and what we use it for. It also explains how and for what purpose this happens.</p>
<p class="mt-2">We would like to point out that data transmission on the Internet (e.g. when communicating by e-mail) can have security gaps. A complete protection of the data against access by third parties is not possible.</p>
</div>
</div>
<!-- card 2 -->
<div class="fade-card group" data-index="1">
<div class="fade-card-inner rounded-2xl overflow-hidden relative h-full">
<div class="fade-card-front neo-card rounded-xl p-5 h-full flex flex-col justify-center items-center text-center">
<i class="fas fa-database text-purple-400 text-3xl mb-3"></i>
<h4 class="text-white font-semibold">What we collect</h4>
</div>
<div class="fade-card-explanation neo-card rounded-xl p-5 flex items-center justify-center text-center">
<p class="text-sm text-gray-300">Forms (name, e-mail, message) + technical logs (IP, browser, time) no marketing trackers.</p>
</div>
</div>
<!-- 4 -->
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
<span>4. Note on the Responsible Body</span>
<i class="fas fa-chevron-down accordion-icon text-blue-400"></i>
</button>
<div class="accordion-content px-6 text-gray-300 text-sm">
<p>The responsible body for data processing on this website is: <strong>CypSec</strong></p>
<p class="mt-1">Mail: <a href="mailto:contact@cypsec.de" class="text-blue-400 hover:underline">contact@cypsec.de</a></p>
</div>
</div>
<!-- card 3 -->
<div class="fade-card group" data-index="2">
<div class="fade-card-inner rounded-2xl overflow-hidden relative h-full">
<div class="fade-card-front neo-card rounded-xl p-5 h-full flex flex-col justify-center items-center text-center">
<i class="fas fa-cogs text-green-400 text-3xl mb-3"></i>
<h4 class="text-white font-semibold">Why we collect</h4>
<!-- 5 -->
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
<span>5. Storage Duration</span>
<i class="fas fa-chevron-down accordion-icon text-blue-400"></i>
</button>
<div class="accordion-content px-6 text-gray-300 text-sm">
<p>Unless a specific storage period has been specified in this data protection declaration, your personal data will remain with us until the purpose for data processing no longer applies. If you assert a legitimate request for deletion or revoke your consent to data processing, your data will be deleted unless we have other legally permissible reasons for storing your personal data (e.g. tax or commercial law retention periods); in the latter case, the data will be deleted once these reasons have ceased to exist.</p>
</div>
<div class="fade-card-explanation neo-card rounded-xl p-5 flex items-center justify-center text-center">
<p class="text-sm text-gray-300">To deliver the site, answer requests, improve security & comply with legal duties.</p>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- 3. Your Rights -->
<section class="mt-12">
<h2 class="text-2xl font-bold mb-4 text-white flex items-center">
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
3. Your Rights (GDPR in a Nutshell)
</h2>
<div class="neo-card rounded-xl p-6 glow-border">
<ul class="grid md:grid-cols-2 gap-x-6 gap-y-3 text-gray-300 text-sm">
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Information & access free of charge</span></li>
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Rectification of inaccurate data</span></li>
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Erasure (“right to be forgotten”)</span></li>
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Restriction of processing</span></li>
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Data portability (machine-readable)</span></li>
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Object at any time (incl. direct marketing)</span></li>
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Revoke consent with future effect</span></li>
<li class="flex items-start space-x-2"><i class="fas fa-check-circle text-blue-400 mt-0.5"></i><span>Lodge complaint with supervisory authority</span></li>
<!-- 6 -->
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
<span>6. General Information on the Legal Basis for Data Processing on this Website</span>
<i class="fas fa-chevron-down accordion-icon text-blue-400"></i>
</button>
<div class="accordion-content px-6 text-gray-300 text-sm">
<p>If you have consented to the data processing, we will process your personal data on the basis of Article 6 Paragraph 1 Letter a GDPR or Article 9 Paragraph 2 Letter a GDPR, if special data categories according to Article 9 Paragraph 1 GDPR are processed. In the event of express consent to the transfer of personal data to third countries, data processing is also based on Article 49 (1) (a) GDPR. If you have consented to the storage of cookies or access to information on your end device (e.g. via device fingerprinting), data processing is also based on Section 25 (1) TTDSG. The consent can be revoked at any time. If your data is required to fulfill the contract or to carry out pre-contractual measures, we process your data on the basis of Article 6 (1) (b) GDPR. Furthermore, we process your data if they are required to fulfill a legal obligation on the basis of Article 6 (1) (c) GDPR. Data processing can also take place on the basis of our legitimate interest in accordance with Art. 6 Para. 1 lit. f GDPR. The following paragraphs of this data protection declaration provide information on the relevant legal bases in each individual case.</p>
</div>
</div>
<!-- 7 -->
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
<span>7. Revocation of Your Consent to Data Processing</span>
<i class="fas fa-chevron-down accordion-icon text-blue-400"></i>
</button>
<div class="accordion-content px-6 text-gray-300 text-sm">
<p>Many data processing operations are only possible with your express consent. You can revoke consent that you have already given at any time. The legality of the data processing that took place up until the revocation remains unaffected by the revocation.</p>
<p class="mt-2 font-semibold text-white">Right to Object to Data Collection in Special Cases and to Direct Advertising (Art. 21 GDPR):</p>
<p>IF THE DATA PROCESSING IS BASED ON ART. 6 ABS. 1 LIT. E OR F GDPR, YOU HAVE THE RIGHT AT ANY TIME TO OBJECT TO THE PROCESSING OF YOUR PERSONAL DATA FOR REASONS ARISING FROM YOUR PARTICULAR SITUATION; THIS ALSO APPLIES TO PROFILING BASED ON THESE PROVISIONS. THE RESPECTIVE LEGAL BASIS ON WHICH A PROCESSING IS BASED CAN BE FOUND IN THIS DATA PRIVACY POLICY. IF YOU OBJECT, WE WILL NO LONGER PROCESS YOUR PERSONAL DATA INVOLVED, UNLESS WE CAN PROVE COMPREHENT PROTECTIVE GROUNDS FOR THE PROCESSING WHICH OVERRIDE YOUR INTERESTS, RIGHTS AND FREEDOMS OR THE PROCESSING IS FOR THE PURPOSE, EXERCISE OR DEFENSE LEGAL CLAIMS ( OBJECTION ACCORDING TO ARTICLE 21 (1) GDPR).</p>
<p class="mt-2">IF YOUR PERSONAL DATA IS PROCESSED FOR DIRECT ADVERTISING, YOU HAVE THE RIGHT TO OBJECT AT ANY TIME TO THE PROCESSING OF YOUR PERSONAL DATA FOR SUCH ADVERTISING PURPOSES; THIS ALSO APPLIES TO PROFILING TO THE EXTENT RELATED TO SUCH DIRECT ADVERTISING. IF YOU OBJECT, YOUR PERSONAL DATA WILL NO LONGER BE USED FOR DIRECT ADVERTISING PURPOSES (OBJECTION ACCORDING TO ART. 21 (2) GDPR).</p>
</div>
</div>
<!-- 8 -->
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
<span>8. Right of Appeal to the Competent Supervisory Authority</span>
<i class="fas fa-chevron-down accordion-icon text-blue-400"></i>
</button>
<div class="accordion-content px-6 text-gray-300 text-sm">
<p>In the event of violations of the GDPR, those affected have the right to lodge a complaint with a supervisory authority, in particular in the Member State of their habitual residence, their place of work or the place of the alleged violation. The right to lodge a complaint is without prejudice to any other administrative or judicial remedy.</p>
</div>
</div>
<!-- 9 -->
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
<span>9. Right to Data Portability</span>
<i class="fas fa-chevron-down accordion-icon text-blue-400"></i>
</button>
<div class="accordion-content px-6 text-gray-300 text-sm">
<p>You have the right to have data that we process automatically on the basis of your consent or in fulfillment of a contract handed over to you or to a third party in a common, machine-readable format. If you request the direct transfer of the data to another person responsible, this will only be done to the extent that it is technically feasible.</p>
</div>
</div>
<!-- 10 -->
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
<span>10. SSL or TLS Encryption</span>
<i class="fas fa-chevron-down accordion-icon text-blue-400"></i>
</button>
<div class="accordion-content px-6 text-gray-300 text-sm">
<p>For security reasons and to protect the transmission of confidential content, such as orders or inquiries that you send to us as the site operator, this site uses SSL or TLS encryption. You can recognize an encrypted connection by the fact that the address line of the browser changes from "http://" to "https://" and by the lock symbol in your browser line.</p>
<p class="mt-2">If SSL or TLS encryption is activated, the data that you transmit to us cannot be read by third parties.</p>
</div>
</div>
<!-- 11 -->
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
<span>11. Information, Deletion and Correction</span>
<i class="fas fa-chevron-down accordion-icon text-blue-400"></i>
</button>
<div class="accordion-content px-6 text-gray-300 text-sm">
<p>Within the framework of the applicable legal provisions, you have the right to free information about your stored personal data, its origin and recipient and the purpose of the data processing and, if necessary, a right to correction or deletion of this data at any time. You can contact us at any time if you have any further questions on the subject of personal data.</p>
</div>
</div>
<!-- 12 -->
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
<span>12. Right to Restriction of Processing</span>
<i class="fas fa-chevron-down accordion-icon text-blue-400"></i>
</button>
<div class="accordion-content px-6 text-gray-300 text-sm">
<p>You have the right to request the restriction of the processing of your personal data. You can contact us at any time for this. The right to restriction of processing exists in the following cases:</p>
<ul class="list-disc ml-5 mt-2 space-y-1">
<li>If you dispute the accuracy of your personal data stored by us, we usually need time to check this. For the duration of the examination, you have the right to request that the processing of your personal data be restricted.</li>
<li>If the processing of your personal data happened/is happening unlawfully, you can request the restriction of data processing instead of deletion.</li>
<li>If we no longer need your personal data, but you need it to exercise, defend or assert legal claims, you have the right to demand that the processing of your personal data be restricted instead of being deleted.</li>
<li>If you have lodged an objection in accordance with Art. 21 (1) GDPR, your interests and ours must be weighed up. As long as it has not yet been determined whose interests prevail, you have the right to demand that the processing of your personal data be restricted.</li>
</ul>
<p class="mt-2">If you have restricted the processing of your personal data, this data - apart from its storage - may only be used with your consent or to assert, exercise or defend legal claims or to protect the rights of another natural or legal person or for reasons of important public interest of the European Union or a Member State are processed.</p>
</div>
</section>
</div>
<!-- 4. Contact -->
<section id="contact" class="relative mt-16 p-10 neo-card rounded-xl overflow-hidden glow-border text-center">
<!-- 13 -->
<div class="accordion neo-card rounded-xl mb-4 glow-border overflow-hidden">
<button class="accordion-trigger w-full flex items-center justify-between px-6 py-4 text-left text-white font-semibold text-lg focus:outline-none">
<span>13. Server log files</span>
<i class="fas fa-chevron-down accordion-icon text-blue-400"></i>
</button>
<div class="accordion-content px-6 text-gray-300 text-sm">
<p>The provider of the pages automatically collects and stores information in so-called server log files, which your browser automatically transmits to us. These are: Browser type and browser version, operating system used, host name of the accessing computer time of server request and the IP address. This data is not merged with other data sources.</p>
<p class="mt-2">This data is collected on the basis of Article 6 (1) (f) GDPR. The website operator has a legitimate interest in the technically error-free presentation and optimization of his website - the server log files must be recorded for this purpose.</p>
<p class="mt-2">Source: <a href="https://www.e-recht24.de" class="text-blue-400 hover:underline" target="_blank">https://www.e-recht24.de</a></p>
</div>
</div>
<!-- --------------------------------------------------
END ACCORDION
--------------------------------------------------- -->
<!-- --------------- FUSED CTA with BACKGROUND IMAGE --------------- -->
<section id="contact" class="relative mt-20 rounded-xl overflow-hidden text-center">
<!-- background image -->
<img src="DataPrivacy.png" alt="Data Privacy" class="absolute inset-0 w-full h-full object-cover">
<!-- dark overlay -->
<div class="absolute inset-0 bg-black/60"></div>
<!-- glowing border wrapper -->
<div class="relative glow-border neo-card bg-black/40 backdrop-blur-sm border border-gray-800 m-4 p-10">
<div class="relative z-10">
<h3 class="text-2xl font-bold mb-2 text-white">Exercise Your Rights or Ask Us</h3>
<p class="text-gray-300 mb-6">We answer every privacy-related request within 30 days no automated bureaucracy.</p>
<h3 class="text-2xl font-bold mb-2 text-white">Questions about Privacy?</h3>
<p class="text-gray-300 mb-6">Contact our Data Protection Officer directly no bots, no waiting loops.</p>
<a href="mailto:privacy@cypsec.de?subject=Privacy%20Request" class="inline-flex items-center px-6 py-3 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold hover:scale-105 transition-transform">
<i class="fas fa-envelope mr-2"></i>privacy@cypsec.de
</a>
</div>
</section>
<!-- 5. Storage & Security -->
<section class="mt-12">
<h2 class="text-2xl font-bold mb-4 text-white flex items-center">
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
4. Storage Duration & Security
</h2>
<div class="neo-card rounded-xl p-6 glow-border text-gray-300 space-y-3 text-sm">
<p><strong>Duration:</strong> We keep data only as long as necessary for the stated purpose or as required by law (e.g. 10 y for tax records, 7 d for short-lived server logs).</p>
<p><strong>Security:</strong> TLS-1.3 encryption in transit, AES-256 at rest, strict access control, regular penetration tests, no external ad-networks, no CDN that profiles visitors.</p>
</div>
</section>
<!-- 6. Legal Bases -->
<section class="mt-10">
<h2 class="text-2xl font-bold mb-4 text-white flex items-center">
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
5. Legal Bases we rely on
</h2>
<div class="neo-card rounded-xl p-6 glow-border text-gray-300 space-y-3 text-sm">
<p><strong>Art. 6 (1) b GDPR</strong> processing necessary for contractual services or pre-contractual steps.</p>
<p><strong>Art. 6 (1) c GDPR</strong> compliance with legal obligations (commercial, tax, security reporting).</p>
<p><strong>Art. 6 (1) f GDPR</strong> legitimate interests (network security, abuse prevention, bug-fixing).</p>
<p><strong>Art. 6 (1) a & 9 (2) a GDPR</strong> where you gave explicit consent (newsletter, research participation).</p>
</div>
</section>
<!-- 7. Server Log Files -->
<section class="mt-10">
<h2 class="text-2xl font-bold mb-4 text-white flex items-center">
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
6. Server Log Files
</h2>
<div class="neo-card rounded-xl p-6 glow-border text-gray-300 space-y-3 text-sm">
<p>Our servers store: browser type/version, OS, referrer-URL, host name, time stamp, IP.
Data remains isolated, is never merged with other sources, and is automatically deleted after <strong>7 days</strong>.
Legal basis: Art. 6 (1) f GDPR network security & error diagnosis.</p>
</div>
</section>
<!-- 8. Updates -->
<section class="mt-10">
<h2 class="text-2xl font-bold mb-4 text-white flex items-center">
<span class="w-1 h-7 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
7. Changes to this Declaration
</h2>
<div class="neo-card rounded-xl p-6 glow-border text-gray-300 text-sm">
<p>We publish the effective date below and notify active members by e-mail for substantial changes.
Last updated: <strong>12 December 2025</strong>.</p>
</div>
</section>
</main>
</section>
<!-- --------------- FOOTER --------------- -->
<footer class="border-t border-gray-800 bg-black">
<div class="max-w-6xl mx-auto px-6 py-8 text-gray-400 text-sm">
@@ -280,24 +333,11 @@
</footer>
<script>
/* ---- same click-fade mechanic as Security-Hub ---- */
const cards = document.querySelectorAll('.fade-card');
let timers = new Map();
cards.forEach(card => {
const expl = card.querySelector('.fade-card-explanation');
card.addEventListener('click', () => {
clearTimeout(timers.get(card));
card.classList.add('active');
expl.style.opacity = '1';
const t = setTimeout(() => {
card.classList.remove('active');
expl.style.opacity = '0';
timers.delete(card);
}, 10000);
timers.set(card, t);
/* ---- accordion logic ---- */
document.querySelectorAll('.accordion-trigger').forEach(btn => {
btn.addEventListener('click', () => {
const parent = btn.closest('.accordion');
parent.classList.toggle('accordion-open');
});
});
</script>